// scenes.jsx — JayLeads 30s promo scenes
// Palette: bg #05070D / navy #0A1020 / card #111A33 / accent #5B8CFF / jay #FFB547

const JAY = '#FFB547';
const ACCENT = '#5B8CFF';
const BG0 = '#05070D';
const BG1 = '#0A1020';
const BG2 = '#111A33';
const BG3 = '#1A2547';
const INK0 = '#EAF0FF';
const INK1 = '#B9C5E4';
const INK2 = '#7A88AE';
const LINE = 'rgba(140,170,230,0.22)';
const SUCCESS = '#3DDC97';

const FONT_SANS = "'Geist', ui-sans-serif, system-ui, sans-serif";
const FONT_MONO = "'Geist Mono', ui-monospace, monospace";
const FONT_SERIF = "'Instrument Serif', serif";

// ────────────────────────────────────────────────────────────────────
// Atmospheric background — matches the landing page
// ────────────────────────────────────────────────────────────────────
function Atmosphere({ intensity = 1 }) {
  return (
    <div style={{
      position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none',
      background: `
        radial-gradient(1400px 800px at 75% -5%, rgba(91,140,255,${0.22*intensity}) 0%, transparent 60%),
        radial-gradient(1100px 700px at 8% 25%, rgba(60,90,200,${0.20*intensity}) 0%, transparent 60%),
        linear-gradient(180deg, #05070D 0%, #060A16 40%, #05070D 100%)
      `,
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `
          linear-gradient(to right, rgba(120,150,220,0.045) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(120,150,220,0.045) 1px, transparent 1px)
        `,
        backgroundSize: '80px 80px',
        maskImage: 'radial-gradient(ellipse at 50% 40%, #000 0%, transparent 75%)',
        WebkitMaskImage: 'radial-gradient(ellipse at 50% 40%, #000 0%, transparent 75%)',
      }}/>
    </div>
  );
}

// Brand mark
function BrandMark({ size = 28 }) {
  return (
    <span style={{
      width: size, height: size, display: 'inline-grid', placeItems: 'center',
      borderRadius: size * 0.28,
      background: `linear-gradient(135deg, ${ACCENT}, #7EE8FF)`,
      boxShadow: `0 0 0 1px rgba(91,140,255,0.5), 0 6px 20px -6px rgba(91,140,255,0.6)`,
      color: BG1,
    }}>
      <svg viewBox="0 0 20 20" width={size*0.58} height={size*0.58} fill="none">
        <path d="M4 3h12v4l-5 5v4l-2 1v-5L4 7V3z" fill="currentColor"/>
      </svg>
    </span>
  );
}

