/* RADAR1 — inset dressings layered over the hero video */
const DS = window.Radar1DesignSystem_1f4661;

/* ---------- Lower third variants ---------- */
const L3_VARIANTS = {
  story:   { kicker: "TOP STORY",  accent: "var(--radar-red)",
             headline: "Fed signals two rate cuts by year end", subline: "Chair Whitmore: 'confidence inflation is returning to target'" },
  weather: { kicker: "WEATHER ALERT", accent: "var(--signal-amber)",
             headline: "Flash flood warning for Tampa Bay until 21:00 ET", subline: "Radar estimates 3–5 in. rainfall through evening" },
  live:    { kicker: "LIVE · WARSAW", accent: "var(--radar-red)",
             headline: "Poland closes eastern airspace to civilian traffic", subline: "Marta Kowal · Radar1 Europe correspondent" },
  analysis:{ kicker: "ANALYSIS", accent: "var(--signal-violet)",
             headline: "What Article 4 means — and what it doesn't", subline: "Dr. Elena Brandt · Security policy, KCL" },
};

function HeroLowerThird({ variant = "story", situation = false }) {
  let v = L3_VARIANTS[variant] || L3_VARIANTS.story;
  if (situation && window.R1DATA.situation) v = { kicker: window.R1DATA.situation.kicker, accent: "var(--radar-red)",
    headline: window.R1DATA.situation.headline, subline: window.R1DATA.situation.subline || "" };
  return (
    <div style={{ position: "absolute", left: 28, bottom: 28, right: 360, zIndex: 30 }}>
      <DS.LowerThird key={variant + situation} kicker={v.kicker} accent={v.accent}
        headline={v.headline} subline={v.subline} style={{ maxWidth: 780 }} />
    </div>
  );
}

/* ---------- Frame-attached boxes (sit OUTSIDE the inlay, hugging its edges) ---------- */

/* upper-right: live location indicator + local time */
function LocatorBox({ text, tz, h24 }) {
  const now = useNow();
  return (
    <div style={{ position: "absolute", left: 1252, bottom: 0, transform: "translateX(-100%)", display: "flex", alignItems: "center", gap: 12, padding: "9px 18px",
      background: "rgba(13,21,36,0.92)", border: "1px solid var(--border-hairline)", borderBottom: "none", borderRadius: "6px 6px 0 0",
      fontFamily: "var(--font-ui)", whiteSpace: "nowrap", animation: "r1-in-fade 500ms var(--ease-out) both" }}>
      <span style={{ display: "inline-flex", alignItems: "center", gap: 8, color: "var(--radar-red)", fontWeight: "var(--fw-black)", fontSize: 14, letterSpacing: "var(--ls-widest)" }}>
        <LiveDot size={8} />LIVE
      </span>
      <span style={{ width: 1, height: 18, background: "var(--border-hairline)" }} />
      <span style={{ color: "var(--text-strong)", fontWeight: "var(--fw-bold)", fontSize: 16, letterSpacing: "var(--ls-wider)", textTransform: "uppercase" }}>{text}</span>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 19, color: "var(--text-body)", fontVariantNumeric: "tabular-nums" }}>{fmtTime(now, tz, h24)}</span>
    </div>
  );
}

/* lower-right: subdued source / attribution */
function AttributionBox({ text }) {
  return (
    <div style={{ position: "absolute", left: 1252, top: 720, transform: "translateX(-100%)", display: "flex", alignItems: "center", padding: "6px 16px",
      background: "rgba(10,18,31,0.6)", border: "1px solid var(--border-hairline)", borderTop: "none", borderRadius: "0 0 6px 6px",
      fontFamily: "var(--font-ui)", whiteSpace: "nowrap", animation: "r1-in-fade 500ms var(--ease-out) both" }}>
      <span style={{ color: "var(--text-faint)", fontWeight: "var(--fw-semibold)", fontSize: 13.5, letterSpacing: "var(--ls-wider)", textTransform: "uppercase" }}>SOURCE · {text}</span>
    </div>
  );
}

