// site-demo.jsx — Interactive 10-module demo + module deep-dive blocks
// Order: Master Data → Exec Dashboard → Risk → Broadcast → Incident/Responder
//        → Travel (Pre + Journey) → Language → Agentic AI → Reverse Panic → Reporting

const DEMO_MODULES = [
  { id: 1, num: "01", name: "Master Data Management",                    tag: "INTEGRATED",    comp: () => <Module03/>,
    sub: "Centralised Golden Record from 50+ HRIS, TMC, and ERP formats. Live profile sync via automated API connectors. Zero manual uploads." },
  { id: 2, num: "02", name: "Real-Time Executive Dashboard",             tag: "GOVERN",        comp: () => <Module08/>,
    sub: "Global risk, personnel at risk, active incidents, and average response SLA in one board-ready view. Predictive hotspot forecasting filterable by region and tier." },
  { id: 3, num: "03", name: "Real-Time Risk and User/Asset Matching",    tag: "DETECT",        comp: () => <Module01/>,
    sub: "When a threat is detected, R24 instantly matches every user and asset inside the geofence. Auto-build the broadcast, fire it across channels, then track every response — Sent, Not OK, No response, OK — until the loop is closed." },
  { id: 4, num: "04", name: "Multi-Channel Broadcasting",                tag: "BROADCAST",     comp: () => <Module04/>,
    sub: "Simultaneous blast via App Push, SMS, WhatsApp, MS Teams, Email, and Voice. Cascading delivery if a channel fails. 98.5% delivery with two-way safety confirmation." },
  { id: 41, num: "04-1", name: "Broadcast Response Management",          tag: "BROADCAST",     comp: () => <Module04Response/>,
    sub: "The other half of every broadcast: track who replied, who didn't, and close the loop. Live count of Broadcast Sent, Not OK, No Response and OK — with one-tap Call back, status timeline, and threaded comments captured against the incident." },
  { id: 5, num: "05", name: "Incident & Responder Management",           tag: "RESPOND",       comp: () => <Module05Incident/>,
    sub: "Live incident workspace: full case detail, geofenced map with responders/hospitals/police layered, real-time action history, and a comments thread. Vetted security and medical providers worldwide via single API. Logic-based auto-dispatch to the nearest qualified responder. Geo-fenced arrival verification eliminates ghost check-ins." },
  { id: 6, num: "06", name: "Travel",                                     tag: "TRAVEL",        comp: () => <ModuleTravel/>,
    sub: "Three integrated sub-modules: Protective Travel for executive and high-risk journeys (request → quote → manage in one platform), Pre-Travel approval and risk scoring, and Journey Management with live deviation and auto check-ins. One continuous record from booking to return." },
  { id: 7, num: "07", name: "Dynamic Language Translation",                       tag: "COMMUNICATE",   comp: () => <ModuleLang/>,
    sub: "Real-time language translation between operator and traveller. 47 languages, voice → text → translation pipeline, sub-second latency. Reduces communication barriers during a live incident." },
  { id: 8, num: "08", name: "Virtual Risk Operator",         tag: "VRO · AI Agent",  comp: () => <ModuleAgent/>,
    sub: "An always-on AI co-pilot that supports your risk manager across the platform — it detects, matches, communicates, escalates and seals the audit, with a human always in the loop." },
  { id: 9, num: "09", name: "Reverse Panic & Silent Distress",            tag: "RESPOND",       comp: () => <Module06/>,
    sub: "Discreet SOS without revealing intent. Duress PIN appears to unlock the app while silently triggering a Level 1 critical alert. GPS + audio buffer captured for evidence." },
  { id: 10, num: "10", name: "Reporting",                                 tag: "REPORT",        comp: () => <ModuleReports/>,
    sub: "Four report families — Broadcast, Incident Management, Travel, and Advanced Consolidated Analytics. Board-ready exports with full chain-of-custody and SLA breakdown." },
];

