/* EIPME KI-Spot — 1200×1200, ~14.4s, comic style. Gleiche Figur/Werkstatt wie Cyber-Spot.
   Reads Stage/Sprite/useTime/useSprite/Easing/interpolate/clamp from window (animations.jsx). */

const { Stage, Sprite, useTime, useSprite, Easing, interpolate, clamp } = window;
const R = React;

/* ---------- palette (EIPME tokens, literal values) ---------- */
const C = {
  blue: "#1F5EFF", blue600: "#0A47E0", blue300: "#8AA8FF", blue100: "#D9E4FF", blue50: "#EEF3FF",
  orange: "#FF7A1A", orange300: "#FFA15C", orange100: "#FFDEC2",
  red: "#FF3B47", red600: "#E51F2D", red100: "#FFD6DA",
  ink: "#0C0E13", ink700: "#1C202A", ink500: "#3D434F", ink300: "#858B98", ink100: "#D6D9DF",
  paper: "#FAFBFC", white: "#FFFFFF", sky: "#EEF3FF",
  skin: "#FFD9B8", skinShade: "#F2BE93", cheek: "#FFB08A",
};
const INK = C.ink;
const GEIST = "'Geist', system-ui, sans-serif";
const MONO = "'Geist Mono', ui-monospace, monospace";

/* ============================================================
   KOPF — shared comic head, origin = neck-base center.
   expression: grin | smile | wink | tired | talk | relaxed | shock
   ============================================================ */
function Kopf({ expression = "grin", blink = 0, talkPhase = 0 }) {
  const shocked = expression === "shock";
  let eyes;
  if (expression === "tired") {
    eyes = (
      <g>
        <path d="M 139 116 q 10 8 22 6" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />
        <path d="M 197 122 q 12 2 22 -6" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />
        <circle cx="151" cy="127" r="5.5" fill={INK} />
        <circle cx="207" cy="127" r="5.5" fill={INK} />
        <path d="M 142 140 q 9 5 18 1" stroke={C.skinShade} strokeWidth="5" fill="none" strokeLinecap="round" />
        <path d="M 198 141 q 9 4 18 0" stroke={C.skinShade} strokeWidth="5" fill="none" strokeLinecap="round" />
      </g>
    );
  } else if (expression === "relaxed") {
    eyes = (
      <g>
        <path d="M 140 120 q 10 -10 20 0" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />
        <path d="M 198 120 q 10 -10 20 0" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />
      </g>
    );
  } else if (expression === "wink") {
    eyes = (
      <g>
        <circle cx="150" cy="118" r="9" fill={INK} />
        <path d="M 196 118 q 12 10 24 0" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />
      </g>
    );
  } else if (shocked) {
    eyes = (
      <g>
        <circle cx="148" cy="130" r="20" fill={C.white} stroke={INK} strokeWidth="6" />
        <circle cx="151" cy="133" r="7" fill={INK} />
        <circle cx="210" cy="130" r="20" fill={C.white} stroke={INK} strokeWidth="6" />
        <circle cx="207" cy="133" r="7" fill={INK} />
      </g>
    );
  } else {
    const closed = blink > 0.5;
    eyes = closed ? (
      <g>
        <path d="M 141 120 q 9 6 18 0" stroke={INK} strokeWidth="6" fill="none" strokeLinecap="round" />
        <path d="M 199 120 q 9 6 18 0" stroke={INK} strokeWidth="6" fill="none" strokeLinecap="round" />
      </g>
    ) : (
      <g>
        <circle cx="150" cy="118" r="9" fill={INK} />
        <circle cx="208" cy="118" r="9" fill={INK} />
      </g>
    );
  }

  let mouth;
  if (expression === "tired") {
    mouth = <path d="M 156 166 q 23 -12 46 0" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />;
  } else if (expression === "talk") {
    const open = 5 + 11 * Math.abs(Math.sin(talkPhase));
    mouth = <ellipse cx="179" cy="162" rx="13" ry={open} fill={INK} />;
  } else if (expression === "smile" || expression === "relaxed") {
    mouth = <path d="M 150 152 q 29 26 58 0" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />;
  } else if (shocked) {
    mouth = <ellipse cx="179" cy="172" rx="17" ry="21" fill={INK} />;
  } else {
    mouth = <path d="M 146 148 q 33 34 66 0 z" fill={C.white} stroke={INK} strokeWidth="6" strokeLinejoin="round" />;
  }

  const brows =
    expression === "tired" ? (
      <g>
        <path d="M 138 102 q 15 -3 28 2" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />
        <path d="M 196 104 q 13 -5 28 -2" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />
      </g>
    ) : shocked ? (
      <g>
        <path d="M 132 100 q 16 -14 34 -6" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />
        <path d="M 192 94 q 18 -8 34 6" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />
      </g>
    ) : (
      <g>
        <path d="M 136 98 q 15 -8 30 -3" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />
        <path d="M 194 95 q 15 -5 30 3" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />
      </g>
    );

  return (
    <g transform="translate(-179 -282)">
      <rect x="160" y="248" width="38" height="38" rx="12" fill={C.skin} stroke={INK} strokeWidth="6" />
      <path d="M 106 130 q 0 -74 73 -74 q 73 0 73 74 l 0 60 q 0 62 -73 62 q -73 0 -73 -62 z" fill={C.skin} stroke={INK} strokeWidth="7" />
      <circle cx="103" cy="160" r="15" fill={C.skin} stroke={INK} strokeWidth="6" />
      <circle cx="255" cy="160" r="15" fill={C.skin} stroke={INK} strokeWidth="6" />
      {!shocked && <circle cx="128" cy="146" r="9" fill={C.cheek} opacity="0.55" />}
      {!shocked && <circle cx="230" cy="146" r="9" fill={C.cheek} opacity="0.55" />}
      {brows}
      {eyes}
      <ellipse cx="179" cy={shocked ? 148 : 136} rx="15" ry="12" fill={C.skinShade} stroke={INK} strokeWidth="6" />
      {mouth}
      {/* Mütze */}
      <g>
        <path d="M 104 106 q 0 -62 75 -62 q 75 0 75 62 l 0 6 q -75 -18 -150 0 z" fill={C.blue} stroke={INK} strokeWidth="7" strokeLinejoin="round" />
        <path d="M 96 108 q 83 -22 166 0 q 6 2 4 10 q -2 7 -10 6 q -77 -20 -154 0 q -8 1 -10 -6 q -2 -8 4 -10 z" fill={C.orange} stroke={INK} strokeWidth="6" strokeLinejoin="round" />
        <circle cx="179" cy="76" r="15" fill={C.white} stroke={INK} strokeWidth="5" />
        <text x="179" y="83" textAnchor="middle" fontFamily={GEIST} fontWeight="800" fontStyle="italic" fontSize="20" fill={C.blue}>E</text>
      </g>
    </g>
  );
}

/* ============================================================
   STEHENDE FIGUR — für Outro (pose 'wave'), 360×520 viewBox.
   ============================================================ */
