// home.jsx - home page composition
// PLATFORM-FIRST rebuild around AI SOC Platform (Community / Team / Enterprise).
// Managed SOC no longer sold publicly; SOC Setup, Noise Teardown, and Partners live in "Other paths" section.

/* ---------- Tier Ladder — the business in one block ---------- */
function TierLadder({ setPage }) {
  const tiers = [
    {
      key: "community",
      name: "Community",
      eyebrow: "FREE · SELF-HOSTED",
      price: "Free",
      unit: "forever",
      altPrice: null,
      tagline: "AI triage on your Wazuh. No limits.",
      description: "Self-host the core platform. Alert triage with confidence scoring, full enrichment, incident lifecycle, MITRE coverage. Start without talking to us.",
      features: [
        "AI alert triage (92%+ confidence)",
        "Asset · identity · historical enrichment",
        "Incident lifecycle + MITRE heatmap",
        "7 free TI feeds built in",
        "5 users · unlimited agents",
      ],
      cta: "Download Community →",
      target: "download-community",
      formSource: "home-pricing-community",
      featured: false,
    },
    {
      key: "team",
      name: "Team",
      eyebrow: "DEFAULT · FOR MID-MARKET",
      price: "$999",
      unit: "/month",
      altPrice: "₹83K/mo · or $9,990 annual",
      tagline: "Your Wazuh, but actually working.",
      description: "Everything in Community, plus AI rule tuning, natural-language investigation, Slack and ticketing integration, full reporting. For internal security teams.",
      features: [
        "Detection Agent (rule tuning proposals)",
        "Natural language SIEM queries",
        "Feedback loop + auto-tune",
        "Slack · Jira · ServiceNow · PagerDuty",
        "All 14 dashboard tabs + reporting",
        "1 Tier-2 TI feed included",
        "25 users · unlimited agents",
      ],
      cta: "Start Team trial →",
      target: "early-access",
      featured: true,
    },
    {
      key: "enterprise",
      name: "Enterprise",
      eyebrow: "FOR MATURE ORGS",
      price: "$2,999",
      unit: "/mo · annual",
      altPrice: "₹2.5L/mo · custom quotes",
      tagline: "Full autonomous SOC.",
      description: "Everything in Team, plus threat hunting, automated response, SOAR playbooks, compliance automation, SSO, multi-BU isolation. For mature security programs.",
      features: [
        "Threat Hunt Agent (hypothesis-driven)",
        "9 Active Response actions",
        "6 SOAR playbooks (ransomware · C2 · exfil)",
        "Vulnerability Mgmt + remediation",
        "Compliance matrix (NIST · ISO · PCI · HIPAA)",
        "SSO / SAML · multi-tenancy · audit trails",
        "Dedicated support with SLA",
        "Unlimited users + agents",
      ],
      cta: "Talk to us →",
      target: "contact",
      featured: false,
    },
  ];

  // Tier tone differentiation — each tier gets its own bg + accent mood
  const toneFor = (t) => {
    if (t.featured) return { bg: "var(--bg-1)", accent: "var(--accent)", badge: "◆ DEFAULT" };
    if (t.key === "community")  return { bg: "oklch(0.22 0.04 200)", accent: "var(--fg-dim)", badge: null };
    if (t.key === "enterprise") return { bg: "oklch(0.28 0.04 200)", accent: "var(--accent-2)", badge: null };
    return { bg: "transparent", accent: "var(--fg-dim)", badge: null };
  };

  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: 32,
          paddingTop: t.featured ? 34 : 32,
          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: 40, margin: 0, lineHeight: 1,
            letterSpacing: "-0.02em",
          }}>
            {t.name}
          </h3>

          <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
            <span className="serif" style={{
              fontSize: 52, 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: -10 }}>{t.altPrice}</Mono>
          )}

          <p className="serif" style={{
            fontSize: 20, 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={{ 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.5, 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>
  );
}

/* ---------- Transformation — Monday before / Monday after ---------- */
function Transformation() {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", border: "1px solid var(--line)" }}>
      <div style={{ padding: 40, borderRight: "1px solid var(--line-soft)" }}>
        <Label>BEFORE · MONDAY 09:00</Label>
        <h3 className="serif" style={{
          fontSize: 30, margin: "20px 0 18px",
          lineHeight: 1.2, letterSpacing: "-0.015em",
          color: "var(--fg-mute)",
        }}>
          Open console. Start filtering.
        </h3>
        <p style={{ margin: 0, color: "var(--fg-mute)", fontSize: 15, lineHeight: 1.7 }}>
          Eighty percent of last night's alerts are noise. Wazuh rules that have never been tuned to your environment. Your IT lead starts triaging, knowing most of it won't matter.
        </p>
        <p style={{ margin: "14px 0 0", color: "var(--fg-mute)", fontSize: 15, lineHeight: 1.7 }}>
          By 11 a.m. they've closed dozens of false positives and found nothing real. They still have four other jobs today. Security slips to tonight. Or tomorrow. Or not at all.
        </p>
        <div style={{ marginTop: 28, paddingTop: 20, borderTop: "1px solid var(--line-soft)", display: "flex", flexDirection: "column", gap: 6 }}>
          <Mono style={{ fontSize: 11, color: "var(--fg-dim)" }}>time absorbed: <span style={{ color: "var(--fg)" }}>~8 hrs/week</span></Mono>
          <Mono style={{ fontSize: 11, color: "var(--fg-dim)" }}>real threats surfaced: <span style={{ color: "var(--fg)" }}>unknown</span></Mono>
        </div>
      </div>

      <div style={{ padding: 40, background: "#F5EFDC", position: "relative", color: "#0E2A36" }}>
        <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 2, background: "var(--accent)" }} />
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <Mono style={{ fontSize: 11, color: "#8A5A2B", letterSpacing: "0.14em" }}>AFTER · DAY 14</Mono>
        </div>
        <h3 className="serif" style={{
          fontSize: 30, margin: "20px 0 18px",
          lineHeight: 1.2, letterSpacing: "-0.015em",
          color: "#0E2A36",
        }}>
          Open daily review. Five items.
        </h3>
        <p style={{ margin: 0, color: "#2A3842", fontSize: 15, lineHeight: 1.7 }}>
          Five events flagged for attention. Three are compliance evidence — click approve. One legitimate SaaS login anomaly — escalate. One tuning suggestion — accept.
        </p>
        <p style={{ margin: "14px 0 0", color: "#2A3842", fontSize: 15, lineHeight: 1.7 }}>
          Total: 28 minutes. They close the tab and go back to the other four jobs. The AI did the eight hours behind the scenes.
        </p>
        <div style={{ marginTop: 28, paddingTop: 20, borderTop: "1px solid #D8CCAA", display: "flex", flexDirection: "column", gap: 6 }}>
          <Mono style={{ fontSize: 11, color: "#6B7680" }}>time absorbed: <span style={{ color: "#8A5A2B" }}>~2.5 hrs/week</span></Mono>
          <Mono style={{ fontSize: 11, color: "#6B7680" }}>real threats surfaced: <span style={{ color: "#8A5A2B" }}>visible · tracked · auditable</span></Mono>
        </div>
      </div>
    </div>
  );
}

