/* EIPME NIS2-Spot "Wissen, ob NIS2 Sie betrifft." — 1200×1200, 15s, comic style.
   Schwesterfigur zum Handwerker: Chef eines Zulieferbetriebs (Sakko, offener Kragen, Sneaker), gleiche Farbwelt.
   Reads Stage/Sprite/useTime/useSprite/Easing/interpolate/clamp from window (animations.jsx). */

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

const C = {
  blue: "#1F5EFF", blue600: "#0A47E0", blue300: "#8AA8FF", blue100: "#D9E4FF", blue50: "#EEF3FF",
  orange: "#FF7A1A", orange300: "#FFA15C", orange100: "#FFDEC2",
  red: "#FF3B47", red600: "#E51F2D", red100: "#FFD6DA",
  green: "#0E6B27", greenTint: "rgba(14,107,39,0.14)",
  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 CHEF — Comic-Kopf mit Kurzhaar (statt Mütze), gleiche Mimik.
   ============================================================ */
function KopfChef({ expression = "smile", blink = 0, talkPhase = 0 }) {
  const shocked = expression === "shock";
  let eyes;
  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 (shocked) {
    eyes = (
      <g>
        <circle cx="148" cy="130" r="21" fill={C.white} stroke={INK} strokeWidth="6" />
        <circle cx="151" cy="133" r="7.5" fill={INK} />
        <circle cx="210" cy="130" r="21" fill={C.white} stroke={INK} strokeWidth="6" />
        <circle cx="207" cy="133" r="7.5" 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 === "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="174" rx="16" ry="20" fill={INK} />;
  } else {
    mouth = <path d="M 150 152 q 29 22 58 0" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />;
  }

  const brows = shocked ? (
    <g>
      <path d="M 132 96 q 16 -12 34 -4" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />
      <path d="M 192 92 q 18 -8 34 4" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />
    </g>
  ) : (
    <g>
      <path d="M 136 100 q 15 -7 30 -2" stroke={INK} strokeWidth="7" fill="none" strokeLinecap="round" />
      <path d="M 194 98 q 15 -5 30 2" 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="150" r="9" fill={C.cheek} opacity="0.5" />}
      {!shocked && <circle cx="230" cy="150" r="9" fill={C.cheek} opacity="0.5" />}
      {brows}
      {eyes}
      {/* Brille */}
      <g fill="none" stroke={INK} strokeWidth="5.5">
        <rect x="127" y="101" width="46" height="36" rx="11" />
        <rect x="185" y="101" width="46" height="36" rx="11" />
        <line x1="173" y1="115" x2="185" y2="115" />
        <line x1="127" y1="113" x2="107" y2="106" />
        <line x1="231" y1="113" x2="251" y2="106" />
      </g>
      <ellipse cx="179" cy={shocked ? 150 : 138} rx="14" ry="11" fill={C.skinShade} stroke={INK} strokeWidth="6" />
      {mouth}
      {/* kurzes, dunkles Haar mit Stirntolle — jünger, kein Grau */}
      <path d="M 106 134 q -6 -74 73 -80 q 79 6 73 80 q -10 -40 -73 -40 q -63 0 -73 40 z" fill={C.ink700} stroke={INK} strokeWidth="6" strokeLinejoin="round" />
      <path d="M 220 62 q 22 6 30 26 q -18 -10 -34 -8 z" fill={C.ink700} stroke={INK} strokeWidth="4" strokeLinejoin="round" />
    </g>
  );
}

/* ---------- Sprechblase ---------- */
function SpeechBubble({ x, y, w, pop, text, tailX = 64, fontSize = 54, align = "left", accent = null }) {
  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: "26px 36px", 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", textAlign: align }}>{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>
  );
}

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>
  );
}

function LogoLockup({ size = 64 }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: size * 0.32 }}>
      <img src="assets/eipme-c4-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>
  );
}

/* ============================================================
   BÜRO-KULISSE — kleines Büro eines Zulieferbetriebs, Tag.
   ============================================================ */