function StandHandwerker({ expression = "grin", blink = 0, bob = 0, waveA = 0 }) {
  return (
    <svg viewBox="0 0 360 520" style={{ width: "100%", height: "100%", display: "block", overflow: "visible" }}>
      <g>
        <rect x="126" y="440" width="40" height="56" rx="14" fill={C.ink700} stroke={INK} strokeWidth="6" />
        <rect x="192" y="440" width="40" height="56" rx="14" fill={C.ink700} stroke={INK} strokeWidth="6" />
        <path d="M 116 496 h 58 a 8 8 0 0 1 8 8 v 6 h -74 v -6 a 8 8 0 0 1 8 -8 z" fill={INK} />
        <path d="M 184 496 h 58 a 8 8 0 0 1 8 8 v 6 h -74 v -6 a 8 8 0 0 1 8 -8 z" fill={INK} />
      </g>
      <g>
        <path d="M 96 290 q 83 -26 166 0 l 6 160 q -89 18 -178 0 z" fill={C.orange300} stroke={INK} strokeWidth="7" strokeLinejoin="round" />
        <path d="M 106 336 q 73 -20 146 0 l 4 114 q -77 16 -154 0 z" fill={C.blue} stroke={INK} strokeWidth="7" strokeLinejoin="round" />
        <rect x="138" y="300" width="82" height="72" rx="12" fill={C.blue} stroke={INK} strokeWidth="7" />
        <path d="M 118 292 l 30 24" stroke={C.blue} strokeWidth="16" strokeLinecap="round" />
        <path d="M 240 292 l -30 24" stroke={C.blue} strokeWidth="16" strokeLinecap="round" />
        <circle cx="150" cy="314" r="7" fill={C.orange} stroke={INK} strokeWidth="5" />
        <circle cx="208" cy="314" r="7" fill={C.orange} stroke={INK} strokeWidth="5" />
        <rect x="158" y="328" width="42" height="30" rx="8" fill={C.blue600} stroke={INK} strokeWidth="5" />
        <rect x="170" y="318" width="8" height="22" rx="3" fill={C.orange} stroke={INK} strokeWidth="4" />
      </g>
      {/* linker Arm entspannt, rechter winkt */}
      <g>
        <path d="M 100 322 q -34 24 -40 66" stroke={C.blue600} strokeWidth="30" fill="none" strokeLinecap="round" />
        <circle cx="58" cy="392" r="19" fill={C.skin} stroke={INK} strokeWidth="6" />
        <g transform={`rotate(${-waveA} 258 330)`}>
          <path d="M 258 330 q 44 -34 58 -96" stroke={C.blue600} strokeWidth="30" fill="none" strokeLinecap="round" />
          <circle cx="318" cy="226" r="20" fill={C.skin} stroke={INK} strokeWidth="6" />
        </g>
      </g>
      <g transform={`translate(179 ${282 + bob})`}>
        <Kopf expression={expression} blink={blink} />
      </g>
    </svg>
  );
}

/* ============================================================
   INNENRAUM — Werkstatt von innen, 1200×1200.
   sky: 'night' | 'day' — Uhr, Fenster, Pegboard, Lampe, Tisch,
   Papierstapel (stackP skaliert), sitzende Figur.
   ============================================================ */
function Stapel({ x, w, h, p, t, seed }) {
  const n = Math.max(2, Math.round(h / 12));
  const sheets = [];
  for (let i = 0; i < n; i++) {
    sheets.push(
      <rect key={i} x={x - w / 2} y={770 - 11 * (i + 1)} width={w} height="10" rx="3"
        fill={C.white} stroke={INK} strokeWidth="4"
        transform={`rotate(${((i * 37 + seed * 13) % 5) - 2} ${x} ${770 - 11 * i})`} />
    );
  }
  const wob = Math.sin(t * 2 + seed) * 0.9 * p;
  return (
    <g transform={`rotate(${wob} ${x} 770) translate(0 0) scale(1 ${Math.max(0.06, p)})`} style={{ transformOrigin: `${x}px 770px`, transformBox: "view-box" }}>
      {sheets}
      <g stroke={C.ink300} strokeWidth="4" strokeLinecap="round">
        <line x1={x - w / 2 + 14} y1={770 - 11 * n - 0} x2={x + w / 2 - 26} y2={770 - 11 * n - 0} opacity="0" />
      </g>
    </g>
  );
}

function FlySheet({ x0, y0, dir, p }) {
  if (p <= 0) return null;
  const f = Easing.easeOutCubic(clamp(p, 0, 1));
  const dx = dir * (120 + 180 * f);
  const dy = -160 * f + 330 * f * f;
  return (
    <g transform={`translate(${x0 + dx} ${y0 + dy}) rotate(${dir * 210 * f})`} opacity={1 - Math.max(0, p - 0.65) / 0.35}>
      <rect x="-34" y="-44" width="68" height="88" rx="6" fill={C.white} stroke={INK} strokeWidth="5" />
      <line x1="-18" y1="-20" x2="18" y2="-20" stroke={C.ink300} strokeWidth="4" strokeLinecap="round" />
      <line x1="-18" y1="0" x2="10" y2="0" stroke={C.ink300} strokeWidth="4" strokeLinecap="round" />
    </g>
  );
}

function SitzChar({ expression, blink = 0, talkPhase = 0, bob = 0, slumpP = 0, leanP = 0, armPose = "table", phoneUpP = 0 }) {
  const lean = -9 * leanP;
  const phoneRot = 76 * (1 - Easing.easeOutBack(clamp(phoneUpP, 0, 1)));
  let arms;
  if (armPose === "phone") {
    arms = (
      <g>
        <path d="M -95 -168 Q -190 -90 -170 -16" stroke={C.blue600} strokeWidth="30" fill="none" strokeLinecap="round" />
        <circle cx="-170" cy="-16" r="18" fill={C.skin} stroke={INK} strokeWidth="6" />
        <g transform={`translate(95 -168) rotate(${phoneRot})`}>
          <path d="M 0 0 Q 70 10 108 -96" stroke={C.blue600} strokeWidth="30" fill="none" strokeLinecap="round" />
          <circle cx="108" cy="-96" r="19" fill={C.skin} stroke={INK} strokeWidth="6" />
          <g transform="translate(118 -138) rotate(7)" opacity={phoneUpP > 0.05 ? 1 : 0}>
            <rect x="-30" y="-52" width="60" height="104" rx="14" fill={C.ink700} stroke={INK} strokeWidth="7" />
            <rect x="-21" y="-41" width="42" height="76" rx="7" fill={C.blue50} />
            <circle cx="0" cy="44" r="4" fill={C.ink300} />
          </g>
        </g>
      </g>
    );
  } else if (armPose === "lean") {
    arms = (
      <g>
        <path d="M -95 -168 Q -178 -226 -116 -290" stroke={C.blue600} strokeWidth="30" fill="none" strokeLinecap="round" />
        <path d="M 95 -168 Q 178 -226 116 -290" stroke={C.blue600} strokeWidth="30" fill="none" strokeLinecap="round" />
        <circle cx="-112" cy="-294" r="19" fill={C.skin} stroke={INK} strokeWidth="6" />
        <circle cx="112" cy="-294" r="19" fill={C.skin} stroke={INK} strokeWidth="6" />
      </g>
    );
  } else {
    arms = (
      <g>
        <path d="M -95 -168 Q -190 -90 -170 -16" stroke={C.blue600} strokeWidth="30" fill="none" strokeLinecap="round" />
        <path d="M 95 -168 Q 190 -90 170 -16" stroke={C.blue600} strokeWidth="30" fill="none" strokeLinecap="round" />
        <circle cx="-170" cy="-16" r="18" fill={C.skin} stroke={INK} strokeWidth="6" />
        <circle cx="170" cy="-16" r="18" fill={C.skin} stroke={INK} strokeWidth="6" />
      </g>
    );
  }
  return { lean, arms };
}

