function WorkPage({ go }) {
  const { SectionHeader, ProjectGrid, CTASection } = window.NotHumanDesignSystem_3e0b8e;
  return (
    <main className="site-page">
      <section className="nh-container site-top">
        <SectionHeader level={1} size="h1" label="Selected work" title="Selected work" body="Characters, campaigns and content systems built for different markets and moments." />
        <ProjectGrid projects={NH_PROJECTS.map((p) => ({ ...p, href: '#/work/' + p.id, category: p.index + ' / ' + p.category }))} onSelect={(p) => go('work/' + p.id)} />
      </section>
      <div className="nh-container site-end"><CTASection ctaHref={NH_BOOK} /></div>
    </main>
  );
}

function CaseStudyPage({ id, go }) {
  const { CaseStudyHeader, CaseStudySection, CTASection, Button } = window.NotHumanDesignSystem_3e0b8e;
  const i = Math.max(0, NH_PROJECTS.findIndex((p) => p.id === id));
  const p = NH_PROJECTS[i];
  const next = NH_PROJECTS[(i + 1) % NH_PROJECTS.length];
  const L = p.plateLabel;
  return (
    <main className="site-page nh-container" key={p.id}>
      <div className="site-cs-top">
        <CaseStudyHeader category={p.index + ' / ' + p.category} title={p.name + ' — ' + p.description.replace(/\.$/, '')} description={p.summary} tone={p.tone} onBack={() => go('work')} backHref="#/work"
          facts={[{ label: 'Category', value: p.category }, { label: 'Character', value: L }, { label: 'Services', value: p.services }, { label: 'Year', value: p.year }]} />
      </div>
      <CaseStudySection index="02" label="The character" title={p.name + '. Designed once, recognizable everywhere.'} body={p.character}
        columns={1} ratio="16 / 8" media={[{ tone: p.tone, label: L, caption: 'Character' }]} />
      <CaseStudySection index="03" label="The system" title="Face, wardrobe, environment, personality." body="A fixed identity the character returns to in every piece of content."
        columns={4} ratio="3 / 4" media={[{ tone: 'studio', label: L, caption: 'Face' }, { tone: p.tone, label: L, caption: 'Wardrobe' }, { tone: 'dusk', label: L, caption: 'Environment' }, { tone: 'stone', label: L, caption: 'Personality' }]} />
      <CaseStudySection index="04" label="The content" title="Product, campaign, video, social." columns={4} ratio="9 / 16"
        media={[{ tone: 'stone', caption: 'Product' }, { tone: p.tone, caption: 'Campaign' }, { tone: 'studio', caption: 'Video frame' }, { tone: 'dusk', caption: 'Social' }]} />
      <CaseStudySection index="05" label="The output" title="Variations, environments, formats." columns={3} ratio="4 / 5"
        media={[{ tone: p.tone, caption: 'Variation A' }, { tone: 'clay', caption: 'New environment' }, { tone: 'studio', caption: '9:16 format' }]} />
      <CaseStudySection index="06" label="The result" title="What was delivered." body={p.result} />
      <div className="site-next">
        <div><div className="nh-mono site-muted">Next project</div><div className="nh-h3" style={{ marginTop: 6 }}>{next.name} — {next.description.replace(/\.$/, '')}</div></div>
        <div className="site-next__actions">
          <Button variant="ghost" href="#/work" icon="arrow-left" arrow={false} onClick={(e) => { e.preventDefault(); go('work'); }}>Back to work</Button>
          <Button variant="secondary" arrow href={'#/work/' + next.id} onClick={(e) => { e.preventDefault(); go('work/' + next.id); }}>Next project</Button>
        </div>
      </div>
      <div className="site-end"><CTASection ctaHref={NH_BOOK} /></div>
    </main>
  );
}

Object.assign(window, { WorkPage, CaseStudyPage });