// site-hero.jsx — Nav + Hero (PULSE/Response switcher) + Trust band + Awards
const { useState, useEffect } = React;

const SIcon = ({ d, size = 14, stroke = 2, fill = "none" }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke="currentColor"
strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
    {typeof d === "string" ? <path d={d} /> : d}
  </svg>;

const SIcons = {
  check: "M20 6 9 17l-5-5",
  play: <><circle cx="12" cy="12" r="10" /><polygon points="10,8 16,12 10,16" /></>,
  calendar: <><rect x="3" y="4" width="18" height="18" rx="2" /><line x1="16" y1="2" x2="16" y2="6" /><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" /></>,
  shield: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z",
  award: <><circle cx="12" cy="8" r="6" /><path d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11" /></>,
  cpu: <><rect x="2" y="3" width="20" height="14" rx="2" /><line x1="8" y1="21" x2="16" y2="21" /><line x1="12" y1="17" x2="12" y2="21" /></>,
  arrow: "M5 12h14M12 5l7 7-7 7"
};

function R24Nav() {
  const [open, setOpen] = useState(false);
  // Close drawer on link click / esc / resize
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => e.key === "Escape" && setOpen(false);
    const onResize = () => window.innerWidth > 960 && setOpen(false);
    document.addEventListener("keydown", onKey);
    window.addEventListener("resize", onResize);
    return () => {document.removeEventListener("keydown", onKey);window.removeEventListener("resize", onResize);};
  }, [open]);

  return (
    <nav className="r24-nav" aria-label="Main navigation" data-mobile-open={open ? "1" : "0"}>
      <div className="container r24-nav__inner">
        <a href="#" className="r24-nav__logo" aria-label="R24 International home">
          <img src={window.__asset('logoWhite','assets/r24i-horizontal-white.png')} alt="Response24 International" style={{ height: 36, width: "auto", display: "block" }} />
        </a>
        <div className="r24-nav__links" onClick={(e) => {if (e.target.tagName === "A") setOpen(false);}}>
          <a href="#pulse">R24 PULSE</a>
          <a href="#modules">Modules</a>
          <a href="#why-r24">Why R24</a>
          <a href="#response">R24 Response</a>
          <a href="#roi">ROI</a>
          <a href="#how">How It Works</a>
          <a href="#contact">Contact</a>
        </div>
        <div className="r24-nav__actions">
          <a href="#contact" className="btn-coral">Book a demo</a>
          <button
            className="r24-nav__hamburger"
            aria-label={open ? "Close menu" : "Open menu"}
            aria-expanded={open}
            onClick={() => setOpen((o) => !o)}>
            
            {open ?
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg> :

            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M4 7h16M4 12h16M4 17h16" /></svg>
            }
          </button>
        </div>
      </div>
    </nav>);

}

function HeroPulse() {
  return (
    <div className="r24-hero__inner" id="hero-pulse">
      <div>
        <div className="r24-hero__badges">
          <span className="r24-badge r24-badge--teal"><SIcon d={SIcons.shield} size={10} stroke={2.5} />ISO 27001 · ISO 31030</span>
          <span className="r24-badge r24-badge--teal"><SIcon d={SIcons.cpu} size={10} stroke={2.5} />AWS Enterprise</span>
          <span className="r24-badge r24-badge--gold"><SIcon d={SIcons.award} size={10} stroke={2.5} />Award-winning</span>
        </div>
        <h1 className="r24-hero__title" style={{ fontSize: "48px" }}>
          Your employees are<br />
          <em>everywhere.</em><br />
          Is your ability to respond fast?
        </h1>
        <p className="r24-hero__sub">
          R24 PULSE turns fragmented safety tools into a single enterprise Duty of Care platform — purpose-driven location matching when risk emerges, travel risk management, emergency response, and an audit trail your board can defend. Built for multinationals running in high-risk environments.
        </p>
        <div className="r24-proof-pills">
          <span className="r24-pill"><SIcon d={SIcons.check} size={13} stroke={2.5} />Prevention → Detection → Communication → Response → Recovery</span>
          <span className="r24-pill"><SIcon d={SIcons.check} size={13} stroke={2.5} />Agnostic by design — adopt one module or all nine</span>
          <span className="r24-pill"><SIcon d={SIcons.check} size={13} stroke={2.5} />GDPR · POPIA · HIPAA · NIS2 compliant by architecture</span>
        </div>
        <div className="r24-hero__ctas">
          <a href="#contact" className="btn-red-lg"><SIcon d={SIcons.calendar} size={15} />Book a Demo</a>
          <a href="#modules" className="btn-ghost-lg"><SIcon d={SIcons.play} size={15} />Explore the Platform</a>
        </div>
        <div className="r24-hero__live-strip">
          <span className="live-dot" />
          Protecting employees and travellers live across <strong>40+ countries</strong> right now
        </div>
      </div>

      <div className="hero-device-stack hero-device-stack--global" aria-hidden="true">
        {window.GlobalCompactStage ? <window.GlobalCompactStage /> : null}
      </div>
    </div>);

}

