function AboutPage() {
  const { SectionLabel, Card, ImageReveal, CTASection, Icon } = window.NotHumanDesignSystem_3e0b8e;
  const themes = [['01', 'Character', 'user', 'Faces, voices and personalities that stay consistent.'], ['02', 'Content', 'layers', 'Product, campaign and social output from one source.'], ['03', 'Culture', 'globe', 'Built for local markets and global feeds.']];
  return (
    <main className="site-page">
      <section className="nh-container nh-grid site-top site-about-head">
        <div style={{ gridColumn: '1 / -1' }}><SectionLabel>About NotHuman</SectionLabel></div>
        <h1 className="nh-h1" style={{ gridColumn: '1 / span 9' }}>We build digital people<br />for brands that need to move faster.</h1>
        <div className="site-about-head__body">
          <p className="nh-lead">NotHuman is a digital character studio creating recognizable people, content and creative systems for modern brands.</p>
          <p style={{ fontWeight: 500 }}>Built in India.<br />Designed for everywhere.</p>
        </div>
      </section>

      <section className="nh-container site-block">
        <Reveal className="site-themes">
          {themes.map(([n, t, ic, d]) => (
            <Card key={t} padding="lg">
              <div className="site-theme__row"><span className="nh-mono">{n}</span><Icon name={ic} size={18} /></div>
              <h2 className="nh-h3" style={{ marginTop: 'var(--space-8)' }}>{t}</h2>
              <p className="nh-small" style={{ marginTop: 'var(--space-2)' }}>{d}</p>
            </Card>
          ))}
        </Reveal>
      </section>

      <section className="nh-container site-block">
        <div className="site-gallery">
          <ImageReveal tone="studio" label="Studio" caption="Set 01" />
          <ImageReveal tone="dusk" label="Team" caption="Review" />
          <ImageReveal effect="fade" tone="warm" label="AVA / 01" caption="Character" />
          <ImageReveal effect="fade" tone="stone" label="KIRO / 02" caption="Character" />
          <ImageReveal effect="fade" tone="clay" label="NOOR / 04" caption="Character" />
        </div>
      </section>

      <section className="nh-container site-block">
        <div className="site-why">
          <SectionLabel index="04">Why we exist</SectionLabel>
          <p className="nh-lead">Brands need more content, in more places, more often. A digital character gives them one recognizable face that can show up everywhere, without rebuilding production every time.</p>
        </div>
      </section>

      <div className="nh-container site-end">
        <CTASection title="Let's build your character." body={null} ctaHref={NH_BOOK} plain />
      </div>
    </main>
  );
}

Object.assign(window, { AboutPage });