/* RADAR1 — breakout scenes: opener, bumper, station ID (full-stage overlays) */
const DSb = window.Radar1DesignSystem_1f4661;

/* Expanding radar rings backdrop */
function RingField({ accent = "rgba(31,168,224,0.35)", n = 4 }) {
  return (
    <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", overflow: "hidden" }}>
      {Array.from({ length: n }, (_, i) => (
        <span key={i} style={{
          gridArea: "1/1", width: 220, height: 220, borderRadius: "50%",
          border: `1.5px solid ${accent}`,
          animation: `r1-ringgrow 4.2s var(--ease-out) ${i * 1.05}s infinite`,
        }} />
      ))}
      <span style={{ gridArea: "1/1", width: 640, height: 640, borderRadius: "50%", border: "1px solid rgba(255,255,255,0.08)" }} />
      <span style={{ gridArea: "1/1", width: 380, height: 380, borderRadius: "50%", border: "1px solid rgba(255,255,255,0.10)" }} />
    </div>
  );
}

/* ---------- OPENER (~10s) ---------- */
function Opener({ onDone, duration = 10000 }) {
  const now = useNow();
  React.useEffect(() => {
    const id = setTimeout(onDone, duration);
    return () => clearTimeout(id);
  }, []);
  const outAt = (duration - 900) + "ms";
  return (
    <div style={{ position: "absolute", inset: 0, zIndex: 80, background: "radial-gradient(120% 120% at 50% 42%, #0C1A2E 0%, #060C17 70%)", overflow: "hidden", fontFamily: "var(--font-ui)" }}>
      {/* phase 1: rings + sweep */}
      <div style={{ position: "absolute", inset: 0, animation: "r1-op-rings 10s var(--ease-out) both" }}>
        <RingField />
        <div style={{ position: "absolute", left: "50%", top: "50%", width: 900, height: 900, transform: "translate(-50%,-50%)", borderRadius: "50%", overflow: "hidden", opacity: 0.5 }}>
          <div style={{ position: "absolute", inset: 0, animation: "r1-rotate 5s linear infinite" }}>
            <div style={{ position: "absolute", inset: 0, background: "conic-gradient(from 0deg, rgba(31,168,224,0) 0deg, rgba(31,168,224,0) 290deg, rgba(31,168,224,0.22) 348deg, rgba(255,255,255,0.55) 360deg)" }} />
          </div>
        </div>
      </div>

      {/* phase 2: wordmark assembly */}
      <div style={{ position: "absolute", left: "50%", top: "44%", transform: "translate(-50%,-50%)", display: "flex", alignItems: "stretch", height: 150 }}>
        <div style={{ display: "flex", alignItems: "center", padding: "0 44px", border: "6px solid var(--radar-red)", borderRight: "none", overflow: "hidden", animation: "r1-op-frame 700ms var(--ease-broadcast) 1400ms both" }}>
          <span style={{ fontFamily: "var(--font-brand)", fontWeight: 900, fontSize: 118, letterSpacing: "-0.01em", lineHeight: 1, color: "#fff", animation: "r1-op-letters 800ms var(--ease-broadcast) 1750ms both" }}>RADAR</span>
        </div>
        <div style={{ position: "relative", width: 150, background: "var(--radar-red)", borderRadius: "0 30px 30px 0", overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center", animation: "r1-op-block 650ms var(--ease-broadcast) 2350ms both" }}>
          <div style={{ position: "absolute", left: "50%", top: "50%", width: "88%", aspectRatio: "1/1", transform: "translate(-50%,-50%)", borderRadius: "50%", overflow: "hidden", boxShadow: "inset 0 0 0 2px rgba(255,255,255,0.22)" }}>
            <div style={{ position: "absolute", inset: 0, animation: "r1-rotate 4s linear infinite" }}>
              <div style={{ position: "absolute", inset: 0, background: "conic-gradient(from 0deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,0) 250deg, rgba(255,255,255,0.28) 330deg, rgba(255,255,255,0.9) 360deg)" }} />
            </div>
          </div>
          <span style={{ position: "relative", fontFamily: "var(--font-brand)", fontWeight: 900, fontSize: 96, color: "#fff", lineHeight: 1 }}>1</span>
        </div>
      </div>

      {/* phase 3: tagline + clock */}
      <div style={{ position: "absolute", left: "50%", top: "63%", transform: "translateX(-50%)", textAlign: "center", animation: "r1-op-tag 700ms var(--ease-broadcast) 3400ms both" }}>
        <div style={{ fontWeight: "var(--fw-bold)", fontSize: 26, letterSpacing: "var(--ls-widest)", color: "var(--text-body)" }}>
          YOUR WORLD · EVERY SECOND
        </div>
        <div style={{ marginTop: 18, display: "inline-flex", alignItems: "center", gap: 16, color: "var(--text-muted)", fontWeight: "var(--fw-semibold)", fontSize: 17, letterSpacing: "var(--ls-wider)", fontVariantNumeric: "tabular-nums" }}>
          <span>{fmtDate(now, "UTC")}</span>
          <span style={{ width: 5, height: 5, background: "var(--radar-red)", borderRadius: "50%" }} />
          <span>{fmtTime(now, "UTC", true, true)} UTC</span>
          <span style={{ width: 5, height: 5, background: "var(--radar-red)", borderRadius: "50%" }} />
          <span style={{ color: "var(--radar-red)", fontWeight: "var(--fw-black)", display: "inline-flex", alignItems: "center", gap: 7 }}><LiveDot size={7} />LIVE</span>
        </div>
      </div>

      {/* phase 4: exit wipe */}
      <div style={{ position: "absolute", top: "-20%", height: "140%", width: "80%", left: 0, background: "var(--grad-red)", transform: "skewX(-14deg) translateX(-170%)", animation: `r1-wipe 900ms var(--ease-broadcast) ${outAt} both`, boxShadow: "0 0 90px rgba(228,3,46,0.5)" }} />
    </div>
  );
}

/* ---------- BUMPER (~4.5s) ---------- */
function Bumper({ onDone, duration = 4500 }) {
  React.useEffect(() => {
    const id = setTimeout(onDone, duration);
    return () => clearTimeout(id);
  }, []);
  const prog = window.R1DATA.programs[0];
  return (
    <div style={{ position: "absolute", inset: 0, zIndex: 80, background: "linear-gradient(140deg, #0E1E36 0%, #0A1524 55%, #060C17 100%)", overflow: "hidden", fontFamily: "var(--font-ui)", animation: `r1-feedfade 400ms var(--ease-out) both` }}>
      <RingField accent="rgba(31,168,224,0.22)" n={3} />
      <div style={{ position: "absolute", left: "50%", top: "50%", transform: "translate(-50%,-50%)", display: "flex", flexDirection: "column", alignItems: "center", gap: 26 }}>
        <Enter dir="down" delay={200}><DSb.Wordmark size={56} animated /></Enter>
        <Enter dir="up" delay={450}>
          <div style={{ display: "flex", alignItems: "stretch", borderRadius: "var(--sweep-md)", overflow: "hidden", boxShadow: "var(--shadow-lg)" }}>
            <div style={{ display: "flex", alignItems: "center", padding: "12px 20px", background: "var(--signal-cyan)", color: "#04121C", fontWeight: "var(--fw-black)", fontSize: 16, letterSpacing: "var(--ls-widest)" }}>COMING UP</div>
            <div style={{ display: "flex", alignItems: "center", gap: 18, padding: "12px 26px", background: "var(--radar-ink-900)", border: "1px solid var(--border-hairline)", borderLeft: "none" }}>
              <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 30, color: "var(--text-strong)", letterSpacing: "var(--ls-tight)" }}>{prog.next.charAt(0) + prog.next.slice(1).toLowerCase()}</span>
              <span style={{ color: "var(--text-muted)", fontWeight: "var(--fw-bold)", fontSize: 16, letterSpacing: "var(--ls-wider)", fontVariantNumeric: "tabular-nums" }}>{prog.nextAt}</span>
            </div>
          </div>
        </Enter>
      </div>
      <div style={{ position: "absolute", top: "-20%", height: "140%", width: "80%", left: 0, background: "var(--grad-red)", transform: "skewX(-14deg) translateX(-170%)", animation: `r1-wipe 800ms var(--ease-broadcast) ${duration - 800}ms both` }} />
    </div>
  );
}

