// video-scenes-1.jsx
// Equiti+ explainer video — title + problem + solution scenes. LANDSCAPE 1920×1080.
// Each scene wraps its content in <VerticalSlide> so scene transitions move vertically.
// Requires: animations.jsx + video-components.jsx

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 1 — TITLE / COLD OPEN   (0 – 7.2s)
// ═══════════════════════════════════════════════════════════════════════════
function Scene1_Title() {
  return (
    <Sprite start={0} end={7.2}>
      <VerticalSlide>
        <SceneBg color={BRAND.bg}>
          <GridBg opacity={0.04} size={120} />
          <TealGlow x={50} y={50} size={1200} />
        </SceneBg>

        {/* Logo reveal — centered on 1920-wide stage.
            Logo width=600, visible glyph portion ends at ~73.9% → visual width ~443,
            plus extends ~160px past that. Center visual block x ≈ (1920-603)/2 ≈ 658 */}
        <Sprite start={0.4} end={7.2}>
          <EquitiLogo x={658} y={440} width={600} />
        </Sprite>

        {/* Tagline */}
        <Sprite start={2.2} end={7.2}>
          <FadeText x={0} y={660} width={1920} size={34} weight={500}
            font={FONTS.body} align="center" color={BRAND.textMuted}
            letterSpacing="0.06em">
            AI-native support for traders
          </FadeText>
        </Sprite>
      </VerticalSlide>
    </Sprite>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 2 — THE PROBLEM  (7 – 18.5s)
// Three stat cards side by side: 68% status checks, 14min response, 3.2x churn
// ═══════════════════════════════════════════════════════════════════════════
function Scene2_Problem() {
  return (
    <Sprite start={7} end={18.5}>
      <VerticalSlide>
        <SceneBg color={BRAND.bg}>
          <GridBg opacity={0.03} size={80} />
        </SceneBg>

        {/* Section heading */}
        <Sprite start={7.1} end={18.5}>
          <Eyebrow x={140} y={110}>The gap</Eyebrow>
        </Sprite>

        <Sprite start={7.4} end={18.5}>
          <FadeText x={140} y={160} width={1640} size={64} weight={700}
            font={FONTS.display} color={BRAND.white}
            letterSpacing="-0.02em" lineHeight={1.1}>
            Most support arrives <span style={{ color: BRAND.teal }}>after</span> the trade has already gone wrong.
          </FadeText>
        </Sprite>

        {/* Three stat cards — horizontal row. w=520, gap=40: 140 + 520+40 = 700, + 520+40 = 1260 */}
        <Sprite start={10.0} end={18.0}>
          <StatCard x={140} y={460} big="68" suffix="%"
            label="of support contacts are status checks"
            note={'"Where\'s my withdrawal?" · "Why was my trade rejected?"'}
            color={BRAND.teal} />
        </Sprite>

        <Sprite start={11.2} end={18.0}>
          <StatCard x={700} y={460} big="14" suffix="min"
            label="median first-response time"
            note="Too long when a client is watching a losing position."
            color={BRAND.warning} />
        </Sprite>

        <Sprite start={12.4} end={18.0}>
          <StatCard x={1260} y={460} big="3.2" suffix="×"
            label="higher churn after an unresolved issue"
            note="A support failure is the strongest churn predictor."
            color={BRAND.error} />
        </Sprite>

        {/* Kicker */}
        <Sprite start={15.0} end={18.0}>
          <FadeText x={0} y={920} width={1920} size={32} weight={500}
            font={FONTS.body} color={BRAND.textMuted} align="center" lineHeight={1.3}>
            And the data needed to answer them? <span style={{ color: BRAND.teal, fontWeight: 600 }}>Already in our own systems.</span>
          </FadeText>
        </Sprite>
      </VerticalSlide>
    </Sprite>
  );
}

function StatCard({ x, y, big, suffix, label, note, color = BRAND.teal }) {
  const { localTime, duration } = useSprite();
  const entryDur = 0.5;
  const exitDur = 0.4;
  const exitStart = Math.max(0, duration - exitDur);

  let opacity = 1, ty = 0;
  if (localTime < entryDur) {
    const t = Easing.easeOutCubic(clamp(localTime / entryDur, 0, 1));
    opacity = t;
    ty = (1 - t) * 40;
  } else if (localTime > exitStart) {
    const t = Easing.easeInCubic(clamp((localTime - exitStart) / exitDur, 0, 1));
    opacity = 1 - t;
  }

  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      width: 520, padding: '36px 34px',
      background: 'rgba(255,255,255,0.04)',
      border: `1px solid ${BRAND.border}`,
      borderRadius: 24,
      transform: `translateY(${ty}px)`,
      transformOrigin: 'center top',
      opacity,
      boxSizing: 'border-box',
    }}>
      <div style={{
        display: 'flex', alignItems: 'baseline', gap: 4,
        fontFamily: FONTS.display,
        fontWeight: 800,
        fontSize: 140,
        color,
        letterSpacing: '-0.04em',
        lineHeight: 1,
        fontVariantNumeric: 'tabular-nums',
        marginBottom: 18,
      }}>
        {big}<span style={{ color: BRAND.textMuted, fontSize: 56 }}>{suffix}</span>
      </div>
      <div style={{
        fontFamily: FONTS.body, fontSize: 24, fontWeight: 600,
        color: BRAND.white, lineHeight: 1.3, marginBottom: 10,
      }}>{label}</div>
      <div style={{
        fontFamily: FONTS.body, fontSize: 17, fontWeight: 400,
        color: BRAND.textDim, lineHeight: 1.45,
      }}>{note}</div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 3 — SOLUTION REVEAL  (18 – 28.5s)
// "Meet Equiti+" with three capability pillars (horizontal row)
// ═══════════════════════════════════════════════════════════════════════════
function Scene3_Solution() {
  return (
    <Sprite start={18} end={28.5}>
      <VerticalSlide>
        <SceneBg color={BRAND.bg}>
          <TealGlow x={30} y={40} size={900} />
          <TealGlow x={80} y={70} size={700} />
        </SceneBg>

        {/* Eyebrow */}
        <Sprite start={18.2} end={28.5}>
          <FadeText x={0} y={100} width={1920} size={22} weight={500}
            font={FONTS.body} color={BRAND.teal} align="center"
            letterSpacing="0.22em" style={{ textTransform: 'uppercase' }}>
            Our answer
          </FadeText>
        </Sprite>

        {/* "Meet" centered */}
        <Sprite start={18.6} end={28.5}>
          <FadeText x={0} y={150} width={1920} size={84} weight={800}
            font={FONTS.display} color={BRAND.white} align="center"
            letterSpacing="-0.03em" lineHeight={1.05}>
            Meet
          </FadeText>
        </Sprite>

        {/* Logo centered below "Meet" */}
        <Sprite start={18.9} end={28.5}>
          <EquitiLogo x={658} y={260} width={600} />
        </Sprite>

        <Sprite start={19.8} end={28.5}>
          <FadeText x={0} y={480} width={1920} size={28} weight={400}
            font={FONTS.body} color={BRAND.textMuted} align="center" lineHeight={1.4}>
            An AI-native support layer that reads live account state,<br/>
            resolves in seconds, and calls a human when it should.
          </FadeText>
        </Sprite>

        {/* Three capability pillars — horizontal row. w=480, x=140/720/1300 */}
        <Sprite start={22.0} end={28.2}>
          <Pillar x={140} y={660} num="01" title="Grounded in live data"
            desc="Claude + MCP tools read balances, margin, KYC, and withdrawals in real time." />
        </Sprite>
        <Sprite start={22.8} end={28.2}>
          <Pillar x={720} y={660} num="02" title="Proactive, not reactive"
            desc="Flags margin risks, withdrawal delays, and outages before the client asks." />
        </Sprite>
        <Sprite start={23.6} end={28.2}>
          <Pillar x={1300} y={660} num="03" title="Human handoff, zero re-asking"
            desc="Full transcript, tool calls, and summary handed to a CS agent on escalation." />
        </Sprite>
      </VerticalSlide>
    </Sprite>
  );
}

function Pillar({ x, y, num, title, desc }) {
  const { localTime, duration } = useSprite();
  const entry = 0.5;
  const exit = 0.4;
  const exitStart = Math.max(0, duration - exit);
  let opacity = 1, ty = 0;
  if (localTime < entry) {
    const t = Easing.easeOutCubic(clamp(localTime / entry, 0, 1));
    opacity = t;
    ty = (1 - t) * 30;
  } else if (localTime > exitStart) {
    const t = Easing.easeInCubic(clamp((localTime - exitStart) / exit, 0, 1));
    opacity = 1 - t;
  }
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      width: 480, padding: '28px 30px',
      background: 'rgba(0,175,171,0.06)',
      border: `1px solid rgba(0,175,171,0.25)`,
      borderRadius: 20,
      opacity,
      transform: `translateY(${ty}px)`,
      boxSizing: 'border-box',
    }}>
      <div style={{
        fontFamily: FONTS.mono, fontSize: 13, fontWeight: 700,
        color: BRAND.teal, letterSpacing: '0.12em',
        marginBottom: 14,
      }}>{num} · PILLAR</div>
      <div style={{
        fontFamily: FONTS.display, fontSize: 30, fontWeight: 700,
        color: BRAND.white, lineHeight: 1.15,
        letterSpacing: '-0.015em',
        marginBottom: 10,
      }}>{title}</div>
      <div style={{
        fontFamily: FONTS.body, fontSize: 18, fontWeight: 400,
        color: BRAND.textMuted, lineHeight: 1.5,
      }}>{desc}</div>
    </div>
  );
}

Object.assign(window, {
  Scene1_Title, Scene2_Problem, Scene3_Solution,
  StatCard, Pillar,
});