const { Statement, Eyebrow, Rule } = window.VamshotDesignSystem_18ef2a;

/* SECTION 02 — the core idea. Sticky statement: RENT leaves, OWN arrives. */
/* Mobile gets the same two beats as a stacked reveal — no 340vh scroll jail,
   no per-frame transforms, same typography. */
function CoreIdeaStacked() {
  const ref = useReveal();
  return (
    <section id="core-idea" ref={ref} style={{ borderTop: '1px solid var(--border-hairline)' }}>
      <div className="vs-bleed" style={{ paddingTop: 'var(--section-pad-y)', paddingBottom: 'var(--section-pad-y)', display: 'flex', flexDirection: 'column', gap: 'var(--space-8)' }}>
        <Marks>02 &mdash; The core idea</Marks>
        <h2 aria-label="You don’t rent the face. You own it." style={{ margin: 0, display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' }}>
          <Reveal aria-hidden="true">
            <Statement as="div" size="display" reveal={false} lines={['You don\u2019t', 'rent the face.']} />
          </Reveal>
          <Reveal delay={160} aria-hidden="true">
            <Statement as="div" size="display" reveal={false} lines={['You', { text: 'own it.', accent: true }]} />
          </Reveal>
        </h2>
        <Reveal delay={240} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
          <Rule />
          <p style={{ margin: 0, fontSize: 'var(--type-body)', color: 'var(--text-secondary)', lineHeight: 'var(--leading-loose)' }}>
            A real influencer is borrowed.<br />A NOTHUMAN character is built for your brand.
          </p>
          <SentenceStack size="var(--type-body)" items={['The face.', 'The voice.', 'The personality.', 'The world.', { text: 'Yours.' }]} />
        </Reveal>
      </div>
    </section>
  );
}

function CoreIdea() {
  const handheld = useMedia(vsMQ.handheld);
  const wrap = React.useRef(null);
  const p = useProgress(wrap, !handheld && !vsReduced);
  const out = vsRange(p, 0.24, 0.46);
  const inn = vsRange(p, 0.42, 0.64);
  const copy = vsRange(p, 0.6, 0.82);
  if (handheld || vsReduced) return <CoreIdeaStacked />;
  return (
    <section id="core-idea" ref={wrap} style={{ borderTop: '1px solid var(--border-hairline)', height: '340vh', position: 'relative' }}>
      <div style={{ position: 'sticky', top: 0, height: '100vh', display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
        <div className="vs-bleed" style={{ width: '100%' }}>
          <Marks style={{ display: 'block', marginBottom: 'var(--space-7)' }}>02 &mdash; The core idea</Marks>
          <div className="vs-grid" style={{ alignItems: 'end', rowGap: 'var(--space-8)' }}>
            <h2 aria-label="You don’t rent the face. You own it." style={{ margin: 0, gridColumn: 'span 9', display: 'grid' }}>
              <div aria-hidden="true" style={{ gridArea: '1 / 1', opacity: 1 - out, transform: 'translate3d(0,' + (out * -40) + 'px,0)', filter: out > 0.001 ? 'blur(' + (out * 7) + 'px)' : 'none' }}>
                <Statement as="div" size="mega" reveal={false} lines={['You don\u2019t', 'rent the face.']} />
              </div>
              <div aria-hidden="true" style={{ gridArea: '1 / 1', opacity: inn, transform: 'translate3d(0,' + ((1 - inn) * 56) + 'px,0)' }}>
                <Statement as="div" size="mega" reveal={false} lines={['You', { text: 'own it.', accent: true }]} />
              </div>
            </h2>
            <div style={{ gridColumn: '11 / span 2', display: 'flex', flexDirection: 'column', gap: 'var(--space-5)', opacity: copy, transform: 'translate3d(0,' + ((1 - copy) * 24) + 'px,0)' }}>
              <Rule />
              <p style={{ margin: 0, fontSize: 'var(--type-body)', color: 'var(--text-secondary)', lineHeight: 'var(--leading-loose)' }}>
                A real influencer is borrowed.<br />A NOTHUMAN character is built for your brand.
              </p>
              <SentenceStack size="var(--type-body)" items={['The face.', 'The voice.', 'The personality.', 'The world.', { text: 'Yours.' }]} />
            </div>
          </div>
        </div>
        <div aria-hidden="true" className="vs-track"><i style={{ transform: 'scaleX(' + p + ')' }} /></div>
      </div>
    </section>
  );
}

/* SECTION 03 — what we do. Four systems, set as type, not cards. */
const vsSystems = [
  { index: '01', name: 'Character design', lede: 'This is casting, not image generation.', items: ['Face lock.', 'Body.', 'Voice.', 'Wardrobe.', 'Personality.', 'Visual world.'] },
  { index: '02', name: 'Content production', lede: 'Shot without the shoot.', items: ['Video.', 'Reels.', 'Campaigns.', 'Product handling.', 'Locations.', 'Lip sync.'] },
  { index: '03', name: 'Channel operation', lede: 'A character that behaves like a creator.', items: ['Posting.', 'Captions.', 'Comments.', 'Community.', 'Collaborations.'] },
  { index: '04', name: 'Performance creative', lede: 'One face. A hundred angles.', items: ['Multiple hooks.', 'Multiple campaigns.', 'Multiple ad variations.', 'Built for testing.'] }
];

function SystemRow({ index, name, lede, items, delay }) {
  const [hover, setHover] = React.useState(false);
  return (
    <Reveal delay={delay}>
      <Line />
      <div
        onMouseEnter={function () { setHover(true); }} onMouseLeave={function () { setHover(false); }}
        className="vs-grid"
        style={{
          rowGap: 'var(--space-5)', alignItems: 'start', padding: 'var(--space-8) var(--space-5)',
          background: hover ? 'var(--surface-raised)' : 'transparent',
          transform: hover ? 'translateY(-4px)' : 'none',
          transition: 'background-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-cine)'
        }}
      >
        <div style={{ gridColumn: 'span 2' }}>
          <span className="vs-label" style={{ color: hover ? 'var(--accent)' : 'var(--text-secondary)', transition: 'color var(--dur-base) var(--ease-standard)' }}>{index} / System</span>
        </div>
        <div style={{ gridColumn: 'span 5' }}>
          <Statement as="h3" size="title" reveal={false} lines={[name]} />
          <p style={{ margin: 'var(--space-4) 0 0', fontSize: 'var(--type-body)', color: 'var(--text-primary)', maxWidth: '34ch' }}>{lede}</p>
        </div>
        <div style={{ gridColumn: '9 / span 4' }}>
          <SentenceStack size="var(--type-small)" color="var(--text-secondary)" items={items} />
        </div>
      </div>
    </Reveal>
  );
}

function WhatWeDo() {
  return (
    <Shell id="what-we-do">
      <Eyebrow index="03" style={{ marginBottom: 'var(--space-8)' }}>What we do</Eyebrow>
      <Reveal><Statement as="h2" size="headline" reveal={false} lines={['One character.', 'Four systems.']} style={{ marginBottom: 'var(--space-10)' }} /></Reveal>
      <div>
        {vsSystems.map(function (s, i) { return <SystemRow key={s.index} {...s} delay={i * 90} />; })}
        <Line delay={360} />
      </div>
    </Shell>
  );
}

Object.assign(window, { CoreIdea, CoreIdeaStacked, WhatWeDo });