function BueroRaum() {
  return (
    <g>
      <rect width="1200" height="1200" fill="#E7EDFB" />
      <rect x="0" y="930" width="1200" height="270" fill="#CBD3E4" />
      <line x1="0" y1="930" x2="1200" y2="930" stroke={INK} strokeWidth="8" />
      {/* Fenster mit Tageslicht */}
      <rect x="812" y="150" width="300" height="250" rx="10" fill="#CFE3FF" stroke={INK} strokeWidth="9" />
      <circle cx="1052" cy="212" r="30" fill="#FFE9A8" stroke={INK} strokeWidth="5" />
      <line x1="812" y1="275" x2="1112" y2="275" stroke={INK} strokeWidth="7" />
      <line x1="962" y1="150" x2="962" y2="400" stroke={INK} strokeWidth="7" />
      {/* Regal mit Kartons */}
      <g>
        <rect x="96" y="250" width="360" height="20" rx="6" fill={C.ink300} stroke={INK} strokeWidth="6" />
        <rect x="96" y="430" width="360" height="20" rx="6" fill={C.ink300} stroke={INK} strokeWidth="6" />
        <rect x="110" y="270" width="14" height="160" fill={C.ink300} stroke={INK} strokeWidth="5" />
        <rect x="428" y="270" width="14" height="160" fill={C.ink300} stroke={INK} strokeWidth="5" />
        <g stroke={INK} strokeWidth="6">
          <rect x="140" y="176" width="90" height="74" rx="6" fill={C.orange100} />
          <rect x="250" y="188" width="76" height="62" rx="6" fill="#EAD9C2" />
          <rect x="344" y="172" width="86" height="78" rx="6" fill={C.orange100} />
          <rect x="150" y="356" width="80" height="74" rx="6" fill="#EAD9C2" />
          <rect x="252" y="352" width="92" height="78" rx="6" fill={C.orange100} />
          <rect x="360" y="366" width="70" height="64" rx="6" fill="#EAD9C2" />
        </g>
        <g stroke={C.ink300} strokeWidth="4" opacity="0.55">
          <line x1="163" y1="213" x2="207" y2="213" /><line x1="367" y1="211" x2="411" y2="211" /><line x1="275" y1="391" x2="321" y2="391" />
        </g>
      </g>
      {/* Firmenschild (oben, frei sichtbar) */}
      <g>
        <rect x="450" y="96" width="340" height="96" rx="14" fill={C.white} stroke={INK} strokeWidth="8" />
        <image href="assets/eipme-c4-symbol.svg" x="472" y="116" width="56" height="56" />
        <text x="546" y="136" fontFamily={GEIST} fontWeight="800" fontStyle="italic" fontSize="27" letterSpacing="-0.01em" fill={INK}>Zulieferbetrieb</text>
        <text x="546" y="170" fontFamily={MONO} fontWeight="500" fontSize="16" letterSpacing="0.14em" fill={C.ink500}>SEIT 2004</text>
      </g>
    </g>
  );
}

