const { Statement, Rule } = window.VamshotDesignSystem_18ef2a;

/* SECTION 04 — the character. Scroll drives the world; the face never changes. */
const vsWorlds = [
  { key: 'Face', index: '01', src: 'assets/char-portrait.png', pos: 'center 18%', posMobile: 'center 12%', tone: 'cool', world: 'Interior / available light', note: 'Locked geometry. Identical in every frame, every campaign, every year.' },
  { key: 'Wardrobe', index: '02', src: 'assets/char-studio.png', pos: 'center 20%', posMobile: 'center 14%', tone: 'mono', world: 'Studio / single hard key', note: 'Styling changes. The character does not.' },
  { key: 'Location', index: '03', src: 'assets/char-road.png', pos: 'center 28%', posMobile: '58% 26%', tone: 'deep', world: 'Exterior / hill road', note: 'Street, studio, store, rooftop, festival ground.' },
  { key: 'Content', index: '04', src: 'assets/char-lobby.png', pos: 'center 14%', posMobile: 'center 10%', tone: 'cool', world: 'Lobby / night', note: 'Reels, stills, campaigns, ads. Continuously.' }
];
const vsVariables = ['Voice', 'Personality', 'Language', 'Culture'];

/* The world frame — identical on every breakpoint, only the box changes. */
function CharacterFrame({ active, step, mobile }) {
  const current = vsWorlds[active];
  return (
    <div className="vs-char-media" data-cursor="image" style={{
      position: 'relative', overflow: 'hidden', border: '1px solid var(--border-hairline)',
      background: 'var(--surface-card)',
      height: mobile ? undefined : 'min(70vh,780px)', aspectRatio: mobile ? '4 / 5' : undefined
    }}>
      {vsWorlds.map(function (w, i) {
        const on = i === active;
        return (
          <img key={w.key} src={w.src} alt={'NOTHUMAN character \u2014 ' + w.world} loading="lazy" decoding="async" style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
            objectPosition: mobile ? w.posMobile : w.pos,
            filter: vsTones[w.tone], opacity: on ? 1 : 0, transform: on ? 'scale(1)' : 'scale(1.05)',
            transition: 'opacity var(--dur-cine) var(--ease-cine), transform var(--dur-cine) var(--ease-cine)'
          }} />
        );
      })}
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, backgroundImage: 'var(--grain-url)', opacity: 0.07, mixBlendMode: 'overlay' }} />
      {step === null ? null : (
        <div aria-hidden="true" style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '1px', background: 'var(--accent)', transform: 'scaleX(' + step + ')', transformOrigin: 'left', transition: 'transform 120ms linear' }} />
      )}
      <div style={{ position: 'absolute', left: 'var(--space-5)', bottom: 'var(--space-5)', right: 'var(--space-5)', display: 'flex', alignItems: 'baseline', gap: 'var(--space-4)', flexWrap: 'wrap' }}>
        <span className="vs-label" style={{ color: 'var(--accent)' }}>{current.index} / 04</span>
        <span className="vs-label">{current.world}</span>
      </div>
    </div>
  );
}

