// video-scenes-2.jsx
// Equiti+ explainer video — demo scenes (margin save + proactive notifications). LANDSCAPE 1920×1080.

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 4 — DEMO 1: MARGIN SAVE  (28 – 40.5s)
// Left column: eyebrow + title + flow steps. Right column: phone with chat.
// ═══════════════════════════════════════════════════════════════════════════
function Scene4_MarginDemo() {
  return (
    <Sprite start={28.2} end={40.5}>
      <VerticalSlide>
        <SceneBg color={BRAND.bg}>
          <TealGlow x={75} y={50} size={900} />
        </SceneBg>

        {/* Scene label */}
        <Sprite start={28.3} end={40.5}>
          <FadeText x={100} y={90} size={20} weight={700}
            font={FONTS.mono} color={BRAND.teal}
            letterSpacing="0.18em" style={{ textTransform: 'uppercase' }}>
            Scenario 01 · Margin save
          </FadeText>
        </Sprite>

        {/* Narration — left column */}
        <Sprite start={28.5} end={40.5}>
          <FadeText x={100} y={150} width={1140} size={68} weight={700}
            font={FONTS.display} color={BRAND.white}
            letterSpacing="-0.02em" lineHeight={1.08}>
            From question to warning<br/>to <span style={{ color: BRAND.teal }}>a saved account.</span>
          </FadeText>
        </Sprite>

        {/* Flow steps — left column */}
        <Sprite start={30.8} end={40.0}>
          <FlowStep x={100} y={460} num="01" title="Explains the past"
            desc="Pulls the exact margin state at the moment of rejection." />
        </Sprite>
        <Sprite start={32.0} end={40.0}>
          <FlowStep x={100} y={600} num="02" title="Flags the present"
            desc="Margin is at 118% — trending toward stop-out." color={BRAND.warning} />
        </Sprite>
        <Sprite start={33.2} end={40.0}>
          <FlowStep x={100} y={740} num="03" title="Offers a path"
            desc="One tap to deposit or reduce exposure." color={BRAND.success} />
        </Sprite>

        {/* Phone — right column. width=440, height=440*2.05=902 */}
        <PhoneFrame x={1380} y={90} width={440}>
          <ChatScene />
        </PhoneFrame>
      </VerticalSlide>
    </Sprite>
  );
}

function FlowStep({ x, y, num, title, desc, color = BRAND.teal }) {
  const { localTime, duration } = useSprite();
  const entry = 0.4, exit = 0.35;
  const exitStart = Math.max(0, duration - exit);
  let opacity = 1, tx = 0;
  if (localTime < entry) {
    const t = Easing.easeOutCubic(clamp(localTime / entry, 0, 1));
    opacity = t;
    tx = (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,
      display: 'flex', alignItems: 'center', gap: 22,
      opacity,
      transform: `translateX(${tx}px)`,
      width: 1140,
    }}>
      <div style={{
        width: 52, height: 52, borderRadius: 999,
        background: `${color}22`,
        color,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: FONTS.mono, fontSize: 16, fontWeight: 700,
        flexShrink: 0,
      }}>{num}</div>
      <div>
        <div style={{ fontFamily: FONTS.display, fontWeight: 700, fontSize: 30, color: BRAND.white, letterSpacing: '-0.01em' }}>{title}</div>
        <div style={{ fontFamily: FONTS.body, fontSize: 20, color: BRAND.textMuted, marginTop: 4, lineHeight: 1.4 }}>{desc}</div>
      </div>
    </div>
  );
}

// Inner chat scene — messages appear sequentially
function ChatScene() {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: '#0B1019',
      display: 'flex', flexDirection: 'column',
    }}>
      {/* Status bar */}
      <div style={{
        height: 44, padding: '12px 24px 0',
        display: 'flex', justifyContent: 'space-between',
        color: BRAND.white, fontSize: 13, fontWeight: 600,
        fontFamily: FONTS.body,
      }}>
        <span>9:41</span>
        <span style={{ fontSize: 11 }}>●●● 5G</span>
      </div>
      {/* App header */}
      <div style={{
        padding: '14px 18px',
        display: 'flex', alignItems: 'center', gap: 10,
        borderBottom: `1px solid ${BRAND.border}`,
      }}>
        <div style={{
          width: 32, height: 32, borderRadius: 999,
          background: `${BRAND.teal}33`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: BRAND.teal, fontSize: 16,
        }}>✦</div>
        <div>
          <div style={{ color: BRAND.white, fontSize: 14, fontWeight: 600, fontFamily: FONTS.body }}>Equiti+</div>
          <div style={{ color: BRAND.success, fontSize: 10, fontFamily: FONTS.body }}>● Live</div>
        </div>
      </div>

      {/* Messages */}
      <div style={{ flex: 1, padding: '18px 14px', display: 'flex', flexDirection: 'column', gap: 9, overflow: 'hidden' }}>
        <ChatMessage appearAt={0.3} role="user" text="Why did my trade get rejected?" />
        <ChatToolCall appearAt={1.3} name="get_trade_rejection_reason" ret="TRD-88821 · insufficient_margin" />
        <ChatToolCall appearAt={1.9} name="get_margin_status" ret="level 118% · used $1,722" />
        <ChatMessage appearAt={2.6} role="ai"
          text="Insufficient margin, Ahmed."
          subtext={<>Your 0.5-lot XAUUSD buy needed <b style={{ color: BRAND.warning }}>$1,172.75</b> — you had <b>$850</b> available. Margin is at <b style={{ color: BRAND.warning }}>118%</b>, trending to stop-out.</>}
        />
        <ChatActionChip appearAt={4.6} label="Add funds · deposit now" />
      </div>
    </div>
  );
}

