function ExperiencePage() {
  return (
    <div className="pf-page">
      <Section>
        <PageHead eyebrow="Experience" title="Where I have worked." lede="An internship and a leadership role — both hands-on." />
        <div style={{ position: 'relative', display: 'grid', gap: 'var(--space-xl)', paddingLeft: 34 }}>
          <span aria-hidden="true" style={{ position: 'absolute', left: 9, top: 6, bottom: 6, width: 2, background: 'var(--gradient-sunset-stripe)', borderRadius: 2 }} />
          {EXPERIENCE.map((r, i) => (
            <Reveal key={r.company + i} delay={i * 100} style={{ position: 'relative' }}>
              <span aria-hidden="true" style={{ position: 'absolute', left: -34, top: 26, width: 20, height: 20, borderRadius: '50%', background: 'var(--canvas)', border: '2px solid var(--primary)', display: 'grid', placeItems: 'center' }}>
                <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--primary)' }} />
              </span>
              <Card variant="feature" className="pf-lift" style={{ display: 'grid', gap: 'var(--space-sm)' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', gap: 'var(--space-md)', flexWrap: 'wrap', alignItems: 'baseline' }}>
                  <div>
                    <h2 style={{ font: 'var(--type-heading-4)', color: 'var(--ink)', margin: 0 }}>{r.title}</h2>
                    <div style={{ font: 'var(--type-body-md-medium)', color: 'var(--primary-deep)', marginTop: 2 }}>{r.company}</div>
                  </div>
                  <div style={{ display: 'flex', gap: 'var(--space-sm)', alignItems: 'center' }}>
                    <Badge tone="cream">{r.kind}</Badge>
                    <span style={{ font: 'var(--type-body-sm)', color: 'var(--steel)', fontFamily: 'var(--font-mono)' }}>{r.dates}</span>
                  </div>
                </div>
                <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'grid', gap: 'var(--space-xs)' }}>
                  {r.bullets.map(b => (
                    <li key={b} style={{ display: 'flex', gap: 'var(--space-sm)', font: 'var(--type-body-md)', color: 'var(--charcoal)' }}>
                      <span style={{ color: 'var(--primary)', flex: '0 0 auto', marginTop: 3 }}><Icon name="Check" size={15} /></span>{b}
                    </li>
                  ))}
                </ul>
              </Card>
            </Reveal>
          ))}
        </div>
      </Section>
    </div>
  );
}

function EducationPage() {
  return (
    <div className="pf-page">
      <Section>
        <PageHead eyebrow="Education" title="Degree and coursework." lede="Mathematics and Computing at RGIPT, plus schooling under CBSE." />
        <div style={{ display: 'grid', gap: 'var(--space-lg)' }}>
          {EDUCATION.map((e, i) => (
            <Reveal key={e.school} delay={i * 90}>
              <Card variant="cream" style={{ display: 'grid', gap: 'var(--space-md)' }}>
                <div style={{ display: 'flex', gap: 'var(--space-md)', alignItems: 'flex-start', justifyContent: 'space-between', flexWrap: 'wrap' }}>
                  <div style={{ display: 'flex', gap: 'var(--space-md)', alignItems: 'flex-start' }}>
                    <span style={{ display: 'grid', placeItems: 'center', width: 44, height: 44, borderRadius: 'var(--radius-md)', background: 'var(--canvas)', border: '1px solid var(--beige-deep)', color: 'var(--primary-deep)', flex: '0 0 auto' }}><Icon name="GraduationCap" size={22} /></span>
                    <div>
                      <h2 style={{ font: 'var(--type-heading-3)', color: 'var(--ink)', margin: 0 }}>{e.degree}</h2>
                      <div style={{ font: 'var(--type-body-md-medium)', color: 'var(--charcoal)', marginTop: 4 }}>{e.school}</div>
                      <div style={{ font: 'var(--type-body-sm)', color: 'var(--slate)', marginTop: 2 }}>{e.note}</div>
                    </div>
                  </div>
                  <span style={{ font: 'var(--type-body-sm)', color: 'var(--steel)', fontFamily: 'var(--font-mono)' }}>{e.year}</span>
                </div>
                {e.courses && e.courses.length > 0 && (
                  <div style={{ display: 'grid', gap: 'var(--space-sm)', borderTop: '1px solid var(--beige-deep)', paddingTop: 'var(--space-md)' }}>
                    <Eyebrow>Relevant coursework</Eyebrow>
                    <div style={{ display: 'flex', gap: 'var(--space-xs)', flexWrap: 'wrap' }}>
                      {e.courses.map(c => (
                        <span key={c} style={{ font: 'var(--type-body-sm)', color: 'var(--ink)', background: 'var(--canvas)', border: '1px solid var(--beige-deep)', borderRadius: 'var(--radius-md)', padding: '6px 12px' }}>{c}</span>
                      ))}
                    </div>
                  </div>
                )}
              </Card>
            </Reveal>
          ))}
        </div>
      </Section>
    </div>
  );
}
Object.assign(window, { ExperiencePage, EducationPage });