// platform.jsx - AI SOC Platform product page
// Centerpiece for securesleuths-ai-soc (v4.8.5.1) product.

// --- Real screenshot gallery mapped to dashboard tabs ---
const SCREENSHOTS = [
  { id: "overview",  label: "Overview",      src: "assets/screenshots/overview-page.png",  alt: "AI SOC Platform - Overview dashboard showing alert stats and trends" },
  { id: "triage",    label: "Triage",        src: "assets/screenshots/triage-tab.png",     alt: "AI SOC Platform - Triage tab with AI verdicts and confidence scores" },
  { id: "daily",     label: "Daily Review",  src: "assets/screenshots/daily-overview.png", alt: "AI SOC Platform - Daily review with shift summary" },
  { id: "incidents", label: "Incidents",     src: "assets/screenshots/incident-tab.png",   alt: "AI SOC Platform - Incident management with grouped alerts" },
  { id: "detection", label: "Detection",     src: "assets/screenshots/detection.png",      alt: "AI SOC Platform - Detection engineering with rule proposals" },
  { id: "loop",      label: "Closed Loop",   src: "assets/screenshots/closed-loop.png",    alt: "AI SOC Platform - Closed loop feedback and rule tuning" },
  { id: "admin",     label: "Admin",         src: "assets/screenshots/admin-panel.png",    alt: "AI SOC Platform - Admin panel with tenant and user config" },
  { id: "login",     label: "Login",         src: "assets/screenshots/login-page.png",     alt: "AI SOC Platform - Secure login page" },
];

function DashboardMock() {
  const [active, setActive] = React.useState(0);

  React.useEffect(() => {
    const t = setInterval(() => setActive(a => (a + 1) % SCREENSHOTS.length), 4000);
    return () => clearInterval(t);
  }, []);

  const shot = SCREENSHOTS[active];
  return (
    <div style={{ border: "1px solid var(--line)", background: "var(--bg-1)", overflow: "hidden" }}>
      {/* Header bar */}
      <div style={{
        display: "flex", alignItems: "center", gap: 12,
        padding: "10px 16px", borderBottom: "1px solid var(--line)", background: "var(--bg-2)",
      }}>
        <div style={{ display: "flex", gap: 6 }}>
          <span style={{ width: 9, height: 9, borderRadius: "50%", background: "oklch(0.5 0.1 25)" }} />
          <span style={{ width: 9, height: 9, borderRadius: "50%", background: "oklch(0.65 0.12 75)" }} />
          <span style={{ width: 9, height: 9, borderRadius: "50%", background: "oklch(0.65 0.14 155)" }} />
        </div>
        <Mono style={{ fontSize: 11, color: "var(--fg-mute)", letterSpacing: "0.08em" }}>
          AI SOC · v4.8.5.1 · {shot.label}
        </Mono>
        <span style={{ flex: 1 }} />
        <Dot size={6} />
        <Mono style={{ fontSize: 10, color: "var(--accent)" }}>LIVE</Mono>
      </div>

      {/* Screenshot */}
      <div style={{ position: "relative" }}>
        <img
          key={shot.id}
          src={shot.src}
          alt={shot.alt}
          loading="lazy"
          style={{
            width: "100%", height: "auto", display: "block",
            animation: "fadeUp 400ms ease",
          }}
        />
      </div>

      {/* Tab selector */}
      <div style={{
        display: "flex", overflowX: "auto",
        borderTop: "1px solid var(--line)",
        background: "var(--bg-2)",
      }}>
        {SCREENSHOTS.map((s, i) => (
          <button key={s.id} onClick={() => setActive(i)}
            style={{
              flex: "0 0 auto",
              padding: "10px 16px",
              fontFamily: "var(--mono)", fontSize: 10,
              letterSpacing: "0.06em",
              color: active === i ? "var(--accent)" : "var(--fg-dim)",
              borderBottom: active === i ? "2px solid var(--accent)" : "2px solid transparent",
              whiteSpace: "nowrap",
              transition: "color 140ms",
            }}>
            {s.label}
          </button>
        ))}
      </div>
    </div>
  );
}

function ScreenshotGallery() {
  const [selected, setSelected] = React.useState(0);
  const shot = SCREENSHOTS[selected];
  return (
    <div>
      {/* Main image */}
      <div style={{ border: "1px solid var(--line)", background: "var(--bg-1)", overflow: "hidden" }}>
        <div style={{
          padding: "10px 20px", borderBottom: "1px solid var(--line)", background: "var(--bg-2)",
          display: "flex", alignItems: "center", gap: 14,
        }}>
          <Mono style={{ fontSize: 11, color: "var(--fg-mute)", letterSpacing: "0.08em" }}>
            {shot.label.toUpperCase()} TAB
          </Mono>
          <span style={{ flex: 1 }} />
          <Mono style={{ fontSize: 10, color: "var(--fg-dim)" }}>
            {selected + 1} / {SCREENSHOTS.length}
          </Mono>
        </div>
        <img
          key={shot.id}
          src={shot.src}
          alt={shot.alt}
          loading="lazy"
          style={{ width: "100%", height: "auto", display: "block", animation: "fadeUp 300ms ease" }}
        />
      </div>

      {/* Thumbnail strip */}
      <div style={{
        display: "grid", gridTemplateColumns: `repeat(${SCREENSHOTS.length}, 1fr)`,
        gap: 8, marginTop: 12,
      }}>
        {SCREENSHOTS.map((s, i) => (
          <button key={s.id} onClick={() => setSelected(i)}
            style={{
              padding: 0, border: i === selected ? "2px solid var(--accent)" : "1px solid var(--line)",
              overflow: "hidden", cursor: "pointer",
              opacity: i === selected ? 1 : 0.6,
              transition: "opacity 200ms, border-color 200ms",
            }}>
            <img src={s.src} alt={s.label} loading="lazy"
              style={{ width: "100%", height: 60, objectFit: "cover", display: "block" }} />
            <div style={{
              padding: "6px 8px", background: "var(--bg-2)",
              fontFamily: "var(--mono)", fontSize: 9,
              color: i === selected ? "var(--accent)" : "var(--fg-dim)",
              letterSpacing: "0.06em", textAlign: "center",
            }}>
              {s.label}
            </div>
          </button>
        ))}
      </div>
    </div>
  );
}

