const { useState, useEffect, useRef } = React;
const LAVENDER = "#C9B7E6";
const LAVENDER_DIM = "#9B8CC4";
const BG = "#080810";
const SURFACE = "#0D0D1A";
const SURFACE2 = "#12121F";
const BORDER = "#1E1E35";
const TEXT = "#E4E4F0";
const MUTED = "#5A5A7A";
const CRITICAL = "#FF4560";
const HIGH = "#FF8C42";
const MEDIUM = "#FFD166";
const LOW = "#06D6A0";
const INFO = "#48CAE4";

const LIVE_FEED = [
{ id: "CVE-2026-20182", score: 9.8, epss: 0.97, product: "Cisco SD-WAN Controller", status: "EXPLOITED", age: "3d" },
{ id: "CVE-2026-42897", score: 8.8, epss: 0.83, product: "Microsoft Exchange Server", status: "EXPLOITED", age: "6d" },
{ id: "CVE-2026-1421",  score: 9.6, epss: 0.79, product: "Fortinet FortiGate", status: "POC_PUBLIC", age: "9d" },
{ id: "CVE-2025-29824", score: 9.8, epss: 0.91, product: "Windows CLFS Driver", status: "EXPLOITED", age: "2w" },
{ id: "CVE-2026-3198",  score: 9.8, epss: 0.88, product: "Ivanti Endpoint Manager", status: "EXPLOITED", age: "3w" },
{ id: "CVE-2025-32975", score: 10.0, epss: 0.95, product: "Quest KACE SMA", status: "EXPLOITED", age: "1mo" },
{ id: "CVE-2024-57726", score: 9.9, epss: 0.94, product: "SimpleHelp RMM", status: "EXPLOITED", age: "1mo" },
{ id: "CVE-2026-22847", score: 9.4, epss: 0.71, product: "VMware vCenter Server", status: "POC_PUBLIC", age: "1mo" },
{ id: "CVE-2025-49113", score: 9.9, epss: 0.92, product: "Roundcube Webmail", status: "EXPLOITED", age: "1mo" },
{ id: "CVE-2026-0445",  score: 9.1, epss: 0.64, product: "GitLab CE/EE", status: "POC_PUBLIC", age: "1mo" },
{ id: "CVE-2026-20122", score: 8.6, epss: 0.81, product: "Cisco SD-WAN Manager", status: "EXPLOITED", age: "1mo" },
{ id: "CVE-2024-7399",  score: 8.8, epss: 0.76, product: "Samsung MagicINFO 9", status: "EXPLOITED", age: "1mo" },
{ id: "CVE-2026-5512",  score: 8.1, epss: 0.58, product: "Atlassian Confluence", status: "POC_PUBLIC", age: "1mo" },
{ id: "CVE-2025-11488", score: 8.4, epss: 0.62, product: "Veeam Backup & Replication", status: "POC_PUBLIC", age: "6w" },
{ id: "CVE-2023-27351", score: 8.2, epss: 0.88, product: "PaperCut NG/MF", status: "EXPLOITED", age: "2mo" },
{ id: "CVE-2026-7732",  score: 7.8, epss: 0.42, product: "Apache Tomcat", status: "POC_PUBLIC", age: "2mo" },
{ id: "CVE-2024-27199", score: 7.3, epss: 0.69, product: "JetBrains TeamCity", status: "EXPLOITED", age: "2mo" },
{ id: "CVE-2026-13044", score: 7.6, epss: 0.31, product: "Zimbra Collaboration", status: "PATCHED", age: "2mo" },
];

const FEATURES = [
{
icon: "🎯",
title: "EPSS + KEV Fusion Scoring",
desc: "We combine CVSS, EPSS probability scores, CISA KEV status, exploit maturity, and asset exposure into a single ActionScore™ that tells you exactly where to focus remediation effort.",
tag: "Proprietary scoring",
},
{
icon: "🔬",
title: "PoC Intelligence Engine",
desc: "Every public PoC is automatically analyzed — reliability rated, prerequisites extracted, target architecture identified. Know if a PoC will actually work before it lands in a red team's toolkit.",
tag: "Auto-analysis",
},
{
icon: "🗺️",
title: "Attack Surface Prioritization",
desc: "Connect your asset inventory via API or CSV and get a ranked remediation queue. See exactly which CVEs intersect with your environment — scored, ordered, and ready to act on.",
tag: "Asset-aware",
},
];

const STATS = [
{ value: "300K+", label: "CVEs tracked" },
{ value: "60K+", label: "PoCs catalogued" },
];

const PRICING = [
{
name: "Defender",
desc: "For blue teams and vulnerability management programs.",
price: "$499",
priceUnit: "/ user / month",
features: [
  "Validated CVE intelligence",
  "Exploit metadata & PoC analysis",
  "ActionScore™ prioritization (CVSS + EPSS + KEV fusion)",
  "Asset correlation",
  "API access (rate limited)",
],
cta: "Subscribe",
ctaHref: "/register?plan=defender",
highlight: false,
},
{
name: "Operator",
desc: "For red teams and offensive operators.",
price: "$999",
priceUnit: "/ user / month",
features: [
  "Everything in Defender",
  "Private validated exploit code repository",
  "Weaponized PoC access",
  "Target architecture metadata",
  "Reliability ratings on every exploit",
  "Vulnerability research requests",
  "Priority support",
],
cta: "Subscribe",
ctaHref: "/register?plan=operator",
highlight: true,
},
{
name: "Enterprise",
desc: "Defender + Operator, plus bespoke research on demand.",
features: [
  "Everything in Operator",
  "Custom exploit intelligence",
  "Targeted research on demand",
  "Dedicated analyst",
  "Private messaging and support channel",
  "SSO / SAML",
  "SLA-backed response",
  "On-prem deployment option",
],
cta: "Contact sales",
highlight: false,
},
];

const INTEGRATIONS = [
"Splunk", "Elastic SIEM", "Microsoft Sentinel", "CrowdStrike",
"Tenable.io", "Nessus", "Rapid7", "Wiz", "Qualys", "ServiceNow", "Jira", "PagerDuty", "Slack",
];

function severityColor(score) {
if (score >= 9) return CRITICAL;
if (score >= 7) return HIGH;
if (score >= 4) return MEDIUM;
return LOW;
}

function StatusBadge({ status }) {
const map = {
EXPLOITED: { color: CRITICAL, bg: "#FF456015", label: "ITW" },
POC_PUBLIC: { color: HIGH, bg: "#FF8C4215", label: "PoC" },
PATCHED: { color: LOW, bg: "#06D6A015", label: "FIXED" },
};
const s = map[status] || map.PATCHED;
return (
<span style={{
fontSize: 9, fontFamily: "'IBM Plex Mono', monospace", letterSpacing: "0.08em",
color: s.color, background: s.bg, border: `1px solid ${s.color}30`,
padding: "2px 6px", borderRadius: 3, fontWeight: 700,
}}>{s.label}</span>
);
}

function EpssBar({ value }) {
const pct = Math.round(value * 100);
const color = pct >= 70 ? CRITICAL : pct >= 40 ? HIGH : pct >= 20 ? MEDIUM : LOW;
return (
<div style={{ display: "flex", alignItems: "center", gap: 6 }}>
<div style={{ width: 60, height: 4, background: BORDER, borderRadius: 2, overflow: "hidden" }}>
<div style={{ width: `${pct}%`, height: "100%", background: color, borderRadius: 2, transition: "width 1s ease" }} />
</div>
<span style={{ fontSize: 10, color, fontFamily: "'IBM Plex Mono', monospace", fontWeight: 600 }}>{pct}%</span>
</div>
);
}

function LiveFeedRow({ item, index }) {
const [visible, setVisible] = useState(false);
useEffect(() => {
const t = setTimeout(() => setVisible(true), index * 80);
return () => clearTimeout(t);
}, [index]);

return (
<div style={{
display: "grid", gridTemplateColumns: "160px 50px 100px 1fr 70px 40px",
alignItems: "center", gap: 16,
padding: "10px 16px",
borderBottom: `1px solid ${BORDER}`,
background: visible ? "transparent" : "#00000000",
opacity: visible ? 1 : 0,
transform: visible ? "translateX(0)" : "translateX(-10px)",
transition: "all 0.4s ease",
cursor: "pointer",
}}
onMouseEnter={e => e.currentTarget.style.background = "#FFFFFF05"}
onMouseLeave={e => e.currentTarget.style.background = "transparent"}
>
<span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 12, color: LAVENDER, fontWeight: 500 }}>{item.id}</span>
<span style={{
fontFamily: "'IBM Plex Mono', monospace", fontSize: 13, fontWeight: 700,
color: severityColor(item.score),
}}>{item.score}</span>
<EpssBar value={item.epss} />
<span style={{ fontSize: 12, color: TEXT, opacity: 0.7 }}>{item.product}</span>
<StatusBadge status={item.status} />
<span style={{ fontSize: 11, color: MUTED, textAlign: "right" }}>{item.age}</span>
</div>
);
}

