// relax.host video — "A stay, run by the agent" · 30s
// Uses Stage / Sprite / Easing from animations.jsx
// Daylight aesthetic: cream paper, coral / lavender / teal accents, italic Newsreader serif.

const V = {
  paper: '#fbf8f4',
  paper2: '#f4f0e9',
  ink: '#0a0a0c',
  ink2: '#4a4951',
  ink3: '#807e87',
  ink4: '#b4b1ba',
  line: 'rgba(10,10,12,0.10)',
  glass: 'rgba(255,255,255,0.7)',
  glassBd: 'rgba(255,255,255,0.85)',
  coral: '#e8528c',
  coralDeep: '#c43575',
  lavender: '#b48dff',
  peach: '#ffa884',
  teal: '#4dd0e1',
  sage: '#5c6d4f',
  serif: '"Instrument Serif", serif',
  sans: '"General Sans", system-ui, sans-serif',
  mono: '"Geist Mono", monospace',
};

// ============ BACKGROUND ============
function NightBG() {
  const t = useTime();
  // Stays "night" 0-7s, transitions to day at 15s, brightens at 23s
  const dayBlend = animate({ from: 0, to: 1, start: 6.5, end: 9, ease: Easing.easeInOutCubic })(t);
  const peachBlend = animate({ from: 0, to: 1, start: 14, end: 17, ease: Easing.easeInOutCubic })(t);
  const finaleBlend = animate({ from: 0, to: 1, start: 22, end: 25, ease: Easing.easeInOutCubic })(t);

  // Night = dark navy. Day = paper. Peach = warm afternoon. Finale = pastel mesh.
  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
      {/* Night layer */}
      <div style={{
        position: 'absolute', inset: 0,
        background: '#0f1426',
        opacity: 1 - dayBlend,
      }} />
      {/* Stars */}
      <div style={{
        position: 'absolute', inset: 0,
        opacity: (1 - dayBlend) * 0.7,
        backgroundImage: 'radial-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), radial-gradient(rgba(255,255,255,0.3) 0.6px, transparent 0.6px)',
        backgroundSize: '180px 180px, 130px 130px',
        backgroundPosition: '0 0, 90px 90px',
      }} />
      {/* Moon glow */}
      <div style={{
        position: 'absolute', top: -200, right: -200,
        width: 600, height: 600,
        background: 'radial-gradient(circle, rgba(180,141,255,0.18), transparent 60%)',
        filter: 'blur(40px)',
        opacity: 1 - dayBlend,
      }} />
      {/* Day layer (paper) */}
      <div style={{
        position: 'absolute', inset: 0,
        background: V.paper,
        opacity: dayBlend,
      }} />
      {/* Peach wash */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at 80% 30%, rgba(255,168,132,0.25), transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(232,82,140,0.10), transparent 60%)',
        opacity: peachBlend,
      }} />
      {/* Finale aurora */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at 50% 50%, rgba(232,82,140,0.25), transparent 50%), radial-gradient(ellipse at 30% 30%, rgba(180,141,255,0.20), transparent 50%), radial-gradient(ellipse at 70% 70%, rgba(77,208,225,0.18), transparent 50%)',
        opacity: finaleBlend,
      }} />
    </div>
  );
}

// ============ CHROME / HUD ============
function ChapterBadge({ chapter, title, time }) {
  return (
    <div style={{
      position: 'absolute', top: 32, left: 40,
      display: 'flex', alignItems: 'center', gap: 12,
      fontFamily: V.mono, fontSize: 12, letterSpacing: '0.18em',
      textTransform: 'uppercase',
      color: 'rgba(255,255,255,0.7)',
      mixBlendMode: 'difference',
    }}>
      <span style={{ width: 8, height: 8, borderRadius: 999, background: V.coral, boxShadow: `0 0 12px ${V.coral}` }} />
      <span style={{ opacity: 0.6 }}>{chapter}</span>
      <span style={{ width: 24, height: 1, background: 'rgba(255,255,255,0.4)' }} />
      <span>{title}</span>
      <span style={{ marginLeft: 'auto', opacity: 0.5 }}>{time}</span>
    </div>
  );
}

