// cases.jsx - anonymized client results

const CASES = [
  {
    tag: "FINTECH · SERIES B · 220 HEADS",
    title: "Caught an attacker already testing production - in week six.",
    timeline: "2024 Q1 onboarding · still monitored",
    problem: "'Best-in-class' monitoring from an MSSP who forwarded alerts to an unread inbox. Okta logs never ingested. CloudTrail never normalized.",
    intervention: "Baselined identity behavior during the audit window. Noticed a service account making privileged API calls from a residential IP range at 04:00 UTC.",
    result: "Attacker contained within 40 minutes. Root cause: leaked PAT from a stale GitHub Action. Full forensics report delivered in 48h.",
    metrics: [
      ["$112k", "saved vs. enterprise SIEM, year one"],
      ["47d",   "attacker dwell time (pre-us)"],
      ["40m",   "time-to-containment (us)"],
    ],
  },
  {
    tag: "HEALTHTECH · SERIES A · 70 HEADS",
    title: "Went from SOC 2 Type I to Type II audit - no engineer hours burned.",
    timeline: "2024 Q3 onboarding · still monitored",
    problem: "Engineering leadership was spending 20+ hours / quarter producing evidence for the auditor. CEO wanted them shipping, not exporting CSVs.",
    intervention: "Stood up the evidence portal week two. Pre-wired every Trust Services Criterion control to a log stream. Auditor got read-only scoped access.",
    result: "Type II audit closed in 3 weeks. Zero engineering time pulled for evidence. Auditor's words: 'best packaged evidence we've seen this year.'",
    metrics: [
      ["0h",   "engineering time on audit evidence"],
      ["3wk",  "audit duration (typical: 10+)"],
      ["99.1%", "controls auto-evidenced"],
    ],
  },
  {
    tag: "DEVTOOLS · SERIES A · 45 HEADS",
    title: "Cut alert noise 99.4% in a single tuning sprint.",
    timeline: "2025 Q1 onboarding · still monitored",
    problem: "Founding engineer was on-call for security alerts. Getting ~4,000 alerts / day, acknowledging maybe 30, reading zero. Classic alert-fatigue kill zone.",
    intervention: "Five-week tuning window. Replaced vendor-default rule pack with detections shaped to their stack: GitHub, AWS, Cloudflare, Okta.",
    result: "Alert volume 4,000 → 24 / day. Signal-to-noise went from indistinguishable to actionable. Founding eng went back to shipping.",
    metrics: [
      ["4,000 → 24", "daily alerts"],
      ["99.4%", "noise reduction"],
      ["0",     "security pages to founding eng since"],
    ],
  },
];

function CaseCard({ c, i }) {
  return (
    <div style={{
      border: "1px solid var(--line)",
      padding: 0,
      display: "grid",
      gridTemplateColumns: "1fr 1.3fr",
    }}>
      <div style={{ padding: 40, borderRight: "1px solid var(--line-soft)", display: "flex", flexDirection: "column", gap: 24 }}>
        <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
          <Mono style={{ fontSize: 12, color: "var(--fg-dim)" }}>CASE · {String(i + 1).padStart(2, "0")}</Mono>
          <span style={{ flex: 1, height: 1, background: "var(--line)" }} />
        </div>
        <Label>{c.tag}</Label>
        <h3 className="serif" style={{ fontSize: 30, margin: 0, lineHeight: 1.15, letterSpacing: "-0.015em", textWrap: "pretty" }}>
          {c.title}
        </h3>
        <Mono style={{ fontSize: 11, color: "var(--fg-dim)", marginTop: "auto" }}>{c.timeline}</Mono>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, paddingTop: 16, borderTop: "1px solid var(--line-soft)" }}>
          {c.metrics.map(([v, l], j) => (
            <div key={j}>
              <span className="serif" style={{ fontSize: 26, color: "var(--accent)", letterSpacing: "-0.015em", display: "block" }}>{v}</span>
              <Mono style={{ fontSize: 10, color: "var(--fg-dim)", letterSpacing: "0.08em", lineHeight: 1.4, textTransform: "uppercase" }}>{l}</Mono>
            </div>
          ))}
        </div>
      </div>
      <div style={{ padding: 40, display: "flex", flexDirection: "column", gap: 24 }}>
        <CaseBlock label="THE PROBLEM"     body={c.problem} />
        <CaseBlock label="INTERVENTION"    body={c.intervention} />
        <CaseBlock label="RESULT" accent    body={c.result} />
      </div>
    </div>
  );
}