function ScoreRing({ score, label, color }) {
const r = 28;
const circ = 2 * Math.PI * r;
const dash = (score / 10) * circ;
return (
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
<svg width={72} height={72} style={{ transform: "rotate(-90deg)" }}>
<circle cx={36} cy={36} r={r} fill="none" stroke={BORDER} strokeWidth={5} />
<circle cx={36} cy={36} r={r} fill="none" stroke={color} strokeWidth={5}
strokeDasharray={`${dash} ${circ}`} strokeLinecap="round" />
</svg>
<div style={{ marginTop: -60, marginBottom: 36, textAlign: "center", pointerEvents: "none" }}>
<div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 16, fontWeight: 700, color }}>{score}</div>
</div>
<span style={{ fontSize: 10, color: MUTED, fontFamily: "'IBM Plex Mono', monospace", letterSpacing: "0.06em", textTransform: "uppercase" }}>{label}</span>
</div>
);
}

function DashboardPreview() {
const cve = LIVE_FEED[0];
return (
<div style={{
background: SURFACE, border: `1px solid ${BORDER}`, borderRadius: 12,
overflow: "hidden", boxShadow: `0 0 80px ${LAVENDER}15, 0 40px 80px #00000060`,
}}>
{/* window chrome */}
<div style={{ display: "flex", alignItems: "center", gap: 8, padding: "12px 16px", borderBottom: `1px solid ${BORDER}`, background: "#0A0A14" }}>
{["#FF4560", "#FFD166", "#06D6A0"].map((c, i) => (
<div key={i} style={{ width: 10, height: 10, borderRadius: "50%", background: c, opacity: 0.7 }} />
))}
<span style={{ marginLeft: 8, fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: MUTED }}>
vulnql.io / dashboard / CVE-2025-29824
</span>
</div>

  <div style={{ padding: 24, display: "grid", gridTemplateColumns: "1fr 260px", gap: 24 }}>
    {/* left */}
    <div>
      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 16 }}>
        <div>
          <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 13, color: LAVENDER, marginBottom: 4 }}>CVE-2026-20182</div>
          <div style={{ fontSize: 16, fontWeight: 700, color: TEXT, lineHeight: 1.3, maxWidth: 380 }}>
            Windows Common Log File System Driver<br />
            <span style={{ color: CRITICAL }}>Elevation of Privilege — In-the-Wild</span>
          </div>
        </div>
        <div style={{
          background: `${CRITICAL}15`, border: `1px solid ${CRITICAL}40`,
          borderRadius: 6, padding: "6px 12px", textAlign: "center",
        }}>
          <div style={{ fontSize: 22, fontWeight: 800, color: CRITICAL, fontFamily: "'IBM Plex Mono', monospace" }}>9.8</div>
          <div style={{ fontSize: 9, color: CRITICAL, opacity: 0.7, letterSpacing: "0.1em" }}>CVSS v3.1</div>
        </div>
      </div>

      {/* score rings */}
      <div style={{ display: "flex", gap: 24, marginBottom: 20, padding: "16px 0", borderTop: `1px solid ${BORDER}`, borderBottom: `1px solid ${BORDER}` }}>
        <ScoreRing score={9.8} label="CVSS" color={CRITICAL} />
        <ScoreRing score={9.4} label="EPSS" color={HIGH} />
        <ScoreRing score={8.7} label="KEV" color={MEDIUM} />
        <ScoreRing score={9.6} label="ActionScore™" color={LAVENDER} />
      </div>

      {/* tags */}
      <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
        {["🔴 CISA KEV", "In-the-Wild", "Auth Bypass", "Cisco IOS XE", "Weaponized PoC", "CWE-306 Missing Auth"].map(t => (
          <span key={t} style={{
            fontSize: 11, fontFamily: "'IBM Plex Mono', monospace",
            color: TEXT, background: SURFACE2, border: `1px solid ${BORDER}`,
            borderRadius: 4, padding: "3px 8px",
          }}>{t}</span>
        ))}
      </div>
    </div>

    {/* right panel */}
    <div style={{ borderLeft: `1px solid ${BORDER}`, paddingLeft: 24 }}>
      <div style={{ fontSize: 11, fontWeight: 700, color: MUTED, letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 12 }}>Threat Intelligence</div>
      {[
        { label: "Exploited since", value: "Mar 2026", color: CRITICAL },
        { label: "Exploit maturity", value: "Weaponized", color: HIGH },
        { label: "PoCs indexed", value: "2 repos", color: LAVENDER },
        { label: "Patch available", value: "May 17 2026", color: LOW },
        { label: "Affected versions", value: "Win 10–Server 2025", color: TEXT },
      ].map(r => (
        <div key={r.label} style={{ display: "flex", justifyContent: "space-between", marginBottom: 10 }}>
          <span style={{ fontSize: 11, color: MUTED }}>{r.label}</span>
          <span style={{ fontSize: 11, color: r.color, fontFamily: "'IBM Plex Mono', monospace", fontWeight: 600 }}>{r.value}</span>
        </div>
      ))}

      <div style={{ marginTop: 16, padding: "12px", background: `${CRITICAL}08`, border: `1px solid ${CRITICAL}25`, borderRadius: 6 }}>
        <div style={{ fontSize: 10, color: CRITICAL, fontWeight: 700, letterSpacing: "0.08em", marginBottom: 4 }}>⚠ ACTIVE EXPLOITATION</div>
        <div style={{ fontSize: 11, color: TEXT, opacity: 0.7, lineHeight: 1.5 }}>
          Weaponized exploit circulating in the wild. Patch or mitigate immediately — CISA KEV listed.
        </div>
      </div>
    </div>
  </div>
</div>

);
}

