function Counter({ to, suffix = '' }) {
  const [ref, seen] = useInView();
  const [n, setN] = React.useState(0);
  React.useEffect(() => {
    if (!seen) return;
    if (reduced()) { setN(to); return; }
    let raf, start;
    const dur = 1400;
    const tick = t => {
      start = start || t;
      const p = Math.min(1, (t - start) / dur);
      setN(Math.round(to * (1 - Math.pow(1 - p, 3))));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [seen, to]);
  return <span ref={ref}>{n.toLocaleString()}{suffix}</span>;
}

function AboutPage() {
  const bio = [
    'I’m a final-year Mathematics and Computing student at Rajiv Gandhi Institute of Petroleum Technology, with a CGPA of 8.35/10. My path into software started with competitive programming — 700+ problems solved across LeetCode, CodeChef, and Codeforces — and grew into building full production systems.',
    'Most of my recent work sits at the intersection of AI and full-stack engineering: architecting microservices, wiring up LangGraph/LangChain agents, building RAG pipelines with vector search, and shipping MERN applications end to end. I care about systems that stay reliable under load and code that’s easy for the next person to read.',
    'I also co-head competitive-programming initiatives at Geek for Geek, organizing contests for 300+ participants, and was selected for Amazon ML Summer School 2026 from a pool of 100,000+ applicants.'
  ];
  return (
    <div className="pf-page">
      <Section>
        <PageHead eyebrow="About" title="A short version of the story." lede="Math & Computing undergrad turned full-stack AI engineer." />
        <div className="pf-split" style={{ display: 'grid', gridTemplateColumns: 'minmax(240px,320px) 1fr', gap: 'var(--space-section)', alignItems: 'start' }}>
          <Reveal>
            <div className="pf-split-media" style={{ display: 'grid', gap: 'var(--space-md)' }}>
              <img src="assets/headshot.jpeg" alt="Portrait of Harsh Kumar" style={{ aspectRatio: '4 / 5', width: '100%', borderRadius: 'var(--radius-lg)', border: '1px solid var(--beige-deep)', objectFit: 'cover', display: 'block' }} />
              <Card variant="cream" style={{ padding: 'var(--space-xl)', display: 'grid', gap: 'var(--space-sm)' }}>
                <Eyebrow>Quick facts</Eyebrow>
                {[['Location', PROFILE.location], ['Graduating', '2027'], ['Open to', 'SDE / SWE roles'], ['CGPA', '8.35 / 10']].map(([k, v]) => (
                  <div key={k} style={{ display: 'flex', justifyContent: 'space-between', gap: 'var(--space-md)', font: 'var(--type-body-sm)' }}>
                    <span style={{ color: 'var(--steel)' }}>{k}</span><span style={{ color: 'var(--ink)', fontWeight: 500 }}>{v}</span>
                  </div>
                ))}
              </Card>
            </div>
          </Reveal>
          <div style={{ display: 'grid', gap: 'var(--space-xl)' }}>
            {bio.map((p, i) => (
              <Reveal as="p" key={i} delay={i * 90} style={{ font: 'var(--type-body-md)', color: 'var(--charcoal)', margin: 0, maxWidth: '62ch' }}>{p}</Reveal>
            ))}
            <Reveal delay={300}><SocialRow /></Reveal>
          </div>
        </div>
      </Section>

      <Section style={{ paddingBlockStart: 0 }}>
        <Reveal>
          <Eyebrow>Achievements</Eyebrow>
          <h2 style={{ font: 'var(--type-heading-2)', color: 'var(--ink)', margin: 'var(--space-sm) 0 var(--space-xl)' }}>Achievements & recognition</h2>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(240px,1fr))', gap: 'var(--space-lg)' }}>
          {CERTS.map((c, i) => (
            <Reveal key={i} delay={i * 100}>
              <Card className="pf-lift" style={{ display: 'grid', gap: 'var(--space-xs)', height: '100%' }}>
                <span style={{ color: 'var(--primary)' }}><Icon name="Award" size={20} /></span>
                <span style={{ font: 'var(--type-heading-5)', color: 'var(--ink)' }}>{c.name}</span>
                <span style={{ font: 'var(--type-body-sm)', color: 'var(--slate)' }}>{c.issuer} · {c.year}</span>
              </Card>
            </Reveal>
          ))}
        </div>
      </Section>

      <div style={{ background: 'var(--surface-cream-soft)', borderTop: '1px solid var(--hairline-soft)', borderBottom: '1px solid var(--hairline-soft)' }}>
        <Section style={{ paddingBlock: 'var(--space-section)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(160px,1fr))' }}>
            {STATS.map((s, i) => (
              <Reveal key={s.label} delay={i * 110}>
                <StatCell value={<Counter to={s.value} suffix={s.suffix} />} label={s.label} style={{ paddingBlock: 'var(--space-lg)' }} />
              </Reveal>
            ))}
          </div>
        </Section>
      </div>

      <Section>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', gap: 'var(--space-lg)' }}>
          <Reveal>
            <Card variant="creamSoft" style={{ display: 'grid', gap: 'var(--space-md)', alignContent: 'start', height: '100%' }}>
              <Eyebrow>What I value</Eyebrow>
              <p style={{ font: 'var(--type-body-md)', color: 'var(--charcoal)', margin: 0 }}>Readable code, small pull requests, and tests that describe intent. I'd rather ship something small and correct than something large and fragile.</p>
            </Card>
          </Reveal>
          <Reveal delay={100}>
            <Card variant="creamSoft" style={{ display: 'grid', gap: 'var(--space-md)', alignContent: 'start', height: '100%' }}>
              <Eyebrow>What I'm looking for</Eyebrow>
              <p style={{ font: 'var(--type-body-md)', color: 'var(--charcoal)', margin: 0 }}>SDE, SWE, and related new-grad roles where I can work on backend systems, AI infrastructure, or full-stack products with real users.</p>
            </Card>
          </Reveal>
        </div>
      </Section>
    </div>
  );
}

function Meter({ label, value, delay }) {
  const [ref, seen] = useInView();
  return (
    <div ref={ref} style={{ display: 'grid', gap: '6px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', font: 'var(--type-body-sm-medium)', color: 'var(--charcoal)' }}>
        <span>{label}</span><span style={{ color: 'var(--steel)', fontFamily: 'var(--font-mono)', fontSize: 12 }}>{value}</span>
      </div>
      <div className="pf-meter"><span style={{ width: seen ? value + '%' : 0, transitionDelay: delay + 'ms' }} /></div>
    </div>
  );
}

function SkillsPage() {
  return (
    <div className="pf-page">
      <Section>
        <PageHead eyebrow="Skills" title="What I reach for." lede="Meters are self-assessed and fill as you scroll. Chips are things I have shipped with at least once." />
        <div style={{ display: 'grid', gap: 'var(--space-xl)' }}>
          {SKILL_GROUPS.map((g, gi) => (
            <Reveal key={g.name} delay={gi * 80}>
              <Card variant="feature" className="pf-lift pf-split" style={{ display: 'grid', gridTemplateColumns: 'minmax(180px,240px) 1fr', gap: 'var(--space-xxl)', alignItems: 'start' }}>
                <div style={{ display: 'grid', gap: 'var(--space-xs)', justifyItems: 'start' }}>
                  <span style={{ display: 'grid', placeItems: 'center', width: 40, height: 40, borderRadius: 'var(--radius-md)', background: 'var(--cream)', border: '1px solid var(--beige-deep)', color: 'var(--primary-deep)' }}><Icon name={g.icon} size={20} /></span>
                  <h2 style={{ font: 'var(--type-heading-4)', color: 'var(--ink)', margin: 'var(--space-xs) 0 0' }}>{g.name}</h2>
                  <span style={{ font: 'var(--type-caption)', color: 'var(--steel)' }}>{g.skills.length} core · {g.chips.length} more</span>
                </div>
                <div style={{ display: 'grid', gap: 'var(--space-md)' }}>
                  {g.skills.map(([n, v], i) => <Meter key={n} label={n} value={v} delay={i * 90} />)}
                  <div style={{ display: 'flex', gap: 'var(--space-xs)', flexWrap: 'wrap', marginTop: 'var(--space-xs)' }}>
                    {g.chips.map(c => <Badge key={c} tone="cream">{c}</Badge>)}
                  </div>
                </div>
              </Card>
            </Reveal>
          ))}
        </div>
      </Section>
    </div>
  );
}
Object.assign(window, { AboutPage, SkillsPage, Counter, Meter });