// video-scenes.jsx — 8 scenes for the Ejen Studio demo film
// Each scene is mounted inside a <Sprite start end> from video-app.jsx.
// Uses useSprite() for localTime; designed for a 1920×1080 canvas.

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 1 — Intro: logo + tagline (0–5s)
// ═══════════════════════════════════════════════════════════════════════════

function SceneIntro() {
  const { localTime: t } = useSprite();

  // logo: scale 0.7 → 1, opacity 0 → 1 from 0–1.0s, hold, fade 4–5s
  const logoIn  = ease(clamp(t / 1.0, 0, 1));
  const logoOut = ease(clamp((t - 4.0) / 0.8, 0, 1));
  const logoOpacity = logoIn * (1 - logoOut);
  const logoScale = lerp(0.78, 1.0, logoIn) - logoOut * 0.04;

  const wordIn = ease(clamp((t - 0.6) / 0.7, 0, 1));
  const wordX = lerp(-30, 0, wordIn);

  const taglineIn = ease(clamp((t - 1.4) / 0.7, 0, 1));
  const taglineOpacity = taglineIn * (1 - logoOut);

  // chartreuse halo
  const haloOp = (1 - clamp((t - 3.5) / 1.3, 0, 1)) * clamp(t / 0.6, 0, 1);

  return (
    <div style={{ position: 'absolute', inset: 0, background: COL.void, display: 'grid', placeItems: 'center', overflow: 'hidden' }}>
      {/* halo */}
      <div style={{
        position: 'absolute', width: 1400, height: 900,
        background: 'radial-gradient(ellipse at center, rgba(196,255,69,0.18) 0%, transparent 60%)',
        opacity: haloOp,
        filter: 'blur(40px)',
      }}/>
      {/* faint grid */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(${COL.borderStrong} 1px, transparent 1px), linear-gradient(90deg, ${COL.borderStrong} 1px, transparent 1px)`,
        backgroundSize: '120px 120px',
        opacity: 0.04 * (1 - logoOut),
        maskImage: 'radial-gradient(ellipse 50% 50% at 50% 50%, black, transparent 80%)',
      }}/>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 32,
        opacity: logoOpacity,
        transform: `scale(${logoScale})`,
        willChange: 'transform, opacity',
      }}>
        <div style={{ filter: `drop-shadow(0 0 ${40 * (1 - logoOut)}px ${COL.signalRing})` }}>
          <LogoMark size={140} />
        </div>
        <div style={{ transform: `translateX(${wordX}px)`, opacity: wordIn * (1 - logoOut) }}>
          <span style={{
            fontFamily: FONT.sans, fontSize: 96, fontWeight: 700,
            letterSpacing: '-0.045em', color: COL.optic,
          }}>
            Ejen <span style={{ color: COL.silver, fontWeight: 400 }}>Studio</span>
          </span>
        </div>
      </div>
      <div style={{
        position: 'absolute', bottom: 220,
        opacity: taglineOpacity,
        fontFamily: FONT.mono, fontSize: 18, letterSpacing: '0.32em',
        color: COL.silver, textTransform: 'uppercase',
      }}>
        a day with your <span style={{ color: COL.signal }}>agent</span>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 2 — The ask: phone chat with PA (4–19s, dur ~15s)
// ═══════════════════════════════════════════════════════════════════════════

function SceneAsk() {
  const { localTime: t } = useSprite();

  // entrance: 0–1.0s phone slides up
  const inK = ease(clamp(t / 0.9, 0, 1));
  const outK = ease(clamp((t - 13.5) / 1.0, 0, 1));
  const phoneTy = lerp(900, 0, inK) + outK * (-80);
  const phoneOp = inK * (1 - outK);

  // composer: shows owner typing 1.0–4.0s, then sends. Owner bubble appears at 4.0
  const composerVisible = t >= 0.9 && t < 4.0;
  // fake typed text — grows char-by-char from t=1.2 to t=3.6 (Arabic)
  const arabicMessage = 'اكتب لي بوست لمنيو الجمعة';
  const charsT = clamp((t - 1.2) / 2.4, 0, 1);
  const typedChars = Math.floor(arabicMessage.length * charsT);
  const typedText = arabicMessage.slice(0, typedChars);

  // bubble 1 (owner) appears at 4.0
  const b1 = ease(clamp((t - 4.0) / 0.45, 0, 1));
  // typing dots 5.0–7.5
  const dotsOp = clamp((t - 5.0) / 0.4, 0, 1) * (1 - clamp((t - 7.5) / 0.3, 0, 1));
  // bubble 2 (PA Arabic) at 7.7
  const b2 = ease(clamp((t - 7.7) / 0.45, 0, 1));
  // bubble 3 (PA English) at 9.2
  const b3 = ease(clamp((t - 9.2) / 0.45, 0, 1));
  // bubble 4 (3 angle preview text) at 10.7
  const b4 = ease(clamp((t - 10.7) / 0.45, 0, 1));

  // center the phone in the canvas, slide up from bottom
  return (
    <div style={{ position: 'absolute', inset: 0, background: COL.void, overflow: 'hidden' }}>
      {/* atmospheric backdrop */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(70% 50% at 50% 30%, rgba(196,255,69,0.06), transparent 70%)',
      }}/>
      {/* caption left of phone */}
      <CaptionBlock
        x={150} y={350}
        eyebrow="01 / Ask"
        title={<>Ask in <span style={{ color: COL.signal }}>your language</span>.</>}
        body="Aïcha runs a thali kitchen in Doha. She messages her agent on WhatsApp — same as she does her staff."
        op={inK * (1 - outK)}
      />
      <Phone
        x={1920 - 380 - 220}
        y={(1080 - 760) / 2}
        ty={phoneTy} opacity={phoneOp}
      >
        <WhatsAppHeader />
        <ChatBackground>
          {composerVisible && false /* composer is below; only render in composer area */}
          {/* Owner bubble */}
          {b1 > 0 && (
            <Bubble side="right" dir="rtl" opacity={b1} ty={(1 - b1) * 12}>
              {arabicMessage} 🍝
            </Bubble>
          )}
          {dotsOp > 0 && <TypingDots opacity={dotsOp} />}
          {b2 > 0 && (
            <Bubble side="left" dir="rtl" tone="agent" opacity={b2} ty={(1 - b2) * 12}>
              تمام آيشة. هذي ٣ أفكار لجمعة العايلة 👇
            </Bubble>
          )}
          {b3 > 0 && (
            <Bubble side="left" tone="agent" opacity={b3} ty={(1 - b3) * 12}>
              Three angles for your Friday family thali — tap one to see it as a post.
            </Bubble>
          )}
          {b4 > 0 && (
            <Bubble side="left" tone="agent" opacity={b4} ty={(1 - b4) * 12} maxWidth="86%">
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ color: COL.signal, fontWeight: 600 }}>1.</span>
                  <span>Family thali QAR 89 · sharing-style hero shot</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ color: COL.signal, fontWeight: 600 }}>2.</span>
                  <span>"Friday is for slow lunches" · warm copy</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ color: COL.signal, fontWeight: 600 }}>3.</span>
                  <span>Reel: behind the kitchen, 15s</span>
                </div>
              </div>
            </Bubble>
          )}
        </ChatBackground>
        <ChatComposer
          value={composerVisible ? typedText : ''}
          dir="rtl"
          placeholder="اكتب رسالة…"
          cursor={composerVisible}
        />
      </Phone>
    </div>
  );
}

// shared caption block on left side
function CaptionBlock({ x, y, eyebrow, title, body, op = 1, width = 460 }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y, width,
      opacity: op, willChange: 'opacity',
    }}>
      <div style={{
        fontFamily: FONT.mono, fontSize: 14, color: COL.signal,
        letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 18,
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <span style={{ width: 24, height: 1, background: COL.signal }}/>{eyebrow}
      </div>
      <div style={{
        fontFamily: FONT.sans, fontSize: 56, fontWeight: 700,
        letterSpacing: '-0.035em', lineHeight: 1.05, color: COL.optic,
        marginBottom: 22,
      }}>{title}</div>
      <div style={{
        fontFamily: FONT.sans, fontSize: 19, lineHeight: 1.55, color: COL.silver,
      }}>{body}</div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 3 — Ideation: 3 angle cards (18–29s)
// ═══════════════════════════════════════════════════════════════════════════

function SceneIdeation() {
  const { localTime: t } = useSprite();

  const inK = ease(clamp(t / 0.6, 0, 1));
  const outK = ease(clamp((t - 9.0) / 1.0, 0, 1));

  // cards stagger in 0.5–1.8
  const card = (i) => {
    const start = 0.5 + i * 0.18;
    return ease(clamp((t - start) / 0.5, 0, 1));
  };

  // cursor moves: starts at (1100, 700) ~3.0s, lands on card 2 at ~4.5s
  const cursorEntry = ease(clamp((t - 2.5) / 0.4, 0, 1));
  const cx = lerp(1500, 970, ease(clamp((t - 3.0) / 1.5, 0, 1)));
  const cy = lerp(880, 660, ease(clamp((t - 3.0) / 1.5, 0, 1)));
  const clickT = t > 4.6 && t < 4.9;

  // selected card lifts at 4.7
  const selected = 1; // index
  const selKick = ease(clamp((t - 4.7) / 0.4, 0, 1));

  // confirm pill 5.5+
  const confirm = ease(clamp((t - 5.4) / 0.5, 0, 1));

  const cards = [
    {
      img: '../../assets/tmpl_restaurant_dish.png',
      kicker: 'Hero',
      en: 'Family thali · QAR 89',
      ar: 'ثالي العائلة',
      copy: 'sharing-style, top-down',
    },
    {
      img: '../../assets/tmpl_restaurant_iftar.png',
      kicker: 'Mood',
      en: 'Friday is for slow lunches',
      ar: 'الجمعة لراحة العائلة',
      copy: 'warm, story-led caption',
    },
    {
      img: '../../assets/tmpl_clinic_treatment.png',
      kicker: 'Reel',
      en: 'Behind the kitchen · 15s',
      ar: 'خلف الكواليس',
      copy: 'short vertical video',
    },
  ];

  return (
    <div style={{ position: 'absolute', inset: 0, background: COL.void, overflow: 'hidden', opacity: 1 - outK }}>
      {/* atmospheric */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse 60% 40% at 50% 30%, rgba(196,255,69,0.05), transparent 70%)',
      }}/>
      {/* eyebrow + caption top */}
      <div style={{ position: 'absolute', top: 110, left: 0, right: 0, textAlign: 'center', opacity: inK }}>
        <div style={{
          fontFamily: FONT.mono, fontSize: 14, color: COL.signal,
          letterSpacing: '0.22em', textTransform: 'uppercase',
          display: 'inline-flex', alignItems: 'center', gap: 12,
        }}>
          <span style={{ width: 24, height: 1, background: COL.signal }}/>02 / Ideate<span style={{ width: 24, height: 1, background: COL.signal }}/>
        </div>
        <div style={{
          fontFamily: FONT.sans, fontSize: 64, fontWeight: 700,
          letterSpacing: '-0.04em', color: COL.optic, marginTop: 22,
          lineHeight: 1,
        }}>
          Three takes. <span style={{ color: COL.silver }}>You pick one.</span>
        </div>
      </div>

      {/* cards */}
      <div style={{ position: 'absolute', top: 380, left: 0, right: 0, display: 'flex', justifyContent: 'center', gap: 36 }}>
        {cards.map((c, i) => {
          const k = card(i);
          const lift = i === selected ? selKick * 14 : 0;
          const isSel = i === selected && selKick > 0.05;
          return (
            <div key={i} style={{
              width: 360, height: 480,
              borderRadius: 20,
              background: COL.panel,
              border: `1px solid ${isSel ? 'rgba(196,255,69,0.55)' : COL.border}`,
              boxShadow: isSel
                ? `0 0 0 1px rgba(196,255,69,0.50), 0 30px 80px -20px rgba(196,255,69,0.30)`
                : '0 24px 50px -12px rgba(0,0,0,0.6)',
              overflow: 'hidden',
              transform: `translateY(${lerp(40, 0, k) - lift}px)`,
              opacity: k,
              transition: 'box-shadow 200ms, border 200ms',
              willChange: 'transform, opacity',
              display: 'flex', flexDirection: 'column',
            }}>
              {/* image */}
              <div style={{ position: 'relative', height: 260, overflow: 'hidden' }}>
                <img src={c.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                <div style={{
                  position: 'absolute', top: 12, left: 12,
                  background: 'rgba(7,7,7,0.7)', backdropFilter: 'blur(8px)',
                  padding: '4px 10px', borderRadius: 999,
                  fontFamily: FONT.mono, fontSize: 11, color: COL.signal,
                  letterSpacing: '0.18em', textTransform: 'uppercase',
                  border: `1px solid ${COL.borderStrong}`,
                }}>{c.kicker}</div>
                <div style={{
                  position: 'absolute', top: 12, right: 12,
                  fontFamily: FONT.mono, fontSize: 12, color: COL.silver,
                }}>0{i+1}</div>
              </div>
              {/* body */}
              <div style={{ padding: 20, flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                <div>
                  <div style={{ fontFamily: FONT.sans, fontSize: 22, fontWeight: 600, color: COL.optic, letterSpacing: '-0.02em', marginBottom: 6 }}>{c.en}</div>
                  <div style={{ fontFamily: FONT.ar, fontSize: 18, color: COL.silver, direction: 'rtl', textAlign: 'right' }}>{c.ar}</div>
                </div>
                <div style={{ fontFamily: FONT.sans, fontSize: 13, color: COL.silver, marginTop: 14 }}>
                  {c.copy}
                </div>
              </div>
              {/* selection underline */}
              {isSel && (
                <div style={{
                  height: 4, background: COL.signal,
                  transform: `scaleX(${selKick})`, transformOrigin: 'left',
                }}/>
              )}
            </div>
          );
        })}
      </div>

      {/* cursor */}
      {cursorEntry > 0 && t < 6.5 && (
        <Cursor x={cx} y={cy} opacity={cursorEntry} clicking={clickT} />
      )}

      {/* confirmation pill bottom */}
      {confirm > 0 && (
        <div style={{
          position: 'absolute', bottom: 130, left: 0, right: 0,
          display: 'flex', justifyContent: 'center',
          opacity: confirm,
          transform: `translateY(${(1 - confirm) * 12}px)`,
        }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 12,
            background: COL.panel,
            border: `1px solid rgba(196,255,69,0.40)`,
            padding: '12px 22px',
            borderRadius: 999,
            boxShadow: '0 10px 30px -10px rgba(196,255,69,0.40)',
          }}>
            <span style={{ width: 8, height: 8, borderRadius: 4, background: COL.signal, animation: 'pulse-ring 1.6s ease-out infinite' }}/>
            <span style={{ fontFamily: FONT.sans, fontSize: 18, color: COL.optic, fontWeight: 500 }}>
              Mood selected — <span style={{ color: COL.signal }}>generating now</span>
            </span>
          </div>
        </div>
      )}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 4 — Creation: Studio generates designs (28–41s)
// ═══════════════════════════════════════════════════════════════════════════

function SceneCreation() {
  const { localTime: t } = useSprite();

  const inK = ease(clamp(t / 0.6, 0, 1));
  const outK = ease(clamp((t - 11.5) / 1.0, 0, 1));

  // progress bar 0 → 100% across 1.0–7.0
  const prog = clamp((t - 1.0) / 6.0, 0, 1);

  // image slots fade in at 4.5, 5.6, 6.7 (with shimmer before)
  const slot = (i) => ease(clamp((t - (4.3 + i * 1.0)) / 0.6, 0, 1));

  // approve pill at 9.0
  const approve = ease(clamp((t - 9.0) / 0.5, 0, 1));

  const slotImgs = [
    '../../assets/tmpl_restaurant_iftar.png',
    '../../assets/tmpl_restaurant_dish.png',
    '../../assets/hero_chartreuse_a.png',
  ];

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: 1 - outK }}>
      <AppFrame active="studio" opacity={inK}>
        <div style={{ height: '100%', display: 'flex', flexDirection: 'column', gap: 24 }}>
          {/* eyebrow */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <span style={{ fontFamily: FONT.mono, fontSize: 12, color: COL.signal, letterSpacing: '0.22em', textTransform: 'uppercase' }}>03 / Create</span>
            <span style={{ width: 24, height: 1, background: COL.signal }}/>
            <span style={{ fontFamily: FONT.sans, fontSize: 13, color: COL.silver }}>Studio · post for Friday</span>
          </div>

          {/* prompt panel */}
          <div style={{
            background: COL.panel, border: `1px solid ${COL.border}`,
            borderRadius: 16, padding: 20,
            display: 'flex', alignItems: 'center', gap: 18,
          }}>
            <div style={{
              width: 40, height: 40, borderRadius: 10,
              background: COL.signalSoft, display: 'grid', placeItems: 'center',
              border: `1px solid rgba(196,255,69,0.30)`,
            }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={COL.signal} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M15 4 V2 M15 16 V14 M8 9h-2 M22 9h-2 M17.8 11.8 19 13 M15 9h0 M17.8 6.2 19 5"/><path d="M3 21l9-9"/><path d="M12.2 9.8 14 8"/></svg>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: FONT.mono, fontSize: 11, color: COL.silver, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 6 }}>Mood · "friday is for slow lunches"</div>
              <div style={{ fontFamily: FONT.sans, fontSize: 17, color: COL.optic, letterSpacing: '-0.01em' }}>
                Family thali, top-down warm light, brass plates, Doha kitchen vibe — caption in Khaleeji Arabic + English.
              </div>
            </div>
            <Pill>
              <span style={{ width: 6, height: 6, borderRadius: 3, background: COL.signal, animation: 'pulse-ring 1.6s ease-out infinite' }}/>
              {prog < 1 ? `generating · ${Math.round(prog * 100)}%` : 'ready'}
            </Pill>
          </div>

          {/* progress bar */}
          <div style={{
            height: 3, background: 'rgba(255,255,255,0.06)', borderRadius: 2, overflow: 'hidden',
          }}>
            <div style={{
              width: `${prog * 100}%`, height: '100%', background: COL.signal,
              boxShadow: `0 0 12px ${COL.signal}`,
              transition: 'width 80ms linear',
            }}/>
          </div>

          {/* slots */}
          <div style={{ flex: 1, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, minHeight: 0 }}>
            {[0, 1, 2].map(i => {
              const s = slot(i);
              const showShim = s < 0.05;
              return (
                <div key={i} style={{
                  background: COL.panel, border: `1px solid ${COL.border}`,
                  borderRadius: 14, overflow: 'hidden',
                  display: 'flex', flexDirection: 'column',
                  position: 'relative',
                }}>
                  <div style={{ flex: 1, position: 'relative', overflow: 'hidden', minHeight: 0 }}>
                    {/* shimmer */}
                    <div style={{
                      position: 'absolute', inset: 0,
                      background: 'linear-gradient(135deg, #1a1c20 0%, #0f1113 50%, #1a1c20 100%)',
                      opacity: showShim ? 1 : 0, transition: 'opacity 250ms',
                    }}/>
                    <div style={{
                      position: 'absolute', inset: 0,
                      backgroundImage: 'linear-gradient(110deg, transparent 30%, rgba(196,255,69,0.10) 50%, transparent 70%)',
                      backgroundSize: '200% 100%',
                      animation: 'shimmer 1.6s linear infinite',
                      opacity: showShim ? 1 : 0,
                      transition: 'opacity 250ms',
                    }}/>
                    {/* image */}
                    <img src={slotImgs[i]} alt="" style={{
                      width: '100%', height: '100%', objectFit: 'cover',
                      opacity: s, transform: `scale(${lerp(1.02, 1.0, s)})`,
                      transition: 'opacity 240ms, transform 240ms',
                    }}/>
                    {/* selected ring on slot 0 */}
                    {i === 0 && approve > 0.05 && (
                      <div style={{
                        position: 'absolute', inset: 0,
                        border: `2px solid ${COL.signal}`,
                        borderRadius: 14,
                        boxShadow: `inset 0 0 0 4px rgba(7,7,7,0.4)`,
                        opacity: approve,
                      }}/>
                    )}
                  </div>
                  <div style={{ padding: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <span style={{ fontFamily: FONT.mono, fontSize: 11, color: COL.silver, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
                      {showShim ? 'rendering…' : `option 0${i+1}`}
                    </span>
                    {!showShim && i === 0 && approve > 0.05 && (
                      <span style={{
                        fontFamily: FONT.mono, fontSize: 11, color: COL.signal,
                        letterSpacing: '0.14em', textTransform: 'uppercase',
                        opacity: approve,
                      }}>✓ chosen</span>
                    )}
                  </div>
                </div>
              );
            })}
          </div>

          {/* approve bar */}
          {approve > 0 && (
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              background: COL.panel, border: `1px solid rgba(196,255,69,0.30)`,
              borderRadius: 14, padding: '14px 20px',
              opacity: approve,
              transform: `translateY(${(1 - approve) * 14}px)`,
            }}>
              <span style={{ fontFamily: FONT.sans, fontSize: 16, color: COL.optic }}>
                <span style={{ color: COL.signal }}>Aïcha approved option 01.</span> Scheduling next.
              </span>
              <Pill bg={COL.signal} color={COL.void} border="transparent">
                <span style={{ fontWeight: 600 }}>Schedule it →</span>
              </Pill>
            </div>
          )}
        </div>
      </AppFrame>
      {/* left side caption */}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 5 — Schedule: calendar + best time + drop (40–51s)
// ═══════════════════════════════════════════════════════════════════════════

function SceneSchedule() {
  const { localTime: t } = useSprite();
  const inK = ease(clamp(t / 0.6, 0, 1));
  const outK = ease(clamp((t - 9.5) / 1.0, 0, 1));

  // best time chip 0.6–
  const bestT = ease(clamp((t - 0.7) / 0.5, 0, 1));
  // post chip flies from right (x=1700, y=400) to thursday slot (col=4, row=2 → ~x=1180, y=560) over 2.0–3.8
  const dragK = ease(clamp((t - 2.0) / 1.8, 0, 1));
  // chip drops in cell at 3.8
  const dropK = ease(clamp((t - 3.8) / 0.5, 0, 1));
  // toast at 5.0
  const toastK = ease(clamp((t - 5.0) / 0.5, 0, 1));
  // event added pulses on cell
  const cellPulse = t > 4.0 && t < 4.6;

  // scheduled posts in other cells (preset)
  const events = [
    { day: 1, hr: '09:00', label: 'Mon · launch' },
    { day: 2, hr: '18:30', label: 'Tue · reel' },
    { day: 5, hr: '12:00', label: 'Fri · menu' },
  ];
  const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

  // grid metrics — fits inside main area
  const colW = 1500 / 7;
  const rowH = 110;

  // post chip positions
  const startPos = { x: 1700, y: 380 };
  const targetCol = 4; // Thu
  // grid origin within main area: top=170, left=50 (relative to AppFrame inner)
  const gridLeft = 50;
  const gridTop = 220;
  const targetX = gridLeft + targetCol * colW + 12;
  const targetY = gridTop + 1 * rowH + 18; // row index 1 (8pm row)
  const chipX = lerp(startPos.x, targetX, dragK);
  const chipY = lerp(startPos.y, targetY, dragK);
  const chipScale = lerp(1.0, 0.9, dragK);

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: 1 - outK }}>
      <AppFrame active="calendar" opacity={inK}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18, height: '100%', position: 'relative' }}>
          {/* eyebrow */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <span style={{ fontFamily: FONT.mono, fontSize: 12, color: COL.signal, letterSpacing: '0.22em', textTransform: 'uppercase' }}>04 / Schedule</span>
            <span style={{ width: 24, height: 1, background: COL.signal }}/>
            <span style={{ fontFamily: FONT.sans, fontSize: 13, color: COL.silver }}>Week of May 11 · best times learned from your audience</span>
          </div>

          {/* best time chip */}
          {bestT > 0 && (
            <div style={{
              alignSelf: 'flex-start',
              opacity: bestT, transform: `translateY(${(1 - bestT) * 8}px)`,
              display: 'inline-flex', alignItems: 'center', gap: 12,
              background: COL.panel, border: `1px solid rgba(196,255,69,0.40)`,
              borderRadius: 999, padding: '10px 18px',
            }}>
              <span style={{ width: 8, height: 8, borderRadius: 4, background: COL.signal, animation: 'pulse-ring 1.8s ease-out infinite' }}/>
              <span style={{ fontFamily: FONT.sans, fontSize: 14, color: COL.optic }}>
                Best time for Friday menus → <span style={{ color: COL.signal, fontWeight: 600 }}>Thursday 8:42 PM</span> · 2.4× engagement
              </span>
            </div>
          )}

          {/* week grid */}
          <div style={{
            background: COL.panel, border: `1px solid ${COL.border}`,
            borderRadius: 14, overflow: 'hidden', flex: 1,
            display: 'flex', flexDirection: 'column',
            position: 'relative',
          }}>
            {/* day headers */}
            <div style={{
              display: 'grid', gridTemplateColumns: 'repeat(7,1fr)',
              borderBottom: `1px solid ${COL.border}`,
            }}>
              {days.map((d, i) => (
                <div key={d} style={{
                  padding: '12px 14px', display: 'flex', alignItems: 'baseline', gap: 8,
                  borderRight: i < 6 ? `1px solid ${COL.border}` : 'none',
                }}>
                  <span style={{ fontFamily: FONT.sans, fontSize: 12, color: COL.silver, fontWeight: 500 }}>{d}</span>
                  <span style={{ fontFamily: FONT.sans, fontSize: 14, color: COL.optic, fontWeight: 600 }}>{11 + i}</span>
                </div>
              ))}
            </div>
            {/* grid body — 3 time rows */}
            <div style={{ flex: 1, display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gridAutoRows: '1fr', position: 'relative' }}>
              {Array.from({ length: 21 }).map((_, idx) => {
                const col = idx % 7;
                const row = Math.floor(idx / 7);
                const isTargetCell = col === targetCol && row === 1;
                return (
                  <div key={idx} style={{
                    padding: 8,
                    borderRight: col < 6 ? `1px solid ${COL.border}` : 'none',
                    borderBottom: row < 2 ? `1px solid ${COL.border}` : 'none',
                    position: 'relative',
                    background: isTargetCell && bestT > 0
                      ? 'rgba(196,255,69,0.06)'
                      : 'transparent',
                    boxShadow: isTargetCell && cellPulse ? `inset 0 0 0 2px ${COL.signal}` : 'none',
                  }}>
                    {/* pre-existing events */}
                    {events.filter(e => e.day === col && row === 0).map((e, i) => (
                      <div key={i} style={{
                        background: 'rgba(255,255,255,0.05)',
                        border: `1px solid ${COL.border}`,
                        borderLeft: `2px solid ${COL.silver}`,
                        borderRadius: 6, padding: '4px 8px',
                        fontFamily: FONT.sans, fontSize: 11, color: COL.silver,
                      }}>
                        {e.hr} · {e.label}
                      </div>
                    ))}
                    {/* drop placeholder marker on target cell */}
                    {isTargetCell && bestT > 0 && dropK < 0.3 && (
                      <div style={{
                        position: 'absolute', inset: 6,
                        border: `1.5px dashed ${COL.signal}`, borderRadius: 6,
                        opacity: 0.7,
                      }}/>
                    )}
                    {/* dropped post pill */}
                    {isTargetCell && dropK > 0 && (
                      <div style={{
                        background: COL.signalSoft,
                        border: `1px solid rgba(196,255,69,0.50)`,
                        borderLeft: `3px solid ${COL.signal}`,
                        borderRadius: 6, padding: '6px 10px',
                        fontFamily: FONT.sans, fontSize: 12, color: COL.optic,
                        opacity: dropK,
                        transform: `scale(${lerp(0.96, 1, dropK)})`,
                      }}>
                        <div style={{ fontWeight: 600 }}>8:42 PM · Friday menu</div>
                        <div style={{ fontSize: 10, color: COL.silver, marginTop: 2 }}>WhatsApp · Instagram · X</div>
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>

          {/* floating post chip during drag */}
          {t > 1.4 && dragK < 1 && (
            <div style={{
              position: 'absolute', left: chipX, top: chipY,
              transform: `scale(${chipScale}) rotate(${(1 - dragK) * -6}deg)`,
              background: COL.panelEl, border: `1px solid rgba(196,255,69,0.50)`,
              borderRadius: 10, padding: '10px 14px',
              fontFamily: FONT.sans, fontSize: 13, color: COL.optic,
              boxShadow: '0 16px 32px -8px rgba(0,0,0,0.7)',
              minWidth: 200,
              pointerEvents: 'none',
              zIndex: 10,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ width: 30, height: 30, borderRadius: 6, overflow: 'hidden', flexShrink: 0 }}>
                  <img src="../../assets/tmpl_restaurant_iftar.png" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
                </span>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontWeight: 600, fontSize: 12 }}>Friday family thali</div>
                  <div style={{ fontSize: 10, color: COL.silver, marginTop: 2 }}>Reschedule to best time</div>
                </div>
              </div>
            </div>
          )}

          {/* cursor follows chip */}
          {t > 1.4 && dragK < 1 && (
            <Cursor x={chipX + 10} y={chipY - 4} opacity={1} />
          )}

          {/* toast */}
          {toastK > 0 && (
            <div style={{
              position: 'absolute', bottom: 24, right: 24,
              opacity: toastK, transform: `translateY(${(1 - toastK) * 16}px)`,
              background: COL.panel, border: `1px solid rgba(196,255,69,0.40)`,
              borderRadius: 12, padding: '14px 18px',
              display: 'flex', alignItems: 'center', gap: 12,
              boxShadow: '0 20px 40px -10px rgba(0,0,0,0.7)',
            }}>
              <span style={{
                width: 28, height: 28, borderRadius: 14,
                background: COL.signal, color: COL.void,
                display: 'grid', placeItems: 'center',
              }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
              </span>
              <div>
                <div style={{ fontFamily: FONT.sans, fontSize: 14, color: COL.optic, fontWeight: 600 }}>Scheduled — 3 channels</div>
                <div style={{ fontFamily: FONT.sans, fontSize: 12, color: COL.silver, marginTop: 2 }}>Thursday 8:42 PM · Aïcha will be cooking</div>
              </div>
            </div>
          )}
        </div>
      </AppFrame>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 6 — Live: post + comments + DM auto-reply (50–63s)
// ═══════════════════════════════════════════════════════════════════════════

function SceneLive() {
  const { localTime: t } = useSprite();
  const inK = ease(clamp(t / 0.6, 0, 1));
  const outK = ease(clamp((t - 11.5) / 1.0, 0, 1));

  // post phone slides up at 0.0
  const postOp = inK * (1 - outK);

  // comments stream from 2.0–9.0 — 5 comments stagger
  const comments = [
    { name: 'fatma_q', txt: 'يجنن 🤤', ar: true, t: 2.2 },
    { name: 'doha.eats', txt: 'is delivery available friday?', ar: false, t: 3.4 },
    { name: 'ahmed.h', txt: 'حجزت الطاولة 🙌', ar: true, t: 4.6 },
    { name: 'tasty.qa', txt: 'price for 4 people?', ar: false, t: 5.8 },
    { name: 'noora__', txt: 'بكره راح أزور 💚', ar: true, t: 7.0 },
  ];

  // DM popup at 4.0
  const dmOpen = ease(clamp((t - 4.0) / 0.5, 0, 1));
  // DM owner msg at 4.6
  const dmMsg = ease(clamp((t - 4.6) / 0.4, 0, 1));
  // typing dots 5.4–6.7
  const dmDots = clamp((t - 5.4) / 0.3, 0, 1) * (1 - clamp((t - 6.7) / 0.3, 0, 1));
  // PA reply 6.9
  const dmReply = ease(clamp((t - 6.9) / 0.5, 0, 1));
  // 'auto-reply by Ejen' chip 7.5
  const dmAutoChip = ease(clamp((t - 7.5) / 0.4, 0, 1));

  return (
    <div style={{ position: 'absolute', inset: 0, background: COL.void, overflow: 'hidden', opacity: postOp }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(60% 50% at 30% 50%, rgba(196,255,69,0.05), transparent 70%)',
      }}/>
      {/* eyebrow top */}
      <div style={{ position: 'absolute', top: 70, left: 0, right: 0, textAlign: 'center', opacity: inK }}>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 12,
          fontFamily: FONT.mono, fontSize: 13, color: COL.signal,
          letterSpacing: '0.22em', textTransform: 'uppercase',
        }}>
          <span style={{ width: 24, height: 1, background: COL.signal }}/>
          05 / Live · the agent is awake
          <span style={{ width: 24, height: 1, background: COL.signal }}/>
        </span>
      </div>

      {/* Instagram-style post phone — left side */}
      <Phone x={140} y={(1080 - 760) / 2 + 30} width={380} height={760}>
        {/* IG header */}
        <div style={{
          padding: '54px 14px 12px', display: 'flex', alignItems: 'center', gap: 10,
          background: COL.panel, borderBottom: `1px solid ${COL.border}`,
        }}>
          <ChannelGlyph ch="instagram" size={26} />
          <span style={{ fontFamily: FONT.sans, fontSize: 14, fontWeight: 600, color: COL.optic }}>aichas.kitchen</span>
          <span style={{ fontFamily: FONT.sans, fontSize: 11, color: COL.silver }}>· Doha</span>
          <span style={{ flex: 1 }}/>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={COL.silver} strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
        </div>
        {/* image */}
        <div style={{ position: 'relative', width: '100%', aspectRatio: '1 / 1', overflow: 'hidden', flexShrink: 0 }}>
          <img src="../../assets/tmpl_restaurant_iftar.png" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
          <div style={{
            position: 'absolute', top: 12, right: 12,
            background: 'rgba(7,7,7,0.7)', backdropFilter: 'blur(8px)',
            padding: '4px 10px', borderRadius: 999,
            fontFamily: FONT.mono, fontSize: 10, color: COL.signal,
            letterSpacing: '0.18em', textTransform: 'uppercase',
            border: `1px solid ${COL.borderStrong}`,
          }}>posted by ejen</div>
        </div>
        {/* actions */}
        <div style={{ padding: '10px 14px', display: 'flex', gap: 14 }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={COL.optic} strokeWidth="1.6"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={COL.optic} strokeWidth="1.6"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={COL.optic} strokeWidth="1.6"><path d="m22 2-7 20-4-9-9-4Z"/></svg>
        </div>
        {/* caption */}
        <div style={{ padding: '0 14px 8px', flex: 1, overflow: 'hidden' }}>
          <div style={{ fontFamily: FONT.sans, fontSize: 13, color: COL.optic, fontWeight: 600, marginBottom: 4 }}>
            178 likes · 28 messages
          </div>
          <div style={{ fontFamily: FONT.ar, fontSize: 13, color: COL.optic, direction: 'rtl', textAlign: 'right', lineHeight: 1.55 }}>
            الجمعة لراحة العائلة 💚 ثالي العائلة QAR ٨٩ · يكفي ٤
          </div>
          <div style={{ fontFamily: FONT.sans, fontSize: 12, color: COL.signal, marginTop: 4 }}>
            #fridaylunch #dohaeats #thali
          </div>
        </div>
      </Phone>

      {/* Comments stream — center column */}
      <div style={{
        position: 'absolute', left: 600, top: 220, width: 480,
      }}>
        <div style={{ fontFamily: FONT.mono, fontSize: 11, color: COL.silver, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 18 }}>
          comments rolling in
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {comments.map((c, i) => {
            const o = ease(clamp((t - c.t) / 0.5, 0, 1));
            return (
              <div key={i} style={{
                opacity: o,
                transform: `translateY(${(1 - o) * 18}px)`,
                background: COL.panel, border: `1px solid ${COL.border}`,
                borderRadius: 12, padding: '12px 14px',
                display: 'flex', gap: 12, alignItems: 'flex-start',
                willChange: 'transform, opacity',
              }}>
                <div style={{
                  width: 32, height: 32, borderRadius: 16, flexShrink: 0,
                  background: `linear-gradient(135deg, ${COL.signal}, #2A6FDB, #d59bff)`,
                  filter: 'saturate(0.8) brightness(0.85)',
                }}/>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontFamily: FONT.sans, fontSize: 13, fontWeight: 600, color: COL.optic, marginBottom: 2 }}>{c.name}</div>
                  <div style={{
                    fontFamily: c.ar ? FONT.ar : FONT.sans,
                    fontSize: 14, color: COL.optic,
                    direction: c.ar ? 'rtl' : 'ltr',
                    textAlign: c.ar ? 'right' : 'left',
                  }}>{c.txt}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* DM popup — right side */}
      {dmOpen > 0 && (
        <div style={{
          position: 'absolute', right: 140, top: 200,
          width: 420, opacity: dmOpen,
          transform: `translateY(${(1 - dmOpen) * 30}px) scale(${lerp(0.95, 1, dmOpen)})`,
          background: COL.panel, border: `1px solid ${COL.borderStrong}`,
          borderRadius: 18, overflow: 'hidden',
          boxShadow: '0 40px 80px -20px rgba(0,0,0,0.8)',
        }}>
          {/* header */}
          <div style={{
            padding: 16, background: COL.panelEl,
            borderBottom: `1px solid ${COL.border}`,
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <ChannelGlyph ch="instagram" size={28} />
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: FONT.sans, fontSize: 14, fontWeight: 600, color: COL.optic }}>tasty.qa</div>
              <div style={{ fontFamily: FONT.sans, fontSize: 11, color: COL.silver, display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 6, height: 6, borderRadius: 3, background: COL.signal }}/>DM · responding now
              </div>
            </div>
            {dmAutoChip > 0 && (
              <Pill dir="ltr">
                <span style={{ fontFamily: FONT.mono, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase' }}>auto · ejen</span>
              </Pill>
            )}
          </div>
          <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 10, minHeight: 220, justifyContent: 'flex-end' }}>
            {dmMsg > 0 && (
              <Bubble side="left" opacity={dmMsg} ty={(1 - dmMsg) * 8}>
                Hi! Saw your Friday post — what's the price for 4 people? 🙏
              </Bubble>
            )}
            {dmDots > 0 && <TypingDots opacity={dmDots} />}
            {dmReply > 0 && (
              <Bubble side="right" opacity={dmReply} ty={(1 - dmReply) * 8}>
                <div style={{ fontSize: 14, marginBottom: 6 }}>Hi! Friday family thali is <strong>QAR 89</strong> — feeds 4 comfortably 🌿</div>
                <div style={{
                  marginTop: 8, padding: '8px 10px',
                  background: 'rgba(255,255,255,0.05)', borderRadius: 8,
                  fontSize: 12, color: COL.silver,
                }}>
                  📍 Aïcha's kitchen, Msheireb · open 12:30–4:00 PM
                </div>
                <div style={{ fontSize: 13, marginTop: 8, color: COL.signal }}>Reserve a table?</div>
              </Bubble>
            )}
          </div>
        </div>
      )}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 7 — Recap: today's wins (62–70s)