/* ---------- STATION ID (~5s) ---------- */
function StationID({ onDone, duration = 5000 }) {
  const now = useNow();
  React.useEffect(() => {
    const id = setTimeout(onDone, duration);
    return () => clearTimeout(id);
  }, []);
  const trio = window.R1DATA.clocks.slice(0, 3);
  return (
    <div style={{ position: "absolute", inset: 0, zIndex: 80, background: "radial-gradient(110% 110% at 50% 40%, #0B1729 0%, #060C17 72%)", overflow: "hidden", fontFamily: "var(--font-ui)", animation: "r1-feedfade 400ms var(--ease-out) both" }}>
      <div style={{ position: "absolute", left: "50%", top: "50%", transform: "translate(-50%,-50%)", display: "flex", flexDirection: "column", alignItems: "center", gap: 30 }}>
        <Enter dir="down" delay={150}><DSb.Wordmark size={84} animated /></Enter>
        <Enter dir="up" delay={420}>
          <div style={{ fontWeight: "var(--fw-bold)", fontSize: 19, letterSpacing: "var(--ls-widest)", color: "var(--text-muted)", textAlign: "center" }}>
            GLOBAL NEWS NETWORK · 24 / 7
          </div>
        </Enter>
        <Enter dir="up" delay={640}>
          <div style={{ display: "flex", gap: 0, border: "1px solid var(--border-hairline)", borderRadius: "var(--sweep-md)", overflow: "hidden" }}>
            {trio.map((c, i) => (
              <div key={c.label} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4, padding: "12px 30px", borderRight: i < trio.length - 1 ? "1px solid var(--border-hairline)" : "none", background: "rgba(15,24,38,0.6)" }}>
                <span style={{ color: "var(--text-faint)", fontWeight: "var(--fw-bold)", fontSize: 12, letterSpacing: "var(--ls-widest)" }}>{c.label}</span>
                <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 26, color: "var(--text-body)", fontVariantNumeric: "tabular-nums" }}>{fmtTime(now, c.tz, true)}</span>
              </div>
            ))}
          </div>
        </Enter>
      </div>
      <div style={{ position: "absolute", top: "-20%", height: "140%", width: "80%", left: 0, background: "var(--grad-red)", transform: "skewX(-14deg) translateX(-170%)", animation: `r1-wipe 800ms var(--ease-broadcast) ${duration - 800}ms both` }} />
    </div>
  );
}

const BREAKOUTS = { opener: Opener, bumper: Bumper, stationid: StationID };
Object.assign(window, { Opener, Bumper, StationID, BREAKOUTS, RingField });
