// scenes.jsx — Khyran Studio 30s intro scenes
// All scenes use shared TimelineContext via useTime / useSprite from animations.jsx

const FONT_DISPLAY = '"Space Grotesk", "Helvetica Neue", Helvetica, sans-serif';
const FONT_MONO = '"JetBrains Mono", ui-monospace, monospace';

const WHITE = '#ffffff';
const BLACK = '#000000';
const DIM = 'rgba(255,255,255,0.45)';
const FAINT = 'rgba(255,255,255,0.12)';

// ─── Background grid (subtle motion lines) ──────────────────────────────────
function BgGrid() {
  const t = useTime();
  const offset = (t * 30) % 80;
  return (
    <div style={{
      position: 'absolute', inset: 0,
      backgroundImage: `
        linear-gradient(${FAINT} 1px, transparent 1px),
        linear-gradient(90deg, ${FAINT} 1px, transparent 1px)
      `,
      backgroundSize: '80px 80px',
      backgroundPosition: `${offset}px ${offset}px`,
      opacity: 0.5,
      maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 75%)',
      WebkitMaskImage: 'radial-gradient(ellipse at center, black 30%, transparent 75%)',
    }} />
  );
}

// Soft radial spotlight that sweeps
function Spotlight() {
  const t = useTime();
  const x = 50 + Math.sin(t * 0.4) * 25;
  const y = 50 + Math.cos(t * 0.3) * 15;
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: `radial-gradient(circle at ${x}% ${y}%, rgba(255,255,255,0.10), transparent 55%)`,
      pointerEvents: 'none',
    }} />
  );
}

// Vignette
function Vignette() {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: 'radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.6) 100%)',
      pointerEvents: 'none',
    }} />
  );
}

// Scanning horizontal line accent
function ScanLine({ start, end, y }) {
  return (
    <Sprite start={start} end={end}>
      {({ progress }) => {
        const t = Easing.easeInOutCubic(progress);
        const w = t < 0.5 ? t * 2 : (1 - t) * 2;
        return (
          <div style={{
            position: 'absolute',
            left: '50%', top: y,
            transform: 'translateX(-50%)',
            width: `${w * 80}%`,
            height: 1,
            background: 'linear-gradient(90deg, transparent, white, transparent)',
            opacity: 0.8,
          }} />
        );
      }}
    </Sprite>
  );
}