function ChatMessage({ appearAt, role, text, subtext }) {
  const { localTime } = useSprite();
  const t = Easing.easeOutCubic(clamp((localTime - appearAt) / 0.35, 0, 1));
  if (t <= 0) return null;
  const isUser = role === 'user';
  return (
    <div style={{
      alignSelf: isUser ? 'flex-end' : 'flex-start',
      maxWidth: isUser ? '75%' : '88%',
      opacity: t,
      transform: `translateY(${(1 - t) * 10}px)`,
      background: isUser ? `${BRAND.blue}33` : 'rgba(255,255,255,0.06)',
      color: BRAND.white,
      padding: '9px 13px',
      borderRadius: isUser ? '14px 14px 2px 14px' : '14px 14px 14px 2px',
      fontFamily: FONTS.body, fontSize: 13, lineHeight: 1.4,
    }}>
      <div style={{ fontWeight: isUser ? 500 : 600 }}>{text}</div>
      {subtext && <div style={{ marginTop: 6, fontSize: 12, color: BRAND.textMuted, fontWeight: 400 }}>{subtext}</div>}
    </div>
  );
}

function ChatToolCall({ appearAt, name, ret }) {
  const { localTime } = useSprite();
  const t = Easing.easeOutCubic(clamp((localTime - appearAt) / 0.3, 0, 1));
  if (t <= 0) return null;
  return (
    <div style={{
      opacity: t,
      fontFamily: FONTS.mono, fontSize: 10,
      color: BRAND.textDim,
      paddingLeft: 6,
      display: 'flex', gap: 6, flexWrap: 'wrap',
    }}>
      <span style={{ color: BRAND.teal }}>→</span>
      <span style={{ color: BRAND.teal }}>{name}</span>
      <span>{ret}</span>
    </div>
  );
}

function ChatActionChip({ appearAt, label }) {
  const { localTime } = useSprite();
  const t = Easing.easeOutBack(clamp((localTime - appearAt) / 0.45, 0, 1));
  if (t <= 0) return null;
  return (
    <div style={{
      alignSelf: 'flex-start',
      maxWidth: '88%',
      opacity: clamp((localTime - appearAt) / 0.35, 0, 1),
      transform: `scale(${0.9 + 0.1 * t})`,
      background: BRAND.teal,
      color: BRAND.black,
      padding: '9px 14px',
      borderRadius: 14,
      fontFamily: FONTS.body, fontSize: 12, fontWeight: 700,
      display: 'flex', alignItems: 'center', gap: 6,
      boxShadow: `0 8px 24px -8px ${BRAND.teal}`,
    }}>
      <span style={{ fontSize: 14 }}>+</span>{label}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 5 — DEMO 2: PROACTIVE LOCK SCREEN  (40 – 52.5s)
// Left: phone lock screen. Right: eyebrow + title + triggers.
// ═══════════════════════════════════════════════════════════════════════════
function Scene5_ProactiveDemo() {
  return (
    <Sprite start={40.2} end={52.5}>
      <VerticalSlide>
        <SceneBg color={BRAND.bg}>
          <TealGlow x={25} y={55} size={900} />
        </SceneBg>

        {/* Phone lock screen — left column. width=440, height=902 */}
        <PhoneFrame x={100} y={90} width={440}>
          <LockScene />
        </PhoneFrame>

        {/* Scene label — right column */}
        <Sprite start={40.3} end={52.5}>
          <FadeText x={660} y={90} size={20} weight={700}
            font={FONTS.mono} color={BRAND.teal}
            letterSpacing="0.18em" style={{ textTransform: 'uppercase' }}>
            Scenario 02 · Proactive signals
          </FadeText>
        </Sprite>

        <Sprite start={40.5} end={52.5}>
          <FadeText x={660} y={150} width={1180} size={68} weight={700}
            font={FONTS.display} color={BRAND.white}
            letterSpacing="-0.02em" lineHeight={1.08}>
            We reach out <span style={{ color: BRAND.teal }}>before</span><br/>they have to ask.
          </FadeText>
        </Sprite>

        {/* Three triggers stacked — right column */}
        <Sprite start={42.4} end={52.2}>
          <Trigger x={660} y={440} kind="high" label="Margin level low — added funds in 2 taps"
            detail="AI detects margin trending toward stop-out" />
        </Sprite>
        <Sprite start={43.6} end={52.2}>
          <Trigger x={660} y={580} kind="ok" label="Withdrawal on the way — ETA 9:00 AM"
            detail="Payment partner confirmed — we notified without asking" />
        </Sprite>
        <Sprite start={44.8} end={52.2}>
          <Trigger x={660} y={720} kind="warn" label="Payment partner running slow today"
            detail="Platform incident surfaced before a single ticket filed" />
        </Sprite>
      </VerticalSlide>
    </Sprite>
  );
}

function Trigger({ x, y, kind = 'ok', label, detail }) {
  const { localTime, duration } = useSprite();
  const entry = 0.45, exit = 0.35;
  const exitStart = Math.max(0, duration - exit);
  let opacity = 1, tx = 0;
  if (localTime < entry) {
    const t = Easing.easeOutCubic(clamp(localTime / entry, 0, 1));
    opacity = t; tx = (1 - t) * -30;
  } else if (localTime > exitStart) {
    const t = Easing.easeInCubic(clamp((localTime - exitStart) / exit, 0, 1));
    opacity = 1 - t;
  }
  const colors = { high: BRAND.error, warn: BRAND.warning, ok: BRAND.success };
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      width: 1180, padding: '18px 22px',
      background: 'rgba(255,255,255,0.04)',
      border: `1px solid ${BRAND.border}`,
      borderRadius: 14,
      display: 'flex', alignItems: 'center', gap: 18,
      opacity, transform: `translateX(${tx}px)`,
      boxSizing: 'border-box',
    }}>
      <div style={{
        width: 14, height: 14, borderRadius: 999,
        background: colors[kind],
        boxShadow: `0 0 0 6px ${colors[kind]}22`,
        flexShrink: 0,
      }}/>
      <div>
        <div style={{ fontFamily: FONTS.body, fontSize: 22, fontWeight: 600, color: BRAND.white }}>{label}</div>
        <div style={{ fontFamily: FONTS.body, fontSize: 16, color: BRAND.textMuted, marginTop: 2 }}>{detail}</div>
      </div>
    </div>
  );
}