/* ---------- Over-the-shoulder graphic ---------- */
function OTSBox() {
  useLucide([]);
  return (
    <div style={{ position: "absolute", left: 28, top: 26, width: 296, zIndex: 20,
      animation: "r1-enter-right 420ms var(--ease-broadcast) both",
      border: "1px solid var(--border-soft)", borderLeft: "3px solid var(--signal-green)",
      borderRadius: "var(--sweep-md)", overflow: "hidden", boxShadow: "var(--shadow-lg)",
      fontFamily: "var(--font-ui)", background: "var(--radar-ink-900)" }}>
      <div style={{ position: "relative", height: 158, overflow: "hidden",
        background: "linear-gradient(135deg, #0E2038 0%, #081120 70%)" }}>
        <svg viewBox="0 0 280 150" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
          <g stroke="rgba(255,255,255,0.06)" strokeWidth="1">{Array.from({ length: 5 }, (_, i) => <line key={i} x1="0" x2="280" y1={i * 34 + 14} y2={i * 34 + 14} />)}</g>
          <polyline points="0,110 40,102 80,108 120,88 160,94 200,72 240,80 280,58" fill="none" stroke="var(--signal-green)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
        <i data-lucide="trending-up" style={{ position: "absolute", right: 12, top: 10, width: 26, height: 26, color: "var(--signal-green)" }} />
      </div>
      <div style={{ padding: "10px 14px 12px", borderTop: "1px solid var(--border-hairline)" }}>
        <Eyebrow color="var(--signal-green)" style={{ marginBottom: 4 }}>MARKETS</Eyebrow>
        <div style={{ color: "var(--text-strong)", fontWeight: "var(--fw-bold)", fontSize: 21, lineHeight: "var(--lh-snug)" }}>
          Rate-cut rally lifts S&amp;P to record
        </div>
      </div>
    </div>
  );
}