function PaneOverview() {
  return (
    <>
      <Label>OVERVIEW · LAST 24H</Label>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
        {[
          ["ALERTS",       "8,412", "var(--fg)"],
          ["AUTO-TRIAGED", "96.4%", "var(--accent)"],
          ["OPEN CASES",   "3",     "var(--warn)"],
          ["MTTA",         "41s",   "var(--accent)"],
        ].map(([l, v, c]) => (
          <div key={l} style={{ border: "1px solid var(--line-soft)", padding: "14px 16px" }}>
            <Mono style={{ fontSize: 10, color: "var(--fg-dim)", letterSpacing: "0.12em" }}>{l}</Mono>
            <div className="serif" style={{ fontSize: 30, color: c, lineHeight: 1 }}>{v}</div>
          </div>
        ))}
      </div>
      <div style={{ border: "1px solid var(--line-soft)", padding: 18 }}>
        <Mono style={{ fontSize: 10, color: "var(--fg-dim)", letterSpacing: "0.12em" }}>7-DAY VERDICT TREND</Mono>
        <svg viewBox="0 0 400 90" style={{ width: "100%", marginTop: 8, height: 90 }}>
          <polyline fill="none" stroke="var(--accent)" strokeWidth="1.5"
            points="0,60 50,55 100,40 150,50 200,30 250,35 300,20 350,25 400,15" />
          <polyline fill="none" stroke="var(--warn)" strokeWidth="1"
            points="0,70 50,68 100,65 150,62 200,55 250,56 300,50 350,48 400,45" opacity="0.7" />
          <polyline fill="none" stroke="var(--danger)" strokeWidth="1"
            points="0,82 50,83 100,80 150,79 200,78 250,77 300,76 350,74 400,73" opacity="0.5" />
        </svg>
        <div style={{ display: "flex", gap: 16, marginTop: 8 }}>
          {[["var(--accent)", "auto-closed"], ["var(--warn)", "investigating"], ["var(--danger)", "true-positive"]].map(([c, l]) => (
            <div key={l} style={{ display: "flex", gap: 6, alignItems: "center" }}>
              <span style={{ width: 8, height: 2, background: c }} />
              <Mono style={{ fontSize: 10, color: "var(--fg-mute)" }}>{l}</Mono>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

function PaneTriage() {
  const rows = [
    ["12:04:21", "TP",  "92%", "5712", "SSH brute · 77.91.x.x",      "var(--danger)"],
    ["12:04:18", "FP",  "98%", "5503", "Vuln scanner · known noise", "var(--fg-dim)"],
    ["12:04:11", "AUTO", "95%", "5710", "Failed login · MFA held",   "var(--accent)"],
    ["12:04:02", "INV", "54%", "31100", "Unusual OAuth grant",       "var(--warn)"],
    ["12:03:57", "AUTO", "97%", "5603", "AWS CloudTrail normal",     "var(--accent)"],
    ["12:03:41", "TP",  "88%", "92040", "Impossible travel · m.chen","var(--danger)"],
  ];
  return (
    <>
      <Label>TRIAGE · CLAUDE REASONING · LIVE</Label>
      <div style={{ border: "1px solid var(--line-soft)", fontFamily: "var(--mono)", fontSize: 11 }}>
        <div style={{ display: "grid", gridTemplateColumns: "90px 60px 60px 60px 1fr", padding: "10px 14px", background: "var(--bg-2)", borderBottom: "1px solid var(--line-soft)", color: "var(--fg-dim)", letterSpacing: "0.08em" }}>
          <span>TIME</span><span>VERDICT</span><span>CONF</span><span>RULE</span><span>DESCRIPTION</span>
        </div>
        {rows.map((r, i) => (
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "90px 60px 60px 60px 1fr",
            padding: "10px 14px",
            borderBottom: i < rows.length - 1 ? "1px solid var(--line-soft)" : "none",
          }}>
            <span style={{ color: "var(--fg-dim)" }}>{r[0]}</span>
            <span style={{ color: r[5] }}>{r[1]}</span>
            <span style={{ color: "var(--fg)" }}>{r[2]}</span>
            <span style={{ color: "var(--fg-mute)" }}>{r[3]}</span>
            <span style={{ color: "var(--fg)" }}>{r[4]}</span>
          </div>
        ))}
      </div>
    </>
  );
}

function PaneDetection() {
  return (
    <>
      <Label>DETECTION ENGINEERING · PROPOSALS</Label>
      <div style={{ border: "1px solid var(--line-soft)", padding: 20, display: "flex", flexDirection: "column", gap: 14 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
          <div>
            <Mono style={{ fontSize: 13, color: "var(--fg)" }}>Proposal #2841 · Rule 5710</Mono>
            <div style={{ marginTop: 4 }}>
              <Mono style={{ fontSize: 11, color: "var(--fg-dim)" }}>
                78% FP rate · 412 occurrences · proposed FP reduction: 94%
              </Mono>
            </div>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <Tag color="var(--accent)">approve</Tag>
            <Tag color="var(--line)">reject</Tag>
          </div>
        </div>
        <div style={{
          border: "1px solid var(--line)", padding: 14,
          fontFamily: "var(--mono)", fontSize: 11, lineHeight: 1.6,
          background: "var(--bg)",
        }}>
          <div style={{ color: "var(--danger)" }}>- &lt;rule id="5710" level="5"&gt;</div>
          <div style={{ color: "var(--accent)" }}>+ &lt;rule id="5710" level="5"&gt;</div>
          <div style={{ color: "var(--fg-mute)" }}>&nbsp;&nbsp;&lt;if_sid&gt;5700&lt;/if_sid&gt;</div>
          <div style={{ color: "var(--accent)" }}>+ &nbsp;&lt;srcip&gt;!10.0.0.0/8&lt;/srcip&gt;</div>
          <div style={{ color: "var(--accent)" }}>+ &nbsp;&lt;time&gt;!06:00-22:00&lt;/time&gt;</div>
          <div style={{ color: "var(--fg-mute)" }}>&nbsp;&nbsp;&lt;description&gt;SSH authentication attempt&lt;/description&gt;</div>
          <div style={{ color: "var(--fg-mute)" }}>&nbsp;&lt;/rule&gt;</div>
        </div>
        <Mono style={{ fontSize: 11, color: "var(--fg-mute)" }}>
          ◆ Reasoning: internal maintenance windows 06-22 UTC producing 312/412 FPs. Scoping reduces scope while preserving off-hours detection.
        </Mono>
      </div>
    </>
  );
}

function PaneMitre() {
  const tactics = [
    ["Initial Access",       0.85],
    ["Execution",            0.72],
    ["Persistence",          0.61],
    ["Privilege Escalation", 0.78],
    ["Defense Evasion",      0.54],
    ["Credential Access",    0.88],
    ["Discovery",            0.69],
    ["Lateral Movement",     0.42],
    ["Collection",           0.48],
    ["Exfiltration",         0.74],
    ["Command & Control",    0.81],
    ["Impact",               0.65],
  ];
  return (
    <>
      <Label>MITRE ATT&CK · COVERAGE HEATMAP</Label>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6 }}>
        {tactics.map(([t, v]) => (
          <div key={t} style={{
            padding: "10px 12px",
            border: "1px solid var(--line-soft)",
            background: `color-mix(in oklch, var(--accent) ${Math.round(v * 40)}%, var(--bg-1))`,
          }}>
            <Mono style={{ fontSize: 9.5, color: "var(--fg-dim)", letterSpacing: "0.08em" }}>
              {t.toUpperCase()}
            </Mono>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginTop: 4 }}>
              <span className="serif" style={{ fontSize: 22, color: "var(--fg)", lineHeight: 1 }}>
                {Math.round(v * 100)}%
              </span>
              <Mono style={{ fontSize: 9, color: "var(--fg-dim)" }}>coverage</Mono>
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

function PaneInvestigate() {
  return (
    <>
      <Label>INVESTIGATE · NATURAL LANGUAGE SIEM</Label>
      <div style={{ border: "1px solid var(--line-soft)", padding: 16, display: "flex", flexDirection: "column", gap: 14 }}>
        <div style={{ display: "flex", gap: 10, alignItems: "center", padding: "12px 14px", border: "1px solid var(--line)", background: "var(--bg)" }}>
          <Mono style={{ color: "var(--accent)" }}>▶</Mono>
          <Mono style={{ fontSize: 12, color: "var(--fg)" }}>
            show me all ssh failures on prod-db-* in the last 24 hours, grouped by source IP
          </Mono>
        </div>
        <div style={{ paddingLeft: 20, display: "flex", flexDirection: "column", gap: 6 }}>
          <Mono style={{ fontSize: 11, color: "var(--fg-mute)" }}>→ planning query · OpenSearch · wazuh-alerts-*</Mono>
          <Mono style={{ fontSize: 11, color: "var(--fg-mute)" }}>→ filter: rule.groups:authentication_failed AND agent.name:prod-db-*</Mono>
          <Mono style={{ fontSize: 11, color: "var(--fg-mute)" }}>→ aggregation: terms on data.srcip · size 10</Mono>
          <Mono style={{ fontSize: 11, color: "var(--accent)" }}>✓ 4 sources · 847 events · 312ms</Mono>
        </div>
        <div style={{ border: "1px solid var(--line)", fontFamily: "var(--mono)", fontSize: 11 }}>
          {[
            ["77.91.102.14",    "412", "Russia · Tor exit · MISP match"],
            ["185.220.101.44",  "208", "Germany · known C2"],
            ["203.0.113.10",    "164", "RFC5737 test · ignore"],
            ["52.84.112.x (AWS)", "63",  "CI runner · baseline"],
          ].map((r, i) => (
            <div key={i} style={{
              display: "grid", gridTemplateColumns: "180px 70px 1fr",
              padding: "8px 14px",
              borderBottom: i < 3 ? "1px solid var(--line-soft)" : "none",
            }}>
              <span style={{ color: "var(--fg)" }}>{r[0]}</span>
              <span style={{ color: "var(--warn)" }}>{r[1]}</span>
              <span style={{ color: "var(--fg-mute)" }}>{r[2]}</span>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

function PaneLoop() {
  const steps = [
    ["ALERTS",      "8,412/min", "Wazuh SIEM"],
    ["ENRICH",      "+9 context", "Asset · identity · TI · baseline"],
    ["TRIAGE",      "Claude",     "verdict + confidence + reasoning"],
    ["DECIDE",      "96.4% auto", "SQLite ledger"],
    ["REVIEW",      "analyst",    "overrides = signal"],
    ["FEEDBACK",    "4h cycle",   "FP pattern · missed threats"],
    ["PROPOSE",     "rule diff",  "XML + MITRE mapping"],
    ["DEPLOY",      "approved",   "Wazuh API · effectiveness tracked"],
  ];
  return (
    <>
      <Label>CLOSED LOOP · EVERY CYCLE MAKES THE NEXT ONE SMARTER</Label>
      <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
        {steps.map((s, i) => (
          <div key={s[0]} style={{
            display: "grid", gridTemplateColumns: "30px 120px 110px 1fr",
            gap: 12, alignItems: "center",
            padding: "10px 14px",
            border: "1px solid var(--line-soft)",
            background: i % 2 ? "transparent" : "var(--bg-2)",
          }}>
            <Mono style={{ color: "var(--accent)", fontSize: 11 }}>{String(i + 1).padStart(2, "0")}</Mono>
            <Mono style={{ color: "var(--fg)", fontSize: 12, letterSpacing: "0.06em" }}>{s[0]}</Mono>
            <Mono style={{ color: "var(--accent)", fontSize: 11 }}>{s[1]}</Mono>
            <Mono style={{ color: "var(--fg-mute)", fontSize: 11 }}>{s[2]}</Mono>
          </div>
        ))}
      </div>
    </>
  );
}

// --- Feature grid (condensed from 31 shipped components) ---
function FeatureInventory() {
  const groups = [
    {
      name: "Context layer",
      features: [
        ["Alert enrichment pipeline", "Asset · identity · TI · historical · behavioral baselines · time context"],
        ["Live threat intelligence",   "12 feeds · AbuseIPDB · OTX · VirusTotal · MISP · CISA KEV · EPSS"],
        ["Behavioral baselines",       "30-day per-agent/IP/user · z-score anomaly flags (2.5σ)"],
        ["Risk scoring",               "Composite 0-100 with multiplicative boosters across every dimension"],
      ],
    },
    {
      name: "Action layer",
      features: [
        ["AI triage agent",            "Claude · structured verdict + confidence + reasoning + MITRE mapping"],
        ["Detection engineering agent","Proposes Wazuh rule changes with FP-reduction math · human approves"],
        ["Threat hunt agent",          "Hypothesis-driven hunts against MITRE coverage gaps · 6h cycle"],
        ["Natural-language SIEM",      "Ask in English · two-pass Claude plans + synthesizes"],
        ["SOAR · 11 playbooks",        "Auto-containment with approval workflow + rollback"],
        ["Active response · 9 actions","Block IP · isolate host · kill process · quarantine file · verify"],
      ],
    },
    {
      name: "Guidance layer",
      features: [
        ["Playbook engine",             "YAML playbooks auto-selected by rule group · injected into triage prompt"],
        ["Risk criteria",               "Asset tiers · user risk profiles · MITRE priorities · your policy"],
        ["Escalation logic",            "Auto-close conditions · always-escalate triggers · SLA targets"],
        ["Knowledge base · FTS5",       "Analyst notes · auto-indexed learnings · injected into agent prompts"],
      ],
    },
    {
      name: "Feedback + loop",
      features: [
        ["FP pattern detection",       "Rules with recurring false positives surfaced every 4 hours"],
        ["Rule tuning auto-actions",   "threshold_raised · baselined · monitoring · auto_tuned"],
        ["Override analysis",          "Human-vs-AI disagreements classified into learning signals"],
        ["Effectiveness tracking",     "Pre/post FP-rate comparison · marks proposals as effective"],
      ],
    },
    {
      name: "Case management",
      features: [
        ["Incident grouping",          "4-rule deterministic engine · 30-min window · MITRE tactic aware"],
        ["L1/L2/L3 case workflow",     "Assignment · timeline · merge · SLA enforcement"],
        ["MTTD/MTTR/MTTA metrics",     "Shift-based · SLA trends · analyst utilization · workload alerting"],
        ["Ticketing · bidirectional",  "Jira · ServiceNow · PagerDuty · webhook ingest + polling sync"],
      ],
    },
    {
      name: "Platform",
      features: [
        ["Multi-tenancy",              "Fernet-encrypted per-tenant config · client_id-scoped queries · mssp_admin"],
        ["Multi-LLM providers",        "Anthropic · OpenAI · Groq · Ollama · failover chains · cost tracking"],
        ["Real-time webhook ingest",   "1-3s latency · HMAC-SHA256 · IP allowlist · idempotency"],
        ["Alert anonymization",        "Strip client identifiers before LLM · deterministic tokens · auto-restore"],
        ["RBAC · 4 roles + tab ACL",   "admin · senior_analyst · analyst · read_only · per-endpoint rate limits"],
        ["Audit trail",                "Actor · action · target · IP · compliance-ready explainability"],
      ],
    },
  ];
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
      {groups.map(g => (
        <div key={g.name}>
          <Divider label={g.name.toUpperCase()} style={{ marginBottom: 14 }} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 0, border: "1px solid var(--line)" }}>
            {g.features.map((f, i) => (
              <div key={i} style={{
                padding: "20px 24px",
                borderRight: i % 2 === 0 ? "1px solid var(--line-soft)" : "none",
                borderBottom: i < g.features.length - 2 ? "1px solid var(--line-soft)" : "none",
                display: "flex", flexDirection: "column", gap: 6,
              }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <Diamond size={6} />
                  <span className="serif" style={{ fontSize: 18, letterSpacing: "-0.005em" }}>{f[0]}</span>
                </div>
                <span style={{ color: "var(--fg-mute)", fontSize: 13.5, lineHeight: 1.5, paddingLeft: 18 }}>
                  {f[1]}
                </span>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

// --- Architecture diagram, SVG, quiet and deliberate ---
function ArchitectureDiagram() {
  return (
    <div style={{ border: "1px solid var(--line)", padding: "40px 32px", background: "var(--bg-1)" }}>
      <svg viewBox="0 0 1000 400" style={{ width: "100%", height: "auto", fontFamily: "var(--mono)" }}>
        <defs>
          <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M0,0 L10,5 L0,10 z" fill="var(--accent)" />
          </marker>
          <marker id="arrow-dim" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M0,0 L10,5 L0,10 z" fill="var(--fg-dim)" />
          </marker>
        </defs>
        {/* Column headers */}
        {[["CONTEXT LAYER", 60],["ACTION LAYER", 400],["GUIDANCE LAYER", 760]].map(([l, x]) => (
          <g key={l}>
            <text x={x + 110} y="28" fill="var(--fg-dim)" fontSize="10" letterSpacing="2" textAnchor="middle">{l}</text>
            <line x1={x} y1="40" x2={x + 220} y2="40" stroke="var(--line)" />
          </g>
        ))}

        {/* Context blocks */}
        {[
          ["Wazuh alerts",        65],
          ["Asset inventory",     105],
          ["Identity context",    145],
          ["Threat intel",        185],
          ["Historical baselines",225],
          ["Behavioral baselines",265],
        ].map(([t, y]) => (
          <g key={t}>
            <rect x="60" y={y} width="220" height="30" fill="none" stroke="var(--line)" />
            <text x="72" y={y + 19} fill="var(--fg)" fontSize="11">◆ {t}</text>
          </g>
        ))}
        <rect x="60" y="320" width="220" height="30" fill="none" stroke="var(--line)" />
        <text x="72" y="339" fill="var(--fg-mute)" fontSize="11">OpenSearch (enriched)</text>
        <rect x="60" y="360" width="220" height="30" fill="none" stroke="var(--line)" />
        <text x="72" y="379" fill="var(--fg-mute)" fontSize="11">Incident engine</text>

        {/* Action blocks */}
        <rect x="400" y="65" width="220" height="54" fill="var(--bg-2)" stroke="var(--accent)" />
        <text x="412" y="87" fill="var(--accent)" fontSize="11">◆ Triage agent</text>
        <text x="412" y="103" fill="var(--fg-mute)" fontSize="10">AI verdict + reasoning</text>

        <rect x="400" y="155" width="220" height="40" fill="none" stroke="var(--line)" />
        <text x="412" y="180" fill="var(--fg)" fontSize="11">Decisions</text>

        <rect x="400" y="225" width="220" height="54" fill="var(--bg-2)" stroke="var(--accent)" />
        <text x="412" y="247" fill="var(--accent)" fontSize="11">◆ Feedback loop</text>
        <text x="412" y="263" fill="var(--fg-mute)" fontSize="10">override · FP · auto-actions</text>

        <rect x="400" y="315" width="220" height="54" fill="var(--bg-2)" stroke="var(--accent)" />
        <text x="412" y="337" fill="var(--accent)" fontSize="11">◆ Detection agent</text>
        <text x="412" y="353" fill="var(--fg-mute)" fontSize="10">rule proposals</text>

        {/* Guidance blocks */}
        {[
          ["Risk criteria",     75],
          ["Escalation logic",  135],
          ["Playbooks",         195],
          ["Knowledge base",    255],
        ].map(([t, y]) => (
          <g key={t}>
            <rect x="760" y={y} width="220" height="40" fill="none" stroke="var(--line)" />
            <text x="772" y={y + 25} fill="var(--fg)" fontSize="11">◆ {t}</text>
          </g>
        ))}

        {/* Arrows: context → triage (each connects from its own midpoint) */}
        {[80, 120, 160, 200, 240, 280].map(y => (
          <line key={y} x1="280" y1={y} x2="400" y2="92" stroke="var(--fg-dim)" strokeDasharray="2,3" markerEnd="url(#arrow-dim)" />
        ))}
        {/* triage → decisions → feedback → detection */}
        <line x1="510" y1="119" x2="510" y2="155" stroke="var(--accent)" markerEnd="url(#arrow)" />
        <line x1="510" y1="195" x2="510" y2="225" stroke="var(--accent)" markerEnd="url(#arrow)" />
        <line x1="510" y1="279" x2="510" y2="315" stroke="var(--accent)" markerEnd="url(#arrow)" />
        {/* guidance → triage (each connects individually) */}
        {[95, 155, 215, 275].map(y => (
          <line key={y} x1="760" y1={y} x2="620" y2="92" stroke="var(--fg-dim)" strokeDasharray="2,3" markerEnd="url(#arrow-dim)" />
        ))}
        {/* detection → wazuh (loop back) */}
        <path d="M 620 342 Q 700 342, 700 52 L 170 52 L 170 65" fill="none" stroke="var(--accent)" strokeDasharray="3,3" markerEnd="url(#arrow)" />
        <text x="420" y="46" fill="var(--accent)" fontSize="10">deploy to Wazuh · closed loop</text>
      </svg>
    </div>
  );
}

// --- Tier strip — 3 tiers + Partners pointer ---
function TierStrip() {
  const tiers = [
    {
      n: "COMMUNITY",
      p: "Free",
      sub: "forever · self-hosted",
      tagline: "AI triage · enrichment · MITRE heatmap",
      features: ["AI triage (92%+ confidence)", "7 free TI feeds", "Incident lifecycle", "5 users · unlimited agents"],
      featured: false,
    },
    {
      n: "TEAM",
      p: "$999",
      sub: "/mo · or $9,990 annual",
      tagline: "Your Wazuh, but actually working",
      features: ["+ Detection Agent (rule tuning)", "+ NL investigation", "+ Slack · Jira · PagerDuty", "+ All 14 dashboard tabs", "25 users · unlimited agents"],
      featured: true,
    },
    {
      n: "ENTERPRISE",
      p: "$2,999",
      sub: "/mo · annual only",
      tagline: "Full autonomous SOC",
      features: ["+ Threat hunting · SOAR · Active Response", "+ Compliance matrix (NIST/ISO/PCI/HIPAA)", "+ SSO · multi-tenancy · audit trail", "+ Dedicated SLA support", "Unlimited everything"],
      featured: false,
    },
  ];
  return (
    <div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", border: "1px solid var(--line)" }}>
        {tiers.map((t, i) => (
          <div key={t.n} style={{
            padding: 28,
            borderRight: i < 2 ? "1px solid var(--line-soft)" : "none",
            display: "flex", flexDirection: "column", gap: 14,
            background: t.featured ? "var(--bg-1)" : "transparent",
            position: "relative",
          }}>
            {t.featured && (
              <span style={{
                position: "absolute", top: -1, left: -1, right: -1,
                height: 2, background: "var(--accent)",
              }} />
            )}
            <Mono style={{ fontSize: 11, color: "var(--fg-dim)", letterSpacing: "0.14em" }}>{t.n}</Mono>
            <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
              <span className="serif" style={{ fontSize: 36, lineHeight: 1, color: t.featured ? "var(--accent)" : "var(--fg)", letterSpacing: "-0.02em" }}>{t.p}</span>
              <Mono style={{ fontSize: 11, color: "var(--fg-dim)" }}>{t.sub}</Mono>
            </div>
            <p className="serif" style={{ fontSize: 16, margin: 0, color: "var(--fg-mute)", fontStyle: "italic", lineHeight: 1.4 }}>
              {t.tagline}
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 6, marginTop: 4 }}>
              {t.features.map(f => (
                <Mono key={f} style={{ fontSize: 11, color: "var(--fg)", lineHeight: 1.5 }}>◆ {f}</Mono>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{
        marginTop: 16,
        border: "1px solid var(--line-soft)",
        padding: "16px 24px",
        display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap",
      }}>
        <Mono style={{ fontSize: 11, color: "var(--accent)", letterSpacing: "0.14em" }}>◆ MSSP OR RESELLER?</Mono>
        <span style={{ fontSize: 13, color: "var(--fg-mute)", flex: 1 }}>
          White-label, multi-tenant licensing, revenue share — separate conversation, custom economics.
        </span>
        <Mono style={{ fontSize: 11, color: "var(--fg-dim)" }}>Contact us →</Mono>
      </div>
    </div>
  );
}

function PlatformPage({ setPage }) {
  return (
    <div className="page">
      {/* Hero */}
      <section className="grid-bg" style={{ padding: "80px 0 60px", borderBottom: "1px solid var(--line)", position: "relative", overflow: "hidden" }}>
        {/* Cosmic motif — DHRUVA identity layer. Stays subtle, never competes with copy. */}
        <svg
          aria-hidden="true"
          viewBox="0 0 1440 600"
          preserveAspectRatio="xMidYMid slice"
          style={{
            position: "absolute",
            top: 0, left: 0, right: 0, bottom: 0,
            width: "100%", height: "100%",
            pointerEvents: "none",
            opacity: 0.5,
          }}
        >
          {/* Star scatter - deterministic seeding via hand-picked coords */}
          {[
            [120, 80, 1], [240, 140, 1.5], [380, 60, 1], [460, 200, 1],
            [580, 110, 1.2], [720, 170, 1], [860, 90, 1.5], [960, 220, 1],
            [1080, 150, 1], [1180, 80, 1.3], [1320, 180, 1],
            [160, 280, 1], [320, 340, 1.2], [440, 410, 1], [560, 350, 1],
            [680, 430, 1], [820, 380, 1.3], [940, 460, 1], [1060, 340, 1.2],
            [1220, 420, 1], [1360, 310, 1],
            [200, 500, 1], [380, 540, 1], [560, 480, 1], [740, 520, 1],
            [920, 500, 1.2], [1100, 540, 1], [1280, 480, 1],
          ].map(([cx, cy, r], i) => (
            <circle key={i} cx={cx} cy={cy} r={r} fill="var(--fg-mute)" />
          ))}
          {/* Pole star upper-right — DHRUVA himself, slightly larger with 4-point rays */}
          <g transform="translate(1280, 120)">
            <line x1="0" y1="-32" x2="0" y2="32" stroke="var(--accent)" strokeWidth="1" opacity="0.6" />
            <line x1="-32" y1="0" x2="32" y2="0" stroke="var(--accent)" strokeWidth="1" opacity="0.6" />
            <circle cx="0" cy="0" r="4" fill="var(--accent)" />
            <circle cx="0" cy="0" r="8" fill="none" stroke="var(--accent)" strokeWidth="1" opacity="0.3" />
          </g>
        </svg>

        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "center", position: "relative" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <Tag color="var(--accent)">◆ DHRUVA · v4.8.5.1</Tag>
              <Mono style={{ fontSize: 11, color: "var(--fg-mute)" }}>secure-sleuths-ai-soc</Mono>
            </div>
            <h1 className="serif" style={{ fontSize: "clamp(48px, 6vw, 88px)", margin: 0, lineHeight: 1, letterSpacing: "-0.025em" }}>
              DHRUVA.<br/>
              <span style={{ fontStyle: "italic", color: "var(--fg-mute)" }}>The AI SOC that compounds.</span>
            </h1>
            <p style={{ fontSize: 19, lineHeight: 1.55, color: "var(--fg-mute)", margin: 0, maxWidth: 560 }}>
              An AI-augmented security operations layer for Wazuh. Named after the Sanskrit pole star — the fixed watcher that never blinks. Triages every alert with Claude, proposes detection tuning, hunts for gaps, and gets measurably smarter every cycle. Self-hosted. Multi-tenant. Yours to run.
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <button className="btn btn-primary" onClick={() => { window.__dlSource = "platform-mid-cta"; setPage("download-community"); }}>Download Community →</button>
              <button className="btn" onClick={() => setPage("early-access")}>Book a Teardown · $297</button>
            </div>
            <div style={{ display: "flex", gap: 28, paddingTop: 24, borderTop: "1px solid var(--line-soft)", flexWrap: "wrap" }}>
              {[["31", "shipped components"], ["14", "dashboard tabs"], ["96.4%", "auto-triage rate"], ["3", "tiers · self-hosted"]].map(([v, l]) => (
                <div key={l}>
                  <div className="serif" style={{ fontSize: 28, color: "var(--accent)", lineHeight: 1 }}>{v}</div>
                  <Mono style={{ fontSize: 10, color: "var(--fg-dim)", letterSpacing: "0.08em", textTransform: "uppercase" }}>{l}</Mono>
                </div>
              ))}
            </div>
          </div>
          <DashboardMock />
        </div>
      </section>

      {/* Why */}
      <section style={{ padding: "100px 0" }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 40 }}>
          <Divider label="01 · WHY A NEW LAYER ON WAZUH" />
          <SectionHead
            title="Compound intelligence. Open stack. Your infrastructure."
            sub="Wazuh gives you the SIEM. This gives you the SOC running on top of it: AI triage, rule tuning that actually ships, hypothesis-driven hunting, and natural-language investigation - all closed-loop, all on infrastructure you own."
          />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", border: "1px solid var(--line)" }}>
            {[
              ["Closed loop", "Every override becomes a learning signal. Every approved proposal reduces FP rate. Every cycle ships a smarter SOC."],
              ["Self-hosted",  "Runs on your Linux box next to Wazuh. Your alerts. Your data. Your LLM keys. No SaaS lock-in, no telemetry home."],
              ["Org-level scale", "Fernet-encrypted isolation for subsidiaries, business units, or dev/staging/prod. Per-environment LLM configs. Cost tracking and audit per tenant."],
            ].map((c, i) => (
              <div key={c[0]} style={{
                padding: 32, borderRight: i < 2 ? "1px solid var(--line-soft)" : "none",
                display: "flex", flexDirection: "column", gap: 14, minHeight: 220,
              }}>
                <Mono style={{ fontSize: 11, color: "var(--accent)", letterSpacing: "0.1em" }}>◆ {c[0].toUpperCase()}</Mono>
                <p className="serif" style={{ fontSize: 22, lineHeight: 1.3, margin: 0, letterSpacing: "-0.005em" }}>{c[1]}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Screenshot gallery - full width */}
      <section style={{ padding: "100px 0 60px" }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 40 }}>
          <Divider label="LIVE DASHBOARD · REAL SCREENSHOTS" />
          <SectionHead
            title="This is what your analysts see."
            sub="Real screenshots from a production deployment. Not mockups. Not Figma. Not 'coming soon.'"
          />
          <ScreenshotGallery />
        </div>
      </section>

      {/* Architecture */}
      <section style={{ padding: "40px 0 100px" }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 40 }}>
          <Divider label="02 · ARCHITECTURE" />
          <SectionHead
            title="Three layers. One closed loop."
            sub="Context feeds action. Action writes decisions. Decisions feed the feedback loop. The feedback loop rewrites the rules. Guidance bounds all of it."
          />
          <ArchitectureDiagram />
        </div>
      </section>

      {/* Feature inventory */}
      <section style={{ padding: "40px 0 100px" }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 40 }}>
          <Divider label="03 · WHAT SHIPS IN v4.8.5.1" />
          <SectionHead
            title="Every feature. On the box."
            sub="31 components across 6 domains. No Phase 2 marketing. No roadmap coupons. If it's in the datasheet, it's in the tarball."
          />
          <FeatureInventory />
        </div>
      </section>

      {/* Differentiators */}
      <section style={{ padding: "40px 0 100px", background: "var(--bg-1)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 40 }}>
          <Divider label="04 · WHAT OTHERS DON'T HAVE" />
          <SectionHead
            title="Six things most AI SOC platforms don't actually ship."
            sub="Graded by capability, not brand. The industry uses these words in datasheets. We ship them in the tarball."
          />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 0, border: "1px solid var(--line)", background: "var(--bg)" }}>
            {[
              ["AI-native triage",                "Core architecture - not a bolted-on copilot. Every alert gets reasoned context with behavioral anomaly signals."],
              ["Closed-loop detection engineering","AI proposes rule changes from triage outcomes. Auto-tunes per-rule confidence thresholds. Self-improving detection."],
              ["Natural-language SIEM queries",   "Full NL → OpenSearch → synthesis pipeline with source routing. Beyond KQL copilots."],
              ["CVE remediation with verify",     "From CVE to fix command to remote execution to 3× syscollector verification - in one flow."],
              ["Behavioral baseline anomalies",   "Z-score flags on every alert built into enrichment. Not a separate UBA bolt-on."],
              ["Rule-tuning auto-actions",        "Feedback loop automatically raises thresholds, baselines noisy rules, tracks effectiveness."],
            ].map((c, i) => (
              <div key={c[0]} style={{
                padding: 28,
                borderRight: i % 2 === 0 ? "1px solid var(--line-soft)" : "none",
                borderBottom: i < 4 ? "1px solid var(--line-soft)" : "none",
                display: "flex", flexDirection: "column", gap: 10,
              }}>
                <div style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
                  <Mono style={{ fontSize: 11, color: "var(--accent)" }}>{String(i + 1).padStart(2, "0")}</Mono>
                  <h3 className="serif" style={{ fontSize: 22, margin: 0, letterSpacing: "-0.01em" }}>{c[0]}</h3>
                </div>
                <p style={{ margin: 0, color: "var(--fg-mute)", fontSize: 14.5, lineHeight: 1.55, paddingLeft: 28 }}>{c[1]}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Tiers */}
      <section style={{ padding: "100px 0 40px" }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 40 }}>
          <Divider label="05 · LICENSING" />
          <SectionHead
            title="DHRUVA ships in three tiers. Plus partners."
            sub="Community free forever. Team where mid-market lands. Enterprise for mature orgs. MSSPs on a separate track. All self-hosted, all with unlimited agents."
          />
          <TierStrip />
          <div>
            <button className="btn" onClick={() => setPage("pricing")}>Full pricing → </button>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: "40px 0" }}>
        <div className="container">
          <div style={{
            border: "1px solid var(--line)", background: "var(--bg-1)",
            padding: "64px 48px",
            display: "grid", gridTemplateColumns: "1fr auto", gap: 40, alignItems: "center",
          }}>
            <div>
              <Label>START WHERE IT MAKES SENSE</Label>
              <h3 className="serif" style={{ fontSize: "clamp(34px, 4vw, 52px)", margin: "14px 0 10px", lineHeight: 1.05, letterSpacing: "-0.02em" }}>
                Download DHRUVA.<br/>
                <span style={{ color: "var(--fg-mute)", fontStyle: "italic" }}>Or book an expert.</span>
              </h3>
              <p style={{ color: "var(--fg-mute)", fontSize: 16, margin: 0, maxWidth: 560 }}>
                Community is free forever — self-host and start triaging today. If you'd rather have Prathamesh look at your Wazuh first, a Noise Teardown is $297 with a written one-pager in 24 hours.
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <button className="btn btn-primary" onClick={() => { window.__dlSource = "platform-bottom-cta"; setPage("download-community"); }}>Download Community →</button>
              <button className="btn" onClick={() => setPage("early-access")}>Book Teardown · $297</button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PlatformPage });