/* ---------- Chef-Figur, ganze Figur: Sakko, offenes Hemd, Sneaker ---------- */
function ChefBueste({ expression = "smile", blink = 0, pose = "crossed", t = 0, sweat = 0 }) {
  const bob = Math.sin(t * 1.7) * 2.4;
  return (
    <svg viewBox="0 0 360 780" style={{ width: "100%", height: "100%", display: "block", overflow: "visible" }}>
      {/* Hose */}
      <path d="M 102 546 l 156 0 l -6 182 l -54 0 l 2 -96 q -20 -10 -40 0 l 2 96 l -54 0 z" fill={C.ink700} stroke={INK} strokeWidth="7" strokeLinejoin="round" />
      {/* Sneaker */}
      <path d="M 108 726 q -18 2 -18 16 q 0 12 14 12 l 66 0 l -3 -28 z" fill={C.white} stroke={INK} strokeWidth="6" strokeLinejoin="round" />
      <path d="M 252 726 q 18 2 18 16 q 0 12 -14 12 l -66 0 l 3 -28 z" fill={C.white} stroke={INK} strokeWidth="6" strokeLinejoin="round" />
      {/* Hals — statisch, überbrückt das Kopf-Bobbing hinter dem Hemd */}
      <rect x="161" y="240" width="36" height="74" rx="10" fill={C.skin} stroke={INK} strokeWidth="6" />
      {/* Hemd */}
      <path d="M 142 302 q 38 -12 76 0 l 6 250 q -44 8 -88 0 z" fill={C.paper} stroke={INK} strokeWidth="7" strokeLinejoin="round" />
      <line x1="180" y1="400" x2="180" y2="528" stroke={C.ink100} strokeWidth="4" />
      <circle cx="180" cy="444" r="4" fill={C.ink100} />
      <circle cx="180" cy="490" r="4" fill={C.ink100} />
      {/* Gürtelschnalle im Sakko-Spalt */}
      <rect x="164" y="532" width="32" height="16" rx="4" fill={C.ink700} stroke={INK} strokeWidth="4" />
      {/* Sakko, offen */}
      <path d="M 170 302 q -42 -8 -79 4 l -9 246 q 46 10 86 8 l 8 -130 l -24 -82 z" fill={C.blue} stroke={INK} strokeWidth="7" strokeLinejoin="round" />
      <path d="M 190 302 q 42 -8 79 4 l 9 246 q -46 10 -86 8 l -8 -130 l 24 -82 z" fill={C.blue} stroke={INK} strokeWidth="7" strokeLinejoin="round" />
      {/* Revers */}
      <path d="M 170 302 l -18 46 l 24 40 z" fill={C.blue} stroke={INK} strokeWidth="5" strokeLinejoin="round" />
      <path d="M 190 302 l 18 46 l -24 40 z" fill={C.blue} stroke={INK} strokeWidth="5" strokeLinejoin="round" />
      {/* Hemdkragen offen */}
      <path d="M 158 296 l 22 20 l -15 15 z" fill={C.paper} stroke={INK} strokeWidth="5" strokeLinejoin="round" />
      <path d="M 202 296 l -22 20 l 15 15 z" fill={C.paper} stroke={INK} strokeWidth="5" strokeLinejoin="round" />
      {/* Einstecktuch */}
      <path d="M 116 366 l 30 4 l -12 -20 z" fill={C.orange} stroke={INK} strokeWidth="4" strokeLinejoin="round" />
      <line x1="110" y1="370" x2="150" y2="372" stroke={INK} strokeWidth="5" strokeLinecap="round" />
      {/* Sakko-Knopf */}
      <circle cx="172" cy="470" r="5" fill={C.blue600} stroke={INK} strokeWidth="3" />

      {pose === "crossed" && (
        <g>
          <path d="M 104 330 q -26 40 2 74" stroke={C.blue} strokeWidth="36" fill="none" strokeLinecap="round" />
          <path d="M 256 330 q 26 40 -2 74" stroke={C.blue} strokeWidth="36" fill="none" strokeLinecap="round" />
          <path d="M 118 402 q 62 30 132 -8" stroke={C.skin} strokeWidth="26" fill="none" strokeLinecap="round" />
          <path d="M 244 392 q -62 32 -130 4" stroke={C.skin} strokeWidth="26" fill="none" strokeLinecap="round" />
          <circle cx="116" cy="404" r="17" fill={C.skin} stroke={INK} strokeWidth="6" />
          <circle cx="246" cy="392" r="17" fill={C.skin} stroke={INK} strokeWidth="6" />
        </g>
      )}
      {pose === "desk" && (
        <g>
          <path d="M 104 330 q -40 40 -30 96" stroke={C.blue} strokeWidth="34" fill="none" strokeLinecap="round" />
          <circle cx="76" cy="430" r="18" fill={C.skin} stroke={INK} strokeWidth="6" />
          <path d="M 256 330 q 44 40 34 96" stroke={C.blue} strokeWidth="34" fill="none" strokeLinecap="round" />
          <circle cx="292" cy="430" r="18" fill={C.skin} stroke={INK} strokeWidth="6" />
        </g>
      )}
      {pose === "receive" && (
        <g>
          <path d="M 104 330 q -34 28 -40 70" stroke={C.blue} strokeWidth="34" fill="none" strokeLinecap="round" />
          <circle cx="62" cy="398" r="18" fill={C.skin} stroke={INK} strokeWidth="6" />
          <path d="M 256 330 q 48 -14 74 -52" stroke={C.blue} strokeWidth="34" fill="none" strokeLinecap="round" />
          <circle cx="336" cy="276" r="19" fill={C.skin} stroke={INK} strokeWidth="6" />
        </g>
      )}

      <g transform={`translate(179 ${282 + bob})`}>
        <KopfChef expression={expression} blink={blink} />
      </g>
      {/* Cartoon-Schweißtropfen */}
      {sweat > 0 && (
        <g opacity={clamp(sweat, 0, 1)}>
          <path d={`M 250 ${150 + 10 * Math.sin(t * 6)} q 10 16 0 26 q -10 -10 0 -26 z`} fill={C.blue300} stroke={INK} strokeWidth="4" />
          <path d={`M 118 ${176 + 10 * Math.sin(t * 6 + 1)} q 9 14 0 24 q -9 -10 0 -24 z`} fill={C.blue300} stroke={INK} strokeWidth="4" />
        </g>
      )}
    </svg>
  );
}