function Innenraum({ sky = "night", clockH = 275, clockM = 60, stackP = 1, floorPaperO = 1, wobT = 0, char, sheets = null }) {
  const night = sky === "night";
  const wall = night ? "#DCE4F6" : C.blue50;
  const floor = night ? "#C6CBD8" : C.ink100;
  const { lean, arms } = SitzChar(char);
  const headTilt = 7 * (char.slumpP || 0) - 3 * (char.leanP || 0);
  return (
    <svg viewBox="0 0 1200 1200" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
      {/* Wand + Boden */}
      <rect width="1200" height="1200" fill={wall} />
      <rect x="0" y="950" width="1200" height="250" fill={floor} />
      <line x1="0" y1="950" x2="1200" y2="950" stroke={INK} strokeWidth="8" />

      {/* Fenster */}
      <g>
        <rect x="800" y="210" width="290" height="250" rx="10" fill={night ? C.ink700 : C.sky} stroke={INK} strokeWidth="9" />
        {night ? (
          <g>
            <path d="M 908 262 a 30 30 0 1 0 26 46 a 24 24 0 1 1 -26 -46 z" fill={C.white} opacity="0.92" />
            <circle cx="856" cy="330" r="4" fill={C.white} opacity="0.8" />
            <circle cx="1010" cy="292" r="4" fill={C.white} opacity="0.8" />
            <circle cx="960" cy="392" r="3.5" fill={C.white} opacity="0.7" />
          </g>
        ) : (
          <g>
            <circle cx="890" cy="300" r="32" fill={C.orange} stroke={INK} strokeWidth="6" />
            <g stroke={C.orange} strokeWidth="6" strokeLinecap="round">
              <line x1="890" y1="248" x2="890" y2="232" /><line x1="890" y1="352" x2="890" y2="368" />
              <line x1="838" y1="300" x2="822" y2="300" /><line x1="942" y1="300" x2="958" y2="300" />
              <line x1="853" y1="263" x2="842" y2="252" /><line x1="927" y1="337" x2="938" y2="348" />
              <line x1="853" y1="337" x2="842" y2="348" /><line x1="927" y1="263" x2="938" y2="252" />
            </g>
            <g fill={C.white} stroke={INK} strokeWidth="5">
              <ellipse cx="1000" cy="386" rx="44" ry="17" />
              <ellipse cx="1040" cy="376" rx="28" ry="13" />
            </g>
          </g>
        )}
        <line x1="800" y1="335" x2="1090" y2="335" stroke={INK} strokeWidth="7" />
        <line x1="945" y1="210" x2="945" y2="460" stroke={INK} strokeWidth="7" />
      </g>

      {/* Pegboard mit Werkzeug */}
      <g>
        <rect x="100" y="240" width="240" height="180" rx="14" fill={C.white} stroke={INK} strokeWidth="7" />
        <g fill={C.ink100}>
          <circle cx="130" cy="268" r="4" /><circle cx="170" cy="268" r="4" /><circle cx="210" cy="268" r="4" /><circle cx="250" cy="268" r="4" /><circle cx="290" cy="268" r="4" />
          <circle cx="130" cy="392" r="4" /><circle cx="310" cy="330" r="4" />
        </g>
        {/* Hammer */}
        <g transform="rotate(-10 165 330)">
          <rect x="158" y="300" width="14" height="86" rx="6" fill={C.orange300} stroke={INK} strokeWidth="5" />
          <rect x="136" y="284" width="58" height="26" rx="8" fill={C.ink700} stroke={INK} strokeWidth="5" />
        </g>
        {/* Schraubenschlüssel */}
        <g transform="rotate(14 265 330)">
          <rect x="259" y="296" width="12" height="80" rx="6" fill={C.ink300} stroke={INK} strokeWidth="5" />
          <circle cx="265" cy="292" r="16" fill="none" stroke={C.ink300} strokeWidth="10" />
          <circle cx="265" cy="292" r="16" fill="none" stroke={INK} strokeWidth="4" />
        </g>
      </g>

      {/* Uhr */}
      <g>
        <circle cx="470" cy="204" r="62" fill={C.white} stroke={INK} strokeWidth="9" />
        <g stroke={INK} strokeWidth="6" strokeLinecap="round">
          <line x1="470" y1="152" x2="470" y2="164" /><line x1="470" y1="244" x2="470" y2="256" />
          <line x1="418" y1="204" x2="430" y2="204" /><line x1="510" y1="204" x2="522" y2="204" />
        </g>
        <g transform={`rotate(${clockH} 470 204)`}>
          <line x1="470" y1="204" x2="470" y2="172" stroke={INK} strokeWidth="9" strokeLinecap="round" />
        </g>
        <g transform={`rotate(${clockM} 470 204)`}>
          <line x1="470" y1="204" x2="470" y2="160" stroke={C.blue600} strokeWidth="7" strokeLinecap="round" />
        </g>
        <circle cx="470" cy="204" r="7" fill={C.orange} stroke={INK} strokeWidth="4" />
      </g>

      {/* Lampe */}
      <g>
        <line x1="600" y1="0" x2="600" y2="172" stroke={INK} strokeWidth="7" />
        <path d="M 546 214 a 54 40 0 0 1 108 0 z" fill={C.blue600} stroke={INK} strokeWidth="7" strokeLinejoin="round" />
        <circle cx="600" cy="216" r="11" fill={C.orange} stroke={INK} strokeWidth="5" />
        {night && <path d="M 552 218 L 360 950 L 840 950 L 648 218 z" fill={C.orange100} opacity="0.30" />}
      </g>

      {/* Stuhllehne */}
      <rect x="478" y="560" width="244" height="230" rx="22" fill={C.ink700} stroke={INK} strokeWidth="8" />

      {/* Figur (Torso + Kopf) */}
      <g transform="translate(600 770)">
        <g transform={`rotate(${lean} 0 20)`}>
          <path d="M -106 40 q -6 -250 106 -250 q 112 0 106 250 z" fill={C.orange300} stroke={INK} strokeWidth="7" strokeLinejoin="round" />
          <path d="M -50 -172 l -40 -34" stroke={C.blue} strokeWidth="15" strokeLinecap="round" />
          <path d="M 50 -172 l 40 -34" stroke={C.blue} strokeWidth="15" strokeLinecap="round" />
          <rect x="-52" y="-180" width="104" height="200" rx="14" fill={C.blue} stroke={INK} strokeWidth="7" />
          <circle cx="-34" cy="-160" r="7" fill={C.orange} stroke={INK} strokeWidth="5" />
          <circle cx="34" cy="-160" r="7" fill={C.orange} stroke={INK} strokeWidth="5" />
          <rect x="-28" y="-128" width="56" height="42" rx="9" fill={C.blue600} stroke={INK} strokeWidth="5" />
          <rect x="-16" y="-140" width="9" height="24" rx="4" fill={C.orange} stroke={INK} strokeWidth="4" />
          <g transform={`translate(0 ${-216 + 8 * (char.slumpP || 0) + (char.bob || 0)}) scale(1.12) rotate(${headTilt})`}>
            <Kopf expression={char.expression} blink={char.blink} talkPhase={char.talkPhase} />
          </g>
        </g>
      </g>

      {/* Tisch */}
      <rect x="200" y="796" width="800" height="144" fill={C.orange300} stroke={INK} strokeWidth="8" />
      <rect x="200" y="796" width="800" height="144" fill="rgba(12,14,19,0.10)" />
      <rect x="160" y="768" width="880" height="30" rx="10" fill={C.orange300} stroke={INK} strokeWidth="8" />

      {/* Papierstapel */}
      <Stapel x={262} w={150} h={190} p={stackP} t={wobT} seed={1} />
      <Stapel x={392} w={124} h={122} p={stackP} t={wobT} seed={2} />
      <Stapel x={846} w={150} h={228} p={stackP} t={wobT} seed={3} />
      <Stapel x={982} w={116} h={132} p={stackP} t={wobT} seed={4} />
      {/* lose Blätter am Boden */}
      <g opacity={floorPaperO}>
        <rect x="268" y="990" width="86" height="62" rx="6" fill={C.white} stroke={INK} strokeWidth="5" transform="rotate(18 310 1020)" />
        <rect x="920" y="1010" width="86" height="62" rx="6" fill={C.white} stroke={INK} strokeWidth="5" transform="rotate(-14 962 1040)" />
      </g>
      {sheets}

      {/* Arme (vor dem Tisch) */}
      <g transform="translate(600 770)">
        <g transform={`rotate(${lean} 0 20)`}>{arms}</g>
      </g>
    </svg>
  );
}

