// Smart City Solution page
const { useState: useSCState, useEffect: useSCEffect } = React;

// ── City Audit Console (hero visualization) ───────────────────
function CityAuditConsole() {
  const [scanLine, setScanLine] = useSCState(0);

  useSCEffect(() => {
    const t = setInterval(() => setScanLine(p => (p + 1) % 8), 420);
    return () => clearInterval(t);
  }, []);

  const rows = [
    ["01", "OLT Switches — Factory Default Creds",      "CRITICAL"],
    ["02", "Server BMC — Default Credentials",          "CRITICAL"],
    ["03", "GIS System: SQL → Code Execution",          "CRITICAL"],
    ["04", "City Platform: OWASP Top 10 Violations",    "CRITICAL"],
    ["05", "Streetlight Gateway — Full Control",        "HIGH"],
    ["06", "10% Cameras: Weak / Guest Credentials",     "HIGH"],
    ["07", "70% Cameras: Hardening Failures",           "HIGH"],
    ["08", "Video Analytics — Weak Credentials",        "HIGH"],
  ];

  return (
    <div style={{ background: "#080c14", border: "1px solid rgba(255,255,255,0.09)", borderRadius: 14, overflow: "hidden", fontFamily: "var(--mono)" }}>
      {/* Header */}
      <div style={{ background: "#0d1320", borderBottom: "1px solid rgba(255,255,255,0.08)", padding: "10px 16px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#ef3e5d", display: "inline-block", animation: "pulse 1.4s ease infinite" }}></span>
          <span style={{ fontSize: 10, letterSpacing: ".1em", textTransform: "uppercase", color: "rgba(240,236,228,0.5)" }}>REDINENT XIOT · SMART CITY AUDIT</span>
        </div>
        <span style={{ fontSize: 10, color: "rgba(240,236,228,0.3)", letterSpacing: ".08em" }}>14 ASSET CLASSES</span>
      </div>
      {/* Column headers */}
      <div style={{ display: "grid", gridTemplateColumns: "32px 1fr 72px", gap: 10, padding: "7px 16px", borderBottom: "1px solid rgba(255,255,255,0.05)", color: "rgba(240,236,228,0.25)", fontSize: 9.5, letterSpacing: ".12em" }}>
        <span>#</span><span>FINDING</span><span style={{ textAlign: "right" }}>SEV</span>
      </div>
      {/* Finding rows */}
      {rows.map(([num, name, sev], i) => (
        <div key={num} style={{
          display: "grid", gridTemplateColumns: "32px 1fr 72px", gap: 10,
          padding: "7px 16px",
          borderBottom: "1px solid rgba(255,255,255,0.04)",
          background: i === scanLine ? "rgba(255,255,255,0.035)" : "transparent",
          transition: "background .2s ease",
          alignItems: "center",
        }}>
          <span style={{ fontSize: 10, color: "rgba(240,236,228,0.25)" }}>{num}</span>
          <span style={{ fontSize: 10.5, color: "rgba(240,236,228,0.72)", lineHeight: 1.35 }}>{name}</span>
          <span style={{ fontSize: 9.5, color: sev === "CRITICAL" ? "#ef3e5d" : "#f59e0b", fontWeight: 700, textAlign: "right", letterSpacing: ".06em" }}>{sev}</span>
        </div>
      ))}
      {/* Footer summary */}
      <div style={{ padding: "10px 16px", background: "rgba(255,255,255,0.02)", borderTop: "1px solid rgba(255,255,255,0.07)", display: "flex", gap: 20, alignItems: "center" }}>
        <span style={{ fontSize: 10, color: "#ef3e5d", letterSpacing: ".08em" }}><b>4</b> CRITICAL</span>
        <span style={{ fontSize: 10, color: "#f59e0b", letterSpacing: ".08em" }}><b>7</b> HIGH</span>
        <span style={{ fontSize: 10, color: "#5b8def", letterSpacing: ".08em" }}><b>1</b> MEDIUM</span>
        <span style={{ marginLeft: "auto", fontSize: 10, color: "rgba(240,236,228,0.2)", animation: "pulse 2s ease infinite", letterSpacing: ".08em" }}>● SCANNING</span>
      </div>
      <style>{`@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }`}</style>
    </div>
  );
}