function App() {
const [feedItems, setFeedItems] = useState(LIVE_FEED);
const [activeTab, setActiveTab] = useState("critical");
const [menuOpen, setMenuOpen] = useState(false);
const [openSection, setOpenSection] = useState(null);
const [compareOpen, setCompareOpen] = useState(false);
const [roiOpen, setRoiOpen] = useState(false);
const [howOpen, setHowOpen] = useState(false);
const [pocOpen, setPocOpen] = useState(false);
const [roiFocus, setRoiFocus] = useState(4);
const [roiHours, setRoiHours] = useState(8);
const [roiRate, setRoiRate] = useState(150);
const ROI_TOTAL = 150;
const roiHoursSaved = (ROI_TOTAL - roiFocus) * roiHours;
const roiWeeks = roiHoursSaved / 40;
const roiDollars = roiHoursSaved * roiRate;
const feedRef = useRef(null);

const NAV_SECTIONS = [
{ label: "Product", items: ["CVE Database", "PoC Intelligence", "EPSS Scoring", "Asset Mapping", "Integrations"] },
{ label: "Why VulnQL", items: ["How It Works", "Compared to NVD", "Customer Stories", "ROI Calculator"] },
{ label: "Company", items: ["About", "Blog", "Careers", "Security", "Pledge"] },
];

const TAB_FILTERS = {
  critical:  item => item.score >= 9,
  high:      item => item.score >= 7 && item.score < 9,
  exploited: item => item.status === "EXPLOITED",
  poc:       item => item.status === "POC_PUBLIC",
};
const tabs = [
{ id: "critical",  label: "Critical (9+)",   color: CRITICAL, count: LIVE_FEED.filter(TAB_FILTERS.critical).length },
{ id: "high",      label: "High (7-8.9)",    color: HIGH,     count: LIVE_FEED.filter(TAB_FILTERS.high).length },
{ id: "exploited", label: "Exploited ITW",   color: LAVENDER, count: LIVE_FEED.filter(TAB_FILTERS.exploited).length },
{ id: "poc",       label: "PoC Public",      color: MEDIUM,   count: LIVE_FEED.filter(TAB_FILTERS.poc).length },
];
const visibleFeed = LIVE_FEED.filter(TAB_FILTERS[activeTab] || (() => true));

return (
<div style={{
background: BG, minHeight: "100vh", color: TEXT,
fontFamily: "'DM Sans', system-ui, sans-serif",
}}>
<style>{`
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=DM+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: ${SURFACE}; }
::-webkit-scrollbar-thumb { background: ${BORDER}; border-radius: 3px; }

    @keyframes pulse-dot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.8); }
    }
    @keyframes slide-up {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes glow-pulse {
      0%, 100% { box-shadow: 0 0 20px ${LAVENDER}30; }
      50% { box-shadow: 0 0 40px ${LAVENDER}50; }
    }
    @keyframes scan-line {
      0% { transform: translateY(-100%); }
      100% { transform: translateY(100vh); }
    }
    @keyframes ticker-scroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .feature-card:hover { border-color: ${LAVENDER}50 !important; background: #0F0F1E !important; }
    .feature-card:hover .feature-icon { transform: scale(1.1); }
    .feature-icon { transition: transform 0.2s ease; }
    .cta-btn:hover { background: ${LAVENDER} !important; color: #0A0A14 !important; transform: translateY(-2px); }
    .cta-btn { transition: all 0.2s ease; }
    .ghost-btn:hover { border-color: ${LAVENDER} !important; color: ${LAVENDER} !important; }
    .ghost-btn { transition: all 0.2s ease; }
    .nav-link:hover { color: ${TEXT} !important; }
    .price-card:hover { border-color: ${BORDER} !important; transform: translateY(-4px); }
    .price-card { transition: all 0.25s ease; }
    .integration-pill:hover { border-color: ${LAVENDER}60 !important; color: ${LAVENDER} !important; background: ${LAVENDER}08 !important; }
    .integration-pill { transition: all 0.2s ease; }
    .mobile-drawer { transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }
    .mobile-drawer.open { transform: translateX(0); }
    .accordion-item:hover { color: #C9B7E6 !important; }
    .social-icon:hover { color: #C9B7E6 !important; border-color: #C9B7E690 !important; }
    .social-icon { transition: all 0.2s ease; }
  `}</style>

  {/* NAV */}
  <nav style={{
    display: "flex", alignItems: "center", justifyContent: "space-between",
    padding: "0 40px", height: 64,
    borderBottom: `1px solid ${BORDER}`,
    background: `${BG}E0`, backdropFilter: "blur(12px)",
    position: "sticky", top: 0, zIndex: 100,
  }}>
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <div style={{
        width: 32, height: 32, borderRadius: 8,
        background: `linear-gradient(135deg, ${LAVENDER}, ${LAVENDER_DIM})`,
        display: "flex", alignItems: "center", justifyContent: "center",
        fontSize: 16,
      }}>⚔</div>
      <span style={{ fontFamily: "'Inter', system-ui, sans-serif", fontWeight: 800, fontSize: 18, color: TEXT, letterSpacing: "-0.02em" }}>
        VulnQL
      </span>
      <span style={{ fontSize: 10, color: LAVENDER, fontFamily: "'IBM Plex Mono', monospace", marginLeft: 4, opacity: 0.7 }}>by Adversary Consulting Group</span>
    </div>

    <div style={{ display: "flex", gap: 32 }}>
      {["Platform", "CVE Database", "Consulting", "Integrations", "Pricing", "Docs"].map(l => {
        const navHrefs = {
          "Platform": "/#platform",
          "CVE Database": "/feed",
          "Consulting": "/consulting",
          "Integrations": "/#integrations",
          "Pricing": "/#pricing",
          "Docs": `/coming-soon?topic=${encodeURIComponent("Docs")}`,
        };
        return (
          <a key={l} href={navHrefs[l] || `/coming-soon?topic=${encodeURIComponent(l)}`} className="nav-link" style={{
            fontSize: 13, color: MUTED, textDecoration: "none", fontWeight: 500,
            transition: "color 0.2s",
          }}>{l}</a>
        );
      })}
    </div>

    <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
      <a href="https://calendly.com/christopherfhernandez/encom" target="_blank" rel="noopener noreferrer" className="cta-btn" style={{
        fontSize: 13, color: BG, background: LAVENDER,
        borderRadius: 6, padding: "7px 16px", textDecoration: "none", fontWeight: 600,
      }}>Book a Demo</a>
      {/* Hamburger */}
      <button onClick={() => setMenuOpen(true)} style={{
        background: "transparent", border: `1px solid ${BORDER}`, borderRadius: 6,
        width: 36, height: 36, display: "flex", flexDirection: "column",
        alignItems: "center", justifyContent: "center", gap: 5, cursor: "pointer",
        padding: 0,
      }}>
        {[0,1,2].map(i => (
          <div key={i} style={{ width: 16, height: 1.5, background: MUTED, borderRadius: 1 }} />
        ))}
      </button>
    </div>
  </nav>

  {/* MOBILE / MENU DRAWER — Socket-style */}
  {menuOpen && (
    <div style={{
      position: "fixed", inset: 0, zIndex: 200,
      background: "rgba(0,0,0,0.5)", backdropFilter: "blur(4px)",
    }} onClick={() => setMenuOpen(false)} />
  )}
  <div className={`mobile-drawer${menuOpen ? " open" : ""}`} style={{
    position: "fixed", top: 0, right: 0, bottom: 0, width: 320,
    background: "#13132A", borderLeft: `1px solid ${BORDER}`,
    zIndex: 201, overflowY: "auto", display: "flex", flexDirection: "column",
  }}>
    {/* drawer header */}
    <div style={{
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "0 20px", height: 64, borderBottom: `1px solid ${BORDER}`,
      background: "#0E0E22",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <div style={{
          width: 28, height: 28, borderRadius: 7,
          background: `linear-gradient(135deg, ${LAVENDER}, ${LAVENDER_DIM})`,
          display: "flex", alignItems: "center", justifyContent: "center", fontSize: 14,
        }}>⚔</div>
        <span style={{ fontFamily: "'Inter', system-ui, sans-serif", fontWeight: 800, fontSize: 17, color: TEXT }}>VulnQL</span>
      </div>
      <button onClick={() => setMenuOpen(false)} style={{
        background: "transparent", border: "none", color: MUTED,
        fontSize: 22, cursor: "pointer", lineHeight: 1, padding: "4px 8px",
      }}>✕</button>
    </div>

    {/* Book a Demo */}
    <div style={{ padding: "24px 20px 0", display: "flex", flexDirection: "column", gap: 2 }}>
      <a href="https://calendly.com/christopherfhernandez/encom" target="_blank" rel="noopener noreferrer" style={{
        display: "block", textAlign: "center", padding: "14px",
        fontFamily: "'Inter', system-ui, sans-serif", fontWeight: 700, fontSize: 16,
        color: TEXT, textDecoration: "none", borderBottom: `1px solid ${BORDER}`,
      }}>Book a Demo</a>
    </div>

    {/* Accordion nav sections */}
    <div style={{ flex: 1 }}>
      {NAV_SECTIONS.map(section => (
        <div key={section.label} style={{ borderBottom: `1px solid ${BORDER}` }}>
          <button onClick={() => setOpenSection(openSection === section.label ? null : section.label)} style={{
            width: "100%", background: "transparent", border: "none",
            display: "flex", alignItems: "center", justifyContent: "space-between",
            padding: "18px 20px", cursor: "pointer",
            fontFamily: "'Inter', system-ui, sans-serif", fontWeight: 700, fontSize: 17,
            color: LAVENDER,
          }}>
            {section.label}
            <span style={{
              color: LAVENDER, fontSize: 13,
              transform: openSection === section.label ? "rotate(180deg)" : "rotate(0deg)",
              transition: "transform 0.2s ease", display: "inline-block",
            }}>⌄</span>
          </button>
          {openSection === section.label && (
            <div style={{ paddingBottom: 12 }}>
              {section.items.map(item => {
                const baseStyle = {
                  display: "block", padding: "10px 28px",
                  fontSize: 14, color: MUTED, textDecoration: "none",
                  transition: "color 0.15s",
                };
                const modalTriggers = {
                  "How It Works": () => setHowOpen(true),
                  "PoC Intelligence": () => setPocOpen(true),
                  "Compared to NVD": () => setCompareOpen(true),
                  "ROI Calculator": () => setRoiOpen(true),
                };
                if (modalTriggers[item]) {
                  return (
                    <button key={item} onClick={() => { modalTriggers[item](); setMenuOpen(false); }}
                      className="accordion-item"
                      style={{ ...baseStyle, width: "100%", textAlign: "left", background: "transparent", border: "none", cursor: "pointer", font: "inherit" }}>
                      {item}
                    </button>
                  );
                }
                return (
                  <a key={item} href={({ "CVE Database": "/feed", "Pledge": "/pledge", "Blog": "/research", "Security": "/security", "About": "/about", "Integrations": "/#integrations" })[item] || `/coming-soon?topic=${encodeURIComponent(item)}`} className="accordion-item" style={baseStyle}>{item}</a>
                );
              })}
            </div>
          )}
        </div>
      ))}
      {/* flat links */}
      {["News", "Pricing"].map(l => {
        const href = l === "Pricing" ? "/#pricing" : l === "News" ? "/research" : `/coming-soon?topic=${encodeURIComponent(l)}`;
        return (
          <a key={l} href={href} onClick={() => setMenuOpen(false)} style={{
            display: "block", padding: "18px 20px",
            fontFamily: "'Inter', system-ui, sans-serif", fontWeight: 700, fontSize: 17,
            color: LAVENDER, textDecoration: "none", borderBottom: `1px solid ${BORDER}`,
          }}>{l}</a>
        );
      })}
    </div>

    {/* Contact + socials */}
    <div style={{ padding: "20px", borderTop: `1px solid ${BORDER}` }}>
      <div style={{ fontSize: 14, color: MUTED, marginBottom: 16 }}>Contact</div>
      <div style={{ display: "flex", gap: 12 }}>
        {[
          { label: "𝕏", title: "Twitter" },
          { label: "⌥", title: "GitHub" },
          { label: "in", title: "LinkedIn" },
          { label: "◈", title: "Discord" },
        ].map(s => (
          <a key={s.title} href={`/coming-soon?topic=${encodeURIComponent(s.title)}`} title={s.title} className="social-icon" style={{
            width: 36, height: 36, borderRadius: 8,
            border: `1px solid ${BORDER}`,
            display: "flex", alignItems: "center", justifyContent: "center",
            fontSize: 14, color: MUTED, textDecoration: "none",
            fontFamily: "'IBM Plex Mono', monospace",
          }}>{s.label}</a>
        ))}
      </div>
    </div>
  </div>

  {/* HERO */}
  <section style={{ padding: "100px 40px 60px", maxWidth: 1200, margin: "0 auto", position: "relative" }}>
    {/* background grid */}
    <div style={{
      position: "absolute", inset: 0, opacity: 0.03,
      backgroundImage: `linear-gradient(${LAVENDER} 1px, transparent 1px), linear-gradient(90deg, ${LAVENDER} 1px, transparent 1px)`,
      backgroundSize: "40px 40px",
      pointerEvents: "none",
    }} />

    {/* Glow orbs */}
    <div style={{
      position: "absolute", top: -100, left: "20%", width: 600, height: 600,
      background: `radial-gradient(circle, ${LAVENDER}12 0%, transparent 70%)`,
      pointerEvents: "none",
    }} />
    <div style={{
      position: "absolute", top: 0, right: "10%", width: 400, height: 400,
      background: `radial-gradient(circle, ${CRITICAL}08 0%, transparent 70%)`,
      pointerEvents: "none",
    }} />

    {/* eyebrow */}
    <div style={{ display: "flex", justifyContent: "center", marginBottom: 32, animation: "slide-up 0.6s ease both" }}>
      <div style={{
        display: "flex", alignItems: "center", gap: 8,
        border: `1px solid ${LAVENDER}30`, borderRadius: 100,
        padding: "6px 16px", background: `${LAVENDER}08`,
      }}>
        <div style={{
          width: 7, height: 7, borderRadius: "50%", background: CRITICAL,
          animation: "pulse-dot 1.5s ease-in-out infinite",
        }} />
        <span style={{ fontSize: 12, color: LAVENDER, fontFamily: "'IBM Plex Mono', monospace" }}>
          Live feed: {LIVE_FEED.filter(f => f.status === "EXPLOITED").length} actively exploited CVEs in the last 24h
        </span>
      </div>
    </div>

    <h1 style={{
      fontFamily: "'Inter', system-ui, sans-serif", fontWeight: 800,
      fontSize: "clamp(40px, 6vw, 72px)", lineHeight: 1.05,
      textAlign: "center", letterSpacing: "-0.03em",
      animation: "slide-up 0.7s ease 0.1s both",
      marginBottom: 24,
    }}>
      Know which CVEs will<br />
      <span style={{ color: LAVENDER }}>ruin your weekend.</span>
    </h1>

    <p style={{
      textAlign: "center", maxWidth: 600, margin: "0 auto 40px",
      fontSize: 18, color: MUTED, lineHeight: 1.7, fontWeight: 300,
      animation: "slide-up 0.7s ease 0.2s both",
    }}>
      VulnQL pairs a curated library of validated exploits, payloads, and operator-grade guides
      with CVSS, EPSS, KEV, and your asset inventory — one prioritized queue, proof of impact included,
      so your team patches what attackers actually weaponize.
    </p>

    <div style={{
      display: "flex", justifyContent: "center", gap: 12,
      animation: "slide-up 0.7s ease 0.3s both", marginBottom: 64,
    }}>
      <a href="https://calendly.com/christopherfhernandez/encom" target="_blank" rel="noopener noreferrer" className="cta-btn" style={{
        fontSize: 14, color: BG, background: LAVENDER, textDecoration: "none",
        borderRadius: 8, padding: "12px 28px", fontWeight: 700, cursor: "pointer",
        animation: "glow-pulse 3s ease-in-out infinite",
      }}>Book a Demo →</a>
      <a href="/feed" className="ghost-btn" style={{
        fontSize: 14, color: TEXT, background: "transparent", textDecoration: "none",
        borderRadius: 8, padding: "12px 28px", border: `1px solid ${BORDER}`, cursor: "pointer", fontWeight: 500,
      }}>View live feed</a>
    </div>

    {/* Stats row */}
    <div style={{
      display: "flex", justifyContent: "center", gap: 48,
      padding: "32px 0", borderTop: `1px solid ${BORDER}`,
      animation: "slide-up 0.7s ease 0.4s both",
    }}>
      {STATS.map(s => (
        <div key={s.label} style={{ textAlign: "center" }}>
          <div style={{ fontFamily: "'Inter', system-ui, sans-serif", fontWeight: 800, fontSize: 28, color: LAVENDER, letterSpacing: "-0.02em" }}>{s.value}</div>
          <div style={{ fontSize: 12, color: MUTED, marginTop: 4 }}>{s.label}</div>
        </div>
      ))}
    </div>
  </section>

  {/* LIVE FEED SECTION */}
  <section style={{ padding: "60px 40px", maxWidth: 1200, margin: "0 auto" }}>
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 24 }}>
      <div>
        <h2 style={{ fontFamily: "'Inter', system-ui, sans-serif", fontWeight: 700, fontSize: 28, letterSpacing: "-0.02em", marginBottom: 8 }}>
          Live Exploit Intelligence Feed
        </h2>
        <p style={{ color: MUTED, fontSize: 14 }}>Auto-updated every 15 minutes from 40+ intelligence sources</p>
      </div>
      <div style={{ display: "flex", gap: 8 }}>
        {tabs.map(t => (
          <button key={t.id} onClick={() => setActiveTab(t.id)} style={{
            fontSize: 12, fontFamily: "'IBM Plex Mono', monospace",
            border: `1px solid ${activeTab === t.id ? t.color : BORDER}`,
            borderRadius: 6, padding: "6px 12px", cursor: "pointer",
            background: activeTab === t.id ? `${t.color}15` : "transparent",
            color: activeTab === t.id ? t.color : MUTED,
            transition: "all 0.2s",
          }}>
            {t.label}
            <span style={{ marginLeft: 6, opacity: 0.6 }}>{t.count}</span>
          </button>
        ))}
      </div>
    </div>

    <div style={{ border: `1px solid ${BORDER}`, borderRadius: 10, overflow: "hidden", background: SURFACE }}>
      {/* header row */}
      <div style={{
        display: "grid", gridTemplateColumns: "160px 50px 100px 1fr 70px 40px",
        gap: 16, padding: "10px 16px",
        background: SURFACE2, borderBottom: `1px solid ${BORDER}`,
      }}>
        {["CVE ID", "CVSS", "EPSS", "Product", "Status", "Age"].map(h => (
          <span key={h} style={{ fontSize: 10, color: MUTED, fontFamily: "'IBM Plex Mono', monospace", letterSpacing: "0.1em", textTransform: "uppercase" }}>{h}</span>
        ))}
      </div>
      {visibleFeed.length === 0 ? (
        <div style={{ padding: "32px 16px", textAlign: "center", color: MUTED, fontSize: 13, fontFamily: "'IBM Plex Mono', monospace" }}>
          no entries match this filter
        </div>
      ) : (
        visibleFeed.map((item, i) => <LiveFeedRow key={item.id} item={item} index={i} />)
      )}
    </div>

    <div style={{ textAlign: "center", marginTop: 20 }}>
      <a href="/feed" style={{ fontSize: 13, color: LAVENDER, textDecoration: "none", fontFamily: "'IBM Plex Mono', monospace" }}>
        View full feed →
      </a>
    </div>
  </section>

  {/* DASHBOARD PREVIEW */}
  <section style={{ padding: "60px 40px", maxWidth: 1200, margin: "0 auto" }}>
    <div style={{ textAlign: "center", marginBottom: 48 }}>
      <div style={{ fontSize: 12, color: LAVENDER, fontFamily: "'IBM Plex Mono', monospace", letterSpacing: "0.1em", marginBottom: 12 }}>DEEP DIVE ANALYSIS</div>
      <h2 style={{ fontFamily: "'Inter', system-ui, sans-serif", fontWeight: 700, fontSize: 36, letterSpacing: "-0.02em" }}>
        Actionable context on actual risk.
      </h2>
      <p style={{ color: MUTED, fontSize: 15, marginTop: 12, maxWidth: 500, margin: "12px auto 0" }}>
        Not just a CVSS score. Threat actor attribution, PoC quality rating, patch status, and your exposure — all in one view.
      </p>
    </div>
    <DashboardPreview />
  </section>

  {/* FEATURES GRID */}
  <section id="platform" style={{ padding: "80px 40px", maxWidth: 1200, margin: "0 auto", scrollMarginTop: 80 }}>
    <div style={{ textAlign: "center", marginBottom: 56 }}>
      <div style={{ fontSize: 12, color: LAVENDER, fontFamily: "'IBM Plex Mono', monospace", letterSpacing: "0.1em", marginBottom: 12 }}>PLATFORM CAPABILITIES</div>
      <h2 style={{ fontFamily: "'Inter', system-ui, sans-serif", fontWeight: 700, fontSize: 36, letterSpacing: "-0.02em" }}>
        Built for security teams that<br />act on certainty.
      </h2>
    </div>
    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
      {FEATURES.map(f => (
        <div key={f.title} className="feature-card" style={{
          background: SURFACE, border: `1px solid ${BORDER}`,
          borderRadius: 12, padding: 28, cursor: "default",
          transition: "all 0.25s ease",
        }}>
          <div className="feature-icon" style={{ fontSize: 28, marginBottom: 16 }}>{f.icon}</div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
            <h3 style={{ fontFamily: "'Inter', system-ui, sans-serif", fontWeight: 700, fontSize: 16 }}>{f.title}</h3>
          </div>
          <p style={{ fontSize: 13, color: MUTED, lineHeight: 1.7, marginBottom: 16 }}>{f.desc}</p>
          <span style={{
            fontSize: 10, color: LAVENDER, fontFamily: "'IBM Plex Mono', monospace",
            border: `1px solid ${LAVENDER}30`, borderRadius: 4, padding: "3px 8px",
            background: `${LAVENDER}08`,
          }}>{f.tag}</span>
        </div>
      ))}
    </div>
  </section>

  {/* INTEGRATIONS */}
  <section id="integrations" style={{ padding: "80px 40px", borderTop: `1px solid ${BORDER}`, borderBottom: `1px solid ${BORDER}`, scrollMarginTop: 80 }}>
    <div style={{ maxWidth: 1200, margin: "0 auto", textAlign: "center" }}>
      <div style={{ fontSize: 12, color: MUTED, fontFamily: "'IBM Plex Mono', monospace", letterSpacing: "0.1em", marginBottom: 32 }}>INTEGRATES WITH YOUR SECURITY STACK</div>
      <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", gap: 12 }}>
        {INTEGRATIONS.map(i => (
          <div key={i} className="integration-pill" style={{
            border: `1px solid ${BORDER}`, borderRadius: 8,
            padding: "10px 20px", fontSize: 13, color: MUTED,
            background: SURFACE, cursor: "pointer",
          }}>{i}</div>
        ))}
      </div>
      <p style={{ marginTop: 28, fontSize: 13, color: MUTED }}>
        Don't see your tool? If it exports to <span style={{ color: TEXT, fontFamily: "'IBM Plex Mono', monospace" }}>JSON</span> or <span style={{ color: TEXT, fontFamily: "'IBM Plex Mono', monospace" }}>CSV</span>, we support it.
      </p>
    </div>
  </section>

  {/* PRICING */}
  <section id="pricing" style={{ padding: "100px 40px", maxWidth: 1200, margin: "0 auto", scrollMarginTop: 80 }}>
    <div style={{ textAlign: "center", marginBottom: 56 }}>
      <div style={{ fontSize: 12, color: LAVENDER, fontFamily: "'IBM Plex Mono', monospace", letterSpacing: "0.1em", marginBottom: 12 }}>PRICING</div>
      <h2 style={{ fontFamily: "'Inter', system-ui, sans-serif", fontWeight: 700, fontSize: 36, letterSpacing: "-0.02em" }}>
        No pressure. See it live first.
      </h2>
      <p style={{ color: MUTED, fontSize: 15, marginTop: 12 }}>No hidden fees. Cancel anytime. Researcher-friendly.</p>
    </div>

    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
      {PRICING.map(plan => (
        <div key={plan.name} className="price-card" style={{
          background: plan.highlight ? `${LAVENDER}08` : SURFACE,
          border: `1px solid ${plan.highlight ? LAVENDER + "50" : BORDER}`,
          borderRadius: 12, padding: 32,
          position: "relative", overflow: "hidden",
        }}>
          <div style={{ fontFamily: "'Inter', system-ui, sans-serif", fontWeight: 700, fontSize: 20, marginBottom: 4 }}>{plan.name}</div>
          <div style={{ fontSize: 13, color: MUTED, marginBottom: plan.price ? 16 : 24 }}>{plan.desc}</div>
          {plan.price && (
            <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginBottom: 24 }}>
              <span style={{ fontFamily: "'Inter', system-ui, sans-serif", fontWeight: 800, fontSize: 32, letterSpacing: "-0.02em", color: TEXT }}>{plan.price}</span>
              <span style={{ fontSize: 12, color: MUTED, fontFamily: "'IBM Plex Mono', monospace", letterSpacing: "0.04em" }}>{plan.priceUnit}</span>
            </div>
          )}
          <div style={{ borderTop: `1px solid ${BORDER}`, paddingTop: 20, marginBottom: 24 }}>
            {plan.features.map(f => (
              <div key={f} style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
                <span style={{ color: LOW, fontSize: 12 }}>✓</span>
                <span style={{ fontSize: 13, color: TEXT, opacity: 0.8 }}>{f}</span>
              </div>
            ))}
          </div>
          <a
            href={plan.ctaHref || (plan.cta === "Contact sales" ? "mailto:sales@adversaryconsultinggroup.com" : "https://calendly.com/christopherfhernandez/encom")}
            target={(plan.ctaHref || plan.cta === "Contact sales") ? undefined : "_blank"}
            rel={(plan.ctaHref || plan.cta === "Contact sales") ? undefined : "noopener noreferrer"}
            className="cta-btn"
            style={{
              display: "block", textAlign: "center", textDecoration: "none",
              width: "100%", padding: "12px", borderRadius: 8,
              background: plan.highlight ? LAVENDER : SURFACE2,
              color: plan.highlight ? BG : TEXT,
              fontSize: 13, fontWeight: 700, cursor: "pointer",
              border: plan.highlight ? "none" : `1px solid ${BORDER}`,
            }}>{plan.cta}</a>
        </div>
      ))}
    </div>
  </section>

  {/* FOOTER */}
  <footer style={{ borderTop: `1px solid ${BORDER}`, padding: "48px 40px 32px" }}>
    <div style={{ maxWidth: 1200, margin: "0 auto" }}>
      <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 40, marginBottom: 40 }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 16 }}>
            <div style={{ width: 28, height: 28, borderRadius: 6, background: `linear-gradient(135deg, ${LAVENDER}, ${LAVENDER_DIM})`, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 14 }}>⚔</div>
            <span style={{ fontFamily: "'Inter', system-ui, sans-serif", fontWeight: 800, fontSize: 16 }}>VulnQL</span>
          </div>
          <p style={{ fontSize: 13, color: MUTED, lineHeight: 1.7, maxWidth: 260 }}>
            Exploit intelligence and vulnerability prioritization for security teams that move fast.
          </p>
          <p style={{ fontSize: 11, color: MUTED, marginTop: 16, opacity: 0.5 }}>
            A product of Adversary Consulting Group
          </p>
        </div>
        {[
          { title: "Platform", links: ["CVE Database", "PoC Intelligence", "EPSS Scoring", "Attack Surface Prioritization", "Integrations"] },
          { title: "Resources", links: ["Documentation", "API Reference", "Blog", "Changelog", "Status"] },
          { title: "Company", links: ["About", "Security", "Privacy", "Terms", "Contact"] },
        ].map(col => (
          <div key={col.title}>
            <div style={{ fontSize: 12, fontWeight: 700, color: MUTED, letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 16 }}>{col.title}</div>
            {col.links.map(l => {
              const footerHrefs = {
                "CVE Database": "/feed",
                "Integrations": "/#integrations",
                "Blog": "/research",
                "Privacy": "/pledge",
                "Security": "/security",
                "About": "/about",
                "Contact": "/consulting#contact",
              };
              const href = footerHrefs[l] || `/coming-soon?topic=${encodeURIComponent(l)}`;
              return (
                <div key={l} style={{ marginBottom: 10 }}>
                  <a href={href} style={{ fontSize: 13, color: MUTED, textDecoration: "none" }}
                    onMouseEnter={e => e.target.style.color = TEXT}
                    onMouseLeave={e => e.target.style.color = MUTED}
                  >{l}</a>
                </div>
              );
            })}
          </div>
        ))}
      </div>
      <div style={{ borderTop: `1px solid ${BORDER}`, paddingTop: 24, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span style={{ fontSize: 12, color: MUTED }}>© 2025 VulnQL / Adversary Consulting Group. All rights reserved.</span>
        <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: MUTED, opacity: 0.5 }}>v2.1.0 — feed updated 3 minutes ago</span>
      </div>
    </div>
  </footer>

  {/* How It Works modal */}
  {howOpen && (
    <div
      onClick={() => setHowOpen(false)}
      style={{
        position: "fixed", inset: 0, zIndex: 100,
        background: "rgba(4, 4, 12, 0.78)", backdropFilter: "blur(6px)",
        display: "flex", alignItems: "center", justifyContent: "center",
        padding: 20, animation: "slide-up 0.18s ease",
      }}
    >
      <div
        onClick={e => e.stopPropagation()}
        style={{
          background: SURFACE,
          border: `1px solid ${LAVENDER}40`,
          borderRadius: 14,
          maxWidth: 720, width: "100%",
          padding: "32px 36px",
          boxShadow: `0 0 80px ${LAVENDER}25, 0 30px 80px #00000080`,
          fontFamily: "'DM Sans', system-ui, sans-serif",
          maxHeight: "90vh", overflowY: "auto",
        }}
      >
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 18 }}>
          <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: LAVENDER, letterSpacing: "0.18em" }}>
            HOW IT WORKS
          </div>
          <button
            onClick={() => setHowOpen(false)}
            aria-label="Close"
            style={{ background: "transparent", border: "none", color: MUTED, fontSize: 20, cursor: "pointer", lineHeight: 1, padding: 0 }}
          >✕</button>
        </div>

        <h2 style={{ fontFamily: "'Inter', system-ui, sans-serif", fontWeight: 800, fontSize: 28, letterSpacing: "-0.02em", color: TEXT, lineHeight: 1.2, marginBottom: 18 }}>
          A CVE is a rumor. A validated exploit is evidence.
        </h2>

        <p style={{ fontSize: 14, color: TEXT, opacity: 0.85, lineHeight: 1.65, marginBottom: 14 }}>
          Most vulnerability feeds give you a number and a vendor advisory and call it intelligence. The questions
          that decide your patch order — whether the CVE is reachable in a real environment, whether published
          PoCs actually work, whether the exploit chain survives outside a researcher's lab — sit upstream of what
          those feeds publish. Answering them lands on whoever holds the keyboard, and red teams spend days
          rebuilding proofs-of-concept from a screenshot in a blog post.
        </p>
        <p style={{ fontSize: 14, color: TEXT, opacity: 0.85, lineHeight: 1.65, marginBottom: 22 }}>
          We validate every exploit before it enters the feed. That changes what scoring, prioritization, and
          remediation can mean — because every entry comes with proof, payload, and reproduction guide attached.
        </p>

        <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 14, marginBottom: 22 }}>
          {[
            {
              n: "01",
              title: "Ingest broadly, verify everything.",
              body: "We pull from NVD, KEV, vendor advisories, GitHub PoCs, Exploit DB, paste sites, researcher disclosures, and ITW telemetry. Volume is the easy part — over 300K CVEs and 60K public PoCs sit upstream. Validation is the hard part, and the step we do.",
            },
            {
              n: "02",
              title: "Reproduce in an isolated range.",
              body: "Our team stands up the affected product at the affected version in a controlled environment and runs the exploit end-to-end. We capture the working payload, the prerequisites, the target architecture, and the conditions under which it fails. Only what actually lands in our lab makes it into the feed.",
            },
            {
              n: "03",
              title: "Curate with operator-grade context.",
              body: "Each validated entry ships with a reproduction guide, reliability rating, detection notes, and the specific configuration window where the exploit lands. Defenders see what's actually weaponizable against their stack; operators get a payload that works on the first try.",
            },
            {
              n: "04",
              title: "Score on ground truth.",
              body: "ActionScore™ fuses CVSS, EPSS, KEV, exploit maturity, and your asset inventory — anchored to whether we've personally seen the exploit work. A 9.8 awaiting reproduction ranks below a 7.4 we've already landed. Your queue reflects what attackers can do today, scored on live evidence from our lab.",
            },
          ].map(step => (
            <div key={step.n} style={{
              display: "grid", gridTemplateColumns: "44px 1fr", gap: 14,
              padding: "14px 16px",
              background: SURFACE2, border: `1px solid ${BORDER}`, borderRadius: 10,
            }}>
              <div style={{
                fontFamily: "'IBM Plex Mono', monospace", fontSize: 13, fontWeight: 700,
                color: LAVENDER, letterSpacing: "0.05em",
              }}>{step.n}</div>
              <div>
                <div style={{ fontFamily: "'Inter', system-ui, sans-serif", fontWeight: 700, fontSize: 15, color: TEXT, marginBottom: 4 }}>
                  {step.title}
                </div>
                <div style={{ fontSize: 13, color: TEXT, opacity: 0.78, lineHeight: 1.6 }}>
                  {step.body}
                </div>
              </div>
            </div>
          ))}
        </div>

        <div style={{
          borderLeft: `2px solid ${LAVENDER}`,
          padding: "10px 0 10px 16px",
          marginBottom: 22,
        }}>
          <div style={{ fontSize: 12, color: LAVENDER, fontFamily: "'IBM Plex Mono', monospace", letterSpacing: "0.12em", marginBottom: 6 }}>
            WHY VALIDATE AT ALL?
          </div>
          <p style={{ fontSize: 13, color: TEXT, opacity: 0.85, lineHeight: 1.65, margin: 0 }}>
            Because patching is expensive and attention is the scarcest resource on a security team. A feed of
            CVEs ranked by theoretical severity sends defenders chasing low-probability vulnerabilities while the
            one CVE with a working exploit sits in row 412 of the backlog. Validation collapses the gap between
            "published" and "exploitable" — so the queue you work from is the queue attackers are working from.
          </p>
        </div>

        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          <a
            href="https://calendly.com/christopherfhernandez/encom"
            target="_blank" rel="noopener noreferrer"
            className="cta-btn"
            style={{
              fontSize: 13, color: BG, background: LAVENDER, textDecoration: "none",
              borderRadius: 6, padding: "10px 18px", fontWeight: 700,
            }}
          >Book a Demo</a>
          <a
            href="/feed"
            className="ghost-btn"
            style={{
              fontSize: 13, color: TEXT, background: "transparent", textDecoration: "none",
              border: `1px solid ${BORDER}`, borderRadius: 6,
              padding: "10px 18px",
            }}
          >View live feed</a>
          <button
            onClick={() => setHowOpen(false)}
            className="ghost-btn"
            style={{
              fontSize: 13, color: TEXT, background: "transparent",
              border: `1px solid ${BORDER}`, borderRadius: 6,
              padding: "10px 18px", cursor: "pointer",
            }}
          >Close</button>
        </div>
      </div>
    </div>
  )}

  {/* PoC Intelligence modal */}
  {pocOpen && (
    <div
      onClick={() => setPocOpen(false)}
      style={{
        position: "fixed", inset: 0, zIndex: 100,
        background: "rgba(4, 4, 12, 0.78)", backdropFilter: "blur(6px)",
        display: "flex", alignItems: "center", justifyContent: "center",
        padding: 20, animation: "slide-up 0.18s ease",
      }}
    >
      <div
        onClick={e => e.stopPropagation()}
        style={{
          background: SURFACE,
          border: `1px solid ${LAVENDER}40`,
          borderRadius: 14,
          maxWidth: 920, width: "100%",
          padding: "32px 36px",
          boxShadow: `0 0 80px ${LAVENDER}25, 0 30px 80px #00000080`,
          fontFamily: "'DM Sans', system-ui, sans-serif",
          maxHeight: "90vh", overflowY: "auto",
        }}
      >
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 18 }}>
          <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: LAVENDER, letterSpacing: "0.18em" }}>
            POC INTELLIGENCE
          </div>
          <button
            onClick={() => setPocOpen(false)}
            aria-label="Close"
            style={{ background: "transparent", border: "none", color: MUTED, fontSize: 20, cursor: "pointer", lineHeight: 1, padding: 0 }}
          >✕</button>
        </div>

        <h2 style={{ fontFamily: "'Inter', system-ui, sans-serif", fontWeight: 800, fontSize: 28, letterSpacing: "-0.02em", color: TEXT, lineHeight: 1.2, marginBottom: 10 }}>
          Validation Results
        </h2>
        <p style={{ fontSize: 14, color: MUTED, marginBottom: 18 }}>
          Exploit lab results — click any row to expand technical details
        </p>

        <div style={{ display: "flex", gap: 8, marginBottom: 18 }}>
          <span style={{
            display: "inline-flex", alignItems: "center", gap: 6,
            fontSize: 12, fontWeight: 600,
            color: CRITICAL, background: `${CRITICAL}15`,
            border: `1px solid ${CRITICAL}40`,
            padding: "5px 10px", borderRadius: 4,
          }}>⚡ 35 confirmed</span>
          <span style={{
            display: "inline-flex", alignItems: "center", gap: 6,
            fontSize: 12, fontWeight: 500,
            color: MUTED, background: SURFACE2,
            border: `1px solid ${BORDER}`,
            padding: "5px 10px", borderRadius: 4,
          }}>14 inconclusive</span>
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "140px 1fr 220px",
          fontSize: 10, fontFamily: "'IBM Plex Mono', monospace", letterSpacing: "0.12em",
          color: MUTED, padding: "0 16px 10px",
        }}>
          <div>STATUS</div>
          <div>CVE / FINDING</div>
          <div style={{ textAlign: "right" }}>RELIABILITY · FILES · DATE</div>
        </div>

        {[
          {
            cve: "CVE-2026-39987",
            title: "Marimo Remote Code Execution Vulnerability",
            source: "Marimo · cve-repo-watcher",
            files: 2,
            artifacts: 2,
          },
          {
            cve: "CVE-2025-68613",
            title: "n8n Improper Control of Dynamically-Managed Code Resources Vulnerability",
            source: "n8n · cve-repo-watcher",
            files: 1,
            artifacts: 2,
          },
        ].map((row, idx) => (
          <div key={row.cve} style={{
            background: SURFACE2, border: `1px solid ${BORDER}`,
            borderRadius: 10, marginBottom: 14, overflow: "hidden",
          }}>
            <div style={{
              display: "grid", gridTemplateColumns: "140px 1fr 220px",
              alignItems: "center", padding: "14px 16px", gap: 12,
            }}>
              <div style={{
                display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 6,
                fontSize: 11, fontWeight: 700, lineHeight: 1.2, textAlign: "center",
                color: CRITICAL, background: `${CRITICAL}15`,
                border: `1px solid ${CRITICAL}50`,
                padding: "8px 10px", borderRadius: 6,
                width: 110,
              }}>⚡ Exploit<br />Confirmed</div>

              <div>
                <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 14, fontWeight: 700, color: CRITICAL, marginBottom: 4 }}>
                  {row.cve}
                </div>
                <div style={{ fontSize: 13, color: TEXT, marginBottom: 2 }}>{row.title}</div>
                <div style={{ fontSize: 12, color: MUTED }}>{row.source}</div>
              </div>

              <div style={{ display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 12, fontSize: 12, color: MUTED }}>
                <span style={{
                  fontSize: 11, fontWeight: 600,
                  color: CRITICAL, background: `${CRITICAL}18`,
                  padding: "3px 8px", borderRadius: 4,
                }}>high</span>
                {row.files > 1 && <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>📄 {row.files}</span>}
                <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>📦 {row.artifacts}</span>
                <span style={{ textAlign: "right", lineHeight: 1.3 }}>May 20, 2026,<br />08:07 PM</span>
                <span style={{ color: MUTED, fontSize: 14 }}>⌃</span>
              </div>
            </div>

            <div style={{ borderTop: `1px solid ${BORDER}`, padding: "16px 18px" }}>
              <div style={{ fontSize: 10, fontFamily: "'IBM Plex Mono', monospace", letterSpacing: "0.12em", color: MUTED, marginBottom: 12 }}>
                TECHNICAL DETAILS
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginBottom: 14 }}>
                <div>
                  <div style={{ fontSize: 10, fontFamily: "'IBM Plex Mono', monospace", letterSpacing: "0.1em", color: MUTED, marginBottom: 4 }}>
                    🌐 NETWORK POSITION
                  </div>
                  <div style={{ fontSize: 13, color: TEXT, fontWeight: 500 }}>Network</div>
                </div>
                <div>
                  <div style={{ fontSize: 10, fontFamily: "'IBM Plex Mono', monospace", letterSpacing: "0.1em", color: MUTED, marginBottom: 4 }}>
                    🔒 AUTH REQUIRED
                  </div>
                  <div style={{ fontSize: 13, color: CRITICAL, fontWeight: 600 }}>No — unauthenticated</div>
                </div>
                <div>
                  <div style={{ fontSize: 10, fontFamily: "'IBM Plex Mono', monospace", letterSpacing: "0.1em", color: MUTED, marginBottom: 4 }}>
                    SAFETY RATING
                  </div>
                  <div style={{ fontSize: 13, color: TEXT, fontWeight: 500 }}>Safe</div>
                </div>
                <div>
                  <div style={{ fontSize: 10, fontFamily: "'IBM Plex Mono', monospace", letterSpacing: "0.1em", color: MUTED, marginBottom: 4 }}>
                    ✓ SAFE MODE
                  </div>
                  <div style={{ fontSize: 13, color: LOW, fontWeight: 600 }}>Enabled</div>
                </div>
              </div>
              <div>
                <div style={{ fontSize: 10, fontFamily: "'IBM Plex Mono', monospace", letterSpacing: "0.1em", color: MUTED, marginBottom: 6 }}>
                  RELIABILITY SCORE
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <div style={{ width: 120, height: 4, background: BORDER, borderRadius: 2, overflow: "hidden" }}>
                    <div style={{ width: "95%", height: "100%", background: CRITICAL, borderRadius: 2 }} />
                  </div>
                  <span style={{ fontSize: 12, color: TEXT, fontFamily: "'IBM Plex Mono', monospace", fontWeight: 600 }}>95%</span>
                </div>
              </div>
              {idx === 0 && (
                <div style={{ marginTop: 14, paddingTop: 14, borderTop: `1px solid ${BORDER}` }}>
                  <a href={`/coming-soon?topic=${encodeURIComponent("Artifacts")}`} style={{ fontSize: 13, color: CRITICAL, textDecoration: "none", fontWeight: 600 }}>
                    📦 2 artifacts
                  </a>
                </div>
              )}
            </div>
          </div>
        ))}

        <p style={{ fontSize: 13, color: TEXT, opacity: 0.78, lineHeight: 1.65, marginTop: 22, marginBottom: 22 }}>
          Every entry in the VulnQL feed is reproduced in our exploit lab before it lands in your queue.
          You see the reliability percentage, network position, auth requirements, and downloadable artifacts
          alongside the CVSS score and vendor advisory. Inconclusive results stay in the feed too, flagged
          plainly, so your team knows which PoCs actually work.
        </p>

        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          <a
            href="https://calendly.com/christopherfhernandez/encom"
            target="_blank" rel="noopener noreferrer"
            className="cta-btn"
            style={{
              fontSize: 13, color: BG, background: LAVENDER, textDecoration: "none",
              borderRadius: 6, padding: "10px 18px", fontWeight: 700,
            }}
          >Book a Demo</a>
          <a
            href="/feed"
            className="ghost-btn"
            style={{
              fontSize: 13, color: TEXT, background: "transparent", textDecoration: "none",
              border: `1px solid ${BORDER}`, borderRadius: 6,
              padding: "10px 18px",
            }}
          >View live feed</a>
          <button
            onClick={() => setPocOpen(false)}
            className="ghost-btn"
            style={{
              fontSize: 13, color: TEXT, background: "transparent",
              border: `1px solid ${BORDER}`, borderRadius: 6,
              padding: "10px 18px", cursor: "pointer",
            }}
          >Close</button>
        </div>
      </div>
    </div>
  )}

  {/* Compared to NVD modal */}
  {compareOpen && (
    <div
      onClick={() => setCompareOpen(false)}
      style={{
        position: "fixed", inset: 0, zIndex: 100,
        background: "rgba(4, 4, 12, 0.78)", backdropFilter: "blur(6px)",
        display: "flex", alignItems: "center", justifyContent: "center",
        padding: 20, animation: "slide-up 0.18s ease",
      }}
    >
      <div
        onClick={e => e.stopPropagation()}
        style={{
          background: SURFACE,
          border: `1px solid ${LAVENDER}40`,
          borderRadius: 14,
          maxWidth: 620, width: "100%",
          padding: "32px 36px",
          boxShadow: `0 0 80px ${LAVENDER}25, 0 30px 80px #00000080`,
          fontFamily: "'DM Sans', system-ui, sans-serif",
          maxHeight: "90vh", overflowY: "auto",
        }}
      >
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 18 }}>
          <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: LAVENDER, letterSpacing: "0.18em" }}>
            COMPARED TO NVD
          </div>
          <button
            onClick={() => setCompareOpen(false)}
            aria-label="Close"
            style={{ background: "transparent", border: "none", color: MUTED, fontSize: 20, cursor: "pointer", lineHeight: 1, padding: 0 }}
          >✕</button>
        </div>

        <h2 style={{ fontFamily: "'Inter', system-ui, sans-serif", fontWeight: 800, fontSize: 28, letterSpacing: "-0.02em", color: TEXT, lineHeight: 1.2, marginBottom: 14 }}>
          The modern enterprise is completely overwhelmed with how to prioritize vulnerabilities.
        </h2>

        <p style={{ fontSize: 14, color: TEXT, opacity: 0.85, lineHeight: 1.65, marginBottom: 14 }}>
          The NVD publishes tens of thousands of CVEs every year. Most stay theoretical, most fall outside
          your environment, and a CVSS score alone reflects severity in the lab — separate from whether an
          attacker is actively using one against the products you actually run.
        </p>
        <p style={{ fontSize: 14, color: TEXT, opacity: 0.85, lineHeight: 1.65, marginBottom: 14 }}>
          Security teams burn weeks chasing 9.8s that stay theoretical while a quiet 7.4 with a working
          public exploit sits in the queue. The result: backlog grows, patch cycles slip, and the one CVE that
          mattered slips through.
        </p>
        <p style={{ fontSize: 14, color: TEXT, opacity: 0.85, lineHeight: 1.65, marginBottom: 22 }}>
          VulnQL fuses CVSS, EPSS, in-the-wild exploitation, PoC reliability, and your asset exposure into a single
          ranked queue — so your team works the 10 CVEs that matter this week, ahead of the 10,000 the NVD published.
        </p>

        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          <a
            href="https://calendly.com/christopherfhernandez/encom"
            target="_blank" rel="noopener noreferrer"
            className="cta-btn"
            style={{
              fontSize: 13, color: BG, background: LAVENDER, textDecoration: "none",
              borderRadius: 6, padding: "10px 18px", fontWeight: 700,
            }}
          >Book a Demo</a>
          <button
            onClick={() => setCompareOpen(false)}
            className="ghost-btn"
            style={{
              fontSize: 13, color: TEXT, background: "transparent",
              border: `1px solid ${BORDER}`, borderRadius: 6,
              padding: "10px 18px", cursor: "pointer",
            }}
          >Close</button>
        </div>
      </div>
    </div>
  )}

  {/* ROI Calculator modal */}
  {roiOpen && (
    <div
      onClick={() => setRoiOpen(false)}
      style={{
        position: "fixed", inset: 0, zIndex: 100,
        background: "rgba(4, 4, 12, 0.78)", backdropFilter: "blur(6px)",
        display: "flex", alignItems: "center", justifyContent: "center",
        padding: 20, animation: "slide-up 0.18s ease",
      }}
    >
      <div
        onClick={e => e.stopPropagation()}
        style={{
          background: SURFACE,
          border: `1px solid ${LAVENDER}40`,
          borderRadius: 14,
          maxWidth: 680, width: "100%",
          padding: "32px 36px",
          boxShadow: `0 0 80px ${LAVENDER}25, 0 30px 80px #00000080`,
          fontFamily: "'DM Sans', system-ui, sans-serif",
          maxHeight: "90vh", overflowY: "auto",
        }}
      >
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 18 }}>
          <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: LAVENDER, letterSpacing: "0.18em" }}>
            ROI CALCULATOR
          </div>
          <button
            onClick={() => setRoiOpen(false)}
            aria-label="Close"
            style={{ background: "transparent", border: "none", color: MUTED, fontSize: 20, cursor: "pointer", lineHeight: 1, padding: 0 }}
          >✕</button>
        </div>

        <h2 style={{ fontFamily: "'Inter', system-ui, sans-serif", fontWeight: 800, fontSize: 26, letterSpacing: "-0.02em", color: TEXT, lineHeight: 1.2, marginBottom: 10 }}>
          150 critical CVEs in your queue. You only need to urgently fix {roiFocus}.
        </h2>
        <p style={{ fontSize: 14, color: MUTED, lineHeight: 1.55, marginBottom: 24 }}>
          Real-world exploitation data shows roughly 2–5% of "critical" CVEs ever get weaponized against the products you actually run.
          VulnQL surfaces that handful so your team spends its cycles where they matter.
        </p>

        {/* sliders */}
        <div style={{ display: "grid", gap: 16, marginBottom: 24 }}>
          {[
            { label: "Critical CVEs you actually need to patch this week", value: roiFocus, set: setRoiFocus, min: 3, max: 5, step: 1, suffix: "" },
            { label: "Engineering hours per critical patch (validate, test, deploy, verify)", value: roiHours, set: setRoiHours, min: 4, max: 16, step: 1, suffix: "h" },
            { label: "Loaded engineering rate", value: roiRate, set: setRoiRate, min: 100, max: 300, step: 10, prefix: "$", suffix: "/hr" },
          ].map(row => (
            <div key={row.label}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
                <span style={{ fontSize: 12, color: MUTED }}>{row.label}</span>
                <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 12, color: LAVENDER, fontWeight: 600 }}>
                  {row.prefix || ""}{row.value}{row.suffix || ""}
                </span>
              </div>
              <input
                type="range"
                min={row.min} max={row.max} step={row.step}
                value={row.value}
                onChange={e => row.set(parseInt(e.target.value, 10))}
                style={{ width: "100%", accentColor: LAVENDER }}
              />
            </div>
          ))}
        </div>

        {/* results */}
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12,
          padding: "20px 16px", borderRadius: 10,
          background: `${LAVENDER}08`, border: `1px solid ${LAVENDER}30`,
          marginBottom: 22,
        }}>
          {[
            { value: roiHoursSaved.toLocaleString(), unit: "hours", label: "saved per cycle" },
            { value: roiWeeks.toFixed(1), unit: "FTE-weeks", label: "reclaimed" },
            { value: "$" + roiDollars.toLocaleString(), unit: "", label: "cost avoided" },
          ].map(s => (
            <div key={s.label} style={{ textAlign: "center" }}>
              <div style={{ fontFamily: "'Inter', system-ui, sans-serif", fontWeight: 800, fontSize: 24, color: LAVENDER, letterSpacing: "-0.02em" }}>{s.value}</div>
              {s.unit && <div style={{ fontSize: 10, color: LAVENDER, fontFamily: "'IBM Plex Mono', monospace", letterSpacing: "0.08em", marginTop: 2 }}>{s.unit.toUpperCase()}</div>}
              <div style={{ fontSize: 11, color: MUTED, marginTop: 4 }}>{s.label}</div>
            </div>
          ))}
        </div>

        <p style={{ fontSize: 11, color: MUTED, lineHeight: 1.55, marginBottom: 20, fontFamily: "'IBM Plex Mono', monospace" }}>
          ({ROI_TOTAL} − {roiFocus}) × {roiHours}h = {roiHoursSaved.toLocaleString()}h not wasted per remediation cycle.
        </p>

        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          <a
            href="https://calendly.com/christopherfhernandez/encom"
            target="_blank" rel="noopener noreferrer"
            className="cta-btn"
            style={{
              fontSize: 13, color: BG, background: LAVENDER, textDecoration: "none",
              borderRadius: 6, padding: "10px 18px", fontWeight: 700,
            }}
          >Book a Demo</a>
          <button
            onClick={() => setRoiOpen(false)}
            className="ghost-btn"
            style={{
              fontSize: 13, color: TEXT, background: "transparent",
              border: `1px solid ${BORDER}`, borderRadius: 6,
              padding: "10px 18px", cursor: "pointer",
            }}
          >Close</button>
        </div>
      </div>
    </div>
  )}
</div>

);
}


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