// ────────────────────────────────────────────────────────────────────
// SCENE 1 (0–4s): PAIN — Phone buzzing with unread leads piling up
// ────────────────────────────────────────────────────────────────────
function ScenePain() {
  const { localTime } = useSprite();
  const t = localTime;

  // Camera shake (anticipation of buzzing)
  const shake = Math.sin(t * 40) * Math.max(0, 1 - t * 0.4) * 4;
  const shakeY = Math.cos(t * 38) * Math.max(0, 1 - t * 0.4) * 2.5;

  const notifs = [
    { t: 0.4, name: 'Sarah R.', msg: 'Hi, my kitchen sink is leaking...', src: 'FB ADS', time: '2m ago' },
    { t: 0.9, name: 'Mike T.', msg: 'Need HVAC quote for 2BR', src: 'GOOGLE', time: '4m ago' },
    { t: 1.4, name: 'Priya L.', msg: 'Water heater pilot is out', src: 'ANGI', time: '7m ago' },
    { t: 1.9, name: 'Dan K.', msg: 'Clogged drain — urgent?', src: 'YELP', time: '11m ago' },
    { t: 2.4, name: 'Ana C.', msg: 'Is this number still active?', src: 'WEB', time: '19m ago' },
  ];

  // Big counter
  const leadCount = Math.min(5, Math.floor(t / 0.5));
  const counterScale = 1 + (t < 0.3 ? t * 0.3 : 0);

  // Caption appears at 2.8s
  const captionOp = clamp((t - 2.6) / 0.4, 0, 1);

  return (
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      transform: `translate(${shake}px, ${shakeY}px)`,
    }}>
      {/* Phone frame */}
      <div style={{
        position: 'relative',
        width: 420, height: 760,
        borderRadius: 52,
        background: 'linear-gradient(180deg, #0B1228 0%, #0A1020 100%)',
        boxShadow: `
          inset 0 0 0 1px rgba(120,150,220,0.18),
          0 0 0 10px #05070D,
          0 0 0 12px rgba(140,170,230,0.14),
          0 50px 100px -20px rgba(0,0,0,0.7),
          0 0 80px 10px rgba(255, 70, 70, ${0.2 + Math.abs(Math.sin(t*6))*0.15})
        `,
        overflow: 'hidden',
        transform: `translateY(-10px) rotate(${Math.sin(t*3)*0.8}deg)`,
      }}>
        {/* Notch */}
        <div style={{
          position: 'absolute', top: 14, left: '50%', transform: 'translateX(-50%)',
          width: 130, height: 32, background: '#05070D', borderRadius: 999, zIndex: 5,
        }}/>

        {/* Status bar */}
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, height: 52,
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
          padding: '0 30px 8px', fontSize: 15, fontWeight: 600, color: INK0,
          fontFamily: FONT_SANS,
        }}>
          <span>9:41</span>
          <span style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
            <span style={{ fontSize: 11, color: '#FF5555' }}>●</span>
            <span style={{ fontSize: 12 }}>LEADS</span>
          </span>
        </div>

        {/* Header */}
        <div style={{
          position: 'absolute', top: 52, left: 0, right: 0, height: 70,
          padding: '0 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          borderBottom: `1px solid ${LINE}`,
          fontFamily: FONT_SANS,
        }}>
          <span style={{ fontSize: 20, fontWeight: 500, color: INK0, letterSpacing: '-0.01em' }}>
            Inbox
          </span>
          <span style={{
            background: '#FF3B3B', color: '#fff', fontSize: 13, fontWeight: 600,
            padding: '4px 10px', borderRadius: 999,
            transform: `scale(${counterScale})`,
            boxShadow: '0 0 20px rgba(255,59,59,0.5)',
            fontVariantNumeric: 'tabular-nums',
          }}>
            {leadCount} new
          </span>
        </div>

        {/* Notification list */}
        <div style={{
          position: 'absolute', top: 122, left: 0, right: 0, bottom: 0,
          padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 10,
          fontFamily: FONT_SANS,
        }}>
          {notifs.map((n, i) => {
            const appear = clamp((t - n.t) / 0.3, 0, 1);
            const bounce = Easing.easeOutBack(appear);
            return (
              <div key={i} style={{
                opacity: appear,
                transform: `translateY(${(1-bounce)*30}px) scale(${0.9 + bounce*0.1})`,
                padding: '14px 16px',
                borderRadius: 16,
                background: BG3,
                boxShadow: `inset 0 0 0 1px ${LINE}`,
                display: 'flex', gap: 12, alignItems: 'center',
              }}>
                <div style={{
                  width: 10, height: 10, borderRadius: '50%',
                  background: ACCENT, flexShrink: 0,
                  boxShadow: `0 0 8px ${ACCENT}`,
                }}/>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8 }}>
                    <span style={{ fontSize: 15, color: INK0, fontWeight: 500 }}>{n.name}</span>
                    <span style={{ fontSize: 10, color: INK2, fontFamily: FONT_MONO, letterSpacing: '0.06em' }}>{n.src}</span>
                  </div>
                  <div style={{ fontSize: 13, color: INK1, marginTop: 3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                    {n.msg}
                  </div>
                </div>
                <div style={{ fontSize: 10, color: INK2, fontFamily: FONT_MONO }}>{n.time}</div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Caption overlay */}
      <div style={{
        position: 'absolute', bottom: 80, left: 0, right: 0,
        textAlign: 'center',
        opacity: captionOp,
        transform: `translateY(${(1-captionOp)*14}px)`,
        fontFamily: FONT_SANS,
      }}>
        <div style={{ fontSize: 18, color: INK2, fontFamily: FONT_MONO, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
          You're under the sink.
        </div>
        <div style={{ fontSize: 38, color: INK0, fontWeight: 500, letterSpacing: '-0.02em', marginTop: 8 }}>
          The leads keep coming.
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────
// SCENE 2 (4–8s): COLD — 5-minute countdown, leads going cold
// ────────────────────────────────────────────────────────────────────
function SceneCold() {
  const { localTime } = useSprite();
  const t = localTime;

  // Big timer ticking
  const totalSec = Math.min(300, Math.floor(t * 80)); // 0-300s rapid
  const mm = Math.floor(totalSec / 60);
  const ss = String(totalSec % 60).padStart(2, '0');

  // Leads decaying
  const leadsDead = [
    { label: 'Sarah R.',   deadAt: 0.8 },
    { label: 'Mike T.',    deadAt: 1.4 },
    { label: 'Priya L.',   deadAt: 2.0 },
    { label: 'Dan K.',     deadAt: 2.6 },
    { label: 'Ana C.',     deadAt: 3.1 },
  ];

  const captionOp = clamp((t - 0.2) / 0.5, 0, 1);
  const subOp = clamp((t - 2.8) / 0.5, 0, 1);

  return (
    <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 30, fontFamily: FONT_SANS }}>
      {/* Mono caption */}
      <div style={{
        opacity: captionOp,
        transform: `translateY(${(1-captionOp)*10}px)`,
        fontFamily: FONT_MONO, fontSize: 14, color: ACCENT,
        letterSpacing: '0.18em', textTransform: 'uppercase',
      }}>
        ◉ Industry data
      </div>

      <div style={{
        opacity: captionOp,
        transform: `translateY(${(1-captionOp)*20}px)`,
        fontSize: 72, fontWeight: 500, color: INK0, letterSpacing: '-0.03em', lineHeight: 1, textAlign: 'center',
      }}>
        A lead goes cold in <span style={{ fontFamily: FONT_SERIF, fontStyle: 'italic', color: ACCENT, fontWeight: 400 }}>5 minutes.</span>
      </div>

      {/* Stopwatch */}
      <div style={{
        marginTop: 10,
        fontFamily: FONT_MONO, fontSize: 120, color: INK0,
        fontVariantNumeric: 'tabular-nums',
        letterSpacing: '-0.04em', fontWeight: 500,
        display: 'flex', alignItems: 'baseline', gap: 10,
        textShadow: `0 0 40px rgba(255, 70, 70, ${0.2 + (totalSec/300)*0.5})`,
      }}>
        <span>{String(mm).padStart(2,'0')}</span>
        <span style={{ opacity: 0.4 }}>:</span>
        <span>{ss}</span>
      </div>

      {/* Lead tombstones */}
      <div style={{ display: 'flex', gap: 14, opacity: subOp, transform: `translateY(${(1-subOp)*12}px)` }}>
        {leadsDead.map((l, i) => {
          const dead = t > l.deadAt;
          return (
            <div key={i} style={{
              padding: '10px 16px', borderRadius: 10,
              background: dead ? 'rgba(40,10,10,0.5)' : BG2,
              boxShadow: `inset 0 0 0 1px ${dead ? 'rgba(255,80,80,0.3)' : LINE}`,
              fontSize: 13, color: dead ? '#FF6B6B' : INK1,
              textDecoration: dead ? 'line-through' : 'none',
              transition: 'all 0.3s',
              fontWeight: 500,
            }}>
              {l.label}
            </div>
          );
        })}
      </div>

      <div style={{
        marginTop: 20,
        opacity: subOp,
        fontFamily: FONT_MONO, fontSize: 16, color: INK2,
        letterSpacing: '0.06em',
      }}>
        Your competition replied 4 minutes ago.
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────
// SCENE 3 (8–12s): JAY APPEARS — logo drop + kinetic type reveal
// ────────────────────────────────────────────────────────────────────
function SceneReveal() {
  const { localTime } = useSprite();
  const t = localTime;

  // Logo drop with bounce
  const logoIn = clamp(t / 0.8, 0, 1);
  const logoScale = Easing.easeOutBack(logoIn);
  const logoOp = logoIn;

  // Glow pulse
  const pulse = 0.5 + Math.sin(t * 4) * 0.5;

  // "Meet Jay" kinetic
  const meetOp = clamp((t - 0.8) / 0.3, 0, 1);
  const jayOp = clamp((t - 1.3) / 0.3, 0, 1);
  const jayScale = 1 + (1 - clamp((t-1.3)/0.6, 0, 1)) * 0.3;

  // Subtitle line
  const subOp = clamp((t - 2.2) / 0.4, 0, 1);

  // Final tagline
  const tagOp = clamp((t - 3.0) / 0.5, 0, 1);

  return (
    <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontFamily: FONT_SANS }}>
      {/* Radial burst behind */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(600px 400px at 50% 50%, rgba(91,140,255,${0.35 * pulse * logoOp}), transparent 70%)`,
        pointerEvents: 'none',
      }}/>

      {/* Giant brand mark */}
      <div style={{
        opacity: logoOp,
        transform: `scale(${logoScale})`,
        marginBottom: 32,
      }}>
        <div style={{
          width: 120, height: 120,
          borderRadius: 30,
          background: `linear-gradient(135deg, ${ACCENT}, #7EE8FF)`,
          display: 'grid', placeItems: 'center',
          boxShadow: `0 0 0 2px rgba(91,140,255,0.5), 0 0 80px rgba(91,140,255,${0.6 * pulse})`,
          color: BG1,
        }}>
          <svg viewBox="0 0 20 20" width={64} height={64} fill="none">
            <path d="M4 3h12v4l-5 5v4l-2 1v-5L4 7V3z" fill="currentColor"/>
          </svg>
        </div>
      </div>

      {/* "Meet" */}
      <div style={{
        opacity: meetOp,
        transform: `translateY(${(1-meetOp)*20}px)`,
        fontFamily: FONT_MONO, fontSize: 18, color: INK2,
        letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 14,
      }}>
        Meet
      </div>

      {/* JAY (big) */}
      <div style={{
        opacity: jayOp,
        transform: `scale(${jayScale})`,
        fontSize: 180, fontWeight: 500, letterSpacing: '-0.05em',
        lineHeight: 0.9,
        color: JAY,
        textShadow: `0 0 60px rgba(255,181,71,0.5)`,
      }}>
        Jay.
      </div>

      {/* Sub */}
      <div style={{
        opacity: subOp,
        transform: `translateY(${(1-subOp)*14}px)`,
        marginTop: 20,
        fontSize: 36, color: INK0, fontWeight: 400, letterSpacing: '-0.02em',
        textAlign: 'center',
      }}>
        Your AI follow-up teammate.
      </div>

      {/* Tagline */}
      <div style={{
        opacity: tagOp,
        marginTop: 28,
        fontFamily: FONT_MONO, fontSize: 15, color: ACCENT,
        letterSpacing: '0.16em', textTransform: 'uppercase',
        padding: '8px 16px',
        borderRadius: 999,
        boxShadow: `inset 0 0 0 1px rgba(91,140,255,0.4)`,
        background: 'rgba(91,140,255,0.08)',
      }}>
        Replies in under 60 seconds.
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────
// SCENE 4 (12–20s): ACTION — SMS thread + calendar booking
// ────────────────────────────────────────────────────────────────────
function SceneAction() {
  const { localTime } = useSprite();
  const t = localTime;

  // Messages with timestamps
  const messages = [
    { type: 'user', text: 'hey still do drain clearing?', at: 0.3 },
    { type: 'ai',   text: 'Hi Sarah! Yes — can swing by tomorrow. What time works, morning or afternoon?', at: 1.2 },
    { type: 'user', text: 'afternoon pls', at: 2.5 },
    { type: 'ai',   text: "Got it. I have 2:00 PM or 4:30 PM open. Either work?", at: 3.3 },
    { type: 'user', text: '2pm', at: 4.4 },
    { type: 'ai',   text: "Booked ✓ Tue 2:00 PM. You'll get a confirmation in a sec.", at: 5.1 },
  ];

  // Phone slides in from left, calendar from right
  const phoneSlide = Easing.easeOutCubic(clamp(t / 0.6, 0, 1));
  const phoneX = -80 + phoneSlide * 80;

  // 47s response stamp
  const stampShow = t > 1.6 && t < 5.5;
  const stampIn = Easing.easeOutBack(clamp((t-1.6)/0.3, 0, 1));

  // Calendar appears once deal closes
  const calOp = Easing.easeOutCubic(clamp((t - 5.5) / 0.5, 0, 1));
  const calScale = 0.85 + calOp * 0.15;

  // Booked confetti pulse
  const bookedPulse = t > 5.9 ? 1 + Math.sin((t-5.9)*8)*0.05 : 1;

  return (
    <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 50, fontFamily: FONT_SANS }}>

      {/* Phone */}
      <div style={{
        position: 'relative',
        width: 380, height: 720,
        borderRadius: 48,
        background: 'linear-gradient(180deg, #0B1228 0%, #0A1020 100%)',
        boxShadow: `
          inset 0 0 0 1px rgba(120,150,220,0.18),
          0 0 0 9px #05070D,
          0 0 0 11px rgba(140,170,230,0.1),
          0 40px 80px -20px rgba(0,0,0,0.6),
          0 20px 60px -20px rgba(91,140,255,0.35)
        `,
        overflow: 'hidden',
        transform: `translateX(${phoneX}px)`,
        opacity: phoneSlide,
      }}>
        {/* Notch */}
        <div style={{
          position: 'absolute', top: 14, left: '50%', transform: 'translateX(-50%)',
          width: 120, height: 30, background: '#05070D', borderRadius: 999, zIndex: 5,
        }}/>
        {/* Status bar */}
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, height: 50,
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
          padding: '0 28px 7px', fontSize: 14, fontWeight: 600, color: INK0,
        }}>
          <span>9:41</span>
        </div>
        {/* Chat header */}
        <div style={{
          position: 'absolute', top: 50, left: 0, right: 0, height: 74,
          padding: '14px 20px', display: 'flex', alignItems: 'center', gap: 14,
          borderBottom: `1px solid ${LINE}`,
          background: 'rgba(10,16,32,0.7)', backdropFilter: 'blur(10px)',
        }}>
          <span style={{ color: ACCENT, fontSize: 28, lineHeight: 1 }}>‹</span>
          <div style={{
            width: 42, height: 42, borderRadius: '50%',
            background: 'linear-gradient(135deg, #6B7BAA, #3F4E7F)',
            display: 'grid', placeItems: 'center', color: '#fff', fontWeight: 600, fontSize: 14,
            boxShadow: `inset 0 0 0 1px ${LINE}`,
          }}>SR</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 15, fontWeight: 500, color: INK0 }}>Sarah R.</div>
            <div style={{ fontSize: 12, color: INK2, display: 'flex', alignItems: 'center', gap: 5 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: SUCCESS }}/>
              from Facebook Ads
            </div>
          </div>
        </div>

        {/* Messages */}
        <div style={{
          position: 'absolute', top: 124, bottom: 80, left: 0, right: 0,
          padding: '16px 16px 0', overflow: 'hidden',
          display: 'flex', flexDirection: 'column', gap: 8,
        }}>
          {messages.map((m, i) => {
            const appear = clamp((t - m.at) / 0.3, 0, 1);
            const bounce = Easing.easeOutCubic(appear);
            if (appear <= 0) return null;
            const isAI = m.type === 'ai';
            return (
              <div key={i} style={{
                alignSelf: isAI ? 'flex-start' : 'flex-end',
                maxWidth: '80%',
                padding: '10px 14px',
                fontSize: 14, lineHeight: 1.4,
                borderRadius: 18,
                borderBottomLeftRadius: isAI ? 6 : 18,
                borderBottomRightRadius: isAI ? 18 : 6,
                background: isAI ? BG3 : ACCENT,
                color: isAI ? INK0 : BG1,
                fontWeight: isAI ? 400 : 500,
                opacity: appear,
                transform: `translateY(${(1-bounce)*10}px)`,
              }}>
                {isAI && (
                  <div style={{
                    fontSize: 10, fontFamily: FONT_MONO, letterSpacing: '0.08em',
                    color: JAY, marginBottom: 5, textTransform: 'uppercase', fontWeight: 500,
                  }}>Jay</div>
                )}
                {m.text}
              </div>
            );
          })}
        </div>

        {/* Input bar */}
        <div style={{
          position: 'absolute', bottom: 0, left: 0, right: 0, height: 80,
          padding: '16px 18px 24px',
          background: 'linear-gradient(180deg, transparent, rgba(5,7,13,0.95) 30%, #0A1020)',
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <div style={{
            flex: 1, height: 40, borderRadius: 999,
            background: 'rgba(255,255,255,0.05)',
            boxShadow: `inset 0 0 0 1px ${LINE}`,
            padding: '0 14px', display: 'flex', alignItems: 'center',
            color: INK2, fontSize: 13,
          }}>
            <span style={{color: JAY}}>Jay</span>&nbsp;is typing…
          </div>
          <div style={{
            width: 40, height: 40, borderRadius: '50%', background: ACCENT,
            display: 'grid', placeItems: 'center', color: BG1,
          }}>
            <svg viewBox="0 0 16 16" width={18} height={18} fill="currentColor">
              <path d="M1 8l14-6-4 14-3-6-7-2z"/>
            </svg>
          </div>
        </div>
      </div>

      {/* 47s response stamp — floats next to phone */}
      {stampShow && (
        <div style={{
          position: 'absolute',
          left: '50%', top: '24%',
          marginLeft: -280,
          opacity: stampIn,
          transform: `rotate(-8deg) scale(${stampIn})`,
          padding: '14px 22px',
          borderRadius: 14,
          background: BG2,
          boxShadow: `inset 0 0 0 1px rgba(91,140,255,0.5), 0 20px 60px -10px rgba(91,140,255,0.5)`,
          fontFamily: FONT_SANS,
          zIndex: 10,
        }}>
          <div style={{ fontSize: 11, fontFamily: FONT_MONO, color: SUCCESS, letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500 }}>
            Response time
          </div>
          <div style={{ fontSize: 44, fontWeight: 500, color: INK0, letterSpacing: '-0.03em', marginTop: 4, fontVariantNumeric: 'tabular-nums' }}>
            47<span style={{ fontSize: 24, color: INK2, marginLeft: 4 }}>sec</span>
          </div>
        </div>
      )}

      {/* Calendar card — right side */}
      <div style={{
        opacity: calOp,
        transform: `scale(${calScale * bookedPulse})`,
        width: 440, padding: 32,
        borderRadius: 24,
        background: `linear-gradient(180deg, ${BG2}, ${BG1})`,
        boxShadow: `inset 0 0 0 1px rgba(91,140,255,0.4), 0 30px 80px -10px rgba(91,140,255,0.35)`,
        fontFamily: FONT_SANS,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: FONT_MONO, fontSize: 12, color: SUCCESS, textTransform: 'uppercase', letterSpacing: '0.14em' }}>
          <span style={{
            width: 22, height: 22, borderRadius: '50%', background: SUCCESS, color: BG0,
            display: 'grid', placeItems: 'center',
          }}>
            <svg viewBox="0 0 12 12" width={12} height={12} fill="none" stroke="currentColor" strokeWidth={2.4} strokeLinecap="round" strokeLinejoin="round">
              <path d="M2 6l3 3 5-6"/>
            </svg>
          </span>
          Appointment booked
        </div>
        <div style={{ marginTop: 20, fontSize: 28, fontWeight: 500, color: INK0, letterSpacing: '-0.02em' }}>
          Drain clearing — Sarah R.
        </div>
        <div style={{ marginTop: 8, fontSize: 18, color: INK1 }}>
          Tuesday · 2:00 PM
        </div>
        <div style={{ height: 1, background: LINE, margin: '22px 0' }}/>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14, color: INK2, marginBottom: 10 }}>
          <span>Lead source</span><strong style={{ color: INK0, fontWeight: 500 }}>Facebook Ads</strong>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14, color: INK2, marginBottom: 10 }}>
          <span>Response time</span><strong style={{ color: SUCCESS, fontWeight: 500 }}>47 sec</strong>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14, color: INK2 }}>
          <span>Booked by</span><strong style={{ color: JAY, fontWeight: 500 }}>Jay</strong>
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────
// SCENE 5 (20–26s): STATS — 3.4× more booked jobs
// ────────────────────────────────────────────────────────────────────
function SceneStats() {
  const { localTime } = useSprite();
  const t = localTime;

  // Count-up for 3.4x
  const countT = Easing.easeOutCubic(clamp(t / 1.4, 0, 1));
  const count = (countT * 3.4).toFixed(1);

  const headingOp = clamp((t - 0.1) / 0.4, 0, 1);

  // Secondary stats stagger in
  const stats = [
    { big: '60', unit: 'sec', label: 'First reply', at: 1.6 },
    { big: '24', unit: '/7', label: 'Always on', at: 1.9 },
    { big: '20', unit: 'min', label: 'To go live', at: 2.2 },
  ];

  const kickerOp = clamp((t - 3.0) / 0.5, 0, 1);

  return (
    <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontFamily: FONT_SANS }}>

      <div style={{
        opacity: headingOp,
        transform: `translateY(${(1-headingOp)*12}px)`,
        fontFamily: FONT_MONO, fontSize: 14, color: ACCENT,
        letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 18,
      }}>
        The result
      </div>

      {/* Giant 3.4× */}
      <div style={{
        fontSize: 340, fontWeight: 400, lineHeight: 0.9,
        letterSpacing: '-0.06em',
        fontVariantNumeric: 'tabular-nums',
        background: `linear-gradient(180deg, ${INK0}, #8FA9E6)`,
        WebkitBackgroundClip: 'text', backgroundClip: 'text',
        color: 'transparent',
        display: 'flex', alignItems: 'baseline',
      }}>
        {count}
        <span style={{
          fontFamily: FONT_SERIF, fontStyle: 'italic',
          color: ACCENT, WebkitTextFillColor: ACCENT,
          fontSize: 260, marginLeft: 10,
        }}>×</span>
      </div>

      <div style={{
        opacity: headingOp,
        marginTop: 10,
        fontSize: 38, color: INK0, fontWeight: 400, letterSpacing: '-0.02em', textAlign: 'center',
      }}>
        more booked jobs.
      </div>

      {/* Three small stats */}
      <div style={{ marginTop: 40, display: 'flex', gap: 36 }}>
        {stats.map((s, i) => {
          const op = clamp((t - s.at) / 0.3, 0, 1);
          const up = (1-op)*14;
          return (
            <div key={i} style={{
              opacity: op,
              transform: `translateY(${up}px)`,
              textAlign: 'center',
              padding: '0 22px',
              borderLeft: i > 0 ? `1px solid ${LINE}` : 'none',
            }}>
              <div style={{ fontSize: 48, fontWeight: 500, color: INK0, letterSpacing: '-0.03em', fontVariantNumeric: 'tabular-nums' }}>
                {s.big}<span style={{ color: ACCENT, fontSize: 26, marginLeft: 3 }}>{s.unit}</span>
              </div>
              <div style={{ fontSize: 12, color: INK2, fontFamily: FONT_MONO, letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 6 }}>
                {s.label}
              </div>
            </div>
          );
        })}
      </div>

      <div style={{
        opacity: kickerOp,
        marginTop: 36,
        fontSize: 17, color: INK2, fontStyle: 'italic',
        fontFamily: FONT_SERIF,
      }}>
        Based on 4,200+ operators across trades.
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────
// SCENE 6 (26–30s): CTA — logo lockup + get started
// ────────────────────────────────────────────────────────────────────
function SceneCTA() {
  const { localTime } = useSprite();
  const t = localTime;

  const logoIn = Easing.easeOutBack(clamp(t / 0.6, 0, 1));
  const logoOp = clamp(t / 0.4, 0, 1);

  const tagOp = clamp((t - 0.6) / 0.4, 0, 1);
  const ctaIn = Easing.easeOutBack(clamp((t - 1.1) / 0.5, 0, 1));
  const urlOp = clamp((t - 1.8) / 0.4, 0, 1);

  // Button hover/pulse
  const btnPulse = 1 + Math.sin(t*3) * 0.02;

  return (
    <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontFamily: FONT_SANS }}>

      {/* Ambient glow */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(700px 500px at 50% 50%, rgba(91,140,255,0.25), transparent 70%)`,
        pointerEvents: 'none',
      }}/>

      {/* Logo lockup */}
      <div style={{
        opacity: logoOp,
        transform: `scale(${logoIn})`,
        display: 'flex', alignItems: 'center', gap: 22,
      }}>
        <div style={{
          width: 100, height: 100,
          borderRadius: 26,
          background: `linear-gradient(135deg, ${ACCENT}, #7EE8FF)`,
          display: 'grid', placeItems: 'center',
          boxShadow: `0 0 0 1.5px rgba(91,140,255,0.5), 0 0 60px rgba(91,140,255,0.4)`,
          color: BG1,
        }}>
          <svg viewBox="0 0 20 20" width={54} height={54} fill="none">
            <path d="M4 3h12v4l-5 5v4l-2 1v-5L4 7V3z" fill="currentColor"/>
          </svg>
        </div>
        <div style={{
          fontSize: 96, fontWeight: 500, letterSpacing: '-0.035em',
          display: 'flex', alignItems: 'baseline',
        }}>
          <span style={{ color: JAY }}>Jay</span><span style={{ color: INK0 }}>Leads</span>
        </div>
      </div>

      {/* Tagline */}
      <div style={{
        opacity: tagOp,
        transform: `translateY(${(1-tagOp)*12}px)`,
        marginTop: 24,
        fontSize: 32, color: INK1, fontWeight: 400, letterSpacing: '-0.015em',
        textAlign: 'center',
      }}>
        Every lead. Followed up. <span style={{ fontFamily: FONT_SERIF, fontStyle: 'italic', color: ACCENT }}>Booked.</span>
      </div>

      {/* CTA Button */}
      <div style={{
        opacity: clamp((t-1.1)/0.3, 0, 1),
        transform: `scale(${ctaIn * btnPulse})`,
        marginTop: 48,
        display: 'inline-flex', alignItems: 'center', gap: 10,
        padding: '20px 34px',
        borderRadius: 16,
        background: ACCENT, color: BG1,
        fontSize: 22, fontWeight: 500, letterSpacing: '-0.005em',
        boxShadow: `inset 0 0 0 1px rgba(255,255,255,0.2), inset 0 1px 0 rgba(255,255,255,0.4), 0 20px 50px -10px rgba(91,140,255,0.7)`,
      }}>
        Get started
        <svg viewBox="0 0 16 16" width={18} height={18} fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round">
          <path d="M3 8h10M9 4l4 4-4 4"/>
        </svg>
      </div>

      {/* URL */}
      <div style={{
        opacity: urlOp,
        marginTop: 24,
        fontFamily: FONT_MONO, fontSize: 18, color: INK2,
        letterSpacing: '0.08em',
      }}>
        jayleads.com
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────
// MASTER VIDEO
// ────────────────────────────────────────────────────────────────────
function PromoVideo() {
  const time = useTime();

  // Update timestamp label for comment-targeting
  React.useEffect(() => {
    const root = document.querySelector('[data-video-root]');
    if (root) root.setAttribute('data-screen-label', `t=${time.toFixed(1)}s`);
  }, [Math.floor(time)]);

  // Transition flashes between scenes
  const flashAt = [4, 8, 12, 20, 26];
  let flash = 0;
  for (const ft of flashAt) {
    const d = time - ft;
    if (d >= 0 && d < 0.15) flash = Math.max(flash, 1 - d / 0.15);
  }

  return (
    <div data-video-root style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
      <Atmosphere intensity={1} />

      <Sprite start={0} end={4}><ScenePain /></Sprite>
      <Sprite start={4} end={8}><SceneCold /></Sprite>
      <Sprite start={8} end={12}><SceneReveal /></Sprite>
      <Sprite start={12} end={20}><SceneAction /></Sprite>
      <Sprite start={20} end={26}><SceneStats /></Sprite>
      <Sprite start={26} end={30}><SceneCTA /></Sprite>

      {/* Transition flash */}
      {flash > 0 && (
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          background: '#EAF0FF', opacity: flash * 0.6,
        }}/>
      )}

      {/* Corner timestamp / brand chip */}
      <div style={{
        position: 'absolute', top: 28, left: 32,
        display: 'flex', alignItems: 'center', gap: 10,
        fontFamily: FONT_SANS,
        fontSize: 16, color: INK1, fontWeight: 500,
        opacity: 0.8,
        zIndex: 20,
      }}>
        <BrandMark size={26} />
        <span><span style={{color: JAY}}>Jay</span><span style={{color: INK0}}>Leads</span></span>
      </div>

      {/* Bottom-right progress dots */}
      <div style={{
        position: 'absolute', bottom: 28, right: 32,
        display: 'flex', gap: 6,
        zIndex: 20,
      }}>
        {[[0,4],[4,8],[8,12],[12,20],[20,26],[26,30]].map(([a,b], i) => {
          const active = time >= a && time < b;
          const done = time >= b;
          return (
            <div key={i} style={{
              width: active ? 22 : 6, height: 6, borderRadius: 3,
              background: done ? ACCENT : active ? ACCENT : 'rgba(140,170,230,0.3)',
              transition: 'all 0.3s',
              boxShadow: active ? `0 0 8px ${ACCENT}` : 'none',
            }}/>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, {
  PromoVideo,
});