// V5 — The Ledger
// Brutalist & opinionated. Scrolling marquee of control IDs as the hero.
// Mono type, sharp edges, oversized voice. The bold swing.

(function () {
const { Icon, Logo, TopNav, Footer, CustomerWall, FRAMEWORK_GROUPS, SAMPLE_CONTROLS } = window.LP;
const { useState: useStateL, useEffect: useEffectL, useRef: useRefL } = React;

// Generate a long line of "control IDs" for the marquee
function makeIds(n) {
  const out = [];
  const base = SAMPLE_CONTROLS.map(c => c.id);
  for (let i = 0; i < n; i++) {
    out.push(base[i % base.length]);
    out.push(`${(i % 18) + 1}.${(i % 6) + 1}.${(i % 5) + 1}`);
  }
  return out;
}

function Marquee({ direction = "left", speed = 60, children, className = "" }) {
  // CSS-only marquee, doubled content
  const dur = `${speed}s`;
  return (
    <div className={`relative overflow-hidden ${className}`}>
      <div
        className="flex gap-8 whitespace-nowrap"
        style={{
          animation: `lp-marquee-${direction} ${dur} linear infinite`,
          width: "max-content",
        }}
      >
        {children}{children}
      </div>
    </div>
  );
}

function HeroLedger({ headline, kicker }) {
  const ids = makeIds(40);
  return (
    <section className="relative bg-[#FAF7F4] text-[#404C5C] overflow-hidden border-b-2 border-[#404C5C]">
      <style>{`
        @keyframes lp-marquee-left {
          from { transform: translateX(0); }
          to { transform: translateX(-50%); }
        }
        @keyframes lp-marquee-right {
          from { transform: translateX(-50%); }
          to { transform: translateX(0); }
        }
      `}</style>

      {/* Top ticker */}
      <div className="border-b-2 border-[#404C5C] bg-[#404C5C] text-[#FAF7F4] py-2.5">
        <Marquee speed={80} direction="left">
          {Array.from({ length: 8 }).map((_, i) => (
            <span key={i} className="inline-flex items-center gap-3 text-[12px] font-mono font-bold uppercase tracking-[0.18em]">
              <span className="text-[#93D2CC]">●</span> 3,247 controls indexed
              <span className="text-white/30">/</span>
              <span className="text-[#93D2CC]">●</span> 16 frameworks live
              <span className="text-white/30">/</span>
              <span className="text-[#93D2CC]">●</span> evidence in, maturity out
              <span className="text-white/30">/</span>
              <span className="text-[#93D2CC]">●</span> no spreadsheets allowed
              <span className="text-white/30 mx-3">·</span>
            </span>
          ))}
        </Marquee>
      </div>

      <div className="mx-auto max-w-7xl px-6 pt-14 md:pt-20 pb-10 md:pb-14">
        <div className="grid md:grid-cols-12 gap-8 items-end">
          <div className="md:col-span-7">
            <p className="text-[11px] font-mono uppercase tracking-[0.28em] font-bold text-[#3a8a82]">{kicker}</p>
            <h1 className="mt-4 text-[64px] md:text-[104px] lg:text-[128px] leading-[0.85] tracking-[-0.04em] font-black uppercase" style={{ fontFamily: "Geist, system-ui, sans-serif" }}>
              {headline.split("|").map((p, i) => (
                <span key={i} className={`block ${i === 1 ? "text-[#3a8a82] italic" : ""}`} style={i === 1 ? { fontStyle: "italic", fontWeight: 800 } : {}}>
                  {p}
                </span>
              ))}
            </h1>
          </div>
          <div className="md:col-span-5 md:pb-3">
            <div className="border-l-2 border-[#404C5C] pl-5">
              <p className="text-[16px] md:text-[18px] leading-[1.4] text-[#404C5C]/90 font-medium">
                Control assessment, ledger-style. <span className="text-[#3a8a82]">Every artifact accounted for.</span> Every score defensible. Every framework, in a single book.
              </p>
              <div className="mt-6 flex flex-wrap items-center gap-3">
                <button className="inline-flex items-center gap-2 px-6 py-3 bg-[#404C5C] text-white text-[13px] font-bold uppercase tracking-wider hover:bg-[#2e3744] transition-all border-2 border-[#404C5C]">
                  Open the ledger
                  <Icon name="arrowRight" className="h-3.5 w-3.5" strokeWidth={3} />
                </button>
                <a href="#how" className="text-[12.5px] font-mono uppercase tracking-wider font-bold text-[#404C5C] underline underline-offset-4 hover:text-[#3a8a82]">
                  How it works ↘
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Big control-ID marquees, two rows opposite directions */}
      <div className="space-y-2 py-4 border-y-2 border-[#404C5C]">
        <Marquee direction="left" speed={90}>
          {ids.map((id, i) => (
            <span key={`a-${i}`} className="inline-flex items-center gap-3 text-[44px] md:text-[72px] font-black tracking-tight text-[#404C5C]/15 hover:text-[#3a8a82] transition-colors" style={{ fontFamily: "Geist, sans-serif" }}>
              {id}<span className="text-[#3a8a82]">·</span>
            </span>
          ))}
        </Marquee>
        <Marquee direction="right" speed={120}>
          {["MFA","ASSET INVENTORY","ENCRYPTION","ACCESS REVIEW","INCIDENT RESPONSE","BACKUP","VULN MGMT","LOGGING","TRAINING","VENDOR RISK","DLP","NETWORK SEG"].map((label, i) => (
            <span key={`b-${i}`} className="inline-flex items-center gap-4 text-[36px] md:text-[56px] font-black uppercase tracking-tight" style={{ fontFamily: "Geist, sans-serif" }}>
              <span className="text-[#404C5C]">{label}</span>
              <span className="text-[#3a8a82]">★</span>
            </span>
          ))}
        </Marquee>
      </div>

      {/* Bottom strip — manifesto bullets */}
      <div className="bg-[#FAF7F4]">
        <div className="mx-auto max-w-7xl px-6 py-10">
          <div className="grid md:grid-cols-4 gap-0 divide-x-2 divide-[#404C5C]/15">
            {[
              { k: "I.", t: "Every score has a reason", d: "Hover any maturity rating, see the evidence and the logic. No black boxes." },
              { k: "II.", t: "Every framework, simultaneously", d: "Score once. Map to CIS, NIST, ISO, SOC 2, PCI — at the same time, with no extra work." },
              { k: "III.", t: "You stay in charge", d: "Override anything. Lock anything. The audit trail is yours, not ours." },
              { k: "IV.", t: "No GRC tax", d: "Free credits to start. Pay only for what you assess. Cancel by closing the tab." },
            ].map((b) => (
              <div key={b.k} className="px-5 first:pl-0 last:pr-0">
                <p className="text-[28px] font-black tracking-tight text-[#3a8a82] mb-2" style={{ fontFamily: "Geist, sans-serif" }}>{b.k}</p>
                <p className="text-[15px] font-bold text-[#404C5C] mb-1.5">{b.t}</p>
                <p className="text-[13px] leading-snug text-[#404C5C]/65">{b.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function HowItWorksLedger() {
  const steps = [
    { n: "01", title: "Open a ledger", body: "One workspace per organization. Frameworks selected. Controls listed.", weight: "5 minutes" },
    { n: "02", title: "Post entries", body: "Every piece of evidence is an entry. Mapped, scored, dated, signed.", weight: "Continuous" },
    { n: "03", title: "Close the books", body: "Lock a snapshot for your audit. Defensible, frozen, exportable.", weight: "On demand" },
  ];
  return (
    <section id="how" className="bg-[#FAF7F4]">
      <div className="mx-auto max-w-7xl px-6 py-20 border-t-2 border-[#404C5C]">
        <div className="grid md:grid-cols-12 gap-6 mb-10">
          <h2 className="md:col-span-8 text-[44px] md:text-[64px] leading-[0.92] tracking-[-0.02em] font-black uppercase text-[#404C5C]" style={{ fontFamily: "Geist, sans-serif" }}>
            How the ledger keeps itself.
          </h2>
          <p className="md:col-span-4 self-end text-[14px] text-[#404C5C]/65 leading-relaxed">
            Control+S replaces three things: the spreadsheet, the SharePoint, and the half of every audit-prep call that's spent looking for a screenshot.
          </p>
        </div>
        <div className="grid md:grid-cols-3 border-y-2 border-[#404C5C]">
          {steps.map((s, i) => (
            <div key={s.n} className={`p-7 ${i < 2 ? "md:border-r-2 border-[#404C5C]" : ""} ${i > 0 ? "border-t-2 md:border-t-0 border-[#404C5C]" : ""}`}>
              <div className="flex items-baseline justify-between mb-5">
                <span className="text-[56px] font-black text-[#3a8a82] leading-none" style={{ fontFamily: "Geist, sans-serif" }}>{s.n}</span>
                <span className="text-[10px] font-mono uppercase tracking-[0.2em] font-bold text-[#404C5C]/55">{s.weight}</span>
              </div>
              <h3 className="text-[22px] font-black uppercase tracking-tight text-[#404C5C] mb-2" style={{ fontFamily: "Geist, sans-serif" }}>{s.title}</h3>
              <p className="text-[14px] leading-relaxed text-[#404C5C]/75">{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FrameworksLedger() {
  // List as ledger entries
  const all = FRAMEWORK_GROUPS.flatMap(g => g.frameworks.map(f => ({ ...f, group: g.category })));
  return (
    <section id="frameworks" className="bg-[#404C5C] text-white">
      <div className="mx-auto max-w-7xl px-6 py-20">
        <div className="grid md:grid-cols-12 gap-6 mb-10">
          <h2 className="md:col-span-8 text-[44px] md:text-[64px] leading-[0.92] tracking-[-0.02em] font-black uppercase" style={{ fontFamily: "Geist, sans-serif" }}>
            The library.
          </h2>
          <p className="md:col-span-4 self-end text-[14px] text-white/65 leading-relaxed">
            16 frameworks, ~3,247 controls, all on the shelf. Add to your ledger as needed.
          </p>
        </div>
        <div className="border-t-2 border-white">
          <div className="grid grid-cols-12 px-4 py-2 border-b-2 border-white/30 text-[10px] font-mono uppercase tracking-[0.2em] font-bold text-white/55">
            <span className="col-span-1">№</span>
            <span className="col-span-6">Framework</span>
            <span className="col-span-2">Publisher</span>
            <span className="col-span-2">Family</span>
            <span className="col-span-1 text-right">Status</span>
          </div>
          {all.map((f, i) => (
            <div key={f.name} className="grid grid-cols-12 px-4 py-3 border-b border-white/10 hover:bg-white/[0.04] transition-colors items-center">
              <span className="col-span-1 text-[12px] font-mono text-white/40 tabular-nums">{String(i + 1).padStart(2, "0")}</span>
              <span className="col-span-6 text-[15px] font-bold tracking-tight">{f.name}</span>
              <span className="col-span-2 text-[12px] font-mono text-white/65">{f.publisher}</span>
              <span className="col-span-2 text-[11px] font-mono uppercase tracking-wider text-[#93D2CC]">{f.group.split(" ")[0]}</span>
              <span className="col-span-1 text-right text-[11px] font-mono uppercase tracking-wider font-bold text-[#93D2CC]">LIVE ●</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ClosingLedger() {
  return (
    <section className="bg-[#3a8a82] text-white border-t-2 border-[#404C5C]">
      <div className="mx-auto max-w-7xl px-6 py-24 md:py-28">
        <div className="grid md:grid-cols-12 gap-8 items-end">
          <h2 className="md:col-span-8 text-[56px] md:text-[88px] leading-[0.9] tracking-[-0.03em] font-black uppercase" style={{ fontFamily: "Geist, sans-serif" }}>
            Open<br/>your<br/>ledger.
          </h2>
          <div className="md:col-span-4">
            <p className="text-[15px] leading-relaxed mb-6 text-white/90">
              Free credits, no card. For dedicated deployments, write directly to the founder.
            </p>
            <div className="flex flex-col gap-3">
              <button className="inline-flex items-center justify-between gap-2 px-5 py-3.5 bg-[#404C5C] text-white text-[13px] font-bold uppercase tracking-wider hover:bg-[#2e3744] transition-all">
                <span>Access platform</span>
                <Icon name="arrowRight" className="h-4 w-4" strokeWidth={3} />
              </button>
              <a href="mailto:anouar@shadesec.com" className="inline-flex items-center justify-between gap-2 px-5 py-3.5 bg-white/10 border-2 border-white text-white text-[13px] font-bold uppercase tracking-wider hover:bg-white hover:text-[#3a8a82] transition-all">
                <span>Talk to founder</span>
                <Icon name="arrowUpRight" className="h-4 w-4" strokeWidth={3} />
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.LP_Ledger = function ({ headline, kicker, sectionOrder }) {
  const sections = {
    proof: <CustomerWall key="proof" tone="light" title="On the ledger of" />,
    how: <HowItWorksLedger key="how" />,
    frameworks: <FrameworksLedger key="frameworks" />,
  };
  return (
    <div className="bg-[#FAF7F4]">
      <TopNav variant="light" />
      <HeroLedger headline={headline} kicker={kicker} />
      {sectionOrder.map((k) => sections[k])}
      <ClosingLedger />
      <Footer tone="dark" />
    </div>
  );
};
})();