// site-global-oversight.jsx — The looped scene + phone.

const { useState: useStateOver, useEffect: useEffectOver, useRef: useRefOver } = React;

// ----- Live clock (UTC) -----------------------------------------------
function GovClock() {
  const [t, setT] = useStateOver(() => fmt(new Date()));
  useEffectOver(() => {
    const id = setInterval(() => setT(fmt(new Date())), 1000);
    return () => clearInterval(id);
  }, []);
  function fmt(d) {
    const h = String(d.getUTCHours()).padStart(2, "0");
    const m = String(d.getUTCMinutes()).padStart(2, "0");
    const s = String(d.getUTCSeconds()).padStart(2, "0");
    return `${h}:${m}:${s} UTC`;
  }
  return <span className="tabular">{t}</span>;
}

// ----- Phone (240×480), reused styling vocabulary --------------------
function GovPhone({ ev, phase }) {
  const p = ev.phases[phase];
  return (
    <div className="gov-phone" aria-hidden="true">
      <div className="gov-phone__notch" />
      <div className="gov-phone__screen">
        <div className="gov-phone__status">
          <span>14:22</span>
          <span>●●●● 5G ●</span>
        </div>

        <div className="gov-phone__appbar">
          <div className="gov-phone__bell">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
              <path d="M13.73 21a2 2 0 0 1-3.46 0" />
            </svg>
            <span className="gov-phone__bell-badge">{phase + 1}</span>
          </div>
          <div className="gov-phone__brand">
            <img src={window.__asset('iconEmblem','assets/r24i-icon.png')} alt="R24" />
          </div>
          <div className="gov-phone__menu"><span /><span /><span /></div>
        </div>

        <div key={ev.cityIdx + "-" + phase} className="gov-phone__card">
          <div className={`gov-phone__pill gov-phone__pill--${p.tone}`}>
            <span className="gov-phone__pill-dot" /> {p.pill}
          </div>
          <p className="gov-phone__cat">{ev.cat}</p>
          <h4 className="gov-phone__title">{ev.incident}</h4>
          <p className="gov-phone__line">{p.label}</p>

          {phase === 0 &&
          <div className="gov-phone__actions">
              <button className="gov-phone__btn gov-phone__btn--ok">OK</button>
              <button className="gov-phone__btn gov-phone__btn--no">NOT OK</button>
            </div>
          }
          {phase === 1 &&
          <div className="gov-phone__progress">
              <div className="gov-phone__progress-bar gov-phone__progress-bar--coral" />
              <span className="gov-phone__progress-lab">Routing to GSOC…</span>
            </div>
          }
          {phase === 2 &&
          <div className="gov-phone__eta">
              <div className="gov-phone__eta-line">
                <span className="gov-phone__eta-dot" />
                <span className="gov-phone__eta-dash" />
                <span className="gov-phone__eta-van">🚐</span>
                <span className="gov-phone__eta-dash" />
                <span className="gov-phone__eta-house">🏠</span>
              </div>
              <span className="gov-phone__eta-text">Response unit en-route</span>
            </div>
          }
          {phase === 3 &&
          <div className="gov-phone__resolved">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <path d="M20 6 9 17l-5-5" />
              </svg>
              <span>Logged · audit signed</span>
            </div>
          }
        </div>

        <div className="gov-phone__tabbar">
          <div className="gov-phone__tab gov-phone__tab--active" />
          <div className="gov-phone__tab" />
          <div className="gov-phone__tab" />
        </div>
      </div>
    </div>);

}

// ----- Live counters that tick during the loop ----------------------
function useGovTicker(seed, every = 1800) {
  const [n, setN] = useStateOver(seed);
  useEffectOver(() => {
    const id = setInterval(() => setN((v) => v + 1 + Math.floor(Math.random() * 2)), every);
    return () => clearInterval(id);
  }, [every]);
  return n;
}

