// pricing.jsx - platform-first pricing page
// Three tiers (Community / Team / Enterprise), full feature matrix,
// SOC Setup as a secondary service, FAQ. Published pricing, no "contact sales" wall.

/* ---------- Tier cards — full detail (richer than home) ---------- */
function PricingTierCards({ setPage }) {
  const tiers = [
    {
      key: "community",
      name: "Community",
      eyebrow: "FREE · SELF-HOSTED",
      price: "Free",
      unit: "forever",
      altPrice: null,
      tagline: "Start without a conversation.",
      description: "The core platform, self-hosted on your infrastructure. No form, no sales call, no time limit. Run it, see if it's for you.",
      whoItsFor: "Evaluators · small teams · hobbyists · researchers",
      features: [
        "AI alert triage with confidence scoring (92%+)",
        "Asset · identity · historical · time-context enrichment",
        "Composite risk scoring",
        "Incident lifecycle + severity + analyst notes",
        "MITRE ATT&CK coverage heatmap + gap analysis",
        "7 free TI feeds (ThreatFox · URLhaus · Feodo · MalwareBazaar · CISA KEV · EPSS · OpenPhish)",
        "LLM prompt anonymization",
        "Knowledge base with full-text search",
        "JWT auth · 2 roles (analyst, read-only)",
        "Overview · Triage · Incidents · Closed Loop dashboards",
        "5 users · unlimited agents · unlimited alerts",
      ],
      cta: "Download Community →",
      target: "download-community",
      formSource: "pricing-community-tier",
      featured: false,
    },
    {
      key: "team",
      name: "Team",
      eyebrow: "DEFAULT · FOR MID-MARKET",
      price: "$999",
      unit: "/month",
      altPrice: "₹83,000/mo · or $9,990 annual (save 2 months)",
      tagline: "Your Wazuh, but actually working.",
      description: "Everything in Community, plus the ops layer: rule tuning, natural-language investigation, Slack + ticketing integration, full reporting. For internal security teams.",
      whoItsFor: "Security teams at 50-250 person orgs · running their own SOC",
      features: [
        "Everything in Community",
        "Detection Agent — AI-generated rule tuning proposals, XML diff review, Sigma import",
        "Natural Language SIEM queries (Query Agent)",
        "Feedback loop — FP pattern detection, auto-tune (opt-in)",
        "Notifications — Slack + Email for incidents, escalations, SLA breaches",
        "Ticketing integration — Jira, ServiceNow, PagerDuty (bi-directional sync)",
        "Reporting — daily/weekly/monthly PDF + HTML with email distribution",
        "4 roles + full audit logging",
        "Pipeline health — log source heartbeats, EPS anomaly, data gap alerts",
        "All 14 dashboard tabs · Daily Review · Admin",
        "1 Tier-2 TI feed of your choice (AbuseIPDB / OTX / VirusTotal / MISP)",
        "25 users · unlimited agents · unlimited alerts",
      ],
      cta: "Start Team trial →",
      target: "early-access",
      featured: true,
    },
    {
      key: "enterprise",
      name: "Enterprise",
      eyebrow: "FOR MATURE ORGS · ANNUAL",
      price: "$2,999",
      unit: "/mo · annual",
      altPrice: "₹2,50,000/mo · starting · custom quotes for scale",
      tagline: "Full autonomous SOC.",
      description: "Everything in Team, plus proactive hunting, automated response, compliance automation, SSO, multi-BU isolation. For mature security programs.",
      whoItsFor: "Organizations 500+ people · formal security program · compliance audits",
      features: [
        "Everything in Team",
        "Threat Hunt Agent — hypothesis-driven hunting from MITRE gaps",
        "Active Response — 9 actions (block IP, isolate host, kill process, disable user, quarantine file, etc.)",
        "SOAR — 6 automated playbooks (ransomware · C2 · phishing · exfil · credential · brute force)",
        "Vulnerability Mgmt + remediation — CVE summary, per-agent vulns, remote execution",
        "Compliance frameworks — CIS · PCI · HIPAA · NIST · ISO mapping + SCA policy engine",
        "Advanced metrics — MTTD / MTTR / MTTA · analyst performance · SLA tracking",
        "Shift management — handoff reports · shift-based SLA",
        "Full Tier-2 TI feeds — AbuseIPDB · OTX · VirusTotal · MISP",
        "Multi-tenancy — org-level isolation (dev/staging/prod, BUs, subsidiaries)",
        "SSO / SAML authentication",
        "Data governance — ILM retention policies (hot/warm/cold/delete)",
        "Fernet envelope encryption for all secrets",
        "Webhook ingestion with HMAC validation",
        "Upgrade system with DB backup + rollback",
        "Dedicated support with SLA",
        "Unlimited users · agents · alerts · tenants",
      ],
      cta: "Talk to us →",
      target: "contact",
      featured: false,
    },
  ];

  // Tier tone differentiation — Community austere, Team featured copper, Enterprise premium cool
  const toneFor = (t) => {
    if (t.featured) return { bg: "var(--bg-1)", accent: "var(--accent)" };
    if (t.key === "community")  return { bg: "oklch(0.22 0.04 200)", accent: "var(--fg-dim)" };
    if (t.key === "enterprise") return { bg: "oklch(0.28 0.04 200)", accent: "var(--accent-2)" };
    return { bg: "transparent", accent: "var(--fg-dim)" };
  };

  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", border: "1px solid var(--line)", position: "relative" }}>
      {tiers.map((t, i) => {
        const tone = toneFor(t);
        return (
        <div key={t.key} style={{
          padding: 36,
          paddingTop: t.featured ? 38 : 36,
          borderRight: i < 2 ? "1px solid var(--line-soft)" : "none",
          background: tone.bg,
          display: "flex", flexDirection: "column", gap: 18,
          position: "relative",
          borderTop: t.featured ? "2px solid var(--accent)" : "none",
          marginTop: t.featured ? -2 : 0,
        }}>
          {t.featured && (
            <div style={{
              position: "absolute", top: -12, left: "50%", transform: "translateX(-50%)",
              background: "var(--bg)", padding: "2px 14px",
              border: "1px solid var(--accent)",
            }}>
              <Mono style={{ fontSize: 10, color: "var(--accent)", letterSpacing: "0.16em" }}>
                ◆ DEFAULT
              </Mono>
            </div>
          )}

          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <Diamond color={tone.accent} />
            <Mono style={{ fontSize: 11, color: "var(--fg-dim)", letterSpacing: "0.14em" }}>
              {t.eyebrow}
            </Mono>
          </div>

          <h3 className="serif" style={{
            fontSize: 42, margin: 0, lineHeight: 1,
            letterSpacing: "-0.02em",
          }}>
            {t.name}
          </h3>

          <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
            <span className="serif" style={{
              fontSize: 54, lineHeight: 1, letterSpacing: "-0.02em",
              color: t.featured ? "var(--accent)" : (t.key === "enterprise" ? "var(--accent-2)" : "var(--fg)"),
            }}>
              {t.price}
            </span>
            <Mono style={{ fontSize: 13, color: "var(--fg-dim)" }}>{t.unit}</Mono>
          </div>
          {t.altPrice && (
            <Mono style={{ fontSize: 11, color: "var(--fg-dim)", marginTop: -8, lineHeight: 1.5 }}>{t.altPrice}</Mono>
          )}

          <p className="serif" style={{
            fontSize: 22, margin: "4px 0 0",
            fontStyle: "italic", color: "var(--fg-mute)", lineHeight: 1.35,
          }}>
            {t.tagline}
          </p>

          <p style={{ margin: 0, fontSize: 14, color: "var(--fg-mute)", lineHeight: 1.6 }}>
            {t.description}
          </p>

          <div style={{
            padding: "12px 14px",
            background: "var(--bg-2)",
            border: "1px solid var(--line-soft)",
            marginTop: 4,
          }}>
            <Mono style={{ fontSize: 10, color: "var(--fg-dim)", letterSpacing: "0.12em", display: "block", marginBottom: 4 }}>
              WHO IT'S FOR
            </Mono>
            <span style={{ fontSize: 13, color: "var(--fg-mute)" }}>{t.whoItsFor}</span>
          </div>

          <div style={{ height: 1, background: "var(--line-soft)", margin: "4px 0" }} />

          <div style={{ display: "flex", flexDirection: "column", gap: 10, flex: 1 }}>
            {t.features.map((f, j) => (
              <div key={j} style={{ display: "grid", gridTemplateColumns: "16px 1fr", gap: 10, alignItems: "baseline" }}>
                <Mono style={{ fontSize: 11, color: tone.accent }}>▸</Mono>
                <span style={{ fontSize: 13, color: "var(--fg)", lineHeight: 1.55 }}>{f}</span>
              </div>
            ))}
          </div>

          <button
            className={t.featured ? "btn btn-primary" : "btn"}
            onClick={() => { if (t.formSource) window.__dlSource = t.formSource; setPage(t.target); }}
            style={{ justifyContent: "center", marginTop: 12 }}
          >
            {t.cta}
          </button>
        </div>
        );
      })}
    </div>
  );
}

