// site-pain.jsx — 9 Challenges + System Consolidation + How It Works

const CHALLENGES = [
{
  n: "01", platform: "pulse",
  quote: "When something goes wrong in a region, I need to know who's actually there — fast. Not where everyone's been all week.",
  reality: "Continuous surveillance is privacy theatre. Real safety means knowing who's in harm's way the moment harm appears — not before, not after.",
  solve: "R24's location is purpose-driven. We don't track your people. When a risk is identified, we match the users in its vicinity, alert only them, and route emergency response if they reply NOT OK."
},
{
  n: "02", platform: "pulse",
  quote: "We have five vendors and zero unified picture when it matters most.",
  reality: "Manual coordination across fragmented tools during a live crisis is not a strategy. It's chaos with extra steps.",
  solve: "One data layer. One audit trail. One command view. Pick the modules you need — keep what's already working."
},
{
  n: "03", platform: "pulse",
  quote: "We deployed a panic app. Nobody uses it. Nobody even remembers it exists.",
  reality: "A tool employees open only in a crisis is a tool they've never practiced. When seconds count, muscle memory doesn't exist.",
  solve: "A daily-use safety companion — risk intelligence, travel check-ins, alerts. Employees engage every day, not just in crisis."
},
{
  n: "04", platform: "pulse",
  quote: "Our travel risk programme is a country PDF that was outdated when it was written.",
  reality: "The traveller changed hotels. Took a different route. Landed in a different city. Your itinerary data doesn't know any of that.",
  solve: "ISO 31030 compliant live travel risk — TMC itinerary integration, real-time location, automated alerts, 24/7 extraction."
},
{
  n: "05", platform: "pulse",
  quote: "If we get sued, I can't prove what we did or when we did it.",
  reality: "65% of Duty of Care litigation failures stem not from the response — but from the inability to prove the response happened.",
  solve: "Immutable cryptographic incident logs. ISO 31030 · GDPR · POPIA · HIPAA · NIS2. One-click audit export. Defensible, always."
},
{
  n: "06", platform: "response",
  quote: "We pay SLA penalties based on our vendor's own data. That's not oversight, that's a conflict of interest.",
  reality: "Vendor-reported response times cannot be independently verified. Penalties land not because response failed — but because proof failed.",
  solve: "Geo-verified, cryptographically locked, tamper-proof evidence. SLAs defended by fact, not explanation."
},
{
  n: "07", platform: "response",
  quote: "We're paying for services we can't prove were delivered. We discovered a 42% KPI miss rate — in live deployment.",
  reality: "Critical infrastructure and critical contracts have the same problem: performance is assumed, not verified. That assumption is expensive.",
  solve: "Independent oversight layer. Real-time KPI enforcement. Vendor-neutral scorecards. Evidence-first — not a vendor replacement."
},
{
  n: "08", platform: "both",
  quote: "Every new country we enter exposes another compliance gap our current tools weren't built for.",
  reality: "Jurisdiction complexity multiplies with every market. Bolt-on tools create more gaps than they fill. A GDPR fix breaks a POPIA requirement.",
  solve: "40+ countries, 14 languages, satellite/SMS fallback, GDPR/POPIA/HIPAA/NIS2 compliant by architecture — not by patch."
},
{
  n: "09", platform: "both",
  quote: "By the time we respond, the window has already closed. We're always reacting, never ahead of it.",
  reality: "Crisis response that starts after the incident is crisis management at its most expensive. Prevention isn't a luxury — it's the metric.",
  solve: "AI threat detection, polygon geofencing, predictive risk scoring, automated escalation playbooks — proactive by design."
}];


