/* Smith & Victory — Landingpage-VSL 16:9 · 8 Beats auf vsl-final.mp3 (191.4s), Rate 1.0 */
const O = "#FF6C4B", OD = "#E04E2C", INK = "#141210", GRAY = "#8a8378", PAPER = "#FBF2EA", CREAM = "#FFF3EC", GRUEN = "#3A7D5C";
const B = [0, 13.7, 43.9, 81.4, 99.8, 126.5, 143.3, 178.2, 193.5];
const VSL_RATE = 1.3;               /* Stimme 1.3x schneller */
const AUDIO_DUR = 193.5;            /* Audio-Sekunden */
const VSL_DUR = AUDIO_DUR / VSL_RATE; /* Stage-Sekunden (~176) */
function aTRaw() { return window.useTime() * VSL_RATE; } /* echte Audio-Zeit (für Ton-Sync) */
function aT() { return aTRaw() + 0.3; } /* Animations-Zeit: 0.3s Vorlauf — Bild trifft mit dem Wort ein */

function VAudio({ src }) {
  const t = aTRaw();
  const ref = React.useRef(null);
  if (!ref.current) ref.current = document.getElementById('vslAudio');
  if (!window.__vslAudioIsMaster && ref.current && isFinite(t)) {
    const a = ref.current, st = (ref.current.__st = ref.current.__st || { lastT: -1, stag: 0 });
    const diff = a.currentTime - t;
    a.playbackRate = VSL_RATE * (window.__stageRate || 1) * (1 - Math.max(-0.05, Math.min(0.05, diff * 0.6)));
    const adv = t > st.lastT + 0.0001, rew = t < st.lastT - 0.2;
    if (window.__vslVoiceOn === false) { if (!a.paused) a.pause(); }
    else if (adv || rew) {
      st.stag = 0;
      if (Math.abs(a.currentTime - t) > 0.25) { try { a.currentTime = Math.max(0, Math.min(t, a.duration || t)); } catch (e) {} }
      if (a.paused && t < 191.2) a.play().catch(() => {});
      if (t >= 191.2 && !a.paused) a.pause();
    } else { st.stag++; if (st.stag > 8 && !a.paused) a.pause(); }
    st.lastT = t;
  }
  React.useEffect(() => {
    const onP = (e) => { const au = ref.current; if (!au || window.__vslAudioIsMaster) return; if (!e.detail) { if (!au.paused) au.pause(); } };
    window.addEventListener('stage-playing', onP);
    return () => window.removeEventListener('stage-playing', onP);
  }, []);
  return document.getElementById('vslAudio') ? null : <audio ref={ref} src={src} preload="auto" />;
}
function Chrome() {
  const t = aT();
  return (<React.Fragment>
    <img src="assets/logo-ink.png" style={{ position: "absolute", top: 40, left: "50%", transform: "translateX(-50%)", height: 42, zIndex: 20, opacity: 0.9 }} />
    <div style={{ position: "absolute", left: 0, bottom: 0, height: 8, width: `${(t / AUDIO_DUR) * 100}%`, background: O, zIndex: 21 }}></div>
  </React.Fragment>);
}
function Ambient() {
  const t = aT();
  const dots = [];
  for (let i = 0; i < 14; i++) {
    const sp = 9 + (i * 7) % 11, ph = i * 2.399;
    const x = 60 + ((i * 137) % 1800);
    const y = 1120 - ((t * sp + i * 83) % 1250);
    const sz = 5 + (i % 4) * 4, op = 0.05 + (i % 3) * 0.04;
    dots.push(<div key={i} style={{ position: "absolute", left: x + Math.sin(t * 0.7 + ph) * 26, top: y, width: sz, height: sz, borderRadius: "50%", background: OD, opacity: op }}></div>);
  }
  return <div style={{ position: "absolute", inset: 0, zIndex: 1, overflow: "hidden", pointerEvents: "none" }}>{dots}</div>;
}
function BeatFlash() {
  const t = aT();
  let f = 0;
  for (let i = 1; i < B.length - 1; i++) { const d = t - B[i]; if (d >= 0 && d < 0.25) { f = 1 - d / 0.25; break; } }
  if (f <= 0) return null;
  return <div style={{ position: "absolute", inset: 0, zIndex: 15, pointerEvents: "none", background: `rgba(255,108,75,${f * 0.3})` }}></div>;
}
function Beat({ i, children }) {
  const t = aT();
  const a = B[i], b = B[i + 1], F = 0.35;
  if (t < a - 0.05 || t > b + F) return null;
  const drift = 1 + 0.045 * clamp((t - a) / (b - a), 0, 1);
  const ein = Easing.easeOutCubic(clamp((t - a) / 0.45, 0, 1));
  const eout = i < 7 ? Easing.easeInCubic(clamp((t - b) / F, 0, 1)) : 0;
  return (
    <div style={{ position: "absolute", inset: "115px 80px 70px 80px", zIndex: 3, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", opacity: ein * (1 - eout), transform: `translateY(${(1 - ein) * 30 - eout * 44}px) scale(${(1.04 - 0.04 * ein - 0.03 * eout) * drift})`, willChange: "transform, opacity" }}>{children}</div>
  );
}
function Rv({ at, children, style, dy = 26 }) {
  const t = aT();
  if (t < at) return null;
  const p = Easing.easeOutCubic(clamp((t - at) / 0.4, 0, 1));
  const blur = (1 - p) * 6;
  return <div style={{ opacity: p, filter: blur > 0.3 ? `blur(${blur}px)` : "none", transform: `translateY(${(1 - p) * dy}px) scale(${0.96 + 0.04 * p})`, ...style }}>{children}</div>;
}
function Slam({ at, children, size = 90, bg, color = INK, style }) {
  const t = aT();
  if (t < at) return null;
  const p = Easing.easeOutBack(clamp((t - at) / 0.3, 0, 1));
  return <div style={{ font: `700 ${size}px/1.08 'Space Grotesk', sans-serif`, letterSpacing: "-0.02em", color: bg ? CREAM : color, background: bg || "none", padding: bg ? "0.04em 0.22em 0.1em" : 0, borderRadius: bg ? 14 : 0, display: "inline-block", opacity: clamp(p * 1.5, 0, 1), transform: `scale(${0.55 + 0.45 * p}) rotate(${(1 - p) * -2}deg)`, ...style }}>{children}</div>;
}
function Num({ at, to, dur = 2, prefix = "", suffix = "", size = 150, color = OD }) {
  const t = aT();
  if (t < at) return null;
  const p = Easing.easeOutCubic(clamp((t - at) / dur, 0, 1));
  return <div style={{ font: `700 ${size}px/1 'Space Grotesk', sans-serif`, letterSpacing: "-0.03em", color, fontVariantNumeric: "tabular-nums" }}>{prefix}{Math.round(to * p).toLocaleString("de-DE")}{suffix}</div>;
}
function Pill({ at, children, color = O }) {
  const t = aT();
  if (t < at) return null;
  const p = Easing.easeOutBack(clamp((t - at) / 0.35, 0, 1));
  return <div style={{ font: "600 28px/1 'Space Grotesk', sans-serif", color: INK, background: "#fff", border: `2.5px solid ${color}`, borderRadius: 999, padding: "15px 26px", boxShadow: "0 10px 26px rgba(20,10,4,0.1)", opacity: clamp(p * 1.3, 0, 1), transform: `scale(${0.5 + 0.5 * p})` }}>{children}</div>;
}

/* Beat 1 · 0–13.7 · Abholen */
function B1() {
  const t = aT();
  const ring = clamp(t / 13.7, 0, 1);
  const R = 84, C = 2 * Math.PI * R;
  return (<Beat i={0}>
    <Rv at={0.5}><div style={{ font: "600 26px/1 'IBM Plex Mono', monospace", color: OD, letterSpacing: "0.32em", textTransform: "uppercase", marginBottom: 34 }}>Für Fahrschul-Inhaber</div></Rv>
    <Slam at={1.2} size={92}>Planbar mehr Fahrschüler.</Slam>
    <Rv at={4.5} style={{ marginTop: 24 }}><div style={{ font: "500 40px/1.4 'Space Grotesk', sans-serif", color: GRAY, maxWidth: 1100 }}>In den nächsten Minuten siehst du genau, <b style={{ color: INK }}>wie das System funktioniert</b> — danach entscheidest du selbst.</div></Rv>
    <Rv at={7.5} style={{ marginTop: 40 }}>
      <svg width="200" height="200" viewBox="0 0 200 200">
        <circle cx="100" cy="100" r={R} fill="none" stroke="rgba(20,18,16,0.1)" strokeWidth="12" />
        <circle cx="100" cy="100" r={R} fill="none" stroke={O} strokeWidth="12" strokeLinecap="round" strokeDasharray={C} strokeDashoffset={C * (1 - ring)} transform="rotate(-90 100 100)" />
        <text x="100" y="112" textAnchor="middle" style={{ font: "700 44px 'Space Grotesk', sans-serif", fill: INK }}>▶</text>
      </svg>
    </Rv>
  </Beat>);
}

/* Beat 2 · 13.7–43.9 · Problem */
function B2() {
  const t = aT();
  const fade = clamp((t - 28) / 4, 0, 1); // alte Kanäle verblassen
  return (<Beat i={1}>
    <Rv at={14.3} style={{ marginBottom: 36 }}><div style={{ font: "700 62px/1.15 'Space Grotesk', sans-serif", color: INK }}>An deiner Ausbildung liegt es <span style={{ background: O, color: CREAM, padding: "0.02em 0.16em 0.08em", borderRadius: 10 }}>nicht</span>.</div></Rv>
    <div style={{ display: "flex", gap: 40, alignItems: "center" }}>
      <Rv at={17}>
        <div style={{ position: "relative", width: 560, height: 380, background: "#fff", borderRadius: 24, boxShadow: "0 22px 56px rgba(20,10,4,0.1)", overflow: "hidden" }}>
          <svg width="560" height="380">
            {[[90, 80], [230, 150], [400, 90], [480, 250], [160, 290], [330, 320], [280, 230], [450, 170]].map((p, i) => {
              const on = t > 18 + i * 0.5;
              return <circle key={i} cx={p[0]} cy={p[1]} r={on ? 13 : 6} fill={on ? O : "rgba(20,18,16,0.15)"} opacity={on ? 0.55 + Math.sin(t * 3 + i) * 0.3 : 1} />;
            })}
          </svg>
          <div style={{ position: "absolute", bottom: 18, left: 0, right: 0, font: "600 24px/1 'IBM Plex Mono', monospace", color: GRAY, letterSpacing: "0.14em", textTransform: "uppercase" }}>Dein Einzugsgebiet · Interessenten JETZT</div>
        </div>
      </Rv>
      <div style={{ display: "flex", flexDirection: "column", gap: 18, opacity: 1 - fade * 0.75, filter: `grayscale(${fade})`, transform: `translateY(${fade * 10}px)` }}>
        <Pill at={29} color="#b0463a">✕ Flyer</Pill>
        <Pill at={30} color="#b0463a">✕ Zeitungsanzeige</Pill>
        <Pill at={31} color="#b0463a">✕ Nur Mundpropaganda</Pill>
      </div>
    </div>
    <div style={{ marginTop: 40, display: "flex", alignItems: "center", gap: 30 }}>
      <Rv at={39.5}><div style={{ fontSize: 76 }}>🧑‍🎓</div></Rv>
      <Num at={40} to={2750} dur={2.4} prefix="− " suffix=" € Umsatz" size={110} color={OD} />
    </div>
  </Beat>);
}

/* Beat 3 · 43.9–81.4 · Deep-Dive: 3 Schritte */
function Karte3({ n, title, at, active, children }) {
  const t = aT();
  const p = Easing.easeOutCubic(clamp((t - at) / 0.55, 0, 1));
  return (
    <div style={{ width: 470, borderRadius: 24, background: "#fff", padding: "30px 30px 26px", border: active ? `4px solid ${O}` : "2.5px solid rgba(20,18,16,0.12)", boxShadow: active ? "0 26px 60px rgba(255,108,75,0.22)" : "0 12px 30px rgba(20,10,4,0.07)", opacity: clamp(p * 1.2, 0, 1), transform: `translateY(${(1 - p) * 50}px) scale(${active ? 1.03 : 0.97})`, display: "flex", flexDirection: "column", alignItems: "center", gap: 14, transition: "border 300ms, box-shadow 300ms, transform 400ms" }}>
      <div style={{ font: "600 22px/1 'IBM Plex Mono', monospace", color: OD, letterSpacing: "0.24em" }}>SCHRITT {n}</div>
      <div style={{ font: "700 44px/1 'Space Grotesk', sans-serif", color: INK }}>{title}</div>
      <div style={{ height: 190, display: "flex", alignItems: "center", justifyContent: "center" }}>{children}</div>
    </div>
  );
}
function B3() {
  const t = aT();
  const sweep = ((t - 44) % 3) / 3;
  return (<Beat i={2}>
    <Slam at={44.2} size={58} bg={INK} style={{ marginBottom: 40 }}>So arbeitet das System — in 3 Schritten.</Slam>
    <div style={{ display: "flex", gap: 32 }}>
      <Karte3 n="1" title="Präzision" at={44.6} active={t < 55.7}>
        <div style={{ position: "relative", width: 190, height: 190 }}>
          {[64, 92].map(r => <div key={r} style={{ position: "absolute", left: 95 - r, top: 95 - r, width: r * 2, height: r * 2, borderRadius: "50%", border: "2px solid rgba(255,108,75,0.3)" }}></div>)}
          <div style={{ position: "absolute", left: 95, top: 95, width: 92, height: 3, background: `linear-gradient(90deg, ${O}, transparent)`, transformOrigin: "left center", transform: `rotate(${sweep * 360}deg)` }}></div>
          {[[55, -35, 1], [-70, 28, 0], [28, 62, 1], [-38, -60, 0], [78, 44, 1]].map((d, i) => <div key={i} style={{ position: "absolute", left: 95 + d[0] - 8, top: 95 + d[1] - 8, width: 16, height: 16, borderRadius: "50%", background: d[2] ? O : "rgba(20,18,16,0.18)", boxShadow: d[2] ? "0 0 14px rgba(255,108,75,0.7)" : "none" }}></div>)}
        </div>
      </Karte3>
      <Karte3 n="2" title="Überzeugung" at={55.7} active={t >= 55.7 && t < 68.7}>
        <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
          <Pill at={57}>✓ Termine in 2 Wochen</Pill>
          <Pill at={58.6}>★ 4,9 Bewertungen</Pill>
          <Pill at={60.2}>✓ B197 &amp; Automatik</Pill>
        </div>
      </Karte3>
      <Karte3 n="3" title="Einfachheit" at={68.7} active={t >= 68.7}>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
          <div style={{ font: "700 76px/1 'Space Grotesk', sans-serif", color: OD, fontVariantNumeric: "tabular-nums" }}>0:{t > 70.5 ? "47" : "00"}</div>
          <Rv at={72}><div style={{ display: "flex", alignItems: "center", gap: 12, background: PAPER, borderRadius: 14, padding: "12px 18px", border: "1px solid rgba(20,18,16,0.1)" }}>
            <div style={{ width: 40, height: 40, borderRadius: 10, background: O, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 20 }}>📩</div>
            <div style={{ textAlign: "left" }}><div style={{ font: "700 21px/1.2 'Space Grotesk', sans-serif", color: INK }}>Lena M.</div><div style={{ font: "500 15px/1.2 'IBM Plex Mono', monospace", color: OD }}>Anfrage · Klasse B</div></div>
          </div></Rv>
        </div>
      </Karte3>
    </div>
    <Rv at={77} style={{ marginTop: 34 }}><div style={{ font: "600 38px/1.3 'Space Grotesk', sans-serif", color: INK }}>Dein einziger Job: <span style={{ background: O, color: CREAM, padding: "0.02em 0.16em 0.08em", borderRadius: 10 }}>zurückrufen.</span></div></Rv>
  </Beat>);
}

/* Beat 4 · 81.4–99.8 · Checkliste */
function Check({ at, children }) {
  const t = aT();
  const p = Easing.easeOutBack(clamp((t - at) / 0.4, 0, 1));
  const done = t > at + 0.35;
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 22, background: "#fff", borderRadius: 18, padding: "22px 30px", boxShadow: "0 14px 36px rgba(20,10,4,0.09)", width: 720, textAlign: "left", opacity: clamp(p * 1.2, 0, 1), transform: `translateX(${(1 - p) * -70}px)` }}>
      <div style={{ width: 56, height: 56, borderRadius: "50%", background: done ? GRUEN : "rgba(20,18,16,0.1)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", font: "700 30px/1 'Space Grotesk', sans-serif", flex: "none", transition: "background 200ms" }}>✓</div>
      <div style={{ font: "600 36px/1.25 'Space Grotesk', sans-serif", color: INK, whiteSpace: "nowrap" }}>{children}</div>
    </div>
  );
}
function B4() {
  return (<Beat i={3}>
    <Rv at={81.9} style={{ marginBottom: 36 }}><div style={{ font: "700 60px/1.15 'Space Grotesk', sans-serif", color: INK }}>Konkret heißt das:</div></Rv>
    <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
      <Check at={83}>Setup steht in <b style={{ color: OD }}>48 Stunden</b></Check>
      <Check at={86}>Dein Aufwand: einmal <b style={{ color: OD }}>45 Minuten</b></Check>
      <Check at={89.6}>Erste Anfragen nach <b style={{ color: OD }}>3 Tagen</b></Check>
      <Check at={93.5}>Stabil: <b style={{ color: OD }}>30+ Anfragen</b> pro Monat</Check>
    </div>
  </Beat>);
}

