/* ─────────────────────────────────────────────────────────────
   Animierte Szenen für die Sektion "Beobachtung"
   Drei Varianten: eye · marionette · network
   Linien-basiert, Schwarz-Rot, dezent geloopt.
   ───────────────────────────────────────────────────────────── */
const SCENE_CSS = `
.gr-beo-grid{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,5vw,72px);align-items:center}
.gr-scene{position:relative;width:100%;max-width:460px;margin:0 auto;
  aspect-ratio:1/1}
.gr-scene svg{width:100%;height:100%;display:block;overflow:visible}
.gr-scene .stroke-faint{stroke:rgba(245,242,242,.16)}
.gr-scene .stroke-mid{stroke:rgba(245,242,242,.4)}
.gr-scene .stroke-red,.gr-det .stroke-red{stroke:var(--red)}
.gr-scene .fill-red,.gr-det .fill-red{fill:var(--red)}
.gr-scene .fill-paper{fill:rgba(245,242,242,.85)}

/* ── Eye ── */
@keyframes grBlink{0%,92%,100%{transform:scaleY(1)}95%,97%{transform:scaleY(.04)}}
@keyframes grScan{0%,100%{transform:translateX(-22px)}50%{transform:translateX(22px)}}
@keyframes grRing{0%{r:30;opacity:.5}100%{r:130;opacity:0}}
.gr-eye-lid{transform-box:fill-box;transform-origin:center;
  animation:grBlink 6.5s ease-in-out infinite}
.gr-eye-pupil{animation:grScan 7s ease-in-out infinite}
.gr-eye-ring{animation:grRing 4s ease-out infinite}
.gr-eye-ring.b{animation-delay:2s}

/* ── Marionette ── */
@keyframes grBar{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes grSway{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(6px) rotate(1.5deg)}}
@keyframes grPulseDown{0%{offset-distance:0%;opacity:0}10%{opacity:1}90%{opacity:1}100%{offset-distance:100%;opacity:0}}
.gr-mar-bar{transform-box:fill-box;transform-origin:center;
  animation:grBar 5.5s ease-in-out infinite}
.gr-mar-figure{transform-box:fill-box;transform-origin:top center;
  animation:grSway 5.5s ease-in-out infinite}

/* ── Network ── */
@keyframes grNodePulse{0%,100%{opacity:.25;r:4}50%{opacity:1;r:6}}
@keyframes grCorePulse{0%,100%{r:8;filter:none}50%{r:10}}
@keyframes grCoreRing{0%{r:10;opacity:.6}100%{r:80;opacity:0}}
@keyframes grEdge{0%{stroke-dashoffset:60}100%{stroke-dashoffset:0}}
.gr-net-edge{stroke-dasharray:5 9;animation:grEdge 2.2s linear infinite}
.gr-net-core{animation:grCorePulse 2.4s ease-in-out infinite}
.gr-net-ring{animation:grCoreRing 2.8s ease-out infinite}
.gr-net-node{transform-box:fill-box;animation:grNodePulse 2.4s ease-in-out infinite}

/* ── Such-Szene mit Detektivin (Foto + wandernder Lupen-Schein) ── */
.gr-final .gr-wrap{position:relative;z-index:2}
.gr-search{position:absolute;inset:0;z-index:0;overflow:hidden}
.gr-search-img{position:absolute;inset:0;
  background:url('assets/detektivin-opt.jpg') center 36% / cover no-repeat;
  filter:brightness(.44) saturate(.9) contrast(1.03)}
.gr-search-scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(125% 105% at 50% 36%,rgba(10,10,11,.84) 0%,
    rgba(10,10,11,.52) 40%,rgba(10,10,11,.24) 74%,rgba(10,10,11,.42) 100%)}
.gr-search-lens{position:absolute;width:24%;aspect-ratio:1/1;left:64%;top:63%;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,95,105,.6) 0%,rgba(200,30,58,.24) 46%,transparent 70%);
  mix-blend-mode:screen;filter:blur(5px);animation:grLensPulse 2.8s ease-in-out infinite}
.gr-search-beam{position:absolute;width:50%;aspect-ratio:1/1;left:46%;top:85%;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,185,185,.82) 0%,rgba(240,45,58,.5) 30%,
    rgba(200,30,58,.18) 54%,transparent 72%);
  mix-blend-mode:screen;filter:blur(9px);animation:grBeamMove 13s ease-in-out infinite}
@keyframes grBeamMove{
  0%{left:45%;top:84%}22%{left:57%;top:89%}48%{left:71%;top:91%}
  72%{left:58%;top:86%}100%{left:45%;top:84%}}
@keyframes grLensPulse{0%,100%{opacity:.55}50%{opacity:1}}
.gr-det{position:absolute;bottom:9%;left:-16%;width:clamp(130px,17vw,210px);
  opacity:.9;animation:grWalk 16s linear infinite;
  filter:drop-shadow(0 0 14px rgba(200,30,58,.25))}
.gr-det .stroke-mid{stroke:rgba(245,242,242,.9)}
.gr-det svg{width:100%;height:auto;display:block;overflow:visible}
.gr-det-bob{transform-box:fill-box;transform-origin:center bottom;
  animation:grBob .92s ease-in-out infinite}
.gr-det-legF{transform-box:fill-box;transform-origin:top center;
  animation:grLegF .92s ease-in-out infinite}
.gr-det-legB{transform-box:fill-box;transform-origin:top center;
  animation:grLegB .92s ease-in-out infinite}
.gr-det-armB{transform-box:fill-box;transform-origin:top center;
  animation:grArmB .92s ease-in-out infinite}
.gr-det-lens{animation:grLensGlint 2.6s ease-in-out infinite}
.gr-det-scan{animation:grLensScan 3.4s ease-out infinite}
.gr-det-foot{stroke:var(--red);opacity:0;animation:grFoot 19s linear infinite}
@keyframes grWalk{from{left:-16%}to{left:116%}}
@keyframes grBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes grLegF{0%,100%{transform:rotate(22deg)}50%{transform:rotate(-22deg)}}
@keyframes grLegB{0%,100%{transform:rotate(-22deg)}50%{transform:rotate(22deg)}}
@keyframes grArmB{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
@keyframes grLensGlint{0%,100%{opacity:.35}50%{opacity:.95}}
@keyframes grLensScan{0%{r:11;opacity:.55}100%{r:30;opacity:0}}

@media (prefers-reduced-motion:reduce){
  .gr-eye-lid,.gr-eye-pupil,.gr-eye-ring,.gr-mar-bar,.gr-mar-figure,
  .gr-net-edge,.gr-net-core,.gr-net-ring,.gr-net-node,
  .gr-det,.gr-det-bob,.gr-det-legF,.gr-det-legB,.gr-det-armB,
  .gr-det-lens,.gr-det-scan,.gr-search-beam,.gr-search-lens{animation:none}
}
@media (max-width:860px){
  .gr-beo-grid{grid-template-columns:1fr}
  .gr-scene{max-width:320px;margin-top:8px}
}
`;