// ----- Main section -------------------------------------------------
function GlobalOversightSection() {
  const [eventIdx, setEventIdx] = useStateOver(0);
  const [phase, setPhase] = useStateOver(0);

  useEffectOver(() => {
    const t = setInterval(() => {
      setPhase((prev) => {
        if (prev < 3) return prev + 1;
        setEventIdx((i) => (i + 1) % GOV_EVENTS.length);
        return 0;
      });
    }, GOV_PHASE_MS);
    return () => clearInterval(t);
  }, []);

  const ev = GOV_EVENTS[eventIdx];
  const incidentsToday = useGovTicker(4128);
  const broadcastsToday = useGovTicker(1294, 2200);
  const dispatches = useGovTicker(312, 2800);

  return (
    <section className="gov" id="global-oversight">
      <div className="container">
        <header className="gov__head">
          <p className="eyebrow eyebrow--teal">
            <span className="gov__live-dot" />
            Live operations
          </p>
          <h2 className="section-h2">Global oversight. Always on.</h2>
          <p className="section-sub">Every incident matched. Every response confirmed. Across {GOV_CITIES.length}+ active cities and 40+ countries — in real time.</p>
        </header>

        <div className="gov__stage">
          <div className="gov__map" role="img" aria-label="World map with active R24 operations">
            <img className="gov__map-img" src={window.__asset('worldMap','assets/r24-world-map.png')} alt="" />
            <div className="gov__map-veil" />
            <div className="gov__map-overlay">
              {GOV_CITIES.map((c, i) => {
                const active = i === ev.cityIdx;
                return (
                  <div
                    key={i}
                    className={`gov__dot ${active ? "gov__dot--active" : ""}`}
                    style={{ left: `${c.x}%`, top: `${c.y}%`, animationDelay: `${i * 137 % 1800}ms` }}
                    title={c.n}>
                    
                    <span className="gov__dot-core" />
                    {active &&
                    <>
                        <span className="gov__ripple" />
                        <span className="gov__ripple gov__ripple--delay" />
                        <span className="gov__label">
                          <span className="gov__label-name">{c.n}</span>
                          <span className="gov__label-meta">{ev.cat}</span>
                        </span>
                      </>
                    }
                  </div>);

              })}
            </div>

            {/* Map corner overlays */}
            <div className="gov__corner gov__corner--tl">
              <span className="gov__corner-dot" />
              LIVE · GSOC-04
            </div>
            <div className="gov__corner gov__corner--tr">
              <GovClock />
            </div>
            <div className="gov__corner gov__corner--bl">
              {GOV_CITIES.length} CITIES · 40+ COUNTRIES · 6 CONTINENTS
            </div>
            <div className="gov__corner gov__corner--br tabular">
              INCIDENTS TODAY: <strong>{incidentsToday.toLocaleString()}</strong>
            </div>

            {/* Floating event banner anchored to the active city */}
            <div className="gov__event-banner" key={eventIdx}>
              <span className={`gov__event-pill gov__event-pill--${ev.phases[phase].tone}`}>{ev.phases[phase].pill}</span>
              <span className="gov__event-text">
                <strong>{GOV_CITIES[ev.cityIdx].n}</strong> · {ev.incident}
              </span>
            </div>
          </div>

          <aside className="gov__phone-bay">
            <GovPhone ev={ev} phase={phase} />
            <div className="gov__phone-cap">
              <span className="gov__phone-cap-lab">User device</span>
              <span className="gov__phone-cap-name">{GOV_CITIES[ev.cityIdx].n}</span>
            </div>
          </aside>
        </div>

        <div className="gov__stats">
          <div className="gov__stat">
            <span className="gov__stat-val tabular">{incidentsToday.toLocaleString()}</span>
            <span className="gov__stat-lab">Incidents matched today</span>
          </div>
          <div className="gov__stat">
            <span className="gov__stat-val tabular">{broadcastsToday.toLocaleString()}</span>
            <span className="gov__stat-lab">Broadcasts delivered today</span>
          </div>
          <div className="gov__stat">
            <span className="gov__stat-val tabular">{dispatches.toLocaleString()}</span>
            <span className="gov__stat-lab">Responses dispatched today</span>
          </div>
          <div className="gov__stat">
            <span className="gov__stat-val">99.4<small>%</small></span>
            <span className="gov__stat-lab">Two-way safety confirmed</span>
          </div>
        </div>
      </div>
    </section>);

}

window.GlobalOversightSection = GlobalOversightSection;
window.GovPhone = GovPhone;
window.GovClock = GovClock;