// ─── SCENE 1: Cold open — corner mark + studio name (0–4s) ──────────────────
function Scene1Intro() {
  return (
    <Sprite start={0} end={4.2} keepMounted={false}>
      {({ localTime }) => {
        // Corner brackets reveal
        const bracketT = Easing.easeOutCubic(clamp(localTime / 0.6, 0, 1));
        // Pulsing dot
        const pulse = 0.5 + 0.5 * Math.sin(localTime * 6);
        // Type-in for "KHYRAN STUDIO"
        const word = 'KHYRAN STUDIO';
        const charCount = Math.floor(clamp((localTime - 0.5) / 1.4, 0, 1) * word.length);
        const visibleText = word.slice(0, charCount);
        // Caret blink
        const caret = Math.floor(localTime * 3) % 2 === 0;
        // Subtitle fade in
        const subOp = clamp((localTime - 2.0) / 0.6, 0, 1);
        // Exit fade
        const exitOp = 1 - clamp((localTime - 3.6) / 0.6, 0, 1);

        return (
          <div style={{ position: 'absolute', inset: 0, opacity: exitOp }}>
            {/* corner brackets */}
            <CornerBrackets progress={bracketT} />

            {/* Top-left meta */}
            <div style={{
              position: 'absolute', top: 60, left: 80,
              fontFamily: FONT_MONO, fontSize: 16, color: DIM,
              letterSpacing: '0.18em', textTransform: 'uppercase',
              display: 'flex', alignItems: 'center', gap: 12,
              opacity: bracketT,
            }}>
              <div style={{
                width: 8, height: 8, borderRadius: 4,
                background: WHITE, opacity: pulse,
                boxShadow: `0 0 ${10 + pulse * 12}px rgba(255,255,255,${pulse * 0.8})`,
              }} />
              <span>EST · KHYRAN · STUDIO</span>
            </div>

            {/* Top-right meta */}
            <div style={{
              position: 'absolute', top: 60, right: 80,
              fontFamily: FONT_MONO, fontSize: 16, color: DIM,
              letterSpacing: '0.18em', textTransform: 'uppercase',
              opacity: bracketT,
            }}>
              REC · 00:00:{String(Math.floor(localTime * 10) % 100).padStart(2, '0')}
            </div>

            {/* Center type */}
            <div style={{
              position: 'absolute',
              top: '50%', left: '50%',
              transform: 'translate(-50%, -50%)',
              textAlign: 'center',
            }}>
              <div style={{
                fontFamily: FONT_DISPLAY,
                fontSize: 140,
                fontWeight: 700,
                color: WHITE,
                letterSpacing: '-0.04em',
                lineHeight: 1,
                whiteSpace: 'nowrap',
              }}>
                {visibleText}
                <span style={{
                  display: 'inline-block',
                  width: 6,
                  marginLeft: 8,
                  height: '0.85em',
                  background: WHITE,
                  verticalAlign: 'baseline',
                  opacity: caret && charCount < word.length ? 1 : 0,
                }} />
              </div>
              <div style={{
                marginTop: 28,
                fontFamily: FONT_MONO,
                fontSize: 22,
                color: DIM,
                letterSpacing: '0.4em',
                textTransform: 'uppercase',
                opacity: subOp,
              }}>
                ── HIGH-END WEB DESIGN ──
              </div>
            </div>

            {/* Bottom-left meta */}
            <div style={{
              position: 'absolute', bottom: 60, left: 80,
              fontFamily: FONT_MONO, fontSize: 14, color: DIM,
              letterSpacing: '0.18em', textTransform: 'uppercase',
              opacity: bracketT,
            }}>
              v.2026 // INTRO REEL
            </div>
            <div style={{
              position: 'absolute', bottom: 60, right: 80,
              fontFamily: FONT_MONO, fontSize: 14, color: DIM,
              letterSpacing: '0.18em', textTransform: 'uppercase',
              opacity: bracketT,
            }}>
              KHYRANSTUDIO.COM
            </div>
          </div>
        );
      }}
    </Sprite>
  );
}

function CornerBrackets({ progress }) {
  const len = 60 * progress;
  const stroke = 'rgba(255,255,255,0.55)';
  const sw = 1;
  const inset = 36;
  return (
    <svg
      style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}
      width="100%" height="100%" viewBox="0 0 1920 1080" preserveAspectRatio="none"
    >
      {/* TL */}
      <line x1={inset} y1={inset} x2={inset + len} y2={inset} stroke={stroke} strokeWidth={sw}/>
      <line x1={inset} y1={inset} x2={inset} y2={inset + len} stroke={stroke} strokeWidth={sw}/>
      {/* TR */}
      <line x1={1920 - inset} y1={inset} x2={1920 - inset - len} y2={inset} stroke={stroke} strokeWidth={sw}/>
      <line x1={1920 - inset} y1={inset} x2={1920 - inset} y2={inset + len} stroke={stroke} strokeWidth={sw}/>
      {/* BL */}
      <line x1={inset} y1={1080 - inset} x2={inset + len} y2={1080 - inset} stroke={stroke} strokeWidth={sw}/>
      <line x1={inset} y1={1080 - inset} x2={inset} y2={1080 - inset - len} stroke={stroke} strokeWidth={sw}/>
      {/* BR */}
      <line x1={1920 - inset} y1={1080 - inset} x2={1920 - inset - len} y2={1080 - inset} stroke={stroke} strokeWidth={sw}/>
      <line x1={1920 - inset} y1={1080 - inset} x2={1920 - inset} y2={1080 - inset - len} stroke={stroke} strokeWidth={sw}/>
    </svg>
  );
}