// Deep-dive content for each module (keyed by new id)
const MODULE_DETAILS = {
  1: {
    tagline: "One Golden Record. Sourced from 50+ systems. Updated live.",
    bullets: [
      "Pre-built connectors for Workday, SAP SuccessFactors, BambooHR, Azure AD, Okta, BCD, Amex GBT, and 40+ more",
      "Real-time sync via webhook or polling — no manual CSVs after onboarding",
      "Conflict resolution: HRIS wins on identity, TMC wins on travel, EHR wins on medical",
      "Per-field provenance — every value carries its source and timestamp",
      "Schema versioning — upgrades don't break downstream modules",
    ],
    useCase: "Your TMC issues a new itinerary at 09:14. By 09:14:42, Master Data has reconciled the change, updated the Golden Record, and re-scored the journey risk.",
    integrates: ["Workday", "Amex GBT", "BCD", "Azure AD", "+ 46 more"],
    metric: "50+",
    metricLabel: "Native connectors",
  },
  2: {
    tagline: "Your board's view of risk. Updated every second.",
    bullets: [
      "Global risk level, personnel at risk, active incidents, average SLA — one screen",
      "Predictive hotspot forecasting (next 24h, 7d, 30d)",
      "Filter by region, traveller status, risk tier, business unit",
      "Drill-down from KPI to incident to evidence in two clicks",
      "Boardroom export — slide-ready PDF every Monday 6am",
    ],
    useCase: "Group CEO opens her tablet at 06:00. Risk-level ELEVATED, 23 personnel at risk, 7 active. She's briefed before her coffee lands.",
    integrates: ["MS Teams", "Slack", "Email digest", "PDF export"],
    metric: "Live",
    metricLabel: "Updated every second",
  },
  3: {
    tagline: "Detect, match, broadcast, track — one loop, closed.",
    bullets: [
      "Live threat warnings from four intel sources: GDELT, ACLED, MASA, and your own SOPs",
      "Auto-match: every user and asset inside the geofence is identified in under 2 seconds",
      "Auto-build broadcast from the incident: category, title, content prefilled — operator reviews and fires",
      "Multi-channel delivery (App, SMS, Email, Voice) with two-way Reply SAFE confirmation",
      "Live response panel: Broadcast Sent · Not OK · No response · OK — with call-back per named user",
      "Status updates timeline + comments thread captured against the incident",
    ],
    useCase: "Murder reported in Sandton at 09:03. Geofence drawn at 329km radius. 11 users matched inside. Broadcast sent across In-App + SMS in 1.1s. Within 5 minutes: 1 OK, 1 NOT OK, 9 awaiting reply. GSOC operator calls the 9 directly from the response panel.",
    integrates: ["GDELT", "ACLED", "MASA", "Internal SOPs", "Twilio · Sinch"],
    metric: "5–8m",
    metricLabel: "Match accuracy",
  },
  4: {
    tagline: "Reach everyone, on the channel they already use.",
    bullets: [
      "Simultaneous blast across six channels: App Push, SMS, WhatsApp, MS Teams, Email, and automated Voice",
      "Cascading fallback: if SMS bounces, WhatsApp and Voice fire within 30 seconds — no recipient is left silent",
      "98.5% delivery rate across all channels in production",
      "Two-way safety confirmation — \"Reply SAFE\" closes the loop, whether on WhatsApp, SMS, or Teams",
      "Group targeting by location, role, traveller-status, or custom segment",
    ],
    useCase: "12 personnel in the Marseille zone. App Push reached 12/12. SMS reached 11/12. WhatsApp and Teams both 12/12 in under a second. Voice cascaded to the missing one and confirmed safe in 47 seconds.",
    integrates: ["Twilio", "Sinch", "WhatsApp Business API", "MS Teams", "AWS SNS"],
    metric: "98.5%",
    metricLabel: "Delivery rate",
  },
  41: {
    tagline: "The other half of every broadcast: track every reply until the loop is closed.",
    bullets: [
      "Live count of Broadcast Sent · Not OK · No Response · OK against each incident geofence",
      "One-tap Call back to anyone who replied Not OK or hasn't responded — no copy-pasting numbers",
      "Auto-escalation: any Not OK reply uprates the incident severity and pages the on-call responder",
      "Status timeline captures every state change with operator initials and timestamp — immutable",
      "Threaded comments per incident, visible to GSOC and Country Director — full collaboration record",
      "All four states (Sent · Not OK · No Response · OK) exported with the incident audit pack",
    ],
    useCase: "Murder reported in Sandton at 09:03. Broadcast fired across 11 personnel inside the 329km geofence. Within minutes: 1 OK · 1 Not OK · 9 awaiting reply. GSOC tapped Call on Marlize Holtzhausen directly from the panel — confirmed safe 47 seconds later, status timeline updated.",
    integrates: ["Incident Management", "Twilio Voice", "GSOC console", "Audit vault"],
    metric: "2/11",
    metricLabel: "Replies tracked, in real time",
  },
  5: {
    tagline: "One incident workspace: case detail, live map, action log — closed end-to-end.",
    bullets: [
      "Full case detail in a single pane: incident type, summary, source, exact lat/lon, closure state",
      "Geofenced map with layered toggles — Threats, Responders, Hospitals, Police — all live within a 10km radius",
      "1,420+ vetted security and medical providers across 87 countries, dispatched via single API",
      "Logic-based auto-dispatch — nearest, qualified, available — no broker",
      "Geo-fenced arrival verification — patented proof the responder actually arrived (eliminates ghost check-ins)",
      "Every action timestamped in the Actions History with operator name, coordinates, and outcome",
      "Threaded comments + add-new-action surface so GSOC and the on-call operator share the same record",
    ],
    useCase: "Marlize Holtzhausen marks Not OK from a broadcast in Section L of Botshabelo at 09:04. R24 opens the incident workspace, draws the 10km geofence, shows every responder, hospital and police station inside it. A Response Provider Action is logged, a comment thread opens, and the next available responder is dispatched — all from one view.",
    integrates: ["Internal GSOC", "ER24", "Private security partners", "Single API"],
    metric: "1,420+",
    metricLabel: "Vetted responders, global",
  },
  6: {
    tagline: "Every trip, fully covered — protective, pre-flight, in-flight.",
    bullets: [
      "Protective Travel: request specialised close-protection for executive and high-risk journeys — armed escort, vetted operators, vehicles, GSOC cover — all quoted and booked through R24",
      "Pre-Travel: risk score per destination, traveller profile, route — auto-approval workflow with manager-in-the-loop for high-risk trips",
      "Required briefings, medical advisories, training currency and visa status checked before tickets issue",
      "Journey Management: live itinerary-bound location with 5km deviation flag",
      "Auto check-ins at airport, hotel, meeting venue — escalate on miss",
      "ISO 31030 compliant by architecture — exports are board-ready",
    ],
    useCase: "Apple Executive · London → Lagos. Protective Travel request raised at 07:29, quote $5,290 with close-protection + meet-and-greet + 24/7 GSOC. Pre-travel cleared 76% — country sponsor approval pending. Once approved, Journey Management took over: deviation flagged at 13:08, welfare check confirmed safe by 13:11.",
    integrates: ["Amex GBT", "BCD", "Concur", "Egencia", "Vetted CP operators"],
    metric: "ISO 31030",
    metricLabel: "Compliant by design",
  },
  7: {
    tagline: "Operators never type in the foreign language.",
    bullets: [
      "47 languages supported, auto-detected from the inbound message or voice note",
      "Voice → text → translation pipeline returns sub-second on most language pairs",
      "Both sides see the original and the translation, side-by-side — full transparency",
      "Right-to-left scripts (Arabic, Hebrew, Farsi) render correctly without operator setup",
      "Every translated turn is logged into the immutable audit trail with the source language tagged",
    ],
    useCase: "INC-0412 · Lagos. Traveller writes in Arabic; GSOC-04 in London reads English and replies in English; the traveller sees the reply in Arabic. Zero misunderstandings, full evidence trail.",
    integrates: ["GSOC Live Console", "Voice channel", "Audit vault"],
    metric: "47",
    metricLabel: "Languages, sub-second",
  },
  8: {
    tagline: "Detection to escalation, with humans in the right loop.",
    bullets: [
      "Eight purpose-built agents: Detection, Match, Comms, Reasoner, Responder, Escalation, Audit, Briefing",
      "Each agent's reasoning is logged with its inputs and outputs — explainable by design",
      "Live management updates pushed to the platform: Country Director, Group COO, CEO",
      "Escalation tier auto-set from the severity model — human can override at any time",
      "No agent acts beyond its allowed scope — guardrails enforced by policy and audit",
    ],
    useCase: "INC-0412. Detection at 14:22:08. By 14:22:32, comms had fired, response was dispatched, the Country Director had been called, and the COO's briefing card was queued for the 14:25 standup. Zero manual ops in 90 seconds.",
    integrates: ["All R24 modules", "MS Teams", "PagerDuty", "Slack"],
    metric: "3.2s",
    metricLabel: "Avg agent latency",
  },
  9: {
    tagline: "Silent. Discreet. Defensible.",
    bullets: [
      "Duress PIN that visibly \"unlocks\" the app while silently triggering Level 1",
      "Background GPS lock + audio buffer captured for evidence",
      "No vibration, no sound, no notification on the subject's device",
      "Decoy unlock screen — \"INCORRECT PIN — TRY AGAIN\" — sustains the cover",
      "Patented technology — third of three R24 patents",
    ],
    useCase: "A traveller under coercion enters their duress PIN. GSOC sees the alert in 0.8 seconds with a full evidence package — the attacker sees a pin failure.",
    integrates: ["GSOC-04", "Responder API", "Evidence vault"],
    metric: "0.8s",
    metricLabel: "From trigger to GSOC",
  },
  10: {
    tagline: "Four report families. One audit trail underneath them all.",
    bullets: [
      "Broadcast Reports — channel delivery, two-way confirmation rates, segment reach",
      "Incident Management Reports — full lifecycle from trigger to closure with SLA breakdown",
      "Travel Reports — trip portfolio, journey deviations, country risk exposure",
      "Advanced Consolidated Analytics — cross-module analytics with predictive hotspot modelling",
      "Every report is hash-signed and exportable as PDF, CSV, or JSON for board and audit use",
    ],
    useCase: "EHS audit asked for evidence of every broadcast during INC-0412. R24 produced a signed PDF with all four channels' delivery, two-way confirmations, and the SLA breakdown — in 9 seconds.",
    integrates: ["ISO 31030", "POPIA", "GDPR", "NIS2", "SOC 2"],
    metric: "4 families",
    metricLabel: "1 audit trail beneath",
  },
};