/* ---------- Annual prepay banner ---------- */
function AnnualBanner() {
  return (
    <div style={{
      border: "1px solid var(--accent)",
      background: "oklch(0.82 0.17 45 / 0.05)",
      padding: "24px 32px",
      display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 24, alignItems: "center",
    }}>
      <Mono style={{ fontSize: 11, color: "var(--accent)", letterSpacing: "0.14em" }}>
        ◆ ANNUAL PREPAY
      </Mono>
      <span className="serif" style={{ fontSize: 22, color: "var(--fg)", fontStyle: "italic", letterSpacing: "-0.005em" }}>
        Pay annual · get two months free.
      </span>
      <Mono style={{ fontSize: 12, color: "var(--fg-mute)" }}>
        Team annual: <span style={{ color: "var(--fg)" }}>$9,990/yr</span> (saves $2,010) · Enterprise: annual-only
      </Mono>
    </div>
  );
}

/* ---------- Full feature matrix ---------- */
function FeatureMatrix() {
  const groups = [
    {
      name: "CORE TRIAGE",
      rows: [
        ["AI alert triage (92%+ confidence)", 1, 1, 1],
        ["Asset · identity · historical enrichment", 1, 1, 1],
        ["Composite risk scoring", 1, 1, 1],
        ["Incident lifecycle + analyst notes", 1, 1, 1],
        ["MITRE ATT&CK heatmap + gap analysis", 1, 1, 1],
        ["LLM prompt anonymization", 1, 1, 1],
        ["Knowledge base + full-text search", 1, 1, 1],
      ],
    },
    {
      name: "DETECTION + INVESTIGATION",
      rows: [
        ["Detection Agent (rule tuning proposals)", 0, 1, 1],
        ["Natural language SIEM queries", 0, 1, 1],
        ["Feedback loop auto-tune", 0, 1, 1],
        ["Sigma rule import", 0, 1, 1],
        ["Threat Hunt Agent (hypothesis-driven)", 0, 0, 1],
      ],
    },
    {
      name: "RESPONSE + AUTOMATION",
      rows: [
        ["Active Response (9 actions)", 0, 0, 1],
        ["SOAR playbooks (6 automated)", 0, 0, 1],
        ["Vulnerability Mgmt + remediation", 0, 0, 1],
        ["Approval workflow + rollback", 0, 0, 1],
      ],
    },
    {
      name: "COMPLIANCE + GOVERNANCE",
      rows: [
        ["Compliance frameworks (CIS/PCI/HIPAA)", 0, 0, 1],
        ["Compliance matrix (NIST/ISO mapping)", 0, 0, 1],
        ["Data governance + ILM retention", 0, 0, 1],
        ["Fernet envelope encryption", 0, 0, 1],
      ],
    },
    {
      name: "INTEGRATIONS + OPS",
      rows: [
        ["Slack + Email notifications", 0, 1, 1],
        ["Jira · ServiceNow · PagerDuty", 0, 1, 1],
        ["Reporting (PDF/HTML, scheduled)", 0, 1, 1],
        ["Shift management + handoffs", 0, 0, 1],
        ["Advanced metrics (MTTD/MTTR/SLA)", 0, 0, 1],
        ["Pipeline health monitoring", 0, 1, 1],
        ["Webhook ingestion (HMAC)", 0, 0, 1],
      ],
    },
    {
      name: "THREAT INTEL",
      rows: [
        ["7 free TI feeds (Tier-1)", 1, 1, 1],
        ["1 Tier-2 feed of your choice", 0, 1, 0],
        ["All Tier-2 feeds (AbuseIPDB · OTX · VT · MISP)", 0, 0, 1],
      ],
    },
    {
      name: "AUTH + MULTI-TENANCY",
      rows: [
        ["JWT + 2 roles (analyst · read-only)", 1, 0, 0],
        ["4 roles + full audit logging", 0, 1, 1],
        ["SSO / SAML", 0, 0, 1],
        ["Multi-tenancy (org-level isolation)", 0, 0, 1],
      ],
    },
    {
      name: "LIMITS",
      rows: [
        ["Users", "5", "25", "Unlimited"],
        ["Agents", "Unlimited", "Unlimited", "Unlimited"],
        ["Alerts / day", "Unlimited", "Unlimited", "Unlimited"],
        ["Support", "Community", "Email · 1 biz day", "Dedicated · SLA"],
      ],
    },
  ];

  const Cell = ({ v, tier }) => {
    if (v === 1) return <span style={{ color: tier === 1 ? "var(--accent)" : "var(--accent-2)", fontSize: 16 }}>✓</span>;
    if (v === 0) return <span style={{ color: "var(--fg-dim)", fontSize: 14 }}>—</span>;
    return <span style={{ fontSize: 13, color: "var(--fg)" }}>{v}</span>;
  };

  return (
    <div style={{ border: "1px solid var(--line)", overflow: "hidden" }}>
      {/* Header */}
      <div style={{
        display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr",
        background: "var(--bg-2)", borderBottom: "1px solid var(--line)",
      }}>
        <div style={{ padding: "16px 20px" }}>
          <Label>FEATURE</Label>
        </div>
        {["Community", "Team", "Enterprise"].map((name, i) => (
          <div key={name} style={{
            padding: "16px 20px",
            textAlign: "center",
            borderLeft: "1px solid var(--line-soft)",
            background: i === 1 ? "var(--bg-1)" : "transparent",
          }}>
            <Mono style={{
              fontSize: 11, letterSpacing: "0.14em",
              color: i === 1 ? "var(--accent)" : "var(--fg-dim)",
            }}>
              {name.toUpperCase()}
            </Mono>
          </div>
        ))}
      </div>

      {groups.map((g, gi) => (
        <React.Fragment key={g.name}>
          {/* Group header */}
          <div style={{
            display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr",
            background: "var(--bg-2)",
            borderTop: gi > 0 ? "1px solid var(--line)" : "none",
          }}>
            <div style={{ padding: "12px 20px", gridColumn: "1 / -1" }}>
              <Mono style={{ fontSize: 10, color: "var(--accent)", letterSpacing: "0.16em" }}>
                ◆ {g.name}
              </Mono>
            </div>
          </div>
          {/* Rows */}
          {g.rows.map((row, ri) => (
            <div key={row[0]} style={{
              display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr",
              borderTop: "1px solid var(--line-soft)",
            }}>
              <div style={{ padding: "14px 20px", fontSize: 13.5, color: "var(--fg)", lineHeight: 1.5 }}>
                {row[0]}
              </div>
              {[row[1], row[2], row[3]].map((v, ci) => (
                <div key={ci} style={{
                  padding: "14px 20px",
                  textAlign: "center",
                  borderLeft: "1px solid var(--line-soft)",
                  background: ci === 1 ? "var(--bg-1)" : "transparent",
                }}>
                  <Cell v={v} tier={ci} />
                </div>
              ))}
            </div>
          ))}
        </React.Fragment>
      ))}
    </div>
  );
}