/* Beat 5 · 99.8–126.5 · Garantie */
function B5() {
  const t = aT();
  const stampAt = 112;
  const sp = Easing.easeInCubic(clamp((t - stampAt) / 0.28, 0, 1));
  const shake = t > stampAt + 0.28 && t < stampAt + 0.7 ? Math.sin(t * 85) * 8 * (1 - (t - stampAt - 0.28) / 0.42) : 0;
  return (<Beat i={4}>
    <div style={{ transform: `translate(${shake}px, ${shake * 0.6}px)`, display: "flex", flexDirection: "column", alignItems: "center" }}>
      <Rv at={100.5} style={{ marginBottom: 58 }}><div style={{ font: "700 64px/1.12 'Space Grotesk', sans-serif", color: INK }}>Wir versprechen nicht.<br />Wir <span style={{ background: O, color: CREAM, padding: "0.02em 0.16em 0.08em", borderRadius: 12 }}>garantieren</span>.</div></Rv>
      <div style={{ position: "relative", width: 640, height: 310 }}>
        <div style={{ position: "absolute", inset: 0, background: "#fff", borderRadius: 18, boxShadow: "0 26px 60px rgba(20,10,4,0.14)", padding: "32px 40px", textAlign: "left" }}>
          <div style={{ font: "600 19px/1 'IBM Plex Mono', monospace", color: GRAY, letterSpacing: "0.2em", marginBottom: 14 }}>VEREINBARUNG · SCHWARZ AUF WEISS</div>
          {[85, 100, 72, 90].map((w, i) => <div key={i} style={{ height: 13, width: `${w}%`, background: "rgba(20,18,16,0.1)", borderRadius: 6, marginBottom: 11 }}></div>)}
          <div style={{ font: "700 33px/1.2 'Space Grotesk', sans-serif", color: INK, marginTop: 10, paddingRight: 120 }}>Mind. <span style={{ color: OD }}>30 qualifizierte Anfragen</span> / Monat</div>
        </div>
        {t > stampAt && (
          <div style={{ position: "absolute", right: -95, top: -95, width: 230, height: 230, borderRadius: "50%", border: `10px solid ${OD}`, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", background: "rgba(251,242,234,0.95)", color: OD, transform: `rotate(-13deg) scale(${3 - 2 * sp})`, opacity: sp, boxShadow: "0 20px 50px rgba(224,78,44,0.3)" }}>
            <div style={{ font: "700 70px/1 'Space Grotesk', sans-serif" }}>30+</div>
            <div style={{ font: "600 18px/1.25 'IBM Plex Mono', monospace", letterSpacing: "0.1em", textAlign: "center" }}>GARANTIERT<br />ODER 0 €</div>
          </div>
        )}
      </div>
      <div style={{ display: "flex", gap: 26, alignItems: "center", marginTop: 40 }}>
        <Slam at={119} size={78} bg={INK}>… oder du zahlst 0 €.</Slam>
        <Pill at={124.6}>Nur Fahrschulen. Nichts anderes.</Pill>
      </div>
    </div>
  </Beat>);
}

/* Beat 6 · 126.5–143.3 · Exklusivität */
function B6() {
  const t = aT();
  const pulse = 1 + Math.sin(t * 3.4) * 0.04;
  return (<Beat i={5}>
    <Rv at={127.2} style={{ marginBottom: 36 }}><div style={{ font: "700 62px/1.15 'Space Grotesk', sans-serif", color: INK }}>Eine Fahrschule pro Einzugsgebiet. <span style={{ color: OD }}>Eine.</span></div></Rv>
    <div style={{ position: "relative", width: 1150, height: 430, background: "#fff", borderRadius: 28, boxShadow: "0 26px 64px rgba(20,10,4,0.1)", overflow: "hidden" }}>
      <svg width="1150" height="430">
        {[[130, 80], [400, 190], [720, 100], [980, 250], [250, 340], [590, 360], [900, 380]].map((p, i) => <circle key={i} cx={p[0]} cy={p[1]} r="5" fill="rgba(20,18,16,0.18)" />)}
      </svg>
      <Rv at={129} style={{ position: "absolute", left: 130, top: 90 }}>
        <div style={{ width: 320, height: 240, borderRadius: "46% 54% 52% 48%", border: `6px solid ${GRUEN}`, background: "rgba(58,125,92,0.1)", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 8 }}>
          <div style={{ fontSize: 48 }}>🔒</div>
          <div style={{ font: "700 32px/1 'Space Grotesk', sans-serif", color: GRUEN, letterSpacing: "0.08em" }}>VERGEBEN</div>
        </div>
      </Rv>
      <Rv at={135} style={{ position: "absolute", right: 120, top: 80 }}>
        <div style={{ width: 370, height: 270, borderRadius: "52% 48% 46% 54%", border: `7px solid ${O}`, background: `rgba(255,108,75,${0.12 + Math.sin(t * 3.4) * 0.05})`, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 10, transform: `scale(${pulse})` }}>
          <div style={{ font: "700 42px/1 'Space Grotesk', sans-serif", color: OD }}>NOCH FREI</div>
          <div style={{ font: "600 25px/1 'Space Grotesk', sans-serif", color: INK }}>Deine Region</div>
        </div>
      </Rv>
    </div>
  </Beat>);
}

/* No-Brainer-Waage: elastisches Kippen, Münzen fallen, Karten bleiben waagerecht */
function Waage() {
  const t = aT();
  const E = Easing.easeOutElastic || Easing.easeOutBack;
  const tp = clamp((t - 149.2) / 2.4, 0, 1);
  const tilt = -9 * E(tp);
  const coins = [];
  for (let i = 0; i < 5; i++) {
    const at = 145.8 + i * 0.55;
    if (t < at) break;
    const lp = clamp((t - at) / 0.55, 0, 1);
    const y = Easing.easeInQuad(lp) * 250;
    coins.push(<div key={i} style={{ position: "absolute", left: 150 + (i % 3) * 46, top: -120 + y, width: 52, height: 52, borderRadius: "50%", background: O, border: `3px solid ${OD}`, color: CREAM, display: "flex", alignItems: "center", justifyContent: "center", font: "700 28px/1 'Space Grotesk', sans-serif", opacity: 1 - Math.pow(lp, 6), boxShadow: "0 6px 14px rgba(224,78,44,0.3)", zIndex: 5 }}>€</div>);
  }
  const thump = t > 151 && t < 151.35 ? Math.sin((t - 151) * 60) * 5 * (1 - (t - 151) / 0.35) : 0;
  return (
    <div style={{ position: "relative", width: 1000, height: 420, transform: `translateY(${thump}px)` }}>
      {coins}
      <div style={{ position: "absolute", left: "50%", bottom: 24, transform: "translateX(-50%)", width: 0, height: 0, borderLeft: "44px solid transparent", borderRight: "44px solid transparent", borderBottom: `110px solid ${INK}` }}></div>
      <div style={{ position: "absolute", left: "50%", bottom: 128, width: 30, height: 30, borderRadius: "50%", background: OD, transform: "translate(-50%, 50%)", zIndex: 4 }}></div>
      <div style={{ position: "absolute", left: "50%", bottom: 128, transform: `translateX(-50%) rotate(${tilt}deg)`, transformOrigin: "center bottom" }}>
        <div style={{ position: "relative", width: 880, height: 14, background: INK, borderRadius: 8 }}>
          <div style={{ position: "absolute", left: -20, bottom: 14, transform: `rotate(${-tilt}deg)`, transformOrigin: "center bottom" }}>
            <Rv at={144.8}><div style={{ background: "#fff", border: `4px solid ${O}`, borderRadius: 20, padding: "22px 32px", boxShadow: "0 20px 48px rgba(255,108,75,0.25)" }}>
              <div style={{ font: "700 52px/1 'Space Grotesk', sans-serif", color: OD }}>+ 2.750 €</div>
              <div style={{ font: "500 23px/1.3 'Space Grotesk', sans-serif", color: GRAY, marginTop: 6 }}>schon 1 zusätzlicher Schüler</div>
            </div></Rv>
          </div>
          <div style={{ position: "absolute", right: -20, bottom: 14, transform: `rotate(${-tilt}deg)`, transformOrigin: "center bottom" }}>
            <Rv at={152}><div style={{ background: "#fff", border: "2.5px solid rgba(20,18,16,0.15)", borderRadius: 20, padding: "22px 32px" }}>
              <div style={{ font: "700 52px/1 'Space Grotesk', sans-serif", color: INK }}>0 €</div>
              <div style={{ font: "500 23px/1.3 'Space Grotesk', sans-serif", color: GRAY, marginTop: 6 }}>dein Risiko — garantiert</div>
            </div></Rv>
          </div>
        </div>
      </div>
    </div>
  );
}

/* Beat 7 · 143.3–178.2 · No-Brainer + Louis */
function B7() {
  const t = aT();
  const louis = t > 159;
  return (<Beat i={6}>
    {!louis ? (
      <React.Fragment>
        <Rv at={143.9} style={{ marginBottom: 40 }}><div style={{ font: "700 60px/1.15 'Space Grotesk', sans-serif", color: INK }}>Rechne kurz mit:</div></Rv>
        <Waage t={t} />
        <Slam at={155.5} size={62} bg={INK} style={{ marginTop: 20 }}>Du riskierst: null.</Slam>
      </React.Fragment>
    ) : (
      <React.Fragment>
        <Rv at={159.3} style={{ marginBottom: 40 }}><div style={{ font: "700 58px/1.15 'Space Grotesk', sans-serif", color: INK }}>Dein Analyse-Call — direkt mit dem <span style={{ background: O, color: CREAM, padding: "0.02em 0.16em 0.08em", borderRadius: 10 }}>Geschäftsführer</span>.</div></Rv>
        <div style={{ display: "flex", alignItems: "center", gap: 50 }}>
          <Rv at={160}>
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 18 }}>
              <div style={{ width: 280, height: 280, borderRadius: "50%", border: `6px solid ${O}`, overflow: "hidden", boxShadow: "0 30px 70px rgba(255,108,75,0.25)", background: "#fff", position: "relative" }}>
                <image-slot id="louis-portrait" src="assets/louis.png" shape="circle" style={{ position: "absolute", inset: 0 }} placeholder="Foto von Louis hierher ziehen"></image-slot>
              </div>
              <div style={{ textAlign: "center" }}>
                <div style={{ font: "700 42px/1 'Space Grotesk', sans-serif", color: INK }}>Louis</div>
                <div style={{ font: "600 20px/1.4 'IBM Plex Mono', monospace", color: OD, letterSpacing: "0.14em", textTransform: "uppercase" }}>Geschäftsführer · Smith &amp; Victory</div>
              </div>
            </div>
          </Rv>
          <div style={{ display: "flex", flexDirection: "column", gap: 16, textAlign: "left" }}>
            <Pill at={165}>✓ Kein Callcenter, kein Vertriebler</Pill>
            <Pill at={168}>✓ 45 Min · Live-Rechnung für deine Region</Pill>
            <Pill at={172}>✓ Ehrliche Einschätzung — auch wenn's nicht passt</Pill>
          </div>
        </div>
      </React.Fragment>
    )}
  </Beat>);
}