// =============================================================
// Compact stage — for the hero's right column.
// Just the world map with ripples + event banner. No synced phone,
// no stats — those would be too dense for a hero slot.
// =============================================================
function GlobalCompactStage() {
  const [eventIdx, setEventIdx] = useStateOver(0);
  const [phase, setPhase] = useStateOver(0);

  useEffectOver(() => {
    const t = setInterval(() => {
      setPhase((prev) => {
        if (prev < 3) return prev + 1;
        setEventIdx((i) => (i + 1) % GOV_EVENTS.length);
        return 0;
      });
    }, GOV_PHASE_MS);
    return () => clearInterval(t);
  }, []);

  const ev = GOV_EVENTS[eventIdx];

  return (
    <div className="gov-compact" aria-hidden="true">
      <div className="gov-compact__caption">
        <p className="gov-compact__eyebrow">
          <span className="gov__live-dot" />
          Live operations
        </p>
        <h3 className="gov-compact__title">Global oversight. Always on.</h3>
      </div>
      <div className="gov-compact__map" role="img" aria-label="Live R24 global operations">
        <img className="gov__map-img" src={window.__asset('worldMap','assets/r24-world-map.png')} alt="" data-comment-anchor="16bf65f1d5-img-257-9" />
        <div className="gov__map-veil" />
        <div className="gov__map-overlay">
          {GOV_CITIES.map((c, i) => {
            const active = i === ev.cityIdx;
            return (
              <div
                key={i}
                className={`gov__dot ${active ? "gov__dot--active" : ""}`}
                style={{ left: `${c.x}%`, top: `${c.y}%`, animationDelay: `${i * 137 % 1800}ms` }}
                title={c.n}>
                
                <span className="gov__dot-core" />
                {active &&
                <>
                    <span className="gov__ripple" />
                    <span className="gov__ripple gov__ripple--delay" />
                    <span className="gov__label">
                      <span className="gov__label-name">{c.n}</span>
                      <span className="gov__label-meta">{ev.cat}</span>
                    </span>
                  </>
                }
              </div>);

          })}
        </div>

        <div className="gov__corner gov__corner--tl">
          <span className="gov__corner-dot" />
          LIVE · GSOC-04
        </div>
        <div className="gov__corner gov__corner--tr">
          <GovClock />
        </div>
        <div className="gov__corner gov__corner--bl gov-compact__corner-stat">
          {GOV_CITIES.length} CITIES · 40+ COUNTRIES
        </div>

        <div className="gov__event-banner gov-compact__event" key={eventIdx}>
          <span className={`gov__event-pill gov__event-pill--${ev.phases[phase].tone}`}>{ev.phases[phase].pill}</span>
          <span className="gov__event-text">
            <strong>{GOV_CITIES[ev.cityIdx].n}</strong> · {ev.incident}
          </span>
        </div>

        {/* Synced phone overlay — same alert as the active city ripple */}
        <div className="gov-compact__phone-overlay">
          <GovPhone ev={ev} phase={phase} />
        </div>
      </div>
    </div>);

}

// =============================================================
// Mobile showcase section — wraps the original HeroPhoneLoop
// (now repurposed as the centerpiece of a "your employees, in
// their pocket, always" section).
// =============================================================
function MobileShowcaseSection() {
  const Phone = window.HeroPhoneLoop;
  return (
    <section className="mob-showcase" id="mobile">
      <div className="container">
        <div className="mob-showcase__grid">
          <div className="mob-showcase__copy">
            <p className="eyebrow eyebrow--teal">Mobile · Daily-use safety companion</p>
            <h2 className="section-h2">Your employees, in their pocket.<br />Always on. Always remembered.</h2>
            <p className="section-sub">
              One app for risk intelligence, broadcasts, reverse panic, journey check-ins, and live emergency response. Used every day — so muscle memory exists when it matters.
            </p>
            <ul className="mob-showcase__pills">
              <li><span className="mob-showcase__pill-dot mob-showcase__pill-dot--coral" />Auto-broadcasts based on live geofence proximity</li>
              <li><span className="mob-showcase__pill-dot mob-showcase__pill-dot--gold" />One-tap NOT OK · escalates to GSOC + dispatches in &lt;30s</li>
              <li><span className="mob-showcase__pill-dot mob-showcase__pill-dot--teal" />Silent duress PIN · audio buffer + GPS captured discretely</li>
              <li><span className="mob-showcase__pill-dot mob-showcase__pill-dot--gold" />Works offline · syncs on reconnect</li>
            </ul>
            <div className="mob-showcase__ctas">
              <a href="#contact" className="btn-red-lg">
                <SIcon d={SIcons.calendar} size={15} />
                Book a mobile walkthrough
              </a>
            </div>
          </div>

          <div className="mob-showcase__device">
            <div className="device device--phone">
              <div className="device__screen">
                <div className="device__island" />
                {Phone ? <Phone /> : null}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

window.GlobalCompactStage = GlobalCompactStage;
window.MobileShowcaseSection = MobileShowcaseSection;