function HeroPhoneLoop({ frozen = null } = {}) {
  const [state, setState] = useState(frozen != null ? frozen : 0);
  useEffect(() => {
    if (frozen != null) { setState(frozen); return; }
    const t = setInterval(() => setState((s) => (s + 1) % 3), 4500);
    return () => clearInterval(t);
  }, [frozen]);

  // ETA countdown ticks down while state === 2
  const [eta, setEta] = useState(6);
  useEffect(() => {
    if (state !== 2) {setEta(6);return;}
    const t = setInterval(() => setEta((e) => Math.max(1, e - 1)), 700);
    return () => clearInterval(t);
  }, [state]);

  return (
    <div className="rp-app">
      <div className="rp-app__statusbar">
        <span>14:22</span>
        <span>●●●● 5G ●</span>
      </div>
      <div className="rp-app__header">
        <div className="rp-app__bell">
          <SIcon d={SIcons.bell || "M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"} size={18} stroke={2} />
          <span className="rp-app__bell-badge">36</span>
        </div>
        <div className="rp-app__logo">
          <img src={window.__asset('iconEmblem','assets/r24i-icon.png')} alt="R24i" className="rp-app__logo-img" />
        </div>
        <div className="rp-app__menu">
          <span /><span /><span />
        </div>
      </div>

      {/* === State 0 — Auto-Broadcast threat === */}
      {state === 0 &&
      <div className="rp-screen rp-screen--broadcast" key="s0">
          <div className="rp-bc">
            <div className="rp-bc__icon rp-bc__icon--new">
              <SIcon d={"M3 11h3l4-7v18l-4-7H3zM14 6.5a5.5 5.5 0 0 1 0 11"} size={18} stroke={2} />
            </div>
            <div className="rp-bc__body">
              <div className="rp-bc__title">Auto-Broadcast: Armed Robbery — security guard shot at shopping centre, Olievenhoutbosch (2.8 km)</div>
              <div className="rp-bc__sub">Security guard shot dead during a robbery at a fast food outlet inside the centre. Investigation underway. Avoid the area.</div>
              <div className="rp-bc__meta">
                <span>14:22 · 2.8 km</span>
                <div className="rp-bc__actions">
                  <button className="rp-bc__ok">OK</button>
                  <button className="rp-bc__notok">NotOK</button>
                </div>
              </div>
            </div>
          </div>
          <div className="rp-bc rp-bc--dim">
            <div className="rp-bc__icon">
              <SIcon d={"M3 11h3l4-7v18l-4-7H3zM14 6.5a5.5 5.5 0 0 1 0 11"} size={18} stroke={2} />
            </div>
            <div className="rp-bc__body">
              <div className="rp-bc__title">Auto-Broadcast: Protest action on Golden Highway, Soweto</div>
              <div className="rp-bc__sub">Protesters blocked the road with burning tyres. Alt routes suggested.</div>
            </div>
          </div>
        </div>
      }

      {/* === State 1 — Nearest hospital + police === */}
      {state === 1 &&
      <div className="rp-screen rp-screen--map" key="s1">
          <div className="rp-map">
            {/* Real map background — drop a city/street map screenshot to replace */}
            <image-slot
            id="hero-phone-map-bg"
            src={window.__asset('mapBg','assets/m08-map-bg.png')}
            fit="cover"
            shape="rect"
            placeholder="Drop a city map"
            style={{ position: "absolute", inset: 0, width: "auto", height: "auto", zIndex: 0 }}>
          </image-slot>
            {/* Hospital + Police big focal pins */}
            <div className="rp-map__hl rp-map__hl--police">
              <SIcon d={SIcons.shield} size={16} stroke={2.2} />
            </div>
            <div className="rp-map__hl rp-map__hl--hospital">
              <SIcon d={"M12 6v12M6 12h12"} size={16} stroke={3} />
            </div>
            {/* Small police pins scattered */}
            {[
          { x: 32, y: 42 }, { x: 50, y: 60 }, { x: 65, y: 48 }, { x: 22, y: 64 },
          { x: 42, y: 72 }, { x: 58, y: 36 }, { x: 74, y: 64 }, { x: 28, y: 78 }].
          map((p, i) =>
          <div key={i} className="rp-map__pin" style={{ left: `${p.x}%`, top: `${p.y}%` }}>
                <SIcon d={SIcons.shield} size={9} stroke={2.5} />
              </div>
          )}
            {/* Threat markers around ME */}
            {[
          { x: 20, y: 36, kind: "robbery", severity: "high" },
          { x: 55, y: 32, kind: "alert", severity: "high" },
          { x: 68, y: 56, kind: "robbery", severity: "high" },
          { x: 28, y: 56, kind: "assault", severity: "med" },
          { x: 46, y: 78, kind: "fire", severity: "med" },
          { x: 62, y: 78, kind: "robbery", severity: "high" },
          { x: 14, y: 72, kind: "assault", severity: "med" },
          { x: 80, y: 38, kind: "alert", severity: "extreme" },
          { x: 38, y: 24, kind: "assault", severity: "med" }].
          map((t, i) =>
          <div
            key={`t-${i}`}
            className={`rp-threat rp-threat--${t.severity}`}
            style={{ left: `${t.x}%`, top: `${t.y}%` }}>
            
                {t.kind === "robbery" &&
            <svg viewBox="0 0 24 24" fill="currentColor" width="11" height="11">
                    <path d="M12 2c-2.5 0-4.5 2-4.5 4.5 0 1.4.6 2.6 1.6 3.4-2 .8-3.6 2.6-3.6 5.1v3h13v-3c0-2.5-1.6-4.3-3.6-5.1 1-.8 1.6-2 1.6-3.4C16.5 4 14.5 2 12 2zM9 13h2v2H9zm4 0h2v2h-2z" />
                  </svg>
            }
                {t.kind === "assault" &&
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" width="11" height="11">
                    <path d="M9 6 L4 19 M9 6 L14 6 L19 19 M4 19 L19 19" />
                  </svg>
            }
                {t.kind === "fire" &&
            <svg viewBox="0 0 24 24" fill="currentColor" width="11" height="11">
                    <path d="M12 3c-1 3-4 4-4 8a4 4 0 0 0 8 0c0-2-1-2-1-4 0 0 2 1 2 4a5 5 0 0 1-10 0c0-4 5-5 5-8z" />
                  </svg>
            }
                {t.kind === "alert" &&
            <svg viewBox="0 0 24 24" fill="currentColor" width="11" height="11">
                    <path d="M12 2 L22 20 L2 20z" stroke="#111" strokeWidth="1.2" strokeLinejoin="round" />
                    <rect x="11" y="10" width="2" height="5" fill="#111" />
                    <rect x="11" y="16" width="2" height="2" fill="#111" />
                  </svg>
            }
              </div>
          )}
            {/* Incident detail popup — appears mid-state */}
            <div className="rp-incident">
              <div className="rp-incident__head">
                <span className="rp-incident__pill">EXTREME</span>
                <span className="rp-incident__title">Armed Robbery</span>
              </div>
              <div className="rp-incident__dist">22.8 km away</div>
              <div className="rp-incident__body">Security guard shot at shopping centre in Olievenhoutbosch, Centurion.</div>
              <div className="rp-incident__actions">
                <button className="rp-bc__ok">OK</button>
                <button className="rp-bc__notok">NotOK</button>
              </div>
            </div>
            {/* ME location pin — RED, indicating user has replied NOT OK */}
            <div className="rp-map__me rp-map__me--notok">
              <span className="rp-map__me-label rp-map__me-label--notok">NOT OK</span>
              <div className="rp-map__me-dot rp-map__me-dot--notok">
                <SIcon d={SIcons.users || "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"} size={11} stroke={2.5} />
              </div>
            </div>
            <div className="rp-map__ripple rp-map__ripple--notok" />
          </div>
          <div className="rp-map__toggle">
            <div className="rp-map__toggle-item active">
              <span className="rp-map__toggle-icon rp-map__toggle-icon--red">+</span>
              <span>Hospital/Clinic</span>
            </div>
            <div className="rp-map__toggle-sep" />
            <div className="rp-map__toggle-item">
              <span className="rp-map__toggle-icon rp-map__toggle-icon--blue">
                <SIcon d={SIcons.shield} size={10} stroke={2.5} />
              </span>
              <span>Police</span>
            </div>
          </div>
          <div className="rp-map__callout">
            <div className="rp-map__callout-title">Nearest emergency response</div>
            <div className="rp-map__callout-sub">
              <span className="rp-map__callout-dot" />
              Plug in your own providers — R24 surfaces them in-app for rapid access
            </div>
          </div>
        </div>
      }

      {/* === State 2 — ETA on emergency response === */}
      {state === 2 &&
      <div className="rp-screen rp-screen--eta" key="s2">
          <div className="rp-eta-badge">
            <span className="rp-eta-badge__dot" />
            EMERGENCY RESPONSE
          </div>
          <div className="rp-eta-dispatch-label">
            One <strong>NotOK</strong> → multiple services dispatched
          </div>
          <div className="rp-eta-card">
            <div className="rp-eta-card__label">
              <span className="rp-eta-card__icon rp-eta-card__icon--armed">
                <SIcon d={SIcons.shield} size={11} stroke={2.4} />
              </span>
              Armed response unit dispatched
            </div>
            <div className="rp-eta-card__num">
              {eta}<small>min</small>
            </div>
            <div className="rp-eta-card__route">
              <div className="rp-eta-card__line" />
              <div className="rp-eta-card__van" />
              <div className="rp-eta-card__home" />
            </div>
            <div className="rp-eta-card__meta">
              <span>Unit 7 · 2.4 km · arriving</span>
              <span className="rp-eta-card__live">LIVE</span>
            </div>
          </div>
          <div className="rp-eta-second">
            <div className="rp-eta-second__icon">
              <SIcon d={"M9 4h6v3h3v3h3v8h-2a3 3 0 0 1-6 0H9a3 3 0 0 1-6 0H1V7h5V4z M12 6h-3v3h3z M7.5 17a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z M16.5 17a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"} size={16} stroke={2} />
            </div>
            <div className="rp-eta-second__body">
              <div className="rp-eta-second__label">Ambulance also dispatched</div>
              <div className="rp-eta-second__meta">ER24 · {eta + 3} min · {(2.4 + 0.8).toFixed(1)} km</div>
            </div>
            <div className="rp-eta-second__pill">LIVE</div>
          </div>
          <div className="rp-eta-tile">
            <div className="rp-eta-tile__row">
              <span>Stay where you are</span>
              <span className="rp-eta-tile__dot rp-eta-tile__dot--green" />
            </div>
            <div className="rp-eta-tile__row">
              <span>Sharing your live location</span>
              <span className="rp-eta-tile__dot rp-eta-tile__dot--green" />
            </div>
            <div className="rp-eta-tile__row">
              <span>GSOC contact established</span>
              <span className="rp-eta-tile__dot rp-eta-tile__dot--green" />
            </div>
          </div>
        </div>
      }

      <div className="rp-app__nav">
        <SIcon d={"M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z"} size={18} stroke={1.8} />
        <div className="rp-app__nav-home">
          <SIcon d={"M3 9l9-7 9 7v11a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2z"} size={18} stroke={1.8} />
        </div>
        <SIcon d={"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"} size={16} stroke={1.8} />
      </div>

      <div className="rp-loop-dots" aria-hidden="true">
        {[0, 1, 2].map((i) => <span key={i} className={i === state ? "active" : ""} />)}
      </div>
    </div>);

}

function HeroResponse() {
  return (
    <div className="r24-hero__inner" id="hero-response">
      <div>
        <div className="r24-hero__badges">
          <span className="r24-badge r24-badge--red"><SIcon d={SIcons.shield} size={10} stroke={2.5} />Response SaaS Platform</span>
          <span className="r24-badge r24-badge--red"><SIcon d={SIcons.cpu} size={10} stroke={2.5} />GCP Enterprise</span>
          <span className="r24-badge r24-badge--gold">3 Patented Technologies</span>
        </div>
        <h1 className="r24-hero__title">
          Outsource response.<br />
          <em className="red">Never outsource</em><br />
          control or proof.
        </h1>
        <p className="r24-hero__sub">
          R24 Response gives security operators and critical-infrastructure owners real-time NOC command — with geo-verified, tamper-proof evidence that defends every SLA. An independent oversight layer, not a vendor tool.
        </p>
        <div className="r24-proof-pills">
          <span className="r24-pill r24-pill--red"><SIcon d={SIcons.check} size={13} stroke={2.5} />Cryptographically locked, geo-verified evidence</span>
          <span className="r24-pill r24-pill--red"><SIcon d={SIcons.check} size={13} stroke={2.5} />Vendor-neutral · SLA enforcement · Audit-grade</span>
          <span className="r24-pill r24-pill--red"><SIcon d={SIcons.check} size={13} stroke={2.5} />Native API integration with R24 PULSE</span>
        </div>
        <div className="r24-hero__ctas">
          <a href="#contact" className="btn-red-lg"><SIcon d={SIcons.calendar} size={15} />Book an Operator Demo</a>
          <a href="#response" className="btn-ghost-lg"><SIcon d={SIcons.arrow} size={15} />Explore Response</a>
        </div>
        <div className="r24-hero__live-strip">
          <span className="live-dot live-dot--red" />
          Active response operations across <strong>40+ countries</strong> right now
        </div>
      </div>

      <div className="hero-device-stack" aria-hidden="true">
        <div className="device device--phone" style={{ borderRadius: 36 }}>
          <div className="device__screen" style={{ background: "#1E2B6B", padding: "36px 0 0" }}>
            <div className="device__island" />
            <div style={{ padding: "18px 16px", color: "#fff", fontFamily: "var(--font)", minHeight: 540, display: "flex", flexDirection: "column" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                  <div style={{ width: 20, height: 20, background: "var(--red-500)", borderRadius: 4, display: "grid", placeItems: "center", fontSize: 9, fontWeight: 800 }}>24</div>
                  <span style={{ fontSize: 11, fontWeight: 800, color: "var(--gold-500)", letterSpacing: "0.08em" }}>R24 RESPONDER</span>
                </div>
                <div style={{ width: 28, height: 14, background: "var(--gold-500)", borderRadius: 7, position: "relative" }}>
                  <div style={{ position: "absolute", right: 2, top: 2, width: 10, height: 10, background: "#fff", borderRadius: "50%" }} />
                </div>
              </div>
              <div style={{
                height: 120,
                background: "linear-gradient(165deg, #7AAF8A 0%, #9DC4A0 40%, #D4C88A 75%, #C8B878 100%)",
                position: "relative",
                borderRadius: 12,
                overflow: "hidden",
                marginBottom: 12
              }}>
                <div style={{ position: "absolute", top: "40%", left: 0, right: 0, height: 2, background: "rgba(255,255,255,0.55)" }} />
                <div style={{ position: "absolute", top: 0, bottom: 0, left: "55%", width: 2, background: "rgba(255,255,255,0.55)" }} />
                <div style={{
                  position: "absolute", bottom: "30%", right: "30%",
                  width: 14, height: 14, background: "var(--red-500)",
                  borderRadius: "50% 50% 50% 0",
                  transform: "rotate(-45deg)",
                  boxShadow: "0 2px 6px rgba(0,0,0,0.3)"
                }} />
              </div>
              <div style={{ background: "#fff", color: "#0F172A", borderRadius: 12, padding: 12, fontSize: 11, marginBottom: 10 }}>
                <div style={{ fontSize: 10, color: "#475569", marginBottom: 6 }}>
                  <strong style={{ color: "#0F172A" }}>From:</strong> 45 Kingfisher Dr, Sandton<br />
                  <strong style={{ color: "#0F172A" }}>To:</strong> Fourways Mall — Witkoppen
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
                  <span style={{ fontSize: 9, color: "#94A3B8" }}>Active response</span>
                  <span style={{ fontSize: 12, fontWeight: 800, color: "#1E2B6B" }}>107 m away</span>
                </div>
                <button style={{
                  width: "100%", background: "#28A745", color: "#fff",
                  border: 0, borderRadius: 18, padding: "9px 10px",
                  fontSize: 11, fontWeight: 700, marginBottom: 6,
                  fontFamily: "var(--font)"
                }}>Accept</button>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
                  <button style={{
                    background: "var(--gold-500)", color: "#1a1a1a",
                    border: 0, borderRadius: 18, padding: "8px 10px",
                    fontSize: 10, fontWeight: 700, fontFamily: "var(--font)"
                  }}>Navigate</button>
                  <button style={{
                    background: "#DC3545", color: "#fff",
                    border: 0, borderRadius: 18, padding: "8px 10px",
                    fontSize: 10, fontWeight: 700, fontFamily: "var(--font)"
                  }}>Re-assign</button>
                </div>
              </div>
              <div style={{ marginTop: "auto", display: "flex", justifyContent: "space-around", alignItems: "center" }}>
                <div style={{ color: "var(--gold-500)" }} aria-hidden="true">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 18a2 2 0 0 1-2-2V7h11v9a2 2 0 0 1-2 2zM14 9h3l4 4v3a2 2 0 0 1-2 2h-1" /><circle cx="7" cy="18" r="2" /><circle cx="17" cy="18" r="2" /><path d="M9 11h3M10.5 9.5v3" /></svg>
                </div>
                <div style={{
                  width: 38, height: 38, borderRadius: "50%",
                  background: "#1E3A8A", border: "2px solid var(--gold-500)",
                  display: "grid", placeItems: "center",
                  fontSize: 11, fontWeight: 800, color: "var(--gold-500)",
                  position: "relative"
                }}>
                  24
                  <div style={{
                    position: "absolute", top: -4, right: -4,
                    width: 14, height: 14, background: "var(--red-500)",
                    borderRadius: "50%", fontSize: 8, color: "#fff",
                    display: "grid", placeItems: "center", fontWeight: 700
                  }}>1</div>
                </div>
                <div style={{ color: "var(--gold-500)" }} aria-hidden="true">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>);

}

function R24Hero() {
  const [mode, setMode] = useState("pulse");
  return (
    <section className="r24-hero" aria-labelledby="hero-heading">
      <div className="r24-hero__grid" aria-hidden="true" />
      <div className="r24-hero__radial" aria-hidden="true" />
      <div className="r24-hero__radial-2" aria-hidden="true" />
      <div className="container r24-hero__outer">
        <div className="platform-switcher" role="group" aria-label="Platform">
          <button
            className={`platform-switcher__btn ${mode === "pulse" ? "active--teal" : ""}`}
            onClick={() => setMode("pulse")}
            aria-pressed={mode === "pulse"}>
            
            <span className="ps-dot ps-dot--teal" />
            R24 PULSE&nbsp; — &nbsp;Duty of Care
          </button>
          <button
            className={`platform-switcher__btn ${mode === "response" ? "active--red" : ""}`}
            onClick={() => setMode("response")}
            aria-pressed={mode === "response"}>
            
            <span className="ps-dot ps-dot--red" />
            R24 Response&nbsp; — &nbsp;Operators
          </button>
        </div>
        {mode === "pulse" ? <HeroPulse /> : <HeroResponse />}
      </div>
    </section>);

}

function TrustBand() {
  const sectors = [
  "Global Energy & Mining", "Financial Services & Banking",
  "Telecommunications Infrastructure", "Engineering & Consulting",
  "Manufacturing & FMCG", "Government & Public Sector",
  "Private Security Operators", "NGOs & International Development",
  "Critical National Infrastructure"];

  // Count-up only triggers on first scroll into view
  const ref = React.useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) {setShown(true);io.disconnect();}});
    }, { threshold: 0.4 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  const useNum = (target) => {
    const [n, setN] = useState(0);
    useEffect(() => {
      if (!shown) {setN(0);return;}
      let raf, t0;
      const step = (t) => {
        if (!t0) t0 = t;
        const p = Math.min(1, (t - t0) / 1100);
        const eased = 1 - Math.pow(1 - p, 3);
        setN(Math.round(target * eased));
        if (p < 1) raf = requestAnimationFrame(step);
      };
      raf = requestAnimationFrame(step);
      return () => cancelAnimationFrame(raf);
    }, [shown]);
    return n;
  };
  const a40 = useNum(40);
  const a8 = useNum(8);
  const a3 = useNum(3);
  const a750 = useNum(750);

  return (
    <section className="trust-band" aria-label="Active enterprise deployments" ref={ref}>
      <div className="trust-band__top">
        <div className="container">
          <div className="trust-stats">
            <div className="trust-stat">
              <span className="trust-stat__num">{a40}<span className="plus">+</span></span>
              <span className="trust-stat__label">Countries Active</span>
            </div>
            <div className="trust-stat">
              <span className="trust-stat__num">{a8}</span>
              <span className="trust-stat__label">Years Enterprise Proven</span>
            </div>
            <div className="trust-stat">
              <span className="trust-stat__num">{a3}</span>
              <span className="trust-stat__label">Patented Technologies</span>
            </div>
            <div className="trust-stat">
              <span className="trust-stat__num">${a750}M</span>
              <span className="trust-stat__label">Assets Connected</span>
            </div>
            <div className="trust-stat">
              <span className="trust-stat__num">Top 5%</span>
              <span className="trust-stat__label">Global Security Posture</span>
            </div>
          </div>
        </div>
      </div>
      <div className="trust-band__bottom">
        <div className="trust-bottom__label-row">
          <span className="trust-bottom__deploy-label">Active enterprise deployments across Africa, Europe, the Middle East &amp; the United States</span>
        </div>
        <div className="sector-track" aria-hidden="true">
          {[...sectors, ...sectors].map((s, i) =>
          <div key={i} className="sector-pill">{s}</div>
          )}
        </div>
      </div>
    </section>);

}

function AwardsBar() {
  return (
    <div className="awards-bar" aria-label="Awards and recognition">
      <div className="container">
        <div className="awards-bar__inner">
          <span className="award">
            <SIcon d={SIcons.award} size={14} />
            <strong>Google Fest</strong> Global Award Winner
          </span>
          <span className="award">
            <SIcon d={SIcons.award} size={14} />
            <strong>AWIEF</strong> Tech Entrepreneur of the Year
          </span>
          <span className="award">
            <SIcon d={SIcons.shield} size={14} />
            <strong>ISO 27001</strong> Certified · <strong>ISO 31030</strong> Aligned
          </span>
        </div>
      </div>
    </div>);

}

// Export to window for site.jsx
Object.assign(window, { R24Nav, R24Hero, TrustBand, AwardsBar, SIcon, SIcons, HeroPhoneLoop });