// about.jsx - bio, portrait placeholder, education, experience, skills
function PortraitSlot() {
  if (typeof PROFILE !== 'undefined' && PROFILE.headshot) {
    return (
      <div style={{ width: '100%', aspectRatio: '4 / 5', borderRadius: 14, overflow: 'hidden',
        border: '1px solid var(--hairline)', background: 'var(--canvas-parchment)' }}>
        <img src={PROFILE.headshot} alt="Samuel Doane" loading="lazy"
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
      </div>
    );
  }
  return (
    <div style={{ width: '100%', aspectRatio: '4 / 5', borderRadius: 14, background: 'var(--canvas-parchment)',
      border: '1px solid var(--hairline)', display: 'grid', placeItems: 'center', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, opacity: 0.5,
        backgroundImage: 'repeating-linear-gradient(135deg, rgba(0,0,0,0.03) 0 1px, transparent 1px 12px)' }} />
      <div style={{ position: 'relative', textAlign: 'center', color: 'var(--ink-muted-48)' }}>
        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="8.5" r="3.6" /><path d="M5 20c0-3.6 3.1-6 7-6s7 2.4 7 6" />
        </svg>
        <div className="t-caption" style={{ marginTop: 10 }}>Portrait</div>
        <div style={{ display: 'inline-block', marginTop: 10, padding: '4px 11px', borderRadius: 9999,
          border: '1px solid var(--hairline)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase' }}>Placeholder</div>
      </div>
    </div>
  );
}

