Video, carousel, devices — and the deck

<div class="vid-player" data-vid>
  <!-- Drop any native <video>: the chrome wires up to it automatically -->
  <video data-vid-media src="/path/to/demo.mp4" poster="/path/to/poster.jpg"
         playsinline preload="metadata"></video>

  <!-- Big centre play; hides once playback starts -->
  <div class="vid-center">
    <button class="vid-play" type="button" aria-label="Play">
      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
    </button>
  </div>

  <!-- Bottom toolbar: play/pause · scrubber · time · mute+volume · fullscreen -->
  <div class="vid-ctrls" role="toolbar" aria-label="Video controls">
    <button type="button" data-vid-toggle aria-label="Play/pause">
      <svg class="ic-play"  viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
      <svg class="ic-pause" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M6 4h4v16H6zm8 0h4v16h-4z"/></svg>
    </button>
    <div class="vid-bar" style="--vp: 0;">
      <input type="range" min="0" max="100" step="0.1" value="0" data-vid-seek aria-label="Seek">
    </div>
    <span class="vid-time" data-vid-time>0:00 / 0:00</span>
    <div class="vid-vol" style="--vv: 100;">
      <button type="button" data-vid-mute aria-label="Mute">
        <svg class="ic-vol"  viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 10v4h4l5 5V5L7 10H3zm13.5 2a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4z"/></svg>
        <svg class="ic-mute" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M16.5 12a4.5 4.5 0 0 0-2.5-4v2.18l2.45 2.45c.03-.2.05-.41.05-.63zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.17v2.06a8.99 8.99 0 0 0 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3z"/></svg>
      </button>
      <input type="range" min="0" max="100" step="1" value="100" data-vid-vol aria-label="Volume">
    </div>
    <button type="button" data-vid-fs aria-label="Fullscreen">
      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 9V4h5V2H2v7h2zm11-7v2h5v5h2V2h-7zM9 20v2H2v-7h2v5h5zm13 2v-7h-2v5h-5v2h7z"/></svg>
    </button>
  </div>
</div>

.vid-player { position: relative; aspect-ratio: 16/9; background: var(--ink); overflow: hidden; }
.vid-player .vid-ctrls {
  position: absolute; inset: auto 0 0 0; padding: 48px 20px 18px;
  background: linear-gradient(to top, rgba(14,17,30,0.72), rgba(14,17,30,0));
  display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 12px;
  opacity: 0; transition: opacity 160ms;
}
.vid-player:hover .vid-ctrls,
.vid-player:focus-within .vid-ctrls,
.vid-player.is-paused .vid-ctrls { opacity: 1; }

/* Scrubber fill via --vp (0–100); volume-slider fill via --vv (0–100).
   Both are driven by the JS listeners on timeupdate / volumechange. */
.vid-player .vid-bar input::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--accent) 0%,
    var(--accent) calc(var(--vp) * 1%),
    rgba(255,255,255,0.22) calc(var(--vp) * 1%),
    rgba(255,255,255,0.22) 100%);
}
.vid-player .vid-vol { display: inline-flex; align-items: center; gap: 4px; }
.vid-player .vid-vol input { width: 72px; }

/* Dual-icon swap keeps the DOM stable; swap via .is-playing / .is-muted on wrap */
.vid-player [data-vid-toggle] .ic-pause,
.vid-player [data-vid-mute]   .ic-mute { display: none; }
.vid-player.is-playing [data-vid-toggle] .ic-play,
.vid-player.is-muted   [data-vid-mute]   .ic-vol  { display: none; }
.vid-player.is-playing [data-vid-toggle] .ic-pause,
.vid-player.is-muted   [data-vid-mute]   .ic-mute { display: inline-block; }

import { VideoPlayer } from "@magicblocksai/ui";

<VideoPlayer
  src="/demo.mp4"
  poster="/demo-poster.jpg"
  ariaLabel="MagicBlocks demo reel"
/>

// Multiple sources (mp4 + webm fallback)
<VideoPlayer
  sources={[
    { src: "/demo.webm", type: "video/webm" },
    { src: "/demo.mp4",  type: "video/mp4" },
  ]}
  poster="/demo-poster.jpg"
/>

// No src → renders the branded poster fallback (still keyboard-driveable)
<VideoPlayer />