// ═══════════════════════════════════════════════════════════════════════════

function SceneRecap() {
  const { localTime: t } = useSprite();
  const inK = ease(clamp(t / 0.6, 0, 1));
  const outK = ease(clamp((t - 6.5) / 1.0, 0, 1));

  const tile = (i) => ease(clamp((t - (0.7 + i * 0.25)) / 0.5, 0, 1));
  const note = ease(clamp((t - 2.6) / 0.5, 0, 1));

  const tiles = [
    {
      v: '34', unit: 'messages',
      label: 'handled across WhatsApp & DM',
      detail: 'you only had to step in twice',
    },
    {
      v: '1', unit: 'post',
      label: 'designed, scheduled, published',
      detail: '3 channels · best-time slot',
    },
    {
      v: '3.2', unit: 'hours',
      label: 'gave back to the kitchen',
      detail: 'estimated vs. doing it yourself',
    },
  ];

  return (
    <div style={{ position: 'absolute', inset: 0, background: COL.void, overflow: 'hidden', opacity: 1 - outK }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(60% 50% at 50% 50%, rgba(196,255,69,0.05), transparent 70%)',
      }}/>

      <div style={{ position: 'absolute', top: 130, left: 0, right: 0, textAlign: 'center', opacity: inK }}>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 12,
          fontFamily: FONT.mono, fontSize: 13, color: COL.signal,
          letterSpacing: '0.22em', textTransform: 'uppercase',
        }}>
          <span style={{ width: 24, height: 1, background: COL.signal }}/>06 / Recap<span style={{ width: 24, height: 1, background: COL.signal }}/>
        </span>
        <div style={{
          fontFamily: FONT.sans, fontSize: 64, fontWeight: 700,
          letterSpacing: '-0.04em', color: COL.optic, marginTop: 24, lineHeight: 1,
        }}>
          While you cooked, <span style={{ color: COL.signal }}>today.</span>
        </div>
      </div>

      <div style={{
        position: 'absolute', top: 410, left: 0, right: 0,
        display: 'flex', justifyContent: 'center', gap: 32,
      }}>
        {tiles.map((tile_, i) => {
          const o = tile(i);
          return (
            <div key={i} style={{
              width: 360, opacity: o,
              transform: `translateY(${(1 - o) * 30}px)`,
              background: COL.panel, border: `1px solid ${COL.border}`,
              borderRadius: 22, padding: 36,
              willChange: 'transform, opacity',
            }}>
              <div style={{
                display: 'flex', alignItems: 'baseline', gap: 10,
                fontFamily: FONT.sans, color: COL.optic,
                fontWeight: 700, letterSpacing: '-0.04em',
              }}>
                <span style={{ fontSize: 96, lineHeight: 1, color: COL.signal }}>{tile_.v}</span>
                <span style={{ fontSize: 22, color: COL.silver, fontWeight: 500 }}>{tile_.unit}</span>
              </div>
              <div style={{
                fontFamily: FONT.sans, fontSize: 18, color: COL.optic,
                marginTop: 18, letterSpacing: '-0.01em', lineHeight: 1.35,
              }}>{tile_.label}</div>
              <div style={{
                fontFamily: FONT.sans, fontSize: 14, color: COL.silver,
                marginTop: 12, lineHeight: 1.5,
              }}>{tile_.detail}</div>
            </div>
          );
        })}
      </div>

      {note > 0 && (
        <div style={{
          position: 'absolute', bottom: 130, left: 0, right: 0,
          textAlign: 'center', opacity: note,
          transform: `translateY(${(1 - note) * 12}px)`,
        }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 14,
            background: COL.panel, border: `1px solid ${COL.border}`,
            padding: '12px 22px', borderRadius: 999,
          }}>
            <LogoMark size={26} />
            <span style={{ fontFamily: FONT.sans, fontSize: 16, color: COL.silver }}>
              Aïcha approved the post once. Ejen handled the rest.
            </span>
          </div>
        </div>
      )}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 8 — Outro: logo + tagline + CTA (70–78s)
