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

/* SECTION 05 — why this exists */
const vsProblems = [
  { index: '01', label: 'Cost', head: 'Too expensive.', body: 'Real influencers and ambassadors price out smaller brands.' },
  { index: '02', label: 'Control', head: 'Too unpredictable.', body: 'You don\u2019t own the person.' },
  { index: '03', label: 'Volume', head: 'Too slow.', body: 'Every new campaign needs another production process.' }
];

function ProblemRow({ index, label, head, body, 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={{
          alignItems: 'baseline', rowGap: 'var(--space-4)', padding: 'var(--space-8) var(--space-5)',
          background: hover ? 'var(--surface-raised)' : 'transparent',
          transition: 'background-color var(--dur-base) var(--ease-standard)'
        }}>
        <div style={{ gridColumn: 'span 2' }}><Eyebrow index={index} accent={hover}>{label}</Eyebrow></div>
        <div style={{ gridColumn: 'span 6', transform: hover ? 'translateX(6px)' : 'none', transition: 'transform var(--dur-slow) var(--ease-cine)' }}>
          <Statement as="h3" size="title" reveal={false} lines={[head]} />
        </div>
        <div style={{ gridColumn: '10 / span 3' }}>
          <p style={{ margin: 0, fontSize: 'var(--type-small)', color: 'var(--text-secondary)', lineHeight: 'var(--leading-loose)' }}>{body}</p>
        </div>
      </div>
    </Reveal>
  );
}

function WhyThisExists() {
  return (
    <Shell id="why">
      <Eyebrow index="05" style={{ marginBottom: 'var(--space-8)' }}>Why this exists</Eyebrow>
      <Reveal><Statement as="h2" size="headline" reveal={false} lines={['The old model', 'is broken.']} style={{ marginBottom: 'var(--space-10)' }} /></Reveal>
      {vsProblems.map(function (p, i) { return <ProblemRow key={p.index} {...p} delay={i * 100} />; })}
      <Line delay={320} />
      <Reveal delay={200} style={{ marginTop: 'var(--space-10)' }}>
        <Statement as="p" size="display" reveal={false} lines={['So we built', { text: 'a new model.', accent: true }]} />
      </Reveal>
    </Shell>
  );
}

/* SECTION 06 — the opportunity. A slow drifting carousel of the three forces. */
const vsOpportunity = [
  { index: '01', label: 'Demand', lines: ['Every brand', 'needs more video.'], note: 'More formats, more channels, more often.' },
  { index: '02', label: 'Technology', lines: ['AI finally', 'looks believable.'], note: 'The uncanny gap closed. The tooling caught up.' },
  { index: '03', label: 'India', lines: ['One character.', 'Every market.'], note: 'Every Indian language. Every region. Every festival.' }
];

function OppCard({ item, i }) {
  const [hover, setHover] = React.useState(false);
  return (
    <article
      className="vs-opp-card" data-cursor="button"
      onMouseEnter={function () { setHover(true); }} onMouseLeave={function () { setHover(false); }}
      style={{ animationDelay: (i * 1.6) + 's', border: '1px solid ' + (hover ? 'var(--border-accent)' : 'var(--border-hairline)'), background: hover ? 'var(--surface-raised)' : 'var(--surface-card)' }}
    >
      <div aria-hidden="true" className="vs-opp-sweep" style={{ transform: hover ? 'scaleX(1)' : 'scaleX(0)' }} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-7)', transform: hover ? 'translateY(-4px)' : 'none', transition: 'transform var(--dur-slow) var(--ease-cine)' }}>
        <Eyebrow index={item.index} accent={hover}>{item.label}</Eyebrow>
        <Statement as="h3" size="title" reveal={false} lines={item.lines} />
        <p style={{ margin: 0, fontSize: 'var(--type-small)', color: 'var(--text-secondary)', lineHeight: 'var(--leading-loose)', maxWidth: '30ch' }}>{item.note}</p>
      </div>
    </article>
  );
}

function Opportunity() {
  const handheld = useMedia(vsMQ.handheld);
  /* Desktop drifts an endless loop; handheld gets one swipeable snap row so
     nothing animates continuously on a phone GPU. */
  const manual = handheld || vsReduced;
  const set = manual ? vsOpportunity : vsOpportunity.concat(vsOpportunity);
  return (
    <section style={{ borderTop: '1px solid var(--border-hairline)', padding: 'var(--section-pad-y) 0', overflow: 'hidden' }}>
      <div className="vs-bleed" style={{ marginBottom: 'var(--space-10)' }}>
        <Eyebrow index="06" style={{ marginBottom: 'var(--space-7)' }}>The opportunity</Eyebrow>
        <Statement as="h2" size="headline" reveal={false} lines={['The window', { text: 'is open.', accent: true }]} />
      </div>
      <div className={'vs-opp-viewport' + (manual ? ' is-manual' : '')}>
        <div className={'vs-opp-track' + (manual ? ' is-manual' : '')}>
          {set.map(function (o, i) { return <OppCard key={i} item={o} i={i % vsOpportunity.length} />; })}
        </div>
      </div>
    </section>
  );
}

/* SECTION 07 — industries. Vertical scroll moves the rail sideways. */
const vsIndustries = [
  { n: '01', name: 'Apparel', note: 'Every collection, shot the day it lands. No studio booking.' },
  { n: '02', name: 'Hosiery', note: 'Volume catalogue content without repeat model fees.' },
  { n: '03', name: 'Coaching & education', note: 'A recognisable teaching face across every language.' },
  { n: '04', name: 'Clinics', note: 'Consistent, on-brand presenters for sensitive categories.' },
  { n: '05', name: 'Packaged food', note: 'The same host holding every SKU, every festival.' }
];