function BrandMark({ light = false }) {
  const c = light ? '#fff' : V.ink;
  return (
    <div style={{
      position: 'absolute', top: 32, right: 40,
      display: 'inline-flex', alignItems: 'center', gap: 10,
      fontFamily: V.serif, fontStyle: 'italic', fontSize: 26,
      letterSpacing: '-0.005em',
      color: c,
      mixBlendMode: light ? 'normal' : 'normal',
    }}>
      <span style={{
        width: 14, height: 14,
        background: `conic-gradient(from 0deg, ${V.coral}, ${V.lavender}, ${V.peach}, ${V.coral})`,
        borderRadius: 4,
      }} />
      relax.host
    </div>
  );
}

// ============ SCENE 1 — The 2:14 AM message ============
function Scene1() {
  return (
    <Sprite start={0} end={7}>
      {({ localTime }) => (
        <>
          <ChapterBadge chapter="01" title="2:14 AM" time="0:00" />
          <BrandMark light />

          {/* Phone */}
          <Phone1 localTime={localTime} />

          {/* Caption */}
          <Caption localTime={localTime}
            lines={[
              { t: 2.6, dur: 2.2, text: "It's 2:14 AM." },
              { t: 4.6, dur: 2.0, text: "Your guest needs an answer." },
            ]}
            y={580}
          />
        </>
      )}
    </Sprite>
  );
}

