// methodology.jsx - animated 6-step how-it-works

const STEPS = [
  {
    t: "Discovery call",
    d: "30 minutes. You describe your stack. We describe what we'd monitor first. Either you like the plan or you don't.",
    code: [
      "$ secure-sleuths discovery --duration 30m",
      "→ scope: aws + okta + github",
      "→ priority: exposed perimeter + iam",
      "→ deliverable: draft coverage plan",
    ],
  },
  {
    t: "Environment audit",
    d: "Week 1. Read-only access. We find what you're already not seeing, and show you the gap before you sign anything.",
    code: [
      "$ audit run --mode=readonly",
      "  ▸ assets discovered: 847",
      "  ▸ unmonitored: 119 (14%)",
      "  ▸ exposed services: 3",
      "  ▸ stale iam grants: 41",
    ],
  },
  {
    t: "Coverage plan",
    d: "Week 2. A written plan: what we'll ingest, what we'll alert on, what we'll suppress, what we expect to catch.",
    code: [
      "plan.yaml",
      "  sources:    [cloudtrail, okta, github, wazuh-ep]",
      "  detections: 184 custom + 612 baseline",
      "  retention:  hot 90d · warm 1y · cold 7y",
    ],
  },
  {
    t: "Deployment",
    d: "Weeks 2–3. Wazuh agents rolled out quietly. Log pipes wired up. No production touch, no maintenance window required.",
    code: [
      "$ deploy --env=prod --rollout=canary",
      "  agents.installed:  142 / 142",
      "  pipelines.active:  14 / 14",
      "  first.event.seen:  03:14 UTC",
    ],
  },
  {
    t: "Tuning window",
    d: "Weeks 3–6. We aggressively tune. False-positive rate drops from 40% to < 2%. You stop ignoring alerts; you start reading them.",
    code: [
      "tuning.log",
      "  baseline_noise: 4,180 alerts/day",
      "  post_tune:      38 alerts/day",
      "  signal_ratio:   99.1 %",
    ],
  },
  {
    t: "Handoff · you own it",
    d: "Week 6. Two training sessions, written runbooks, architecture docs handed over. Community platform already running. Upgrade to Team or Enterprise when your team is ready for the ops layer.",
    code: [
      "$ handoff --transfer-keys",
      "  wazuh.access:    transferred",
      "  platform.tier:   community (free)",
      "  upgrade.path:    team $999/mo · enterprise $2,999/mo",
      "  support.window:  30d email · then yours",
    ],
  },
];