function ChallengesSection() {
  return (
    <section className="challenges" id="challenges" aria-labelledby="ch-heading">
      <div className="container" style={{ position: "relative", zIndex: 1 }}>

        <div className="section-header section-header--dark">
          <p className="eyebrow eyebrow--teal">Why global enterprises choose R24</p>
          <h2 id="ch-heading" className="section-h2 section-h2--light">
            9 challenges keeping your security team<br />awake at 3am. We've solved every one.
          </h2>
          <p className="section-sub section-sub--light">If you recognise even three of these, you have a gap that a PDF risk report and a WhatsApp group cannot close.</p>
        </div>

        <div className="pain-intro">
          <div className="pain-intro__bar">
            <span className="pain-intro__quote">"</span>
            <span>I'm seeing reports of civil unrest in Lagos. Are our people safe? I need a confirmed headcount in 15 minutes for the Board. — <strong>CEO, 3:12am</strong></span>
          </div>
        </div>

        <div className="ch-grid">
          {CHALLENGES.map((c, i) =>
          <div key={i} 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 className="ch-legend">
          <span><span className="ch-dot ch-dot--teal" />Solved by R24 PULSE</span>
          <span><span className="ch-dot ch-dot--red" />Solved by R24 Response</span>
          <span><span className="ch-dot ch-dot--gold" />Solved by both</span>
        </div>

        <div className="ch-cta-row">
          <p className="ch-cta-label">Recognise three or more?</p>
          <a href="#contact" className="btn-red-lg">
            <SIcon d={SIcons.calendar} size={15} />
            Show me how R24 closes these gaps
          </a>
        </div>
      </div>
    </section>);

}

// =============================================================
// System Consolidation — 6 fragmented systems → R24 unified
// =============================================================

function ConsolidationSection() {
  const gridRef = React.useRef(null);
  React.useEffect(() => {
    if (!gridRef.current) return;
    const obs = new IntersectionObserver(
      (entries) => entries.forEach((e) => e.isIntersecting && e.target.classList.add("in-view")),
      { threshold: 0.2 }
    );
    obs.observe(gridRef.current);
    return () => obs.disconnect();
  }, []);

  // Inline SVG icons (Lucide-style) so we don't fall into the "no-emoji" brand rule
  const sysIcon = (key) => {
    const props = { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round" };
    switch (key) {
      case "broadcast":return <svg {...props}><path d="M3 11h3l4-7v18l-4-7H3z" /><path d="M14 7a5 5 0 0 1 0 10" /></svg>;
      case "travel":return <svg {...props}><path 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" /></svg>;
      case "threat":return <svg {...props}><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" /></svg>;
      case "room":return <svg {...props}><rect x="3" y="6" width="18" height="14" rx="1" /><path d="M3 10h18M7 14h2M7 18h2M15 14h2M15 18h2M11 14h2M11 18h2" /></svg>;
      case "handshake":return <svg {...props}><path d="M11 17 8 14M14 17l3-3M3 12l5-5 4 4 4-4 5 5M5 12v6h4M19 12v6h-4" /></svg>;
      case "users":return <svg {...props}><circle cx="9" cy="8" r="3" /><circle cx="17" cy="9" r="2.5" /><path d="M3 19c0-3 2.7-5 6-5s6 2 6 5M14.5 19c0-2 2-3.5 4-3.5s2.5 1.5 2.5 3.5" /></svg>;
      // Unified
      case "antenna":return <svg {...props}><path d="M5 12a7 7 0 0 1 14 0M3 12a9 9 0 0 1 18 0" /><circle cx="12" cy="12" r="2" /><path d="M12 14v8M9 22h6" /></svg>;
      case "plane":return <svg {...props}><path d="M2 16 22 7l-4 14-6-6-8 1z" /></svg>;
      case "bolt":return <svg {...props}><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z" /></svg>;
      case "brain":return <svg {...props}><path d="M9 4a3 3 0 0 0-3 3v1a3 3 0 0 0-2 5 3 3 0 0 0 2 5v1a3 3 0 0 0 6 0V4a3 3 0 0 0-3 0zM15 4a3 3 0 0 1 3 3v1a3 3 0 0 1 2 5 3 3 0 0 1-2 5v1a3 3 0 0 1-6 0V4a3 3 0 0 1 3 0z" /></svg>;
      case "team":return <svg {...props}><circle cx="9" cy="8" r="3" /><circle cx="17" cy="9" r="2.5" /><path d="M3 19c0-3 2.7-5 6-5s6 2 6 5M14.5 19c0-2 2-3.5 4-3.5s2.5 1.5 2.5 3.5" /></svg>;
      case "plug":return <svg {...props}><path d="M9 2v6M15 2v6M6 8h12v4a6 6 0 0 1-6 6 6 6 0 0 1-6-6zM12 18v4" /></svg>;
      default:return null;
    }
  };

  const fragmented = [
  { icon: "broadcast", name: "Mass Communication", cost: "~$150K / yr" },
  { icon: "travel", name: "Travel Risk Tracker", cost: "~$65K / yr" },
  { icon: "threat", name: "Threat Intelligence", cost: "~$130K / yr" },
  { icon: "room", name: "Control Room Service", cost: "~$3M / yr" },
  { icon: "handshake", name: "Service Provider Portal", cost: "Variable" },
  { icon: "users", name: "HR Contact Database", cost: "Always outdated" }];

  const unified = [
  { icon: "antenna", name: "DoC24 (PULSE)", tag: "Duty of Care" },
  { icon: "plane", name: "Journey24", tag: "Travel & Risk" },
  { icon: "bolt", name: "Response24", tag: "Emergency Response" },
  { icon: "brain", name: "Insights24", tag: "Threat Intelligence" },
  { icon: "team", name: "Org24", tag: "HR Integration" },
  { icon: "plug", name: "R24 Integrator", tag: "API & Data Layer" }];

  return (
    <section id="consolidation" className="consolidation">
      <div className="consolidation__bg-grid" />
      <div className="consolidation__bg-glow" />
      <div className="container" style={{ position: "relative", zIndex: 1 }}>
        <div className="section-header section-header--dark">
          <p className="eyebrow eyebrow--gold">System consolidation</p>
          <h2 className="section-h2 section-h2--light">
            6–8 fragmented systems.<br />Or one R24 platform that integrates with what you already run.
          </h2>
          <p className="section-sub section-sub--light">
            Most global enterprises arrive with the same stack — a mass communication tool, a travel tracker, a threat feed, a control room contract, a service provider portal, and an HR database that's always out of date. R24 doesn't force replacement — it consolidates what doesn't work and connects to what does.
          </p>
        </div>

        <div className="consol-grid" ref={gridRef}>

          {/* BEFORE */}
          <div className="consol-block consol-block--before">
            <div className="consol-block__head">
              <span className="consol-dot consol-dot--red" />
              <span className="consol-block__title consol-block__title--red">CURRENT STATE · FRAGMENTED - CASE STUDY OIL & GAS 40K EMPLOYEES OPERATING GLOBALLY</span>
            </div>
            <div className="consol-block__systems">
              {fragmented.map((s, i) =>
              <div key={i} className="sys-pill sys-pill--dead">
                  <div className="sys-pill__icon">{sysIcon(s.icon)}</div>
                  <div>
                    <div className="sys-pill__name">{s.name}</div>
                    <div className={"sys-pill__cost" + (s.cost.includes("$") ? " r24-blur" : "")}>{s.cost}</div>
                  </div>
                </div>
              )}
            </div>
            <div className="consol-block__metrics consol-block__metrics--red">
              <div><div className="metric-val r24-blur">$3.45M</div><div className="metric-lab">Annual system cost</div></div>
              <div><div className="metric-val">27 min</div><div className="metric-lab">Avg response time</div></div>
              <div><div className="metric-val">4.5 FTE</div><div className="metric-lab">Manual process time</div></div>
              <div><div className="metric-val">73%</div><div className="metric-lab">Data accuracy</div></div>
            </div>
          </div>

          {/* Arrow */}
          <div className="consol-arrow">
            <div className="consol-arrow__line" />
            <div className="consol-arrow__bubble">
              <SIcon d={SIcons.arrow} size={18} stroke={2.5} />
            </div>
            <div className="consol-arrow__label">R24<br />consolidates</div>
            <div className="consol-arrow__line" />
          </div>

          {/* AFTER */}
          <div className="consol-block consol-block--after">
            <div className="consol-block__topline" />
            <div className="consol-block__head">
              <span className="consol-dot consol-dot--teal" />
              <span className="consol-block__title consol-block__title--teal">R24 unified platform</span>
            </div>
            <div className="consol-block__systems">
              {unified.map((s, i) =>
              <div key={i} className="sys-pill sys-pill--live">
                  <div className="sys-pill__icon">{sysIcon(s.icon)}</div>
                  <div>
                    <div className="sys-pill__name">{s.name}</div>
                    <div className="sys-pill__live-tag">{s.tag}</div>
                  </div>
                </div>
              )}
            </div>
            <div className="consol-block__metrics consol-block__metrics--teal">
              <div><div className="metric-val r24-blur">$2.0M</div><div className="metric-lab">Annual system cost</div></div>
              <div><div className="metric-val">&lt;5 min</div><div className="metric-lab">Avg response time</div></div>
              <div><div className="metric-val">0.6 FTE</div><div className="metric-lab">Manual process time</div></div>
              <div><div className="metric-val">98%</div><div className="metric-lab">Data accuracy</div></div>
            </div>
          </div>

        </div>

        {/* Day-1 callout */}
        <div className="day-one-callout">
          <div className="day-one-callout__icon"><SIcon d={"M13 2 3 14h9l-1 8 10-12h-9l1-8z"} size={22} stroke={2} /></div>
          <div>
            <div className="day-one-callout__title">Adopt one module or all nine — your call</div>
            <div className="day-one-callout__sub">Already running another tool? Keep it. R24 connects via API or replaces only what isn't working. No rip-and-replace. CSV upload deploys in days; HR sync, SSO, and travel integrations run in parallel — your people are protected from day one, not month six.</div>
          </div>
          <a href="#contact" className="btn-teal-lg" style={{ whiteSpace: "nowrap", flexShrink: 0 }}>See how it consolidates</a>
        </div>
      </div>
    </section>);

}

// =============================================================
// How It Works
// =============================================================

function HowItWorksSection() {
  return (
    <section id="how" className="how">
      <div className="container">
        <div className="section-header">
          <p className="eyebrow">How R24 works</p>
          <h2 className="section-h2">One loop. Two platforms. Zero gaps.</h2>
          <p className="section-sub">Prevention. Risk Detection. Risk Match. Mass Communication. Emergency Response. Recovery. Every incident, end to end — across PULSE and Response.</p>
        </div>

        <div className="how-loop how-loop--6" aria-label="Six-stage response loop diagram">
          {/* Connecting arc */}
          <svg className="how-loop__arc" viewBox="0 0 1000 280" preserveAspectRatio="none" aria-hidden="true">
            <defs>
              <linearGradient id="how-grad-5" x1="0" x2="1">
                <stop offset="0%" stopColor="var(--teal-500)" />
                <stop offset="25%" stopColor="var(--red-500)" />
                <stop offset="50%" stopColor="var(--gold-500)" />
                <stop offset="75%" stopColor="var(--red-500)" />
                <stop offset="100%" stopColor="var(--teal-500)" />
              </linearGradient>
            </defs>
            <path d="M 100 200 Q 200 90 300 160 Q 400 230 500 120 Q 600 60 700 170 Q 800 230 900 100"
            fill="none" stroke="url(#how-grad-5)" strokeWidth="2"
            strokeDasharray="6 8" />
            <circle r="5" fill="var(--gold-500)">
              <animateMotion dur="8s" repeatCount="indefinite"
              path="M 100 200 Q 200 90 300 160 Q 400 230 500 120 Q 600 60 700 170 Q 800 230 900 100" />
            </circle>
            {/* Handover burst at node 5 (end of forward arc) */}
            <circle cx="900" cy="100" r="6" fill="none" stroke="var(--gold-500)" strokeWidth="2">
              <animate attributeName="r" values="6;26" keyTimes="0;1" dur="1.6s" begin="6.6s" repeatCount="indefinite" />
              <animate attributeName="opacity" values="0.9;0" keyTimes="0;1" dur="1.6s" begin="6.6s" repeatCount="indefinite" />
            </circle>
            <circle cx="900" cy="100" r="3" fill="var(--gold-500)">
              <animate attributeName="r" values="3;9;3" keyTimes="0;0.5;1" dur="1.6s" begin="6.6s" repeatCount="indefinite" />
            </circle>
            {/* Handover burst at node 1 (close of loop, teal arrival) */}
            <circle cx="100" cy="200" r="6" fill="none" stroke="var(--teal-500)" strokeWidth="2">
              <animate attributeName="r" values="6;26" keyTimes="0;1" dur="1.6s" begin="0s" repeatCount="indefinite" />
              <animate attributeName="opacity" values="0.9;0" keyTimes="0;1" dur="1.6s" begin="0s" repeatCount="indefinite" />
            </circle>
          </svg>

          {/* 01 — Prevention */}
          <div className="how-node how-node--prevention">
            <div className="how-node__icon">
              <svg width="40" height="40" viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M24 4 L40 10 V24 C40 34 24 44 24 44 C24 44 8 34 8 24 V10 Z" />
                <circle cx="24" cy="22" r="5" />
                <circle cx="24" cy="22" r="1.8" fill="currentColor" />
                <path d="M14 22 C16 18 20 16 24 16 C28 16 32 18 34 22 C32 26 28 28 24 28 C20 28 16 26 14 22Z" opacity="0.4" />
              </svg>
            </div>
            <div className="how-node__num">01</div>
            <div className="how-node__label">Prevention</div>
            <div className="how-node__plats">
              <span className="how-step__plat how-step__plat--teal">PULSE</span>
            </div>
          </div>

          {/* 02 — Detection */}
          <div className="how-node how-node--detect">
            <div className="how-node__icon">
              <svg width="40" height="40" viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="24" cy="24" r="20" strokeDasharray="4 4" opacity="0.4" />
                <circle cx="24" cy="24" r="13" opacity="0.6" />
                <circle cx="24" cy="24" r="6" />
                <circle cx="24" cy="24" r="2.5" fill="currentColor" />
                <line x1="24" y1="4" x2="24" y2="10" opacity="0.8" />
                <line x1="24" y1="38" x2="24" y2="44" opacity="0.8" />
                <line x1="4" y1="24" x2="10" y2="24" opacity="0.8" />
                <line x1="38" y1="24" x2="44" y2="24" opacity="0.8" />
              </svg>
            </div>
            <div className="how-node__num">02</div>
            <div className="how-node__label">Risk Detection</div>
            <div className="how-node__plats">
              <span className="how-step__plat how-step__plat--teal">PULSE</span>
              <span className="how-step__plat how-step__plat--red">Response</span>
            </div>
          </div>

          {/* 03 — Match Risk with User / Asset / Project */}
          <div className="how-node how-node--match">
            <div className="how-node__icon">
              <svg width="40" height="40" viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="14" cy="24" r="6" />
                <circle cx="34" cy="24" r="6" />
                <path d="M20 24 L28 24" strokeWidth="2.5" />
                <path d="M24 19 L28 24 L24 29" strokeWidth="2.5" />
                <path d="M8  10 L14 18" opacity="0.5" />
                <path d="M40 10 L34 18" opacity="0.5" />
                <path d="M8  38 L14 30" opacity="0.5" />
                <path d="M40 38 L34 30" opacity="0.5" />
              </svg>
            </div>
            <div className="how-node__num">03</div>
            <div className="how-node__label">Risk Match<br /><small>User · Asset · Project</small></div>
            <div className="how-node__plats">
              <span className="how-step__plat how-step__plat--teal">PULSE</span>
              <span className="how-step__plat how-step__plat--red">Response</span>
            </div>
          </div>

          {/* 04 — Communication */}
          <div className="how-node how-node--comm">
            <div className="how-node__icon">
              <svg width="40" height="40" viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="24" cy="24" r="3.5" fill="currentColor" />
                <path d="M16 16 A11 11 0 0 0 16 32" />
                <path d="M32 16 A11 11 0 0 1 32 32" />
                <path d="M10 10 A19 19 0 0 0 10 38" opacity="0.5" />
                <path d="M38 10 A19 19 0 0 1 38 38" opacity="0.5" />
              </svg>
            </div>
            <div className="how-node__num">04</div>
            <div className="how-node__label">Mass Communication</div>
            <div className="how-node__plats">
              <span className="how-step__plat how-step__plat--teal">PULSE</span>
              <span className="how-step__plat how-step__plat--red">Response</span>
            </div>
          </div>

          {/* 05 — Response */}
          <div className="how-node how-node--response">
            <div className="how-node__icon">
              <svg width="40" height="40" viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M24 4 L42 14 V34 L24 44 L6 34 V14 Z" />
                <path d="M24 14 V34 M14 19 L34 19 M14 29 L34 29" opacity="0.5" />
                <circle cx="24" cy="24" r="4" fill="currentColor" />
                <circle cx="14" cy="19" r="2" fill="currentColor" />
                <circle cx="34" cy="29" r="2" fill="currentColor" />
              </svg>
            </div>
            <div className="how-node__num">05</div>
            <div className="how-node__label">Emergency Response</div>
            <div className="how-node__plats">
              <span className="how-step__plat how-step__plat--teal">PULSE</span>
              <span className="how-step__plat how-step__plat--red">Response</span>
            </div>
          </div>

          {/* 06 — Recovery */}
          <div className="how-node how-node--recovery">
            <div className="how-node__icon">
              <svg width="40" height="40" viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M24 4 L40 10 V24 C40 34 24 44 24 44 C24 44 8 34 8 24 V10 Z" />
                <path d="M16 24 L22 30 L32 18" strokeWidth="2.5" />
              </svg>
            </div>
            <div className="how-node__num">06</div>
            <div className="how-node__label">Recovery &amp; Prove</div>
            <div className="how-node__plats">
              <span className="how-step__plat how-step__plat--teal">PULSE</span>
              <span className="how-step__plat how-step__plat--red">Response</span>
            </div>
          </div>
        </div>

        {/* Loop closes — auto-syncs back to integrated systems */}
        <div className="how-close-loop" aria-label="Loop closes — auto-sync back to integrated systems">
          <div className="how-close-loop__arc" aria-hidden="true">
            <svg viewBox="0 0 1000 36" preserveAspectRatio="none" width="100%" height="36">
              <defs>
                <linearGradient id="how-close-grad" x1="1" x2="0">
                  <stop offset="0%" stopColor="var(--teal-500)" stopOpacity="0.6" />
                  <stop offset="100%" stopColor="var(--teal-500)" stopOpacity="0.2" />
                </linearGradient>
              </defs>
              <path d="M 990 18 L 10 18"
              fill="none" stroke="url(#how-close-grad)" strokeWidth="2"
              strokeDasharray="6 8"
              strokeLinecap="round" />
              <polygon points="20,18 32,12 32,24" fill="var(--teal-500)" opacity="0.8" />
              <circle r="4" fill="var(--teal-500)">
                <animateMotion dur="5s" repeatCount="indefinite" path="M 990 18 L 24 18" />
              </circle>
            </svg>
          </div>
          <div className="how-close-loop__row">
            <div className="how-close-loop__label">
              <span className="how-close-loop__pill">AUTO-SYNC</span>
              <span>Closes the loop — Recovery data feeds Prevention</span>
            </div>
            <div className="how-close-loop__chips">
              <span className="how-close-chip">
                <span className="how-close-chip__check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" width="10" height="10"><path d="M20 6 9 17l-5-5" /></svg></span>
                <span className="how-close-chip__name">HRIS</span>
                <span className="how-close-chip__status">updated</span>
              </span>
              <span className="how-close-chip">
                <span className="how-close-chip__check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" width="10" height="10"><path d="M20 6 9 17l-5-5" /></svg></span>
                <span className="how-close-chip__name">TMC / Travel</span>
                <span className="how-close-chip__status">updated</span>
              </span>
              <span className="how-close-chip">
                <span className="how-close-chip__check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" width="10" height="10"><path d="M20 6 9 17l-5-5" /></svg></span>
                <span className="how-close-chip__name">GSOC</span>
                <span className="how-close-chip__status">updated</span>
              </span>
              <span className="how-close-chip">
                <span className="how-close-chip__check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" width="10" height="10"><path d="M20 6 9 17l-5-5" /></svg></span>
                <span className="how-close-chip__name">ERP</span>
                <span className="how-close-chip__status">updated</span>
              </span>
              <span className="how-close-chip">
                <span className="how-close-chip__check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" width="10" height="10"><path d="M20 6 9 17l-5-5" /></svg></span>
                <span className="how-close-chip__name">SIEM</span>
                <span className="how-close-chip__status">updated</span>
              </span>
            </div>
          </div>
        </div>

        <div className="dual-cloud">
          <div className="dual-cloud__inner">
            <div className="dual-cloud__platform">
              <span className="dual-cloud__badge dual-cloud__badge--teal">AWS Cloud</span>
              <span className="dual-cloud__name">R24 PULSE</span>
              <span className="dual-cloud__role">R24 Duty of Care SaaS Platform</span>
            </div>
            <div className="dual-cloud__connector">
              <div className="dual-cloud__line" />
              <div className="dual-cloud__mid">
                <SIcon d={"M8 3H5a2 2 0 00-2 2v3M21 8V5a2 2 0 00-2-2h-3M8 21H5a2 2 0 01-2-2v-3M21 16v3a2 2 0 01-2 2h-3"} size={16} />
                <span>Fully Integrated</span>
              </div>
              <div className="dual-cloud__line" />
            </div>
            <div className="dual-cloud__platform">
              <span className="dual-cloud__badge dual-cloud__badge--red">Google Cloud</span>
              <span className="dual-cloud__name">R24 Response Management Platforms</span>
              <span className="dual-cloud__role">Emergency, Operator &amp; Infrastructure SaaS</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function PainSections() {
  return (
    <>
      <ChallengesSection />
      <ConsolidationSection />
      <HowItWorksSection />
    </>);

}

window.PainSections = PainSections;
window.ChallengesSection = ChallengesSection;
window.ConsolidationSection = ConsolidationSection;
window.HowItWorksSection = HowItWorksSection;
window.CHALLENGES = CHALLENGES;