// ─── SCENE 2: We design websites. (4–9s) ────────────────────────────────────
function Scene2WhatWeDo() {
  return (
    <Sprite start={4} end={9.2}>
      {({ localTime }) => {
        const exitOp = 1 - clamp((localTime - 4.6) / 0.6, 0, 1);

        // Word-by-word reveal
        const words = ['WE', 'DESIGN', 'WEBSITES.'];
        const wordStarts = [0.1, 0.55, 1.0];

        return (
          <div style={{ position: 'absolute', inset: 0, opacity: exitOp }}>
            <CornerBrackets progress={1} />

            {/* Top label */}
            <div style={{
              position: 'absolute', top: 80, left: '50%',
              transform: 'translateX(-50%)',
              fontFamily: FONT_MONO, fontSize: 16, color: DIM,
              letterSpacing: '0.4em', textTransform: 'uppercase',
              opacity: clamp(localTime / 0.4, 0, 1),
            }}>
              [ 01 ] · WHAT WE DO
            </div>

            {/* Big stacked words */}
            <div style={{
              position: 'absolute',
              top: '50%', left: '50%',
              transform: 'translate(-50%, -50%)',
              textAlign: 'center',
              fontFamily: FONT_DISPLAY,
              fontSize: 200,
              fontWeight: 700,
              color: WHITE,
              letterSpacing: '-0.05em',
              lineHeight: 0.95,
              width: 1700,
            }}>
              {words.map((w, i) => {
                const t = clamp((localTime - wordStarts[i]) / 0.45, 0, 1);
                const eased = Easing.easeOutCubic(t);
                return (
                  <div key={i} style={{
                    overflow: 'hidden',
                    height: '0.95em',
                    position: 'relative',
                  }}>
                    <div style={{
                      transform: `translateY(${(1 - eased) * 100}%)`,
                      whiteSpace: 'nowrap',
                    }}>
                      {w}
                    </div>
                  </div>
                );
              })}
            </div>

            {/* Bottom counter */}
            <div style={{
              position: 'absolute', bottom: 80, left: '50%',
              transform: 'translateX(-50%)',
              fontFamily: FONT_MONO, fontSize: 14, color: DIM,
              letterSpacing: '0.3em',
              opacity: clamp((localTime - 1.5) / 0.5, 0, 1),
            }}>
              ◇ &nbsp;&nbsp;01 / 04 &nbsp;&nbsp; ◇
            </div>
          </div>
        );
      }}
    </Sprite>
  );
}