/* ---------- Competitor pricing callout ---------- */
function CompetitorCallout() {
  const competitors = [
    { n: "Enterprise AI SOC platforms",       p: "$60,000+",    t: "/year · starting" },
    { n: "Commercial SIEM + SOAR bundles",    p: "$120,000+",   t: "/year · typical" },
    { n: "Cloud-native SIEM + XDR suites",    p: "$50,000+",    t: "/year · comparable features" },
    { n: "Mid-market SIEM with basic AI",     p: "$24,000+",    t: "/year · SIEM-only" },
    { n: "Managed endpoint detection · MDR",  p: "$45+",        t: "per endpoint/mo · managed" },
  ];
  return (
    <div style={{
      border: "1px solid var(--line)",
      background: "var(--bg-1)",
      padding: 40,
    }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 48 }}>
        <div>
          <Label>WHAT YOU'D PAY ELSEWHERE</Label>
          <h3 className="serif" style={{
            fontSize: 36, margin: "18px 0 20px",
            lineHeight: 1.1, letterSpacing: "-0.015em",
          }}>
            Team is $9,990/year.<br/>
            <span style={{ color: "var(--fg-mute)", fontStyle: "italic" }}>Here's what the alternatives cost.</span>
          </h3>
          <p style={{ margin: 0, color: "var(--fg-mute)", fontSize: 15, lineHeight: 1.6 }}>
            Typical pricing for commercial AI SOC platforms with comparable features. Most hide exact numbers behind "Contact sales." These ranges come from what companies we talk to report paying. Their data goes to someone else's cloud. Yours stays home.
          </p>
        </div>
        <div style={{ border: "1px solid var(--line-soft)" }}>
          {competitors.map((c, i) => (
            <div key={c.n} style={{
              display: "grid", gridTemplateColumns: "1.4fr 1fr",
              padding: "14px 20px",
              borderBottom: i < competitors.length - 1 ? "1px solid var(--line-soft)" : "none",
              alignItems: "center",
            }}>
              <span style={{ fontSize: 14, color: "var(--fg-mute)" }}>{c.n}</span>
              <div style={{ textAlign: "right" }}>
                <span className="serif" style={{ fontSize: 20, color: "var(--fg)", letterSpacing: "-0.01em" }}>{c.p}</span>
                <Mono style={{ fontSize: 10, color: "var(--fg-dim)", display: "block", marginTop: 2 }}>{c.t}</Mono>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---------- SOC Setup as secondary service ---------- */
function SOCSetupBlock({ setPage }) {
  return (
    <div style={{
      border: "1px solid var(--line)",
      display: "grid", gridTemplateColumns: "1fr 1.4fr",
    }}>
      <div style={{ padding: 40, borderRight: "1px solid var(--line-soft)" }}>
        <Label>ALSO OFFERED · NO WAZUH YET?</Label>
        <h3 className="serif" style={{ fontSize: 36, margin: "18px 0 18px", lineHeight: 1.05, letterSpacing: "-0.02em" }}>
          SOC Setup
        </h3>
        <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 20 }}>
          <span className="serif" style={{ fontSize: 38, color: "var(--accent)", letterSpacing: "-0.02em" }}>$3,299</span>
          <Mono style={{ fontSize: 12, color: "var(--fg-dim)" }}>starting · one-time · ~5 weeks</Mono>
        </div>
        <p style={{ margin: 0, color: "var(--fg-mute)", fontSize: 14.5, lineHeight: 1.6 }}>
          Complete Wazuh SIEM deployment for teams that don't have one yet. Final price depends on stack complexity, log sources, and integrations required.
        </p>
        <button className="btn" onClick={() => setPage("services")} style={{ marginTop: 28, alignSelf: "flex-start" }}>
          See what's included →
        </button>
      </div>
      <div style={{ padding: 40, display: "flex", flexDirection: "column", gap: 14 }}>
        <Mono style={{ fontSize: 11, color: "var(--fg-dim)", letterSpacing: "0.12em", marginBottom: 6 }}>
          WHAT'S INCLUDED
        </Mono>
        {[
          "Complete Wazuh SIEM deployment (server · indexer · dashboard)",
          "Log source mapping across all your endpoints",
          "Custom decoders for your stack (AWS · Okta · GitHub · whatever)",
          "Alert rule configuration tuned to your environment",
          "Compliance evidence framework (SOC 2 · ISO · HIPAA · DPDP)",
          "Dashboard setup · team training · full handoff",
          "Platform Community tier installed on top, ready to upgrade",
        ].map((f, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "16px 1fr", gap: 10, alignItems: "baseline" }}>
            <Mono style={{ fontSize: 11, color: "var(--accent)" }}>▸</Mono>
            <span style={{ fontSize: 14, color: "var(--fg)", lineHeight: 1.55 }}>{f}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- FAQ ---------- */
function PricingFAQ() {
  const qa = [
    {
      q: "Does Community ever expire?",
      a: "No. Community is free forever with no trial limits. The only things it lacks are the ops features in Team (rule tuning, NL queries, SOAR, etc.). Run it indefinitely if that's all you need.",
    },
    {
      q: "Can I run the Team tier on my existing Wazuh?",
      a: "Yes. All three tiers are self-hosted on your Wazuh. No migration, no vendor lock-in. If you leave, the keys come with you.",
    },
    {
      q: "Is there a trial for Team?",
      a: "Community IS the trial. It's the same platform with the core triage engine — you evaluate that first, then upgrade when you need rule tuning, hunting, or automated response. If you want hands-on help, a Noise Teardown is $297 and credits toward your first month.",
    },
    {
      q: "Why is Enterprise annual-only?",
      a: "Enterprise customers procure annually anyway, and annual contracts reduce churn risk on our side. If you need monthly for a specific reason, talk to us — we're flexible but default to annual.",
    },
    {
      q: "Can I upgrade or downgrade mid-contract?",
      a: "Upgrade anytime, credited prorated. Downgrade at renewal. If you're on annual and your org changes scope significantly, we'll work with you.",
    },
    {
      q: "What about MSSP / white-label pricing?",
      a: "Separate conversation. Partners get a revenue-share model with multi-tenant licensing, custom branding, and deployment support. Contact us directly.",
    },
    {
      q: "What if I need help deploying?",
      a: "Two options. Noise Teardown ($297) — 60-minute live review of your setup with a written one-pager. Guided Pilot ($1,500) — we deploy Team-tier features on your Wazuh in 14 days, credited toward annual. Or skip both and self-deploy Community for free.",
    },
    {
      q: "What's the status of Managed SOC retainer?",
      a: "No longer sold publicly. Existing clients grandfathered until they choose to move. The platform is our primary offering going forward.",
    },
  ];

  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, border: "1px solid var(--line)" }}>
      {qa.map((item, i) => (
        <div key={i} style={{
          padding: 32,
          borderRight: i % 2 === 0 ? "1px solid var(--line-soft)" : "none",
          borderBottom: i < qa.length - 2 ? "1px solid var(--line-soft)" : "none",
          display: "flex", flexDirection: "column", gap: 12,
        }}>
          <h4 className="serif" style={{
            fontSize: 20, margin: 0, lineHeight: 1.25,
            letterSpacing: "-0.01em",
          }}>
            {item.q}
          </h4>
          <p style={{ margin: 0, color: "var(--fg-mute)", fontSize: 14, lineHeight: 1.65 }}>
            {item.a}
          </p>
        </div>
      ))}
    </div>
  );
}

/* ---------- Final CTA ---------- */
function PricingCTA({ setPage }) {
  return (
    <div style={{
      border: "1px solid var(--line)",
      padding: "60px 48px",
      background: "var(--bg-1)",
      textAlign: "center",
    }}>
      <Label>READY WHEN YOU ARE</Label>
      <h3 className="serif" style={{
        fontSize: "clamp(32px, 3.5vw, 48px)",
        margin: "18px 0 16px", lineHeight: 1.05, letterSpacing: "-0.02em",
      }}>
        Three paths. Pick one.
      </h3>
      <p style={{ color: "var(--fg-mute)", fontSize: 15.5, margin: "0 auto 32px", maxWidth: 620, lineHeight: 1.6 }}>
        Free download · start trial · or book a call. No pitch decks, no qualification forms, no "we'll circle back."
      </p>
      <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
        <button className="btn" onClick={() => { window.__dlSource = "pricing-cta-secondary"; setPage("download-community"); }}>
          Download Community →
        </button>
        <button className="btn btn-primary" onClick={() => setPage("early-access")}>
          Start Team trial →
        </button>
        <button className="btn" onClick={() => setPage("contact")}>
          Enterprise · Talk to us →
        </button>
      </div>
    </div>
  );
}

/* ---------- Pricing page ---------- */
function PricingPage({ setPage }) {
  return (
    <div className="page">
      {/* Hero - preserving the original "No pitch. Just numbers." */}
      <section style={{ padding: "80px 0 40px" }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 32, maxWidth: 900 }}>
          <Label>DHRUVA · PRICING · NO "CONTACT SALES" WALL</Label>
          <h1 className="serif" style={{ fontSize: "clamp(52px, 6.5vw, 104px)", margin: 0, lineHeight: 0.98, letterSpacing: "-0.025em" }}>
            No pitch.<br/>
            <span style={{ color: "var(--fg-mute)", fontStyle: "italic" }}>Just numbers.</span>
          </h1>
          <p style={{ fontSize: 18, color: "var(--fg-mute)", margin: 0, maxWidth: 620, lineHeight: 1.55 }}>
            DHRUVA ships in three tiers. Self-hosted, every one of them. No agent limits, no alert quotas. Community is free forever. Team is where most security teams land. Enterprise is for mature programs.
          </p>
        </div>
      </section>

      {/* Tier cards */}
      <section style={{ padding: "40px 0 20px" }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 32 }}>
          <PricingTierCards setPage={setPage} />
          <AnnualBanner />
        </div>
      </section>

      {/* Competitor pricing */}
      <section style={{ padding: "60px 0" }}>
        <div className="container">
          <CompetitorCallout />
        </div>
      </section>

      {/* Full feature matrix */}
      <section style={{ padding: "40px 0" }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 40 }}>
          <Divider label="FULL FEATURE MATRIX" />
          <SectionHead
            title="Every feature. Every tier. No surprises."
            sub="What's included, what isn't. If a feature's not on the list, it's probably on the roadmap — talk to us."
          />
          <FeatureMatrix />
        </div>
      </section>

      {/* SOC Setup secondary */}
      <section style={{ padding: "60px 0" }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 40 }}>
          <Divider label="NO WAZUH YET?" />
          <SOCSetupBlock setPage={setPage} />
        </div>
      </section>

      {/* FAQ */}
      <section style={{ padding: "60px 0" }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 40 }}>
          <Divider label="HONEST ANSWERS" />
          <SectionHead
            title="Questions people actually ask."
            sub="The ones that matter. Answered before you book a call, so we skip the small-talk round."
          />
          <PricingFAQ />
        </div>
      </section>

      {/* Final CTA */}
      <section style={{ padding: "40px 0 80px" }}>
        <div className="container">
          <PricingCTA setPage={setPage} />
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PricingPage });
