const { Statement, Button, Eyebrow, ChromeLens } = window.VamshotDesignSystem_18ef2a;

/* SECTION 01 — hero. Load sequence is driven by `phase` from the app shell:
   1 wordmark, 2 chrome object, 3 headline lines, 4 supporting copy, 5 CTA. */
function HeroSection({ phase }) {
  const on = function (n) { return 'vs-cue' + (phase >= n ? ' is-on' : ''); };
  return (
    <section className="vs-hero">
      <div className="vs-hero-lens" id="vs-lens" aria-hidden="true" style={{ opacity: phase >= 2 ? 1 : 0 }} />
      <div className="vs-lens-fallback" aria-hidden="true" style={{ opacity: phase >= 2 ? 1 : 0 }}><ChromeLens size={300} /></div>

      <div className={on(1)} style={{ display: 'flex', justifyContent: 'space-between', gap: 'var(--space-6)', position: 'relative', zIndex: 2 }}>
        <Eyebrow>AI influencer studio</Eyebrow>
        <Eyebrow>India &rarr; Global</Eyebrow>
      </div>

      <div style={{ position: 'relative', zIndex: 2 }}>
        <div className="vs-hero-scrim" aria-hidden="true" />
        <div style={{ position: 'relative', visibility: phase >= 3 ? 'visible' : 'hidden', ['--stagger']: '300ms' }}>
          <Statement key={phase >= 3 ? 'on' : 'off'} as="h1" size="mega" lines={['Shot without', 'a camera.']} />
        </div>
      </div>

      <div className="vs-grid" style={{ position: 'relative', zIndex: 2, alignItems: 'end', rowGap: 'var(--space-8)' }}>
        <div style={{ gridColumn: 'span 5', display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' }}>
          <p className={on(4)} style={{ margin: 0, fontSize: 'var(--type-lead)', lineHeight: 'var(--leading-body)', maxWidth: '42ch' }}>
            We build AI characters that become the face of your brand.
            Then we create their content, run their channels and scale their influence.
          </p>
          <div className={on(5)} style={{ display: 'flex', gap: 'var(--space-4)', flexWrap: 'wrap' }}>
            <Button size="lg" data-cursor="button" href={window.NH_CAL} target="_blank" rel="noopener">Book a meeting</Button>
            <Button size="lg" variant="outline" arrow="down" data-cursor="button" href="#core-idea">Explore NOTHUMAN</Button>
          </div>
        </div>
        <div className={on(4) + ' nh-hero-media'} style={{ gridColumn: '8 / span 3' }}>
          <Media src="assets/char-lobby.png" alt="NOTHUMAN digital character, evening lobby" ratio="3 / 4"
            position="center 16%" label={<React.Fragment><span>Character 01</span><span>Lobby / night</span></React.Fragment>} mask={false} />
        </div>
        <div className={on(5)} style={{ gridColumn: '12 / span 1', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 'var(--space-4)' }}>
          <div className="vs-scroll-cue" aria-hidden="true"><i /></div>
          <Marks>Scroll</Marks>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HeroSection });