<div class="carousel" data-carousel>
  <div class="carousel-track" data-carousel-track>
    <article class="carousel-slide">
      <span class="eyebrow">01 · Engage</span>
      <h4>Instant response</h4>
      <p>Every lead gets a personalised conversation within five seconds. No queues, no delays.</p>
    </article>
    <article class="carousel-slide">
      <span class="eyebrow">02 · Qualify</span>
      <h4>Pre-handoff qualification</h4>
      <p>HAPPA methodology captures credit band, timeline, and intent before a human ever sees the lead.</p>
    </article>
    <!-- as many .carousel-slide articles as you need -->
  </div>
  <div class="carousel-nav">
    <div class="carousel-dots" data-carousel-dots aria-label="Slide navigation"></div>
    <div class="carousel-arrows">
      <button type="button" aria-label="Previous slide" data-carousel-prev>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
      </button>
      <button type="button" aria-label="Next slide" data-carousel-next>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>
      </button>
    </div>
  </div>
</div>

<!-- Opt-in autoplay via data-autoplay="ms" on .carousel -->
<div class="carousel" data-carousel data-autoplay="5000">
  <div class="carousel-track" data-carousel-track>
    <article class="carousel-slide">…</article>
    <article class="carousel-slide">…</article>
  </div>
  <div class="carousel-nav">
    <div class="carousel-dots" data-carousel-dots></div>
    <div class="carousel-arrows">
      <button type="button" data-carousel-prev aria-label="Previous slide"></button>
      <button type="button" data-carousel-next aria-label="Next slide"></button>
    </div>
  </div>
</div>