function Phone1({ localTime }) {
  // Phone slides up from below 0.0-1.0
  const phoneY = animate({ from: 80, to: 0, start: 0.0, end: 1.0, ease: Easing.easeOutCubic })(localTime);
  const phoneOp = animate({ from: 0, to: 1, start: 0.0, end: 0.7 })(localTime);

  return (
    <div style={{
      position: 'absolute', top: 80, left: '50%',
      width: 360, transform: `translate(-50%, ${phoneY}px)`,
      opacity: phoneOp,
    }}>
      <div style={{
        background: '#0a0a0c',
        borderRadius: 44,
        padding: 12,
        boxShadow: '0 30px 80px rgba(0,0,0,0.5), 0 0 0 1.5px rgba(255,255,255,0.08)',
      }}>
        <div style={{ background: '#0e0e12', borderRadius: 32, padding: 22, minHeight: 440, display: 'flex', flexDirection: 'column', gap: 14, color: '#fff' }}>
          {/* App header */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid rgba(255,255,255,0.08)', paddingBottom: 12 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 8, height: 8, borderRadius: 999, background: '#FF5A5F' }} />
              <span style={{ fontFamily: V.mono, fontSize: 11, letterSpacing: '0.12em', color: '#888', textTransform: 'uppercase' }}>Airbnb · DE</span>
            </div>
            <span style={{ fontFamily: V.mono, fontSize: 11, color: '#666' }}>02:14</span>
          </div>

          {/* Guest name */}
          <div style={{ fontFamily: V.serif, fontStyle: 'italic', fontSize: 18, color: '#fff', marginBottom: -4 }}>Anna · arriving May 24</div>

          {/* Guest avatar + message */}
          <Bubble in localTime={localTime} appearAt={1.4} text="Hallo! Wann kann ich einchecken? Auch der Türcode bitte?" />
          <BubbleTime localTime={localTime} appearAt={1.6} text="now" />

          {/* Inbox label that fades in */}
          <Notification localTime={localTime} appearAt={2.2} />
        </div>
      </div>
    </div>
  );
}

function Bubble({ in: isIn, out: isOut, localTime, appearAt, text, color }) {
  const op = animate({ from: 0, to: 1, start: appearAt, end: appearAt + 0.35, ease: Easing.easeOutCubic })(localTime);
  const ty = animate({ from: 10, to: 0, start: appearAt, end: appearAt + 0.45, ease: Easing.easeOutBack })(localTime);
  const bg = isOut ? `linear-gradient(135deg, ${V.coral}, ${V.coralDeep})` : 'rgba(255,255,255,0.08)';
  const c = isOut ? '#fff' : '#fff';
  return (
    <div style={{
      alignSelf: isOut ? 'flex-end' : 'flex-start',
      maxWidth: '85%',
      padding: '11px 15px',
      borderRadius: 16,
      borderBottomLeftRadius: isIn ? 4 : 16,
      borderBottomRightRadius: isOut ? 4 : 16,
      background: bg, color: c,
      fontSize: 14, lineHeight: 1.45,
      opacity: op,
      transform: `translateY(${ty}px)`,
      boxShadow: isOut ? '0 8px 24px rgba(232,82,140,0.35)' : 'none',
    }}>
      {text}
    </div>
  );
}

function BubbleTime({ localTime, appearAt, text }) {
  const op = animate({ from: 0, to: 0.5, start: appearAt, end: appearAt + 0.4 })(localTime);
  return (
    <div style={{
      alignSelf: 'flex-start',
      fontFamily: V.mono, fontSize: 9.5, letterSpacing: '0.14em',
      color: '#888', textTransform: 'uppercase',
      opacity: op,
      marginTop: -4,
    }}>{text}</div>
  );
}

function Notification({ localTime, appearAt }) {
  const op = animate({ from: 0, to: 1, start: appearAt, end: appearAt + 0.5, ease: Easing.easeOutBack })(localTime);
  const ty = animate({ from: 16, to: 0, start: appearAt, end: appearAt + 0.5, ease: Easing.easeOutBack })(localTime);
  // pulsing scale
  const pulse = 1 + Math.sin((localTime - appearAt) * 4) * 0.04;
  return (
    <div style={{
      marginTop: 'auto',
      padding: '12px 14px',
      background: 'rgba(232,82,140,0.12)',
      border: '1px solid rgba(232,82,140,0.4)',
      borderRadius: 12,
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      gap: 12,
      opacity: op,
      transform: `translateY(${ty}px) scale(${pulse})`,
    }}>
      <div>
        <div style={{ fontFamily: V.mono, fontSize: 10, letterSpacing: '0.14em', color: V.coral, textTransform: 'uppercase' }}>relax.host · drafted</div>
        <div style={{ fontFamily: V.serif, fontStyle: 'italic', fontSize: 14, color: '#fff', marginTop: 2 }}>1 reply ready</div>
      </div>
      <div style={{ fontFamily: V.mono, fontSize: 22, color: V.coral }}>→</div>
    </div>
  );
}

function Caption({ localTime, lines, y = 580 }) {
  return (
    <>
      {lines.map((l, i) => {
        const start = l.t;
        const end = l.t + l.dur;
        const op = (
          animate({ from: 0, to: 1, start, end: start + 0.5, ease: Easing.easeOutCubic })(localTime)
          - animate({ from: 0, to: 1, start: end - 0.4, end, ease: Easing.easeInCubic })(localTime)
        );
        const ty = animate({ from: 16, to: 0, start, end: start + 0.5, ease: Easing.easeOutBack })(localTime);
        if (op <= 0.01) return null;
        return (
          <div key={i} style={{
            position: 'absolute', top: y, left: '50%',
            transform: `translate(-50%, ${ty}px)`,
            opacity: op,
            fontFamily: V.serif,
            fontSize: 44,
            letterSpacing: '-0.015em',
            color: '#fff',
            mixBlendMode: 'difference',
            whiteSpace: 'nowrap',
          }}>{l.text}</div>
        );
      })}
    </>
  );
}

// ============ SCENE 2 — The agent drafts ============
function Scene2() {
  return (
    <Sprite start={7} end={15}>
      {({ localTime }) => (
        <>
          <ChapterBadge chapter="02" title="The agent reads" time="0:07" />
          <BrandMark />

          {/* Phone slides to left */}
          <Phone2 localTime={localTime} />

          {/* Agent panel slides in from right */}
          <AgentPanel localTime={localTime} />

          {/* Caption */}
          <Caption localTime={localTime}
            lines={[
              { t: 1.0, dur: 2.5, text: "relax.host reads it. Drafts it. Sends it." },
              { t: 6.0, dur: 2.0, text: "In three seconds." },
            ]}
            y={580}
          />
        </>
      )}
    </Sprite>
  );
}

function Phone2({ localTime }) {
  // Slide to the left, slightly smaller
  const phoneX = animate({ from: 0, to: -340, start: 0, end: 1.2, ease: Easing.easeInOutCubic })(localTime);
  const phoneScale = animate({ from: 1, to: 0.92, start: 0, end: 1.2, ease: Easing.easeInOutCubic })(localTime);
  return (
    <div style={{
      position: 'absolute', top: 80, left: '50%',
      width: 360, transform: `translate(calc(-50% + ${phoneX}px), 0) scale(${phoneScale})`,
      transformOrigin: 'center top',
    }}>
      <div style={{ background: '#0a0a0c', borderRadius: 44, padding: 12, boxShadow: '0 30px 80px rgba(0,0,0,0.4)' }}>
        <div style={{ background: '#0e0e12', borderRadius: 32, padding: 22, minHeight: 440, display: 'flex', flexDirection: 'column', gap: 12, color: '#fff' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid rgba(255,255,255,0.08)', paddingBottom: 12 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 8, height: 8, borderRadius: 999, background: '#FF5A5F' }} />
              <span style={{ fontFamily: V.mono, fontSize: 11, letterSpacing: '0.12em', color: '#888', textTransform: 'uppercase' }}>Airbnb · DE</span>
            </div>
            <span style={{ fontFamily: V.mono, fontSize: 11, color: '#666' }}>02:14</span>
          </div>
          <div style={{ fontFamily: V.serif, fontStyle: 'italic', fontSize: 18, color: '#fff', marginBottom: -4 }}>Anna</div>
          <Bubble in localTime={localTime} appearAt={-2} text="Hallo! Wann kann ich einchecken? Auch der Türcode bitte?" />
          <Bubble out localTime={localTime} appearAt={5.2}
            text={<>Hallo Anna! Check-in ab <b>15:00 Uhr</b>. Code <b>4471</b> — gültig bis zur Abreise. WLAN: <b>tatra-flat</b>. Schöne Reise!</>}
          />
          <BubbleTimeOut localTime={localTime} appearAt={5.8} />
        </div>
      </div>
    </div>
  );
}

function BubbleTimeOut({ localTime, appearAt }) {
  const op = animate({ from: 0, to: 1, start: appearAt, end: appearAt + 0.4 })(localTime);
  return (
    <div style={{
      alignSelf: 'flex-end',
      fontFamily: V.mono, fontSize: 9.5, letterSpacing: '0.14em',
      color: V.coral, textTransform: 'uppercase',
      opacity: op,
      marginTop: -4,
    }}>● sent · 3s</div>
  );
}

function AgentPanel({ localTime }) {
  const opPanel = animate({ from: 0, to: 1, start: 0.3, end: 1.3, ease: Easing.easeOutCubic })(localTime);
  const txPanel = animate({ from: 60, to: 0, start: 0.3, end: 1.3, ease: Easing.easeOutCubic })(localTime);

  const steps = [
    { t: 1.5, label: 'Detecting language', value: 'German', icon: '◐' },
    { t: 2.8, label: 'Loading reservation', value: 'Tatra Loft · May 24', icon: '◐' },
    { t: 4.0, label: 'Drafting reply', value: '"Hallo Anna..."', icon: '◐' },
    { t: 5.4, label: 'Sending to guest', value: 'Resolved in 3 s ✓', icon: '✓', done: true },
  ];

  return (
    <div style={{
      position: 'absolute', top: 130, right: 80,
      width: 440,
      opacity: opPanel,
      transform: `translateX(${txPanel}px)`,
    }}>
      {/* Glass panel */}
      <div style={{
        background: 'rgba(255,255,255,0.62)',
        border: '1px solid rgba(255,255,255,0.85)',
        borderRadius: 20,
        backdropFilter: 'blur(20px)',
        padding: '24px 26px',
        boxShadow: '0 24px 60px -20px rgba(10,10,12,0.18)',
      }}>
        {/* Header */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16, paddingBottom: 14, borderBottom: `1px solid ${V.line}` }}>
          <div style={{
            width: 28, height: 28, borderRadius: 8,
            background: `conic-gradient(from 0deg, ${V.coral}, ${V.lavender}, ${V.peach}, ${V.coral})`,
          }} />
          <div>
            <div style={{ fontFamily: V.serif, fontStyle: 'italic', fontSize: 18, color: V.ink, lineHeight: 1 }}>relax.host · agent</div>
            <div style={{ fontFamily: V.mono, fontSize: 10, letterSpacing: '0.12em', color: V.coralDeep, marginTop: 2 }}>● PROCESSING</div>
          </div>
          <div style={{ marginLeft: 'auto', fontFamily: V.mono, fontSize: 11, color: V.ink3 }}>02:14:08</div>
        </div>

        {/* Steps */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {steps.map((s, i) => {
            const op = animate({ from: 0, to: 1, start: s.t, end: s.t + 0.4, ease: Easing.easeOutCubic })(localTime);
            const ty = animate({ from: 12, to: 0, start: s.t, end: s.t + 0.5, ease: Easing.easeOutBack })(localTime);
            if (op <= 0.01) return null;
            return (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '11px 14px',
                background: s.done ? 'linear-gradient(135deg, rgba(232,82,140,0.10), rgba(180,141,255,0.10))' : 'rgba(255,255,255,0.7)',
                border: `1px solid ${s.done ? 'rgba(232,82,140,0.4)' : V.line}`,
                borderRadius: 10,
                opacity: op,
                transform: `translateY(${ty}px)`,
              }}>
                <div style={{
                  width: 22, height: 22, borderRadius: 999,
                  background: s.done ? V.coral : V.paper2,
                  color: s.done ? '#fff' : V.coralDeep,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: V.mono, fontSize: 11,
                }}>{s.icon}</div>
                <div style={{ fontFamily: V.mono, fontSize: 11, letterSpacing: '0.1em', color: V.ink3, textTransform: 'uppercase' }}>{s.label}</div>
                <div style={{ marginLeft: 'auto', fontFamily: V.serif, fontStyle: 'italic', fontSize: 16, color: V.ink }}>{s.value}</div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

// ============ SCENE 3 — Operations carry on ============
function Scene3() {
  return (
    <Sprite start={15} end={23}>
      {({ localTime }) => (
        <>
          <ChapterBadge chapter="03" title="Through the day" time="0:15" />
          <BrandMark />

          {/* Headline */}
          <SceneHeader localTime={localTime} text="Then it keeps going." appearAt={0.4} />

          {/* Event timeline */}
          <EventTimeline localTime={localTime} />

          <Caption localTime={localTime}
            lines={[
              { t: 5.5, dur: 2.3, text: "Twelve more events. Zero input from you." },
            ]}
            y={620}
          />
        </>
      )}
    </Sprite>
  );
}

function SceneHeader({ localTime, text, appearAt }) {
  const op = animate({ from: 0, to: 1, start: appearAt, end: appearAt + 0.6, ease: Easing.easeOutCubic })(localTime);
  const ty = animate({ from: 24, to: 0, start: appearAt, end: appearAt + 0.7, ease: Easing.easeOutBack })(localTime);
  return (
    <div style={{
      position: 'absolute', top: 110, left: '50%',
      transform: `translate(-50%, ${ty}px)`,
      opacity: op,
      fontFamily: V.serif,
      fontStyle: 'italic',
      fontSize: 64,
      color: V.ink,
      letterSpacing: '-0.02em',
    }}>{text}</div>
  );
}

function EventTimeline({ localTime }) {
  const events = [
    { t: 1.5, time: '08:14', who: 'relax.host', what: 'Sent breakfast tips to Anna', col: V.coral },
    { t: 2.4, time: '10:42', who: 'relax.host', what: 'Reminded Anna · check-in at 15:00', col: V.lavender },
    { t: 3.2, time: '11:00', who: 'Eva (cleaner)', what: 'Notified · slot 11:00 → 14:30', col: V.teal },
    { t: 4.0, time: '14:30', who: 'relax.host', what: 'Sent code 4471 to Anna', col: V.coral },
    { t: 4.8, time: '15:14', who: 'relax.host · auto-priced', what: 'Tonight: €88 → €124 (demand surge)', col: V.peach },
    { t: 5.6, time: '23:18', who: 'relax.host', what: 'Replied "where\'s the parking?" — 4s', col: V.coral },
  ];

  return (
    <div style={{
      position: 'absolute', top: 220, left: '50%',
      transform: 'translateX(-50%)',
      width: 920,
      display: 'flex', flexDirection: 'column',
      gap: 10,
    }}>
      {events.map((e, i) => {
        const op = animate({ from: 0, to: 1, start: e.t, end: e.t + 0.4, ease: Easing.easeOutCubic })(localTime);
        const tx = animate({ from: -40, to: 0, start: e.t, end: e.t + 0.6, ease: Easing.easeOutBack })(localTime);
        if (op <= 0.01) return null;
        return (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '90px 180px 1fr auto', gap: 18, alignItems: 'center',
            padding: '14px 22px',
            background: 'rgba(255,255,255,0.65)',
            border: `1px solid rgba(255,255,255,0.85)`,
            borderRadius: 14,
            backdropFilter: 'blur(10px)',
            opacity: op,
            transform: `translateX(${tx}px)`,
            boxShadow: '0 8px 20px -8px rgba(10,10,12,0.08)',
          }}>
            <div style={{ fontFamily: V.mono, fontSize: 13, color: V.ink3, letterSpacing: '0.08em' }}>{e.time}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: V.mono, fontSize: 11, color: V.ink2, letterSpacing: '0.1em', textTransform: 'uppercase' }}>
              <span style={{ width: 8, height: 8, borderRadius: 999, background: e.col, boxShadow: `0 0 8px ${e.col}` }} />
              {e.who}
            </div>
            <div style={{ fontFamily: V.serif, fontStyle: 'italic', fontSize: 18, color: V.ink }}>{e.what}</div>
            <div style={{ fontFamily: V.mono, fontSize: 10, letterSpacing: '0.14em', color: V.sage, textTransform: 'uppercase' }}>● auto</div>
          </div>
        );
      })}
    </div>
  );
}

// ============ SCENE 4 — 95% finale ============
function Scene4() {
  return (
    <Sprite start={23} end={30}>
      {({ localTime, progress }) => (
        <>
          <ChapterBadge chapter="04" title="The outcome" time="0:23" />
          <BrandMark />

          <BigNumber localTime={localTime} />
          <FinaleCaption localTime={localTime} />
          <FinaleCTA localTime={localTime} />
        </>
      )}
    </Sprite>
  );
}

function BigNumber({ localTime }) {
  // Counter: 0 → 95 over 0 to 2.2s
  const t = clamp(localTime / 2.2, 0, 1);
  const eased = Easing.easeOutCubic(t);
  const v = Math.round(95 * eased);

  const op = animate({ from: 0, to: 1, start: 0.0, end: 0.8, ease: Easing.easeOutCubic })(localTime);
  const sc = animate({ from: 0.88, to: 1, start: 0.0, end: 1.2, ease: Easing.easeOutBack })(localTime);
  const subY = animate({ from: 24, to: 0, start: 1.5, end: 2.3, ease: Easing.easeOutBack })(localTime);
  const subOp = animate({ from: 0, to: 1, start: 1.5, end: 2.3 })(localTime);

  return (
    <div style={{
      position: 'absolute', top: '50%', left: '50%',
      transform: `translate(-50%, calc(-50% + 20px)) scale(${sc})`,
      textAlign: 'center',
      opacity: op,
    }}>
      <div style={{
        fontFamily: V.serif,
        fontStyle: 'italic',
        fontSize: 260,
        lineHeight: 0.85,
        letterSpacing: '-0.04em',
        background: `linear-gradient(120deg, ${V.coral} 10%, ${V.lavender} 50%, ${V.teal} 90%)`,
        WebkitBackgroundClip: 'text',
        backgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
        filter: 'drop-shadow(0 12px 40px rgba(232,82,140,0.25))',
      }}>{v}%</div>
      <div style={{
        marginTop: 16,
        fontFamily: V.serif,
        fontSize: 32,
        color: V.ink,
        letterSpacing: '-0.015em',
        opacity: subOp,
        transform: `translateY(${subY}px)`,
      }}>of the work, <span style={{ fontStyle: 'italic', color: V.coralDeep }}>handled by relax.host.</span></div>
    </div>
  );
}

function FinaleCaption({ localTime }) {
  const op = animate({ from: 0, to: 1, start: 3.0, end: 3.6, ease: Easing.easeOutCubic })(localTime);
  const ty = animate({ from: 16, to: 0, start: 3.0, end: 3.6, ease: Easing.easeOutBack })(localTime);
  if (op < 0.01) return null;
  return (
    <div style={{
      position: 'absolute', bottom: 130, left: '50%',
      transform: `translate(-50%, ${ty}px)`,
      opacity: op,
      fontFamily: V.mono,
      fontSize: 12, letterSpacing: '0.18em',
      color: V.ink3, textTransform: 'uppercase',
    }}>The other 5% is the work that compounds. Yours.</div>
  );
}

function FinaleCTA({ localTime }) {
  const op = animate({ from: 0, to: 1, start: 4.0, end: 4.8, ease: Easing.easeOutCubic })(localTime);
  const sc = animate({ from: 0.85, to: 1, start: 4.0, end: 5.0, ease: Easing.easeOutBack })(localTime);
  if (op < 0.01) return null;
  return (
    <div style={{
      position: 'absolute', bottom: 60, left: '50%',
      transform: `translate(-50%, 0) scale(${sc})`,
      opacity: op,
      display: 'inline-flex', alignItems: 'center', gap: 14,
      padding: '16px 30px',
      background: V.ink, color: '#fff',
      borderRadius: 999,
      fontSize: 15, fontWeight: 600,
      boxShadow: '0 20px 50px -10px rgba(10,10,12,0.3)',
    }}>
      <span>relax.host</span>
      <span style={{ opacity: 0.5 }}>·</span>
      <span style={{ fontFamily: V.serif, fontStyle: 'italic' }}>Begin your trial</span>
      <span style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        width: 28, height: 28, borderRadius: 8,
        background: V.coral, color: '#fff', fontSize: 14,
      }}>→</span>
    </div>
  );
}

// ============ APP ============
function App() {
  return (
    <Stage
      width={1280}
      height={720}
      duration={30}
      background="#fbf8f4"
      persistKey="relax.host-video"
      loop
    >
      <NightBG />
      <Scene1 />
      <Scene2 />
      <Scene3 />
      <Scene4 />
    </Stage>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);