/* ---------- Two box / multibox ---------- */
const BOX_DEFS = [
  { scene: "studio",  strap: "MAYA OKONKWO", sub: "RADAR1 ANCHOR · NEW YORK", accent: "var(--radar-red)" },
  { scene: "field",   strap: "MARTA KOWAL",  sub: "LIVE · WARSAW",           accent: "var(--radar-red)", live: true },
  { scene: "presser", strap: "DEVON PRICE",  sub: "LIVE · BRUSSELS",         accent: "var(--radar-red)", live: true },
];
function MultiBox({ count = 2 }) {
  const boxes = BOX_DEFS.slice(0, count);
  return (
    <div style={{ position: "absolute", inset: 0, background: "linear-gradient(150deg, #0D1B30 0%, #060C17 80%)" }}>
      <div style={{ position: "absolute", left: "50%", top: 0, transform: "translateX(-50%)", fontFamily: "var(--font-brand)", fontWeight: 900, fontSize: 190, color: "rgba(255,255,255,0.035)", letterSpacing: "-0.02em", userSelect: "none" }}>RADAR1</div>
      <div style={{ position: "absolute", inset: "56px 40px 74px", display: "grid",
        gridTemplateColumns: `repeat(${count}, 1fr)`, gap: 24 }}>
        {boxes.map((b, i) => (
          <div key={i} style={{ position: "relative", animation: `r1-enter-up 460ms var(--ease-broadcast) ${i * 90}ms both` }}>
            <div style={{ position: "absolute", inset: 0, border: "1px solid var(--border-soft)",
              borderRadius: "var(--sweep-md)", overflow: "hidden", boxShadow: "var(--shadow-lg)" }}>
              <SimFeed scene={b.scene} />
              {b.live && (
                <div style={{ position: "absolute", top: 12, left: 0, display: "flex", alignItems: "center", gap: 7,
                  padding: "5px 12px 5px 10px", background: "var(--radar-red)", color: "#fff",
                  borderRadius: "0 4px 4px 0", fontFamily: "var(--font-ui)", fontWeight: "var(--fw-black)",
                  fontSize: 12, letterSpacing: "var(--ls-widest)" }}>
                  <LiveDot color="#fff" size={7} />LIVE
                </div>
              )}
            </div>
            {/* name strap */}
            <div style={{ position: "absolute", left: 0, bottom: -14, right: count > 2 ? 0 : 60,
              display: "flex", flexDirection: "column", boxShadow: "var(--shadow-md)",
              borderRadius: "var(--sweep-sm)", overflow: "hidden", fontFamily: "var(--font-ui)" }}>
              <div style={{ background: "var(--radar-ink-900)", borderLeft: `3px solid ${b.accent}`, padding: "8px 14px" }}>
                <div style={{ color: "var(--text-strong)", fontWeight: "var(--fw-bold)", fontSize: 19, letterSpacing: "var(--ls-wide)" }}>{b.strap}</div>
                <div style={{ color: "var(--text-muted)", fontWeight: "var(--fw-semibold)", fontSize: 12, letterSpacing: "var(--ls-wider)", marginTop: 1 }}>{b.sub}</div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- On the phone ---------- */
function PhonePanel() {
  useLucide([]);
  const bars = React.useMemo(() => Array.from({ length: 26 }, (_, i) => i), []);
  return (
    <div style={{ position: "absolute", left: 28, top: 26, bottom: 96, width: 380, zIndex: 22,
      display: "flex", flexDirection: "column", justifyContent: "flex-end",
      animation: "r1-enter-right 460ms var(--ease-broadcast) both" }}>
      <div style={{ background: "rgba(6,12,23,0.82)", backdropFilter: "var(--blur-panel)",
        border: "1px solid var(--border-soft)", borderLeft: "3px solid var(--radar-red)",
        borderRadius: "var(--sweep-md)", overflow: "hidden", boxShadow: "var(--shadow-lg)", fontFamily: "var(--font-ui)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 9, padding: "9px 14px",
          background: "var(--radar-red)", color: "#fff" }}>
          <i data-lucide="phone" style={{ width: 15, height: 15 }} />
          <span style={{ fontWeight: "var(--fw-black)", fontSize: 12.5, letterSpacing: "var(--ls-widest)" }}>ON THE PHONE</span>
          <span style={{ marginLeft: "auto", display: "inline-flex", alignItems: "center", gap: 6, fontWeight: "var(--fw-black)", fontSize: 11.5, letterSpacing: "var(--ls-widest)" }}><LiveDot color="#fff" size={7} />LIVE</span>
        </div>
        <div style={{ padding: "14px 16px 6px" }}>
          <div style={{ color: "var(--text-strong)", fontWeight: "var(--fw-bold)", fontSize: 26, letterSpacing: "var(--ls-tight)" }}>Amb. Katrine Holm</div>
          <div style={{ color: "var(--text-muted)", fontWeight: "var(--fw-semibold)", fontSize: 13.5, letterSpacing: "var(--ls-wider)", textTransform: "uppercase", marginTop: 2 }}>
            Former NATO Deputy Secretary General
          </div>
        </div>
        {/* waveform */}
        <div style={{ display: "flex", alignItems: "center", gap: 3, height: 46, padding: "0 16px 12px" }}>
          {bars.map((i) => (
            <span key={i} style={{ flex: 1, height: "30%", background: "var(--signal-cyan)", opacity: 0.85,
              borderRadius: 1, animation: `r1-wave 900ms ease-in-out ${(i % 7) * 90}ms infinite alternate` }} />
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---------- Inlay locator map (radar-scope style) ---------- */
function MapInlay() {
  return (
    <div style={{ position: "absolute", right: 24, bottom: 28, width: 300, zIndex: 24,
      animation: "r1-enter-left 420ms var(--ease-broadcast) both",
      border: "1px solid var(--border-soft)", borderLeft: "3px solid var(--signal-cyan)",
      borderRadius: "var(--sweep-md)", overflow: "hidden", boxShadow: "var(--shadow-lg)",
      background: "var(--radar-ink-900)", fontFamily: "var(--font-ui)" }}>
      <div style={{ position: "relative", height: 184, background: "radial-gradient(110% 110% at 46% 42%, #0D1D33 0%, #071120 65%, #060C17 100%)", overflow: "hidden" }}>
        <svg viewBox="0 0 300 184" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
          <g fill="none" stroke="rgba(31,168,224,0.30)" strokeWidth="1">
            <circle cx="150" cy="92" r="34" /><circle cx="150" cy="92" r="66" /><circle cx="150" cy="92" r="100" />
            <line x1="150" y1="0" x2="150" y2="184" opacity="0.5" /><line x1="30" y1="92" x2="270" y2="92" opacity="0.5" />
          </g>
          <g stroke="rgba(255,255,255,0.10)" strokeWidth="1" fill="none">
            <path d="M 20 40 Q 90 22 150 44 T 290 30" /><path d="M 10 150 Q 100 128 180 148 T 300 136" />
          </g>
        </svg>
        {/* ping */}
        <span style={{ position: "absolute", left: 150 - 5, top: 92 - 5, width: 10, height: 10, borderRadius: "50%", background: "var(--radar-red)", boxShadow: "var(--glow-red)" }} />
        <span style={{ position: "absolute", left: 150 - 5, top: 92 - 5, width: 10, height: 10, borderRadius: "50%", border: "1.5px solid var(--radar-red)", animation: "r1-ping 2s var(--ease-out) infinite" }} />
        <div style={{ position: "absolute", left: 164, top: 74, padding: "3px 9px", background: "rgba(6,12,23,0.85)", border: "1px solid var(--border-soft)", borderRadius: "0 4px 4px 0", color: "var(--text-strong)", fontWeight: "var(--fw-bold)", fontSize: 12.5, letterSpacing: "var(--ls-wide)" }}>TAMPA, FL</div>
      </div>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "8px 12px", borderTop: "1px solid var(--border-hairline)" }}>
        <Eyebrow color="var(--signal-cyan)">STORM TRACK</Eyebrow>
        <span style={{ color: "var(--text-muted)", fontSize: 12, fontWeight: "var(--fw-semibold)", letterSpacing: "var(--ls-wide)", fontVariantNumeric: "tabular-nums" }}>NNE 12 MPH</span>
      </div>
    </div>
  );
}

/* ---------- Countdown chip: retired — replaced by RailCountdown in rails.jsx ---------- */

Object.assign(window, {
  HeroLowerThird, OTSBox, MultiBox, PhonePanel, MapInlay,
  LocatorBox, AttributionBox, L3_VARIANTS,
});