/* ============================================================
   SZENE 1 — Chef entspannt, "NIS2? Betrifft uns nicht."  0 … 3.3
   ============================================================ */
function SceneRelaxed() {
  const { localTime: lt } = useSprite();
  const sc = interpolate([0, 3.3], [1.04, 1.1], Easing.easeInOutCubic)(lt);
  const blink = (lt > 1.7 && lt < 1.86) || (lt > 2.7 && lt < 2.86) ? 1 : 0;
  const bubblePop = clamp((lt - 0.35) / 0.4, 0, 1);

  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden", opacity: clamp(lt / 0.35, 0, 1) }}>
      <div style={{ position: "absolute", inset: 0, transform: `scale(${sc})`, transformOrigin: "600px 640px" }}>
        <svg viewBox="0 0 1200 1200" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
          <BueroRaum />
          {/* Schreibtisch */}
          <rect x="150" y="812" width="900" height="150" rx="10" fill={C.orange300} stroke={INK} strokeWidth="8" />
          <rect x="150" y="812" width="900" height="150" fill="rgba(12,14,19,0.10)" />
          <rect x="120" y="784" width="960" height="32" rx="10" fill={C.orange300} stroke={INK} strokeWidth="8" />
          {/* Deko auf dem Tisch */}
          <g>
            <rect x="250" y="720" width="120" height="66" rx="8" fill={C.ink700} stroke={INK} strokeWidth="6" />
            <rect x="262" y="730" width="96" height="46" rx="4" fill={C.blue50} />
            <rect x="256" y="786" width="108" height="12" rx="4" fill={C.ink300} stroke={INK} strokeWidth="5" />
          </g>
          <g>
            <path d="M 812 786 l 16 -70 l 40 0 l 16 70 z" fill={C.white} stroke={INK} strokeWidth="6" strokeLinejoin="round" />
            <ellipse cx="848" cy="716" rx="26" ry="10" fill={C.orange100} stroke={INK} strokeWidth="6" />
          </g>
        </svg>
        {/* Chef steht vor dem Tisch, Arme verschränkt — ganze Figur */}
        <div style={{ position: "absolute", left: 430, top: 402, width: 330, height: 715 }}>
          <ChefBueste expression={lt < 0.4 ? "smile" : "relaxed"} blink={blink} pose="crossed" t={lt} />
        </div>
        {/* Sprechblase am Kopf verankert, Spitze zeigt auf den Mund */}
        <SpeechBubble
          x={500} y={200} w={460} pop={bubblePop} tailX={54} align="left" fontSize={48}
          text={<span><span style={{ fontSize: 88, color: C.blue }}>NIS2?</span><br />Betrifft uns nicht.</span>}
        />
      </div>
    </div>
  );
}

