// METBooker animated promo — looping scenes for embed

// ── Brand ───────────────────────────────────────────────────────────────────
const BRAND = {
  lime: '#bcdf05',
  limeDark: '#a3c204',
  limeBright: '#d4f72f',
  black: '#111111',
  blackSoft: '#1a1a1a',
  blackHard: '#0a0a0a',
  white: '#ffffff',
  offwhite: '#f5f5f5',
  gray: '#9a9a9a',
  grayDim: '#666',
  grayLight: '#e8e8e8',
  border: 'rgba(255,255,255,0.10)',
  muted: 'rgba(255,255,255,0.55)',
};

const FONTS = {
  // Gotham Ultra fallback: Montserrat 900 (closest free geometric heavy)
  head: '"Montserrat", "Arial Black", Impact, system-ui, sans-serif',
  body: '"Montserrat", system-ui, sans-serif',
  mono: '"JetBrains Mono", "SF Mono", ui-monospace, monospace',
};

// Scene timing — overlap windows by 0.3s for crossfade
const TOTAL = 27.5;
const SCENE = [
  { i: 1, label: 'Eliminate No-Shows',    start: 0,    in: 0.2,  out: 5.2  },
  { i: 2, label: 'Free Up Time',          start: 4.9,  in: 5.1,  out: 10.1 },
  { i: 3, label: 'Capture Data',          start: 9.8,  in: 10.0, out: 15.0 },
  { i: 4, label: 'Customer Experience',   start: 14.7, in: 14.9, out: 19.9 },
  { i: 5, label: 'Business Flexibility',  start: 19.6, in: 19.8, out: 24.8 },
];
const OUTRO = { start: 24.5, in: 24.7, out: 27.5 };

// ── Looping stage (no controls — for embed) ─────────────────────────────────
function LoopStage({ width, height, duration, background, children }) {
  const stageRef = React.useRef(null);
  const rafRef = React.useRef(null);
  const lastRef = React.useRef(null);
  const [time, setTime] = React.useState(0);
  const [scale, setScale] = React.useState(1);

  React.useEffect(() => {
    const step = (ts) => {
      if (lastRef.current == null) lastRef.current = ts;
      const dt = (ts - lastRef.current) / 1000;
      lastRef.current = ts;
      setTime((t) => (t + dt) % duration);
      rafRef.current = requestAnimationFrame(step);
    };
    rafRef.current = requestAnimationFrame(step);
    return () => {
      if (rafRef.current) cancelAnimationFrame(rafRef.current);
      lastRef.current = null;
    };
  }, [duration]);

  React.useEffect(() => {
    const el = stageRef.current;
    if (!el) return;
    const measure = () => {
      const s = Math.min(el.clientWidth / width, el.clientHeight / height);
      setScale(s);
    };
    measure();
    const ro = new ResizeObserver(measure);
    ro.observe(el);
    window.addEventListener('resize', measure);
    return () => { ro.disconnect(); window.removeEventListener('resize', measure); };
  }, [width, height]);

  return (
    <div ref={stageRef} style={{
      position: 'absolute', inset: 0,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      background, overflow: 'hidden',
    }}>
      <div style={{
        width, height,
        position: 'relative',
        transform: `scale(${scale})`,
        transformOrigin: 'center',
        background,
        flexShrink: 0,
        overflow: 'hidden',
      }}>
        <TimelineContext.Provider value={{ time, duration, playing: true }}>
          {children}
        </TimelineContext.Provider>
      </div>
    </div>
  );
}

// ── Helpers ─────────────────────────────────────────────────────────────────
const lerp = (a, b, t) => a + (b - a) * t;
const clamp01 = (v) => Math.max(0, Math.min(1, v));

// Standard sprite entry: opacity + slide. Returns { opacity, translateY }.
function entry(localTime, dur = 0.6, distance = 24, ease = Easing.easeOutCubic) {
  const t = ease(clamp01(localTime / dur));
  return { opacity: t, translateY: (1 - t) * distance };
}

function fadeInOut(time, inStart, inDur, outStart, outDur) {
  if (time < inStart) return 0;
  if (time < inStart + inDur) return Easing.easeOutCubic((time - inStart) / inDur);
  if (time < outStart) return 1;
  if (time < outStart + outDur) return 1 - Easing.easeInCubic((time - outStart) / outDur);
  return 0;
}