// ═══════════════════════════════════════════════════════════════════════════

function SceneOutro() {
  const { localTime: t } = useSprite();

  const logoIn = ease(clamp(t / 0.8, 0, 1));
  const halo = clamp(t / 0.8, 0, 1) * (1 - clamp((t - 6.5) / 1.5, 0, 1));
  const lineIn = ease(clamp((t - 0.6) / 0.7, 0, 1));
  const tagIn = ease(clamp((t - 1.2) / 0.7, 0, 1));
  const ctaIn = ease(clamp((t - 2.0) / 0.7, 0, 1));
  const subIn = ease(clamp((t - 2.6) / 0.7, 0, 1));

  return (
    <div style={{ position: 'absolute', inset: 0, background: COL.void, overflow: 'hidden', display: 'grid', placeItems: 'center' }}>
      {/* halo */}
      <div style={{
        position: 'absolute', width: 1600, height: 1000,
        background: 'radial-gradient(ellipse at center, rgba(196,255,69,0.16) 0%, transparent 60%)',
        opacity: halo, filter: 'blur(40px)',
      }}/>

      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', position: 'relative', zIndex: 2 }}>
        <div style={{ opacity: logoIn, transform: `scale(${lerp(0.9, 1, logoIn)})`, filter: `drop-shadow(0 0 ${30 * halo}px ${COL.signalRing})` }}>
          <LogoMark size={120} />
        </div>

        {/* divider line */}
        <div style={{
          width: 240, height: 1, background: COL.borderStrong, marginTop: 40, marginBottom: 36,
          transform: `scaleX(${lineIn})`, transformOrigin: 'center',
          opacity: lineIn,
        }}/>

        <div style={{
          fontFamily: FONT.sans, fontSize: 96, fontWeight: 700,
          letterSpacing: '-0.045em', color: COL.optic, lineHeight: 1.0,
          textAlign: 'center', maxWidth: 1300,
          opacity: tagIn, transform: `translateY(${(1 - tagIn) * 14}px)`,
        }}>
          Your <span style={{ color: COL.signal }}>WhatsApp</span> is your marketing.
        </div>

        <div style={{
          marginTop: 56, display: 'flex', alignItems: 'center', gap: 16,
          opacity: ctaIn, transform: `translateY(${(1 - ctaIn) * 14}px)`,
        }}>
          <Pill bg={COL.signal} color={COL.void} border="transparent">
            <span style={{ fontFamily: FONT.sans, fontSize: 17, fontWeight: 600, padding: '4px 8px' }}>Start your 14-day trial</span>
          </Pill>
          <span style={{ fontFamily: FONT.mono, fontSize: 14, color: COL.silver, letterSpacing: '0.16em', textTransform: 'uppercase' }}>
            ejen.studio
          </span>
        </div>

        <div style={{
          marginTop: 40, opacity: subIn,
          fontFamily: FONT.mono, fontSize: 12, color: COL.silver,
          letterSpacing: '0.22em', textTransform: 'uppercase',
        }}>
          Doha · Riyadh · Dubai
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  SceneIntro, SceneAsk, SceneIdeation, SceneCreation,
  SceneSchedule, SceneLive, SceneRecap, SceneOutro,
  CaptionBlock,
});