/* ============================================================
   SZENE 2 — Mail ploppt auf, Chef erschrickt.  3.0 … 6.3
   ============================================================ */
function SceneMail() {
  const { localTime: lt } = useSprite();
  const sc = interpolate([0, 4.45], [1.05, 1.12], Easing.easeInOutCubic)(lt);
  const mailPop = Easing.easeOutBack(clamp((lt - 0.55) / 0.4, 0, 1));
  const shock = lt > 0.95;
  const sweat = clamp((lt - 1.25) / 0.4, 0, 1);
  const blink = 0;
  const shake = shock && lt < 1.7 ? Math.sin(lt * 40) * 2.2 : 0;

  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden", background: "#E7EDFB", opacity: clamp(lt / 0.35, 0, 1) }}>
      <div style={{ position: "absolute", inset: 0, transform: `scale(${sc})`, transformOrigin: "520px 560px" }}>
        <svg viewBox="0 0 1200 1200" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
          <rect width="1200" height="1200" fill="#E7EDFB" />
          <rect x="0" y="930" width="1200" height="270" fill="#CBD3E4" />
          <line x1="0" y1="930" x2="1200" y2="930" stroke={INK} strokeWidth="8" />
          {/* Schreibtischplatte */}
          <rect x="0" y="812" width="1200" height="150" fill={C.orange300} stroke={INK} strokeWidth="8" />
          <rect x="0" y="812" width="1200" height="150" fill="rgba(12,14,19,0.10)" />
          {/* Monitor */}
          <g transform={`rotate(${shake * 0.3} 470 560)`}>
            <rect x="150" y="250" width="640" height="470" rx="26" fill={C.ink700} stroke={INK} strokeWidth="10" />
            <rect x="172" y="272" width="596" height="404" rx="12" fill={C.blue50} />
            <rect x="440" y="720" width="60" height="46" fill={C.ink300} stroke={INK} strokeWidth="7" />
            <rect x="360" y="766" width="220" height="24" rx="10" fill={C.ink300} stroke={INK} strokeWidth="7" />
          </g>
        </svg>
        {/* Mail-Karte auf dem Bildschirm — visueller Fokus */}
        <div style={{ position: "absolute", left: 196, top: 300, width: 548, transform: `scale(${mailPop})`, transformOrigin: "50% 40%" }}>
          <div style={{ background: C.white, border: `7px solid ${INK}`, borderRadius: 22, overflow: "hidden", boxShadow: "0 16px 0 rgba(12,14,19,0.16)" }}>
            <div style={{ background: C.red, padding: "14px 22px", display: "flex", alignItems: "center", gap: 12 }}>
              <svg viewBox="0 0 24 24" style={{ width: 30, height: 30 }}><path d="M 3 6 h 18 v 12 h -18 z M 3 7 l 9 6 l 9 -6" fill="none" stroke={C.white} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
              <div style={{ fontFamily: MONO, fontWeight: 500, fontSize: 20, letterSpacing: "0.14em", textTransform: "uppercase", color: C.white }}>Neue Nachricht</div>
            </div>
            <div style={{ padding: "22px 26px 26px", display: "flex", flexDirection: "column", gap: 14 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <div style={{ width: 52, height: 52, borderRadius: "50%", background: C.blue, border: `5px solid ${INK}`, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: GEIST, fontWeight: 800, fontStyle: "italic", fontSize: 26, color: C.white }}>G</div>
                <div>
                  <div style={{ fontFamily: MONO, fontWeight: 500, fontSize: 16, letterSpacing: "0.12em", textTransform: "uppercase", color: C.ink500 }}>Absender</div>
                  <div style={{ fontFamily: GEIST, fontWeight: 800, fontStyle: "italic", fontSize: 30, color: INK }}>Ihr Großkunde</div>
                </div>
              </div>
              <div style={{ height: 3, background: C.line || "rgba(12,14,19,0.10)" }} />
              <div style={{ fontFamily: MONO, fontWeight: 500, fontSize: 16, letterSpacing: "0.12em", textTransform: "uppercase", color: C.ink500 }}>Betreff</div>
              <div style={{ fontFamily: GEIST, fontWeight: 800, fontStyle: "italic", fontSize: 38, lineHeight: 1.1, letterSpacing: "-0.02em", color: C.red600, textWrap: "balance" }}>Sicherheitsnachweis gemäß NIS2 erforderlich</div>
            </div>
          </div>
        </div>
        {/* Chef rechts, erschrickt — hinter dem Tisch, unten sauber abgeschnitten */}
        <div style={{ position: "absolute", left: 792, top: 452, width: 340, height: 366, overflow: "hidden" }}>
          <div style={{ width: 340, height: 737 }}>
            <ChefBueste expression={shock ? "shock" : "smile"} blink={blink} pose="desk" t={lt} sweat={sweat} />
          </div>
        </div>
        {/* Ausrufe-Funken beim Schreck */}
        {shock && (
          <svg viewBox="0 0 1200 1200" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" }}>
            <g stroke={C.red} strokeWidth="8" strokeLinecap="round" opacity={clamp((lt - 0.95) / 0.2, 0, 1)}>
              <line x1="928" y1="470" x2="958" y2="440" /><line x1="1000" y1="512" x2="1038" y2="500" /><line x1="900" y1="540" x2="866" y2="536" />
            </g>
          </svg>
        )}
      </div>
    </div>
  );
}

/* ============================================================
   SZENE 3 — Zahlenkarte, still.  6.0 … 9.3
   ============================================================ */
function SceneStat() {
  const { localTime: lt } = useSprite();
  const cardPop = Easing.easeOutBack(clamp((lt - 0.15) / 0.45, 0, 1));
  const numGrow = interpolate([0.2, 0.9], [0.8, 1], Easing.easeOutBack)(clamp(lt, 0, 3));
  const barP = Easing.easeInOutCubic(clamp((lt - 0.5) / 0.7, 0, 1));

  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden", opacity: clamp(lt / 0.35, 0, 1) }}>
      <div style={{ position: "absolute", inset: 0, background: `radial-gradient(circle at 50% 44%, ${C.white} 0%, ${C.blue50} 60%, #E2E9F8 100%)` }} />
      <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
        <div style={{ width: 1000, transform: `scale(${cardPop})`, background: C.white, border: `8px solid ${INK}`, borderRadius: 40, padding: "72px 80px", boxShadow: "0 18px 0 rgba(12,14,19,0.12)", textAlign: "center" }}>
          <div style={{ fontFamily: MONO, fontWeight: 500, fontSize: 26, letterSpacing: "0.18em", textTransform: "uppercase", color: C.ink500, marginBottom: 20 }}>NIS2 · Betroffenheit</div>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "center", gap: 8, marginBottom: 8 }}>
            <span style={{ fontFamily: GEIST, fontWeight: 800, fontStyle: "italic", fontSize: 240, lineHeight: 0.9, letterSpacing: "-0.04em", color: C.blue, display: "inline-block", transform: `scale(${numGrow})`, transformOrigin: "50% 70%" }}>48</span>
            <span style={{ fontFamily: GEIST, fontWeight: 800, fontStyle: "italic", fontSize: 120, color: C.orange }}>%</span>
          </div>
          <div style={{ fontFamily: GEIST, fontWeight: 800, fontStyle: "italic", fontSize: 56, lineHeight: 1.08, letterSpacing: "-0.02em", color: INK, textWrap: "balance", marginBottom: 34 }}>schätzen ihre Betroffenheit falsch ein</div>
          <div style={{ height: 20, width: "100%", borderRadius: 999, background: C.blue50, border: `4px solid ${INK}`, overflow: "hidden", marginBottom: 30 }}>
            <div style={{ height: "100%", width: `${barP * 48}%`, background: `linear-gradient(90deg, ${C.blue}, ${C.orange})` }} />
          </div>
          <div style={{ fontFamily: MONO, fontWeight: 500, fontSize: 24, letterSpacing: "0.06em", color: C.ink500, textWrap: "balance", lineHeight: 1.4 }}>29.500 Betriebe direkt betroffen · Quelle: Cyber Security Report 2026 / BSI</div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   SZENE 4 — EIPME überreicht NIS2-Check.  9.0 … 12.3
   ============================================================ */
