// V4 — Coverage Atlas
// Dense, data-rich, technical. Wall-of-data hero: framework × control-family
// heatmap with live-counting maturity gauge. For security pros.

(function () {
const { Icon, Logo, TopNav, Footer, CustomerWall, FRAMEWORK_GROUPS } = window.LP;
const { useState: useStateA, useEffect: useEffectA, useMemo: useMemoA } = React;

// Deterministic pseudo-random for the heat grid
function seeded(i, j) {
  const x = Math.sin(i * 374.7 + j * 51.3) * 43758.5453;
  return x - Math.floor(x);
}

function CoverageMatrix() {
  const families = ["Asset", "Data", "Identity", "Network", "Endpoint", "Cloud", "App", "Vendor", "Logging", "Recovery", "People", "Vuln"];
  const fwShort = ["CIS", "NIST CSF", "800-53", "800-171", "CMMC", "ISO", "SOC 2", "PCI", "Fed", "DORA", "NIS2", "GDPR"];

  const cells = useMemoA(() => {
    return fwShort.map((_, i) => families.map((_, j) => {
      const r = seeded(i, j);
      // Maturity 1..5, mostly 3-5
      return Math.max(1, Math.min(5, Math.round(2 + r * 3.4)));
    }));
  }, []);

  const [hover, setHover] = useStateA({ i: -1, j: -1 });

  // Animated reveal
  const [revealed, setRevealed] = useStateA(0);
  useEffectA(() => {
    const total = fwShort.length * families.length;
    let n = 0;
    const int = setInterval(() => {
      n += 8;
      setRevealed(n);
      if (n >= total) clearInterval(int);
    }, 30);
    return () => clearInterval(int);
  }, []);

  const colorFor = (s) => {
    if (s == null) return "#1f2731";
    const map = { 1: "#5b3334", 2: "#7a5436", 3: "#7a6936", 4: "#3f6e64", 5: "#93D2CC" };
    return map[s];
  };

  return (
    <div className="relative">
      <div className="absolute -inset-6 rounded-[28px] bg-[#93D2CC]/10 blur-2xl" />
      <div className="relative rounded-2xl border border-white/10 bg-[#2A323D]/85 backdrop-blur-xl shadow-[0_30px_80px_-20px_rgba(0,0,0,0.6)] overflow-hidden">
        {/* Header */}
        <div className="flex items-center justify-between px-4 py-3 border-b border-white/8">
          <div className="flex items-center gap-2.5">
            <Icon name="grid" className="h-3.5 w-3.5 text-[#93D2CC]" strokeWidth={2.2} />
            <span className="text-[11px] font-mono uppercase tracking-[0.18em] text-white/55">Coverage matrix · live</span>
          </div>
          <div className="flex items-center gap-1.5">
            {[1,2,3,4,5].map(n => (
              <span key={n} className="flex items-center gap-1">
                <span className="h-2.5 w-2.5 rounded-sm" style={{ background: colorFor(n) }} />
                <span className="text-[9.5px] font-mono text-white/40">{n}</span>
              </span>
            ))}
          </div>
        </div>

        <div className="p-4 overflow-x-auto">
          <table className="border-separate" style={{ borderSpacing: "3px" }}>
            <thead>
              <tr>
                <th className="sticky left-0 bg-[#2A323D] text-left text-[9.5px] uppercase tracking-wider text-white/40 font-mono px-2"></th>
                {families.map((f) => (
                  <th key={f} className="text-[9.5px] font-mono text-white/55 font-semibold px-1 pb-2 align-bottom">
                    <span className="inline-block" style={{ writingMode: "vertical-rl", transform: "rotate(180deg)", whiteSpace: "nowrap" }}>{f}</span>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {fwShort.map((fw, i) => (
                <tr key={fw}>
                  <td className="text-[10.5px] font-mono font-semibold text-white/75 pr-3 whitespace-nowrap" style={{ width: 1 }}>{fw}</td>
                  {families.map((fam, j) => {
                    const s = cells[i][j];
                    const idx = i * families.length + j;
                    const isRevealed = idx < revealed;
                    const isHover = hover.i === i && hover.j === j;
                    const isRowCol = hover.i === i || hover.j === j;
                    return (
                      <td key={fam}
                        onMouseEnter={() => setHover({ i, j })}
                        onMouseLeave={() => setHover({ i: -1, j: -1 })}
                        className="relative cursor-pointer transition-all duration-150"
                        style={{
                          backgroundColor: isRevealed ? colorFor(s) : "rgba(255,255,255,0.04)",
                          width: 28, height: 24,
                          borderRadius: 3,
                          opacity: isRevealed ? (isRowCol || hover.i < 0 ? 1 : 0.35) : 0.2,
                          outline: isHover ? "1.5px solid #93D2CC" : "none",
                          outlineOffset: isHover ? "1px" : "0",
                          transform: isRevealed ? "scale(1)" : "scale(0.85)",
                        }}
                      >
                        <span className={`absolute inset-0 flex items-center justify-center text-[10px] font-bold ${s >= 4 ? "text-[#404C5C]" : "text-white/95"} ${isHover ? "opacity-100" : "opacity-0"} transition-opacity`}>
                          {s}
                        </span>
                      </td>
                    );
                  })}
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Footer with detail */}
        <div className="border-t border-white/8 px-4 py-3 bg-black/15 flex items-center justify-between gap-4 text-[11px] font-mono">
          <div className="flex items-center gap-4 min-w-0">
            <span className="text-white/40">selected:</span>
            <span className="text-white/85 truncate">
              {hover.i >= 0 ? `${fwShort[hover.i]} · ${families[hover.j]} → maturity ${cells[hover.i][hover.j]}/5` : "hover a cell · 144 of 144 mappings live"}
            </span>
          </div>
          <span className="text-[#93D2CC] font-bold tabular-nums whitespace-nowrap">12 × 12</span>
        </div>
      </div>
    </div>
  );
}

function MaturityGauge() {
  const [v, setV] = useStateA(0);
  useEffectA(() => {
    let n = 0;
    const int = setInterval(() => {
      n += 0.05;
      if (n >= 4.0) { n = 4.0; clearInterval(int); }
      setV(n);
    }, 30);
    return () => clearInterval(int);
  }, []);
  const pct = (v / 5) * 100;
  return (
    <div className="rounded-xl border border-white/10 bg-white/[0.04] p-4">
      <div className="flex items-center justify-between mb-2">
        <span className="text-[10px] font-mono uppercase tracking-[0.18em] text-white/55 font-semibold">Overall maturity</span>
        <span className="text-[28px] font-bold text-[#93D2CC] tabular-nums leading-none" style={{ fontFamily: "Geist, sans-serif" }}>
          {v.toFixed(1)}<span className="text-white/35 text-[14px] font-normal"> / 5</span>
        </span>
      </div>
      <div className="h-1.5 rounded-full bg-white/8 overflow-hidden">
        <div className="h-full bg-gradient-to-r from-[#7a6936] via-[#3f6e64] to-[#93D2CC] transition-all duration-500" style={{ width: `${pct}%` }} />
      </div>
    </div>
  );
}

function StatTile({ label, value, sub, accent }) {
  return (
    <div className="rounded-xl border border-white/10 bg-white/[0.04] p-4">
      <p className="text-[10px] font-mono uppercase tracking-[0.18em] text-white/45 font-semibold">{label}</p>
      <p className="mt-2 text-[26px] font-bold text-white tabular-nums leading-none" style={{ fontFamily: "Geist, sans-serif" }}>{value}</p>
      <p className="mt-1.5 text-[11px] text-white/50 font-mono">{sub}</p>
      <span className="absolute" />
    </div>
  );
}

function HeroAtlas({ headline, kicker }) {
  return (
    <section className="relative bg-gradient-to-b from-[#3a4554] via-[#404C5C] to-[#2e3744] text-white overflow-hidden">
      <div className="absolute inset-0 opacity-[0.05] pointer-events-none" style={{
        backgroundImage: "linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)",
        backgroundSize: "24px 24px",
      }} />
      <div className="relative mx-auto max-w-7xl px-6 pt-12 pb-14 md:pt-16 md:pb-20">
        <div className="grid md:grid-cols-12 gap-8 md:gap-10 items-start">
          {/* Left rail — copy */}
          <div className="md:col-span-4">
            <span className="inline-flex items-center gap-2 px-2.5 py-1 rounded-md border border-[#93D2CC]/30 bg-[#93D2CC]/10 text-[10.5px] font-mono uppercase tracking-[0.16em] text-[#93D2CC] font-bold">
              <Icon name="activity" className="h-3 w-3" strokeWidth={2.4} />
              {kicker}
            </span>
            <h1 className="mt-5 text-[36px] md:text-[44px] lg:text-[50px] leading-[1] tracking-[-0.02em] font-semibold" style={{ fontFamily: "Geist, system-ui, sans-serif" }}>
              {headline.split("|").map((p, i) => (
                <span key={i} className={i === 1 ? "text-[#93D2CC]" : ""}>{p}</span>
              ))}
            </h1>
            <p className="mt-4 text-[15px] leading-relaxed text-white/70">
              Every framework, every control, every piece of evidence — in one queryable surface. Built for security teams who need <em className="text-[#93D2CC] not-italic font-semibold">defensible answers</em>, not pretty dashboards.
            </p>

            <div className="mt-6 grid grid-cols-2 gap-2.5">
              <StatTile label="Frameworks" value="16" sub="pre-loaded" />
              <StatTile label="Controls" value="3,247" sub="across all libs" />
              <StatTile label="Mappings" value="11.8k" sub="evidence ↔ control" />
              <StatTile label="Avg score time" value="42s" sub="per artifact" />
            </div>

            <div className="mt-6 flex items-center gap-3">
              <button className="inline-flex items-center gap-2 px-5 py-2.5 rounded-md bg-[#93D2CC] text-[#404C5C] text-[13.5px] font-bold hover:bg-white transition-all">
                Access platform
                <Icon name="arrowRight" className="h-3.5 w-3.5" strokeWidth={2.4} />
              </button>
              <a href="#" className="inline-flex items-center gap-1.5 text-[13px] text-white/65 hover:text-white font-mono">
                <Icon name="code" className="h-3.5 w-3.5" /> See API docs
              </a>
            </div>
          </div>

          {/* Right — coverage atlas + gauge */}
          <div className="md:col-span-8 space-y-4">
            <CoverageMatrix />
            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
              <div className="md:col-span-2"><MaturityGauge /></div>
              <div className="rounded-xl border border-white/10 bg-white/[0.04] p-4">
                <p className="text-[10px] font-mono uppercase tracking-[0.18em] text-white/45 font-semibold">Last assessment</p>
                <p className="mt-2 text-[14px] text-white/85 truncate font-mono">vendor-SOC2-datadog.pdf</p>
                <p className="mt-1 text-[11px] text-white/50 font-mono">2m ago · scored 18 controls · 4.2 avg</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FrameworksAtlas() {
  return (
    <section id="frameworks" className="bg-[#FAF7F4] text-[#404C5C]">
      <div className="mx-auto max-w-6xl px-6 py-20">
        <div className="grid md:grid-cols-12 gap-8 mb-10">
          <div className="md:col-span-5">
            <p className="text-[10.5px] font-mono uppercase tracking-[0.22em] text-[#3a8a82] font-bold">FRAMEWORKS · 16</p>
            <h2 className="mt-3 text-[34px] md:text-[42px] leading-[1.05] tracking-tight font-semibold" style={{ fontFamily: "Geist, system-ui, sans-serif" }}>
              Comprehensive coverage. Stack as many as you need.
            </h2>
          </div>
          <div className="md:col-span-7 self-end">
            <p className="text-[14.5px] leading-relaxed text-[#404C5C]/70">
              Every framework ships with full control libraries — no manual data entry, no community-maintained YAML files, no drift. Updates flow from the source.
            </p>
          </div>
        </div>

        {FRAMEWORK_GROUPS.map((g) => (
          <div key={g.category} className="border-t border-[#404C5C]/12 py-6">
            <div className="grid md:grid-cols-12 gap-4">
              <div className="md:col-span-3">
                <p className="text-[10.5px] font-mono uppercase tracking-[0.18em] text-[#3a8a82] font-bold">{g.category}</p>
                <p className="mt-1 text-[12px] text-[#404C5C]/55 font-mono">{g.frameworks.length} {g.frameworks.length === 1 ? "framework" : "frameworks"}</p>
              </div>
              <div className="md:col-span-9 grid sm:grid-cols-2 lg:grid-cols-3 gap-2">
                {g.frameworks.map((f) => (
                  <div key={f.name} className="flex items-center justify-between rounded-md border border-[#404C5C]/12 bg-white px-3 py-2.5 hover:border-[#3a8a82] hover:bg-[#93D2CC]/8 transition-colors">
                    <div className="min-w-0">
                      <p className="text-[13px] font-semibold text-[#404C5C] truncate">{f.name}</p>
                      <p className="text-[10.5px] text-[#404C5C]/50 font-mono">{f.publisher}</p>
                    </div>
                    <span className="text-[10px] font-mono uppercase tracking-wider text-[#3a8a82] font-bold flex-none">v.live</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function HowItWorksAtlas() {
  const steps = [
    { n: "01", title: "Configure", body: "Workspace, RBAC, framework selection, evidence sources. SAML/SSO out of the box.", points: ["SSO + SCIM", "RBAC roles", "Audit log"] },
    { n: "02", title: "Ingest", body: "API, MCP server, or drag-drop. Files are parsed, hashed, fingerprinted, and version-tracked.", points: ["REST + MCP", "Source connectors", "Immutable trail"] },
    { n: "03", title: "Assess", body: "Control mapping with rationale. Override the model, attach a comment, lock the score for audit.", points: ["Reasoning chain", "Manual override", "Frozen exports"] },
  ];
  return (
    <section id="how" className="bg-[#404C5C] text-white">
      <div className="mx-auto max-w-6xl px-6 py-20">
        <div className="mb-10">
          <p className="text-[10.5px] font-mono uppercase tracking-[0.22em] text-[#93D2CC] font-bold">PROCESS</p>
          <h2 className="mt-3 text-[34px] md:text-[42px] tracking-tight font-semibold" style={{ fontFamily: "Geist, system-ui, sans-serif" }}>How Control+S works</h2>
        </div>
        <div className="grid md:grid-cols-3 gap-3">
          {steps.map((s) => (
            <div key={s.n} className="rounded-xl border border-white/10 bg-white/[0.04] p-5">
              <div className="flex items-center justify-between mb-4">
                <span className="text-[24px] font-mono font-bold text-[#93D2CC]">{s.n}</span>
                <span className="text-[10px] font-mono uppercase tracking-wider text-white/40">step</span>
              </div>
              <h3 className="text-[19px] font-semibold tracking-tight mb-2">{s.title}</h3>
              <p className="text-[13.5px] leading-relaxed text-white/70 mb-4">{s.body}</p>
              <ul className="space-y-1.5 pt-3 border-t border-white/10">
                {s.points.map((p) => (
                  <li key={p} className="flex items-center gap-2 text-[12px] font-mono text-white/65">
                    <Icon name="check" className="h-3 w-3 text-[#93D2CC]" strokeWidth={3} /> {p}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ClosingAtlas() {
  return (
    <section className="bg-[#FAF7F4]">
      <div className="mx-auto max-w-5xl px-6 py-24">
        <div className="rounded-2xl border border-[#404C5C]/15 bg-white p-10 md:p-14 text-center">
          <p className="text-[10.5px] font-mono uppercase tracking-[0.22em] text-[#3a8a82] font-bold">START</p>
          <h2 className="mt-3 text-[36px] md:text-[48px] leading-[1.02] tracking-tight font-semibold text-[#404C5C]" style={{ fontFamily: "Geist, system-ui, sans-serif" }}>
            Sign up. Start assessing in 5 minutes.
          </h2>
          <p className="mt-3 text-[15px] text-[#404C5C]/70 max-w-xl mx-auto">
            Free credits to start. Pay only for what you use. Dedicated deployments available.
          </p>
          <div className="mt-7 flex flex-wrap items-center justify-center gap-3">
            <button className="inline-flex items-center gap-2 px-6 py-3 rounded-md bg-[#404C5C] text-white text-[13.5px] font-bold hover:bg-[#2e3744] transition-all">
              Access platform <Icon name="arrowRight" className="h-3.5 w-3.5" strokeWidth={2.4} />
            </button>
            <a href="mailto:anouar@shadesec.com" className="inline-flex items-center gap-2 px-6 py-3 rounded-md border border-[#404C5C]/20 text-[#404C5C] text-[13.5px] font-semibold hover:bg-[#404C5C]/5 transition-colors">
              Contact for dedicated
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.LP_Atlas = function ({ headline, kicker, sectionOrder }) {
  const sections = {
    proof: <CustomerWall key="proof" tone="light" title="Deployed at" />,
    how: <HowItWorksAtlas key="how" />,
    frameworks: <FrameworksAtlas key="frameworks" />,
  };
  return (
    <div className="bg-[#404C5C]">
      <TopNav variant="dark" />
      <HeroAtlas headline={headline} kicker={kicker} />
      {sectionOrder.map((k) => sections[k])}
      <ClosingAtlas />
      <Footer tone="dark" />
    </div>
  );
};
})();