// hero.jsx - three hero variants, selected via window.__TWEAKS__.heroVariant
// Updated for PLATFORM-FIRST positioning (Community/Team/Enterprise).

/* ============================================================
   HERO COPY ALTERNATES — uncomment one to swap the headline
   ============================================================

   A (current) - editorial/playful, commits to a position:
     Headline: Your Wazuh had an / AI-shaped hole. / We filled it.
     Eyebrow:  COMMUNITY FREE · SELF-HOSTED · UNLIMITED AGENTS

   B - outcome/direct, names the pain:
     Headline: Stop reading alerts. / Start reading the / ones that matter.
     Eyebrow:  COMMUNITY FREE · SELF-HOSTED

   C - contrast/positioning:
     Headline: The AI SOC your / Wazuh has been / missing.
     Eyebrow:  FREE · SELF-HOSTED · NO AGENT LIMITS
   ============================================================ */

function HeroCopy({ compact }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 32, maxWidth: 620 }}>
      <div style={{ display: "flex", gap: 14, alignItems: "center" }}>
        <Dot color="var(--accent-2)" />
        <Mono style={{ fontSize: 12, color: "var(--fg-mute)", letterSpacing: "0.08em" }}>
          COMMUNITY FREE · SELF-HOSTED · UNLIMITED AGENTS
        </Mono>
      </div>
      <h1 className="serif" style={{
        fontSize: compact ? "clamp(44px, 5.4vw, 78px)" : "clamp(50px, 6.4vw, 92px)",
        lineHeight: 1.02,
        margin: 0,
        paddingBottom: 8,
        letterSpacing: "-0.025em",
        textWrap: "balance",
      }}>
        Your Wazuh had an<br/>
        <span style={{ color: "var(--fg-mute)", fontStyle: "italic" }}>AI-shaped hole.</span><br/>
        We filled it.
      </h1>
      <p style={{ fontSize: 19, lineHeight: 1.55, color: "var(--fg-mute)", margin: 0, maxWidth: 540 }}>
        An AI SOC layer on the Wazuh you already trust. Auto-closes 76% of false positives,
        proposes rule fixes, hunts what your team misses. Self-hosted, so your data never
        leaves your infrastructure. Community tier free forever.
      </p>
      <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
        <button className="btn btn-primary"
          onClick={() => { window.__dlSource = "hero-primary"; window.dispatchEvent(new CustomEvent("nav", { detail: "download-community" })); }}>
          Download Community →
        </button>
        <button className="btn"
          onClick={() => window.dispatchEvent(new CustomEvent("nav", { detail: "early-access" }))}>
          Book Noise Teardown · $297
        </button>
      </div>
      <div style={{ display: "flex", gap: 32, paddingTop: 20, borderTop: "1px solid var(--line-soft)", flexWrap: "wrap" }}>
        {[
          ["30 min",    "a day on the platform"],
          ["< 2%",      "FP rate by week 6"],
          ["7 days",    "to first real value"],
          ["0 limits",  "on agents or alerts"],
        ].map(([v, l]) => (
          <div key={l} style={{ display: "flex", flexDirection: "column", gap: 4, minWidth: 120 }}>
            <span className="serif" style={{ fontSize: 34, lineHeight: 1, color: "var(--accent)" }}>{v}</span>
            <Mono style={{ fontSize: 11, letterSpacing: "0.08em", color: "var(--fg-dim)", textTransform: "uppercase" }}>{l}</Mono>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- Variant A: Live SOC alert feed ---------- */
function HeroLiveFeed() {
  const [lines, setLines] = React.useState([]);
  const idRef = React.useRef(1);

  const templates = [
    { sev: "info",  src: "wazuh",   msg: "Agent heartbeat restored · host prod-api-14" },
    { sev: "warn",  src: "thehive", msg: "Unusual outbound to 185.220.101.44 · analyst assigned" },
    { sev: "info",  src: "misp",    msg: "IOC feed synced · 4,218 new indicators" },
    { sev: "warn",  src: "wazuh",   msg: "Failed SSH brute · 12 attempts from 77.91.*.* · blocked" },
    { sev: "info",  src: "aws",     msg: "CloudTrail ingested · 8,412 events/min" },
    { sev: "high",  src: "thehive", msg: "Case #2847 · suspicious OAuth grant · escalated" },
    { sev: "info",  src: "wazuh",   msg: "FIM baseline rebuilt · /etc/nginx (142 files)" },
    { sev: "warn",  src: "wazuh",   msg: "Privileged role assigned · user j.patel@acme" },
    { sev: "info",  src: "misp",    msg: "Correlation hit · APT29 toolkit signature" },
    { sev: "info",  src: "wazuh",   msg: "Vuln scan complete · 0 critical, 4 high, 19 medium" },
    { sev: "warn",  src: "thehive", msg: "Stale GitHub PAT detected · owner notified" },
    { sev: "info",  src: "aws",     msg: "GuardDuty normalized · 1,204 findings triaged" },
  ];

  React.useEffect(() => {
    const push = () => {
      const t = templates[Math.floor(Math.random() * templates.length)];
      const d = new Date();
      const ts =
        String(d.getUTCHours()).padStart(2,"0") + ":" +
        String(d.getUTCMinutes()).padStart(2,"0") + ":" +
        String(d.getUTCSeconds()).padStart(2,"0");
      setLines(L => [{ ...t, id: idRef.current++, ts }, ...L].slice(0, 11));
    };
    // seed
    for (let i = 0; i < 6; i++) setTimeout(push, i * 120);
    const tick = setInterval(push, 1600);
    return () => clearInterval(tick);
  }, []);

  const sevColor = (s) => s === "high" ? "var(--danger)" : s === "warn" ? "var(--warn)" : "var(--accent)";

  return (
    <div style={{
      border: "1px solid var(--line)",
      background: "var(--bg-1)",
      display: "flex", flexDirection: "column",
      minHeight: 520,
    }}>
      {/* terminal header */}
      <div style={{
        display: "flex", alignItems: "center", gap: 14,
        padding: "12px 16px", borderBottom: "1px solid var(--line)",
        background: "var(--bg-2)",
      }}>
        <div style={{ display: "flex", gap: 6 }}>
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: "oklch(0.5 0.1 25)" }} />
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: "oklch(0.65 0.12 75)" }} />
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: "oklch(0.65 0.14 155)" }} />
        </div>
        <Mono style={{ fontSize: 11, color: "var(--fg-mute)", letterSpacing: "0.08em" }}>
          soc.securesleuths.in - /var/log/alerts --follow
        </Mono>
        <span style={{ flex: 1 }} />
        <Mono style={{ fontSize: 11, color: "var(--accent)" }}>
          <Dot size={6} /> &nbsp;LIVE
        </Mono>
      </div>

      {/* feed */}
      <div style={{ flex: 1, padding: "12px 16px", fontFamily: "var(--mono)", fontSize: 12.5, lineHeight: 1.7, overflow: "hidden" }}>
        {lines.map((l, i) => (
          <div key={l.id} style={{
            display: "grid",
            gridTemplateColumns: "78px 64px 56px 1fr",
            gap: 12,
            color: i === 0 ? "var(--fg)" : i > 7 ? "var(--fg-dim)" : "var(--fg-mute)",
            opacity: i > 9 ? 0.35 : 1,
            animation: i === 0 ? "slideInLeft 260ms ease-out" : "none",
          }}>
            <span style={{ color: "var(--fg-dim)" }}>{l.ts}</span>
            <span style={{ color: sevColor(l.sev), textTransform: "uppercase" }}>{l.sev}</span>
            <span style={{ color: "var(--fg-dim)" }}>[{l.src}]</span>
            <span style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{l.msg}</span>
          </div>
        ))}
      </div>

      {/* stats row */}
      <div style={{
        display: "grid", gridTemplateColumns: "repeat(4, 1fr)",
        borderTop: "1px solid var(--line)",
      }}>
        {[
          ["EPS",         "14,208"],
          ["OPEN CASES",  "3"],
          ["MTTR (24h)",  "11m"],
          ["BLOCKED",     "2,118"],
        ].map(([k, v]) => (
          <div key={k} style={{
            padding: "14px 16px",
            borderRight: "1px solid var(--line-soft)",
            display: "flex", flexDirection: "column", gap: 4,
          }}>
            <Label>{k}</Label>
            <Mono style={{ fontSize: 18, color: "var(--fg)" }}>{v}</Mono>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- Variant B: World map with pulse points ---------- */
function HeroWorldMap() {
  const points = [
    { x: 210, y: 155, l: "Frankfurt", sev: "warn" },
    { x: 180, y: 150, l: "London",    sev: "info" },
    { x: 620, y: 190, l: "Singapore", sev: "high" },
    { x: 150, y: 240, l: "São Paulo", sev: "info" },
    { x: 100, y: 165, l: "NYC",       sev: "info" },
    { x: 540, y: 165, l: "Mumbai",    sev: "warn" },
    { x: 680, y: 155, l: "Tokyo",     sev: "info" },
    { x: 720, y: 260, l: "Sydney",    sev: "info" },
    { x: 280, y: 200, l: "Tel Aviv",  sev: "warn" },
  ];
  const sevColor = (s) => s === "high" ? "var(--danger)" : s === "warn" ? "var(--warn)" : "var(--accent)";

  return (
    <div style={{
      border: "1px solid var(--line)",
      background: "var(--bg-1)",
      minHeight: 520,
      display: "flex", flexDirection: "column",
    }}>
      <div style={{
        display: "flex", alignItems: "center", gap: 14,
        padding: "12px 16px", borderBottom: "1px solid var(--line)",
        background: "var(--bg-2)",
      }}>
        <Mono style={{ fontSize: 11, color: "var(--fg-mute)", letterSpacing: "0.08em" }}>
          THREAT MAP · REAL-TIME · UTC
        </Mono>
        <span style={{ flex: 1 }} />
        <Mono style={{ fontSize: 11, color: "var(--accent)" }}>
          <Dot size={6} /> &nbsp;9 REGIONS MONITORED
        </Mono>
      </div>
      <div style={{ flex: 1, padding: 20, position: "relative" }} className="grid-bg">
        <svg viewBox="0 0 800 400" style={{ width: "100%", height: "auto", display: "block" }}>
          <g fill="var(--fg-dim)" opacity="0.22">
            {Array.from({ length: 520 }).map((_, i) => {
              const seed = (i * 9301 + 49297) % 233280;
              const r = seed / 233280;
              const x = 40 + r * 720;
              const y = 60 + ((i * 37) % 280);
              return <circle key={i} cx={x} cy={y} r={1.2} />;
            })}
          </g>
          {points.map((p, i) => (
            <g key={i}>
              <circle cx={p.x} cy={p.y} r={5} fill={sevColor(p.sev)} style={{ transformOrigin: `${p.x}px ${p.y}px`, animation: `pulse 2.4s ease-out ${i * 0.25}s infinite` }} />
              <circle cx={p.x} cy={p.y} r={3} fill={sevColor(p.sev)} />
              <text x={p.x + 10} y={p.y + 4} fill="var(--fg-mute)" fontSize="10" fontFamily="var(--mono)">{p.l.toUpperCase()}</text>
            </g>
          ))}
        </svg>
      </div>
      <div style={{
        display: "grid", gridTemplateColumns: "repeat(4, 1fr)",
        borderTop: "1px solid var(--line)",
      }}>
        {[
          ["REGIONS",     "9"],
          ["ACTIVE IOCs", "4,218"],
          ["BLOCKED/24H", "2,118"],
          ["ESCALATED",   "3"],
        ].map(([k, v]) => (
          <div key={k} style={{
            padding: "14px 16px",
            borderRight: "1px solid var(--line-soft)",
            display: "flex", flexDirection: "column", gap: 4,
          }}>
            <Label>{k}</Label>
            <Mono style={{ fontSize: 18, color: "var(--fg)" }}>{v}</Mono>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- Variant C: Editorial - numbers, no dashboard ---------- */
function HeroEditorial() {
  return (
    <div style={{
      border: "1px solid var(--line)",
      padding: "60px 48px",
      background: "var(--bg-1)",
      minHeight: 520,
      display: "flex", flexDirection: "column",
      justifyContent: "space-between",
    }}>
      <div>
        <Label>LIVE DEPLOYMENT · AI SOC PLATFORM</Label>
        <p className="serif" style={{
          fontStyle: "italic",
          fontSize: "clamp(22px, 2vw, 30px)",
          lineHeight: 1.35, color: "var(--fg)",
          margin: "28px 0 0", maxWidth: 540,
          textWrap: "pretty",
        }}>
          "527 alerts triaged in 7 days on a single deployment.
          76% auto-closed as false positives. 91% average
          AI confidence score. 4-minute response time."
        </p>
        <div style={{ marginTop: 20, display: "flex", gap: 10, alignItems: "center" }}>
          <span style={{ width: 40, height: 1, background: "var(--fg-dim)" }} />
          <Mono style={{ fontSize: 11, color: "var(--fg-dim)", letterSpacing: "0.1em" }}>
            PRATHAMESH BAKLIWAL · FOUNDER
          </Mono>
        </div>
      </div>

      <div style={{
        display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
        gap: 32,
        paddingTop: 40, borderTop: "1px solid var(--line-soft)",
      }}>
        <Stat value="527" label="alerts triaged in 7 days" color="var(--accent)" />
        <Stat value="76%" label="auto-closed false positives" color="var(--fg)" />
        <Stat value="4m" label="avg AI response time" color="var(--warn)" />
      </div>
    </div>
  );
}

/* Router */
function Hero({ variant }) {
  return (
    <section style={{ padding: "80px 0 40px" }}>
      <div className="container" style={{
        display: "grid",
        gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.05fr)",
        gap: 60,
        alignItems: "center",
      }}>
        <HeroCopy compact={variant !== "editorial"} />
        <div>
          {variant === "live-soc"   && <HeroLiveFeed />}
          {variant === "world-map"  && <HeroWorldMap />}
          {variant === "editorial"  && <HeroEditorial />}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, HeroLiveFeed, HeroWorldMap, HeroEditorial });