// ─── SCENE 3: Three pillars (9–14s) ─────────────────────────────────────────
function Scene3Pillars() {
  return (
    <Sprite start={9} end={14.2}>
      {({ localTime }) => {
        const exitOp = 1 - clamp((localTime - 4.6) / 0.6, 0, 1);

        const pillars = [
          { label: 'HIGH-END', sub: 'agency-grade craft' },
          { label: 'CUSTOM', sub: 'no templates, ever' },
          { label: 'FAST', sub: 'launch in days' },
        ];

        return (
          <div style={{ position: 'absolute', inset: 0, opacity: exitOp }}>
            <CornerBrackets progress={1} />

            <div style={{
              position: 'absolute', top: 80, left: '50%',
              transform: 'translateX(-50%)',
              fontFamily: FONT_MONO, fontSize: 16, color: DIM,
              letterSpacing: '0.4em', textTransform: 'uppercase',
              opacity: clamp(localTime / 0.4, 0, 1),
            }}>
              [ 02 ] · THE PROMISE
            </div>

            <div style={{
              position: 'absolute',
              top: '50%', left: 0, right: 0,
              transform: 'translateY(-50%)',
              display: 'flex',
              justifyContent: 'space-around',
              alignItems: 'center',
              padding: '0 80px',
            }}>
              {pillars.map((p, i) => {
                const t = clamp((localTime - 0.3 - i * 0.45) / 0.55, 0, 1);
                const eased = Easing.easeOutCubic(t);
                return (
                  <div key={i} style={{
                    flex: 1,
                    textAlign: 'center',
                    opacity: eased,
                    transform: `translateY(${(1 - eased) * 30}px)`,
                  }}>
                    <div style={{
                      fontFamily: FONT_MONO, fontSize: 18, color: DIM,
                      letterSpacing: '0.3em', marginBottom: 28,
                    }}>
                      0{i + 1}
                    </div>
                    <div style={{
                      fontFamily: FONT_DISPLAY,
                      fontSize: 110,
                      fontWeight: 700,
                      color: WHITE,
                      letterSpacing: '-0.04em',
                      lineHeight: 1,
                    }}>
                      {p.label}
                    </div>
                    <div style={{
                      marginTop: 28,
                      fontFamily: FONT_MONO, fontSize: 18, color: DIM,
                      letterSpacing: '0.18em', textTransform: 'uppercase',
                    }}>
                      {p.sub}
                    </div>
                  </div>
                );
              })}
            </div>

            {/* Connecting line */}
            <div style={{
              position: 'absolute',
              left: 200, right: 200,
              top: '50%',
              height: 1,
              background: 'rgba(255,255,255,0.15)',
              transform: `translateY(-50%) scaleX(${clamp(localTime / 1.0, 0, 1)})`,
              transformOrigin: 'left center',
              zIndex: -1,
            }} />

            <ScanLine start={9} end={14} y={540} />
          </div>
        );
      }}
    </Sprite>
  );
}

// ─── SCENE 4: Browser mock — what we make (14–20s) ──────────────────────────
function Scene4Showcase() {
  return (
    <Sprite start={14} end={20.2}>
      {({ localTime }) => {
        const inT = Easing.easeOutCubic(clamp(localTime / 0.7, 0, 1));
        const exitOp = 1 - clamp((localTime - 5.5) / 0.7, 0, 1);

        return (
          <div style={{ position: 'absolute', inset: 0, opacity: exitOp }}>
            <CornerBrackets progress={1} />

            <div style={{
              position: 'absolute', top: 80, left: '50%',
              transform: 'translateX(-50%)',
              fontFamily: FONT_MONO, fontSize: 16, color: DIM,
              letterSpacing: '0.4em', textTransform: 'uppercase',
            }}>
              [ 03 ] · OUR WORK
            </div>

            {/* Browser window mock */}
            <div style={{
              position: 'absolute',
              left: '50%', top: '50%',
              transform: `translate(-50%, -50%) scale(${0.92 + inT * 0.08})`,
              opacity: inT,
              width: 1280,
              height: 720,
              background: '#0a0a0a',
              border: '1px solid rgba(255,255,255,0.18)',
              borderRadius: 14,
              overflow: 'hidden',
              boxShadow: '0 40px 100px rgba(0,0,0,0.6), 0 0 80px rgba(255,255,255,0.04)',
            }}>
              {/* Browser chrome */}
              <div style={{
                height: 44,
                background: '#111',
                borderBottom: '1px solid rgba(255,255,255,0.08)',
                display: 'flex',
                alignItems: 'center',
                padding: '0 18px',
                gap: 10,
              }}>
                <div style={{ width: 10, height: 10, borderRadius: 5, background: 'rgba(255,255,255,0.18)' }} />
                <div style={{ width: 10, height: 10, borderRadius: 5, background: 'rgba(255,255,255,0.18)' }} />
                <div style={{ width: 10, height: 10, borderRadius: 5, background: 'rgba(255,255,255,0.18)' }} />
                <div style={{
                  marginLeft: 24,
                  flex: 1,
                  height: 24,
                  background: 'rgba(255,255,255,0.05)',
                  borderRadius: 6,
                  fontFamily: FONT_MONO,
                  fontSize: 12,
                  color: DIM,
                  display: 'flex',
                  alignItems: 'center',
                  padding: '0 12px',
                  letterSpacing: '0.05em',
                }}>
                  https://— your brand —.com
                </div>
              </div>

              {/* Mock site content */}
              <MockSite localTime={localTime} />
            </div>

            {/* floating callouts */}
            <FloatingTag localStart={1.0} delay={0} text="HAND-CODED" x={140} y={200} />
            <FloatingTag localStart={1.4} delay={0.2} text="FULLY-CUSTOM" x={1500} y={280} />
            <FloatingTag localStart={1.8} delay={0.4} text="SEO-READY" x={140} y={780} />
            <FloatingTag localStart={2.2} delay={0.6} text="FAST" x={1530} y={760} />

            {(() => {
              const t = localTime;
              if (t < 1.0 || t > 5.4) return null;
              return (
                <ConnectorBeam />
              );
            })()}
          </div>
        );
      }}
    </Sprite>
  );
}

