// services.jsx - SOC Setup deep page (one-time Wazuh + AI SOC Community deployment)
// Note: Managed SOC retainer is no longer sold publicly. Existing clients grandfathered.
// This page is about the ₹3L one-time deployment project.

function SocSetupHero({ setPage }) {
  return (
    <section style={{ padding: "80px 0 40px" }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
            <Dot color="var(--accent)" size={7} />
            <Label>SOC SETUP · ONE-TIME · 5 WEEKS · TAILORED TO YOUR STACK</Label>
          </div>
          <h1 className="serif" style={{
            fontSize: "clamp(48px, 6vw, 88px)", margin: 0,
            lineHeight: 0.98, letterSpacing: "-0.025em",
          }}>
            No Wazuh?<br/>
            <span style={{ color: "var(--fg-mute)", fontStyle: "italic" }}>We'll build it.</span>
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.55, color: "var(--fg-mute)", margin: 0, maxWidth: 560 }}>
            Complete SIEM deployment on your infrastructure. Wazuh, log pipelines, custom detections, compliance evidence framework, and DHRUVA Community tier installed on top — ready to upgrade when you are.
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={() => setPage("contact")}>Request a scope →</button>
            <button className="btn" onClick={() => setPage("methodology")}>See the 6-step process ↓</button>
          </div>
          <div style={{ display: "flex", gap: 32, paddingTop: 24, borderTop: "1px solid var(--line-soft)", flexWrap: "wrap" }}>
            {[
              ["₹3L",    "starting · scoped to your stack"],
              ["5 weeks", "kickoff to handoff"],
              ["100%",   "yours at the end · open source"],
            ].map(([v, l]) => (
              <div key={l}>
                <div className="serif" style={{ fontSize: 34, color: "var(--accent)", lineHeight: 1 }}>{v}</div>
                <Mono style={{ fontSize: 10, color: "var(--fg-dim)", marginTop: 4, display: "block", letterSpacing: "0.08em", textTransform: "uppercase" }}>{l}</Mono>
              </div>
            ))}
          </div>
        </div>

        <div style={{
          border: "1px solid var(--line)",
          background: "linear-gradient(135deg, var(--bg-1) 0%, oklch(0.24 0.045 60) 100%)",
          padding: "32px 36px",
        }}>
          <Mono style={{ fontSize: 10, color: "var(--fg-dim)", letterSpacing: "0.12em" }}>WHAT YOU HAVE ON DAY 36</Mono>
          <div style={{ marginTop: 20, display: "flex", flexDirection: "column", gap: 14 }}>
            {[
              ["Wazuh manager · indexer · dashboard",      "live on your infra"],
              ["Agents deployed · all endpoints",          "fleet-managed config"],
              ["Custom decoders · your stack",             "AWS · Okta · GitHub · whatever"],
              ["Alert rules tuned to your environment",    "baselined · FP rate < 2%"],
              ["DHRUVA Community tier · installed",    "triage from day one"],
              ["Compliance evidence pipelines · ready",    "ISO · SOC 2 · HIPAA · DPDP"],
              ["Your team trained · runbooks handed over", "you own the keys"],
            ].map(([title, sub], i) => (
              <div key={title} style={{ display: "grid", gridTemplateColumns: "16px 1fr", gap: 12, alignItems: "baseline" }}>
                <Mono style={{ fontSize: 11, color: "var(--accent)" }}>✓</Mono>
                <div>
                  <span style={{ fontSize: 13.5, color: "var(--fg)" }}>{title}</span>
                  <Mono style={{ fontSize: 10.5, color: "var(--fg-dim)", display: "block", marginTop: 2 }}>{sub}</Mono>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function WhoItsFor() {
  const fits = [
    {
      tag: "FIT",
      title: "You have no SIEM at all.",
      body: "Or you've been making do with a log aggregator and a Slack webhook. You need the foundation before the AI layer can do anything useful.",
    },
    {
      tag: "FIT",
      title: "You're on a vendor SIEM and want out.",
      body: "Splunk, Sentinel, Rapid7 — whatever's eating your budget. We'll stand up Wazuh, migrate your detections, and cut your security infra cost 80%.",
    },
    {
      tag: "FIT",
      title: "You have Wazuh but it's barely tuned.",
      body: "Default rule pack, 4,000 alerts a day, nobody reads any of them. We'll rebuild tuning, wire proper decoders, and install the platform on top.",
    },
    {
      tag: "NOT A FIT",
      title: "You already have a working, tuned Wazuh.",
      body: "Skip SOC Setup. Download Community free, upgrade to Team when you're ready. Or book a $297 Noise Teardown if you want a second opinion first.",
    },
  ];
  return (
    <section style={{ padding: "80px 0 40px" }}>
      <div className="container" style={{ display: "flex", flexDirection: "column", gap: 40 }}>
        <Divider label="01 · IS THIS FOR YOU" />
        <SectionHead
          title="Honest qualification, in four lines."
          sub="Not everyone needs SOC Setup. Some teams should skip it and go straight to the platform. Figure out which one you are."
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", border: "1px solid var(--line)" }}>
          {fits.map((f, i) => (
            <div key={i} style={{
              padding: 32,
              borderRight: i % 2 === 0 ? "1px solid var(--line-soft)" : "none",
              borderBottom: i < 2 ? "1px solid var(--line-soft)" : "none",
              display: "flex", flexDirection: "column", gap: 14,
              background: f.tag === "NOT A FIT" ? "var(--bg-2)" : "transparent",
            }}>
              <Mono style={{
                fontSize: 10,
                color: f.tag === "NOT A FIT" ? "var(--fg-dim)" : "var(--accent)",
                letterSpacing: "0.14em",
              }}>
                ◆ {f.tag}
              </Mono>
              <h3 className="serif" style={{
                fontSize: 26, margin: 0, lineHeight: 1.2, letterSpacing: "-0.01em",
                color: f.tag === "NOT A FIT" ? "var(--fg-mute)" : "var(--fg)",
              }}>
                {f.title}
              </h3>
              <p style={{ margin: 0, color: "var(--fg-mute)", fontSize: 14.5, lineHeight: 1.6 }}>
                {f.body}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function WhatsIncluded() {
  const scope = [
    {
      n: "01",
      title: "Wazuh SIEM · stood up end-to-end",
      tag: "CORE",
      sub: "Full stack deployment. Manager, indexer, dashboard. Sized for your event volume. HA optional.",
      bullets: [
        "Wazuh server · indexer · dashboard components",
        "Capacity sized to your EPS and retention window",
        "HA / clustered deployment available for 5K+ EPS",
        "TLS everywhere · secrets management · backup configured",
      ],
    },
    {
      n: "02",
      title: "Agents deployed across your fleet",
      tag: "ROLLOUT",
      sub: "Wazuh agents on every host you care about. Fleet managed by us during setup, yours to operate after handoff.",
      bullets: [
        "Linux · Windows · macOS agents · containerized workloads",
        "Silent install · config pushed from central policy",
        "Health monitoring · agent status visible in dashboard",
        "Integration with your identity system (AD / Okta / Jumpcloud)",
      ],
    },
    {
      n: "03",
      title: "Log pipelines wired across cloud + SaaS",
      tag: "COVERAGE",
      sub: "Your logs go where they need to go. Normalized, not link-dumped. We map every source.",
      bullets: [
        "AWS CloudTrail · GuardDuty · VPC flow · S3 access",
        "GCP / Azure equivalents · Kubernetes audit",
        "Okta · GitHub · Google Workspace · Microsoft 365",
        "Custom apps via syslog · webhook · file tail",
      ],
    },
    {
      n: "04",
      title: "Custom detections tuned to your stack",
      tag: "TUNING",
      sub: "Default Wazuh rule packs are 40% noise on day one. We rebuild them to your environment.",
      bullets: [
        "184 custom detections tuned per environment",
        "Behavioral baselines established during audit week",
        "FP rate driven from 40% to under 2% by week 5",
        "Detection-as-code · version controlled · handed over",
      ],
    },
    {
      n: "05",
      title: "Compliance evidence framework",
      tag: "AUDIT-READY",
      sub: "Auditors will ask. We pre-wire evidence trails so you answer in minutes, not weeks.",
      bullets: [
        "ISO 27001 · SOC 2 · HIPAA · DPDP controls mapped",
        "Log retention policies · hot / warm / cold / delete",
        "Read-only auditor portal · scoped access",
        "Evidence pull templates · one command per control",
      ],
    },
    {
      n: "06",
      title: "AI SOC Community platform installed on top",
      tag: "PLATFORM · BONUS",
      sub: "Your Wazuh has an AI layer from day one. Upgrade to Team or Enterprise when your team is ready.",
      bullets: [
        "AI alert triage · MITRE heatmap · 7 TI feeds · free forever",
        "Docker-packaged · runs on your infra · your LLM keys",
        "Clear upgrade path to Team ($999/mo) or Enterprise ($2,999/mo)",
        "No trial expiry · no feature bait-and-switch",
      ],
    },
    {
      n: "07",
      title: "Team training + full handoff",
      tag: "OWNERSHIP",
      sub: "You run it when we leave. Two training sessions, written runbooks, architecture documentation.",
      bullets: [
        "Two 90-minute training sessions · your engineers + ours",
        "Written runbooks · 'what to do when alert X fires'",
        "Architecture diagrams · decisions documented",
        "30 days of email support post-handoff · no hourly ambush",
      ],
    },
  ];
  return (
    <section style={{ padding: "80px 0 40px" }}>
      <div className="container" style={{ display: "flex", flexDirection: "column", gap: 40 }}>
        <Divider label="02 · WHAT'S INCLUDED" />
        <SectionHead
          title="Seven deliverables. One fixed scope."
          sub="No 'phase 2 upgrades' pitched halfway through. No surprise line items at handoff. What's on this page is what's in the contract."
        />
        <div style={{ display: "flex", flexDirection: "column", gap: 0, border: "1px solid var(--line)" }}>
          {scope.map((s, i) => (
            <div key={s.n} style={{
              display: "grid", gridTemplateColumns: "80px 1fr 1.2fr",
              gap: 40,
              padding: "40px 36px",
              borderTop: i > 0 ? "1px solid var(--line-soft)" : "none",
            }}>
              <Mono style={{ fontSize: 12, color: "var(--fg-dim)", letterSpacing: "0.1em" }}>
                {s.n}
              </Mono>
              <div>
                <Tag color="var(--accent)" style={{ marginBottom: 16 }}>{s.tag}</Tag>
                <h3 className="serif" style={{ fontSize: 32, margin: "16px 0 14px", lineHeight: 1.15, letterSpacing: "-0.015em" }}>
                  {s.title}
                </h3>
                <p style={{ margin: 0, color: "var(--fg-mute)", fontSize: 15, lineHeight: 1.6 }}>
                  {s.sub}
                </p>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                {s.bullets.map((b, j) => (
                  <div key={j} 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 }}>{b}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TimelineOverview({ setPage }) {
  const weeks = [
    { w: "Week 0",   t: "Discovery call",   d: "30-min scoping call. You describe your stack. We give you a written quote within 48h." },
    { w: "Week 1",   t: "Environment audit", d: "Read-only access. We map what you have, find what's missing, and confirm scope before signing." },
    { w: "Week 2",   t: "Coverage plan",     d: "Written plan — what we'll ingest, alert on, suppress, and expect to catch. Your sign-off before deployment." },
    { w: "Weeks 2-3", t: "Deployment",        d: "Wazuh stood up, agents rolled out, log pipelines wired. Canary rollout. No maintenance window." },
    { w: "Weeks 3-5", t: "Tuning window",     d: "FP rate driven from 40% to under 2%. Detections rebuilt to your environment. You start trusting the alerts." },
    { w: "Week 5",   t: "Training + handoff", d: "Two training sessions. Written runbooks. Architecture docs. Keys transferred. You run it from here." },
  ];
  return (
    <section style={{ padding: "80px 0 40px" }}>
      <div className="container" style={{ display: "flex", flexDirection: "column", gap: 40 }}>
        <Divider label="03 · THE 5-WEEK TIMELINE" />
        <SectionHead
          title="Five weeks. No surprises."
          sub="Same process for every client. We publish the timeline because we follow it. For the full methodology with code samples and decision trees, see the How it works page."
        />
        <div style={{ display: "flex", flexDirection: "column", border: "1px solid var(--line)" }}>
          {weeks.map((wk, i) => (
            <div key={wk.w} style={{
              display: "grid", gridTemplateColumns: "120px 200px 1fr",
              gap: 32,
              padding: "24px 32px",
              borderTop: i > 0 ? "1px solid var(--line-soft)" : "none",
              alignItems: "center",
            }}>
              <Mono style={{ fontSize: 13, color: "var(--accent)", letterSpacing: "0.08em" }}>
                {wk.w.toUpperCase()}
              </Mono>
              <h3 className="serif" style={{ fontSize: 22, margin: 0, letterSpacing: "-0.005em", lineHeight: 1.2 }}>
                {wk.t}
              </h3>
              <p style={{ margin: 0, color: "var(--fg-mute)", fontSize: 14.5, lineHeight: 1.55 }}>
                {wk.d}
              </p>
            </div>
          ))}
        </div>
        <div>
          <button className="btn" onClick={() => setPage("methodology")}>Full methodology with code → </button>
        </div>
      </div>
    </section>
  );
}

function PricingCallout({ setPage }) {
  return (
    <section style={{ padding: "80px 0 40px" }}>
      <div className="container">
        <div style={{
          border: "1px solid var(--line)",
          background: "linear-gradient(135deg, var(--bg-1) 0%, oklch(0.25 0.05 55) 100%)",
          padding: "56px 48px",
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48,
        }}>
          <div>
            <Label>PRICING · TRANSPARENT · SCOPED TO YOUR STACK</Label>
            <h3 className="serif" style={{ fontSize: 44, margin: "18px 0 18px", lineHeight: 1.05, letterSpacing: "-0.02em" }}>
              ₹3,00,000 <span style={{ color: "var(--fg-mute)", fontStyle: "italic" }}>starting.</span>
            </h3>
            <p style={{ margin: 0, color: "var(--fg-mute)", fontSize: 15.5, lineHeight: 1.6 }}>
              Final number scopes with stack complexity, log source count, and integrations required. You get a written quote within 48 hours of the discovery call. No surprises at contract time.
            </p>
            <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <button className="btn btn-primary" onClick={() => setPage("contact")}>Book scoping call →</button>
              <button className="btn" onClick={() => setPage("pricing")}>See all pricing</button>
            </div>
          </div>
          <div>
            <Mono style={{ fontSize: 11, color: "var(--fg-dim)", letterSpacing: "0.12em" }}>
              WHAT DRIVES THE FINAL NUMBER
            </Mono>
            <div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 14 }}>
              {[
                ["Stack complexity",       "AWS-only is simpler than AWS + on-prem + 4 SaaS apps"],
                ["Log source count",       "10 sources vs 40 sources · linear in engineering time"],
                ["Custom decoders needed", "Your bespoke apps need bespoke parsing · scoped separately"],
                ["Compliance scope",       "SOC 2 is lighter than HIPAA is lighter than PCI + DPDP"],
                ["HA requirements",        "Single-node is standard · clustered adds engineering"],
              ].map(([k, v]) => (
                <div key={k} style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 16 }}>
                  <Mono style={{ fontSize: 12, color: "var(--fg)" }}>◆ {k}</Mono>
                  <span style={{ fontSize: 13, color: "var(--fg-mute)", lineHeight: 1.5 }}>{v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function WhatHappensAfter({ setPage }) {
  return (
    <section style={{ padding: "80px 0 40px" }}>
      <div className="container" style={{ display: "flex", flexDirection: "column", gap: 40 }}>
        <Divider label="04 · AFTER HANDOFF" />
        <SectionHead
          title="You own everything. Including what comes next."
          sub="SOC Setup ends at handoff. Community platform is yours free forever. Upgrade to Team or Enterprise when your team is ready for the ops layer."
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", border: "1px solid var(--line)" }}>
          {[
            {
              tag: "DAY 36 · YOURS",
              title: "Community (Free)",
              body: "The platform is already running. AI triage, MITRE heatmap, 7 TI feeds, full audit evidence. Run it indefinitely with no cost.",
              cta: "See Community",
              target: "pricing",
            },
            {
              tag: "WHEN READY",
              title: "Upgrade to Team · $999/mo",
              body: "Add rule tuning, natural language queries, SOAR, Slack + ticketing integration. Most teams upgrade within 60-90 days of handoff.",
              cta: "Team features",
              target: "pricing",
            },
            {
              tag: "AT MATURITY",
              title: "Upgrade to Enterprise · $2,999/mo",
              body: "Full autonomous SOC — threat hunting, automated response, compliance matrix, SSO, multi-BU isolation. When your program grows past Team.",
              cta: "Enterprise features",
              target: "pricing",
            },
          ].map((c, i) => (
            <div key={c.title} style={{
              padding: 32,
              borderRight: i < 2 ? "1px solid var(--line-soft)" : "none",
              display: "flex", flexDirection: "column", gap: 16,
            }}>
              <Label>{c.tag}</Label>
              <h3 className="serif" style={{ fontSize: 26, margin: 0, lineHeight: 1.15, letterSpacing: "-0.01em" }}>
                {c.title}
              </h3>
              <p style={{ margin: 0, color: "var(--fg-mute)", fontSize: 14, lineHeight: 1.6, flex: 1 }}>
                {c.body}
              </p>
              <button className="btn" onClick={() => setPage(c.target)} style={{ alignSelf: "flex-start" }}>
                {c.cta} →
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServicesFinalCTA({ setPage }) {
  return (
    <section style={{ padding: "60px 0" }}>
      <div className="container">
        <div style={{
          border: "1px solid var(--line)",
          padding: "64px 48px",
          background: "var(--bg-1)",
          display: "grid", gridTemplateColumns: "1fr auto", gap: 40, alignItems: "center",
        }}>
          <div>
            <Label>READY TO SCOPE IT?</Label>
            <h3 className="serif" style={{ fontSize: "clamp(34px, 4vw, 52px)", margin: "14px 0 12px", lineHeight: 1.05, letterSpacing: "-0.02em" }}>
              30-minute discovery call.<br/>
              <span style={{ color: "var(--fg-mute)", fontStyle: "italic" }}>Written quote in 48 hours.</span>
            </h3>
            <p style={{ color: "var(--fg-mute)", fontSize: 16, margin: 0, maxWidth: 560 }}>
              You describe your stack. We tell you what we'd deploy, in what order, and what it would cost. If it's not a fit, you've lost half an hour.
            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <button className="btn btn-primary" onClick={() => setPage("contact")}>Book scoping call →</button>
            <button className="btn" onClick={() => { window.__dlSource = "services-scoping-fallback"; setPage("download-community"); }}>Or start with Community free</button>
          </div>
        </div>
      </div>
    </section>
  );
}

function ServicesPage({ setPage }) {
  return (
    <div className="page">
      <SocSetupHero setPage={setPage} />
      <WhoItsFor />
      <WhatsIncluded />
      <TimelineOverview setPage={setPage} />
      <PricingCallout setPage={setPage} />
      <WhatHappensAfter setPage={setPage} />
      <ServicesFinalCTA setPage={setPage} />
    </div>
  );
}

Object.assign(window, { ServicesPage });