/* ---------- Sprechblase ---------- */
function SpeechBubble({ x, y, w, pop, text, tailX = 64, fontSize = 54 }) {
  const s = Easing.easeOutBack(clamp(pop, 0, 1));
  return (
    <div style={{ position: "absolute", left: x, top: y, width: w, transform: `scale(${s})`, transformOrigin: `${tailX + 30}px 100%`, opacity: clamp(pop * 2, 0, 1) }}>
      <div style={{ position: "relative", background: C.white, border: `7px solid ${INK}`, borderRadius: 36, padding: "28px 38px", boxShadow: "0 12px 0 rgba(12,14,19,0.12)" }}>
        <div style={{ fontFamily: GEIST, fontWeight: 800, fontStyle: "italic", fontSize, lineHeight: 1.08, letterSpacing: "-0.02em", color: INK, textWrap: "balance" }}>{text}</div>
        <svg viewBox="0 0 60 52" style={{ position: "absolute", left: tailX, bottom: -46, width: 60, height: 52 }}>
          <path d="M 6 2 q 10 30 42 46 q -30 2 -46 -14 z" fill={C.white} stroke={INK} strokeWidth="7" strokeLinejoin="round" />
          <rect x="2" y="-4" width="56" height="10" fill={C.white} />
        </svg>
      </div>
    </div>
  );
}

/* ---------- KI-Orb — freundlicher Assistent ---------- */
function Orb({ pop, t, size = 130 }) {
  const s = Easing.easeOutBack(clamp(pop, 0, 1));
  if (s <= 0) return null;
  const bobY = Math.sin(t * 2.4) * 8;
  const blinkO = (t % 2.3) > 2.16 ? 1 : 0;
  return (
    <div style={{ width: size, height: size, transform: `translateY(${bobY}px) scale(${s})`, transformOrigin: "50% 50%", filter: "drop-shadow(0 0 26px rgba(31,94,255,0.55))" }}>
      <svg viewBox="0 0 120 120" style={{ width: "100%", height: "100%", overflow: "visible", display: "block" }}>
        <defs>
          <radialGradient id="ki-orb-grad" cx="0.38" cy="0.32" r="0.85">
            <stop offset="0" stopColor="#FFFFFF" />
            <stop offset="0.28" stopColor="#D9E4FF" />
            <stop offset="0.72" stopColor="#1F5EFF" />
            <stop offset="1" stopColor="#0A47E0" />
          </radialGradient>
        </defs>
        <g transform={`rotate(${t * 46} 60 60)`}>
          <path d="M 60 -8 l 3 8 l 8 3 l -8 3 l -3 8 l -3 -8 l -8 -3 l 8 -3 z" fill={C.orange} />
          <path d="M 60 111 l 2.4 6 l 6 2.4 l -6 2.4 l -2.4 6 l -2.4 -6 l -6 -2.4 l 6 -2.4 z" fill={C.blue300} />
        </g>
        <circle cx="60" cy="60" r="50" fill="url(#ki-orb-grad)" stroke={INK} strokeWidth="6" />
        <circle cx="60" cy="60" r="43" fill="none" stroke="#FF7A1A" strokeWidth="3.5" opacity="0.85" strokeDasharray="10 14" strokeLinecap="round" />
        <path d="M 26 44 a 40 40 0 0 1 30 -26" stroke="rgba(255,255,255,0.85)" strokeWidth="8" fill="none" strokeLinecap="round" />
        {blinkO ? (
          <g stroke={C.white} strokeWidth="5" fill="none" strokeLinecap="round">
            <path d="M 40 58 q 6 4 12 0" /><path d="M 68 58 q 6 4 12 0" />
          </g>
        ) : (
          <g fill={C.white} stroke={C.blue600} strokeWidth="2">
            <circle cx="46" cy="57" r="6.5" /><circle cx="74" cy="57" r="6.5" />
          </g>
        )}
        <path d="M 47 72 q 13 12 26 0" stroke={C.white} strokeWidth="5.5" fill="none" strokeLinecap="round" />
      </svg>
    </div>
  );
}

function Sparkle({ x, y, p, size = 26, color = C.orange }) {
  const lp = clamp(p, 0, 1);
  if (lp <= 0) return null;
  const s = Easing.easeOutBack(Math.min(1, lp * 1.6));
  const o = 1 - Math.max(0, lp - 0.6) / 0.4;
  return (
    <g transform={`translate(${x} ${y}) rotate(${lp * 80}) scale(${s * size / 24})`} opacity={o}>
      <path d="M 0 -12 L 3 -3 L 12 0 L 3 3 L 0 12 L -3 3 L -12 0 L -3 -3 Z" fill={color} stroke={INK} strokeWidth="2.5" strokeLinejoin="round" />
    </g>
  );
}