function EipmeBadge({ pop, t }) {
  const s = Easing.easeOutBack(clamp(pop, 0, 1));
  if (s <= 0) return null;
  return (
    <div style={{ width: 230, height: 230, transform: `translateY(${Math.sin(t * 2.1) * 6}px) scale(${s})`, filter: "drop-shadow(0 0 24px rgba(31,94,255,0.4))" }}>
      <div style={{ width: "100%", height: "100%", borderRadius: "50%", background: C.white, border: `8px solid ${INK}`, display: "flex", alignItems: "center", justifyContent: "center", boxSizing: "border-box" }}>
        <img src="assets/eipme-c4-symbol.svg" alt="EIPME" style={{ width: 130, height: 130, display: "block" }} />
      </div>
    </div>
  );
}

function SceneResolve() {
  const { localTime: lt } = useSprite();
  const badgePop = clamp((lt - 0.2) / 0.45, 0, 1);
  const docPop = Easing.easeOutBack(clamp((lt - 0.7) / 0.5, 0, 1));
  const check1 = clamp((lt - 1.2) / 0.4, 0, 1);
  const check2 = clamp((lt - 1.7) / 0.4, 0, 1);
  const smile = lt > 1.0;
  const blink = (lt > 2.2 && lt < 2.36) ? 1 : 0;

  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden", background: C.blue50, opacity: clamp(lt / 0.35, 0, 1) }}>
      <div style={{ position: "absolute", inset: 0, background: `radial-gradient(circle at 50% 40%, ${C.white} 0%, ${C.blue50} 66%)` }} />
      {/* Chef links, lächelt — ganze Figur */}
      <div style={{ position: "absolute", left: 90, top: 260, width: 280, height: 607 }}>
        <ChefBueste expression={smile ? "smile" : "relaxed"} blink={blink} pose="receive" t={lt} />
      </div>
      {/* EIPME-Badge rechts */}
      <div style={{ position: "absolute", right: 150, top: 250 }}>
        <EipmeBadge pop={badgePop} t={lt} />
      </div>
      {/* Dokument NIS2-Check in der Mitte */}
      <div style={{ position: "absolute", left: 470, top: 300, width: 300, transform: `scale(${docPop}) rotate(-4deg)`, transformOrigin: "50% 60%" }}>
        <div style={{ background: C.white, border: `7px solid ${INK}`, borderRadius: 18, padding: "26px 26px 30px", boxShadow: "0 14px 0 rgba(12,14,19,0.16)" }}>
          <div style={{ fontFamily: MONO, fontWeight: 500, fontSize: 18, letterSpacing: "0.14em", textTransform: "uppercase", color: C.ink500, marginBottom: 12 }}>Dokument</div>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <div style={{ fontFamily: GEIST, fontWeight: 800, fontStyle: "italic", fontSize: 44, letterSpacing: "-0.02em", color: INK }}>NIS2-Check</div>
            <div style={{ width: 46, height: 46, borderRadius: "50%", background: C.green, border: `5px solid ${INK}`, display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}>
              <svg viewBox="0 0 24 24" style={{ width: 26, height: 26 }}><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 style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 8 }}>
            <div style={{ height: 5, width: "80%", borderRadius: 3, background: C.blue100 }} />
            <div style={{ height: 5, width: "60%", borderRadius: 3, background: C.blue100 }} />
          </div>
        </div>
      </div>
      {/* Zwei Häkchen-Zeilen unten */}
      <div style={{ position: "absolute", left: 0, right: 0, bottom: 150, display: "flex", flexDirection: "column", alignItems: "center", gap: 22 }}>
        {[["Betroffenheit geprüft", check1], ["Nachweis für Auftraggeber", check2]].map(([label, cp], i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 20, background: C.white, border: `6px solid ${C.green}`, borderRadius: 999, padding: "16px 40px", opacity: clamp(cp * 2, 0, 1), transform: `translateX(${(1 - Easing.easeOutCubic(cp)) * -40}px)`, boxShadow: "0 10px 0 rgba(12,14,19,0.10)" }}>
            <div style={{ width: 44, height: 44, borderRadius: "50%", background: C.green, display: "flex", alignItems: "center", justifyContent: "center", flex: "none", transform: `scale(${Easing.easeOutBack(cp)})` }}>
              <svg viewBox="0 0 24 24" style={{ width: 26, height: 26 }}><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 style={{ fontFamily: GEIST, fontWeight: 800, fontStyle: "italic", fontSize: 40, letterSpacing: "-0.02em", color: INK }}>{label}</div>
          </div>
        ))}
      </div>
      <svg viewBox="0 0 1200 1200" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" }}>
        <Sparkle x={640} y={250} p={(lt - 1.0) / 0.7} size={28} />
        <Sparkle x={470} y={300} p={(lt - 1.2) / 0.7} size={22} color={C.blue300} />
      </svg>
    </div>
  );
}