/* ── Szene 1: Das Auge ─────────────────────────── */
function SceneEye() {
  return (
    <div className="gr-scene" aria-hidden="true">
      <svg viewBox="0 0 300 300">
        {/* Scan-Ringe */}
        <circle className="gr-eye-ring stroke-red" cx="150" cy="150" r="30" fill="none" strokeWidth="1" />
        <circle className="gr-eye-ring b stroke-red" cx="150" cy="150" r="30" fill="none" strokeWidth="1" />
        <g className="gr-eye-lid">
          {/* Augenform */}
          <path d="M40 150 Q150 70 260 150 Q150 230 40 150 Z"
            className="stroke-mid" fill="none" strokeWidth="2" />
          {/* Iris */}
          <circle cx="150" cy="150" r="46" className="stroke-faint" fill="none" strokeWidth="1.5" />
          <circle cx="150" cy="150" r="46" fill="rgba(200,30,58,.08)" />
          {/* Pupille scannt */}
          <g className="gr-eye-pupil">
            <circle cx="150" cy="150" r="22" className="fill-red" />
            <circle cx="150" cy="150" r="22" fill="none" className="stroke-red" strokeWidth="6" opacity=".4" />
            <circle cx="142" cy="142" r="6" className="fill-paper" opacity=".7" />
          </g>
        </g>
      </svg>
    </div>
  );
}

/* ── Szene 2: Marionette ─────────────────────────── */
function SceneMarionette() {
  // Strings: von Steuerkreuz-Enden zu Kopf/Händen
  return (
    <div className="gr-scene" aria-hidden="true">
      <svg viewBox="0 0 300 300">
        {/* Steuerkreuz */}
        <g className="gr-mar-bar">
          <line x1="80" y1="40" x2="220" y2="40" className="stroke-mid" strokeWidth="3" strokeLinecap="round" />
          <line x1="150" y1="30" x2="150" y2="50" className="stroke-mid" strokeWidth="3" strokeLinecap="round" />
          <circle cx="80" cy="40" r="4" className="fill-red" />
          <circle cx="220" cy="40" r="4" className="fill-red" />
        </g>
        {/* Fäden */}
        <g className="stroke-faint" strokeWidth="1">
          <line x1="80" y1="44" x2="120" y2="150" />
          <line x1="220" y1="44" x2="180" y2="150" />
          <line x1="150" y1="50" x2="150" y2="110" />
        </g>
        {/* roter Impuls, der einen Faden hinunterläuft */}
        <circle r="3" className="fill-red">
          <animateMotion dur="3.2s" repeatCount="indefinite" path="M150 50 L150 110" />
        </circle>
        {/* Figur */}
        <g className="gr-mar-figure stroke-mid" fill="none" strokeWidth="3" strokeLinecap="round">
          <circle cx="150" cy="125" r="15" className="stroke-mid" fill="rgba(245,242,242,.04)" />
          <line x1="150" y1="140" x2="150" y2="195" />
          <line x1="120" y1="150" x2="150" y2="160" />
          <line x1="180" y1="150" x2="150" y2="160" />
          <line x1="150" y1="195" x2="128" y2="240" />
          <line x1="150" y1="195" x2="172" y2="240" />
          <circle cx="120" cy="150" r="4" className="fill-red" stroke="none" />
          <circle cx="180" cy="150" r="4" className="fill-red" stroke="none" />
        </g>
      </svg>
    </div>
  );
}