/* ---------- Angebot-Dokument ---------- */
function AngebotDoc({ x, y, rot, scale, typeP }) {
  const widths = [88, 72, 82, 58];
  return (
    <div style={{ position: "absolute", left: x - 160, top: y - 205, width: 320, height: 410, transform: `rotate(${rot}deg) scale(${scale})`, transformOrigin: "50% 50%" }}>
      <div style={{ position: "relative", width: "100%", height: "100%", background: C.white, border: `7px solid ${INK}`, borderRadius: 20, boxShadow: "0 16px 0 rgba(12,14,19,0.14)", padding: "24px 26px", display: "flex", flexDirection: "column", gap: 16, boxSizing: "border-box" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div style={{ fontFamily: MONO, fontWeight: 500, fontSize: 24, letterSpacing: "0.16em", textTransform: "uppercase", color: C.blue }}>Angebot</div>
          <div style={{ width: 34, height: 34, borderRadius: 9, border: `4px solid ${INK}`, background: "linear-gradient(135deg,#1F5EFF,#FF7A1A)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: GEIST, fontWeight: 800, fontStyle: "italic", fontSize: 20, color: C.white }}>E</div>
        </div>
        <div style={{ height: 4, background: `linear-gradient(90deg,${C.blue},${C.orange})`, borderRadius: 999 }} />
        <div style={{ display: "flex", flexDirection: "column", gap: 15, marginTop: 4 }}>
          {widths.map((w, i) => {
            const lp = Easing.easeOutCubic(clamp((typeP - i * 0.16) / 0.2, 0, 1));
            return <div key={i} style={{ height: 15, width: w + "%", borderRadius: 8, background: C.ink100, transform: `scaleX(${lp})`, transformOrigin: "0 50%" }} />;
          })}
        </div>
        <div style={{ marginTop: "auto", background: C.orange100, border: `4px solid ${INK}`, borderRadius: 12, padding: "10px 14px", display: "flex", alignItems: "center", justifyContent: "space-between", opacity: clamp((typeP - 0.72) / 0.2, 0, 1) }}>
          <div style={{ fontFamily: MONO, fontWeight: 500, fontSize: 17, letterSpacing: "0.14em", textTransform: "uppercase", color: INK }}>Summe</div>
          <div style={{ height: 13, width: 84, borderRadius: 7, background: C.ink300 }} />
        </div>
        <div style={{ position: "absolute", right: -20, bottom: -20, width: 62, height: 62, borderRadius: "50%", background: C.orange, border: `6px solid ${INK}`, display: "flex", alignItems: "center", justifyContent: "center", transform: `scale(${Easing.easeOutBack(clamp((typeP - 0.88) / 0.14, 0, 1))})` }}>
          <svg viewBox="0 0 24 24" style={{ width: 34, height: 34 }}><path d="M 5 12.5 l 5 5 l 9 -11" fill="none" stroke={C.white} strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   SZENE 1+2 — Abends am Tisch → KI-Orb + Handy + Angebot fliegt.
   0 … 6.6 (lokal)
   ============================================================ */
function SceneAbend() {
  const { localTime: lt } = useSprite();
  const TT = [0, 3.0, 3.2, 3.75, 4.9, 5.5, 6.6];
  const sc = interpolate(TT, [1.02, 1.1, 1.1, 1.3, 1.3, 1.16, 1.14], Easing.easeInOutCubic)(lt);
  const cx = interpolate(TT, [0, 8, 8, 50, 50, 28, 26], Easing.easeInOutCubic)(lt);
  const cy = interpolate(TT, [8, 20, 20, -22, -22, 4, 6], Easing.easeInOutCubic)(lt);

  const orbPop = clamp((lt - 3.3) / 0.4, 0, 1);
  const phoneUpP = clamp((lt - 3.5) / 0.35, 0, 1);
  const talking = lt > 3.9 && lt < 4.85;
  const expression = lt < 3.35 ? "tired" : lt < 3.9 ? "smile" : lt < 4.85 ? "talk" : lt > 5.8 && lt < 6.35 ? "wink" : "grin";
  const blink = (lt > 1.5 && lt < 1.72) || (lt > 2.7 && lt < 2.9) || (lt > 5.2 && lt < 5.36) ? 1 : 0;
  const hop = -12 * Easing.easeOutBack(clamp((lt - 3.32) / 0.3, 0, 1)) * (1 - clamp((lt - 3.75) / 0.35, 0, 1));
  const bob = Math.sin(lt * 1.7) * 4 + hop;
  const slumpP = 1 - Easing.easeInOutCubic(clamp((lt - 3.3) / 0.5, 0, 1));

  const bubblePop = clamp((lt - 0.4) / 0.5, 0, 1) * (lt < 2.85 ? 1 : clamp((3.1 - lt) / 0.25, 0, 1));

  const flyP = Easing.easeInOutCubic(clamp((lt - 4.15) / 0.85, 0, 1));
  const docX = 790 + (400 - 790) * flyP;
  const docY = 500 + (430 - 500) * flyP - Math.sin(flyP * Math.PI) * 190;
  const docRot = 16 - 20 * flyP;
  const docS = interpolate([0, 0.6, 1], [0.15, 0.4, 1], Easing.easeInOutCubic)(flyP);
  const typeP = clamp((lt - 5.0) / 1.2, 0, 1);

  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, transform: `scale(${sc}) translate(${-cx}px, ${-cy}px)`, transformOrigin: "600px 600px" }}>
        <Innenraum
          sky="night" clockH={275} clockM={60} stackP={1} floorPaperO={1} wobT={lt}
          char={{ expression, blink, talkPhase: talking ? lt * 11 : 0, bob, slumpP, leanP: 0, armPose: lt < 3.45 ? "table" : "phone", phoneUpP }}
        />

        {/* Sprechblase S1 — rechts oben, Uhr bleibt sichtbar */}
        {lt < 3.2 && <SpeechBubble x={620} y={116} w={460} pop={bubblePop} tailX={64} text={"So viel Papierkram…"} />}

        {/* KI-Orb */}
        {lt >= 3.25 && (
          <div style={{ position: "absolute", left: 700 - 62, top: 188 - 62 }}>
            <Orb pop={orbPop} t={lt} size={124} />
          </div>
        )}

        {/* Sprechwellen Richtung Handy */}
        {talking && (
          <svg viewBox="0 0 170 90" style={{ position: "absolute", left: 645, top: 412, width: 170, height: 90, overflow: "visible" }}>
            {[0, 1, 2].map((i) => (
              <path key={i} d="M 10 14 q 20 31 0 62" fill="none" stroke={INK} strokeWidth="6" strokeLinecap="round"
                transform={`translate(${i * 36} 0) scale(${0.62 + i * 0.19})`}
                opacity={0.15 + 0.85 * Math.max(0, Math.sin(lt * 7.5 - i * 1.1))} />
            ))}
          </svg>
        )}

        {/* Angebot fliegt aus dem Handy */}
        {lt >= 4.15 && <AngebotDoc x={docX} y={docY} rot={docRot} scale={docS} typeP={typeP} />}

        {/* Funkeln bei Landung */}
        {lt >= 5.0 && (
          <svg viewBox="0 0 1200 1200" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", overflow: "visible", pointerEvents: "none" }}>
            <Sparkle x={252} y={262} p={(lt - 5.0) / 0.7} size={30} />
            <Sparkle x={560} y={238} p={(lt - 5.15) / 0.7} size={24} color={C.blue300} />
            <Sparkle x={556} y={588} p={(lt - 5.3) / 0.7} size={22} />
          </svg>
        )}
      </div>
    </div>
  );
}

/* ============================================================
   SZENE 3 — Dreierschnitt: Mail / Foto→Bericht / Kalender.
   6.6 … 10.2 (je 1.2s)
   ============================================================ */
function PanelMail({ p }) {
  const widths = [92, 78, 88, 62, 40];
  const planeP = Easing.easeInOutCubic(clamp((p - 0.74) / 0.2, 0, 1));
  const idx = Math.min(4, Math.max(0, Math.floor((p - 0.14) / 0.1)));
  const curP = Easing.easeOutCubic(clamp((p - 0.14 - idx * 0.1) / 0.11, 0, 1));
  return (
    <div style={{ position: "absolute", left: 240, top: 300, width: 720, height: 490, transform: "rotate(-1.5deg)" }}>
      <div style={{ position: "absolute", inset: 0, background: C.white, border: `8px solid ${INK}`, borderRadius: 26, boxShadow: "0 16px 0 rgba(12,14,19,0.12)", overflow: "hidden", display: "flex", flexDirection: "column" }}>
        <div style={{ background: C.blue, padding: "16px 24px", display: "flex", alignItems: "center", gap: 14, borderBottom: `7px solid ${INK}` }}>
          <div style={{ display: "flex", gap: 8 }}>
            <div style={{ width: 15, height: 15, borderRadius: "50%", background: C.white, opacity: 0.9 }} />
            <div style={{ width: 15, height: 15, borderRadius: "50%", background: C.white, opacity: 0.55 }} />
          </div>
          <div style={{ fontFamily: MONO, fontWeight: 500, fontSize: 22, letterSpacing: "0.15em", textTransform: "uppercase", color: C.white }}>Neue Nachricht</div>
        </div>
        <div style={{ padding: "22px 28px", display: "flex", flexDirection: "column", gap: 16, flex: 1 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <div style={{ fontFamily: MONO, fontWeight: 500, fontSize: 19, letterSpacing: "0.12em", color: C.ink500 }}>AN:</div>
            <div style={{ height: 17, width: 230, borderRadius: 9, background: C.blue100, border: `3px solid ${INK}` }} />
          </div>
          <div style={{ height: 5, background: C.ink100, borderRadius: 999 }} />
          <div style={{ position: "relative", display: "flex", flexDirection: "column", gap: 17, marginTop: 6 }}>
            {widths.map((w, i) => {
              const lp = Easing.easeOutCubic(clamp((p - 0.14 - i * 0.1) / 0.11, 0, 1));
              return <div key={i} style={{ height: 16, width: w + "%", borderRadius: 8, background: C.ink100, transform: `scaleX(${lp})`, transformOrigin: "0 50%" }} />;
            })}
            <div style={{ position: "absolute", left: `calc(${widths[idx] * curP}% + 6px)`, top: idx * 33 - 3, width: 5, height: 24, background: C.blue, opacity: p < 0.72 && Math.sin(p * 44) > -0.3 ? 1 : 0 }} />
          </div>
        </div>
      </div>
      {/* Papierflieger */}
      {p > 0.74 && (
        <svg viewBox="0 0 60 40" style={{ position: "absolute", left: 560 + 420 * planeP, top: 120 - 220 * planeP, width: 96, height: 64, transform: `rotate(${-14 + 6 * planeP}deg)`, opacity: 1 - Math.max(0, planeP - 0.75) / 0.25 }}>
          <path d="M 2 22 L 56 4 L 26 30 L 24 38 L 18 28 Z" fill={C.white} stroke={INK} strokeWidth="4" strokeLinejoin="round" />
          <path d="M 56 4 L 24 24" stroke={INK} strokeWidth="3" />
        </svg>
      )}
      {p > 0.8 && (
        <div style={{ position: "absolute", right: 20, top: -34, background: C.white, border: `6px solid ${INK}`, borderRadius: 999, padding: "10px 22px", display: "flex", alignItems: "center", gap: 10, transform: `scale(${Easing.easeOutBack(clamp((p - 0.8) / 0.14, 0, 1))})`, transformOrigin: "50% 100%" }}>
          <svg viewBox="0 0 24 24" style={{ width: 24, height: 24 }}><path d="M 4 12.5 l 5 5 l 10 -12" fill="none" stroke={C.blue} strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
          <div style={{ fontFamily: MONO, fontWeight: 500, fontSize: 20, letterSpacing: "0.14em", textTransform: "uppercase", color: INK }}>Gesendet</div>
        </div>
      )}
    </div>
  );
}

function PanelBericht({ p }) {
  const flipP = clamp((p - 0.42) / 0.22, 0, 1);
  const showPhoto = flipP < 0.5;
  const sxPhoto = Math.max(0, 1 - flipP * 2);
  const sxDoc = Math.max(0, flipP * 2 - 1);
  const checkS = Easing.easeOutBack(clamp((p - 0.78) / 0.14, 0, 1));
  return (
    <div style={{ position: "absolute", inset: 0 }}>
      {showPhoto ? (
        <div style={{ position: "absolute", left: 600 - 180, top: 310, width: 360, height: 430, transform: `rotate(-4deg) scaleX(${sxPhoto})`, background: C.white, border: `8px solid ${INK}`, borderRadius: 16, boxShadow: "0 16px 0 rgba(12,14,19,0.12)", padding: 18, boxSizing: "border-box" }}>
          <svg viewBox="0 0 320 300" style={{ width: "100%", height: 310, display: "block", background: C.sky, border: `5px solid ${INK}`, borderRadius: 8 }}>
            <circle cx="268" cy="46" r="24" fill={C.orange} stroke={INK} strokeWidth="5" />
            {/* Kran */}
            <line x1="86" y1="260" x2="86" y2="42" stroke={INK} strokeWidth="9" />
            <line x1="86" y1="52" x2="238" y2="52" stroke={INK} strokeWidth="9" />
            <line x1="86" y1="42" x2="150" y2="12" stroke={INK} strokeWidth="6" />
            <line x1="150" y1="12" x2="238" y2="52" stroke={INK} strokeWidth="6" />
            <line x1="204" y1="52" x2="204" y2="122" stroke={INK} strokeWidth="5" />
            <rect x="186" y="122" width="36" height="26" fill={C.orange300} stroke={INK} strokeWidth="5" />
            {/* halbe Mauer */}
            <g fill={C.orange300} stroke={INK} strokeWidth="5">
              <rect x="30" y="232" width="52" height="28" /><rect x="82" y="232" width="52" height="28" />
              <rect x="56" y="204" width="52" height="28" />
            </g>
            <rect x="0" y="258" width="320" height="42" fill={C.orange100} stroke={INK} strokeWidth="5" />
          </svg>
          <div style={{ marginTop: 14, fontFamily: MONO, fontWeight: 500, fontSize: 20, letterSpacing: "0.14em", textTransform: "uppercase", color: C.ink500, textAlign: "center" }}>Baustelle.jpg</div>
        </div>
      ) : (
        <div style={{ position: "absolute", left: 600 - 195, top: 292, width: 390, height: 470, transform: `scaleX(${sxDoc})`, background: C.white, border: `8px solid ${INK}`, borderRadius: 20, boxShadow: "0 16px 0 rgba(12,14,19,0.12)", padding: "26px 28px", boxSizing: "border-box", display: "flex", flexDirection: "column", gap: 17 }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <div style={{ fontFamily: MONO, fontWeight: 500, fontSize: 24, letterSpacing: "0.16em", textTransform: "uppercase", color: C.blue }}>Bericht</div>
            <svg viewBox="0 0 60 60" style={{ width: 62, height: 62, background: C.sky, border: `4px solid ${INK}`, borderRadius: 10 }}>
              <line x1="18" y1="52" x2="18" y2="12" stroke={INK} strokeWidth="5" />
              <line x1="18" y1="15" x2="48" y2="15" stroke={INK} strokeWidth="5" />
              <rect x="36" y="28" width="14" height="11" fill={C.orange300} stroke={INK} strokeWidth="3" />
            </svg>
          </div>
          <div style={{ height: 4, background: `linear-gradient(90deg,${C.blue},${C.orange})`, borderRadius: 999 }} />
          {[90, 76, 84, 64, 78, 46].map((w, i) => (
            <div key={i} style={{ height: 15, width: w + "%", borderRadius: 8, background: C.ink100 }} />
          ))}
          <div style={{ position: "absolute", right: -22, bottom: -22, width: 68, height: 68, borderRadius: "50%", background: C.orange, border: `6px solid ${INK}`, display: "flex", alignItems: "center", justifyContent: "center", transform: `scale(${checkS})` }}>
            <svg viewBox="0 0 24 24" style={{ width: 38, height: 38 }}><path d="M 5 12.5 l 5 5 l 9 -11" fill="none" stroke={C.white} strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </div>
        </div>
      )}
      {/* Funkeln beim Flip */}
      <svg viewBox="0 0 1200 1200" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", overflow: "visible", pointerEvents: "none" }}>
        <Sparkle x={392} y={330} p={(p - 0.5) / 0.5} size={30} />
        <Sparkle x={828} y={400} p={(p - 0.56) / 0.5} size={26} color={C.blue300} />
        <Sparkle x={780} y={740} p={(p - 0.62) / 0.5} size={22} />
      </svg>
    </div>
  );
}

function PanelKalender({ p }) {
  const days = ["M", "D", "M", "D", "F", "S", "S"];
  const pills = { 2: 0, 5: 1, 9: 2, 12: 3, 16: 4, 19: 5, 24: 6 };
  const checks = { 5: 0, 12: 1, 19: 2 };
  const cells = [];
  for (let i = 0; i < 28; i++) {
    const pi = pills[i];
    const pillS = pi !== undefined ? Easing.easeOutBack(clamp((p - 0.14 - pi * 0.08) / 0.14, 0, 1)) : 0;
    const ci = checks[i];
    const checkS = ci !== undefined ? Easing.easeOutBack(clamp((p - 0.5 - ci * 0.1) / 0.14, 0, 1)) : 0;
    cells.push(
      <div key={i} style={{ position: "relative", background: C.paper, border: `3px solid ${C.ink100}`, borderRadius: 8, padding: "4px 6px" }}>
        <div style={{ fontFamily: MONO, fontWeight: 500, fontSize: 13, color: C.ink300 }}>{i + 1}</div>
        {pi !== undefined && (
          <div style={{ position: "absolute", left: 5, right: 5, bottom: 6, height: 22, borderRadius: 7, background: pi % 2 ? C.orange100 : C.blue100, border: `3px solid ${INK}`, transform: `scale(${pillS})` }} />
        )}
        {ci !== undefined && (
          <div style={{ position: "absolute", right: -8, top: -8, width: 26, height: 26, borderRadius: "50%", background: C.blue, border: `4px solid ${INK}`, display: "flex", alignItems: "center", justifyContent: "center", transform: `scale(${checkS})` }}>
            <svg viewBox="0 0 24 24" style={{ width: 14, height: 14 }}><path d="M 5 12.5 l 5 5 l 9 -11" fill="none" stroke={C.white} strokeWidth="4.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </div>
        )}
      </div>
    );
  }
  return (
    <div style={{ position: "absolute", left: 600 - 330, top: 296, width: 660, height: 480, transform: "rotate(1deg)", background: C.white, border: `8px solid ${INK}`, borderRadius: 26, boxShadow: "0 16px 0 rgba(12,14,19,0.12)", padding: "20px 24px", boxSizing: "border-box", display: "flex", flexDirection: "column", gap: 12 }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div style={{ fontFamily: MONO, fontWeight: 500, fontSize: 24, letterSpacing: "0.16em", textTransform: "uppercase", color: INK }}>Juli</div>
        <div style={{ height: 15, width: 96, borderRadius: 8, background: C.ink100 }} />
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(7,1fr)", gap: 8 }}>
        {days.map((d, i) => (
          <div key={i} style={{ fontFamily: MONO, fontWeight: 500, fontSize: 14, letterSpacing: "0.1em", color: C.ink300, textAlign: "center" }}>{d}</div>
        ))}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(7,1fr)", gridAutoRows: "1fr", gap: 8, flex: 1 }}>{cells}</div>
    </div>
  );
}

function SceneCuts({ showCaptions }) {
  const { localTime: lt } = useSprite();
  const seg = Math.min(2, Math.floor(lt / 1.2));
  const segT = lt - seg * 1.2;
  const p = clamp(segT / 1.2, 0, 1);
  const enter = Easing.easeOutCubic(clamp(segT / 0.2, 0, 1));
  const flash = Math.max(0, 1 - segT / 0.1);
  const bgs = [C.blue50, C.orange100, "#E7EDFB"];
  const captions = ["E-Mail · schreibt sich selbst", "Foto → fertiger Bericht", "Termine · geplant"];
  const capPop = Easing.easeOutBack(clamp((segT - 0.12) / 0.3, 0, 1));

  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden", background: bgs[seg] }}>
      <div style={{ position: "absolute", inset: 0, transform: `translateX(${(1 - enter) * 150}px)`, opacity: enter }}>
        {seg === 0 && <PanelMail p={p} />}
        {seg === 1 && <PanelBericht p={p} />}
        {seg === 2 && <PanelKalender p={p} />}
        {/* Mini-Orb arbeitet mit */}
        <div style={{ position: "absolute", left: 1006 - 47, top: 158 - 47 }}>
          <Orb pop={clamp((segT - 0.05) / 0.3, 0, 1)} t={lt} size={94} />
        </div>
        {/* Schrittzähler */}
        <div style={{ position: "absolute", left: 64, top: 96, fontFamily: MONO, fontWeight: 500, fontSize: 24, letterSpacing: "0.18em", color: C.ink500 }}>{seg + 1} / 3</div>
        {showCaptions && (
          <div style={{ position: "absolute", left: 0, right: 0, bottom: 116, display: "flex", justifyContent: "center", transform: `scale(${capPop})`, transformOrigin: "50% 100%" }}>
            <div style={{ background: C.white, border: `6px solid ${INK}`, borderRadius: 999, padding: "16px 34px", fontFamily: MONO, fontWeight: 500, fontSize: 25, letterSpacing: "0.14em", textTransform: "uppercase", color: INK, boxShadow: "0 10px 0 rgba(12,14,19,0.12)" }}>{captions[seg]}</div>
          </div>
        )}
      </div>
      <div style={{ position: "absolute", inset: 0, background: C.white, opacity: flash * 0.6, pointerEvents: "none" }} />
    </div>
  );
}

/* ============================================================
   SZENE 4 — Stapel schrumpft, Uhr springt zurück, Lehnen + Lächeln.
   10.2 … 12.2
   ============================================================ */
function SceneRelief() {
  const { localTime: lt } = useSprite();
  const sc = interpolate([0, 2.0], [1.05, 1.1], Easing.easeInOutCubic)(lt);
  const shrinkP = Easing.easeInOutCubic(clamp((lt - 0.2) / 0.6, 0, 1));
  const stackP = 1 - 0.82 * shrinkP;
  const spinP = Easing.easeInOutCubic(clamp((lt - 0.45) / 0.9, 0, 1));
  const clockH = 275 + (150 - 275) * spinP;
  const clockM = 60 - 720 * spinP;
  const leanP = Easing.easeOutBack(clamp((lt - 1.05) / 0.45, 0, 1));
  const expression = lt < 1.15 ? "smile" : "relaxed";
  const bob = Math.sin(lt * 1.9) * 3;

  const sheets = (
    <g>
      <FlySheet x0={846} y0={620} dir={1} p={(lt - 0.22) / 0.9} />
      <FlySheet x0={262} y0={640} dir={-1} p={(lt - 0.34) / 0.9} />
      <FlySheet x0={982} y0={680} dir={1.2} p={(lt - 0.46) / 0.9} />
      <Sparkle x={846} y={700} p={(lt - 1.0) / 0.7} size={30} />
      <Sparkle x={300} y={716} p={(lt - 1.15) / 0.7} size={24} color={C.blue300} />
      <Sparkle x={520} y={300} p={(lt - 1.3) / 0.7} size={22} />
    </g>
  );

  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, transform: `scale(${sc}) translate(0px, 4px)`, transformOrigin: "600px 600px" }}>
        <Innenraum
          sky="day" clockH={clockH} clockM={clockM} stackP={stackP} floorPaperO={1 - shrinkP} wobT={lt}
          char={{ expression, blink: 0, talkPhase: 0, bob, slumpP: 0, leanP, armPose: lt < 1.05 ? "table" : "lean", phoneUpP: 0 }}
          sheets={sheets}
        />
        <div style={{ position: "absolute", left: 700 - 47, top: 300 - 47 }}>
          <Orb pop={1} t={lt + 2} size={94} />
        </div>
      </div>
      <div style={{ position: "absolute", inset: 0, background: C.white, opacity: Math.max(0, 1 - lt / 0.1) * 0.6, pointerEvents: "none" }} />
    </div>
  );
}

/* ============================================================
   SZENE 5 — Feierabend + Claim + Logo. 12.2 … 14.4
   ============================================================ */
function LogoLockup({ size = 64 }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: size * 0.32 }}>
      <img src="../assets/eipme-symbol.svg" alt="EIPME" style={{ height: size, display: "block" }} />
      <div style={{ fontFamily: GEIST, fontWeight: 800, fontStyle: "italic", fontSize: size * 0.82, letterSpacing: "0.005em", color: INK, lineHeight: 1 }}>EIPME</div>
    </div>
  );
}