function AboutPage({ go, onContact, onResume }) {
  return (
    <div style={{ background: '#fff' }}>
      {/* Intro */}
      <section style={{ padding: 'clamp(48px,6vw,80px) clamp(18px,4vw,40px) clamp(44px,6vw,64px)' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', display: 'grid',
          gridTemplateColumns: 'minmax(0,1.6fr) minmax(0,1fr)', gap: 'clamp(32px,5vw,72px)', alignItems: 'start' }}
          className="hero-grid">
          <div>
            <Reveal><Eyebrow>About</Eyebrow></Reveal>
            <Reveal delay={60}>
              <h1 style={{ margin: '12px 0 0', color: 'var(--ink)', fontFamily: 'var(--font-display)', fontWeight: 600,
                fontSize: 'clamp(32px,4.4vw,52px)', lineHeight: 1.05, letterSpacing: '-0.025em', textWrap: 'balance' }}>{PROFILE.positioning}</h1>
            </Reveal>
            <div style={{ marginTop: 26 }}>
              {PROFILE.long.map((para, i) => (
                <Reveal key={i} delay={100 + i * 60}>
                  <p className="t-body" style={{ color: 'var(--ink)', margin: i ? '18px 0 0' : 0, fontSize: 18, lineHeight: 1.6, textWrap: 'pretty' }}>{para}</p>
                </Reveal>
              ))}
            </div>
            <Reveal delay={280}>
              <div style={{ display: 'flex', gap: 12, marginTop: 30, flexWrap: 'wrap' }}>
                <Pill onClick={onContact}>Get in touch</Pill>
                <Pill variant="ghost" onClick={onResume}><Icon name="doc" size={16} color="var(--primary)" strokeWidth={1.8} />Résumé</Pill>
              </div>
            </Reveal>
          </div>
          <Reveal delay={120}><PortraitSlot /></Reveal>
        </div>
      </section>

      {/* Education */}
      <section style={{ background: 'var(--canvas-parchment)', padding: 'clamp(48px,6vw,72px) clamp(18px,4vw,40px)' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', display: 'grid',
          gridTemplateColumns: 'minmax(0,260px) minmax(0,1fr)', gap: 'clamp(28px,5vw,64px)' }} className="hero-grid">
          <Reveal><h2 className="t-display-md" style={{ color: 'var(--ink)', margin: 0, letterSpacing: '-0.5px' }}>Education</h2></Reveal>
          <Reveal delay={60}>
            <div className="t-body-strong" style={{ color: 'var(--ink)', fontSize: 19 }}>{EDUCATION.school}</div>
            <div className="t-caption" style={{ color: 'var(--ink-muted-48)', marginTop: 3 }}>{EDUCATION.location} · {EDUCATION.dates}</div>
            <div style={{ marginTop: 18 }}>
              {EDUCATION.degrees.map(d => (
                <div key={d.d} style={{ display: 'flex', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap',
                  borderTop: '1px solid var(--hairline)', padding: '14px 0' }}>
                  <span className="t-body" style={{ color: 'var(--ink)' }}>{d.d}</span>
                  <span className="t-body" style={{ color: 'var(--ink-muted-48)' }}>{d.gpa}</span>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 18 }}>
              {EDUCATION.honors.map(h => <TagChip key={h} accent>{h}</TagChip>)}
            </div>
            <p className="t-caption" style={{ color: 'var(--ink-muted-48)', marginTop: 18, lineHeight: 1.6 }}>
              <strong style={{ color: 'var(--ink-muted-80)' }}>Selected coursework: </strong>{EDUCATION.coursework.join(' · ')}</p>
          </Reveal>
        </div>
      </section>

      {/* Experience */}
      <section style={{ padding: 'clamp(48px,6vw,72px) clamp(18px,4vw,40px)' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', display: 'grid',
          gridTemplateColumns: 'minmax(0,260px) minmax(0,1fr)', gap: 'clamp(28px,5vw,64px)' }} className="hero-grid">
          <Reveal><h2 className="t-display-md" style={{ color: 'var(--ink)', margin: 0, letterSpacing: '-0.5px' }}>Experience</h2></Reveal>
          <div>
            {EXPERIENCE.map((e, i) => (
              <Reveal key={e.org} delay={Math.min(i * 60, 180)}>
                <div style={{ borderTop: '1px solid var(--hairline)', padding: '24px 0' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap', alignItems: 'baseline' }}>
                    <div className="t-tagline" style={{ color: 'var(--ink)' }}>
                      {e.role} · {e.org}
                      {e.incoming && <span className="t-micro-legal" style={{ marginLeft: 12, color: 'var(--primary)',
                        border: '1px solid var(--primary)', borderRadius: 9999, padding: '4px 10px', verticalAlign: 'middle',
                        textTransform: 'uppercase', letterSpacing: '0.08em' }}>Incoming</span>}
                    </div>
                    <div className="t-caption" style={{ color: 'var(--ink-muted-48)' }}>{e.dates} · {e.loc}</div>
                  </div>
                  <div className="t-caption" style={{ color: 'var(--ink-muted-48)', marginTop: 5 }}>{e.context}</div>
                  <ul style={{ margin: '14px 0 0', paddingLeft: 0, listStyle: 'none' }}>
                    {e.points.map((pt, j) => (
                      <li key={j} className="t-body" style={{ color: 'var(--ink)', marginTop: j ? 10 : 0, paddingLeft: 22, position: 'relative', textWrap: 'pretty' }}>
                        <span style={{ position: 'absolute', left: 0, top: 11, width: 6, height: 6, borderRadius: 9999, background: 'var(--primary)' }} />{pt}</li>
                    ))}
                  </ul>
                  <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 14 }}>
                    {e.tags.map(t => <span key={t} className="t-micro-legal" style={{ color: 'var(--ink-muted-48)',
                      border: '1px solid var(--hairline)', borderRadius: 9999, padding: '4px 9px' }}>{t}</span>)}
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Skills */}
      <section style={{ background: 'var(--canvas-parchment)', padding: 'clamp(48px,6vw,72px) clamp(18px,4vw,40px) clamp(64px,8vw,96px)' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto' }}>
          <Reveal><h2 className="t-display-md" style={{ color: 'var(--ink)', margin: '0 0 28px', letterSpacing: '-0.5px' }}>Skills &amp; tools</h2></Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 28 }}>
            {SKILLS.map((s, i) => (
              <Reveal key={s.group} delay={Math.min(i * 50, 180)}>
                <div className="t-caption-strong" style={{ color: 'var(--ink)', marginBottom: 14 }}>{s.group}</div>
                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                  {s.items.map(it => <span key={it} className="t-caption" style={{ color: 'var(--ink-muted-80)', background: '#fff',
                    border: '1px solid var(--hairline)', borderRadius: 9999, padding: '7px 13px' }}>{it}</span>)}
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { AboutPage, PortraitSlot });