/* RADAR1 — simulated hero feeds (abstract animated stand-ins for live video) */

/* slow camera drift wrapper */
function KenBurns({ children, dur = 26 }) {
  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: "-3%", animation: `r1-kb ${dur}s ease-in-out infinite alternate` }}>
        {children}
      </div>
    </div>
  );
}

/* STUDIO — navy set, volumetric key lights, desk horizon, faint wall wordmark */
function FeedStudio() {
  return (
    <KenBurns>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(160deg, #101F35 0%, #0A1524 55%, #060C17 100%)" }} />
      {/* set wall glow panels */}
      <div style={{ position: "absolute", left: "6%", top: "12%", width: "34%", height: "48%", background: "linear-gradient(135deg, rgba(31,168,224,0.20), rgba(31,168,224,0.02))", borderRadius: "0 10px 10px 0", filter: "blur(2px)" }} />
      <div style={{ position: "absolute", right: "8%", top: "18%", width: "26%", height: "40%", background: "linear-gradient(135deg, rgba(228,3,46,0.16), rgba(228,3,46,0.02))", borderRadius: "0 10px 10px 0", filter: "blur(2px)" }} />
      {/* faint wall brand */}
      <div style={{ position: "absolute", left: "50%", top: "30%", transform: "translateX(-50%)", fontFamily: "var(--font-brand)", fontWeight: 900, fontSize: 120, letterSpacing: "-0.02em", color: "rgba(255,255,255,0.05)", whiteSpace: "nowrap", userSelect: "none" }}>RADAR1</div>
      {/* volumetric beams */}
      <div style={{ position: "absolute", inset: 0, overflow: "hidden" }}>
        <div style={{ position: "absolute", top: "-30%", left: "18%", width: "16%", height: "160%", background: "linear-gradient(to bottom, rgba(255,255,255,0.10), rgba(255,255,255,0))", transform: "rotate(16deg)", animation: "r1-beam 9s ease-in-out infinite alternate" }} />
        <div style={{ position: "absolute", top: "-30%", left: "58%", width: "12%", height: "160%", background: "linear-gradient(to bottom, rgba(31,168,224,0.10), rgba(31,168,224,0))", transform: "rotate(-12deg)", animation: "r1-beam 12s ease-in-out infinite alternate-reverse" }} />
      </div>
      {/* anchor desk */}
      <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: "26%", background: "linear-gradient(to top, #060C17 30%, rgba(6,12,23,0.6))" }} />
      <div style={{ position: "absolute", left: "16%", right: "34%", bottom: "16%", height: "9%", background: "linear-gradient(180deg, #172438, #101C2E)", borderRadius: "0 14px 14px 0", borderTop: "1px solid rgba(255,255,255,0.10)", boxShadow: "0 18px 40px rgba(0,0,0,0.5)", opacity: 0.75 }}>
        <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 5, background: "var(--grad-red)" }} />
      </div>
    </KenBurns>
  );
}

/* FIELD — night city bokeh, slow pan, occasional aircraft blink */
function FeedCity() {
  const dots = React.useMemo(() => Array.from({ length: 26 }, (_, i) => ({
    x: (i * 37 + 11) % 100, y: 30 + ((i * 53 + 7) % 55), s: 6 + (i * 13) % 18,
    c: i % 5 === 0 ? "255,176,0" : i % 7 === 0 ? "31,168,224" : "255,236,200",
    o: 0.25 + ((i * 29) % 40) / 100, d: (i % 6),
  })), []);
  return (
    <KenBurns dur={34}>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to bottom, #08101E 0%, #0B1830 52%, #060C17 100%)" }} />
      {/* skyline mass */}
      <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: "46%", background: "linear-gradient(to top, #04070D 55%, rgba(4,7,13,0))" }} />
      {dots.map((d, i) => (
        <span key={i} style={{
          position: "absolute", left: d.x + "%", top: d.y + "%", width: d.s, height: d.s,
          borderRadius: "50%", background: `rgba(${d.c},${d.o})`, filter: `blur(${d.s / 5}px)`,
          animation: `r1-flicker ${3 + d.d}s ease-in-out ${d.d * 0.7}s infinite alternate`,
        }} />
      ))}
      <span style={{ position: "absolute", left: "20%", top: "14%", width: 5, height: 5, borderRadius: "50%", background: "rgba(255,80,80,0.9)", animation: "r1-blink 1.6s steps(2,start) infinite, r1-drift-x 30s linear infinite" }} />
      <div style={{ position: "absolute", inset: 0, background: "var(--scrim-bottom)", opacity: 0.5 }} />
    </KenBurns>
  );
}

