// Homepage — Redinent Global Site
const { useState: useStateHome, useEffect: useEffectHome } = React;

// ─── Product visual: XIoT device scan console ───────────────
function XIoTScanVisual() {
  const devices = [
    { ip: "10.0.1.44",  name: "Hikvision DS-2CD2T45",   risk: "CRITICAL", fw: "v3.1.1",  creds: "DEFAULT"  },
    { ip: "10.0.1.71",  name: "Dahua NVR4116-HS",        risk: "HIGH",     fw: "v2.800",  creds: "WEAK"     },
    { ip: "10.0.1.103", name: "Axis P3245-V",             risk: "CLEAN",    fw: "v11.2.0", creds: "OK"       },
    { ip: "10.0.1.118", name: "Unknown OEM (Hikvision)",  risk: "CRITICAL", fw: "v4.2.1",  creds: "DEFAULT"  },
    { ip: "10.0.1.204", name: "Siemens S7-1200",          risk: "HIGH",     fw: "v6.2",    creds: "WEAK"     },
    { ip: "10.0.1.247", name: "Bosch FLEXIDOME 5100i",    risk: "MEDIUM",   fw: "v9.80",   creds: "CHANGED"  },
  ];
  const RC = { CRITICAL: "#ef3e5d", HIGH: "#f59e0b", MEDIUM: "#6b7280", CLEAN: "#22c55e" };
  const CC = { DEFAULT: "#ef3e5d", WEAK: "#f59e0b", CHANGED: "#22c55e", OK: "#22c55e" };
  const [scanLine, setScanLine] = useStateHome(0);
  useEffectHome(() => {
    const t = setInterval(() => setScanLine(p => (p + 1) % devices.length), 700);
    return () => clearInterval(t);
  }, []);
  const col = "100px 1fr 80px 72px 82px";
  return (
    <div style={{ background: "rgba(8,11,17,0.6)", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 14, overflow: "hidden", fontFamily: "var(--mono)" }}>
      <div style={{ padding: "13px 20px", borderBottom: "1px solid rgba(255,255,255,0.07)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span style={{ fontSize: 10, letterSpacing: ".18em", textTransform: "uppercase", color: "rgba(240,236,228,0.4)" }}>REDINENT XIoT · ACTIVE SCAN</span>
        <span style={{ fontSize: 10, color: "#22c55e", letterSpacing: ".1em" }}>● 2,847 DEVICES</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: col, padding: "8px 20px 6px", gap: 0 }}>
        {["IP", "DEVICE", "RISK", "FIRMWARE", "CREDS"].map(h => (
          <span key={h} style={{ fontSize: 9, letterSpacing: ".12em", color: "rgba(240,236,228,0.22)" }}>{h}</span>
        ))}
      </div>
      {devices.map((d, i) => (
        <div key={i} style={{ display: "grid", gridTemplateColumns: col, padding: "10px 20px", background: i === scanLine ? "rgba(239,62,93,0.07)" : "transparent", transition: "background .35s ease", borderTop: "1px solid rgba(255,255,255,0.035)" }}>
          <span style={{ fontSize: 11, color: "rgba(240,236,228,0.38)" }}>{d.ip}</span>
          <span style={{ fontSize: 11, color: "rgba(240,236,228,0.78)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", paddingRight: 8 }}>{d.name}</span>
          <span style={{ fontSize: 10, color: RC[d.risk], fontWeight: 700 }}>{d.risk}</span>
          <span style={{ fontSize: 11, color: "rgba(240,236,228,0.38)" }}>{d.fw}</span>
          <span style={{ fontSize: 10, color: CC[d.creds] || "rgba(240,236,228,0.3)", fontWeight: 600 }}>{d.creds}</span>
        </div>
      ))}
      <div style={{ padding: "11px 20px", borderTop: "1px solid rgba(255,255,255,0.07)", display: "flex", gap: 20, flexWrap: "wrap" }}>
        {[["34", "CRITICAL", "#ef3e5d"], ["127", "HIGH", "#f59e0b"], ["289", "MEDIUM", "#6b7280"], ["98", "CLEAN", "#22c55e"]].map(([n, l, c]) => (
          <span key={l} style={{ fontSize: 10, letterSpacing: ".06em" }}>
            <span style={{ color: c, fontWeight: 700 }}>{n}</span>
            <span style={{ color: "rgba(240,236,228,0.3)", marginLeft: 5 }}>{l}</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// ─── Product visual: Turing agent fleet console ──────────────
function TuringAgentVisual() {
  const agents = [
    { id: "CRAWLER-01",  status: "SCRAPING",    src: "vendor firmware repos",        out: "14,822 firmware images indexed" },
    { id: "CVE-AGENT",   status: "CORRELATING", src: "NVD · MITRE · OSV",            out: "847 new device mappings today"  },
    { id: "OTX-01",      status: "INGESTING",   src: "AlienVault OTX",               out: "233 IoT threat indicators"      },
    { id: "EXPLOIT-01",  status: "MONITORING",  src: "ExploitDB · GitHub PoCs",      out: "12 new PoCs matched to XIoT"    },
    { id: "MATCH-01",    status: "ENRICHING",   src: "XIoT device fingerprints",     out: "4,291 devices enriched"         },
    { id: "ETL-01",      status: "PACKAGING",   src: "intelligence bundle v.4812",   out: "ready for XIoT sync"            },
  ];
  const SC = { SCRAPING: "#5b8def", CORRELATING: "#a78bfa", INGESTING: "#34d399", MONITORING: "#f59e0b", ENRICHING: "#5b8def", PACKAGING: "#22c55e" };
  const [active, setActive] = useStateHome(0);
  useEffectHome(() => {
    const t = setInterval(() => setActive(p => (p + 1) % agents.length), 520);
    return () => clearInterval(t);
  }, []);
  return (
    <div style={{ background: "rgba(8,11,17,0.6)", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 14, overflow: "hidden", fontFamily: "var(--mono)" }}>
      <div style={{ padding: "13px 20px", borderBottom: "1px solid rgba(255,255,255,0.07)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span style={{ fontSize: 10, letterSpacing: ".18em", textTransform: "uppercase", color: "rgba(240,236,228,0.4)" }}>REDINENT TURING · AGENT FLEET</span>
        <span style={{ fontSize: 10, color: "#5b8def", letterSpacing: ".1em" }}>● 6 AGENTS ACTIVE</span>
      </div>
      {agents.map((a, i) => (
        <div key={i} style={{ padding: "12px 20px", borderTop: "1px solid rgba(255,255,255,0.04)", background: i === active ? "rgba(91,141,239,0.06)" : "transparent", transition: "background .3s ease" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 4 }}>
            <span style={{ fontSize: 11, color: "#f0ece4", fontWeight: 600, letterSpacing: ".04em" }}>{a.id}</span>
            <span style={{ fontSize: 9, color: SC[a.status], letterSpacing: ".1em" }}>● {a.status}</span>
          </div>
          <div style={{ fontSize: 10, color: "rgba(240,236,228,0.35)" }}>{a.src}</div>
          <div style={{ fontSize: 10, color: "rgba(240,236,228,0.52)", marginTop: 3 }}>↳ {a.out}</div>
        </div>
      ))}
    </div>
  );
}

// ─── Product visual: Labs CVE feed ──────────────────────────
function LabsCVEVisual() {
  const cves = [
    { id: "CVE-2026-0629",  title: "Authentication Bypass in IP Camera",    vendor: "TP-Link",      sev: "CRITICAL" },
    { id: "CVE-2024-10381", title: "Auth Bypass in Access Control System",   vendor: "Matrix Comsec",sev: "CRITICAL" },
    { id: "CVE-2023-28808", title: "Multiple Auth Vulnerabilities",          vendor: "Hikvision",    sev: "CRITICAL" },
    { id: "CVE-2023-0773",  title: "Authentication Bypass in IP Camera",     vendor: "Uniview",      sev: "CRITICAL" },
    { id: "CVE-2022-41677", title: "Information Disclosure via ONVIF",       vendor: "Bosch",        sev: "HIGH"     },
  ];
  const SC = { CRITICAL: "#ef3e5d", HIGH: "#f59e0b" };
  return (
    <div style={{ background: "#080b11", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 14, overflow: "hidden", fontFamily: "var(--mono)" }}>
      <div style={{ padding: "13px 20px", borderBottom: "1px solid rgba(255,255,255,0.07)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span style={{ fontSize: 10, letterSpacing: ".18em", textTransform: "uppercase", color: "rgba(240,236,228,0.4)" }}>REDINENT THREAT LABS · CVE FEED</span>
        <span style={{ fontSize: 10, color: "#ef3e5d", letterSpacing: ".1em" }}>9 PUBLISHED</span>
      </div>
      {cves.map((c, i) => (
        <div key={i} style={{ padding: "14px 20px", borderTop: "1px solid rgba(255,255,255,0.04)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 5 }}>
            <span style={{ fontSize: 11, color: SC[c.sev], fontWeight: 700 }}>{c.id}</span>
            <span style={{ fontSize: 9, color: SC[c.sev], letterSpacing: ".08em", padding: "2px 8px", border: `1px solid ${SC[c.sev]}50`, borderRadius: 3 }}>{c.sev}</span>
          </div>
          <div style={{ fontSize: 11, color: "rgba(240,236,228,0.78)" }}>{c.title}</div>
          <div style={{ fontSize: 10, color: "rgba(240,236,228,0.35)", marginTop: 3 }}>{c.vendor}</div>
        </div>
      ))}
      <div style={{ padding: "11px 20px", borderTop: "1px solid rgba(255,255,255,0.07)", fontSize: 10, color: "rgba(240,236,228,0.28)", letterSpacing: ".06em" }}>
        AIRPORTS · BANKS · DATA CENTERS · GOVERNMENT FACILITIES
      </div>
    </div>
  );
}

// ─── Platform Architecture Diagram ──────────────────────────
function PlatformDiagram({ navigate }) {
  const [assets,   setAssets]   = useStateHome(247);
  const [proto,    setProto]    = useStateHome(312);
  const [hardened, setHardened] = useStateHome(1482);
  const [activeNode, setActiveNode] = useStateHome(null);

  useEffectHome(() => {
    const t1 = setInterval(() => setAssets(v => Math.max(240, v + Math.floor(Math.random() * 3) - 1)), 4000);
    const t2 = setInterval(() => setProto(v => Math.max(280, Math.min(360, v + Math.floor(Math.random() * 20) - 10))), 1800);
    const t3 = setInterval(() => setHardened(v => v + Math.floor(Math.random() * 3)), 3000);
    return () => { clearInterval(t1); clearInterval(t2); clearInterval(t3); };
  }, []);

  const nodeMap = {
    ipcam:       { color: "#ef3e5d", title: "IP Camera fleet — CVE EXPOSED",             body: "Hikvision multi-site fleet. CVE-2017-7921 active: unauthenticated firmware config download. Shared administrative credential extracted and reused across entire fleet. XIoT identified the unpatched device, decrypted config automatically — credential valid at all locations." },
    bms:         { color: "#f59e0b", title: "BMS / HVAC Controllers",                    body: "Building automation and HVAC systems. Protocols: BACnet/IP, Modbus TCP, KNX. Firmware unpatched since vendor advisory 2022-11. Remote command injection surface on BACnet management interface. Covers the IT/facilities ownership gap." },
    screenmirror:{ color: "#f59e0b", title: "Screen Mirroring units",                    body: "ProDisplayLink deployed across all meeting rooms. Every unit running on manufacturer default credentials. Web control panel accessible to any building WiFi user. Live conference content visible over the network in real time." },
    accessctrl:  { color: "#f59e0b", title: "Physical Access Controllers",               body: "IoT-integrated access control managing building entry across all floors. Firmware unaudited, credential review never performed since installation. DoS vector on exposed management port — building lockout risk." },
    nvrvms:      { color: "#22c55e", title: "NVR / VMS",                                 body: "Network Video Recorder and Video Management System. Currently scanning: web interface hardening, API authentication, RTSP stream access controls. Passive fingerprinting in progress — zero active packets transmitted." },
    layer1:      { color: "rgba(240,236,228,0.7)", title: "Asset fingerprinting",        body: "Full passive inventory of every device on the network. XIoT identifies device model, manufacturer, firmware version, open ports, and running services without sending a single probe packet. Cross-referenced against known device databases instantly." },
    layer2:      { color: "#ef3e5d", title: "CVE & vulnerability mapping — ACTIVE ALERT",body: "CVE-2017-7921 confirmed on camera at 192.168.10.14. CVSS 9.8 CRITICAL. Unauthenticated firmware config retrieval confirmed. Credential extraction automated. ICS-CERT advisory cross-referenced. Full exploit path mapped to affected fleet." },
    layer3:      { color: "#f59e0b", title: "Credential & access audit",                 body: "XIoT tests manufacturer default credentials against every discovered device. Open admin panels detected, shared credentials identified. 14 devices using factory defaults. Screen mirroring, NVR admin panels, and camera dashboards all accessible without authentication." },
    layer4:      { color: "rgba(240,236,228,0.7)", title: "Protocol inspection",         body: "Deep inspection: RTSP streams, ONVIF device profiles, BACnet/IP commands, Modbus function codes, proprietary firmware protocols. Command-level audit of devices. Support for legacy and air-gapped environments." },
    layer5:      { color: "rgba(240,236,228,0.7)", title: "Compliance mapping",          body: "Findings mapped to NDAA hardware compliance, Meity empanelment requirements, ISO 27001 controls, IEC 62443 series, and STQC certification criteria. Audit-ready report per device class. Export: PDF · JSON · CSV." },
  };

  const activeInfo = activeNode ? nodeMap[activeNode] : null;
  const toggle = (id) => setActiveNode(p => p === id ? null : id);

  return (
    <section style={{ background: "#080b11", padding: "var(--s-7) 0", position: "relative", overflow: "hidden" }} data-screen-label="Home / Platform Diagram">
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, backgroundImage: "linear-gradient(rgba(255,255,255,0.016) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.016) 1px,transparent 1px)", backgroundSize: "80px 80px", pointerEvents: "none" }} />
      <style>{`
        @keyframes pd-ring{0%,100%{opacity:.28}50%{opacity:.07}}
        @keyframes pd-pulse{0%,100%{opacity:1}50%{opacity:.42}}
        @keyframes pd-threat{0%,100%{fill:#ef3e5d;opacity:1}50%{fill:#f87171;opacity:.42}}
        @keyframes pd-flow{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}
        @keyframes pd-breathe{0%,100%{opacity:1}50%{opacity:.65}}
        @keyframes pd-scan{0%{opacity:.42}50%{opacity:.88}100%{opacity:.42}}
        @keyframes pd-active{0%,100%{stroke-width:1;opacity:1}50%{stroke-width:1.8;opacity:.65}}
        @keyframes pd-scanline{0%{transform:translateY(-120%)}100%{transform:translateY(1800%)}}
        .pd-nd{cursor:pointer;transition:filter .15s}.pd-nd:hover{filter:brightness(1.18)}
      `}</style>

      <div className="shell" style={{ position: "relative" }}>

        {/* Header */}
        <div style={{ display: "flex", alignItems: "flex-end", gap: 48, marginBottom: 40, flexWrap: "wrap" }}>
          <div style={{ flex: "0 1 auto" }}>
            <span className="eyebrow" style={{ color: "rgba(240,236,228,0.5)" }}><span className="dot"></span>Platform architecture</span>
            <h2 className="display h2" style={{ color: "#f0ece4", marginTop: 10 }}>
              One pipeline.<br /><em style={{ color: "rgba(240,236,228,0.38)" }}>Both products. Every layer.</em>
            </h2>
          </div>
          <p style={{ fontFamily: "var(--sans)", fontSize: 15, color: "rgba(240,236,228,0.5)", lineHeight: 1.7, flex: "1 1 300px", maxWidth: "50ch", margin: 0, paddingBottom: 4 }}>
            XIoT discovers and audits every device. Turing continuously watches, correlates, and responds. Together they cover the full security lifecycle — from first contact to automated threat response.
          </p>
        </div>

        {/* Live counter strip */}
        <div style={{ display: "flex", background: "rgba(255,255,255,0.025)", border: "1px solid rgba(240,236,228,0.07)", borderRadius: 10, overflow: "hidden", marginBottom: 20 }}>
          {[
            { val: assets.toLocaleString(), label: "Assets discovered",     color: "#f0ece4"                },
            { val: "3",                      label: "Critical CVEs found",   color: "#ef3e5d"                },
            { val: hardened.toLocaleString(),label: "Devices hardened",      color: "#22c55e"                },
            { val: proto.toLocaleString(),   label: "Protocol events / sec", color: "rgba(240,236,228,0.6)"  },
            { val: "97.4%",                  label: "Audit coverage",        color: "#f59e0b"                },
          ].map((c, i, arr) => (
            <div key={i} style={{ flex: 1, padding: "13px 16px", textAlign: "center", borderRight: i < arr.length - 1 ? "1px solid rgba(240,236,228,0.06)" : "none" }}>
              <div style={{ fontFamily: "var(--mono)", fontSize: 15, fontWeight: 500, color: c.color }}>{c.val}</div>
              <div style={{ fontFamily: "var(--mono)", fontSize: 12.5, color: "rgba(240,236,228,0.25)", marginTop: 3, letterSpacing: ".03em" }}>{c.label}</div>
            </div>
          ))}
        </div>

        {/* SVG canvas wrapper */}
        <div style={{ position: "relative", background: "rgba(255,255,255,0.018)", border: "1px solid rgba(240,236,228,0.08)", borderRadius: 14, overflow: "hidden" }}>
          <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 2, background: "linear-gradient(90deg,#ef3e5d,#5b8def,transparent)", zIndex: 2 }} />
          <div style={{ position: "absolute", left: 0, right: 0, height: 1, background: "linear-gradient(90deg,transparent,rgba(239,62,93,0.1),transparent)", animation: "pd-scanline 7s linear infinite", pointerEvents: "none", zIndex: 1 }} />

          <svg viewBox="0 0 900 740" xmlns="http://www.w3.org/2000/svg" style={{ display: "block", width: "100%" }}>
            <defs>
              <filter id="pd-gr" x="-40%" y="-40%" width="180%" height="180%"><feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
              <filter id="pd-ga" x="-40%" y="-40%" width="180%" height="180%"><feGaussianBlur stdDeviation="2" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
              <filter id="pd-gb" x="-40%" y="-40%" width="180%" height="180%"><feGaussianBlur stdDeviation="4" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
            </defs>

            {/* grid */}
            <g opacity="0.03">
              {[100,200,300,400,500,600,700].map(y => <line key={"h"+y} x1="0" y1={y} x2="900" y2={y} stroke="#f0ece4" strokeWidth=".5"/>)}
              {[100,200,300,400,500,600,700,800].map(x => <line key={"v"+x} x1={x} y1="0" x2={x} y2="740" stroke="#f0ece4" strokeWidth=".5"/>)}
            </g>

            <text fontFamily="Geist Mono,monospace" fontSize="9" fill="rgba(240,236,228,0.1)" x="450" y="18" textAnchor="middle" letterSpacing="1">PASSIVE DISCOVERY · ZERO ACTIVE SCAN · CVE DETECTION · COMPLIANCE MAPPING — REDINENT XIOT</text>

            {/* Pulse rings */}
            <circle cx="99"  cy="63" r="22" fill="none" stroke="#ef3e5d"              strokeWidth="1.5" opacity=".45" style={{ animation:"pd-ring 1.6s ease-in-out infinite"        }}/>
            <circle cx="247" cy="63" r="22" fill="none" stroke="rgba(245,158,11,0.7)" strokeWidth="1"   opacity=".28" style={{ animation:"pd-ring 2.8s ease-in-out infinite .4s"   }}/>
            <circle cx="395" cy="63" r="22" fill="none" stroke="rgba(245,158,11,0.7)" strokeWidth="1"   opacity=".28" style={{ animation:"pd-ring 2.4s ease-in-out infinite .8s"   }}/>
            <circle cx="599" cy="63" r="22" fill="none" stroke="rgba(245,158,11,0.7)" strokeWidth="1"   opacity=".28" style={{ animation:"pd-ring 2.2s ease-in-out infinite .6s"   }}/>
            <circle cx="757" cy="63" r="22" fill="none" stroke="rgba(34,197,94,0.5)"  strokeWidth="1"   opacity=".35" style={{ animation:"pd-ring 3s ease-in-out infinite .2s"     }}/>

            {/* Device node 1 — IP Camera CVE EXPOSED (red) */}
            <g className="pd-nd" onClick={() => toggle('ipcam')}>
              <rect x="36" y="32" width="126" height="58" rx="8" fill={activeNode==='ipcam'?"#200609":"#1a0608"} stroke="#ef3e5d" strokeWidth="1"/>
              <rect x="36" y="32" width="126" height="3" rx="2" fill="#ef3e5d" opacity=".8"/>
              <text fontFamily="Geist Mono,monospace" fontSize="11" fontWeight="700" fill="#fca5a5" x="99" y="52" textAnchor="middle" dominantBaseline="central">IP Camera fleet</text>
              <text fontFamily="Geist Mono,monospace" fontSize="9" fill="#ef3e5d" x="99" y="68" textAnchor="middle" dominantBaseline="central">CVE EXPOSED</text>
              <circle cx="148" cy="36" r="4" style={{ animation:"pd-threat 1s step-end infinite" }}/>
            </g>

            {/* Device node 2 — BMS / HVAC (amber) */}
            <g className="pd-nd" onClick={() => toggle('bms')}>
              <rect x="182" y="32" width="126" height="58" rx="8" fill={activeNode==='bms'?"#1c1505":"rgba(18,13,3,0.95)"} stroke="rgba(245,158,11,0.45)" strokeWidth=".5"/>
              <rect x="182" y="32" width="126" height="3" rx="2" fill="#f59e0b" opacity=".45"/>
              <text fontFamily="Geist Mono,monospace" fontSize="11" fontWeight="700" fill="#f0ece4" x="245" y="52" textAnchor="middle" dominantBaseline="central">BMS / HVAC</text>
              <text fontFamily="Geist Mono,monospace" fontSize="9" fill="#f59e0b" x="245" y="68" textAnchor="middle" dominantBaseline="central">UNPATCHED</text>
              <circle cx="294" cy="36" r="4" fill="#f59e0b" opacity=".6" style={{ animation:"pd-pulse 2.3s ease-in-out infinite .3s" }}/>
            </g>

            {/* Device node 3 — Screen Mirroring (amber) */}
            <g className="pd-nd" onClick={() => toggle('screenmirror')}>
              <rect x="328" y="32" width="126" height="58" rx="8" fill={activeNode==='screenmirror'?"#1c1505":"rgba(18,13,3,0.95)"} stroke="rgba(245,158,11,0.45)" strokeWidth=".5"/>
              <rect x="328" y="32" width="126" height="3" rx="2" fill="#f59e0b" opacity=".45"/>
              <text fontFamily="Geist Mono,monospace" fontSize="11" fontWeight="700" fill="#f0ece4" x="391" y="52" textAnchor="middle" dominantBaseline="central">DATA CENTER</text>
              <text fontFamily="Geist Mono,monospace" fontSize="9" fill="#f59e0b" x="391" y="68" textAnchor="middle" dominantBaseline="central">DEFAULT CRED</text>
              <circle cx="440" cy="36" r="4" fill="#f59e0b" opacity=".6" style={{ animation:"pd-pulse 2.6s ease-in-out infinite .6s" }}/>
            </g>

            {/* Device node 4 — Access Controller (amber) */}
            <g className="pd-nd" onClick={() => toggle('accessctrl')}>
              <rect x="536" y="32" width="126" height="58" rx="8" fill={activeNode==='accessctrl'?"#1c1505":"rgba(18,13,3,0.95)"} stroke="rgba(245,158,11,0.45)" strokeWidth=".5"/>
              <rect x="536" y="32" width="126" height="3" rx="2" fill="#f59e0b" opacity=".45"/>
              <text fontFamily="Geist Mono,monospace" fontSize="11" fontWeight="700" fill="#f0ece4" x="599" y="52" textAnchor="middle" dominantBaseline="central">Access Controller</text>
              <text fontFamily="Geist Mono,monospace" fontSize="9" fill="#f59e0b" x="599" y="68" textAnchor="middle" dominantBaseline="central">UNAUDITED</text>
              <circle cx="648" cy="36" r="4" fill="#f59e0b" opacity=".6" style={{ animation:"pd-pulse 1.9s ease-in-out infinite .9s" }}/>
            </g>

            {/* Device node 5 — NVR / VMS (green) */}
            <g className="pd-nd" onClick={() => toggle('nvrvms')}>
              <rect x="682" y="32" width="126" height="58" rx="8" fill={activeNode==='nvrvms'?"#071810":"rgba(4,16,9,0.95)"} stroke="rgba(34,197,94,0.35)" strokeWidth=".5"/>
              <rect x="682" y="32" width="126" height="3" rx="2" fill="#22c55e" opacity=".4"/>
              <text fontFamily="Geist Mono,monospace" fontSize="11" fontWeight="700" fill="#86efac" x="745" y="52" textAnchor="middle" dominantBaseline="central">OT/SCADA</text>
              <text fontFamily="Geist Mono,monospace" fontSize="9" fill="#22c55e" x="745" y="68" textAnchor="middle" dominantBaseline="central">PROBING</text>
              <circle cx="794" cy="36" r="4" fill="#22c55e" style={{ animation:"pd-pulse 2s ease-in-out infinite" }}/>
            </g>

            {/* Data flow lines: devices → XIoT */}
            <line x1="99"  y1="90" x2="356" y2="195" stroke="#ef3e5d"              strokeWidth="1.5" strokeDasharray="4 3" opacity=".55" style={{ animation:"pd-flow 1.2s linear infinite"       }}/>
            <line x1="245" y1="90" x2="376" y2="195" stroke="rgba(245,158,11,0.8)" strokeWidth="1"   strokeDasharray="6 4" opacity=".3"  style={{ animation:"pd-flow 2.4s linear infinite .3s"   }}/>
            <line x1="391" y1="90" x2="420" y2="195" stroke="rgba(245,158,11,0.8)" strokeWidth="1"   strokeDasharray="6 4" opacity=".3"  style={{ animation:"pd-flow 2.2s linear infinite .6s"   }}/>
            <line x1="599" y1="90" x2="464" y2="195" stroke="rgba(245,158,11,0.8)" strokeWidth="1"   strokeDasharray="6 4" opacity=".3"  style={{ animation:"pd-flow 2.6s linear infinite .9s"   }}/>
            <line x1="745" y1="90" x2="484" y2="195" stroke="rgba(34,197,94,0.7)"  strokeWidth="1"   strokeDasharray="6 4" opacity=".3"  style={{ animation:"pd-flow 2s linear infinite 1.2s"   }}/>

            {/* Moving dots */}
            <circle r="4" fill="#ef3e5d" opacity=".9" filter="url(#pd-gr)"><animateMotion dur="1.2s" repeatCount="indefinite" path="M99,90 L356,195"/></circle>
            <circle r="3" fill="#f59e0b" opacity=".7" filter="url(#pd-ga)"><animateMotion dur="2.4s" repeatCount="indefinite" begin="0.5s" path="M245,90 L376,195"/></circle>
            <circle r="3" fill="#f59e0b" opacity=".7" filter="url(#pd-ga)"><animateMotion dur="2.2s" repeatCount="indefinite" begin="1s"   path="M391,90 L420,195"/></circle>
            <circle r="3" fill="#f59e0b" opacity=".7" filter="url(#pd-ga)"><animateMotion dur="2.6s" repeatCount="indefinite" begin="1.4s" path="M599,90 L464,195"/></circle>
            <circle r="3" fill="#22c55e" opacity=".7" filter="url(#pd-ga)"><animateMotion dur="2s"   repeatCount="indefinite" begin="0.8s" path="M745,90 L484,195"/></circle>

            {/* XIoT engine */}
            <rect x="168" y="182" width="564" height="86" rx="16" fill="none" stroke="#f59e0b" strokeWidth="1" opacity=".15" style={{ animation:"pd-breathe 3s ease-in-out infinite" }}/>
            <rect x="172" y="186" width="556" height="80" rx="14" fill="rgba(20,12,0,0.92)" stroke="rgba(245,158,11,0.38)" strokeWidth="1" filter="url(#pd-ga)"/>
            <rect x="172" y="186" width="556" height="3" rx="2" fill="#f59e0b" opacity=".85"/>
            <text fontFamily="Geist Mono,monospace" fontSize="14" fontWeight="700" fill="#f59e0b" x="450" y="213" textAnchor="middle" dominantBaseline="central">Redinent XIoT</text>
            <text fontFamily="Geist Mono,monospace" fontSize="10" fill="rgba(245,158,11,0.4)" x="450" y="236" textAnchor="middle" dominantBaseline="central">AI enabled smart discovery · no disruption to operations</text>
            <rect x="172" y="186" width="556" height="80" rx="14" fill="none" stroke="#f59e0b" strokeWidth=".5" opacity=".1" style={{ animation:"pd-scan 2s ease-in-out infinite" }}/>
            {[360,380,400,420,440,460,480,500,520].map((cx,i) => (
              <circle key={cx} cx={cx} cy="255" r="2.5" fill="#f59e0b" opacity=".45" style={{ animation:`pd-pulse 1s ease-in-out infinite ${(i*0.2).toFixed(1)}s` }}/>
            ))}

            {/* XIoT → layers connector */}
            <line x1="450" y1="266" x2="450" y2="294" stroke="rgba(240,236,228,0.18)" strokeWidth="1.5" strokeDasharray="4 3" opacity=".6" style={{ animation:"pd-flow 1.5s linear infinite" }}/>
            <circle r="3" fill="rgba(240,236,228,0.45)" filter="url(#pd-ga)"><animateMotion dur="1.5s" repeatCount="indefinite" path="M450,266 L450,294"/></circle>

            {/* Layer 1: Asset fingerprinting */}
            <g className="pd-nd" onClick={() => toggle('layer1')} style={{ animation:"pd-scan 4s ease-in-out infinite" }}>
              <rect x="76" y="298" width="728" height="50" rx="8" fill={activeNode==='layer1'?"rgba(255,255,255,0.055)":"rgba(255,255,255,0.03)"} stroke="rgba(240,236,228,0.09)" strokeWidth=".5"/>
              <rect x="76" y="298" width="728" height="2" rx="1" fill="rgba(240,236,228,0.14)" opacity=".6"/>
              <text fontFamily="Geist Mono,monospace" fontSize="12" fontWeight="700" fill="rgba(240,236,228,0.75)" x="310" y="317" textAnchor="middle" dominantBaseline="central">AI Enabled Asset fingerprinting</text>
              <text fontFamily="Geist Mono,monospace" fontSize="9.5" fill="rgba(240,236,228,0.32)" x="310" y="334" textAnchor="middle" dominantBaseline="central">Device ID · firmware version · manufacturer · open ports</text>
              <text fontFamily="Geist Mono,monospace" fontSize="10" fill="rgba(240,236,228,0.26)" x="768" y="326" textAnchor="end" dominantBaseline="central">See every device</text>
              <circle cx="782" cy="326" r="3" fill="#22c55e" style={{ animation:"pd-pulse 2s ease-in-out infinite" }}/>
            </g>

            {/* Layer 2: CVE mapping — red ACTIVE */}
            <g className="pd-nd" onClick={() => toggle('layer2')}>
              <rect x="76" y="356" width="728" height="50" rx="8" fill={activeNode==='layer2'?"rgba(239,62,93,0.11)":"rgba(239,62,93,0.065)"} stroke="rgba(239,62,93,0.38)" strokeWidth="1" style={{ animation:"pd-active 2s ease-in-out infinite" }}/>
              <rect x="76" y="356" width="728" height="2" rx="1" fill="#ef3e5d" opacity=".8"/>
              <text fontFamily="Geist Mono,monospace" fontSize="12" fontWeight="700" fill="#fca5a5" x="310" y="375" textAnchor="middle" dominantBaseline="central">AI enabled CVE &amp; vulnerability mapping</text>
              <text fontFamily="Geist Mono,monospace" fontSize="9.5" fill="#ef3e5d" x="310" y="392" textAnchor="middle" dominantBaseline="central">ICS-CERT cross-reference · CVSS scoring · exploit path — ACTIVE</text>
              <text fontFamily="Geist Mono,monospace" fontSize="10" fill="rgba(239,62,93,0.6)" x="768" y="384" textAnchor="end" dominantBaseline="central">Find every flaw</text>
              <circle cx="782" cy="384" r="4" style={{ animation:"pd-threat 1s step-end infinite" }}/>
            </g>

            {/* Layer 3: Credential audit — amber */}
            <g className="pd-nd" onClick={() => toggle('layer3')} style={{ animation:"pd-scan 4s ease-in-out infinite .6s" }}>
              <rect x="76" y="414" width="728" height="50" rx="8" fill={activeNode==='layer3'?"rgba(245,158,11,0.09)":"rgba(245,158,11,0.05)"} stroke="rgba(245,158,11,0.22)" strokeWidth=".5"/>
              <rect x="76" y="414" width="728" height="2" rx="1" fill="#f59e0b" opacity=".4"/>
              <text fontFamily="Geist Mono,monospace" fontSize="12" fontWeight="700" fill="rgba(240,236,228,0.78)" x="310" y="433" textAnchor="middle" dominantBaseline="central">Credential &amp; access audit</text>
              <text fontFamily="Geist Mono,monospace" fontSize="9.5" fill="rgba(245,158,11,0.48)" x="310" y="450" textAnchor="middle" dominantBaseline="central">Default passwords · open admin panels · shared credential extraction</text>
              <text fontFamily="Geist Mono,monospace" fontSize="10" fill="rgba(245,158,11,0.42)" x="768" y="442" textAnchor="end" dominantBaseline="central">No default left</text>
              <circle cx="782" cy="442" r="3" fill="#f59e0b" opacity=".62" style={{ animation:"pd-pulse 2.2s ease-in-out infinite .3s" }}/>
            </g>

            {/* Layer 4: Protocol inspection */}
            <g className="pd-nd" onClick={() => toggle('layer4')} style={{ animation:"pd-scan 4s ease-in-out infinite 1.2s" }}>
              <rect x="76" y="472" width="728" height="50" rx="8" fill={activeNode==='layer4'?"rgba(255,255,255,0.055)":"rgba(255,255,255,0.03)"} stroke="rgba(240,236,228,0.09)" strokeWidth=".5"/>
              <rect x="76" y="472" width="728" height="2" rx="1" fill="rgba(240,236,228,0.14)" opacity=".6"/>
              <text fontFamily="Geist Mono,monospace" fontSize="12" fontWeight="700" fill="rgba(240,236,228,0.75)" x="310" y="491" textAnchor="middle" dominantBaseline="central">AI enabled Protocol inspection</text>
              <text fontFamily="Geist Mono,monospace" fontSize="9.5" fill="rgba(240,236,228,0.32)" x="310" y="508" textAnchor="middle" dominantBaseline="central">RTSP · ONVIF · BACnet · Modbus · proprietary firmware analysis</text>
              <text fontFamily="Geist Mono,monospace" fontSize="10" fill="rgba(240,236,228,0.26)" x="768" y="500" textAnchor="end" dominantBaseline="central">Read every packet</text>
              <circle cx="782" cy="500" r="3" fill="#22c55e" style={{ animation:"pd-pulse 2.4s ease-in-out infinite .6s" }}/>
            </g>

            {/* Layer 5: Compliance mapping */}
            <g className="pd-nd" onClick={() => toggle('layer5')} style={{ animation:"pd-scan 4s ease-in-out infinite 1.8s" }}>
              <rect x="76" y="530" width="728" height="50" rx="8" fill={activeNode==='layer5'?"rgba(255,255,255,0.055)":"rgba(255,255,255,0.03)"} stroke="rgba(240,236,228,0.09)" strokeWidth=".5"/>
              <rect x="76" y="530" width="728" height="2" rx="1" fill="rgba(240,236,228,0.14)" opacity=".6"/>
              <text fontFamily="Geist Mono,monospace" fontSize="12" fontWeight="700" fill="rgba(240,236,228,0.75)" x="310" y="549" textAnchor="middle" dominantBaseline="central">Agentic Compliance mapping</text>
              <text fontFamily="Geist Mono,monospace" fontSize="9.5" fill="rgba(240,236,228,0.32)" x="310" y="566" textAnchor="middle" dominantBaseline="central">NDAA · Meity · ISO 27001 · IEC 62443 · STQC — audit-ready reports</text>
              <text fontFamily="Geist Mono,monospace" fontSize="10" fill="rgba(240,236,228,0.26)" x="768" y="558" textAnchor="end" dominantBaseline="central">Report everything</text>
              <circle cx="782" cy="558" r="3" fill="#22c55e" style={{ animation:"pd-pulse 1.8s ease-in-out infinite 1s" }}/>
            </g>

            {/* Layers → Turing connector */}
            <line x1="450" y1="580" x2="450" y2="610" stroke="#5b8def" strokeWidth="1.5" strokeDasharray="4 3" opacity=".55" style={{ animation:"pd-flow 1.8s linear infinite" }}/>
            <circle r="3" fill="#5b8def" filter="url(#pd-gb)"><animateMotion dur="1.8s" repeatCount="indefinite" path="M450,580 L450,610"/></circle>

            {/* Turing engine */}
            <rect x="168" y="612" width="564" height="66" rx="14" fill="rgba(6,10,20,0.95)" stroke="rgba(91,141,239,0.35)" strokeWidth="1" style={{ animation:"pd-active 2.5s ease-in-out infinite" }}/>
            <rect x="168" y="612" width="564" height="3" rx="2" fill="#5b8def" opacity=".8"/>
            <text fontFamily="Geist Mono,monospace" fontSize="14" fontWeight="700" fill="#5b8def" x="450" y="638" textAnchor="middle" dominantBaseline="central">Redinent Turing</text>
            <text fontFamily="Geist Mono,monospace" fontSize="10" fill="rgba(91,141,239,0.42)" x="450" y="658" textAnchor="middle" dominantBaseline="central">Behavioural AI · continuous monitoring · automated threat response</text>

            {/* Bracket */}
            <line x1="58" y1="298" x2="58" y2="580" stroke="rgba(240,236,228,0.07)" strokeWidth=".5"/>
            <line x1="58" y1="298" x2="76" y2="298" stroke="rgba(240,236,228,0.07)" strokeWidth=".5"/>
            <line x1="58" y1="580" x2="76" y2="580" stroke="rgba(240,236,228,0.07)" strokeWidth=".5"/>
            <text fontFamily="Geist Mono,monospace" fontSize="9" fill="rgba(240,236,228,0.49)" x="46" y="439" textAnchor="middle" dominantBaseline="central" transform="rotate(-90,46,439)">XIoT analysis pipeline — discover · assess · harden · comply</text>

            {/* Corner crosshairs */}
            <g stroke="rgba(239,62,93,0.15)" strokeWidth=".5">
              <line x1="20" y1="25" x2="35" y2="25"/><line x1="20" y1="25" x2="20" y2="40"/>
              <line x1="880" y1="25" x2="865" y2="25"/><line x1="880" y1="25" x2="880" y2="40"/>
              <line x1="20" y1="720" x2="35" y2="720"/><line x1="20" y1="720" x2="20" y2="705"/>
              <line x1="880" y1="720" x2="865" y2="720"/><line x1="880" y1="720" x2="880" y2="705"/>
            </g>
            <text fontFamily="Geist Mono,monospace" fontSize="8" fill="rgba(240,236,228,0.08)" x="878" y="730" textAnchor="end">REDINENT-XIOT v2.4.1 · AI Enabled · ZERO-DISRUPTION · TURING-POWERED</text>
          </svg>
        </div>

        {/* Node info panel */}
        {activeInfo && (
          <div style={{ marginTop: 16, background: "rgba(255,255,255,0.025)", border: "1px solid rgba(240,236,228,0.09)", borderRadius: 10, padding: "18px 24px" }}>
            <div style={{ fontFamily: "var(--mono)", fontSize: 11, fontWeight: 600, color: activeInfo.color, marginBottom: 8, letterSpacing: ".06em", textTransform: "uppercase" }}>{activeInfo.title}</div>
            <p style={{ fontFamily: "var(--sans)", fontSize: 13.5, color: "rgba(240,236,228,0.55)", lineHeight: 1.7, margin: 0 }}>{activeInfo.body}</p>
          </div>
        )}

        {/* Legend */}
        <div style={{ display: "flex", gap: 24, flexWrap: "wrap", marginTop: 16, alignItems: "center" }}>
          {[
            { color: "#ef3e5d",               label: "CVE exposed"           },
            { color: "#f59e0b",               label: "Unpatched / unaudited" },
            { color: "#22c55e",               label: "Scanning / secure"     },
            { color: "rgba(240,236,228,0.3)", label: "XIoT analysis layer"   },
            { color: "#5b8def",               label: "Turing — AI response"  },
          ].map((l, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 7, fontFamily: "var(--mono)", fontSize: 11, color: "rgba(240,236,228,0.35)", letterSpacing: ".04em" }}>
              <div style={{ width: 8, height: 8, borderRadius: 2, background: l.color, flexShrink: 0 }} />
              {l.label}
            </div>
          ))}
          <span style={{ marginLeft: "auto", fontFamily: "var(--mono)", fontSize: 10, color: "rgba(240,236,228,0.18)", letterSpacing: ".08em" }}>CLICK ANY NODE TO EXPLORE</span>
        </div>

      </div>
    </section>
  );
}

// ─── PageHome ────────────────────────────────────────────────

function PageHome({ navigate }) {

  const verticals = [
    { icon: "ph-buildings",        name: "Data Centers",      headline: "OpenBMC to AI firmware — the full stack.",     image: "assets/slider-data-center.jpg",   page: "solution-datacenter"    },
    { icon: "ph-camera",           name: "CCTV & Surveillance",headline: "The largest attack surface you never audit.",  image: "assets/sector-cctv.jpg",          page: "solution-cctv"          },
    { icon: "ph-traffic-sign",     name: "Smart Cities",       headline: "CCTV fleets, traffic and citizen data.",       image: "assets/slider-smartcity.jpg",     page: "solution-smartcity"     },
    { icon: "ph-gas-pump",         name: "Oil & Gas",          headline: "SCADA and safety-critical OT.",                image: "assets/slider-oil-and-gas.jpg",   page: "solution-oilandgas"     },
    { icon: "ph-building-apartment",name: "Government",        headline: "STQC-certified. Sovereign deployments.",       image: "assets/slider-government.jpg",    page: "solution-government"    },
    { icon: "ph-factory",          name: "Manufacturing",      headline: "PLC security without production disruption.",  image: "assets/slider-manufacturing.jpg", page: "solution-manufacturing" },
    { icon: "ph-lightning",        name: "Power & Energy",     headline: "Grid security and substation protection.",     image: "assets/slider-power.jpg",         page: "solution-powerenergy"   },
    { icon: "ph-door",             name: "Smart Buildings",    headline: "BMS, HVAC and access control — secured.",      image: "assets/sector-buildings.jpg",     page: "solution-smartbuildings"},
  ];

  const cves = [
    { id: "CVE-2026-0629",  title: "Authentication Bypass in TP-Link IP Camera", vendor: "TP-Link",       sev: "critical" },
    { id: "CVE-2024-10381", title: "Authentication Bypass in Access Control",     vendor: "Matrix Comsec", sev: "critical" },
    { id: "CVE-2023-0773",  title: "Authentication Bypass in IP Camera",          vendor: "Uniview",       sev: "critical" },
  ];

  // Refs for GSAP pinned bridge sequence
  const pageRef          = React.useRef(null);
  const bridgeSectionRef = React.useRef(null);
  const bridgePanelRef   = React.useRef(null);
  const beat1Ref         = React.useRef(null);
  const beat2Ref         = React.useRef(null);
  const beat3Ref         = React.useRef(null);

  const { lbState, openLightbox, closeLightbox, lbPrev, lbNext } = useLightbox();

  // ── GSAP: bridge pin + general scroll animations ──────────────
  useEffectHome(() => {
    const gsap = window.gsap;
    const ST   = window.ScrollTrigger;
    if (!gsap || !ST) return;

    const ctx = gsap.context(() => {

      // ── 1. Pinned scroll sequence ───────────────────────────
      const section = bridgeSectionRef.current;
      const panel   = bridgePanelRef.current;
      const beat1   = beat1Ref.current;
      const beat2   = beat2Ref.current;
      const beat3   = beat3Ref.current;

      if (section && panel && beat1 && beat2 && beat3) {
        gsap.set([beat1, beat2, beat3], { opacity: 0 });
        const L1  = beat1.querySelectorAll('.bb-line');
        const L2  = beat2.querySelectorAll('.bb-line');
        const L3  = beat3.querySelectorAll('.bb-line');
        const cta = beat3.querySelector('.bb-cta');
        gsap.set([...L1, ...L2, ...L3], { opacity: 0, y: 52 });
        if (cta) gsap.set(cta, { opacity: 0, y: 20 });

        const tl = gsap.timeline({
          scrollTrigger: {
            trigger: section,
            start: "top top",
            end: "bottom bottom",
            scrub: 1.8,
            pin: panel,
            anticipatePin: 1,
          }
        });

        tl
          // ── Beat 1 in ─────────────────────
          .to(beat1, { opacity: 1, duration: 0.2 })
          .to(L1, { opacity: 1, y: 0, duration: 0.55, stagger: 0.22, ease: "power2.out" }, "<0.05")
          .to({}, { duration: 2.4 })                          // hold
          .to(beat1, { opacity: 0, y: -60, duration: 0.5, ease: "power2.in" })

          // ── Beat 2 in ─────────────────────
          .to(beat2, { opacity: 1, duration: 0.2 })
          .to(L2, { opacity: 1, y: 0, duration: 0.55, stagger: 0.22, ease: "power2.out" }, "<0.05")
          .to({}, { duration: 2.4 })                          // hold
          .to(beat2, { opacity: 0, y: -60, duration: 0.5, ease: "power2.in" })

          // ── Beat 3 in ─────────────────────
          .to(beat3, { opacity: 1, duration: 0.2 })
          .to(L3, { opacity: 1, y: 0, duration: 0.6, stagger: 0.28, ease: "power2.out" }, "<0.05")
          .to({}, { duration: 1.4 })
          .to(cta, { opacity: 1, y: 0, duration: 0.45, ease: "power2.out" })
          .to({}, { duration: 2.2 });                         // final hold before unpin
      }

      // ── 2. General scroll fade-ups ──────────────────────────
      gsap.utils.toArray('.problem-cell').forEach((el, i) => {
        gsap.from(el, {
          scrollTrigger: { trigger: el, start: "top 88%", toggleActions: "play none none none" },
          y: 52, opacity: 0, duration: 0.75, delay: i * 0.13, ease: "power2.out",
        });
      });

      gsap.utils.toArray('.stat').forEach((el, i) => {
        gsap.from(el, {
          scrollTrigger: { trigger: el, start: "top 88%", toggleActions: "play none none none" },
          y: 40, opacity: 0, duration: 0.6, delay: i * 0.09, ease: "power2.out",
        });
      });

      gsap.utils.toArray('.cve-row').forEach((el, i) => {
        gsap.from(el, {
          scrollTrigger: { trigger: el, start: "top 90%", toggleActions: "play none none none" },
          x: -30, opacity: 0, duration: 0.55, delay: i * 0.08, ease: "power2.out",
        });
      });

    }, pageRef);

    return () => ctx.revert();
  }, []);

  return (
    <div ref={pageRef} data-screen-label="Home">

      {/* ── 1. HERO — CURIOSITY + PATTERN INTERRUPT ───────── */}
      <section className="hero" data-mode="dark" data-screen-label="Home / Hero">
        <div className="hero-grid"></div>
        <div className="shell hero-content">
          <div>
            <span className="eyebrow"><span className="dot"></span>AI-Native · Edge, IT, Data Center, IoT &amp; OT Security Platform</span>
            <h1 className="display h1" style={{ marginTop: 24 }}>
              See Every Device.<br />
              <em>Secure Every Layer.</em>
            </h1>
            <div className="hero-cta-row" style={{ marginTop: 40 }}>
              <a href="#contact" className="btn btn-primary"
                 onClick={(e) => { e.preventDefault(); navigate("contact"); }}
                 style={{ padding: "14px 24px" }}>
                <i className="ph ph-calendar-check" style={{ fontSize: 16 }}></i>
                Book a Demo
              </a>
              <a href="#xiot" className="btn btn-ghost"
                 onClick={(e) => { e.preventDefault(); navigate("xiot"); }}
                 style={{ padding: "14px 24px" }}>
                Explore XIoT Platform
              </a>
            </div>
            <div className="row" style={{ marginTop: 48, gap: 32, flexWrap: "wrap" }}>
              <span className="kicker">Trusted infrastructure</span>
              <span className="mono" style={{ fontSize: 12, color: "var(--ink-2)" }}>STQC Empanelled Lab</span>
              <span className="mono" style={{ fontSize: 12, color: "var(--ink-2)" }}>9 Published CVEs</span>
              <span className="mono" style={{ fontSize: 12, color: "var(--ink-2)" }}>India · UAE · Australia</span>
            </div>
          </div>
          <DeviceRiskConsole />
        </div>
      </section>

      {/* ── MARQUEE ─────────────────────────────────────────── */}
      <div style={{ background: "#0a0d13" }}>
        <Marquee items={[
          "9 published CVEs across global OEMs",
          "Autonomous AI agents · 24/7 threat intelligence",
          "ONVIF · BACnet · Modbus · SNMP · Telnet",
          "OpenBMC · UEFI · DC-SCM Firmware",
          "STQC Empanelled Lab · India",
          "Air-gap and offline deployments",
          "Custom firmware research under NDA",
          "Data Centers · Smart Cities · Oil & Gas · Government",
          "CCTV · NVR · VMS deep audit",
        ]} />
      </div>

      {/* ── 2. PROBLEM — LOSS FRAME + CONTRAST + SPECIFICITY ─ */}
      <section className="section" data-screen-label="Home / Problem" style={{ padding: "var(--s-7) 0" }}>
        <div className="shell">
          <div style={{ display: "flex", alignItems: "flex-end", gap: 48, marginBottom: 36, flexWrap: "wrap" }}>
            <div style={{ flex: "0 1 auto" }}>
              <span className="eyebrow"><span className="dot"></span>What your security stack cannot see</span>
              <h2 className="display h2" style={{ marginTop: 10 }}>Network scanners see traffic.<br /><em>Redinent explore the inside.</em></h2>
            </div>
            <p className="lede" style={{ flex: "1 1 300px", maxWidth: "48ch", paddingBottom: 4, margin: 0 }}>Three blind spots in every enterprise IoT deployment — costing organizations millions before they're discovered. None of them appear in your SIEM.</p>
          </div>
          <div className="problem-grid">
            <div className="problem-cell">
              <div className="big"><em>67%</em></div>
              <div className="kicker">Unpatched firmware in a typical enterprise deployment</div>
              <p>Your vulnerability scanner found nothing because it checked the network traffic, not the firmware. Redinent interrogates the firmware image directly — CVE exposure, certificate expiry, Signed / Unsigned firmware, password hashes — automatically, on first contact.</p>
            </div>
            <div className="problem-cell">
              <div className="big"><em>28</em></div>
              <div className="kicker">Default or hardcoded credentials per deployment</div>
              <p>Every one is an open door. Your firewall cannot see them because they live inside the firmware binary — not in the traffic. Passive traffic analysis is completely blind to what's burned into the device at the factory.</p>
            </div>
            <div className="problem-cell">
              <div className="big"><em style={{ fontSize: "clamp(28px,4vw,44px)", letterSpacing: "-.01em" }}>Brand ≠<br/>Firmware</em></div>
              <div className="kicker">Hidden insecure OEM components in branded hardware</div>
              <p>A camera sold as a western OEM brand runs Hikvision firmware. Enterprise procurement checks the vendor name. Redinent checks what's actually running inside the device. We've found banned OEM components in critical infrastructure worldwide — airports, banks, government facilities.</p>
            </div>
          </div>
        </div>
      </section>

      {/* ── 3. PLATFORM BRIDGE — Pinned scroll sequence ──────── */}
      {/*     500vh outer section gives ~400vh of scroll travel  */}
      <section
        ref={bridgeSectionRef}
        data-screen-label="Home / Platform Bridge"
        style={{ height: "500vh", position: "relative" }}
      >
        {/* ── The panel that gets pinned ── */}
        <div
          ref={bridgePanelRef}
          style={{ height: "100vh", background: "#080b11", position: "relative", overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center" }}
        >
          {/* Grid overlay */}
          <div aria-hidden="true" style={{ position: "absolute", inset: 0, backgroundImage: "linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px)", backgroundSize: "80px 80px", pointerEvents: "none" }} />
          {/* Radial glow */}
          <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse 80% 60% at 50% 50%, rgba(239,62,93,0.05) 0%, transparent 70%)", pointerEvents: "none" }} />
          {/* Scroll hint — bottom */}
          <div aria-hidden="true" style={{ position: "absolute", bottom: 36, left: "50%", transform: "translateX(-50%)", fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".2em", textTransform: "uppercase", color: "rgba(240,236,228,0.18)" }}>scroll</div>

          {/* ── Beat 1: Segmentation ── */}
          <div ref={beat1Ref} style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", justifyContent: "center", padding: "0 8vw", maxWidth: 1280, margin: "0 auto", left: 0, right: 0 }}>
            <div className="bb-line" style={{ fontSize: "clamp(32px, 5vw, 76px)", fontWeight: 800, color: "#f0ece4", lineHeight: 1.05, letterSpacing: "-0.03em" }}>
              You already know segmentation
            </div>
            <div className="bb-line" style={{ fontSize: "clamp(32px, 5vw, 76px)", fontWeight: 800, color: "#f0ece4", lineHeight: 1.05, letterSpacing: "-0.03em" }}>
              isn't the full answer.
            </div>
            <div className="bb-line" style={{ marginTop: 32, fontSize: "clamp(18px, 2.6vw, 40px)", fontWeight: 500, color: "rgba(240,236,228,0.38)", lineHeight: 1.3, letterSpacing: "-0.015em" }}>
              This is the conversation for after the room clears.
            </div>
          </div>

          {/* ── Beat 2: Firmware layer ── */}
          <div ref={beat2Ref} style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", justifyContent: "center", padding: "0 8vw", maxWidth: 1280, margin: "0 auto", left: 0, right: 0 }}>
            <div className="bb-line" style={{ fontSize: "clamp(32px, 5vw, 76px)", fontWeight: 800, color: "#f0ece4", lineHeight: 1.05, letterSpacing: "-0.03em" }}>
              Your security stack
            </div>
            <div className="bb-line" style={{ fontSize: "clamp(32px, 5vw, 76px)", fontWeight: 800, color: "#f0ece4", lineHeight: 1.05, letterSpacing: "-0.03em" }}>
              has a firmware layer too.
            </div>
            <div className="bb-line" style={{ fontSize: "clamp(32px, 5vw, 76px)", fontWeight: 800, color: "var(--accent)", lineHeight: 1.05, letterSpacing: "-0.03em" }}>
              Nobody is auditing it.
            </div>
          </div>

          {/* ── Beat 3: Purpose-built AI (payoff) ── */}
          <div ref={beat3Ref} style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", justifyContent: "center", padding: "0 8vw", maxWidth: 1280, margin: "0 auto", left: 0, right: 0 }}>
            <div className="bb-line" style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".22em", textTransform: "uppercase", color: "rgba(240,236,228,0.25)", marginBottom: 36 }}>
              The answer to everything above
            </div>
            <div className="bb-line" style={{ fontSize: "clamp(44px, 6.5vw, 100px)", fontWeight: 800, color: "#f0ece4", lineHeight: 0.96, letterSpacing: "-0.04em" }}>
              Purpose-built AI.
            </div>
            <div className="bb-line" style={{ fontSize: "clamp(28px, 4.2vw, 64px)", fontWeight: 700, color: "rgba(240,236,228,0.36)", lineHeight: 1.1, letterSpacing: "-0.03em", marginTop: 10 }}>
              Built for what you just admitted
            </div>
            <div className="bb-line" style={{ fontSize: "clamp(28px, 4.2vw, 64px)", fontWeight: 700, color: "rgba(240,236,228,0.36)", lineHeight: 1.1, letterSpacing: "-0.03em" }}>
              to yourself quietly.
            </div>
            <div className="bb-cta" style={{ display: "flex", gap: 14, marginTop: 56, flexWrap: "wrap", alignItems: "center" }}>
              <a href="#contact" className="btn btn-primary"
                 onClick={(e) => { e.preventDefault(); navigate("contact"); }}
                 style={{ padding: "14px 26px", fontSize: 15 }}>
                <i className="ph ph-calendar-check" style={{ fontSize: 15 }}></i>
                Book a Demo
              </a>
              <a href="#products" className="btn btn-ghost"
                 onClick={(e) => { e.preventDefault(); navigate("products"); }}
                 style={{ padding: "14px 24px", borderColor: "rgba(240,236,228,0.15)", color: "rgba(240,236,228,0.6)", fontSize: 15 }}>
                Explore Platform →
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* ── 4. PRODUCTS — IDENTITY + FUTURE PACE ─────────────── */}
      <section style={{ background: "#0d1017" }} data-screen-label="Home / Products">
        <div className="shell">

          {/* Section header */}
          <div style={{ padding: "var(--s-7) 0 64px", position: "relative", overflowX: "clip", overflowY: "visible" }}>
            {/* XIoT watermark */}
            <div aria-hidden="true" style={{ position: "absolute", top: "110%", left: "60%", transform: "translate(-50%, -50%)", fontSize: "clamp(220px, 30vw, 960px)", fontWeight: 900, color: "rgba(240,236,228,0.045)", letterSpacing: "-0.06em", lineHeight: 1, pointerEvents: "none", userSelect: "none", whiteSpace: "nowrap", fontFamily: "var(--sans)" }}>
              XIoT
            </div>

            <div style={{ position: "relative" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 12 }}>
                <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "rgba(240,236,228,0.22)", letterSpacing: ".14em" }}>01</span>
                <span className="eyebrow" style={{ color: "rgba(240,236,228,0.45)" }}><span className="dot"></span>Platform · Intelligence · Research</span>
              </div>
              <h2 className="display h2" style={{ color: "#f0ece4" }}>A platform ecosystem built<br />around <em style={{ color: "rgba(240,236,228,0.5)" }}>deep inspection.</em></h2>
            </div>
          </div>

          {/* ── Row 1: XIoT — content left, visual right ── */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0 80px", alignItems: "center", paddingBottom: 96, borderBottom: "1px solid rgba(255,255,255,0.06)" }}>
            <div>
              <span style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".16em", textTransform: "uppercase", color: "rgba(240,236,228,0.3)", display: "block", marginBottom: 18 }}>Core Platform · On-Premise</span>
              <h3 style={{ fontSize: "clamp(26px, 3.2vw, 40px)", fontWeight: 700, color: "#f0ece4", lineHeight: 1.15, letterSpacing: "-0.025em", marginBottom: 20 }}>
                It's not what's on your network.<br />
                <span style={{ color: "rgba(240,236,228,0.5)" }}>It's what's running inside it.</span>
              </h3>
              <p style={{ fontSize: 16, color: "rgba(240,236,228,0.55)", lineHeight: 1.75, marginBottom: 28 }}>
                Every device on your network has firmware. Most security tools see the traffic coming out. XIoT reads what's burned in — credentials, certificates, CVE exposure, true OEM identity — automatically, without agents, without disruption.
              </p>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 32 }}>
                {["Asset Discovery", "Firmware Analysis", "Credential Audit", "CVE Correlation", "Compliance Mapping", "Air-Gap Capable"].map(f => (
                  <span key={f} style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".1em", padding: "5px 12px", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 4, color: "rgba(240,236,228,0.5)", textTransform: "uppercase" }}>{f}</span>
                ))}
              </div>
              <a href="#xiot" onClick={(e) => { e.preventDefault(); navigate("xiot"); }}
                 style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 14, fontWeight: 600, color: "var(--accent)", textDecoration: "none" }}>
                Explore Redinent XIoT →
              </a>
            </div>
            <div>
              <XIoTScanVisual />
            </div>
          </div>

          {/* ── Row 2: Turing — visual left, content right ── */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0 80px", alignItems: "center", padding: "96px 0", borderBottom: "1px solid rgba(255,255,255,0.06)", position: "relative", overflow: "hidden" }}>
            {/* TURING watermark */}
            <div aria-hidden="true" style={{ position: "absolute", top: "20%", left: "60%", transform: "translate(-50%, -50%)", fontSize: "clamp(108px, 32vw, 298px)", fontWeight: 900, color: "rgba(240,236,228,0.045)", letterSpacing: "-0.06em", lineHeight: 1, pointerEvents: "none", userSelect: "none", whiteSpace: "nowrap", fontFamily: "var(--sans)" }}>
              TURING
            </div>

            <div style={{ position: "relative" }}>
              <TuringAgentVisual />
            </div>
            <div style={{ position: "relative" }}>
              <span style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: ".16em", textTransform: "uppercase", color: "rgba(240,236,228,0.5)", display: "block", marginBottom: 18 }}>AI Intelligence Layer · Multi-Agent</span>
              <h3 style={{ fontSize: "clamp(26px, 3.2vw, 40px)", fontWeight: 700, color: "#f0ece4", lineHeight: 1.15, letterSpacing: "-0.025em", marginBottom: 20 }}>
                  Turing Fleet<br />
                <span style={{ color: "rgba(240,236,228,0.5)" }}>No sleep. No analyst budget.</span>
              </h3>
              <p style={{ fontSize: 16, color: "rgba(240,236,228,0.55)", lineHeight: 1.75, marginBottom: 28 }}>
                While your SOC handles tickets, Turing's agent fleet is crawling firmware repos, correlating CVEs to device fingerprints, monitoring exploit archives and packaging intelligence bundles — continuously, autonomously, without a single human in the loop.
              </p>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 32 }}>
                {["Firmware Crawling", "CVE Correlation", "Threat Intel", "Exploit Monitoring", "OTX Integration", "Real-time Sync"].map(f => (
                  <span key={f} style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".1em", padding: "5px 12px", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 4, color: "rgba(240,236,228,0.5)", textTransform: "uppercase" }}>{f}</span>
                ))}
              </div>
              <a href="#sigint" onClick={(e) => { e.preventDefault(); navigate("sigint"); }}
                 style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 14, fontWeight: 600, color: "#5b8def", textDecoration: "none" }}>
                Explore Redinent Turing →
              </a>
            </div>
          </div>

          {/* ── Row 3: Labs — content left, visual right ── */}
       

        </div>
      </section>

      <PlatformDiagram navigate={navigate} />

      {/* ── RESEARCH / LABS — proof before application ───────── */}
      <section className="section section-dark" data-screen-label="Home / Research" style={{ padding: "var(--s-7) 0" }}>
        <div className="section-dark-grid"></div>
        <div className="shell" style={{ position: "relative" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0 80px", alignItems: "center" }}>
            <div aria-hidden="true" style={{ position: "absolute", top: "20%", left: "60%", transform: "translate(-50%, -50%)", fontSize: "clamp(108px, 32vw, 298px)", fontWeight: 900, color: "rgba(240,236,228,0.045)", letterSpacing: "-0.06em", lineHeight: 1, pointerEvents: "none", userSelect: "none", whiteSpace: "nowrap", fontFamily: "var(--sans)" }}>
              LABS
            </div>
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 16 }}>
                <span className="eyebrow" style={{ color: "rgba(240,236,228,0.5)" }}><span className="dot"></span>Threat Labs · CVEs published</span>
              </div>
              <h2 className="display h2" style={{ color: "#f0ece4", marginBottom: 20 }}>
                We find what<br /><em style={{ color: "rgba(240,236,228,0.55)" }}>others miss.</em>
              </h2>
              <p style={{ fontSize: 16, color: "rgba(240,236,228,0.55)", lineHeight: 1.75, marginBottom: 28 }}>
                Redinent Threat Labs has published 9 CVEs — authentication bypasses, credential exposure, firmware backdoors — across global OEMs. These aren't theoretical. They were found in devices deployed at airports, banks, data centers and government facilities worldwide. Our research feeds directly back into XIoT.
              </p>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 32 }}>
                {["9 Published CVEs", "Responsible Disclosure", "Firmware Research", "OEM Advisories", "Feeds back to XIoT"].map(f => (
                  <span key={f} style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".1em", padding: "5px 12px", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 4, color: "rgba(240,236,228,0.5)", textTransform: "uppercase" }}>{f}</span>
                ))}
              </div>
              <a href="#research" onClick={(e) => { e.preventDefault(); navigate("research"); }}
                 style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 14, fontWeight: 600, color: "var(--accent)", textDecoration: "none" }}>
                View all research →
              </a>
            </div>
            <div>
              <LabsCVEVisual />
            </div>
          </div>
        </div>
      </section>

      {/* ── SOLUTIONS SLIDER ─────────────────────────────────── */}
      <SolutionsSlider verticals={verticals} navigate={navigate} />

      {/* ── REAL DEPLOYMENT PROOF ────────────────────────────── */}
      <section className="section section-dark" data-screen-label="Home / Deployment Proof">
        <div className="section-dark-grid"></div>
        <div className="shell" style={{ position: "relative" }}>
          <div style={{ marginBottom: 48 }}>
            <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".2em", textTransform: "uppercase", color: "rgba(240,236,228,0.35)", marginBottom: 16 }}>
              Real deployment output · Not a demo
            </div>
            <h2 style={{ fontFamily: "var(--display, var(--sans))", fontSize: "clamp(26px, 3.5vw, 42px)", fontWeight: 700, color: "#f0ece4", letterSpacing: "-0.03em", lineHeight: 1.15, margin: 0 }}>
              26,898 assets discovered.<br />
              <em style={{ color: "var(--accent)" }}>Unfied Exposure Visibilty</em>
            </h2>
            <p style={{ fontFamily: "var(--sans)", fontSize: 16, color: "rgba(240,236,228,0.55)", lineHeight: 1.7, marginTop: 14, maxWidth: "60ch" }}>
              Three views from a single live XIoT deployment — Inventory, Risk &amp; Findings, Attack Surface.
              The numbers are real. The fleet includes Siemens, Axis, Bosch, Hikvision and Cisco devices across seven locations.
            </p>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
            {(() => {
              const shots = [
                {
                  src: "assets/screenshots/org-wide-asset-inventory-multi-location.jpg",
                  label: "INVENTORY",
                  caption: "26,898 total assets · 15,813 unregistered · Siemens 4,173 · Axis 2,805 · Bosch 1,439 across Cairns, Woomera, Palmerston and more.",
                },
                {
                  src: "assets/screenshots/org-wide-risk-dashboard.jpg",
                  label: "RISK & FINDINGS",
                  caption: "15,751 vulnerabilities · 2,403 vulnerable devices · 23 vendors affected. Top vendors: Bosch 6,521 · HID 2,388 · Cisco 2,111.",
                },
                {
                  src: "assets/screenshots/org-wide-attack-surface-dashboard.jpg",
                  label: "ATTACK SURFACE",
                  caption: "90,703 open ports · 11,408 unprotected RTSP video streams · 152 Telnet CRITICAL · 241 FTP CRITICAL · 198 RDP HIGH.",
                },
              ];
              const lbImages = shots.map(s => ({ src: s.src, alt: s.label, caption: s.caption }));
              return shots.map((shot, i) => (
              <div key={i}>
                <div style={{ fontFamily: "var(--mono)", fontSize: 9.5, letterSpacing: ".16em", textTransform: "uppercase", color: "rgba(240,236,228,0.3)", marginBottom: 8 }}>{shot.label}</div>
                <div
                  style={{ borderRadius: 10, overflow: "hidden", border: "1px solid rgba(255,255,255,0.08)", boxShadow: "0 8px 32px rgba(0,0,0,0.45)", cursor: "zoom-in" }}
                  onClick={() => openLightbox(lbImages, i)}
                >
                  <img src={shot.src} alt={shot.caption} style={{ width: "100%", display: "block" }} />
                </div>
                <p style={{ fontFamily: "var(--mono)", fontSize: 10, color: "rgba(240,236,228,0.28)", marginTop: 8, lineHeight: 1.55, letterSpacing: ".03em" }}>{shot.caption}</p>
              </div>
            ));
            })()}
          </div>

          <div style={{ marginTop: 32, display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a href="#xiot" onClick={(e) => { e.preventDefault(); navigate("xiot"); }} className="btn btn-primary" style={{ fontSize: 14 }}>
              See how XIoT does this →
            </a>
            <a href="#contact" onClick={(e) => { e.preventDefault(); navigate("contact"); }} className="btn btn-ghost" style={{ fontSize: 14, borderColor: "rgba(240,236,228,0.18)", color: "rgba(240,236,228,0.65)" }}>
              Book a demo
            </a>
          </div>
        </div>
      </section>

      {/* ── STRATEGIC SERVICES ───────────────────────────────── */}
      <section className="section" data-screen-label="Home / Strategic Services">
        <div className="shell">
          <div className="vs" style={{ gridTemplateColumns: "1fr 1fr 1fr" }}>
            <div className="vs-col" data-tone="vendor">
              <h4>For Enterprises &amp; Governments</h4>
              <div className="head">Buy the <em style={{ color: "var(--accent)" }}>platform.</em></div>
              <p style={{ fontSize: 15, color: "var(--ink-muted)", marginBottom: 22, lineHeight: 1.6 }}>
                XIoT and Turing are products you license and deploy in your infrastructure — on-premise, no cloud required.
                Redinent Threat Labs provides ongoing research and custom NDA engagements for the deepest investigation needs.
              </p>
              <a href="#products" onClick={(e) => { e.preventDefault(); navigate("products"); }}
                 className="btn btn-ghost" style={{ alignSelf: "flex-start" }}>
                Explore Products →
              </a>
            </div>
            <div className="vs-col" data-tone="partner">
              <h4>For Startups &amp; Scale-Ups</h4>
              <div className="head">Hire the <em>advisory.</em></div>
              <p style={{ fontSize: 15, color: "var(--ink-muted)", marginBottom: 22, lineHeight: 1.6 }}>
                India-specific compliance services — DPDP readiness, STQC certification, Meity compliance,
                and our 120-day Startup Security Accelerator that takes pre-Series A companies to investor-grade security.
              </p>
              <a href="#strategic-services" onClick={(e) => { e.preventDefault(); navigate("strategic-services"); }}
                 className="btn btn-primary" style={{ alignSelf: "flex-start" }}>
                Explore Strategic Services →
              </a>
            </div>
            <div className="vs-col" style={{ background: "var(--bg)", borderLeft: "1px solid var(--line)" }}>
              <h4 style={{ color: "#7a5af0" }}>For OEMs &amp; Governments</h4>
              <div className="head">Buy the <em style={{ color: "#7a5af0" }}>firmware.</em></div>
              <p style={{ fontSize: 15, color: "var(--ink-muted)", marginBottom: 22, lineHeight: 1.6 }}>
                Redinent firmware products — OpenBMC, UEFI, DC-SCM, Backplane Management Controller and more — are customised to your hardware design and licensed for direct integration. Standard firmware for open-standard modular hardware is available without customisation. All custom engagements are signed under NDA with Redinent Research Labs.
              </p>
              <a href="#contact" onClick={(e) => { e.preventDefault(); navigate("contact"); }}
                 className="btn btn-ghost" style={{ alignSelf: "flex-start", borderColor: "#7a5af044", color: "#7a5af0" }}>
                Enquire: Custom Firmware →
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* ── FINAL CTA — FUTURE PACE ──────────────────────────── */}
      <FinalCTA
        navigate={navigate}
        title="Book a Demo · 30 min · No obligation"
        body={<>See what's actually<br />on <em>your network.</em></>}
        cta1="Book a Demo →"
        cta2="Explore Products"
        cta1Page="contact"
        cta2Page="products"
        contactContext="general-inquiry"
      />
      <ImageLightbox lbState={lbState} closeLightbox={closeLightbox} lbPrev={lbPrev} lbNext={lbNext} />
    </div>
  );
}

window.PageHome = PageHome;