function FloatingTag({ text, x, y, localStart }) {
  return (
    <Sprite start={14 + localStart} end={20.2}>
      {({ localTime }) => {
        const t = Easing.easeOutCubic(clamp(localTime / 0.5, 0, 1));
        return (
          <div style={{
            position: 'absolute',
            left: x, top: y,
            opacity: t,
            transform: `translate(-50%, -50%) translateY(${(1 - t) * 12}px)`,
            fontFamily: FONT_MONO,
            fontSize: 16,
            color: WHITE,
            letterSpacing: '0.18em',
            background: 'rgba(0,0,0,0.6)',
            border: '1px solid rgba(255,255,255,0.25)',
            padding: '8px 14px',
            backdropFilter: 'blur(8px)',
            whiteSpace: 'nowrap',
          }}>
            ◆ {text}
          </div>
        );
      }}
    </Sprite>
  );
}

function ConnectorBeam() {
  return null; // visual restraint — tags speak for themselves
}

function MockSite({ localTime }) {
  // Inner mock website preview — high-end aesthetic mock (original, not a real brand)
  const t = clamp((localTime - 0.4) / 1.0, 0, 1);
  const eased = Easing.easeOutCubic(t);

  // mouse cursor that moves to "click" a button
  const cursorX = 200 + eased * 480;
  const cursorY = 380 + eased * 80;

  return (
    <div style={{
      position: 'relative',
      width: '100%', height: 'calc(100% - 44px)',
      background: 'radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.08), transparent 60%), #050505',
      overflow: 'hidden',
    }}>
      {/* Nav */}
      <div style={{
        position: 'absolute', top: 28, left: 40, right: 40,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        opacity: clamp(localTime / 0.6, 0, 1),
      }}>
        <div style={{
          fontFamily: FONT_DISPLAY, fontSize: 22, fontWeight: 700,
          color: WHITE, letterSpacing: '-0.02em',
        }}>
          ◍ ATELIER NORTH
        </div>
        <div style={{
          display: 'flex', gap: 32,
          fontFamily: FONT_MONO, fontSize: 12, color: DIM,
          letterSpacing: '0.18em',
        }}>
          <span>WORK</span><span>STUDIO</span><span>JOURNAL</span><span>CONTACT</span>
        </div>
      </div>

      {/* Hero */}
      <div style={{
        position: 'absolute',
        top: 130, left: 40, right: 40,
      }}>
        <div style={{
          fontFamily: FONT_MONO, fontSize: 11, color: DIM,
          letterSpacing: '0.3em', marginBottom: 24,
          opacity: clamp((localTime - 0.4) / 0.4, 0, 1),
        }}>
          ── ISSUE 014 / SPRING 2026
        </div>
        <div style={{
          fontFamily: FONT_DISPLAY,
          fontSize: 96,
          fontWeight: 700,
          color: WHITE,
          letterSpacing: '-0.04em',
          lineHeight: 1.0,
          maxWidth: 900,
          opacity: eased,
          transform: `translateY(${(1 - eased) * 16}px)`,
        }}>
          Building things that<br />
          <em style={{ fontStyle: 'italic', fontWeight: 400 }}>actually</em> get noticed.
        </div>
        <div style={{
          marginTop: 36,
          fontFamily: FONT_MONO, fontSize: 14, color: DIM,
          maxWidth: 480, lineHeight: 1.6,
          opacity: clamp((localTime - 0.9) / 0.5, 0, 1),
        }}>
          A studio for founders who refuse to look<br />
          like everyone else. Custom design only.
        </div>
        <div style={{
          marginTop: 40,
          display: 'flex', gap: 14,
          opacity: clamp((localTime - 1.2) / 0.5, 0, 1),
        }}>
          <div style={{
            padding: '14px 28px',
            background: WHITE, color: BLACK,
            fontFamily: FONT_MONO, fontSize: 13,
            letterSpacing: '0.18em',
            borderRadius: 2,
          }}>
            START A PROJECT →
          </div>
          <div style={{
            padding: '14px 28px',
            background: 'transparent',
            border: '1px solid rgba(255,255,255,0.3)',
            color: WHITE,
            fontFamily: FONT_MONO, fontSize: 13,
            letterSpacing: '0.18em',
            borderRadius: 2,
          }}>
            VIEW WORK
          </div>
        </div>
      </div>

      {/* Right column image placeholder (striped) */}
      <div style={{
        position: 'absolute',
        right: 40, top: 130,
        width: 320, height: 460,
        background: 'repeating-linear-gradient(135deg, #1a1a1a 0 14px, #0e0e0e 14px 28px)',
        border: '1px solid rgba(255,255,255,0.08)',
        opacity: clamp((localTime - 0.7) / 0.5, 0, 1),
      }} />

      {/* Footer ticker */}
      <div style={{
        position: 'absolute',
        bottom: 24, left: 40, right: 40,
        display: 'flex', justifyContent: 'space-between',
        fontFamily: FONT_MONO, fontSize: 11, color: DIM,
        letterSpacing: '0.3em',
        opacity: clamp((localTime - 1.4) / 0.5, 0, 1),
      }}>
        <span>STUDIO BASED IN ◯ EVERYWHERE</span>
        <span>SCROLL TO CONTINUE ↓</span>
      </div>

      {/* Cursor */}
      <div style={{
        position: 'absolute',
        left: cursorX, top: cursorY,
        width: 18, height: 18,
        opacity: clamp((localTime - 0.6) / 0.3, 0, 1),
        pointerEvents: 'none',
      }}>
        <svg width="18" height="18" viewBox="0 0 18 18">
          <path d="M2 2 L2 14 L6 11 L9 17 L11 16 L8 10 L13 10 Z"
            fill="white" stroke="black" strokeWidth="0.8" />
        </svg>
      </div>
    </div>
  );
}