/* ── Szene 3: Einfluss-Netz ─────────────────────────── */
function SceneNetwork() {
  const nodes = [
    { x: 60, y: 70 }, { x: 240, y: 60 }, { x: 250, y: 200 },
    { x: 70, y: 230 }, { x: 150, y: 250 }, { x: 60, y: 150 }, { x: 235, y: 130 },
  ];
  const core = { x: 150, y: 150 };
  return (
    <div className="gr-scene" aria-hidden="true">
      <svg viewBox="0 0 300 300">
        {/* Kanten vom Kern zu Knoten */}
        <g fill="none">
          {nodes.map((n, i) => (
            <line key={i} x1={core.x} y1={core.y} x2={n.x} y2={n.y}
              className="gr-net-edge stroke-red" strokeWidth="1.2"
              style={{ animationDelay: `${i * 0.28}s`, opacity: 0.7 }} />
          ))}
        </g>
        {/* Knoten, die nacheinander "ansteckt" werden */}
        {nodes.map((n, i) => (
          <circle key={i} cx={n.x} cy={n.y} r="4" className="gr-net-node fill-red"
            style={{ animationDelay: `${0.4 + i * 0.3}s` }} />
        ))}
        {/* Kern */}
        <circle cx={core.x} cy={core.y} r="10" className="gr-net-ring stroke-red" fill="none" strokeWidth="1.2" />
        <circle cx={core.x} cy={core.y} r="8" className="gr-net-core fill-red" />
        <circle cx={core.x} cy={core.y} r="14" className="stroke-red" fill="none" strokeWidth="1.5" opacity=".4" />
      </svg>
    </div>
  );
}

function BeoScene({ variant }) {
  if (variant === "marionette") return <SceneMarionette />;
  if (variant === "network") return <SceneNetwork />;
  return <SceneEye />;
}

/* ── Laufender Detektiv (Sektions-Hintergrund "Beobachtung") ──────────
   Silhouette mit Lupe, die langsam durch den Bereich läuft und sucht.
   Falls echtes Videomaterial vorliegt, kann es hier hinterlegt werden. */
function DetectiveBg() {
  return (
    <div className="gr-det" aria-hidden="true">
      <svg viewBox="0 0 120 170">
        <g className="gr-det-bob">
          {/* Beine */}
          <line className="gr-det-legB stroke-mid" x1="57" y1="104" x2="45" y2="150"
            strokeWidth="4" strokeLinecap="round" />
          <line className="gr-det-legF stroke-mid" x1="57" y1="104" x2="71" y2="150"
            strokeWidth="4" strokeLinecap="round" />
          {/* Torso */}
          <line className="stroke-mid" x1="58" y1="58" x2="57" y2="106"
            strokeWidth="4" strokeLinecap="round" />
          {/* hinterer Arm (schwingt) */}
          <line className="gr-det-armB stroke-mid" x1="58" y1="66" x2="47" y2="92"
            strokeWidth="3.5" strokeLinecap="round" />
          {/* Kopf */}
          <circle cx="60" cy="44" r="11" className="stroke-mid" fill="rgba(245,242,242,.05)" strokeWidth="2.5" />
          {/* Hut (Fedora) */}
          <path d="M43 33 H79" className="stroke-mid" strokeWidth="3.5" strokeLinecap="round" />
          <path d="M50 33 Q51 21 62 22 Q71 23 70 33 Z" className="stroke-mid" fill="rgba(245,242,242,.05)" strokeWidth="2.5" />
          {/* vorderer Arm hält die Lupe */}
          <line className="stroke-mid" x1="58" y1="64" x2="85" y2="78"
            strokeWidth="3.5" strokeLinecap="round" />
          {/* Lupengriff */}
          <line className="stroke-red" x1="85" y1="78" x2="92" y2="85" strokeWidth="3" strokeLinecap="round" />
          {/* Linse */}
          <circle className="gr-det-lens stroke-red" cx="100" cy="92" r="11"
            fill="rgba(200,30,58,.32)" strokeWidth="3" />
          <circle className="gr-det-scan stroke-red" cx="100" cy="92" r="11" fill="none" strokeWidth="1.5" />
        </g>
      </svg>
    </div>
  );
}

/* ── Such-Szene mit Detektivin (Foto-Hintergrund + wandernder Lupen-Schein) ──
   Das Foto liegt als dunkle Szene; der rote Schein wandert über den Boden
   und beleuchtet die Stellen, die gerade "untersucht" werden. */
function SearchScene() {
  return (
    <div className="gr-search" aria-hidden="true">
      <div className="gr-search-img"></div>
      <div className="gr-search-scrim"></div>
      <div className="gr-search-lens"></div>
      <div className="gr-search-beam"></div>
    </div>
  );
}

Object.assign(window, { SCENE_CSS, BeoScene, SceneEye, SceneMarionette, SceneNetwork, DetectiveBg, SearchScene });