// portfolio/pages-content.jsx — About, Contact, Gallery

const { useState } = React;

// ── About (balanced — short intro + timeline + skills) ────────────────────
function AboutC() {
  const P = window.PORTFOLIO;
  return (
    <div>
      <p style={{ fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: '16px', color: '#888', lineHeight: 1.8, marginBottom: '48px', maxWidth: '560px' }}>
        I'm Chibuzor — backend developer from Lagos, Nigeria. I build production APIs,
        manage databases, and wrangle infrastructure. I care about systems that work
        quietly and reliably, especially when nobody is watching.
      </p>

      {/* Experience timeline */}
      <div style={{ marginBottom: '48px' }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '10px', color: '#3a3a3a', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: '24px' }}>Experience</div>
        <div style={{ position: 'relative' }}>
          <div style={{ position: 'absolute', left: '3px', top: 0, bottom: 0, width: '1px', background: '#1e1e1e' }} />
          {P.experience.map((e, i) => (
            <div key={i} style={{ paddingLeft: '24px', paddingBottom: '28px', position: 'relative' }}>
              <div style={{ position: 'absolute', left: 0, top: '5px', width: '7px', height: '7px', borderRadius: '50%', background: '#1e1e1e', border: '1px solid #333' }} />
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '3px' }}>
                <div style={{ fontFamily: "'Lora', Georgia, serif", fontSize: '0.95rem', fontWeight: 600, color: '#ece9e4' }}>{e.role}</div>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '10px', color: '#333', flexShrink: 0, marginLeft: '12px' }}>{e.period}</div>
              </div>
              <div style={{ fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: '12px', color: '#555', marginBottom: '6px' }}>{e.company}</div>
              <p style={{ fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: '13px', color: '#777', lineHeight: 1.65 }}>{e.desc}</p>
            </div>
          ))}
        </div>
      </div>

      {/* Skills */}
      <div style={{ marginBottom: '40px' }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '10px', color: '#3a3a3a', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: '18px' }}>Skills</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
          {P.skills.map(s => (
            <div key={s.cat} style={{ display: 'flex', gap: '14px', alignItems: 'flex-start' }}>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '10px', color: '#3a3a3a', minWidth: '80px', paddingTop: '3px' }}>{s.cat}</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '5px' }}>
                {s.items.map(item => <span key={item} className="tag-pill">{item}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Education */}
      <div style={{ borderTop: '1px solid #1a1a1a', paddingTop: '32px' }}>
        {P.education.map((e, i) => (
          <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: i < P.education.length - 1 ? '16px' : 0 }}>
            <div>
              <div style={{ fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: '14px', color: '#888' }}>{e.school}</div>
              <div style={{ fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: '12px', color: '#444', marginTop: '2px' }}>{e.degree}</div>
            </div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '10px', color: '#333' }}>{e.period}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── About page ─────────────────────────────────────────────────────────────
function About() {
  return (
    <div className="page-enter" style={{ padding: '56px 48px', maxWidth: '760px' }}>
      <div style={{ marginBottom: '8px' }}>
        <span style={{ fontFamily: "'Lora', Georgia, serif", fontSize: '2rem', fontWeight: 700, color: '#ece9e4' }}>About</span>
      </div>
      <p style={{ fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: '14px', color: '#555', marginBottom: '48px' }}>
        Chibuzor Adigwe — iamphantasm0.
      </p>
      <AboutC />
    </div>
  );
}