// ─── SCENE 5: Price reveal (20–25s) ─────────────────────────────────────────
function Scene5Price() {
  return (
    <Sprite start={20} end={25.2}>
      {({ localTime }) => {
        const exitOp = 1 - clamp((localTime - 4.6) / 0.6, 0, 1);

        // Strikethrough comparison reveal
        const compOp = clamp(localTime / 0.5, 0, 1);
        const strikeT = Easing.easeOutCubic(clamp((localTime - 0.7) / 0.6, 0, 1));

        // Price drop in
        const priceT = Easing.easeOutBack(clamp((localTime - 1.4) / 0.7, 0, 1));

        // Number ticker — count up to 799.99
        const tickerT = clamp((localTime - 1.4) / 0.9, 0, 1);
        const tickerEased = Easing.easeOutCubic(tickerT);
        const priceVal = (799.99 * tickerEased).toFixed(2);

        return (
          <div style={{ position: 'absolute', inset: 0, opacity: exitOp }}>
            <CornerBrackets progress={1} />

            <div style={{
              position: 'absolute', top: 80, left: '50%',
              transform: 'translateX(-50%)',
              fontFamily: FONT_MONO, fontSize: 16, color: DIM,
              letterSpacing: '0.4em', textTransform: 'uppercase',
            }}>
              [ 04 ] · THE PRICE
            </div>

            {/* Comparison row */}
            <div style={{
              position: 'absolute',
              top: 240, left: '50%',
              transform: 'translateX(-50%)',
              display: 'flex', gap: 80, alignItems: 'center',
              opacity: compOp,
              fontFamily: FONT_MONO,
              color: DIM,
              fontSize: 22,
              letterSpacing: '0.18em',
              textTransform: 'uppercase',
            }}>
              <div style={{ position: 'relative' }}>
                AGENCIES: $8,000+
                <div style={{
                  position: 'absolute',
                  left: 0, right: 0, top: '50%',
                  height: 2, background: WHITE,
                  transform: `scaleX(${strikeT})`,
                  transformOrigin: 'left',
                }} />
              </div>
              <div style={{ position: 'relative' }}>
                FREELANCERS: $3,000+
                <div style={{
                  position: 'absolute',
                  left: 0, right: 0, top: '50%',
                  height: 2, background: WHITE,
                  transform: `scaleX(${clamp(strikeT * 1.4 - 0.4, 0, 1)})`,
                  transformOrigin: 'left',
                }} />
              </div>
            </div>

            {/* "STARTING AT" */}
            <div style={{
              position: 'absolute',
              top: 380, left: '50%',
              transform: 'translateX(-50%)',
              fontFamily: FONT_MONO, fontSize: 22,
              color: WHITE,
              letterSpacing: '0.5em',
              opacity: clamp((localTime - 1.2) / 0.4, 0, 1),
            }}>
              STARTING AT
            </div>

            {/* Massive price */}
            <div style={{
              position: 'absolute',
              top: 460, left: '50%',
              transform: `translateX(-50%) scale(${0.85 + priceT * 0.15})`,
              opacity: clamp(priceT, 0, 1),
              fontFamily: FONT_DISPLAY,
              fontWeight: 700,
              color: WHITE,
              letterSpacing: '-0.05em',
              lineHeight: 1,
              display: 'flex',
              alignItems: 'flex-start',
              whiteSpace: 'nowrap',
            }}>
              <span style={{ fontSize: 140, marginTop: 30, fontWeight: 400 }}>$</span>
              <span style={{ fontSize: 320 }}>{priceVal}</span>
            </div>

            {/* Sub-line */}
            <div style={{
              position: 'absolute',
              bottom: 160, left: '50%',
              transform: 'translateX(-50%)',
              fontFamily: FONT_MONO, fontSize: 22,
              color: DIM,
              letterSpacing: '0.3em',
              textTransform: 'uppercase',
              opacity: clamp((localTime - 2.4) / 0.5, 0, 1),
              textAlign: 'center',
            }}>
              same craft. fraction of the cost.
            </div>
          </div>
        );
      }}
    </Sprite>
  );
}