/* Beat 8 · 178.2–193.5 · CTA + Endcard */
function B8() {
  const t = aT();
  const btnP = Easing.easeOutBack(clamp((t - 180) / 0.5, 0, 1));
  const clickAt = 188.5, clicked = t > clickAt;
  const cur = clamp((t - 185.5) / (clickAt - 185.5), 0, 1);
  const end = t > 190.5;
  const endP = Easing.easeOutCubic(clamp((t - 190.5) / 0.7, 0, 1));
  return (<Beat i={7}>
    {!end ? (
      <React.Fragment>
        <Rv at={178.7} style={{ marginBottom: 18 }}><div style={{ font: "700 70px/1.12 'Space Grotesk', sans-serif", color: INK, maxWidth: 1300 }}>Such dir jetzt deinen <span style={{ color: OD }}>Termin</span> aus.</div></Rv>
        <Rv at={181} style={{ marginBottom: 46 }}><div style={{ font: "500 34px/1.4 'Space Grotesk', sans-serif", color: GRAY }}>Die Analyse kostet dich nichts — außer der Chance, sie nicht gemacht zu haben.</div></Rv>
        <div style={{ position: "relative" }}>
          <div style={{ font: "700 44px/1 'Space Grotesk', sans-serif", color: INK, background: O, borderRadius: 999, padding: "32px 60px", display: "inline-flex", alignItems: "center", gap: 18, boxShadow: "0 24px 60px rgba(255,108,75,0.4)", opacity: btnP, transform: `scale(${(0.6 + 0.4 * btnP) * (clicked && t < clickAt + 0.25 ? 0.93 : 1)})`, transition: "transform 130ms" }}>
            Jetzt Analyse-Call buchen <span style={{ width: 52, height: 52, borderRadius: "50%", background: INK, color: O, display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 28 }}>→</span>
          </div>
          {t > 185.5 && !clicked && <div style={{ position: "absolute", left: `${28 + cur * 42}%`, top: `${130 - cur * 85}px`, fontSize: 50, transform: "rotate(-12deg)", filter: "drop-shadow(0 6px 12px rgba(0,0,0,0.25))" }}>🖱️</div>}
          {clicked && t < clickAt + 0.6 && <div style={{ position: "absolute", left: "50%", top: "50%", width: 30 + (t - clickAt) * 400, height: 30 + (t - clickAt) * 400, borderRadius: "50%", border: `5px solid ${OD}`, transform: "translate(-50%,-50%)", opacity: 1 - (t - clickAt) / 0.6 }}></div>}
        </div>
      </React.Fragment>
    ) : (
      <div style={{ opacity: endP, transform: `scale(${0.96 + 0.04 * endP})`, display: "flex", flexDirection: "column", alignItems: "center", gap: 30 }}>
        <img src="assets/logo-ink.png" style={{ height: 100 }} />
        <div style={{ font: "700 62px/1.15 'Space Grotesk', sans-serif", color: INK, textAlign: "center" }}>30+ Anfragen pro Monat.<br /><span style={{ background: O, color: CREAM, padding: "0.02em 0.18em 0.08em", borderRadius: 14 }}>Garantiert.</span></div>
        <div style={{ fontSize: 56, transform: `translateY(${Math.sin(t * 4) * 10}px)` }}>👇</div>
      </div>
    )}
  </Beat>);
}

function VSLVideo() {
  const t = aTRaw();
  let bs = 0; for (let i = 0; i < B.length; i++) if (B[i] <= t) bs = B[i];
  const kick = window.Easing.easeOutCubic(Math.max(0, Math.min(1, (t - bs) / 0.55)));
  const kScale = 1.045 - 0.045 * kick;
  return (
    <div style={{ position: "absolute", inset: 0, background: PAPER, overflow: "hidden", fontFamily: "'Space Grotesk', sans-serif", transform: `scale(${kScale})`, willChange: "transform" }}>
      <div style={{ position: "absolute", inset: 0, backgroundImage: "radial-gradient(rgba(20,18,16,0.05) 1.5px, transparent 1.5px)", backgroundSize: "44px 44px" }}></div>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(90% 70% at 50% 0%, rgba(255,108,75,0.09), transparent 60%)" }}></div>
      <VAudio src="assets/vsl-final.mp3" />
      <Chrome />
      <Ambient />
      <BeatFlash />
      <B1 /><B2 /><B3 /><B4 /><B5 /><B6 /><B7 /><B8 />
    </div>
  );
}
Object.assign(window, { VSLVideo, VSL_DUR });