function PageSolutionSmartcity({ navigate }) {

  const assetLayers = [
    {
      layer: "Physical Security",
      color: "#ef3e5d",
      icon: "ph-camera",
      assets: [
        { name: "CCTV IP Cameras", detail: "500+ units · Bosch & Vivotek" },
        { name: "Video Analytics System", detail: "AI-based surveillance platform" },
      ],
    },
    {
      layer: "City Services",
      color: "#f59e0b",
      icon: "ph-traffic-sign",
      assets: [
        { name: "Smart Streetlights", detail: "300+ units · Philips" },
        { name: "Digital Signage & LED Controllers", detail: "City-wide display network" },
        { name: "Smart Speaker System", detail: "City-wide public alert broadcasts" },
        { name: "Smart Public Toilets", detail: "IoT sensor gateway controlled" },
        { name: "Smart Bins", detail: "IoT sensor gateway controlled" },
        { name: "Water Quality Monitoring", detail: "Sensor network with firmware" },
      ],
    },
    {
      layer: "Connectivity",
      color: "#7a5af0",
      icon: "ph-network",
      assets: [
        { name: "OLT Switches", detail: "Araknis Networks · Core backbone" },
        { name: "Enterprise Switches", detail: "Velocinet · Network fabric" },
        { name: "Distribution Switches", detail: "NetVue · Distribution layer" },
      ],
    },
    {
      layer: "Facility Infrastructure",
      color: "#0e9e6e",
      icon: "ph-buildings",
      assets: [
        { name: "Data Center PDUs", detail: "Eaton smart power distribution" },
        { name: "Smart UPS Systems", detail: "Eaton · firmware-managed" },
        { name: "Server BMCs", detail: "Dell out-of-band management interface" },
      ],
    },
    {
      layer: "Applications",
      color: "#5b8def",
      icon: "ph-browser",
      assets: [
        { name: "Web-Based GIS System", detail: "Geographic information platform" },
        { name: "Smart City Management System", detail: "Built by NASDAQ-listed integrator" },
        { name: "Video Conferencing", detail: "Crestron Airmedia · meeting room infrastructure" },
      ],
    },
  ];

  const findings = [
    {
      num: "01",
      sev: "CRITICAL",
      icon: "ph-network",
      head: "OLT Switches on Factory Default Credentials",
      detail: "The optical line terminal switches forming the backbone of the city's entire network were running on unmodified factory credentials. A single breach would give an attacker full visibility and control over all network traffic.",
      asset: "ZTE OLT Switches",
      impact: "Complete network takeover",
    },
    {
      num: "02",
      sev: "CRITICAL",
      icon: "ph-chip",
      head: "Server BMC Accessible via Default Credentials",
      detail: "The Dell web interface for baseboard management was reachable on default credentials — giving persistent out-of-band access below the operating system. A compromised BMC survives OS reinstalls and gives an attacker power, boot and hardware control.",
      asset: "Dell Server BMC",
      impact: "Persistent hardware-level access",
    },
    {
      num: "03",
      sev: "CRITICAL",
      icon: "ph-map-pin",
      head: "GIS System: SQL Injection → Code Execution",
      detail: "The web-based GIS system had exploitable SQL injection vulnerabilities. When manually validated by the Redinent team, these escalated to full code execution on the server. The GIS platform holds maps, asset locations and infrastructure coordinates for the entire township.",
      asset: "Web-Based GIS System",
      impact: "Full server compromise · infrastructure data exposure",
    },
    {
      num: "04",
      sev: "CRITICAL",
      icon: "ph-browser",
      head: "City Management Platform — Multiple OWASP Top 10 Violations",
      detail: "The city's primary management system — developed by one of the world's largest software companies (NASDAQ-listed) — had multiple OWASP Top 10 vulnerabilities allowing full administrative control. Vendor reputation is not a security guarantee.",
      asset: "City Management System",
      impact: "Full operational control by attacker",
    },
    {
      num: "05",
      sev: "HIGH",
      icon: "ph-traffic-sign",
      head: "IoT Gateway Full Control via Hardening Vulnerabilities",
      detail: "The IoT gateway controlling 300+ streetlights had hardening vulnerabilities allowing full device control — all streetlights could be switched off or manipulated simultaneously. The same gateway architecture extended to smart toilets and waste management bins.",
      asset: "Streetlight IoT Gateway",
      impact: "City-wide service disruption",
    },
    {
      num: "06",
      sev: "HIGH",
      icon: "ph-camera",
      head: "10% of Cameras Had Weak or Guest Credentials",
      detail: "Across the 500+ camera fleet, approximately 50 cameras had weak passwords or guest access enabled — providing direct RTSP stream access and device control to anyone on the network who attempted default credential login.",
      asset: "Bosch & Vivotek IP Cameras",
      impact: "Surveillance access · tenant privacy breach",
    },
    {
      num: "07",
      sev: "HIGH",
      icon: "ph-camera",
      head: "70% of Cameras Failed Two or More Hardening Checks",
      detail: "HTTPS disabled in the web control panel, UPnP enabled, legacy protocols active. 350+ cameras across the fleet exhibited at least two hardening failures each — dramatically expanding the attack surface beyond credential issues.",
      asset: "Bosch & Vivotek IP Cameras (fleet-wide)",
      impact: "Mass attack surface exposure",
    },
    {
      num: "08",
      sev: "HIGH",
      icon: "ph-video-camera",
      head: "Video Analytics System on Weak Credentials",
      detail: "The AI-based video analytics platform — which processes live feeds from all cameras — was running on weak or easily guessable credentials, exposing surveillance data for the entire township.",
      asset: "Video Analytics System",
      impact: "Surveillance data exfiltration · AI system manipulation",
    },
    {
      num: "09",
      sev: "HIGH",
      icon: "ph-speaker-high",
      head: "Smart Speaker System — Full Device Control via Hardening Gaps",
      detail: "The city-wide public alert and speaker system had hardening vulnerabilities that allowed full control of the device. An attacker could broadcast arbitrary audio to the entire township — including emergency alert impersonation.",
      asset: "Smart Speaker / PA System",
      impact: "Public disinformation · panic generation",
    },
    {
      num: "10",
      sev: "HIGH",
      icon: "ph-drop",
      head: "Water Quality Monitoring Firmware Unpatched",
      detail: "Firmware on the water quality monitoring sensor network had not been updated for an extended period — running versions with known published CVEs. Sensor data integrity and the control plane were both at risk.",
      asset: "Water Quality Monitoring System",
      impact: "Sensor data manipulation · public health risk",
    },
    {
      num: "11",
      sev: "HIGH",
      icon: "ph-lightning",
      head: "Data Center UPS Running Exploitable Firmware CVEs",
      detail: "Eaton smart UPS units in the data center were running outdated firmware with publicly documented, exploitable CVEs. Attackers have demonstrated the ability to kill UPS power to data centers in real-world incidents.",
      asset: "Eaton Smart UPS",
      impact: "Data center power disruption · hardware damage",
    },
    {
      num: "12",
      sev: "MEDIUM",
      icon: "ph-arrows-split",
      head: "Juniper Switches Failing CIS v8 Benchmarks",
      detail: "Network distribution layer Juniper switches had widespread CIS Controls v8 benchmark failures — insecure management protocols enabled, logging disabled, unnecessary services running. A significant hardening debt across the switching layer.",
      asset: "Juniper Distribution Switches",
      impact: "Lateral movement facilitation",
    },
  ];

  const sevColor  = { CRITICAL: "#ef3e5d", HIGH: "#f59e0b", MEDIUM: "#5b8def" };
  const sevBg     = { CRITICAL: "rgba(239,62,93,0.12)", HIGH: "rgba(245,158,11,0.12)", MEDIUM: "rgba(91,141,239,0.12)" };
  const sevBorder = { CRITICAL: "rgba(239,62,93,0.35)", HIGH: "rgba(245,158,11,0.35)", MEDIUM: "rgba(91,141,239,0.35)" };

  const scenarios = [
    {
      icon: "ph-lightning",
      head: "Malware via Streetlight Gateway",
      body: "The IoT gateway controlling 300+ streetlights has hardening vulnerabilities. An attacker gains full device control, pivots to the city management network, and deploys ransomware across the operational platform before anyone detects the intrusion.",
    },
    {
      icon: "ph-eye",
      head: "Tenant Surveillance via Camera Credential Takeover",
      body: "50 cameras have guest access enabled. A threat actor targeting multi national software companies operations gains persistent RTSP stream access to facilities — months of intelligence on executive movements, visitor patterns and sensitive operations.",
    },
    {
      icon: "ph-siren",
      head: "Public Alert Impersonation via Speaker System",
      body: "The city-wide public address system can be fully controlled by an attacker who exploits its hardening vulnerabilities. Emergency evacuation orders, air quality warnings, or false security alerts — broadcast to an entire industrial township.",
    },
    {
      icon: "ph-database",
      head: "Infrastructure Intelligence via GIS Compromise",
      body: "SQL injection on the GIS platform escalates to code execution. An attacker now has every asset location, every underground utility, every CCTV position, every network node mapped — the complete physical blueprint of the township's critical infrastructure.",
    },
  ];

  const capabilities = [
    { icon: "ph-camera", cap: "Camera firmware analysis — credential audit, hardening checks, OEM identification" },
    { icon: "ph-network", cap: "Switch and OLT configuration security — CIS benchmark, default credential sweep" },
    { icon: "ph-traffic-sign", cap: "IoT gateway and smart infrastructure — streetlights, bins, toilets, sensors" },
    { icon: "ph-drop", cap: "Operational technology — water quality, environmental monitoring systems" },
    { icon: "ph-lightning", cap: "Power infrastructure — UPS and PDU firmware CVE analysis" },
    { icon: "ph-chip", cap: "Server BMC — out-of-band interface audit, default credential detection" },
    { icon: "ph-browser", cap: "Web application layer — OWASP Top 10, API security, authentication review" },
    { icon: "ph-map-pin", cap: "GIS and management platforms — SQL injection, authorisation bypass testing" },
    { icon: "ph-speaker-high", cap: "Smart speaker and PA systems — hardening and access control review" },
    { icon: "ph-video-camera", cap: "Video analytics platforms — credential security, data access controls" },
    { icon: "ph-certificate", cap: "Compliance reporting — Meity CCTV advisory, STQC, NIC, NDAA" },
    { icon: "ph-file-text", cap: "Remediation runbooks per asset class — prioritised by exploitability" },
  ];

  const buyers = [
    {
      icon: "ph-city",
      head: "Smart City Authorities & SPVs",
      tag: "Primary Buyer",
      tagColor: "#ef3e5d",
      tagBg: "rgba(239,62,93,0.1)",
      tagBorder: "rgba(239,62,93,0.25)",
      desc: "India's 100 Smart Cities Mission cities and Special Purpose Vehicles operating city-scale IoT infrastructure. Redinent delivers Meity-aligned security assessments and STQC-compliant reporting.",
      points: ["Meity CCTV advisory compliance", "NDAA hardware audit across camera fleets", "City-wide IoT asset discovery", "SPV board-level risk reporting"],
    },
    {
      icon: "ph-buildings",
      head: "Industrial Townships & SEZs",
      tag: "High Value",
      tagColor: "#f59e0b",
      tagBg: "rgba(245,158,11,0.1)",
      tagBorder: "rgba(245,158,11,0.25)",
      desc: "Private operators of technology parks, GIFT City-style developments, and industrial townships housing major enterprises — where a breach affects Fortune 500 tenant operations and reputation.",
      points: ["Tenant security SLA compliance", "OT and IT convergence audits", "Executive-grade risk reporting", "Incident response readiness"],
    },
    {
      icon: "ph-wrench",
      head: "City Technology Integrators",
      tag: "System Integrators",
      tagColor: "#7a5af0",
      tagBg: "rgba(122,90,240,0.1)",
      tagBorder: "rgba(122,90,240,0.25)",
      desc: "The companies that design, build and hand over smart city platforms need a security sign-off before delivery. Redinent provides the independent security validation that protects integrators from post-handover liability.",
      points: ["Pre-handover security certification", "OWASP and application layer testing", "OT protocol security validation", "Client-facing security report"],
    },
  ];

  return (
    <div data-screen-label="Smart City Solution">

      {/* ── HERO ── */}
      <section className="page-hero page-hero--dark" data-screen-label="SC / Hero" style={{ position: "relative", overflow: "hidden" }}>
        {/* Faded city background image */}
        <div style={{ position: "absolute", inset: 0, backgroundImage: "url(assets/slider-smartcity.jpg)", backgroundSize: "cover", backgroundPosition: "center", opacity: 0.13 }}></div>
        {/* Dark vignette — edges fade to dark, centre stays clear */}
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse at 70% 50%, transparent 30%, #080b11 80%)" }}></div>
        <div className="hero-grid" style={{ opacity: 0.25 }}></div>
        <div className="shell" style={{ position: "relative" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>

            {/* Left column — headline + meta (DC style) */}
            <div>
              <span className="eyebrow"><span className="dot"></span>Solutions · Smart Cities</span>
              <h1 style={{ fontSize: "clamp(26px, 2.8vw, 40px)", fontWeight: 700, color: "#f0ece4", marginTop: 18, lineHeight: 1.15, letterSpacing: "-0.02em" }}>
                A city full of Fortune 500 tenants.<br />
                <span style={{ color: "rgba(240,236,228,0.5)" }}>Completely blind to its own attack surface.</span>
              </h1>
              <p style={{ fontFamily: "var(--sans)", fontSize: 16, color: "rgba(240,236,228,0.65)", lineHeight: 1.7, marginTop: 22, maxWidth: "56ch" }}>
                Redinent deployed XIoT across one of India's largest smart city industrial townships — housing India HQs of world's largest software companies. What we found across 500+ cameras, 300+ streetlights and 14 asset classes should concern every smart city authority in the world.
              </p>
              <div className="hero-cta-row">
                <a href="#contact" onClick={(e) => { e.preventDefault(); navigate("contact"); }} className="btn btn-primary" style={{ padding: "14px 24px" }}>
                  Request a Smart City Assessment →
                </a>
                <a href="#contact" onClick={(e) => { e.preventDefault(); navigate("contact"); }} className="btn btn-ghost" style={{ padding: "14px 24px" }}>
                  Download: Attack Surface Checklist
                </a>
              </div>
              {/* Meta rows — DC style */}
              <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 0, borderTop: "1px solid rgba(255,255,255,0.08)", paddingTop: 22 }}>
                {[
                  ["Deployment scale", "500+ cameras · 300+ streetlights"],
                  ["Asset classes", "14 across OT · IoT · IT · Web"],
                  ["Critical findings", "4 critical · 7 high · 1 medium"],
                  ["Compliance", "Meity · STQC · NDAA · NIC"],
                  ["Tenants at risk", "World's largest software companies"],
                  ["Disruption to ops", "Zero — non-disruptive protocol"],
                ].map(([k, v], i, arr) => (
                  <div key={k} style={{ display: "flex", gap: 16, padding: "8px 0", borderBottom: i < arr.length - 1 ? "1px solid rgba(255,255,255,0.07)" : "none", alignItems: "baseline" }}>
                    <span style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".1em", textTransform: "uppercase", color: "rgba(240,236,228,0.35)", flexShrink: 0, width: 120 }}>{k}</span>
                    <b style={{ fontFamily: "var(--mono)", fontSize: 11.5, color: "rgba(240,236,228,0.85)", letterSpacing: ".04em" }}>{v}</b>
                  </div>
                ))}
              </div>
            </div>

            {/* Right column — animated city audit console */}
            <CityAuditConsole />

          </div>
        </div>
      </section>

      {/* ── ATTACK SURFACE MAP ── */}
      <section className="section" data-screen-label="SC / AssetMap" style={{ padding: "var(--s-7) 0" }}>
        <div className="shell">
          <div style={{ display: "flex", alignItems: "flex-end", gap: 48, marginBottom: 48, flexWrap: "wrap" }}>
            <div style={{ flex: "0 1 auto" }}>
              <span className="eyebrow"><span className="dot"></span>The attack surface map</span>
              <h2 className="display h2" style={{ marginTop: 10 }}>Your CISO thinks they're<br /><em>protecting a network.</em></h2>
            </div>
            <p className="lede" style={{ flex: "1 1 300px", maxWidth: "52ch", margin: 0, paddingBottom: 4 }}>
              They're actually protecting a city. Generic scanners see 2–3 of these 14 asset classes. Redinent covers all of them — across five layers that no single security tool was built to handle simultaneously.
            </p>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 2, background: "var(--line)", border: "1px solid var(--line)", borderRadius: 16, overflow: "hidden" }}>
            {assetLayers.map((layer, li) => (
              <div key={li} style={{ background: "var(--bg)", padding: "24px 20px", display: "flex", flexDirection: "column" }}>
                <div style={{ width: 36, height: 36, borderRadius: 9, background: `${layer.color}16`, border: `1px solid ${layer.color}30`, display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 12 }}>
                  <i className={`ph ${layer.icon}`} style={{ fontSize: 18, color: layer.color }}></i>
                </div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 9.5, letterSpacing: ".12em", textTransform: "uppercase", color: layer.color, marginBottom: 14 }}>{layer.layer}</div>
                <div style={{ display: "flex", flexDirection: "column", flex: 1 }}>
                  {layer.assets.map((a, ai) => (
                    <div key={ai} style={{ padding: "9px 0", borderBottom: ai < layer.assets.length - 1 ? "1px solid var(--line)" : "none" }}>
                      <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink)", marginBottom: 4 }}>{a.name}</div>
                      <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-muted)", letterSpacing: ".03em" }}>{a.detail}</div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>

          {/* vs generic scanner — charcoal theme */}
          <div style={{ marginTop: 20, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 0, background: "#0d1017", border: "1px solid rgba(255,255,255,0.08)", borderRadius: 12, overflow: "hidden" }}>
            {[
              { tool: "IT vulnerability scanner", sees: "Switches, servers, some cameras", misses: "OT gateways, IoT sensors, UPS firmware, BMC, web apps, speaker systems", highlight: false },
              { tool: "OT / industrial scanner", sees: "SCADA, PLCs, Modbus devices", misses: "IP cameras, web applications, cloud-connected IoT, smart city management platforms", highlight: false },
              { tool: "Redinent XIoT", sees: "All 14 asset classes across all 5 layers", misses: "Nothing on your network", highlight: true },
            ].map((row, i) => (
              <div key={i} style={{ background: row.highlight ? "rgba(239,62,93,0.07)" : "#141720", padding: "22px 24px", borderRight: i < 2 ? "1px solid rgba(255,255,255,0.08)" : "none", borderLeft: row.highlight ? "3px solid #ef3e5d" : "none" }}>
                <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".1em", textTransform: "uppercase", color: row.highlight ? "#ef3e5d" : "rgba(240,236,228,0.4)", marginBottom: 14, fontWeight: 600 }}>{row.tool}</div>
                <div style={{ marginBottom: 10 }}>
                  <span style={{ fontFamily: "var(--mono)", fontSize: 9.5, color: "#22c55e", marginRight: 8, letterSpacing: ".06em" }}>✓ SEES</span>
                  <span style={{ fontSize: 13.5, color: "rgba(240,236,228,0.75)", lineHeight: 1.55 }}>{row.sees}</span>
                </div>
                <div>
                  <span style={{ fontFamily: "var(--mono)", fontSize: 9.5, color: row.highlight ? "#22c55e" : "#ef3e5d", marginRight: 8, letterSpacing: ".06em" }}>{row.highlight ? "✓ COVERS" : "✗ MISSES"}</span>
                  <span style={{ fontSize: 13.5, color: row.highlight ? "rgba(240,236,228,0.75)" : "rgba(240,236,228,0.5)", lineHeight: 1.55 }}>{row.misses}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── THE 12 FINDINGS ── */}
      <section className="section section-dark" data-screen-label="SC / Findings">
        <div className="section-dark-grid"></div>
        <div className="shell" style={{ position: "relative" }}>
          <div style={{ display: "flex", alignItems: "flex-end", gap: 48, marginBottom: 16, flexWrap: "wrap" }}>
            <div style={{ flex: "0 1 auto" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 10 }}>
                <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "rgba(240,236,228,0.35)", letterSpacing: ".14em" }}>01</span>
                <span className="eyebrow" style={{ color: "rgba(240,236,228,0.6)" }}><span className="dot"></span>Real deployment · Actual findings</span>
              </div>
              <h2 className="display h2" style={{ color: "#f0ece4" }}>12 findings.<br /><em style={{ color: "rgba(240,236,228,0.45)" }}>One township. Every layer.</em></h2>
            </div>
            
          </div>

          {/* severity summary bar */}
          <div style={{ display: "flex", gap: 12, marginBottom: 40, flexWrap: "wrap" }}>
            {[["CRITICAL", 4, "#ef3e5d"], ["HIGH", 7, "#f59e0b"], ["MEDIUM", 1, "#5b8def"]].map(([sev, count, color]) => (
              <div key={sev} style={{ display: "flex", alignItems: "center", gap: 10, background: "rgba(255,255,255,0.05)", border: `1px solid ${color}35`, borderRadius: 8, padding: "8px 18px" }}>
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: color, display: "inline-block", flexShrink: 0 }}></span>
                <span style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: ".08em", color, fontWeight: 600 }}>{count} {sev}</span>
              </div>
            ))}
          </div>

          {/* 3×4 finding cards — CCTV "Six reasons" style */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", border: "1px solid rgba(255,255,255,0.08)", borderRight: "none", borderBottom: "none" }}>
            {findings.map((f, i) => (
              <div key={i} style={{
                padding: "32px 28px 36px",
                borderRight: "1px solid rgba(255,255,255,0.08)",
                borderBottom: "1px solid rgba(255,255,255,0.08)",
                background: "#141720",
                borderLeft: `3px solid ${sevColor[f.sev]}`,
                display: "flex",
                flexDirection: "column",
              }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 22 }}>
                  <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "rgba(240,236,228,0.3)", letterSpacing: ".1em" }}>{f.num}</span>
                  <span style={{
                    fontFamily: "var(--mono)", fontSize: 9.5, letterSpacing: ".08em", fontWeight: 700,
                    color: sevColor[f.sev], background: sevBg[f.sev], border: `1px solid ${sevBorder[f.sev]}`,
                    borderRadius: 99, padding: "3px 9px", whiteSpace: "nowrap", textTransform: "uppercase",
                  }}>{f.sev}</span>
                </div>
                <i className={`ph ${f.icon}`} style={{ fontSize: 28, color: sevColor[f.sev], display: "block", marginBottom: 16, opacity: 0.85 }}></i>
                <div style={{ fontSize: 15, fontWeight: 700, color: "#f0ece4", marginBottom: 10, lineHeight: 1.3, flex: "0 0 auto" }}>{f.head}</div>
                <p style={{ fontSize: 13.5, color: "rgba(240,236,228,0.72)", lineHeight: 1.65, margin: "0 0 16px", flex: 1 }}>{f.detail}</p>
                <div style={{ display: "flex", flexDirection: "column", gap: 4, borderTop: "1px solid rgba(255,255,255,0.07)", paddingTop: 12 }}>
                  <span style={{ fontFamily: "var(--mono)", fontSize: 10, color: "rgba(240,236,228,0.45)", letterSpacing: ".05em" }}>
                    ASSET: <span style={{ color: "rgba(240,236,228,0.72)" }}>{f.asset}</span>
                  </span>
                  <span style={{ fontFamily: "var(--mono)", fontSize: 10, color: sevColor[f.sev], letterSpacing: ".04em" }}>
                    IMPACT: {f.impact}
                  </span>
                </div>
              </div>
            ))}
          </div>

          
        </div>
      </section>

      {/* ── IMPACT SCENARIOS ── */}
      <section className="section" data-screen-label="SC / Scenarios" style={{ padding: "var(--s-7) 0" }}>
        <div className="shell">
          <div style={{ display: "flex", alignItems: "flex-end", gap: 48, marginBottom: 48, flexWrap: "wrap" }}>
            <div style={{ flex: "0 1 auto" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 10 }}>
                <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-faint)", letterSpacing: ".14em" }}>02</span>
                <span className="eyebrow"><span className="dot"></span>What would an attacker do with this?</span>
              </div>
              <h2 className="display h2">Findings become<br /><em>attack chains.</em></h2>
            </div>
            <p className="lede" style={{ flex: "1 1 300px", maxWidth: "48ch", margin: 0, paddingBottom: 4 }}>
              Individual vulnerabilities are rarely the end goal. Here is what a sophisticated attacker could chain together using only what Redinent found in one township deployment.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 20 }}>
            {scenarios.map((s, i) => (
              <div key={i} style={{ background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: 14, padding: "28px 26px", display: "flex", gap: 20 }}>
                <div style={{ width: 44, height: 44, borderRadius: 12, background: "rgba(239,62,93,0.1)", border: "1px solid rgba(239,62,93,0.2)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                  <i className={`ph ${s.icon}`} style={{ fontSize: 22, color: "var(--accent)" }}></i>
                </div>
                <div>
                  <div style={{ fontSize: 16, fontWeight: 600, color: "var(--ink)", marginBottom: 10, lineHeight: 1.3 }}>{s.head}</div>
                  <p style={{ fontSize: 14, color: "var(--ink-muted)", lineHeight: 1.65, margin: 0 }}>{s.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── CAPABILITIES ── */}
      <section className="section section-dark" data-screen-label="SC / Capabilities">
        <div className="section-dark-grid"></div>
        <div className="shell" style={{ position: "relative" }}>
          <div style={{ display: "flex", alignItems: "flex-end", gap: 48, marginBottom: 48, flexWrap: "wrap" }}>
            <div style={{ flex: "0 1 auto" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 10 }}>
                <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "rgba(240,236,228,0.35)", letterSpacing: ".14em" }}>03</span>
                <span className="eyebrow" style={{ color: "rgba(240,236,228,0.6)" }}><span className="dot"></span>What Redinent covers</span>
              </div>
              <h2 className="display h2" style={{ color: "#f0ece4" }}>Every layer.<br /><em style={{ color: "rgba(240,236,228,0.45)" }}>One assessment.</em></h2>
            </div>
            <p style={{ fontFamily: "var(--sans)", fontSize: 16, color: "rgba(240,236,228,0.72)", lineHeight: 1.7, flex: "1 1 300px", maxWidth: "48ch", margin: 0, paddingBottom: 4 }}>
              XIoT was purpose-built for environments where OT, IoT, IT and web application layers coexist on the same estate. No agent installation. No disruption to city operations. Zero cloud dependency.
            </p>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", border: "1px solid rgba(255,255,255,0.08)", borderRight: "none", borderBottom: "none" }}>
            {capabilities.map((c, i) => (
              <div key={i} style={{
                background: "#141720",
                padding: "26px 24px",
                display: "flex",
                gap: 16,
                alignItems: "flex-start",
                borderRight: "1px solid rgba(255,255,255,0.08)",
                borderBottom: "1px solid rgba(255,255,255,0.08)",
              }}>
                <i className={`ph ${c.icon}`} style={{ fontSize: 22, color: "#ef3e5d", flexShrink: 0, marginTop: 1 }}></i>
                <span style={{ fontSize: 14, color: "rgba(240,236,228,0.85)", lineHeight: 1.6 }}>{c.cap}</span>
              </div>
            ))}
          </div>

          {/* Compliance strip */}
          <div style={{ marginTop: 24, background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)", borderRadius: 12, padding: "18px 24px", display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
            <span style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".14em", textTransform: "uppercase", color: "rgba(240,236,228,0.45)", marginRight: 8 }}>Compliance frameworks</span>
            {["Meity CCTV Advisory", "STQC Empanelled", "NDAA Hardware Audit", "NIC Guidelines", "IEC 62443", "OWASP Top 10", "CIS Controls v8"].map((f, i) => (
              <span key={i} style={{ fontFamily: "var(--mono)", fontSize: 11, color: "rgba(240,236,228,0.8)", background: "rgba(255,255,255,0.07)", border: "1px solid rgba(255,255,255,0.12)", borderRadius: 6, padding: "5px 11px" }}>{f}</span>
            ))}
          </div>
        </div>
      </section>

      {/* ── WHO THIS IS FOR ── */}
      <section className="section" data-screen-label="SC / Buyers" style={{ padding: "var(--s-7) 0" }}>
        <div className="shell">
          <div style={{ display: "flex", alignItems: "flex-end", gap: 48, marginBottom: 48, flexWrap: "wrap" }}>
            <div style={{ flex: "0 1 auto" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 10 }}>
                <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-faint)", letterSpacing: ".14em" }}>04</span>
                <span className="eyebrow"><span className="dot"></span>Who this is for</span>
              </div>
              <h2 className="display h2">Three buyers.<br /><em>One common problem.</em></h2>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
            {buyers.map((b, i) => (
              <div key={i} style={{ background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: 14, padding: "28px 24px", display: "flex", flexDirection: "column" }}>
                <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 18 }}>
                  <div style={{ width: 42, height: 42, borderRadius: 10, background: "rgba(239,62,93,0.08)", border: "1px solid rgba(239,62,93,0.18)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                    <i className={`ph ${b.icon}`} style={{ fontSize: 20, color: "var(--accent)" }}></i>
                  </div>
                  <span style={{
                    fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".07em", fontWeight: 600,
                    color: b.tagColor, background: b.tagBg, border: `1px solid ${b.tagBorder}`,
                    borderRadius: 99, padding: "3px 10px",
                  }}>{b.tag}</span>
                </div>
                <div style={{ fontSize: 17, fontWeight: 600, color: "var(--ink)", marginBottom: 10 }}>{b.head}</div>
                <p style={{ fontSize: 14, color: "var(--ink-muted)", lineHeight: 1.65, margin: "0 0 18px" }}>{b.desc}</p>
                <div style={{ display: "flex", flexDirection: "column", flex: 1 }}>
                  {b.points.map((pt, pi) => (
                    <div key={pi} style={{ display: "flex", gap: 10, padding: "8px 0", borderBottom: pi < b.points.length - 1 ? "1px solid var(--line)" : "none", alignItems: "flex-start" }}>
                      <span style={{ color: "var(--accent)", flexShrink: 0, fontSize: 12, marginTop: 2 }}>→</span>
                      <span style={{ fontSize: 14, color: "var(--ink-muted)" }}>{pt}</span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── STATS ── */}
      <div className="stats" data-screen-label="SC / Stats">
        {[
          { icon: "ph-camera", num: "500+", lbl: "Cameras Assessed", note: "AXIS and Vivotek IP camera fleet — firmware, credentials, hardening and ONVIF protocol audit." },
          { icon: "ph-traffic-sign", num: "14", lbl: "Asset Classes", note: "OT, IoT, IT, physical security and web application layers covered in a single deployment." },
          { icon: "ph-warning", num: "12", lbl: "Findings", note: "4 critical, 7 high and 1 medium severity — across every layer of the township's infrastructure." },
          { icon: "ph-cloud-slash", num: "0", lbl: "Cloud Dependency", note: "XIoT runs entirely on-premise. No data leaves your city network. Air-gap deployments supported." },
        ].map((s, i) => (
          <div key={i} className="stat">
            <i className={`ph ${s.icon}`} style={{ fontSize: 22, color: "var(--accent)", marginBottom: 2 }}></i>
            <div className="big" style={{ color: "var(--ink)", fontSize: 52 }}>{s.num}</div>
            <div className="lbl">{s.lbl}</div>
            <p className="note">{s.note}</p>
          </div>
        ))}
      </div>

      {/* ── FINAL CTA ── */}
      <FinalCTA
        navigate={navigate}
        title="Don't wait for the breach to find out what's on your network."
        body={<>Request a Smart City Assessment.<br /><em>See every device. Secure every layer.</em></>}
        cta1="Request an Assessment →"
        cta2="Download: Attack Surface Checklist"
        cta1Page="contact"
        cta2Page="contact"
        contactContext="general-inquiry"
      />
    </div>
  );
}

window.PageSolutionSmartcity = PageSolutionSmartcity;