/* ============================================================
   SZENE 5 — Schlussbild, komplett still.  12.0 … 15.0
   ============================================================ */
function SceneOutro({ headline }) {
  const { localTime: lt } = useSprite();
  const wipe = Easing.easeOutCubic(clamp(lt / 0.5, 0, 1));
  const textIn = Easing.easeOutCubic(clamp((lt - 0.3) / 0.45, 0, 1));
  const logoIn = Easing.easeOutCubic(clamp((lt - 0.6) / 0.45, 0, 1));

  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden", background: C.paper, opacity: clamp(lt / 0.35, 0, 1) }}>
      <div style={{ position: "absolute", inset: 0, background: `radial-gradient(circle at 50% 116%, ${C.blue100} 0%, ${C.blue50} 46%, ${C.paper} 74%)` }} />
      <div style={{ position: "absolute", inset: 0, clipPath: `circle(${wipe * 92}% at 50% 54%)` }}>
        {/* Chef ruhig rechts — ganze Figur */}
        <div style={{ position: "absolute", right: 96, bottom: 120, width: 300, height: 650 }}>
          <ChefBueste expression="smile" blink={0} pose="crossed" t={0} />
        </div>
        <div style={{ position: "absolute", left: 96, right: 460, top: 380, display: "flex", flexDirection: "column", gap: 44 }}>
          <div style={{ opacity: textIn, transform: `translateY(${26 * (1 - textIn)}px)`, fontFamily: GEIST, fontWeight: 800, fontStyle: "italic", fontSize: 92, 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 HandwerkerNIS2Spot({ headline }) {
  const ref = R.useRef(null);
  const HL = headline || "Wissen, ob NIS2 Sie betrifft.";
  return (
    <div ref={ref} style={{ width: "100%", height: "100%" }}>
      <Stage width={1200} height={1200} duration={17.3} background={C.blue50} autoplay loop>
        <TimestampLabel rootRef={ref} />
        <Sprite start={0} end={3.3}><SceneRelaxed /></Sprite>
        <Sprite start={3.0} end={7.45}><SceneMail /></Sprite>
        <Sprite start={7.15} end={11.6}><SceneStat /></Sprite>
        <Sprite start={11.3} end={14.6}><SceneResolve /></Sprite>
        <Sprite start={14.3} end={17.3}><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.HandwerkerNIS2Spot = HandwerkerNIS2Spot;