/* RADAR — dark map field, graticule, drifting precip cells, rotating sweep */
function FeedRadar() {
  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden", background: "radial-gradient(120% 120% at 50% 45%, #0D1B2E 0%, #081120 60%, #060C17 100%)" }}>
      <svg viewBox="0 0 1280 720" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.5 }}>
        <g stroke="rgba(31,168,224,0.16)" strokeWidth="1" fill="none">
          {Array.from({ length: 9 }, (_, i) => <path key={"m" + i} d={`M ${i * 160} 0 Q ${i * 160 + 40} 360 ${i * 160} 720`} />)}
          {Array.from({ length: 5 }, (_, i) => <path key={"p" + i} d={`M 0 ${i * 160 + 40} Q 640 ${i * 160 + 4} 1280 ${i * 160 + 40}`} />)}
        </g>
        <g fill="none" stroke="rgba(255,255,255,0.20)" strokeWidth="1.5">
          <circle cx="640" cy="380" r="150" /><circle cx="640" cy="380" r="290" />
        </g>
      </svg>
      {/* precip cells */}
      {[
        { x: "30%", y: "34%", w: 300, c1: "rgba(31,168,224,0.5)", c2: "rgba(23,178,106,0.28)", d: 60 },
        { x: "56%", y: "52%", w: 380, c1: "rgba(23,178,106,0.42)", c2: "rgba(255,176,0,0.30)", d: 80 },
        { x: "68%", y: "30%", w: 200, c1: "rgba(255,176,0,0.45)", c2: "rgba(228,3,46,0.30)", d: 46 },
      ].map((b, i) => (
        <div key={i} style={{
          position: "absolute", left: b.x, top: b.y, width: b.w, height: b.w * 0.62,
          background: `radial-gradient(60% 60% at 40% 50%, ${b.c1}, ${b.c2} 55%, transparent 78%)`,
          filter: "blur(14px)", borderRadius: "50%",
          animation: `r1-cell ${b.d}s ease-in-out infinite alternate`,
        }} />
      ))}
      {/* rotating sweep */}
      <div style={{ position: "absolute", left: "50%", top: "52.7%", width: "82%", aspectRatio: "1/1", transform: "translate(-50%,-50%)", borderRadius: "50%", overflow: "hidden", opacity: 0.55 }}>
        <div style={{ position: "absolute", inset: 0, animation: "r1-rotate 7s linear infinite" }}>
          <div style={{ position: "absolute", inset: 0, background: "conic-gradient(from 0deg, rgba(31,168,224,0) 0deg, rgba(31,168,224,0) 300deg, rgba(31,168,224,0.28) 352deg, rgba(255,255,255,0.5) 360deg)" }} />
        </div>
      </div>
      <div style={{ position: "absolute", inset: 0, background: "var(--scrim-bottom)", opacity: 0.35 }} />
    </div>
  );
}