// ── Contact ────────────────────────────────────────────────────────────────
function Contact() {
  const P = window.PORTFOLIO;
  const [form, setForm] = useState({ name: '', email: '', message: '' });
  const [sent, setSent]   = useState(false);

  const update = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const handleSubmit = (e) => { e.preventDefault(); setSent(true); };

  return (
    <div className="page-enter" style={{ padding: '56px 48px', maxWidth: '760px' }}>
      <div style={{ marginBottom: '8px' }}>
        <span style={{ fontFamily: "'Lora', Georgia, serif", fontSize: '2rem', fontWeight: 700, color: '#ece9e4' }}>Contact</span>
      </div>
      <p style={{ fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: '14px', color: '#555', marginBottom: '48px' }}>
        I'm open to backend engineering roles and interesting conversations.
      </p>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 220px', gap: '48px' }}>
        {sent ? (
          <div style={{ background: '#141414', border: '1px solid #222', borderRadius: '10px', padding: '32px', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '12px' }}>
            <div style={{ width: '6px', height: '6px', borderRadius: '50%', background: '#555' }} />
            <div style={{ fontFamily: "'Lora', Georgia, serif", fontSize: '1.2rem', fontWeight: 600, color: '#ece9e4' }}>Message sent.</div>
            <p style={{ fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: '14px', color: '#777', lineHeight: 1.65 }}>
              Thanks for reaching out. I'll get back to you soon.
            </p>
          </div>
        ) : (
          <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
            <div>
              <label style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '10px', color: '#3a3a3a', letterSpacing: '0.06em', textTransform: 'uppercase', display: 'block', marginBottom: '7px' }}>Name</label>
              <input className="form-input" type="text" required placeholder="Your name" value={form.name} onChange={update('name')} />
            </div>
            <div>
              <label style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '10px', color: '#3a3a3a', letterSpacing: '0.06em', textTransform: 'uppercase', display: 'block', marginBottom: '7px' }}>Email</label>
              <input className="form-input" type="email" required placeholder="your@email.com" value={form.email} onChange={update('email')} />
            </div>
            <div>
              <label style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '10px', color: '#3a3a3a', letterSpacing: '0.06em', textTransform: 'uppercase', display: 'block', marginBottom: '7px' }}>Message</label>
              <textarea className="form-input" required rows={6} placeholder="What's on your mind?" value={form.message} onChange={update('message')} style={{ resize: 'vertical', minHeight: '120px' }} />
            </div>
            <button type="submit" className="btn-primary" style={{ alignSelf: 'flex-start', marginTop: '4px' }}>Send Message</button>
          </form>
        )}

        <div>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '10px', color: '#3a3a3a', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: '16px' }}>Direct</div>
          <a href={`mailto:${P.email}`} style={{ display: 'block', fontFamily: "'JetBrains Mono', monospace", fontSize: '11px', color: '#888', marginBottom: '20px', textDecoration: 'none', wordBreak: 'break-all' }}>
            {P.email}
          </a>

          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '10px', color: '#3a3a3a', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: '14px' }}>Social</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
            {[
              { label: 'GitHub',      url: P.social.github   },
              { label: 'LinkedIn',    url: P.social.linkedin },
              { label: 'Twitter / X', url: P.social.twitter  },
            ].map(s => (
              <a key={s.label} href={s.url} target="_blank" rel="noopener"
                style={{ fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: '13px', color: '#666', textDecoration: 'none', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
                onMouseEnter={e => e.currentTarget.style.color = '#ece9e4'}
                onMouseLeave={e => e.currentTarget.style.color = '#666'}>
                {s.label}
                <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '10px', color: '#333' }}>↗</span>
              </a>
            ))}
          </div>

          {P.available && (
            <div style={{ marginTop: '28px', background: '#141414', border: '1px solid #222', borderRadius: '8px', padding: '14px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '6px' }}>
                <div style={{ width: '5px', height: '5px', borderRadius: '50%', background: '#555' }} />
                <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '10px', color: '#666' }}>available</span>
              </div>
              <p style={{ fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: '12px', color: '#777', lineHeight: 1.6 }}>
                Open to backend engineering roles — remote preferred.
              </p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ── Gallery ────────────────────────────────────────────────────────────────
const GALLERY_ITEMS = [
  { label: 'Lagos skyline at dusk',    ratio: '4/3'  },
  { label: 'Dev setup — dual monitors',ratio: '3/2'  },
  { label: 'Airport terminal, 5am',    ratio: '16/9' },
  { label: 'Code on screen — late night', ratio: '4/3' },
  { label: 'Street food, Victoria Island', ratio: '1/1' },
  { label: 'Books + coffee',           ratio: '3/4'  },
  { label: 'Nature — Obudu Plateau',   ratio: '16/9' },
  { label: 'Friends on a rooftop',     ratio: '4/3'  },
  { label: 'Concert / live music',     ratio: '3/2'  },
];

function Gallery() {
  return (
    <div className="page-enter" style={{ padding: '56px 48px' }}>
      <div style={{ marginBottom: '8px' }}>
        <span style={{ fontFamily: "'Lora', Georgia, serif", fontSize: '2rem', fontWeight: 700, color: '#ece9e4' }}>Gallery</span>
      </div>
      <p style={{ fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: '14px', color: '#555', marginBottom: '40px' }}>
        Moments. Places. Things worth remembering.
      </p>
      <div style={{ columns: '3', columnGap: '12px', maxWidth: '880px' }}>
        {GALLERY_ITEMS.map((item, i) => (
          <div key={i} style={{
            aspectRatio: item.ratio, background: '#121212',
            border: '1px solid #1a1a1a', borderRadius: '8px',
            display: 'flex', flexDirection: 'column', alignItems: 'center',
            justifyContent: 'center', gap: '8px',
            breakInside: 'avoid', marginBottom: '12px',
          }}>
            <div style={{
              width: '32px', height: '32px', borderRadius: '4px',
              background: 'repeating-linear-gradient(45deg,#1c1c1c,#1c1c1c 3px,#141414 3px,#141414 9px)',
            }} />
            <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '9px', color: '#2a2a2a', textAlign: 'center', padding: '0 16px', lineHeight: 1.5 }}>
              {item.label}
            </span>
          </div>
        ))}
      </div>
      <div style={{ marginTop: '32px', padding: '20px 24px', background: '#141414', border: '1px dashed #222', borderRadius: '8px', maxWidth: '880px' }}>
        <p style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '11px', color: '#3a3a3a', lineHeight: 1.6 }}>
          Drop your photos here to fill the gallery — replace placeholder slots with real images.
        </p>
      </div>
    </div>
  );
}

Object.assign(window, { About, Contact, Gallery });