/* ---------- Self-hosted positioning ---------- */
function SelfHostedBlock() {
  const rows = [
    { vendor: "CrowdStrike Falcon",   yours: false, oss: false, unlimited: false },
    { vendor: "Microsoft Sentinel",   yours: false, oss: false, unlimited: false },
    { vendor: "Arctic Wolf",          yours: false, oss: false, unlimited: false },
    { vendor: "Secure Sleuths",       yours: true,  oss: true,  unlimited: true, ours: true },
  ];
  return (
    <div style={{
      padding: 40,
      border: "1px solid var(--line)",
      background: "var(--bg-1)",
      display: "grid", gridTemplateColumns: "1fr 1.2fr",
      gap: 48, alignItems: "center",
    }}>
      <div>
        <Label>YOUR DATA NEVER LEAVES</Label>
        <h3 className="serif" style={{
          fontSize: 38, margin: "18px 0 20px",
          lineHeight: 1.1, letterSpacing: "-0.015em",
        }}>
          Self-hosted, or it doesn't ship.
        </h3>
        <p style={{ margin: 0, color: "var(--fg-mute)", fontSize: 15.5, lineHeight: 1.65 }}>
          Every major AI SOC vendor ships your logs to their cloud. We don't. The AI runs where your Wazuh runs. Your compliance officer keeps sleeping. Your auditor finds no surprises.
        </p>
        <p style={{ margin: "14px 0 0", color: "var(--fg-mute)", fontSize: 15.5, lineHeight: 1.65 }}>
          Open-source at the core. Your license. Your infrastructure. Your data. When you leave, the keys come with you.
        </p>
      </div>

      <div style={{ border: "1px solid var(--line-soft)", overflow: "hidden" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr",
          background: "var(--bg-2)", borderBottom: "1px solid var(--line)",
        }}>
          {["", "YOUR INFRA", "OPEN SOURCE", "NO AGENT LIMITS"].map((h, i) => (
            <div key={i} style={{
              padding: "14px 16px",
              borderRight: i < 3 ? "1px solid var(--line-soft)" : "none",
            }}>
              <Label>{h}</Label>
            </div>
          ))}
        </div>
        {rows.map((r, ri) => (
          <div key={r.vendor} style={{
            display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr",
            borderBottom: ri < rows.length - 1 ? "1px solid var(--line-soft)" : "none",
            background: r.ours ? "oklch(0.82 0.17 45 / 0.06)" : "transparent",
          }}>
            <div style={{
              padding: "14px 16px",
              borderRight: "1px solid var(--line-soft)",
              fontSize: 14, color: r.ours ? "var(--accent)" : "var(--fg-mute)",
              fontWeight: r.ours ? 500 : 400,
            }}>
              {r.vendor}
            </div>
            {[r.yours, r.oss, r.unlimited].map((v, ci) => (
              <div key={ci} style={{
                padding: "14px 16px",
                borderRight: ci < 2 ? "1px solid var(--line-soft)" : "none",
                textAlign: "center",
                color: v ? "var(--accent)" : "var(--fg-dim)",
                fontSize: v ? 17 : 14,
              }}>
                {v ? "✓" : "—"}
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- Stack logos ---------- */
function StackLogos() {
  const items = [
    { n: "Wazuh",      d: "SIEM + XDR · open source" },
    { n: "TheHive",    d: "Case mgmt + SOAR" },
    { n: "MISP",       d: "Threat intel sharing" },
    { n: "OpenSearch", d: "Log store + search" },
  ];
  return (
    <div style={{
      display: "grid", gridTemplateColumns: `repeat(${items.length}, 1fr)`,
      border: "1px solid var(--line)",
    }}>
      {items.map((it, i) => (
        <div key={it.n} style={{
          padding: "28px 20px",
          borderRight: i < items.length - 1 ? "1px solid var(--line-soft)" : "none",
          display: "flex", flexDirection: "column", gap: 6,
        }}>
          <Mono style={{ fontSize: 13, color: "var(--accent)" }}>◆ {it.n}</Mono>
          <span style={{ fontSize: 12, color: "var(--fg-dim)" }}>{it.d}</span>
        </div>
      ))}
    </div>
  );
}

/* ---------- Testimonial ---------- */
function Testimonial() {
  return (
    <div style={{
      display: "grid", gridTemplateColumns: "1fr 1.4fr",
      border: "1px solid var(--line)",
      background: "#F5EFDC",
      color: "#0E2A36",
    }}>
      <div style={{ padding: 40, borderRight: "1px solid #D8CCAA", display: "flex", flexDirection: "column", gap: 16 }}>
        <Mono style={{ fontSize: 11, color: "#6B7680", letterSpacing: "0.14em" }}>CLIENT · ANONYMIZED</Mono>
        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
          <Mono style={{ fontSize: 13, color: "#0E2A36" }}>"Fintech SaaS · Series B"</Mono>
          <Mono style={{ fontSize: 12, color: "#6B7680" }}>220 employees · AWS + Okta</Mono>
        </div>
        <div style={{ marginTop: "auto", display: "flex", flexDirection: "column", gap: 6 }}>
          <div>
            <span className="serif" style={{ fontSize: 42, lineHeight: 1, letterSpacing: "-0.02em", color: "#8A5A2B" }}>$112k</span>
            <Mono style={{ fontSize: 10, color: "#6B7680", letterSpacing: "0.12em", display: "block", marginTop: 6 }}>SAVED VS. ENTERPRISE SIEM</Mono>
          </div>
        </div>
      </div>
      <div style={{ padding: 48, display: "flex", flexDirection: "column", gap: 24, justifyContent: "center" }}>
        <span className="serif" style={{ fontSize: 80, lineHeight: 0.6, color: "#8A5A2B" }}>"</span>
        <p className="serif" style={{
          fontSize: "clamp(24px, 2.2vw, 34px)",
          lineHeight: 1.3, margin: 0,
          fontStyle: "italic", letterSpacing: "-0.01em",
          color: "#0E2A36",
        }}>
          We'd been told our monitoring was "best-in-class." Six weeks after onboarding, Secure Sleuths caught an attacker who'd already tested two of our production services. That was week six. They've been with us since.
        </p>
        <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
          <span style={{ width: 40, height: 1, background: "#6B7680" }} />
          <Mono style={{ fontSize: 11, color: "#6B7680", letterSpacing: "0.08em" }}>
            HEAD OF SECURITY · NAME WITHHELD PER NDA
          </Mono>
        </div>
      </div>
    </div>
  );
}

/* ---------- Other paths — for buyers who aren't self-deploying ---------- */
function OtherPaths({ setPage }) {
  const paths = [
    {
      tag: "NO WAZUH YET?",
      title: "SOC Setup",
      price: "₹3L starting · one-time",
      description: "We deploy Wazuh + the AI platform on your infrastructure. ~5 weeks, handoff included. You own everything.",
      cta: "See SOC Setup →",
      target: "services",
    },
    {
      tag: "WANT EXPERT EYES FIRST?",
      title: "Noise Teardown",
      price: "$297 · 60 min live",
      description: "Live review of your Wazuh rules. Top 10 noise sources, MITRE gaps, three fixes you can apply same-day. Written one-pager in 24 hours.",
      cta: "Book a Teardown →",
      target: "early-access",
    },
    {
      tag: "MSSP OR RESELLER?",
      title: "Partner Program",
      price: "Contact us",
      description: "White-label the platform for your clients. Multi-tenancy, custom branding, revenue share. Scale without building the AI layer yourself.",
      cta: "See partner program →",
      target: "partners",
    },
  ];
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", border: "1px solid var(--line)" }}>
      {paths.map((p, i) => (
        <div key={p.title} style={{
          padding: 32,
          borderRight: i < 2 ? "1px solid var(--line-soft)" : "none",
          display: "flex", flexDirection: "column", gap: 16,
          minHeight: 320,
        }}>
          <Label>{p.tag}</Label>
          <h3 className="serif" style={{ fontSize: 30, margin: 0, lineHeight: 1.1, letterSpacing: "-0.015em" }}>
            {p.title}
          </h3>
          <Mono style={{ fontSize: 12, color: "var(--accent)" }}>{p.price}</Mono>
          <p style={{ margin: 0, color: "var(--fg-mute)", fontSize: 14, lineHeight: 1.6, flex: 1 }}>
            {p.description}
          </p>
          <button className="btn" onClick={() => setPage(p.target)} style={{ alignSelf: "flex-start" }}>
            {p.cta}
          </button>
        </div>
      ))}
    </div>
  );
}

/* ---------- Final CTA ---------- */
function FinalCTA({ setPage }) {
  return (
    <div style={{
      border: "1px solid var(--line)",
      padding: "72px 48px",
      background: "var(--bg-1)",
      display: "grid", gridTemplateColumns: "1fr auto", gap: 40, alignItems: "center",
    }}>
      <div>
        <Label>START WHERE IT MAKES SENSE</Label>
        <h3 className="serif" style={{
          fontSize: "clamp(36px, 4vw, 56px)",
          margin: "16px 0 12px", 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 and self-hosted. If you want us to look at your Wazuh before deploying, a Noise Teardown is $297 — live, recorded, and credited toward a pilot.
        </p>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        <button className="btn btn-primary" onClick={() => { window.__dlSource = "home-cta-section"; setPage("download-community"); }}>
          Download Community →
        </button>
        <button className="btn" onClick={() => setPage("early-access")}>
          Book a Teardown · $297
        </button>
      </div>
    </div>
  );
}

/* ---------- Home page composition ---------- */
function HomePage({ setPage, tweaks }) {
  return (
    <div className="page">
      <Hero variant={tweaks.heroVariant} />

      <section style={{ padding: "80px 0 40px" }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 40 }}>
          <Divider label="01 · PICK YOUR TIER" />
          <SectionHead
            title="DHRUVA. Three tiers. Self-hosted. No agent limits."
            sub="Community is free forever. Team is where most security teams land. Enterprise is for mature programs. All three run DHRUVA on your Wazuh."
          />
          <TierLadder setPage={setPage} />
        </div>
      </section>

      <section style={{ padding: "80px 0 40px" }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 40 }}>
          <Divider label="02 · THE TRANSFORMATION" />
          <SectionHead
            title="Two versions of the same Monday morning."
            sub="Before the platform, triage eats the week. After, it's a 30-minute discipline. Your IT lead gets their life back."
          />
          <Transformation />
        </div>
      </section>

      <section style={{ padding: "80px 0 40px" }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 40 }}>
          <Divider label="03 · YOUR INFRASTRUCTURE · YOUR DATA" />
          <SelfHostedBlock />
        </div>
      </section>

      <section style={{ padding: "60px 0 40px" }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 40 }}>
          <Divider label="04 · OPEN SOURCE · UNDER THE HOOD" />
          <SectionHead
            title="DHRUVA runs on the stack a Fortune 500 SOC would run on."
            sub="Minus the ₹1Cr+ license. Wazuh, TheHive, MISP, OpenSearch — all open source, all yours to own. Official Wazuh Ambassador for India."
          />
          <StackLogos />
        </div>
      </section>

      {tweaks.showTicker && (
        <Ticker items={[
          "FSI · Series C · 8 months monitored",
          "Healthtech · Series B · 14 months monitored",
          "DevTools · Series A · 11 months monitored",
          "Martech · Seed · 6 months monitored",
          "Proptech · Series B · 19 months monitored",
          "AI-infra · Series A · 4 months monitored",
          "Logistics · Series C · 22 months monitored",
          "Edtech · Series B · 9 months monitored",
        ]} />
      )}

      <section style={{ padding: "80px 0 40px" }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 40 }}>
          <Divider label="05 · PROOF" />
          <Testimonial />
          <div>
            <button className="btn" onClick={() => setPage("cases")}>More client results →</button>
          </div>
        </div>
      </section>

      <section style={{ padding: "80px 0 40px" }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 40 }}>
          <Divider label="06 · OTHER PATHS" />
          <SectionHead
            title="Not everyone starts by downloading."
            sub="Don't have Wazuh yet? Want expert eyes before committing? Running an MSSP? Pick the path that fits."
          />
          <OtherPaths setPage={setPage} />
        </div>
      </section>

      <section style={{ padding: "60px 0 40px" }}>
        <div className="container">
          <FinalCTA setPage={setPage} />
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomePage });