// site-arch.jsx — OPTION A architecture
// Restructures the page into: unified opener → PULSE block → Response block → shared close.
// Reuses all existing section components from site-demo / site-product / site-pain.

const { useEffect: useEffectArch } = React;

// =============================================================
// Gateway dividers — the "you are entering platform X" moment
// =============================================================
function PulsePlatformDivider() {
  return (
    <section id="pulse" className="parch-divider parch-divider--pulse" aria-label="R24 PULSE platform">
      <div className="container">
        <div className="parch-divider__inner">
          <div>
            <p className="parch-divider__mark">▼ Platform 01 · Duty of Care</p>
            <h2 className="parch-divider__title">R24 <em>PULSE</em></h2>
            <p className="parch-divider__sub">
              The single Duty-of-Care platform for global employers, travellers, and high-risk operations. Built on AWS · ISO 27001 · ISO 31030.
            </p>
          </div>
          <div className="parch-divider__meta">
            <span className="parch-divider__count">10<small>integrated modules</small></span>
            <span className="parch-divider__chips">
              <span className="parch-divider__chip">GDPR</span>
              <span className="parch-divider__chip">POPIA</span>
              <span className="parch-divider__chip">HIPAA</span>
              <span className="parch-divider__chip">NIS2</span>
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

function ResponsePlatformDivider() {
  return (
    <section id="response" className="parch-divider parch-divider--response" aria-label="R24 Response platform">
      <div className="container">
        <div className="parch-divider__inner">
          <div>
            <p className="parch-divider__mark">▼ Platform 02 · Operator SaaS</p>
            <h2 className="parch-divider__title">R24 <em>Response</em></h2>
            <p className="parch-divider__sub">
              The independent oversight layer for security operators, GSOCs, and critical-infrastructure NOCs. Built on GCP · geo-verified · tamper-proof evidence.
            </p>
          </div>
          <div className="parch-divider__meta">
            <span className="parch-divider__count">10<small>integrated modules</small></span>
            <span className="parch-divider__chips">
              <span className="parch-divider__chip">3 patents</span>
              <span className="parch-divider__chip">SLA enforcement</span>
              <span className="parch-divider__chip">Audit-grade</span>
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

// =============================================================
// Pain sections — re-renders existing Challenges card style,
// filtered to one platform at a time.
// =============================================================
// Inner renderer for one platform's pain group (no <section> wrapper) — so
// multiple groups can be composed inside a single shared .challenges chassis.
function ParchPainGroup({ platforms, eyebrow, eyebrowAccent, title, sub, intro }) {
  const all = window.CHALLENGES || [];
  const items = all.filter(c => platforms.includes(c.platform));
  if (!items.length) return null;
  return (
    <div className="parch-pain-group">
      <div className="section-header section-header--dark">
        <p className={`eyebrow eyebrow--${eyebrowAccent}`}>{eyebrow}</p>
        <h2 className="section-h2 section-h2--light">{title}</h2>
        <p className="section-sub section-sub--light">{sub}</p>
      </div>

      {intro && (
        <div className={`pain-intro ${intro.tone ? `pain-intro--${intro.tone}` : ""}`}>
          <div className="pain-intro__bar">
            <span className="pain-intro__quote">"</span>
            <span>{intro.text} — <strong>{intro.attrib}</strong></span>
          </div>
        </div>
      )}

      <div className="ch-grid">
        {items.map((c, i) => (
          <div key={c.n} className="ch-card reveal" data-platform={c.platform} data-delay={i % 3 + 1}>
            <div className="ch-pain">
              <div className="ch-meta">
                <span className="ch-num">{c.n}</span>
                <span className={`ch-dot ch-dot--${c.platform === "pulse" ? "teal" : c.platform === "response" ? "red" : "gold"}`}/>
              </div>
              <span className="ch-quote-mark">"</span>
              <p className="ch-quote">{c.quote}</p>
              <p className="ch-reality">{c.reality}</p>
            </div>
            <div className="ch-solve">
              <div className="ch-solve-label">
                {c.platform === "both" ? "Both platforms close this" : `R24 ${c.platform === "pulse" ? "PULSE" : "Response"} closes this`}
              </div>
              <p className="ch-solve-text">{c.solve}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function ParchPainSection({ platforms, eyebrow, eyebrowAccent, title, sub, intro, id }) {
  const all = window.CHALLENGES || [];
  const items = all.filter(c => platforms.includes(c.platform));
  if (!items.length) return null;
  return (
    <section className="challenges" id={id}>
      <div className="container" style={{ position: "relative", zIndex: 1 }}>
        <ParchPainGroup
          platforms={platforms}
          eyebrow={eyebrow}
          eyebrowAccent={eyebrowAccent}
          title={title}
          sub={sub}
          intro={intro}
        />
      </div>
    </section>
  );
}

function PulsePainSection() {
  return (
    <ParchPainSection
      id="pulse-pain"
      platforms={["pulse"]}
      eyebrowAccent="teal"
      eyebrow="Why global enterprises choose PULSE"
      title={<>5 Duty-of-Care gaps keeping security &amp;<br/>HR leaders awake at 3am. PULSE closes every one.</>}
      sub="If you recognise even three of these, you have a Duty-of-Care exposure that a PDF risk report and a WhatsApp group cannot close."
      intro={{
        text: "I'm seeing reports of civil unrest in Lagos. Are our people safe? I need a confirmed headcount in 15 minutes for the Board.",
        attrib: "CEO, 3:12am",
      }}
    />
  );
}

function ResponsePainSection() {
  return (
    <ParchPainSection
      id="response-pain"
      platforms={["response"]}
      eyebrowAccent="red"
      eyebrow="Why operators choose Response"
      title={<>2 truths every operator already knows<br/>— and pays for, every month.</>}
      sub="Vendor-reported SLA data is a conflict of interest. Evidence chains break under audit. Response is the independent oversight layer that closes both."
      intro={{
        tone: "response",
        text: "We just got billed an SLA penalty based on the vendor's own response-time log. We have no independent way to dispute it. This happens every month.",
        attrib: "COO, Friday afternoon",
      }}
    />
  );
}

// "Both" challenges — surfaced inside the unified opener so the
// cross-platform pain points still land somewhere.
function BothPainSection() {
  return (
    <ParchPainSection
      id="cross-platform-pain"
      platforms={["both"]}
      eyebrowAccent="gold"
      eyebrow="Cross-platform truths"
      title={<>Two challenges that bridge both platforms.</>}
      sub="Whether you're protecting people or proving performance, these two truths apply on either side of the response loop."
    />
  );
}

// =============================================================
// Merged pain — one unified "Why R24" section. Three audience
// groups (cross-platform → PULSE → Response) stacked inside a
// single dark chassis, separated by thin gold rules.
// =============================================================
function CombinedPainSection() {
  return (
    <section className="challenges" id="why-r24" aria-label="Why R24">
      <div className="container" style={{ position: "relative", zIndex: 1 }}>
        <ParchPainGroup
          platforms={["both"]}
          eyebrowAccent="gold"
          eyebrow="Why R24 · the whole picture"
          title={<>Two truths that bridge both platforms.</>}
          sub="Whether you're protecting people or proving performance, these apply on either side of the response loop — and they're why R24 exists."
        />

        <div className="parch-pain-split" aria-hidden="true"></div>

        <ParchPainGroup
          platforms={["pulse"]}
          eyebrowAccent="teal"
          eyebrow="Why global enterprises choose PULSE"
          title={<>5 Duty-of-Care gaps keeping security &amp;<br/>HR leaders awake at 3am. PULSE closes every one.</>}
          sub="If you recognise even three of these, you have a Duty-of-Care exposure that a PDF risk report and a WhatsApp group cannot close."
          intro={{
            text: "I'm seeing reports of civil unrest in Lagos. Are our people safe? I need a confirmed headcount in 15 minutes for the Board.",
            attrib: "CEO, 3:12am",
          }}
        />

        <div className="parch-pain-split" aria-hidden="true"></div>

        <ParchPainGroup
          platforms={["response"]}
          eyebrowAccent="red"
          eyebrow="Why operators choose Response"
          title={<>2 truths every operator already knows<br/>— and pays for, every month.</>}
          sub="Vendor-reported SLA data is a conflict of interest. Evidence chains break under audit. Response is the independent oversight layer that closes both."
          intro={{
            tone: "response",
            text: "We just got billed an SLA penalty based on the vendor's own response-time log. We have no independent way to dispute it. This happens every month.",
            attrib: "COO, Friday afternoon",
          }}
        />
      </div>
    </section>
  );
}

// =============================================================
// Per-platform CTA strip — closes each mini-arc
// =============================================================
function ParchCtaStrip({ tone, label, headline, sub, primary, secondary }) {
  return (
    <section className={`parch-cta-strip parch-cta-strip--${tone}`}>
      <div className="container">
        <div className="parch-cta-strip__card">
          <div>
            <p className="parch-cta-strip__label">{label}</p>
            <h3 className="parch-cta-strip__headline">{headline}</h3>
            <p className="parch-cta-strip__sub">{sub}</p>
          </div>
          <div className="parch-cta-strip__btns">
            <a href={primary.href} className="btn-red-lg">
              <SIcon d={SIcons.calendar} size={15}/>
              {primary.label}
            </a>
            {secondary && (
              <a href={secondary.href} className="btn-ghost-lg">
                <SIcon d={SIcons.arrow} size={15}/>
                {secondary.label}
              </a>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// =============================================================
// Travel Management platform link — opens the full live console
// Sits in the PULSE arc between the mobile showcase and the walkthrough.
// =============================================================
function TravelPlatformLink() {
  return (
    <section className="tpl reveal" id="travel-platform">
      <div className="container">
        <div className="tpl__card">
          <div className="tpl__copy">
            <p className="eyebrow eyebrow--teal">Live platform · Travel Management</p>
            <h2 className="section-h2">The travel desk, on one console.</h2>
            <p className="section-sub">
              Every journey, risk score, check-in and approval for a 50,000-person
              population in a single board — wired to the same PULSE data layer that
              powers broadcasts, matching and reverse panic.
            </p>
            <ul className="tpl__caps">
              <li><span className="tpl__dot"></span>Active, pending and past journeys with per-traveller risk scoring</li>
              <li><span className="tpl__dot"></span>Overdue check-ins and high-risk travellers surfaced automatically</li>
              <li><span className="tpl__dot"></span>Risk analytics and exportable compliance reports for the board</li>
            </ul>
            <div className="tpl__actions">
              <a href="Enterprise Travel Management.html" target="_blank" rel="noopener" className="btn-red-lg tpl__cta">
                <SIcon d="M15 3h6v6M10 14 21 3M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5" size={15}/>
                Launch the live platform
              </a>
              <span className="tpl__note">Opens the full interactive demo in a new tab</span>
            </div>
          </div>

          <div className="tpl__preview" aria-hidden="true">
            <div className="tpl-bw">
              <div className="tpl-bw__bar">
                <span className="tpl-bw__dot"></span>
                <span className="tpl-bw__dot"></span>
                <span className="tpl-bw__dot"></span>
                <span className="tpl-bw__url">enterprise-travel.r24int.com</span>
              </div>
              <div className="tpl-bw__body">
                <div className="tpl-app">
                  <div className="tpl-app__rail">
                    <span className="tpl-app__logo">ET</span>
                    <span className="tpl-app__nav"></span>
                    <span className="tpl-app__nav"></span>
                    <span className="tpl-app__nav"></span>
                    <span className="tpl-app__nav"></span>
                    <span className="tpl-app__nav tpl-app__nav--on"></span>
                    <span className="tpl-app__nav"></span>
                  </div>
                  <div className="tpl-app__main">
                    <div className="tpl-app__top">
                      <span className="tpl-app__mark">ET</span>
                      <span className="tpl-app__brand">Enterprise Travel</span>
                      <span className="tpl-app__pill">MH&nbsp;·&nbsp;CEO</span>
                    </div>
                    <div className="tpl-app__content">
                      <div className="tpl-app__h1">Travel</div>
                      <div className="tpl-app__stats">
                        {[
                          { v: "50,000", l: "Travellers", t: "" },
                          { v: "1,248", l: "Active", t: "b" },
                          { v: "42", l: "High-risk", t: "r" },
                          { v: "18", l: "Overdue", t: "r" },
                        ].map((s, i) => (
                          <div key={i} className={`tpl-stat${s.t ? " tpl-stat--" + s.t : ""}`}>
                            <span className="tpl-stat__v">{s.v}</span>
                            <span className="tpl-stat__l">{s.l}</span>
                          </div>
                        ))}
                      </div>
                      <div className="tpl-app__rows">
                        {[
                          { in: "KD", c: "#1B4F8A", route: "JNB → LOS", b: "r" },
                          { in: "RN", c: "#0F766E", route: "LHR → DXB", b: "a" },
                          { in: "AM", c: "#7C3AED", route: "SIN → SYD", b: "g" },
                          { in: "TS", c: "#B45309", route: "FRA → NBO", b: "r" },
                        ].map((r, i) => (
                          <div key={i} className="tpl-row">
                            <span className="tpl-row__av" style={{ background: r.c }}>{r.in}</span>
                            <span className="tpl-row__nm"></span>
                            <span className="tpl-row__rt">{r.route}</span>
                            <span className={`tpl-row__b tpl-row__b--${r.b}`}></span>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// =============================================================
// New R24Site — Option A composition
// =============================================================
function R24SiteArch() {
  // Same reveal observer as the original (moved here so this file is self-contained).
  useEffectArch(() => {
    if (typeof IntersectionObserver === "undefined") {
      document.querySelectorAll(".reveal").forEach(n => n.classList.add("is-in"));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("is-in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
    const scan = () => document.querySelectorAll(".reveal:not(.is-in)").forEach(n => io.observe(n));
    scan();
    const mo = new MutationObserver(() => scan());
    mo.observe(document.body, { subtree: true, childList: true });
    return () => { io.disconnect(); mo.disconnect(); };
  }, []);

  return (
    <>
      <R24Nav/>
      <R24Hero/>

      {/* ============================================
          PLATFORM 01 — R24 PULSE arc: divider → product → CTA
          ============================================ */}
      <PulsePlatformDivider/>
      <div className="parch-block parch-block--pulse">
        <ModulesConsoleSection/>
        <MobileShowcaseSection/>
        <TravelPlatformLink/>
        <ModulesDeepDiveSection/>
        <PulseWalkthrough/>
        <ParchCtaStrip
          tone="pulse"
          label="Next step · PULSE"
          headline="See PULSE running live on your operating picture."
          sub="A 30-minute session with our Duty-of-Care SE. Bring one country, one risk profile, and your current vendor stack — we'll map the gap on-screen."
          primary={{ href: "#contact", label: "Book a PULSE demo" }}
          secondary={{ href: "#modules", label: "Re-explore the 10 modules" }}
        />
      </div>

      <TrustBand/>
      <AwardsBar/>

      {/* ============================================
          SHARED — the problem & the approach (bridges both platforms)
          ============================================ */}
      <ConsolidationSection/>
      <CombinedPainSection/>

      {/* ============================================
          PLATFORM 02 — R24 Response arc: divider → product → CTA
          ============================================ */}
      <ResponsePlatformDivider/>
      <div className="parch-block parch-block--response">
        <ResponseOperatorDemo/>
        <ResponseEmergencyDemo/>
        <ParchCtaStrip
          tone="response"
          label="Next step · Response"
          headline="See Response audit a live SLA in 30 minutes."
          sub="A working session with our Operator SE. We'll model one contract, one site, and show the evidence chain your client would see at audit."
          primary={{ href: "#contact", label: "Book an Operator demo" }}
          secondary={{ href: "#response-emergency", label: "Re-explore the control room suite" }}
        />
      </div>

      {/* ============================================
          SHARED CLOSE — recap the loop, then convert
          ============================================ */}
      <RoiSection/>
      <HowItWorksSection/>
      <CtaBanner/>
      <ClosingSections/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<R24SiteArch/>);

// Expose for inspection / future hot-swap
Object.assign(window, {
  R24SiteArch,
  PulsePlatformDivider,
  ResponsePlatformDivider,
  PulsePainSection,
  ResponsePainSection,
  BothPainSection,
  CombinedPainSection,
  ParchCtaStrip,
});