function LockScene() {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: `linear-gradient(180deg, #0B1019 0%, #050A13 100%)`,
      padding: '70px 14px 14px',
      display: 'flex', flexDirection: 'column', gap: 12,
    }}>
      <div style={{ textAlign: 'center', marginBottom: 22 }}>
        <div style={{
          fontFamily: FONTS.body, fontSize: 13, fontWeight: 500,
          color: 'rgba(255,255,255,0.7)', marginBottom: 4,
        }}>Tuesday, April 14</div>
        <div style={{
          fontFamily: FONTS.display, fontWeight: 300,
          fontSize: 78, color: BRAND.white, letterSpacing: '-0.03em', lineHeight: 1,
        }}>9:41</div>
      </div>

      <LockNotif appearAt={5.5} color={BRAND.error}
        title="Margin level low: 118%"
        body="Consider adding funds or closing a position to avoid stop-out on XAUUSD." />
      <LockNotif appearAt={7.2} color={BRAND.success}
        title="Your $500 withdrawal is on the way"
        body="Expected in your account by 9:00 AM tomorrow." />
      <LockNotif appearAt={8.9} color={BRAND.warning}
        title="Bank transfers running slow today"
        body="We're tracking a 2–4 hour delay with our payment partner." />
    </div>
  );
}

function LockNotif({ appearAt, color, title, body }) {
  const { localTime } = useSprite();
  const t = Easing.easeOutBack(clamp((localTime - appearAt) / 0.5, 0, 1));
  if (t <= 0) return null;
  return (
    <div style={{
      background: 'rgba(255,255,255,0.08)',
      backdropFilter: 'blur(20px)',
      borderRadius: 14,
      padding: 12,
      display: 'flex', gap: 10, alignItems: 'flex-start',
      opacity: clamp((localTime - appearAt) / 0.4, 0, 1),
      transform: `translateY(${(1 - t) * 20}px) scale(${0.94 + 0.06 * t})`,
      border: `1px solid rgba(255,255,255,0.08)`,
    }}>
      <div style={{
        width: 24, height: 24, borderRadius: 6,
        background: color,
        flexShrink: 0,
      }}/>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between',
          fontFamily: FONTS.body, fontSize: 9, fontWeight: 700,
          color: 'rgba(255,255,255,0.5)', letterSpacing: '0.05em',
          textTransform: 'uppercase', marginBottom: 2,
        }}>
          <span>EQUITI+</span><span>now</span>
        </div>
        <div style={{
          fontFamily: FONTS.body, fontSize: 12, fontWeight: 600,
          color: BRAND.white, marginBottom: 2, lineHeight: 1.25,
        }}>{title}</div>
        <div style={{
          fontFamily: FONTS.body, fontSize: 10, fontWeight: 400,
          color: 'rgba(255,255,255,0.72)', lineHeight: 1.35,
        }}>{body}</div>
      </div>
    </div>
  );
}

Object.assign(window, {
  Scene4_MarginDemo, Scene5_ProactiveDemo,
  FlowStep, ChatScene, ChatMessage, ChatToolCall, ChatActionChip,
  Trigger, LockScene, LockNotif,
});