// ── Persistent chrome — logo + progress + scene label ───────────────────────
function Chrome({ portrait, sceneIndex, total }) {
  const PAD = portrait ? 50 : 60;
  const small = portrait ? 18 : 16;
  return (
    <React.Fragment>
      {/* Top-left: METBooker wordmark */}
      <div style={{
        position: 'absolute', left: PAD, top: PAD,
        display: 'flex', alignItems: 'center', gap: 10,
        fontFamily: FONTS.head, fontWeight: 900,
        letterSpacing: '-0.02em',
        color: BRAND.white,
        fontSize: portrait ? 28 : 26,
      }}>
        <div style={{
          width: 14, height: 14, borderRadius: 14,
          background: BRAND.lime,
          boxShadow: `0 0 18px ${BRAND.lime}`,
        }} />
        <span>METBooker</span>
      </div>

      {/* Top-right: scene label */}
      <div style={{
        position: 'absolute', right: PAD, top: PAD + 6,
        fontFamily: FONTS.mono, fontSize: small,
        color: BRAND.muted, letterSpacing: '0.18em',
        textTransform: 'uppercase',
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <span style={{ color: BRAND.lime }}>0{sceneIndex}</span>
        <span style={{ width: 24, height: 1, background: BRAND.border }} />
        <span>0{total}</span>
      </div>

      {/* Bottom progress dots */}
      <ProgressDots portrait={portrait} />
    </React.Fragment>
  );
}

function ProgressDots({ portrait }) {
  const time = useTime();
  const PAD = portrait ? 50 : 60;
  return (
    <div style={{
      position: 'absolute', left: PAD, bottom: PAD,
      display: 'flex', gap: 10,
    }}>
      {SCENE.map((s, idx) => {
        const active = time >= s.start && time < (SCENE[idx + 1]?.start ?? OUTRO.start);
        return (
          <div key={idx} style={{
            width: active ? 36 : 10, height: 4, borderRadius: 4,
            background: active ? BRAND.lime : 'rgba(255,255,255,0.18)',
            transition: 'width 380ms cubic-bezier(.22,.61,.36,1), background 380ms',
          }} />
        );
      })}
    </div>
  );
}

// ── Scene wrapper — gives consistent headline + visual layout ───────────────
function SceneFrame({ portrait, eyebrow, headLines, accentIndex, visual, sceneIdx }) {
  const { localTime, duration } = useSprite();
  const inDur = 0.7;
  const outStart = duration - 0.55;

  // Headline word-by-word reveal
  const HeadLine = ({ text, color, delay }) => {
    const t = clamp01((localTime - delay) / 0.55);
    const e = Easing.easeOutCubic(t);
    return (
      <div style={{
        opacity: e,
        transform: `translateY(${(1 - e) * 28}px)`,
        color,
        display: 'block',
      }}>{text}</div>
    );
  };

  // Exit fade for the whole scene block
  let exitOpacity = 1;
  if (localTime > outStart) {
    exitOpacity = 1 - Easing.easeInCubic(clamp01((localTime - outStart) / 0.55));
  }

  const headSize = portrait ? 110 : 104;
  const headPad = portrait ? 50 : 56;

  if (portrait) {
    return (
      <div style={{ position: 'absolute', inset: 0, opacity: exitOpacity }}>
        {/* Top half: headline */}
        <div style={{
          position: 'absolute',
          left: headPad, right: headPad, top: 150,
        }}>
          <div style={{
            fontFamily: FONTS.mono, fontSize: 16,
            color: BRAND.lime, letterSpacing: '0.22em',
            textTransform: 'uppercase', marginBottom: 28,
            opacity: clamp01(localTime / 0.4),
          }}>
            {eyebrow}
          </div>
          <h1 style={{
            margin: 0, padding: 0,
            fontFamily: FONTS.head, fontWeight: 900,
            fontSize: headSize,
            lineHeight: 0.92,
            letterSpacing: '-0.04em',
            textTransform: 'uppercase',
            color: BRAND.white,
          }}>
            {headLines.map((line, i) => (
              <HeadLine key={i} text={line}
                color={i === accentIndex ? BRAND.lime : BRAND.white}
                delay={0.15 + i * 0.12} />
            ))}
          </h1>
        </div>
        {/* Bottom half: visual */}
        <div style={{
          position: 'absolute',
          left: 0, right: 0, top: 760, bottom: 130,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          {visual}
        </div>
      </div>
    );
  }

  // Landscape
  return (
    <div style={{ position: 'absolute', inset: 0, opacity: exitOpacity }}>
      {/* Left: headline */}
      <div style={{
        position: 'absolute',
        left: headPad, top: 130, width: 720,
      }}>
        <div style={{
          fontFamily: FONTS.mono, fontSize: 15,
          color: BRAND.lime, letterSpacing: '0.22em',
          textTransform: 'uppercase', marginBottom: 26,
          opacity: clamp01(localTime / 0.4),
        }}>
          {eyebrow}
        </div>
        <h1 style={{
          margin: 0, padding: 0,
          fontFamily: FONTS.head, fontWeight: 900,
          fontSize: headSize,
          lineHeight: 0.92,
          letterSpacing: '-0.04em',
          textTransform: 'uppercase',
          color: BRAND.white,
        }}>
          {headLines.map((line, i) => (
            <HeadLine key={i} text={line}
              color={i === accentIndex ? BRAND.lime : BRAND.white}
              delay={0.15 + i * 0.12} />
          ))}
        </h1>
      </div>
      {/* Right: visual */}
      <div style={{
        position: 'absolute',
        right: 0, top: 60, bottom: 60, width: 820,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <div style={{ transform: 'scale(0.82)', transformOrigin: 'center' }}>
          {visual}
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 1 — Eliminate No-Shows: booking + deposit secured
// ═══════════════════════════════════════════════════════════════════════════
function Scene1Visual() {
  const { localTime } = useSprite();
  const cardIn = clamp01((localTime - 0.4) / 0.7);
  const payIn  = clamp01((localTime - 1.1) / 0.6);
  const stampIn = clamp01((localTime - 1.9) / 0.5);
  const amountT = clamp01((localTime - 2.1) / 0.9);
  const ghostOut = clamp01((localTime - 1.7) / 0.4);

  const stampScale = Easing.easeOutBack(stampIn);
  const stampRotate = lerp(-20, -8, stampIn);

  // Money amount counter £0 → £50
  const amount = Math.round(lerp(0, 50, Easing.easeOutCubic(amountT)));

  return (
    <div style={{ position: 'relative', width: 700, height: 600 }}>
      {/* Booking card */}
      <div style={{
        position: 'absolute', left: 40, top: 40,
        width: 540, padding: 28,
        background: BRAND.white,
        borderRadius: 16,
        boxShadow: '0 30px 60px rgba(0,0,0,0.35)',
        opacity: cardIn,
        transform: `translateY(${(1 - cardIn) * 30}px)`,
        fontFamily: FONTS.body,
      }}>
        <div style={{
          fontFamily: FONTS.mono, fontSize: 12,
          color: BRAND.grayDim, letterSpacing: '0.18em',
          textTransform: 'uppercase', marginBottom: 14,
        }}>Booking #4127</div>
        <div style={{
          fontFamily: FONTS.head, fontWeight: 900,
          fontSize: 32, color: BRAND.black,
          letterSpacing: '-0.02em', marginBottom: 6,
        }}>Sarah Mitchell</div>
        <div style={{ fontSize: 16, color: BRAND.grayDim, marginBottom: 18 }}>
          MOT + Full Service · Ford Focus
        </div>
        <div style={{
          display: 'flex', gap: 12,
          paddingTop: 16, borderTop: '1px solid #eaeaea',
        }}>
          <Chip label="THU 14 NOV" />
          <Chip label="10:30 AM" />
          <Chip label="BAY 2" />
        </div>
      </div>

      {/* Old "no-show" ghost calendar entry — gets crossed out */}
      <div style={{
        position: 'absolute', left: 80, top: 280,
        width: 460, padding: 18,
        borderRadius: 12,
        border: `1.5px dashed rgba(255,255,255,0.18)`,
        background: 'rgba(255,255,255,0.03)',
        opacity: lerp(0.9, 0, ghostOut) * (cardIn > 0 ? 1 : 0),
        transform: `translateY(${ghostOut * -12}px)`,
        fontFamily: FONTS.body,
        color: BRAND.muted,
        position: 'absolute',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontSize: 12, fontFamily: FONTS.mono, letterSpacing: '0.18em' }}>NO-SHOW</div>
            <div style={{ fontSize: 18, marginTop: 4, textDecoration: 'line-through' }}>Empty bay · Lost revenue</div>
          </div>
          <div style={{
            fontFamily: FONTS.head, fontWeight: 900,
            fontSize: 32, color: 'rgba(255,255,255,0.25)',
            textDecoration: 'line-through',
          }}>£0</div>
        </div>
      </div>

      {/* Payment card sliding in */}
      <div style={{
        position: 'absolute', left: 120, top: 340,
        width: 380, height: 200,
        background: `linear-gradient(135deg, ${BRAND.blackSoft} 0%, #2a2a2a 100%)`,
        borderRadius: 16,
        boxShadow: '0 30px 60px rgba(0,0,0,0.5)',
        opacity: payIn,
        transform: `translate(${(1 - payIn) * -60}px, ${(1 - payIn) * 40}px) rotate(${lerp(-10, -4, payIn)}deg)`,
        padding: 22,
        border: `1px solid ${BRAND.border}`,
        fontFamily: FONTS.body,
        color: BRAND.white,
      }}>
        <div style={{
          width: 44, height: 32, borderRadius: 5,
          background: `linear-gradient(135deg, ${BRAND.lime}, ${BRAND.limeDark})`,
          marginBottom: 24,
        }} />
        <div style={{
          fontFamily: FONTS.mono, fontSize: 18,
          letterSpacing: '0.18em',
        }}>•••• •••• •••• 4127</div>
        <div style={{
          display: 'flex', justifyContent: 'space-between',
          marginTop: 18, fontSize: 11,
          color: BRAND.muted, letterSpacing: '0.15em',
        }}>
          <span>S MITCHELL</span>
          <span>11/27</span>
        </div>
      </div>

      {/* "DEPOSIT SECURED" stamp */}
      <div style={{
        position: 'absolute', left: 380, top: 320,
        opacity: stampIn,
        transform: `scale(${lerp(2.2, 1, stampScale)}) rotate(${stampRotate}deg)`,
        transformOrigin: 'center',
      }}>
        <div style={{
          padding: '14px 22px',
          background: BRAND.lime,
          color: BRAND.black,
          borderRadius: 10,
          fontFamily: FONTS.head, fontWeight: 900,
          fontSize: 22,
          letterSpacing: '0.02em',
          boxShadow: `0 0 0 4px ${BRAND.lime}33, 0 20px 40px rgba(188, 223, 5, 0.4)`,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <Check size={22} />
          <span>£{amount} SECURED</span>
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 2 — Free Up Time: customers self-book from your availability
// ═══════════════════════════════════════════════════════════════════════════
function Scene2Visual() {
  const { localTime } = useSprite();

  // Calendar grid — 5 columns (days) x 6 rows (time slots)
  const DAYS = ['MON', 'TUE', 'WED', 'THU', 'FRI'];
  const TIMES = ['08', '09', '10', '11', '12', '14'];

  // Pre-booked slots (already in the system)
  const preBooked = new Set(['0-2', '1-0', '2-3', '3-1', '4-4']);
  // Auto-booked during animation (with delays)
  const autoBookings = [
    { key: '0-0', name: 'J. Patel',   t: 0.4, color: BRAND.lime },
    { key: '2-1', name: 'M. Chen',    t: 0.7, color: BRAND.lime },
    { key: '1-4', name: 'L. Brooks',  t: 1.0, color: BRAND.lime },
    { key: '3-3', name: 'A. Singh',   t: 1.3, color: BRAND.lime },
    { key: '4-1', name: 'D. Kelly',   t: 1.6, color: BRAND.lime },
    { key: '0-5', name: 'R. Owens',   t: 1.9, color: BRAND.lime },
    { key: '2-4', name: 'K. Hayes',   t: 2.2, color: BRAND.lime },
  ];
  const bookedMap = {};
  autoBookings.forEach(b => { bookedMap[b.key] = b; });

  // Counter
  const countT = clamp01((localTime - 0.4) / 2.4);
  const count = Math.floor(lerp(5, 12, Easing.easeOutCubic(countT)));

  const cellW = 110;
  const cellH = 60;
  const gap = 8;
  const gridW = DAYS.length * (cellW + gap) - gap;
  const gridH = TIMES.length * (cellH + gap) - gap;

  return (
    <div style={{ position: 'relative', width: 720, height: 600 }}>
      {/* Self-service callout card */}
      <div style={{
        position: 'absolute', left: 0, top: 0,
        padding: '12px 18px',
        background: BRAND.lime,
        color: BRAND.black,
        borderRadius: 10,
        fontFamily: FONTS.head, fontWeight: 900,
        fontSize: 16, letterSpacing: '0.02em',
        opacity: clamp01((localTime - 0.2) / 0.4),
        transform: `translateY(${(1 - clamp01((localTime - 0.2) / 0.4)) * -10}px)`,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{ width: 8, height: 8, borderRadius: 8, background: BRAND.black,
          animation: 'mb-pulse 1.6s ease-in-out infinite',
        }} />
        LIVE · CUSTOMER BOOKING
      </div>

      {/* Calendar header */}
      <div style={{
        position: 'absolute', left: 0, top: 80,
        display: 'flex', gap,
      }}>
        <div style={{ width: 44 }} />
        {DAYS.map((d, i) => (
          <div key={d} style={{
            width: cellW, textAlign: 'center',
            fontFamily: FONTS.mono, fontSize: 12,
            color: BRAND.muted, letterSpacing: '0.18em',
            opacity: clamp01((localTime - 0.2 - i * 0.04) / 0.3),
          }}>{d}</div>
        ))}
      </div>

      {/* Calendar grid */}
      <div style={{
        position: 'absolute', left: 0, top: 120,
        display: 'flex', flexDirection: 'column', gap,
      }}>
        {TIMES.map((t, row) => (
          <div key={t} style={{ display: 'flex', gap, alignItems: 'center' }}>
            <div style={{
              width: 44, fontFamily: FONTS.mono, fontSize: 12,
              color: BRAND.muted, letterSpacing: '0.1em',
              opacity: clamp01((localTime - 0.2) / 0.3),
            }}>{t}:00</div>
            {DAYS.map((d, col) => {
              const k = `${col}-${row}`;
              const pre = preBooked.has(k);
              const auto = bookedMap[k];
              const cellEntryT = clamp01((localTime - 0.3 - col * 0.04 - row * 0.02) / 0.3);
              const autoT = auto ? clamp01((localTime - auto.t) / 0.45) : 0;
              const autoEase = auto ? Easing.easeOutBack(autoT) : 0;

              return (
                <div key={k} style={{
                  width: cellW, height: cellH,
                  background: pre ? 'rgba(255,255,255,0.06)' : 'rgba(255,255,255,0.025)',
                  border: `1px solid ${BRAND.border}`,
                  borderRadius: 8,
                  position: 'relative',
                  overflow: 'hidden',
                  opacity: cellEntryT,
                  transform: `scale(${lerp(0.94, 1, cellEntryT)})`,
                }}>
                  {pre && (
                    <div style={{
                      position: 'absolute', inset: 4,
                      background: 'rgba(255,255,255,0.10)',
                      borderRadius: 5,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontFamily: FONTS.body, fontSize: 11,
                      color: BRAND.muted, fontWeight: 600,
                      letterSpacing: '0.05em',
                    }}>—</div>
                  )}
                  {auto && autoT > 0 && (
                    <div style={{
                      position: 'absolute', inset: 4,
                      background: BRAND.lime,
                      borderRadius: 5,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontFamily: FONTS.body, fontWeight: 800,
                      fontSize: 13, color: BRAND.black,
                      letterSpacing: '-0.01em',
                      opacity: clamp01(autoT * 1.4),
                      transform: `scale(${lerp(0.6, 1, autoEase)})`,
                      boxShadow: autoT < 0.5 ? `0 0 24px ${BRAND.lime}` : 'none',
                    }}>{auto.name.split(' ').map(p => p[0]).join('')}</div>
                  )}
                </div>
              );
            })}
          </div>
        ))}
      </div>

      {/* Bottom counter */}
      <div style={{
        position: 'absolute', left: 0, bottom: 0, right: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        opacity: clamp01((localTime - 0.5) / 0.6),
      }}>
        <div>
          <div style={{
            fontFamily: FONTS.mono, fontSize: 11,
            color: BRAND.muted, letterSpacing: '0.2em',
            marginBottom: 6,
          }}>BOOKINGS THIS WEEK</div>
          <div style={{
            fontFamily: FONTS.head, fontWeight: 900,
            fontSize: 64, color: BRAND.white,
            letterSpacing: '-0.04em', lineHeight: 1,
          }}>
            {count}
            <span style={{ color: BRAND.lime, marginLeft: 6 }}>↑</span>
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{
            fontFamily: FONTS.mono, fontSize: 11,
            color: BRAND.muted, letterSpacing: '0.2em',
            marginBottom: 6,
          }}>PHONE CALLS</div>
          <div style={{
            fontFamily: FONTS.head, fontWeight: 900,
            fontSize: 64, color: BRAND.white,
            letterSpacing: '-0.04em', lineHeight: 1,
          }}>
            0<span style={{ color: BRAND.lime, marginLeft: 6, fontSize: 36, verticalAlign: 'middle' }}>↓</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 3 — Capture Important Data
// ═══════════════════════════════════════════════════════════════════════════
function Scene3Visual() {
  const { localTime } = useSprite();
  const plateIn  = clamp01((localTime - 0.2) / 0.5);
  const lookupT  = clamp01((localTime - 0.9) / 0.5);
  const card1In  = clamp01((localTime - 1.4) / 0.45);
  const card2In  = clamp01((localTime - 1.7) / 0.45);
  const card3In  = clamp01((localTime - 2.0) / 0.45);
  const totalIn  = clamp01((localTime - 2.4) / 0.5);

  return (
    <div style={{ position: 'relative', width: 720, height: 620 }}>
      {/* UK Number plate */}
      <div style={{
        position: 'absolute', left: 80, top: 0,
        opacity: plateIn,
        transform: `translateY(${(1 - plateIn) * -20}px) scale(${lerp(0.9, 1, Easing.easeOutBack(plateIn))})`,
        transformOrigin: 'center',
      }}>
        <div style={{
          background: '#f9d617',
          border: `4px solid ${BRAND.black}`,
          borderRadius: 8,
          padding: '14px 36px',
          fontFamily: '"Charles Wright", "Arial Black", monospace',
          fontWeight: 900,
          fontSize: 64,
          color: BRAND.black,
          letterSpacing: '0.04em',
          boxShadow: '0 14px 30px rgba(0,0,0,0.4)',
          display: 'flex', alignItems: 'center', gap: 18,
        }}>
          <div style={{
            fontSize: 14, padding: '4px 6px',
            background: '#003399', color: '#f9d617',
            fontFamily: FONTS.head, fontWeight: 900,
            letterSpacing: '0.12em',
            writingMode: 'vertical-rl',
            transform: 'rotate(180deg)',
            textAlign: 'center', lineHeight: 1,
          }}>GB</div>
          <span>MET 1B</span>
        </div>
      </div>

      {/* Lookup beam */}
      <div style={{
        position: 'absolute', left: 80, top: 130,
        width: 560, height: 3,
        background: `linear-gradient(90deg, ${BRAND.lime}00, ${BRAND.lime}, ${BRAND.lime}00)`,
        opacity: lookupT < 1 ? Math.sin(lookupT * Math.PI) : 0,
        transform: `translateY(${lerp(0, 30, lookupT)}px)`,
      }} />

      {/* Vehicle card */}
      <DataCard
        top={170}
        progress={card1In}
        eyebrow="VEHICLE"
        title="Ford Focus 1.5 EcoBoost"
        meta="2019 · Petrol · 47,820 mi"
      />

      {/* Customer card */}
      <DataCard
        top={300}
        progress={card2In}
        eyebrow="CUSTOMER"
        title="Sarah Mitchell"
        meta="07700 900421 · sarah@email.com"
      />

      {/* Service card */}
      <DataCard
        top={430}
        progress={card3In}
        eyebrow="SERVICE"
        title="MOT + Full Service"
        meta="2 bays · 3 hrs · brake pad replacement"
      />

      {/* Invoice total chip */}
      <div style={{
        position: 'absolute', right: 0, bottom: -10,
        opacity: totalIn,
        transform: `translateY(${(1 - totalIn) * 20}px)`,
      }}>
        <div style={{
          padding: '14px 22px',
          background: BRAND.lime,
          color: BRAND.black,
          borderRadius: 10,
          fontFamily: FONTS.head, fontWeight: 900,
          fontSize: 22,
          letterSpacing: '-0.01em',
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <span style={{ fontFamily: FONTS.mono, fontSize: 11, letterSpacing: '0.18em' }}>INVOICE</span>
          <span>£289.00</span>
        </div>
      </div>
    </div>
  );
}

function DataCard({ top, progress, eyebrow, title, meta }) {
  return (
    <div style={{
      position: 'absolute', left: 0, top,
      width: 600,
      padding: '18px 22px',
      background: 'rgba(255,255,255,0.04)',
      border: `1px solid ${BRAND.border}`,
      borderRadius: 12,
      opacity: progress,
      transform: `translateX(${(1 - progress) * -30}px)`,
      display: 'flex', alignItems: 'center', gap: 18,
      fontFamily: FONTS.body,
    }}>
      <div style={{
        width: 6, height: 40, borderRadius: 3,
        background: BRAND.lime,
        boxShadow: `0 0 12px ${BRAND.lime}88`,
      }} />
      <div style={{ flex: 1 }}>
        <div style={{
          fontFamily: FONTS.mono, fontSize: 10,
          color: BRAND.lime, letterSpacing: '0.22em',
          textTransform: 'uppercase', marginBottom: 4,
        }}>{eyebrow}</div>
        <div style={{
          fontFamily: FONTS.head, fontWeight: 800,
          fontSize: 22, color: BRAND.white,
          letterSpacing: '-0.02em',
        }}>{title}</div>
        <div style={{ fontSize: 13, color: BRAND.muted, marginTop: 2 }}>{meta}</div>
      </div>
      <Check size={20} />
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 4 — Customer Experience
// ═══════════════════════════════════════════════════════════════════════════
function Scene4Visual() {
  const { localTime } = useSprite();
  const phoneIn  = clamp01((localTime - 0.2) / 0.6);
  const confIn   = clamp01((localTime - 0.8) / 0.4);
  const emailT   = clamp01((localTime - 1.3) / 0.9);
  const calT     = clamp01((localTime - 1.8) / 0.9);

  return (
    <div style={{ position: 'relative', width: 720, height: 620 }}>
      {/* Phone */}
      <div style={{
        position: 'absolute', left: 200, top: 30,
        width: 280, height: 560,
        borderRadius: 38,
        background: BRAND.blackSoft,
        border: `2px solid ${BRAND.border}`,
        boxShadow: '0 40px 80px rgba(0,0,0,0.5)',
        opacity: phoneIn,
        transform: `translateY(${(1 - phoneIn) * 30}px) scale(${lerp(0.94, 1, phoneIn)})`,
        padding: 16,
      }}>
        {/* Screen */}
        <div style={{
          width: '100%', height: '100%',
          background: BRAND.white,
          borderRadius: 26,
          overflow: 'hidden',
          position: 'relative',
        }}>
          {/* notch */}
          <div style={{
            position: 'absolute', left: '50%', top: 8,
            transform: 'translateX(-50%)',
            width: 80, height: 20, borderRadius: 12,
            background: BRAND.black,
          }} />

          <div style={{ padding: '50px 18px 18px', fontFamily: FONTS.body }}>
            <div style={{
              fontFamily: FONTS.mono, fontSize: 9,
              color: BRAND.grayDim, letterSpacing: '0.2em',
              marginBottom: 4,
            }}>METBOOKER</div>
            <div style={{
              fontFamily: FONTS.head, fontWeight: 900,
              fontSize: 22, color: BRAND.black,
              letterSpacing: '-0.02em', lineHeight: 1,
              marginBottom: 14,
            }}>You're booked in.</div>

            {/* Confirmation panel */}
            <div style={{
              padding: 14, borderRadius: 10,
              background: '#f4f4f4',
              opacity: confIn,
              transform: `translateY(${(1 - confIn) * 10}px)`,
            }}>
              <div style={{
                display: 'flex', alignItems: 'center', gap: 8,
                marginBottom: 10,
              }}>
                <div style={{
                  width: 22, height: 22, borderRadius: 22,
                  background: BRAND.lime,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <Check size={12} color={BRAND.black} />
                </div>
                <div style={{ fontWeight: 700, fontSize: 12, color: BRAND.black }}>Confirmed · #4127</div>
              </div>
              <div style={{
                fontFamily: FONTS.head, fontWeight: 800,
                fontSize: 16, color: BRAND.black,
                letterSpacing: '-0.01em',
              }}>Thu 14 Nov · 10:30 AM</div>
              <div style={{ fontSize: 11, color: BRAND.grayDim, marginTop: 2 }}>
                MOT + Full Service
              </div>
            </div>

            {/* Mini buttons */}
            <div style={{ display: 'flex', gap: 6, marginTop: 12 }}>
              <MiniBtn label="EMAIL" active={emailT > 0.05} />
              <MiniBtn label="CALENDAR" active={calT > 0.05} />
            </div>
          </div>
        </div>
      </div>

      {/* Email envelope flying out (right) */}
      <Notification
        progress={emailT}
        startX={340} startY={280}
        endX={520} endY={120}
        rotateEnd={6}
        icon={<EnvelopeIcon />}
        title="Confirmation email"
        sub="sarah@email.com"
        accent={false}
      />

      {/* Calendar invite flying out (left) */}
      <Notification
        progress={calT}
        startX={340} startY={300}
        endX={-20} endY={380}
        rotateEnd={-5}
        icon={<CalendarIcon />}
        title="Calendar invite"
        sub="Thu 14 Nov · 10:30"
        accent={true}
      />
    </div>
  );
}

function MiniBtn({ label, active }) {
  return (
    <div style={{
      flex: 1, textAlign: 'center',
      padding: '8px 0',
      border: `1px solid ${active ? BRAND.lime : '#e0e0e0'}`,
      background: active ? BRAND.lime : 'transparent',
      borderRadius: 6,
      fontFamily: FONTS.mono, fontSize: 9,
      letterSpacing: '0.15em',
      color: BRAND.black,
      fontWeight: 700,
      transition: 'all 200ms',
    }}>{label}</div>
  );
}

function Notification({ progress, startX, startY, endX, endY, rotateEnd, icon, title, sub, accent }) {
  if (progress <= 0) return null;
  const eased = Easing.easeOutCubic(progress);
  const x = lerp(startX, endX, eased);
  const y = lerp(startY, endY, eased);
  const rot = lerp(0, rotateEnd, eased);
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      transform: `rotate(${rot}deg) scale(${lerp(0.7, 1, eased)})`,
      transformOrigin: 'top left',
      opacity: clamp01(progress * 2),
      width: 230,
      padding: 14,
      background: accent ? BRAND.lime : BRAND.white,
      color: BRAND.black,
      borderRadius: 12,
      boxShadow: '0 20px 40px rgba(0,0,0,0.35)',
      fontFamily: FONTS.body,
      display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <div style={{
        width: 36, height: 36, borderRadius: 8,
        background: accent ? BRAND.black : BRAND.lime,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: accent ? BRAND.lime : BRAND.black,
      }}>{icon}</div>
      <div>
        <div style={{
          fontFamily: FONTS.head, fontWeight: 800,
          fontSize: 13, letterSpacing: '-0.01em',
        }}>{title}</div>
        <div style={{
          fontFamily: FONTS.mono, fontSize: 10,
          opacity: 0.7, marginTop: 2,
          letterSpacing: '0.04em',
        }}>{sub}</div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 5 — Business Flexibility (van + garage + config)
// ═══════════════════════════════════════════════════════════════════════════
function Scene5Visual() {
  const { localTime } = useSprite();
  const vanIn = clamp01((localTime - 0.2) / 0.6);
  const garIn = clamp01((localTime - 0.5) / 0.6);
  const toggleT = clamp01((localTime - 1.2) / 0.6);
  const configIn = clamp01((localTime - 1.6) / 0.6);

  // Toggle oscillates between left and right
  const tphase = ((localTime - 1.2) % 2) / 2;
  const toggleSide = localTime > 1.2
    ? (tphase < 0.5 ? Easing.easeInOutCubic(tphase * 2) : 1 - Easing.easeInOutCubic((tphase - 0.5) * 2))
    : 0;

  return (
    <div style={{ position: 'relative', width: 720, height: 600 }}>
      {/* Van (mobile) */}
      <ModeCard
        x={0} y={20}
        progress={vanIn}
        active={toggleSide < 0.5}
        label="MOBILE"
        sub="On-site auto"
        icon={<VanIcon />}
      />

      {/* Garage (static) */}
      <ModeCard
        x={400} y={20}
        progress={garIn}
        active={toggleSide >= 0.5}
        label="STATIC"
        sub="Workshop"
        icon={<GarageIcon />}
      />

      {/* Toggle bar */}
      <div style={{
        position: 'absolute', left: 130, top: 270,
        width: 460, height: 64,
        background: BRAND.blackSoft,
        border: `1px solid ${BRAND.border}`,
        borderRadius: 100,
        opacity: toggleT,
        transform: `translateY(${(1 - toggleT) * 12}px)`,
        padding: 6,
        position: 'absolute',
        display: 'flex', alignItems: 'center',
      }}>
        <div style={{
          width: 220, height: 52, borderRadius: 100,
          background: BRAND.lime,
          transform: `translateX(${toggleSide * 222}px)`,
          transition: 'transform 200ms linear',
          boxShadow: `0 0 24px ${BRAND.lime}66`,
        }} />
        <div style={{
          position: 'absolute', left: 0, right: 0, top: 0, bottom: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'space-around',
          padding: '0 40px',
          fontFamily: FONTS.head, fontWeight: 900,
          fontSize: 16, letterSpacing: '0.1em',
        }}>
          <span style={{ color: toggleSide < 0.5 ? BRAND.black : BRAND.muted, transition: 'color 200ms' }}>MOBILE</span>
          <span style={{ color: toggleSide >= 0.5 ? BRAND.black : BRAND.muted, transition: 'color 200ms' }}>STATIC</span>
        </div>
      </div>

      {/* Config rows */}
      <div style={{
        position: 'absolute', left: 0, right: 0, top: 380,
        opacity: configIn,
        transform: `translateY(${(1 - configIn) * 14}px)`,
        display: 'flex', flexDirection: 'column', gap: 12,
      }}>
        <ConfigRow label="Bay capacity" value="5" max />
        <ConfigRow label="Travel radius" value="20 mi" />
        <ConfigRow label="Deposit policy" value="20%" />
        <ConfigRow label="Buffer time" value="15 min" />
      </div>
    </div>
  );
}

function ModeCard({ x, y, progress, active, label, sub, icon }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      width: 320, height: 220,
      padding: 24,
      background: active ? BRAND.lime : 'rgba(255,255,255,0.04)',
      border: `1px solid ${active ? BRAND.lime : BRAND.border}`,
      borderRadius: 16,
      opacity: progress,
      transform: `translateY(${(1 - progress) * 20}px) scale(${active ? 1.0 : 0.96})`,
      transition: 'background 240ms, transform 240ms, border-color 240ms',
      display: 'flex', flexDirection: 'column',
      justifyContent: 'space-between',
      fontFamily: FONTS.body,
      color: active ? BRAND.black : BRAND.white,
    }}>
      <div style={{ width: 120, height: 80, color: active ? BRAND.black : BRAND.lime }}>
        {icon}
      </div>
      <div>
        <div style={{
          fontFamily: FONTS.head, fontWeight: 900,
          fontSize: 30, letterSpacing: '-0.02em',
        }}>{label}</div>
        <div style={{
          fontFamily: FONTS.mono, fontSize: 11,
          opacity: 0.7, letterSpacing: '0.15em',
          marginTop: 2, textTransform: 'uppercase',
        }}>{sub}</div>
      </div>
    </div>
  );
}

function ConfigRow({ label, value }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center',
      padding: '10px 18px',
      background: 'rgba(255,255,255,0.03)',
      border: `1px solid ${BRAND.border}`,
      borderRadius: 8,
      fontFamily: FONTS.body, fontSize: 14,
      color: BRAND.white,
    }}>
      <div style={{ flex: 1, color: BRAND.muted }}>{label}</div>
      <div style={{
        fontFamily: FONTS.mono, fontSize: 12,
        color: BRAND.lime, letterSpacing: '0.08em',
        padding: '4px 10px', borderRadius: 4,
        background: 'rgba(188, 223, 5, 0.1)',
      }}>{value}</div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// OUTRO
// ═══════════════════════════════════════════════════════════════════════════
function Outro({ portrait }) {
  const { localTime, duration } = useSprite();
  const t1 = clamp01((localTime - 0.2) / 0.7);
  const t2 = clamp01((localTime - 0.7) / 0.7);
  const t3 = clamp01((localTime - 1.2) / 0.7);
  const exitT = clamp01((localTime - (duration - 0.4)) / 0.4);
  const fade = 1 - exitT;

  return (
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexDirection: 'column',
      opacity: fade,
    }}>
      <div style={{
        opacity: t1,
        transform: `scale(${lerp(0.85, 1, Easing.easeOutBack(t1))})`,
        display: 'flex', alignItems: 'center', gap: portrait ? 16 : 22,
        marginBottom: 22,
      }}>
        <div style={{
          width: portrait ? 26 : 32, height: portrait ? 26 : 32,
          borderRadius: 100,
          background: BRAND.lime,
          boxShadow: `0 0 40px ${BRAND.lime}`,
        }} />
        <div style={{
          fontFamily: FONTS.head, fontWeight: 900,
          fontSize: portrait ? 80 : 110,
          color: BRAND.white,
          letterSpacing: '-0.04em',
          lineHeight: 1,
        }}>
          MET<span style={{ color: BRAND.lime }}>Booker</span>
        </div>
      </div>

      <div style={{
        opacity: t2,
        transform: `translateY(${(1 - t2) * 12}px)`,
        fontFamily: FONTS.body, fontWeight: 500,
        fontSize: portrait ? 26 : 24,
        color: BRAND.muted, maxWidth: portrait ? 700 : 900,
        textAlign: 'center', lineHeight: 1.35,
        marginBottom: 36, padding: '0 40px',
      }}>
        Online booking + payments for the automotive trade
      </div>

      <div style={{
        opacity: t3,
        transform: `translateY(${(1 - t3) * 10}px)`,
        display: 'flex', gap: 16,
        alignItems: 'center',
      }}>
        <div style={{
          padding: '16px 28px',
          background: BRAND.lime,
          color: BRAND.black,
          borderRadius: 100,
          fontFamily: FONTS.head, fontWeight: 900,
          fontSize: 18, letterSpacing: '0.04em',
        }}>BOOK A DEMO</div>
        <div style={{
          fontFamily: FONTS.mono, fontSize: 14,
          color: BRAND.muted, letterSpacing: '0.12em',
        }}>metbooker.com</div>
      </div>
    </div>
  );
}

// ── Icon primitives ────────────────────────────────────────────────────────
function Check({ size = 18, color = '#111' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M4 12.5l5 5L20 6.5" stroke={color} strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function Chip({ label }) {
  return (
    <div style={{
      padding: '6px 12px',
      background: '#f0f0f0',
      borderRadius: 6,
      fontFamily: FONTS.mono, fontSize: 11,
      letterSpacing: '0.1em',
      color: BRAND.black, fontWeight: 700,
    }}>{label}</div>
  );
}

function EnvelopeIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
      <rect x="3" y="6" width="18" height="13" rx="2" stroke="currentColor" strokeWidth="2"/>
      <path d="M3 8l9 6 9-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function CalendarIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
      <rect x="3" y="5" width="18" height="16" rx="2" stroke="currentColor" strokeWidth="2"/>
      <path d="M3 10h18M8 3v4M16 3v4" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
      <rect x="7" y="13" width="4" height="4" fill="currentColor"/>
    </svg>
  );
}

function VanIcon() {
  return (
    <svg viewBox="0 0 120 80" style={{ width: '100%', height: '100%' }} fill="none">
      {/* Van body */}
      <path d="M5 60 L5 35 L40 35 L55 18 L95 18 L110 35 L115 35 L115 60 Z"
        stroke="currentColor" strokeWidth="3" strokeLinejoin="round" fill="none"/>
      {/* Window */}
      <path d="M58 22 L92 22 L100 33 L58 33 Z" fill="currentColor" opacity="0.18"/>
      {/* Divider */}
      <line x1="76" y1="22" x2="76" y2="33" stroke="currentColor" strokeWidth="2"/>
      {/* Wheels */}
      <circle cx="30" cy="60" r="10" stroke="currentColor" strokeWidth="3" fill={BRAND.blackSoft}/>
      <circle cx="90" cy="60" r="10" stroke="currentColor" strokeWidth="3" fill={BRAND.blackSoft}/>
      <circle cx="30" cy="60" r="3" fill="currentColor"/>
      <circle cx="90" cy="60" r="3" fill="currentColor"/>
    </svg>
  );
}

function GarageIcon() {
  return (
    <svg viewBox="0 0 120 80" style={{ width: '100%', height: '100%' }} fill="none">
      {/* Roof */}
      <path d="M5 35 L60 8 L115 35" stroke="currentColor" strokeWidth="3" strokeLinejoin="round" fill="none"/>
      {/* Building */}
      <rect x="15" y="35" width="90" height="35" stroke="currentColor" strokeWidth="3" fill="none"/>
      {/* Door */}
      <rect x="32" y="42" width="56" height="28" stroke="currentColor" strokeWidth="2" fill="none"/>
      <line x1="32" y1="50" x2="88" y2="50" stroke="currentColor" strokeWidth="1.5"/>
      <line x1="32" y1="56" x2="88" y2="56" stroke="currentColor" strokeWidth="1.5"/>
      <line x1="32" y1="62" x2="88" y2="62" stroke="currentColor" strokeWidth="1.5"/>
    </svg>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// MAIN APP
// ═══════════════════════════════════════════════════════════════════════════
function MetBookerAnimation() {
  const [portrait, setPortrait] = React.useState(() =>
    typeof window !== 'undefined' && window.innerHeight > window.innerWidth
  );
  React.useEffect(() => {
    const update = () => setPortrait(window.innerHeight > window.innerWidth);
    update();
    window.addEventListener('resize', update);
    return () => window.removeEventListener('resize', update);
  }, []);

  const w = portrait ? 900 : 1600;
  const h = portrait ? 1600 : 720;

  return (
    <LoopStage width={w} height={h} duration={TOTAL} background={BRAND.black}>
      {/* Subtle background grid */}
      <BgGrid portrait={portrait} />

      {/* Scenes */}
      <Sprite start={SCENE[0].start} end={SCENE[0].out}>
        <SceneShell sceneIdx={0} portrait={portrait}
          eyebrow="01 · NO MORE NO-SHOWS"
          headLines={['Stop chasing', 'lost revenue.']}
          accentIndex={1}
          visual={<Scene1Visual />} />
      </Sprite>

      <Sprite start={SCENE[1].start} end={SCENE[1].out}>
        <SceneShell sceneIdx={1} portrait={portrait}
          eyebrow="02 · FREE UP TIME"
          headLines={['Customers', 'book themselves.']}
          accentIndex={1}
          visual={<Scene2Visual />} />
      </Sprite>

      <Sprite start={SCENE[2].start} end={SCENE[2].out}>
        <SceneShell sceneIdx={2} portrait={portrait}
          eyebrow="03 · CAPTURE DATA"
          headLines={['Every detail.', 'Captured.']}
          accentIndex={1}
          visual={<Scene3Visual />} />
      </Sprite>

      <Sprite start={SCENE[3].start} end={SCENE[3].out}>
        <SceneShell sceneIdx={3} portrait={portrait}
          eyebrow="04 · CUSTOMER EXPERIENCE"
          headLines={['Customers', 'kept in the loop.']}
          accentIndex={1}
          visual={<Scene4Visual />} />
      </Sprite>

      <Sprite start={SCENE[4].start} end={SCENE[4].out}>
        <SceneShell sceneIdx={4} portrait={portrait}
          eyebrow="05 · BUILT YOUR WAY"
          headLines={['Mobile or', 'workshop.']}
          accentIndex={1}
          visual={<Scene5Visual />} />
      </Sprite>

      <Sprite start={OUTRO.start} end={OUTRO.out}>
        <Outro portrait={portrait} />
      </Sprite>

      {/* Persistent chrome (visible during scenes only, not outro) */}
      <PersistentChrome portrait={portrait} />
    </LoopStage>
  );
}

function SceneShell({ sceneIdx, portrait, eyebrow, headLines, accentIndex, visual }) {
  return (
    <SceneFrame
      portrait={portrait}
      eyebrow={eyebrow}
      headLines={headLines}
      accentIndex={accentIndex}
      visual={visual}
      sceneIdx={sceneIdx}
    />
  );
}

function PersistentChrome({ portrait }) {
  const time = useTime();
  const visible = time < OUTRO.start;
  const opacity = visible ? 1 : Math.max(0, 1 - (time - OUTRO.start) / 0.3);
  if (opacity <= 0) return null;

  // active scene
  let activeIdx = 0;
  for (let i = 0; i < SCENE.length; i++) {
    if (time >= SCENE[i].start) activeIdx = i;
  }

  const PAD = portrait ? 50 : 40;
  return (
    <div style={{ opacity }}>
      {/* Top-left wordmark */}
      <div style={{
        position: 'absolute', left: PAD, top: PAD,
        display: 'flex', alignItems: 'center', gap: 10,
        fontFamily: FONTS.head, fontWeight: 900,
        letterSpacing: '-0.02em',
        color: BRAND.white,
        fontSize: portrait ? 26 : 24,
      }}>
        <div style={{
          width: 12, height: 12, borderRadius: 12,
          background: BRAND.lime,
          boxShadow: `0 0 16px ${BRAND.lime}`,
        }} />
        <span>MET<span style={{ color: BRAND.lime }}>Booker</span></span>
      </div>

      {/* Top-right scene counter */}
      <div style={{
        position: 'absolute', right: PAD, top: PAD + 4,
        fontFamily: FONTS.mono, fontSize: 14,
        color: BRAND.muted, letterSpacing: '0.2em',
        textTransform: 'uppercase',
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <span style={{ color: BRAND.lime, fontWeight: 700 }}>0{activeIdx + 1}</span>
        <span style={{ width: 20, height: 1, background: BRAND.border }} />
        <span>05</span>
      </div>

      {/* Bottom progress dots */}
      <div style={{
        position: 'absolute', left: PAD, bottom: PAD,
        display: 'flex', gap: 8,
      }}>
        {SCENE.map((s, idx) => (
          <div key={idx} style={{
            width: idx === activeIdx ? 36 : 10, height: 4, borderRadius: 4,
            background: idx === activeIdx ? BRAND.lime : 'rgba(255,255,255,0.18)',
            transition: 'width 380ms cubic-bezier(.22,.61,.36,1), background 380ms',
          }} />
        ))}
      </div>
    </div>
  );
}

function BgGrid({ portrait }) {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      backgroundImage: `
        radial-gradient(ellipse at top right, rgba(188, 223, 5, 0.08), transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(188, 223, 5, 0.04), transparent 50%)
      `,
      pointerEvents: 'none',
    }} />
  );
}

// Expose to window so the HTML can mount
Object.assign(window, { MetBookerAnimation });