.carousel-track {
  display: flex; gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.carousel-slide {
  flex: 0 0 85%;          /* mobile */
  scroll-snap-align: start;
}
@media (min-width: 640px) { .carousel-slide { flex-basis: 420px; } }
/* Active dot morphs to a pill */
.carousel-dots button.is-active { width: 22px; border-radius: 4px; background: var(--accent); }

import { Carousel } from "@magicblocksai/ui";

<Carousel
  slides={[
    <>
      <span className="eyebrow">01 · Engage</span>
      <h4>Instant response</h4>
      <p>Every lead gets a reply within five seconds.</p>
    </>,
    <>
      <span className="eyebrow">02 · Qualify</span>
      <h4>Pre-handoff qualification</h4>
      <p>HAPPA captures credit band, timeline, and intent before a human sees the lead.</p>
    </>,
    // …more slides…
  ]}
/>

// Auto-advance every 5 seconds (paused on hover, disabled by reduced-motion)
<Carousel interval={5000} slides={[/* … */]} />

<div class="device browser">
  <div class="chrome">
    <div class="dots" aria-hidden="true"><span></span><span></span><span></span></div>
    <div class="url">magicblocks.ai</div>
  </div>
  <div class="device-viewport">
    <!-- drop any HTML — screenshot, dashboard, hero crop -->
  </div>
</div>

.device.browser {
  max-width: 960px;
  border: 1px solid var(--hair); border-radius: var(--r-lg);
  overflow: hidden; background: var(--bg-paper);
  box-shadow: var(--sh-3);
}
.device.browser .chrome {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  background: var(--warm-5); border-bottom: 1px solid var(--hair);
}
.device.browser .dots span { width: 11px; height: 11px; border-radius: 50%; }
.device.browser .dots span:nth-child(1) { background: #F47B6D; } /* close */
.device.browser .dots span:nth-child(2) { background: #F9C33E; } /* min   */
.device.browser .dots span:nth-child(3) { background: #47DDB2; } /* max   */
.device.browser .url {
  flex: 1 1 auto; max-width: 520px; height: 28px;
  border-radius: 999px; padding: 0 12px;
  background: var(--bg-paper); border: 1px solid var(--hair);
  font: 500 12px var(--f-mono); color: var(--fg-soft);
  display: inline-flex; align-items: center; gap: 8px;
}
.device.browser .device-viewport { aspect-ratio: 16 / 10; }

import { DeviceFrame } from "@magicblocksai/ui";

<DeviceFrame variant="browser" url="magicblocks.ai">
  <div className="hero-crop">
    <span className="eyebrow">Every lead · Every time</span>
    <h2>The conversion engine for <em>mortgage.</em></h2>
  </div>
</DeviceFrame>

<div class="device laptop">
  <div class="device-viewport">
    <!-- drop any HTML — dashboard, video player, slide deck -->
  </div>
</div>

.device.laptop {
  max-width: 900px; margin: 0 auto;
  padding: 18px 18px 0;
  background: #0c0f18;        /* --device-bezel */
  border-radius: 22px 22px 6px 6px;
  box-shadow: 0 30px 60px -30px rgba(25,30,50,0.45);
  position: relative;
}
.device.laptop::before {
  /* camera pinhole */
  content: ""; position: absolute; top: 8px; left: 50%;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  transform: translateX(-50%);
}
.device.laptop .device-viewport {
  aspect-ratio: 16 / 10; border-radius: 4px;
  overflow: hidden; background: var(--bg-paper);
}
.device.laptop::after {
  /* lid base — hinge silhouette below the screen */
  content: ""; display: block;
  height: 14px; margin: 18px -32px 0;
  background: linear-gradient(to bottom, #0c0f18 0%, #0c0f18 40%,
              color-mix(in oklab, #0c0f18 80%, #888) 100%);
  border-radius: 0 0 22px 22px;
  box-shadow: 0 6px 14px -4px rgba(25,30,50,0.4);
}

import { DeviceFrame } from "@magicblocksai/ui";

<DeviceFrame variant="laptop">
  <div className="hero-crop">
    <span className="eyebrow">Live demo</span>
    <h3>Conversations that look <em>human.</em></h3>
  </div>
</DeviceFrame>

<div class="device phone">
  <div class="notch" aria-hidden="true"></div>
  <div class="device-viewport">
    <!-- drop any HTML — agent chat UI, SMS view, mobile hero crop -->
  </div>
</div>

.device.phone {
  max-width: 340px; margin: 0 auto;
  padding: 12px;
  background: #0c0f18;        /* --device-bezel */
  border-radius: 44px;
  box-shadow: 0 30px 60px -30px rgba(25,30,50,0.45),
              0 0 0 1px rgba(255,255,255,0.08) inset;
  position: relative;
}
.device.phone .device-viewport {
  aspect-ratio: 9 / 19.5; border-radius: 34px;
  overflow: hidden; background: var(--bg-paper);
  position: relative;
}
.device.phone .notch {
  /* dynamic-island-ish pill at the top */
  position: absolute; z-index: 2;
  top: 10px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 28px; border-radius: 999px;
  background: #0c0f18;
}

import { DeviceFrame } from "@magicblocksai/ui";

<DeviceFrame variant="phone">
  <div className="sms-thread">
    <span className="eyebrow">SMS · 9:47 AM</span>
    // …bubbles…
  </div>
</DeviceFrame>

// Suppress the default notch with chrome={null}
<DeviceFrame variant="phone" chrome={null}>/* … */</DeviceFrame>

<div class="device laptop deck">
  <div class="device-viewport">
    <div class="deck-slides" data-deck>
      <span class="deck-brand" aria-hidden="true"><span class="dot"></span>magicblocks</span>
      <span class="deck-count" data-deck-count>01 / 04</span>

      <article class="deck-slide is-active">
        <span class="eyebrow">The problem</span>
        <h3 class="title">Most AI can't do <em>this job</em>.</h3>
        <p class="lede">Generic LLMs hallucinate rates, forget borrowers mid-conversation, and break at handoff. Production sales needs guardrails on day one.</p>
        <div class="pill-row">
          <span>Hallucinates rates</span>
          <span>No memory</span>
          <span>Breaks at handoff</span>
        </div>
      </article>

      <article class="deck-slide">
        <span class="eyebrow">The fix</span>
        <h3 class="title">Built for mortgage. Wired <em>into Relcu</em>.</h3>
        <p class="lede">Quotes only what you authorise. Rate, APR, product, and fees gated by your rules.</p>
        <div class="pill-row">
          <span>Guardrails</span>
          <span>Memory</span>
          <span>Clean handover</span>
        </div>
      </article>
      <!-- more .deck-slide articles -->

      <div class="deck-controls">
        <div class="deck-pager" data-deck-pager aria-label="Deck pages"></div>
        <div class="deck-arrows">
          <button type="button" aria-label="Previous slide" data-deck-prev>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
          </button>
          <button type="button" aria-label="Next slide" data-deck-next>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

/* Each slide is absolutely positioned; the active one fades in */
.deck-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 240ms; }
.deck-slide.is-active { opacity: 1; pointer-events: auto; }
/* Active dot morphs into a pill */
.deck-pager button.is-active { background: var(--accent); width: 34px; }

import { DeviceFrame } from "@magicblocksai/ui";

// "deck" variant = laptop bezel + a slide-deck-ready viewport.
// Drop your own .deck-slides body inside (or wire your own slide state).
<DeviceFrame variant="deck">
  <div className="deck-slides">
    <span className="deck-brand"><span className="dot" />magicblocks</span>
    <span className="deck-count">01 / 04</span>
    <article className="deck-slide is-active">
      <span className="eyebrow">The problem</span>
      <h3 className="title">Most AI can't do <em>this job.</em></h3>
      <p className="lede">Generic LLMs hallucinate rates…</p>
    </article>
    // …more .deck-slide articles…
  </div>
</DeviceFrame>

<div class="stage-chat" data-stage-chat>
  <div class="sc-track">
    <div class="sc-stage" data-stage="hook">Hook</div>
    <div class="sc-stage" data-stage="align">Align</div>
    <div class="sc-stage" data-stage="personalise">Personalise</div>
    <div class="sc-stage" data-stage="pitch">Pitch</div>
    <div class="sc-stage" data-stage="action">Action</div>
  </div>
  <div class="sc-phone">
    <div class="sc-screen">
      <header class="sc-head">
        <div class="sc-avatar" aria-hidden="true">M</div>
        <div class="sc-name">MagicBlocks · Agent</div>
      </header>
      <div class="sc-disc">Simulated conversation · no real data sent</div>

      <div class="sc-body" data-sc-body></div>

      <footer class="sc-foot">
        <div class="sc-composer">
          <div class="field" data-sc-field>Type a reply…</div>
          <button class="send" data-sc-send type="button">Send</button>
        </div>
        <div class="sc-foot-meta">
          <span>Stage · <strong data-sc-stage-label>Hook</strong></span>
          <span>MAGICBLOCKS</span>
        </div>
      </footer>
    </div>
  </div>
</div>

/* Stage track — highlights the active stage in brand pink */
.sc-stage.is-active { background: var(--accent-soft); color: var(--accent-text); }
/* Streaming caret — blinks while tokens are still arriving */
.sc-caret { animation: sc-blink 0.85s steps(1) infinite; }
/* Typing indicator — three bouncing dots */
.sc-typing span { animation: sc-bp 1.1s infinite; }

import { StageChat } from "@magicblocksai/ui";
import type { StageChatMessage } from "@magicblocksai/ui";

const script: StageChatMessage[] = [
  { stage: "hook",        from: "ai",   text: "Morning Jordan — saw you grabbed our APR guide last week." },
  { stage: "hook",        from: "user", text: "Sure, go ahead." },
  { stage: "align",       from: "ai",   text: "Are you focused on lower payment, or closing fast?" },
  { stage: "align",       from: "user", text: "Monthly payment, probably." },
  { stage: "personalise", from: "ai",   text: "Got it. A 30-yr fixed at 6.21% lands ~$2,140/mo on a $420k loan." },
  // …pitch + action…
];

<StageChat messages={script} />

<div class="product-dash" data-product-dash>
  <!-- browser chrome -->
  <div class="pd-chrome">
    <div class="pd-dots" aria-hidden="true"><span></span><span></span><span></span></div>
    <div class="pd-url">app.magicblocks.com / dashboard</div>
  </div>

  <div class="pd-shell">
    <!-- sidebar -->
    <aside class="pd-side">
      <div class="pd-brand" aria-hidden="true"><span></span><span></span><span></span><span></span></div>
      <nav class="pd-nav">
        <button class="pd-nav-item is-active" type="button">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 13v8h6v-6h6v6h6v-8L12 3Z"/></svg>
          Home
        </button>
        <button class="pd-nav-item" type="button">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 19h16M6 17V9M10 17V5M14 17v-6M18 17V8"/></svg>
          Stats
        </button>
        <button class="pd-nav-item" type="button">
          <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></svg>
          CRM
        </button>
        <button class="pd-nav-item" type="button">
          <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="3"/></svg>
          Settings
        </button>
      </nav>
    </aside>

    <!-- main content -->
    <div class="pd-main">
      <h3 class="pd-title">Hello, Jordan</h3>

      <!-- KPI grid: count up from 0 to data-base -->
      <div class="pd-kpis">
        <div class="pd-kpi">
          <div class="pd-kpi-label">Revenue</div>
          <div class="pd-kpi-value" data-pd-kpi data-prefix="$" data-base="14820">$0</div>
        </div>
        <div class="pd-kpi">
          <div class="pd-kpi-label">Conversations</div>
          <div class="pd-kpi-value" data-pd-kpi data-base="312">0</div>
        </div>
        <div class="pd-kpi">
          <div class="pd-kpi-label">Qualified</div>
          <div class="pd-kpi-value" data-pd-kpi data-base="48">0</div>
        </div>
        <div class="pd-kpi">
          <div class="pd-kpi-label">Conv. rate</div>
          <div class="pd-kpi-value" data-pd-kpi data-suffix="%" data-decimals="1" data-base="15.4">0%</div>
        </div>
      </div>

      <!-- chart: paths drawn in via stroke-dashoffset -->
      <div class="pd-chart-box">
        <svg viewBox="0 0 560 160" preserveAspectRatio="none" aria-hidden="true">
          <line class="grid" x1="0" y1="40"  x2="560" y2="40"/>
          <line class="grid" x1="0" y1="80"  x2="560" y2="80"/>
          <line class="grid" x1="0" y1="120" x2="560" y2="120"/>
          <path class="pd-line" data-pd-line="pink"   style="stroke: var(--pink-500);"
                d="M 18.0 111.7 C 24.7 110.3, 44.9 103.9, 58.3 103.4 C 71.7 103.0, 85.2 110.5, 98.6 108.9 C 112.1 107.3, 125.5 95.6, 138.9 93.8 C 152.4 91.9, 165.8 99.1, 179.2 97.9 C 192.7 96.8, 206.1 90.1, 219.5 86.9 C 233.0 83.7, 246.4 79.5, 259.8 78.6 C 273.3 77.7, 286.7 82.8, 300.2 81.4 C 313.6 80.0, 327.0 73.6, 340.5 70.4 C 353.9 67.1, 367.3 62.8, 380.8 62.1 C 394.2 61.4, 407.6 67.1, 421.1 66.2 C 434.5 65.3, 447.9 60.0, 461.4 56.6 C 474.8 53.1, 488.3 48.8, 501.7 45.6 C 515.1 42.3, 535.3 38.7, 542.0 37.3"/>
          <path class="pd-line" data-pd-line="yellow" style="stroke: var(--yellow-500);"/>
          <path class="pd-line" data-pd-line="blue"   style="stroke: var(--blue-500);"/>
          <g data-pd-points></g>
        </svg>
      </div>
    </div>
  </div>
</div>

/* Three chart lines draw in on each loop cycle */
.pd-line {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 1800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.product-dash.is-drawn .pd-line { stroke-dashoffset: 0; }
/* Points pop in after the lines finish */
@keyframes pd-pop { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }

import { ProductDashboard } from "@magicblocksai/ui";

<ProductDashboard
  title="Hello, Jordan"
  kpis={[
    { label: "Revenue",       value: 14820, prefix: "$" },
    { label: "Conversations", value: 312 },
    { label: "Qualified",     value: 48 },
    { label: "Conv. rate",    value: 15.4, suffix: "%", decimals: 1 },
  ]}
  legend={[
    { label: "Conversations", colour: "pink"   },
    { label: "Qualified",     colour: "yellow" },
    { label: "Booked",        colour: "blue"   },
  ]}
  series={[
    { colour: "pink",   values: [22, 28, 24, 35, 32, 40, 46, 44, 52, 58, 55, 62, 70, 76] },
    { colour: "yellow", values: [ 8, 10,  9, 14, 13, 17, 19, 18, 22, 25, 23, 26, 30, 33] },
    { colour: "blue",   values: [ 3,  4,  4,  6,  6,  8,  9,  9, 11, 13, 12, 14, 16, 18] },
  ]}
/>