const CaseBlock = ({ label, body, accent }) => (
  <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <Diamond color={accent ? "var(--accent)" : "var(--fg-dim)"} />
      <Label color={accent ? "var(--accent)" : "var(--fg-dim)"}>{label}</Label>
    </div>
    <p style={{ margin: 0, color: accent ? "var(--fg)" : "var(--fg-mute)", fontSize: 14.5, lineHeight: 1.6 }}>
      {body}
    </p>
  </div>
);

function CasesPage({ setPage }) {
  return (
    <div className="page">
      <section style={{ padding: "80px 0 40px" }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 32, maxWidth: 900 }}>
          <Label>CLIENT RESULTS · ANONYMIZED PER NDA · REAL NUMBERS</Label>
          <h1 className="serif" style={{ fontSize: "clamp(52px, 6.5vw, 104px)", margin: 0, lineHeight: 0.98, letterSpacing: "-0.025em" }}>
            Receipts.<br/>
            <span style={{ color: "var(--fg-mute)", fontStyle: "italic" }}>Not testimonials.</span>
          </h1>
          <p style={{ fontSize: 18, color: "var(--fg-mute)", margin: 0, maxWidth: 620, lineHeight: 1.55 }}>
            The names are redacted because they asked. The numbers are real because we won't let them not be.
          </p>
        </div>
      </section>

      <section style={{ padding: "40px 0" }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 24 }}>
          {CASES.map((c, i) => <CaseCard key={i} c={c} i={i} />)}
        </div>
      </section>

      <section style={{ padding: "60px 0 20px" }}>
        <div className="container">
          <div style={{ border: "1px dashed var(--line)", padding: "40px 48px", textAlign: "center" }}>
            <Label>ALSO ON THE ROSTER · UNDER NDA</Label>
            <p className="serif" style={{ fontSize: 24, color: "var(--fg-mute)", margin: "16px 0 0", fontStyle: "italic" }}>
              A Series C logistics platform. A Series B proptech. An AI-infrastructure seed. Three edtech companies.
              We'll name them once they let us.
            </p>
          </div>
        </div>
      </section>

      <section style={{ padding: "60px 0 80px" }}>
        <div className="container">
          <div style={{
            border: "1px solid var(--line)",
            background: "var(--bg-1)",
            padding: "60px 48px",
            display: "grid", gridTemplateColumns: "1fr auto", gap: 40, alignItems: "center",
          }}>
            <div>
              <Label>WANT YOUR OWN CASE?</Label>
              <h3 className="serif" style={{ fontSize: "clamp(32px, 4vw, 48px)", margin: "14px 0 12px", lineHeight: 1.05, letterSpacing: "-0.02em" }}>
                Three paths to start.<br/>
                <span style={{ color: "var(--fg-mute)", fontStyle: "italic" }}>Pick the one that fits.</span>
              </h3>
              <p style={{ color: "var(--fg-mute)", fontSize: 16, margin: 0, maxWidth: 560, lineHeight: 1.6 }}>
                Self-deploy Community for free. Book a $297 Noise Teardown if you want expert eyes on your Wazuh first. Or talk to us about SOC Setup if you don't have Wazuh yet.
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <button className="btn btn-primary" onClick={() => { window.__dlSource = "cases-bottom"; setPage("download-community"); }}>Download Community →</button>
              <button className="btn" onClick={() => setPage("services")}>SOC Setup · ₹3L</button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { CasesPage });