function Sequence() {
  const { Plate } = window.NotHumanDesignSystem_3e0b8e;
  const steps = [['Character', 'studio', 'The face'], ['Product', 'stone', 'In hand'], ['Content', 'dusk', 'On feed'], ['Campaign', 'warm', 'In market'], ['Social', 'clay', 'Always on']];
  const [i, setI] = React.useState(0);
  const [vis, setVis] = React.useState(false);
  const ref = React.useRef(null);
  const ms = 2800;
  React.useEffect(() => { const io = new IntersectionObserver(([e]) => setVis(e.isIntersecting), { threshold: 0.3 }); io.observe(ref.current); return () => io.disconnect(); }, []);
  React.useEffect(() => {
    if (!vis || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const t = setTimeout(() => setI((i + 1) % steps.length), ms); return () => clearTimeout(t);
  }, [i, vis]);
  return (
    <div ref={ref} className="site-seq" style={{ '--seq-ms': ms + 'ms' }}>
      {steps.map(([n, tone, cap], k) => (
        <button key={n} type="button" className={'site-seq__step' + (k === i ? ' is-on' : '') + (k < i ? ' is-done' : '')} onClick={() => setI(k)} aria-pressed={k === i}>
          <Plate className="site-seq__plate" tone={tone} label="AVA / 01" caption={cap} />
          <div className="site-seq__bar"><span key={k === i ? 'on' + i : 'off'}></span></div>
          <div className="site-seq__row"><span className="site-seq__name">{n}</span><span className="nh-mono site-muted">{String(k + 1).padStart(2, '0')}</span></div>
        </button>
      ))}
    </div>
  );
}

function CharacterSystem({ mobile }) {
  const { CharacterViewer } = window.NotHumanDesignSystem_3e0b8e;
  const traits = [['Voice', 'One tone, every channel.'], ['Personality', 'A clear point of view.'], ['Language', 'Speaks to each market.'], ['Culture', 'Local context, global reach.']];
  return (
    <>
      <CharacterViewer className="site-system" ratio={mobile ? '4 / 5' : '16 / 8'} name="AVA / 01" code="NH-CHR-001" autoplay={0} environments={[
        { id: 'face', label: 'Face', tone: 'studio' }, { id: 'wardrobe', label: 'Wardrobe', tone: 'warm' }, { id: 'location', label: 'Location', tone: 'dusk' }, { id: 'content', label: 'Content', tone: 'stone' },
      ]} />
      <dl className="site-facts">
        {traits.map(([k, v]) => <div key={k}><dt className="nh-mono">{k}</dt><dd>{v}</dd></div>)}
      </dl>
    </>
  );
}

function HomePage({ go }) {
  const { Button, SectionLabel, SectionHeader, ServiceCard, ProjectGrid, CharacterViewer, ThreeScene, CTASection, ImageReveal } = window.NotHumanDesignSystem_3e0b8e;
  const mobile = useIsMobile();
const [ideaImage, setIdeaImage] = React.useState(0);
const link = (r) => (e) => { e.preventDefault(); go(r); };
  return (
    <main className="site-page">
      <section className="nh-container site-hero" aria-labelledby="hero-t">
        <div className="site-hero__text">
          <div className="site-hero__meta"><SectionLabel>Digital character studio</SectionLabel><SectionLabel>India → Global</SectionLabel></div>
          <h1 id="hero-t" className="nh-hero-title site-hero__h">Digital characters<br />for modern brands.</h1>
          <p className="nh-lead site-hero__lead">We create digital people, content and campaigns that brands can use everywhere.</p>
          <div className="site-hero__ctas">
            <Button href="#/work" arrow onClick={link('work')}>Explore our work</Button>
            <Button variant="secondary" href={NH_BOOK} arrow>Book a meeting</Button>
          </div>
        </div>
        <div className="site-hero__visual">
         {mobile
  ? (
      <img
  src="/assets/ava.jpg"
  alt="Ava / 01"
  style={{
    width: '100%',
    height: 'auto',
    display: 'block',
    objectFit: 'contain'
  }}
/>
    )
  : (
      <ThreeScene
        src="/assets/ava.jpg"
        name="Ava / 01"
        ratio="4 / 5"
      />
    )
}
        </div>
      </section>

      <section className="nh-section nh-container" id="idea">
        <SectionHeader index="01" label="The idea" title={'One character.\nMany possibilities.'} body="A recognizable digital identity that can live across campaigns, content, social and performance creative." />
        <Reveal>
  <div
    className="site-idea"
    style={{
      position: 'relative',
      width: '100%',
      aspectRatio: mobile ? '4 / 5' : '16 / 8',
      borderRadius: 'var(--radius-xl)',
      overflow: 'hidden',
      background: '#ececea'
    }}
  >
    <img
      src={[
        '/assets/studio.png',
        '/assets/apparel.png',
        '/assets/product.png',
        '/assets/social.png',
        '/assets/campaign.png'
      ][ideaImage]}
      alt="NotHuman digital character"
      style={{
        width: '100%',
        height: '100%',
        objectFit: mobile ? 'contain' : 'cover',
        display: 'block'
      }}
    />

    <div
      style={{
        position: 'absolute',
        top: '22px',
        left: '22px',
        fontFamily: 'var(--font-mono)',
        fontSize: '12px',
        letterSpacing: '0.12em',
        color: '#697078'
      }}
    >
      AVA / 01
    </div>

    <div
      style={{
        position: 'absolute',
        top: '22px',
        right: '22px',
        fontFamily: 'var(--font-mono)',
        fontSize: '12px',
        letterSpacing: '0.12em',
        color: '#697078'
      }}
    >
      {String(ideaImage + 1).padStart(2, '0')} / 05 · {
        ['STUDIO', 'APPAREL', 'PRODUCT', 'SOCIAL', 'CAMPAIGN'][ideaImage]
      }
    </div>

    <div
      style={{
        position: 'absolute',
        left: '12px',
        right: '12px',
        bottom: '12px',
        display: 'grid',
        gridTemplateColumns: 'repeat(5, 1fr)',
        background: 'rgba(255,255,255,0.92)',
        borderRadius: '12px',
        padding: '4px'
      }}
    >
      {['STUDIO', 'APPAREL', 'PRODUCT', 'SOCIAL', 'CAMPAIGN'].map((label, index) => (
        <button
          key={label}
          type="button"
          onClick={() => setIdeaImage(index)}
          style={{
            border: 'none',
            background: ideaImage === index ? '#e5eaee' : 'transparent',
            borderRadius: '8px',
            padding: '13px 8px',
            cursor: 'pointer',
            fontFamily: 'var(--font-mono)',
            fontSize: '11px',
            letterSpacing: '0.08em',
            color: '#697078'
          }}
        >
          {String(index + 1).padStart(2, '0')} {label}
        </button>
      ))}
    </div>
  </div>
</Reveal>
      </section>

      <section className="nh-section nh-container site-flush" id="what-we-do">
        <SectionHeader index="02" label="What we do" title="Built around one character." />
        <Reveal className="site-services">
          {NH_SERVICES.map((s) => (
            <div
  key={s.index}
  style={{
    background: '#fff',
    border: '1px solid #e5e5e5',
    borderRadius: '22px',
    overflow: 'hidden'
  }}
>
  <img
src={
  s.title === 'Character Design'
    ? '/assets/character.png'
    : s.title === 'Content Production'
    ? '/assets/content.png'
    : s.title === 'Channel Operations'
    ? '/assets/channel.png'
    : '/assets/performance.png'
}
alt={s.title}
  style={{
    width: '100%',
    aspectRatio: '4 / 3',
    objectFit: 'cover',
    display: 'block'
  }}
/>
   
  <div style={{ padding: '24px' }}>
    <div className="nh-mono" style={{ marginBottom: '12px' }}>
      {String(s.index + 1).padStart(2, '0')} / {s.title}
    </div>

    <h3>{s.title}</h3>

    <p>{s.description}</p>

    <div className="site-tags nh-mono">
      {s.tags.join(' · ')}
    </div>
  </div>
</div>
          ))}
        </Reveal>
      </section>

      <section className="nh-section nh-container site-flush">
        <SectionHeader index="03" label="The character" title="Not just a face." body="A digital character is a complete identity." />
        <Reveal><CharacterSystem mobile={mobile} /></Reveal>
      </section>

      <section className="nh-section nh-container site-flush">
        <SectionHeader index="04" label="Selected work" title="Recent work" action={<Button variant="link" href="#/work" onClick={link('work')}>All work</Button>} />
        <ProjectGrid projects={NH_PROJECTS.slice(0, 4).map((p) => ({ ...p, href: '#/work/' + p.id, category: p.index + ' / ' + p.category }))} onSelect={(p) => go('work/' + p.id)} />
      </section>

      <section className="nh-section nh-container site-flush">
        <SectionHeader index="05" label="Why NotHuman" title={'More content.\nWithout more production.'} body="One character can become a face, a creator, a campaign and a content system." />
        <Sequence />
      </section>

      <section className="nh-section nh-container site-flush">
        <div className="site-about">
          <div className="site-about__text">
            <SectionLabel index="06">About</SectionLabel>
            <h2 className="nh-h2">Built in India.<br />Designed for everywhere.</h2>
            <p className="nh-lead">NotHuman is a digital character studio creating recognizable people, content and creative systems for modern brands.</p>
            <span className="nh-mono site-muted">India → Global</span>
            <div><Button variant="link" href="#/about" onClick={link('about')}>About the studio</Button></div>
          </div>
          <ImageReveal className="site-about__media" tone="studio" label="Studio" caption="Set 01" />
        </div>
      </section>

      <div className="nh-container site-end">
        <CTASection ctaHref={NH_BOOK} visual={<CharacterViewer controls={false} ratio="auto" style={{ height: '100%', borderRadius: 'var(--radius-xl)' }} autoplay={3200} environments={[{ id: 'a', label: 'Dusk', tone: 'dusk' }, { id: 'b', label: 'Clay', tone: 'clay' }, { id: 'c', label: 'Warm', tone: 'warm' }]} />} />
      </div>
    </main>
  );
}

Object.assign(window, { HomePage });