// ─── SCENE 6: CTA (25–30s) ──────────────────────────────────────────────────
function Scene6CTA() {
  return (
    <Sprite start={25} end={30.5}>
      {({ localTime }) => {
        const inT = Easing.easeOutCubic(clamp(localTime / 0.7, 0, 1));

        // Logo reveal
        const logoT = inT;
        // Tagline
        const taglineT = clamp((localTime - 0.7) / 0.5, 0, 1);
        // URL
        const urlT = clamp((localTime - 1.2) / 0.5, 0, 1);
        // Button pulse
        const btnPulse = 1 + Math.sin(localTime * 4) * 0.02;

        return (
          <div style={{ position: 'absolute', inset: 0 }}>
            <CornerBrackets progress={1} />

            {/* Center stack */}
            <div style={{
              position: 'absolute',
              top: '50%', left: '50%',
              transform: 'translate(-50%, -50%)',
              textAlign: 'center',
            }}>
              {/* mark + name */}
              <div style={{
                opacity: logoT,
                transform: `translateY(${(1 - logoT) * 14}px)`,
                marginBottom: 36,
              }}>
                <div style={{
                  width: 56, height: 56,
                  border: `2px solid ${WHITE}`,
                  margin: '0 auto 28px',
                  position: 'relative',
                  transform: `rotate(${45 + (1 - logoT) * -45}deg)`,
                }}>
                  <div style={{
                    position: 'absolute', inset: 12,
                    background: WHITE,
                  }} />
                </div>
                <div style={{
                  fontFamily: FONT_DISPLAY,
                  fontSize: 110,
                  fontWeight: 700,
                  color: WHITE,
                  letterSpacing: '-0.04em',
                  lineHeight: 1,
                }}>
                  KHYRAN STUDIO
                </div>
              </div>

              <div style={{
                opacity: taglineT,
                transform: `translateY(${(1 - taglineT) * 10}px)`,
                fontFamily: FONT_MONO,
                fontSize: 24,
                color: DIM,
                letterSpacing: '0.4em',
                textTransform: 'uppercase',
                marginBottom: 60,
              }}>
                ── LET'S BUILD SOMETHING WORTH VISITING ──
              </div>

              {/* CTA URL */}
              <div style={{
                opacity: urlT,
                transform: `translateY(${(1 - urlT) * 10}px) scale(${btnPulse})`,
                display: 'inline-flex',
                alignItems: 'center',
                gap: 20,
                padding: '24px 48px',
                background: WHITE,
                color: BLACK,
                fontFamily: FONT_DISPLAY,
                fontSize: 38,
                fontWeight: 600,
                letterSpacing: '-0.01em',
              }}>
                khyranstudio.com
                <span style={{ fontSize: 36 }}>→</span>
              </div>
            </div>

            {/* Bottom mono note */}
            <div style={{
              position: 'absolute',
              bottom: 80, left: '50%',
              transform: 'translateX(-50%)',
              fontFamily: FONT_MONO, fontSize: 14, color: DIM,
              letterSpacing: '0.3em', textTransform: 'uppercase',
              opacity: clamp((localTime - 1.8) / 0.5, 0, 1),
            }}>
              CUSTOM WEB DESIGN  ·  FROM $799.99  ·  EST. 2026
            </div>
          </div>
        );
      }}
    </Sprite>
  );
}

// ─── Top-level scene composition ────────────────────────────────────────────
function IntroReel() {
  return (
    <>
      <BgGrid />
      <Spotlight />
      <Vignette />

      <Scene1Intro />
      <Scene2WhatWeDo />
      <Scene3Pillars />
      <Scene4Showcase />
      <Scene5Price />
      <Scene6CTA />

      {/* persistent timecode HUD */}
      <Timecode />
    </>
  );
}

function Timecode() {
  const t = useTime();
  const total = 30;
  const frames = Math.floor(t * 30);
  const tc = `00:00:${String(Math.floor(t)).padStart(2, '0')}:${String(frames % 30).padStart(2, '0')}`;
  return (
    <div style={{
      position: 'absolute',
      bottom: 24, right: 28,
      fontFamily: FONT_MONO, fontSize: 12,
      color: 'rgba(255,255,255,0.35)',
      letterSpacing: '0.2em',
    }}>
      ◉ REC · {tc}
    </div>
  );
}

Object.assign(window, { IntroReel });