function TypedRole() {
  const [i, setI] = React.useState(0);
  const [n, setN] = React.useState(0);
  const [back, setBack] = React.useState(false);
  React.useEffect(() => {
    if (reduced()) { setN(PROFILE.roles[0].length); return; }
    const word = PROFILE.roles[i];
    const done = n === word.length;
    const t = setTimeout(() => {
      if (!back) { done ? setBack(true) : setN(n + 1); }
      else if (n === 0) { setBack(false); setI((i + 1) % PROFILE.roles.length); }
      else setN(n - 1);
    }, back ? 34 : done ? 1500 : 70);
    return () => clearTimeout(t);
  }, [i, n, back]);
  return (
    <span style={{ color: 'var(--primary-deep)' }}>
      {PROFILE.roles[i].slice(0, n)}<span className="pf-caret" style={{ color: 'var(--primary)' }}>|</span>
    </span>
  );
}

function HeroBackdrop() {
  return (
    <div aria-hidden="true" style={{ position: 'absolute', inset: 0, overflow: 'hidden', background: 'var(--gradient-sunset-soft)' }}>
      <div className="pf-grid-bg" />
      <div className="pf-blob" style={{ width: 420, height: 420, top: '-12%', right: '4%', background: 'var(--sunshine-500)' }} />
      <div className="pf-blob" style={{ width: 340, height: 340, bottom: '-18%', left: '2%', background: 'var(--primary)', opacity: .28, animationDelay: '-6s' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg,transparent 55%,var(--canvas) 100%)' }} />
    </div>
  );
}

function HomePage({ go }) {
  return (
    <div className="pf-page">
      <section style={{ position: 'relative', overflow: 'hidden' }}>
        <HeroBackdrop />
        <div className="pf-wrap" style={{ position: 'relative', paddingBlock: 'var(--space-hero) var(--space-section-lg)' }}>
          <div style={{ display: 'grid', gap: 'var(--space-xl)', justifyItems: 'start' }}>
            <Reveal as="h1" delay={80} style={{ font: 'var(--type-hero-display)', fontSize: 'clamp(40px,8vw,84px)', letterSpacing: 'var(--type-hero-display-tracking)', color: 'var(--ink)', margin: 0, maxWidth: '18ch' }}>{PROFILE.name}.</Reveal>
            <Reveal as="p" delay={160} style={{ font: 'var(--type-heading-3)', margin: 0, color: 'var(--charcoal)', minHeight: '1.4em', whiteSpace: 'nowrap' }}><TypedRole /></Reveal>
            <Reveal as="p" delay={240} style={{ font: 'var(--type-subtitle)', color: 'var(--ink-tint)', margin: 0, maxWidth: '46ch' }}>{PROFILE.tagline}</Reveal>
            <Reveal delay={320} style={{ display: 'flex', gap: 'var(--space-md)', flexWrap: 'wrap' }}>
              <Button variant="primary" onClick={() => go('/projects')}>See my work<Icon name="ArrowRight" size={16} /></Button>
              <Button variant="secondary" onClick={() => go('/contact')}>Get in touch</Button>
            </Reveal>
            <Reveal delay={400} style={{ display: 'grid', gap: 'var(--space-sm)', maxWidth: '100%' }}>
              <Eyebrow>Find me online</Eyebrow>
              <SocialRow />
            </Reveal>
          </div>
          <Reveal delay={520} style={{ marginTop: 'var(--space-section)', display: 'flex', alignItems: 'center', gap: 'var(--space-xs)', color: 'var(--steel)', font: 'var(--type-micro)' }}>
            <span className="pf-cue" style={{ display: 'inline-flex' }}><Icon name="ChevronDown" size={16} /></span>Scroll
            <span style={{ marginLeft: 'var(--space-lg)', display: 'inline-flex', gap: 6, alignItems: 'center' }}>or press <Kbd>⌘K</Kbd> to jump anywhere</span>
          </Reveal>
        </div>
      </section>

      <Section style={{ paddingBlockStart: 'var(--space-section)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(200px,1fr))', gap: 'var(--space-md)' }}>
          {HIGHLIGHTS.map((h, i) => (
            <Reveal key={h.k} delay={i * 90}>
              <div className="pf-lift" style={{ background: 'var(--surface-cream-soft)', border: '1px solid var(--hairline-soft)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-xl)', display: 'grid', gap: '6px', height: '100%' }}>
                <Eyebrow>{h.k}</Eyebrow>
                <span style={{ font: 'var(--type-heading-5)', color: 'var(--ink)' }}>{h.v}</span>
              </div>
            </Reveal>
          ))}
        </div>
      </Section>

      <Section style={{ paddingBlockStart: 0 }}>
        <Reveal><Eyebrow>Selected work</Eyebrow></Reveal>
        <Reveal as="h2" delay={70} style={{ font: 'var(--type-display-lg)', fontSize: 'clamp(32px,5vw,64px)', letterSpacing: 'var(--tracking-display-lg)', color: 'var(--ink)', margin: 'var(--space-sm) 0 var(--space-xxl)' }}>Things I've built.</Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(260px,1fr))', gap: 'var(--space-lg)' }}>
          {PROJECTS.filter(p => p.featured).map((p, i) => (
            <Reveal key={p.title} delay={i * 100}>
              <button onClick={() => go('/projects')} className="pf-lift" style={{ textAlign: 'left', width: '100%', height: '100%', cursor: 'pointer', background: 'var(--canvas)', border: '1px solid var(--hairline-soft)', borderRadius: 'var(--radius-lg)', padding: 0, overflow: 'hidden', display: 'grid', gridTemplateRows: 'auto 1fr' }}>
                <div style={{ height: 120, background: 'var(--gradient-sunset-soft)', display: 'grid', placeItems: 'center', color: 'var(--primary-deep)' }}><Icon name="Code2" size={26} /></div>
                <div style={{ padding: 'var(--space-xl)', display: 'grid', gap: 'var(--space-xs)', alignContent: 'start' }}>
                  <Eyebrow>{p.category}</Eyebrow>
                  <span style={{ font: 'var(--type-heading-5)', color: 'var(--ink)' }}>{p.title}</span>
                  <p style={{ font: 'var(--type-body-sm)', color: 'var(--slate)', margin: 0 }}>{p.blurb}</p>
                </div>
              </button>
            </Reveal>
          ))}
        </div>
        <Reveal delay={420} style={{ marginTop: 'var(--space-xxl)' }}>
          <Button variant="link" onClick={() => go('/projects')}>All projects →</Button>
        </Reveal>
      </Section>
    </div>
  );
}
Object.assign(window, { HomePage, TypedRole });