/* MARKETS — chart wall: grid, drawing index line, drifting numerals */
function FeedMarkets() {
  const pts = "0,300 80,286 160,296 240,262 320,270 400,238 480,252 560,214 640,226 720,196 800,204 880,168 960,184 1040,150 1120,158 1200,124 1280,136";
  return (
    <KenBurns dur={30}>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(135deg, #0B1626 0%, #060C17 70%)" }} />
      <svg viewBox="0 0 1280 460" preserveAspectRatio="none" style={{ position: "absolute", left: 0, right: 0, bottom: "8%", height: "64%", width: "100%" }}>
        <g stroke="rgba(255,255,255,0.06)" strokeWidth="1">
          {Array.from({ length: 7 }, (_, i) => <line key={i} x1="0" x2="1280" y1={i * 70 + 20} y2={i * 70 + 20} />)}
        </g>
        <polyline points={pts} fill="none" stroke="var(--signal-green)" strokeWidth="3.5"
          strokeLinejoin="round" strokeLinecap="round" pathLength="100"
          style={{ strokeDasharray: 100, animation: "r1-draw 12s var(--ease-out) infinite" }} />
        <polyline points={pts} fill="none" stroke="rgba(23,178,106,0.22)" strokeWidth="10" strokeLinejoin="round" filter="blur(6px)" />
      </svg>
      <div style={{ position: "absolute", left: "6%", top: "10%", display: "flex", gap: 36, fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 44, color: "rgba(255,255,255,0.10)", letterSpacing: "-0.02em", fontVariantNumeric: "tabular-nums" }}>
        <span>6,412.30</span><span>+0.82%</span><span>21,884</span>
      </div>
    </KenBurns>
  );
}

/* PRESSER — podium cone of light + camera flashes */
function FeedPresser() {
  return (
    <KenBurns dur={24}>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to bottom, #0A1524 0%, #081120 60%, #060C17 100%)" }} />
      <div style={{ position: "absolute", left: "50%", top: "-10%", width: "44%", height: "110%", transform: "translateX(-50%)", background: "radial-gradient(50% 70% at 50% 0%, rgba(255,255,255,0.14), rgba(255,255,255,0) 70%)", clipPath: "polygon(38% 0, 62% 0, 96% 100%, 4% 100%)" }} />
      {/* podium */}
      <div style={{ position: "absolute", left: "50%", bottom: "12%", transform: "translateX(-50%)", width: "18%", height: "22%", background: "linear-gradient(180deg, #16233A, #0C1626)", borderRadius: "0 12px 12px 0", borderTop: "1px solid rgba(255,255,255,0.2)", boxShadow: "0 20px 50px rgba(0,0,0,0.55)" }}>
        <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 4, background: "var(--grad-red)" }} />
      </div>
      <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: "18%", background: "linear-gradient(to top, #04070D 40%, rgba(4,7,13,0))" }} />
      {/* camera flashes */}
      <div style={{ position: "absolute", inset: 0, background: "rgba(255,255,255,0.9)", opacity: 0, animation: "r1-flash 7s linear infinite" }} />
      <div style={{ position: "absolute", inset: 0, background: "rgba(255,255,255,0.7)", opacity: 0, animation: "r1-flash 11s linear 3.4s infinite" }} />
    </KenBurns>
  );
}

const HERO_SCENES = {
  studio:  { label: "STUDIO",   comp: FeedStudio,  locator: "RADAR1 STUDIO 4 · NEW YORK", tz: "America/New_York",  source: "RADAR1 ORIGINAL" },
  field:   { label: "FIELD",    comp: FeedCity,    locator: "WARSAW, POLAND",            tz: "Europe/Warsaw",     source: "EBU POOL FEED" },
  radar:   { label: "RADAR",    comp: FeedRadar,   locator: "GULF COAST COMPOSITE",      tz: "America/Chicago",   source: "NOAA · RADAR1 COMPOSITE" },
  markets: { label: "MARKETS",  comp: FeedMarkets, locator: "NYSE FLOOR FEED",           tz: "America/New_York",  source: "NYSE CAM 2" },
  presser: { label: "PRESSER",  comp: FeedPresser, locator: "BRUSSELS · NATO HQ",        tz: "Europe/Brussels",   source: "HOST BROADCASTER POOL" },
};

/* SimFeed — scene switcher with crossfade */
function SimFeed({ scene = "studio", dim = 0 }) {
  const def = HERO_SCENES[scene] || HERO_SCENES.studio;
  const Comp = def.comp;
  return (
    <div style={{ position: "absolute", inset: 0, background: "#060C17" }}>
      <div key={scene} style={{ position: "absolute", inset: 0, animation: "r1-feedfade 500ms var(--ease-out) both" }}>
        <Comp />
      </div>
      {dim > 0 && <div style={{ position: "absolute", inset: 0, background: `rgba(4,7,13,${dim})`, transition: "background 300ms var(--ease-out)" }} />}
    </div>
  );
}

Object.assign(window, { SimFeed, HERO_SCENES, KenBurns });