// ============================================================
// FitScaler lives in fit-scaler.jsx (shared). Use <window.FitScaler/>.
// ============================================================

const MODULE_PLAY_MS = 5200; // dwell time on each module while self-playing

function ModulesConsoleSection() {
  const [active, setActive] = React.useState(1);
  const [playing, setPlaying] = React.useState(true);
  const [hover, setHover] = React.useState(false);
  const [inView, setInView] = React.useState(false);
  const [time, setTime] = React.useState(() => fmt(new Date()));
  const sectionRef = React.useRef(null);
  const ids = DEMO_MODULES.map(m => m.id);
  const running = playing && !hover && inView;

  React.useEffect(() => {
    const t = setInterval(() => setTime(fmt(new Date())), 1000);
    return () => clearInterval(t);
  }, []);
  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}`;
  }

  // Only self-play while the console is on screen
  React.useEffect(() => {
    if (!sectionRef.current) return;
    const io = new IntersectionObserver(
      ([e]) => setInView(e.isIntersecting),
      { threshold: 0.2 }
    );
    io.observe(sectionRef.current);
    return () => io.disconnect();
  }, []);

  // Auto-advance through every module, looping
  React.useEffect(() => {
    if (!running) return;
    const t = setTimeout(() => {
      setActive(a => ids[(ids.indexOf(a) + 1) % ids.length]);
    }, MODULE_PLAY_MS);
    return () => clearTimeout(t);
  }, [active, running]);

  const current = DEMO_MODULES.find(m => m.id === active);

  const openDeepDive = (id) => {
    setActive(id);
    // Reveal the (otherwise hidden) "Each module, in detail" section first.
    const sec = document.getElementById("modules-deep");
    if (sec) sec.classList.remove("is-collapsed");
    const el = document.getElementById(`module-${id}`);
    if (el) {
      el.setAttribute("open", "");
      const top = el.getBoundingClientRect().top + window.scrollY - 88;
      window.scrollTo({ top, behavior: "smooth" });
    }
  };

  return (
    <section id="modules" ref={sectionRef} style={{
      background: "var(--white)",
      padding: "96px 0",
      borderTop: "1px solid var(--gray-200)",
    }}>
      <div className="container">

        {/* Section header */}
        <div className="section-header section-header--modules">
          <p className="eyebrow">
            <span style={{
              display: "inline-block", width: 8, height: 8, borderRadius: "50%",
              background: "var(--teal-400)", marginRight: 10,
              boxShadow: "0 0 0 4px rgba(39,170,187,0.18)",
              animation: "blink 2s infinite", verticalAlign: "middle"
            }}/>
            R24 PULSE · Duty of Care Platform Architecture
          </p>
          <h2 className="section-h2 section-h2--modules">
            <span className="section-h2__count">10 Core</span> integrated modules.
            <br/>
            <span className="section-h2__lede">Every Duty of Care gap closed.</span>
          </h2>
          <p className="section-sub">
            Deploy the modules you need now. Expand as your risk profile grows. Already running another tool? Adopt R24 one module at a time — we're built to integrate, not replace.
          </p>
        </div>

        {/* Interactive demo console — self-playing, auto-fits any screen */}
        <window.FitScaler designWidth={1320} className="console-fit">
        <div
          className="console-wrap"
          style={{ width: "100%", margin: "0 0 24px" }}
          onMouseEnter={() => setHover(true)}
          onMouseLeave={() => setHover(false)}
        >
          <aside className="rail">
            <div className="rail__head rail__head--play">
              <div>
                <p className="rail__title">Live demo</p>
                <p className="rail__sub">10 integrated modules</p>
              </div>
              <button
                className={`rail__play ${running ? "is-playing" : ""}`}
                onClick={() => setPlaying(p => !p)}
                aria-pressed={playing}
                aria-label={playing ? "Pause auto-play" : "Resume auto-play"}
                title={playing ? "Pause auto-play" : "Resume auto-play"}
              >
                {playing ? (
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg>
                ) : (
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M7 4v16l13-8z"/></svg>
                )}
                <span>{playing ? "Auto" : "Paused"}</span>
              </button>
            </div>
            <ul className="rail__list">
              {DEMO_MODULES.map((m) => (
                <li
                  key={m.id}
                  className={`module ${active === m.id ? "module--active" : ""}`}
                  onClick={() => { setActive(m.id); setPlaying(true); }}
                  onDoubleClick={() => openDeepDive(m.id)}
                  title="Click to preview · double-click to open deep-dive"
                >
                  <span className="module__num">{m.num}</span>
                  <span className="module__name">{m.name}</span>
                  <span className="module__tag">{m.tag}</span>
                  {active === m.id && (
                    <span
                      key={`prog-${active}-${running}`}
                      className="module__progress"
                      style={{
                        animationDuration: `${MODULE_PLAY_MS}ms`,
                        animationPlayState: running ? "running" : "paused",
                      }}
                    />
                  )}
                </li>
              ))}
            </ul>
            <div className="rail__footer">
              <span className="live">LIVE · GSOC-04</span>
              <span className="tabular">{time} UTC</span>
            </div>
          </aside>

          <section className="canvas">
            <div className="canvas__bar">
              <div className="canvas__bar-left">
                <span className="crumb">
                  <span className="crumb__id">MODULE · {current.num}</span>
                  <span className="crumb__title">{current.name}</span>
                </span>
              </div>
              <div className="canvas__bar-right">
                <span><span className="dot dot--red"/>3 ACTIVE</span>
                <span><span className="dot dot--amber"/>7 WATCH</span>
                <span><span className="dot dot--green"/>1,254 OK</span>
                <span style={{ paddingLeft: 14, borderLeft: "1px solid var(--gray-200)" }} className="tabular">{time}</span>
              </div>
            </div>
            <div className="canvas__body">
              {DEMO_MODULES.map((m) => (
                <div key={m.id} className={`canvas__view ${active === m.id ? "canvas__view--active" : ""}`}>
                  {active === m.id ? m.comp() : null}
                </div>
              ))}
            </div>
            <div className="canvas__cta-row">
              <a href="#contact" className="canvas__cta-primary">
                <SIcon d={"M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"} size={14} stroke={2}/>
                Book a PULSE demo
              </a>
              <button className="canvas__cta-link" onClick={() => openDeepDive(active)}>
                Open the {current.num} deep-dive
                <SIcon d={"M5 12h14M12 5l7 7-7 7"} size={13} stroke={2.2}/>
              </button>
            </div>
          </section>
        </div>
        </window.FitScaler>

        <p className="console-hint">
          {running
            ? "Auto-playing through all 10 modules · hover to pause"
            : "Paused · press play or pick a module"} · double-click any module to open its deep-dive
        </p>
      </div>
    </section>
  );
}

// Wrap any currency amount in a privacy-blur span (demo/screenshot redaction)
function blurMoney(text) {
  if (typeof text !== "string") return text;
  const parts = text.split(/(\$\s?\d[\d,]*(?:\.\d+)?\s?[KMB]?)/g);
  return parts.map((p, i) =>
    /^\$\s?\d/.test(p)
      ? <span key={i} className="r24-blur">{p}</span>
      : p
  );
}

function ModulesDeepDiveSection() {
  return (
    <section id="modules-deep" className="modules-deep is-collapsed" style={{
      background: "var(--white)",
      padding: "var(--sp-section) 0",
      borderTop: "1px solid var(--gray-200)",
    }}>
      <div className="container">

        {/* Section break heading */}
        <div className="section-header" style={{ marginTop: 0 }}>
          <p className="eyebrow">Deep dive</p>
          <h2 className="section-h2">Each module, in detail.</h2>
          <p className="section-sub">
            What each module actually does, how it integrates, and the metric that proves it works.
          </p>
        </div>

        {/* Deep-dive blocks */}
        <div className="deep-dives">
          {DEMO_MODULES.map((m) => {
            const detail = MODULE_DETAILS[m.id];
            const tagToPill = {
              DETECT:       "teal",
              CONNECT:      "navy",
              INTEGRATED:   "navy",
              BROADCAST:    "navy",
              RESPOND:      "coral",
              GOVERN:       "gold",
              TRAVEL:       "teal",
              COMMUNICATE:  "navy",
              INTELLIGENCE: "gold",
              REPORT:       "gold",
            };
            return (
              <details key={m.id} className="deep-dive" id={`module-${m.id}`}>
                <summary className="deep-dive__summary">
                  <div className="deep-dive__num">{m.num}</div>
                  <div className="deep-dive__sum-body">
                    <div className="deep-dive__head">
                      <span className={`pill pill--${tagToPill[m.tag] || "teal"}`}>{m.tag}</span>
                      <h3 className="deep-dive__name">{m.name}</h3>
                    </div>
                    <p className="deep-dive__tagline">{detail.tagline}</p>
                  </div>
                  <div className="deep-dive__metric">
                    <div className="deep-dive__metric-val">{detail.metric}</div>
                    <div className="deep-dive__metric-lab">{detail.metricLabel}</div>
                  </div>
                  <svg className="deep-dive__chev" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="6 9 12 15 18 9"/>
                  </svg>
                </summary>
                <div className="deep-dive__body">
                  {m.id === 10 && window.DutyOfCareDemo && (
                    <div className="deep-dive__reporting">
                      <div className="deep-dive__reporting-lead">
                        <span className="deep-dive__reporting-eyebrow">Live reporting console</span>
                        <p>Four report families in one operating picture — travel journeys, risk analytics, and the board- &amp; insurer-ready compliance report.</p>
                      </div>
                      <window.DutyOfCareDemo embedded={true}/>
                    </div>
                  )}
                  <ul className="deep-dive__bullets">
                    {detail.bullets.map((b, i) => (
                      <li key={i}>
                        <span className="deep-dive__check"><SIcon d={"M20 6 9 17l-5-5"} size={12} stroke={2.5}/></span>
                        <span>{b}</span>
                      </li>
                    ))}
                  </ul>
                  <div className="deep-dive__use-case">
                    <div className="deep-dive__use-case-label">In production</div>
                    <p>{blurMoney(detail.useCase)}</p>
                  </div>
                  <div className="deep-dive__footer">
                    <div className="deep-dive__integrates">
                      <span className="deep-dive__integrates-label">Integrates with</span>
                      {detail.integrates.map((x, i) => (
                        <span key={i} className="deep-dive__chip">{x}</span>
                      ))}
                    </div>
                    <a href="#contact" className="deep-dive__cta">See module → </a>
                  </div>
                </div>
              </details>
            );
          })}
        </div>
      </div>
    </section>
  );
}

window.ModulesConsoleSection = ModulesConsoleSection;
window.ModulesDeepDiveSection = ModulesDeepDiveSection;
window.DEMO_MODULES = DEMO_MODULES;