function MethodologyPage({ setPage }) {
  const [active, setActive] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setActive(a => (a + 1) % STEPS.length), 4200);
    return () => clearInterval(t);
  }, []);

  return (
    <div className="page">
      <section style={{ padding: "80px 0 40px" }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 32, maxWidth: 900 }}>
          <Label>HOW IT WORKS · 06 STEPS · 06 WEEKS TO STEADY STATE</Label>
          <h1 className="serif" style={{ fontSize: "clamp(52px, 6.5vw, 104px)", margin: 0, lineHeight: 0.98, letterSpacing: "-0.025em" }}>
            From kickoff<br/>
            <span style={{ color: "var(--fg-mute)", fontStyle: "italic" }}>to silence -</span><br/>
            in six weeks.
          </h1>
          <p style={{ fontSize: 18, color: "var(--fg-mute)", margin: 0, maxWidth: 620, lineHeight: 1.55 }}>
            Here is exactly what happens after you sign. No "phase 3 - optimization" black boxes.
          </p>
        </div>
      </section>

      <section style={{ padding: "60px 0" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1.15fr", gap: 60, alignItems: "flex-start" }}>
          {/* Step list */}
          <div style={{ borderTop: "1px solid var(--line)" }}>
            {STEPS.map((s, i) => {
              const isActive = i === active;
              return (
                <div key={i}
                  onClick={() => setActive(i)}
                  style={{
                    padding: "24px 0",
                    borderBottom: "1px solid var(--line-soft)",
                    cursor: "pointer",
                    opacity: isActive ? 1 : 0.55,
                    transition: "opacity 200ms",
                    display: "grid",
                    gridTemplateColumns: "60px 1fr",
                    gap: 20,
                  }}>
                  <Mono style={{ fontSize: 12, color: isActive ? "var(--accent)" : "var(--fg-dim)", letterSpacing: "0.1em" }}>
                    {String(i + 1).padStart(2, "0")}
                  </Mono>
                  <div>
                    <h3 className="serif" style={{ fontSize: 26, margin: 0, lineHeight: 1.2, letterSpacing: "-0.01em", color: isActive ? "var(--fg)" : "var(--fg-mute)" }}>
                      {s.t}
                    </h3>
                    {isActive && (
                      <p style={{ margin: "10px 0 0", color: "var(--fg-mute)", fontSize: 14.5, lineHeight: 1.55, animation: "fadeUp 300ms ease" }}>
                        {s.d}
                      </p>
                    )}
                  </div>
                </div>
              );
            })}
          </div>

          {/* Terminal panel for active */}
          <div style={{ position: "sticky", top: 100 }}>
            <div style={{ border: "1px solid var(--line)", background: "var(--bg-1)", minHeight: 360 }}>
              <div style={{
                display: "flex", alignItems: "center", gap: 12,
                padding: "12px 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" }}>
                  step-{String(active + 1).padStart(2, "0")}.log
                </Mono>
                <span style={{ flex: 1 }} />
                <Mono style={{ fontSize: 10, color: "var(--fg-dim)" }}>
                  {active + 1} / {STEPS.length}
                </Mono>
              </div>
              <div key={active} style={{
                padding: 20,
                fontFamily: "var(--mono)", fontSize: 13, lineHeight: 1.8,
                color: "var(--fg)",
                animation: "fadeUp 300ms ease",
              }}>
                {STEPS[active].code.map((line, i) => (
                  <div key={i} style={{ color: line.startsWith("$") ? "var(--accent)" : i === STEPS[active].code.length - 1 ? "var(--fg)" : "var(--fg-mute)" }}>
                    {line}
                  </div>
                ))}
                <div style={{ height: 14, display: "inline-block" }}>
                  <span className="cursor" style={{ borderLeft: "7px solid var(--accent)", marginLeft: 2 }} />
                </div>
              </div>
              <div style={{
                display: "grid", gridTemplateColumns: "repeat(6, 1fr)", borderTop: "1px solid var(--line)",
              }}>
                {STEPS.map((_, i) => (
                  <div key={i}
                    onClick={() => setActive(i)}
                    style={{
                      height: 4,
                      background: i <= active ? "var(--accent)" : "var(--line)",
                      cursor: "pointer",
                      transition: "background 200ms",
                    }}
                  />
                ))}
              </div>
            </div>
            <div style={{ marginTop: 20, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <Mono style={{ fontSize: 11, color: "var(--fg-dim)" }}>auto-advance · click to pin</Mono>
              <Mono style={{ fontSize: 11, color: "var(--fg-mute)" }}>WEEK {active < 1 ? 0 : active < 3 ? "1–2" : active < 4 ? "2–3" : active < 5 ? "3–6" : "6+"}</Mono>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: "80px 0" }}>
        <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>READY TO SCOPE IT?</Label>
              <h3 className="serif" style={{ fontSize: "clamp(32px, 4vw, 48px)", margin: "14px 0 12px", lineHeight: 1.05, letterSpacing: "-0.02em" }}>
                Six weeks from here.<br/>
                <span style={{ color: "var(--fg-mute)", fontStyle: "italic" }}>Or self-serve in twenty minutes.</span>
              </h3>
              <p style={{ color: "var(--fg-mute)", fontSize: 16, margin: 0, maxWidth: 560, lineHeight: 1.6 }}>
                SOC Setup is the full deployment path · ₹3L starting · 5 weeks. Or skip the setup and download Community to install on Wazuh you already have.
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <button className="btn btn-primary" onClick={() => setPage("services")}>See SOC Setup →</button>
              <button className="btn" onClick={() => { window.__dlSource = "methodology-bottom"; setPage("download-community"); }}>Or download Community</button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { MethodologyPage });