function IndexPanel({ n }) {
  return (
    <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'flex-end', padding: 'var(--space-6)', background: 'var(--surface-card)', borderBottom: '1px solid var(--border-hairline)' }}>
      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--weight-bold)', fontSize: 'clamp(4rem,8vw,7rem)', lineHeight: 0.78, letterSpacing: 'var(--track-display)', color: 'var(--text-primary)', opacity: 0.16 }}>{n}</span>
    </div>
  );
}

function Rail({ shift }) {
  const manual = shift === null;
  return (
    <div className={'vs-rail' + (manual ? ' vs-hscroll' : '')} style={{
      display: 'flex', gap: 0, padding: '0 var(--page-margin)',
      transform: manual ? undefined : 'translate3d(' + shift + 'px,0,0)',
      transition: manual ? undefined : 'transform 120ms linear',
      willChange: manual ? undefined : 'transform'
    }}>
      {vsIndustries.map(function (ind) {
        return <IndustryTile key={ind.name} name={ind.name} note={ind.note} width="clamp(272px,26vw,420px)" media={<IndexPanel n={ind.n} />} />;
      })}
      <div style={{ flex: '0 0 1px', borderLeft: '1px solid var(--border-hairline)' }} />
    </div>
  );
}

function Industries() {
  const wrap = React.useRef(null);
  const narrow = useMedia(vsMQ.handheld) || vsReduced;
  const p = useProgress(wrap, !narrow);
  const [span, setSpan] = React.useState(0);
  const railRef = React.useRef(null);
  React.useEffect(function () {
    const measure = function () {
      const host = railRef.current;
      const el = host && host.firstElementChild;
      if (!el) return;
      setSpan(Math.max(0, el.scrollWidth - window.innerWidth + 48));
    };
    const raf = requestAnimationFrame(measure);
    window.addEventListener('resize', measure);
    return function () { cancelAnimationFrame(raf); window.removeEventListener('resize', measure); };
  }, [narrow]);

  const head = (
    <div className="vs-bleed" style={{ paddingBottom: 'var(--space-8)' }}>
      <Eyebrow index="07" style={{ marginBottom: 'var(--space-7)' }}>Industries</Eyebrow>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 'var(--space-7)', flexWrap: 'wrap' }}>
        <Statement as="h2" size="headline" reveal={false} lines={['Where we start.']} />
        <Marks>{narrow ? 'Swipe \u2192' : 'Keep scrolling \u2192'}</Marks>
      </div>
    </div>
  );

  return (
    <section ref={wrap} style={{
      borderTop: '1px solid var(--border-hairline)', position: 'relative',
      height: narrow ? 'auto' : '300vh', padding: narrow ? 'var(--section-pad-y) 0' : 0
    }}>
      {narrow ? (
        <React.Fragment>
          {head}
          <div ref={railRef}><Rail shift={null} /></div>
        </React.Fragment>
      ) : (
        <div style={{ position: 'sticky', top: 0, height: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', overflow: 'hidden' }}>
          {head}
          <div ref={railRef}><Rail shift={-p * span} /></div>
          <div aria-hidden="true" className="vs-track" style={{ bottom: 'var(--space-8)' }}><i style={{ transform: 'scaleX(' + p + ')' }} /></div>
        </div>
      )}
    </section>
  );
}

/* SECTION 08 — the standard. Full-bleed frame; the claim sits on the evidence. */
function Standard() {
  const wrap = React.useRef(null);
  const handheld = useMedia(vsMQ.handheld);
  const p = useProgress(wrap, !handheld && !vsTouch && !vsReduced);
  const ref = useReveal();
  return (
    <section id="standard" ref={wrap} style={{ borderTop: '1px solid var(--border-hairline)', position: 'relative', minHeight: '100vh', overflow: 'hidden' }}>
      <div aria-hidden="true" style={{ position: 'absolute', inset: '-8% 0', transform: 'translate3d(0,' + ((p - 0.5) * -90) + 'px,0)' }}>
        <img src="assets/char-road.png" alt="" loading="lazy" decoding="async" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: handheld ? '62% 28%' : '60% 30%', filter: vsTones.deep }} />
      </div>
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(8,8,8,0.94) 0%, rgba(8,8,8,0.66) 46%, rgba(8,8,8,0.2) 100%)' }} />
      <div ref={ref} className="vs-bleed" style={{ position: 'relative', minHeight: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', gap: 'var(--space-8)', paddingTop: 'var(--section-pad-y)', paddingBottom: 'var(--space-10)' }}>
        <Reveal><Marks>08 &mdash; The standard</Marks></Reveal>
        <Reveal delay={120}>
          <Statement as="h2" size="display" reveal={false} lines={['If it doesn\u2019t', 'look shot,', { text: 'it doesn\u2019t ship.', accent: true }]} />
        </Reveal>
        <Reveal delay={240}>
          <div className="vs-grid">
            <div style={{ gridColumn: '7 / span 5', display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
              <SentenceStack size="var(--type-body)" color="var(--text-secondary)" items={['No generic stock faces.', 'No uncanny output.', 'No artificial-looking campaigns.']} />
              <p style={{ margin: 0, fontSize: 'var(--type-lead)', maxWidth: '44ch' }}>
                If the audience knows it&rsquo;s fake in half a second, it isn&rsquo;t good enough.
              </p>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { WhyThisExists, Opportunity, Industries, Standard });