function SceneOutro({ headline }) {
  const { localTime: lt } = useSprite();
  const wipe = Easing.easeOutCubic(clamp(lt / 0.5, 0, 1));
  const walkP = Easing.easeOutCubic(clamp(lt / 0.75, 0, 1));
  const x = -430 + 430 * walkP;
  const bob = Math.sin(lt * 13) * (7 * (1 - walkP) + 2);
  const waveRamp = Easing.easeOutBack(clamp((lt - 0.85) / 0.3, 0, 1));
  const waveA = Math.sin(Math.max(0, lt - 0.85) * 7) * 15 * waveRamp;
  const textIn = Easing.easeOutCubic(clamp((lt - 0.5) / 0.5, 0, 1));
  const logoIn = Easing.easeOutCubic(clamp((lt - 0.95) / 0.5, 0, 1));
  const blink = (lt % 2.4) > 2.26 ? 1 : 0;
  const breathe = 1 + 0.006 * Math.sin(lt * 1.6);

  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden", background: C.paper }}>
      <div style={{ position: "absolute", inset: 0, background: `radial-gradient(circle at 50% 118%, ${C.blue100} 0%, ${C.blue50} 46%, ${C.paper} 74%)`, transform: `scale(${breathe})` }} />
      <div style={{ position: "absolute", inset: 0, clipPath: `circle(${wipe * 92}% at 50% 58%)` }}>
        <div style={{ position: "absolute", left: 100, bottom: 150, width: 350, height: 505, transform: `translateX(${x}px)` }}>
          <StandHandwerker expression="grin" blink={blink} bob={bob} waveA={waveA} />
        </div>
        <div style={{ position: "absolute", left: 462, bottom: 560 }}>
          <Orb pop={clamp((lt - 0.7) / 0.4, 0, 1)} t={lt} size={120} />
        </div>
        <div style={{ position: "absolute", left: 600, right: 64, top: 344, display: "flex", flexDirection: "column", gap: 44 }}>
          <div style={{ opacity: textIn, transform: `translateY(${26 * (1 - textIn)}px)`, fontFamily: GEIST, fontWeight: 800, fontStyle: "italic", fontSize: 84, lineHeight: 1.04, letterSpacing: "-0.03em", color: INK, textWrap: "balance" }}>
            {headline}
          </div>
          <div style={{ opacity: logoIn, transform: `translateY(${18 * (1 - logoIn)}px)`, display: "flex", flexDirection: "column", gap: 18 }}>
            <div style={{ height: 5, width: 130, background: `linear-gradient(90deg, ${C.blue}, ${C.orange})`, borderRadius: 999 }} />
            <LogoLockup size={82} />
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================ */
function HandwerkerKISpot({ headline, showCaptions }) {
  const ref = R.useRef(null);
  const HL = headline || "KI, die Ihnen Zeit schenkt.";
  const caps = showCaptions !== false;
  return (
    <div ref={ref} style={{ width: "100%", height: "100%" }}>
      <Stage width={1200} height={1200} duration={14.4} background={C.blue50} autoplay loop>
        <TimestampLabel rootRef={ref} />
        <Sprite start={0} end={6.6}><SceneAbend /></Sprite>
        <Sprite start={6.6} end={10.2}><SceneCuts showCaptions={caps} /></Sprite>
        <Sprite start={10.2} end={12.2}><SceneRelief /></Sprite>
        <Sprite start={12.2} end={14.4}><SceneOutro headline={HL} /></Sprite>
      </Stage>
    </div>
  );
}

function TimestampLabel({ rootRef }) {
  const t = useTime();
  const sec = Math.floor(t);
  R.useEffect(() => {
    const el = rootRef.current && rootRef.current.querySelector("[data-om-exportable-video-with-duration-secs]");
    (el || rootRef.current) && (el || rootRef.current).setAttribute("data-screen-label", "t=" + sec + "s");
  }, [sec]);
  return null;
}

window.HandwerkerKISpot = HandwerkerKISpot;