function WorldList({ active, onPick, onHover }) {
  return (
    <div className="vs-char-list">
      {vsWorlds.map(function (w, i) {
        const on = i === active;
        return (
          <button key={w.key} type="button" data-cursor="button"
            aria-pressed={on}
            onClick={function () { onPick(i); }}
            onMouseEnter={onHover ? function () { onHover(i); } : undefined}
            onMouseLeave={onHover ? function () { onHover(null); } : undefined}
            style={{
              appearance: 'none', width: '100%', background: on ? 'var(--accent-wash)' : 'transparent',
              border: 'none', borderTop: '1px solid ' + (on ? 'var(--border-accent)' : 'var(--border-hairline)'),
              padding: 'var(--space-4) 0 var(--space-4) ' + (on ? 'var(--space-5)' : '0'),
              textAlign: 'left', display: 'flex', alignItems: 'baseline', gap: 'var(--space-4)',
              fontFamily: 'var(--font-display)', fontWeight: 'var(--weight-bold)', textTransform: 'uppercase',
              fontSize: 'clamp(1.05rem,1.7vw,1.5rem)', letterSpacing: 'var(--track-title)',
              color: on ? 'var(--accent)' : 'var(--text-primary)',
              transition: 'color var(--dur-fast) var(--ease-standard), background-color var(--dur-base) var(--ease-standard), padding-left var(--dur-base) var(--ease-cine), border-color var(--dur-base) var(--ease-standard)'
            }}>
            <span className="vs-label" style={{ color: 'inherit', opacity: on ? 1 : 0.55 }}>{w.index}</span>
            <span>{w.key}</span>
          </button>
        );
      })}
      <div style={{ borderTop: '1px solid var(--border-hairline)' }} />
    </div>
  );
}

function Chips() {
  return (
    <div className="vs-char-chips" style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-2)' }}>
      {vsVariables.map(function (v) {
        return <span key={v} className="vs-label" style={{ border: '1px solid var(--border-hairline)', padding: '6px var(--space-3)' }}>{v}</span>;
      })}
    </div>
  );
}

const vsCharHead = <Statement as="h2" size="headline" reveal={false} lines={['We don\u2019t build', 'a face.', { text: 'We build a world.', accent: true }]} />;

/* Mobile: stacked and tapped, not scroll-locked. Same frame, same list. */
function CharacterStacked() {
  const [active, setActive] = React.useState(0);
  const ref = useReveal();
  return (
    <section id="character" 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-7)' }}>
        <Marks>04 &mdash; The character</Marks>
        <Reveal className="vs-char-head">{vsCharHead}</Reveal>
        <Reveal delay={120} className="vs-mask"><CharacterFrame active={active} step={null} mobile /></Reveal>
        <p style={{ margin: 0, fontSize: 'var(--type-body)', color: 'var(--text-secondary)', lineHeight: 'var(--leading-loose)' }}>{vsWorlds[active].note}</p>
        <WorldList active={active} onPick={setActive} />
        <Chips />
      </div>
    </section>
  );
}

function TheCharacter() {
  const handheld = useMedia(vsMQ.handheld);
  const wrap = React.useRef(null);
  const p = useProgress(wrap, !handheld && !vsReduced);
  const [hover, setHover] = React.useState(null);
  const [picked, setPicked] = React.useState(null);
  if (handheld || vsReduced) return <CharacterStacked />;
  const scrolled = Math.min(vsWorlds.length - 1, Math.floor(p * vsWorlds.length * 0.999));
  const active = hover !== null ? hover : (picked !== null ? picked : scrolled);
  const step = vsClamp(p * vsWorlds.length - active);
  return (
    <section id="character" ref={wrap} style={{ borderTop: '1px solid var(--border-hairline)', height: '440vh', position: 'relative' }}>
      <div style={{ position: 'sticky', top: 0, height: '100vh', display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
        <div className="vs-bleed vs-grid" style={{ width: '100%', alignItems: 'center', rowGap: 'var(--space-7)' }}>
          <div className="vs-char-col" style={{ gridColumn: 'span 4', display: 'flex', flexDirection: 'column', gap: 'var(--space-7)' }}>
            <Marks>04 &mdash; The character</Marks>
            <div className="vs-char-head">{vsCharHead}</div>
            <WorldList active={active} onPick={setPicked} onHover={setHover} />
            <Chips />
          </div>
          <div style={{ gridColumn: '6 / span 7', display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
            <CharacterFrame active={active} step={step} />
            <Rule />
            <p style={{ margin: 0, fontSize: 'var(--type-body)', color: 'var(--text-secondary)', maxWidth: '52ch', lineHeight: 'var(--leading-loose)' }}>{vsWorlds[active].note}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { TheCharacter, CharacterStacked });