// V1 — Editorial Manifesto
// Magazine-style: oversized serif headline, sans body, hairline rules,
// pull quotes, restrained motion. The "serious / opinionated" voice.

(function () {
const { Icon, Logo, TopNav, Footer, CustomerWall, FRAMEWORK_GROUPS, SAMPLE_CONTROLS } = window.LP;
const { useState: useStateE, useEffect: useEffectE } = React;

function HeroEditorial({ headline, kicker }) {
  // Subtle hero "pulse" — a marker drifts across a hairline as if assessing
  const [t, setT] = useStateE(0);
  useEffectE(() => {
    let raf;
    const loop = (ts) => {
      setT((ts / 4000) % 1);
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);

  return (
    <section className="relative bg-[#FAF7F4] text-[#404C5C] overflow-hidden">
      <div className="mx-auto max-w-6xl px-6 pt-14 md:pt-20 pb-16 md:pb-24">
        {/* Issue / dateline */}
        <div className="flex items-center justify-between text-[11px] uppercase tracking-[0.22em] text-[#404C5C]/55 font-semibold border-b border-[#404C5C]/15 pb-3">
          <span>Vol. I &nbsp;·&nbsp; A platform for control assessment</span>
          <span className="hidden md:inline">{new Date().toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })}</span>
        </div>

        {/* Kicker */}
        <p className="mt-10 text-[12px] uppercase tracking-[0.28em] text-[#93D2CC] font-bold" style={{ color: "#3a8a82" }}>
          {kicker}
        </p>

        {/* Headline — serif display */}
        <h1 className="mt-4 text-[44px] md:text-[76px] lg:text-[88px] leading-[0.95] tracking-[-0.02em] font-medium text-[#404C5C]" style={{ fontFamily: '"Source Serif 4", "Source Serif Pro", Georgia, serif', fontWeight: 500 }}>
          {headline.split("|").map((part, i) => (
            <span key={i} className={i === 1 ? "italic font-normal" : ""} style={i === 1 ? { color: "#3a8a82", fontWeight: 400 } : {}}>
              {part}
            </span>
          ))}
        </h1>

        {/* Three-column meta — like a masthead */}
        <div className="mt-12 grid gap-8 md:grid-cols-12 md:gap-10 border-t border-[#404C5C]/15 pt-8">
          <div className="md:col-span-4">
            <p className="text-[10.5px] uppercase tracking-[0.22em] text-[#404C5C]/55 font-semibold mb-2">The thesis</p>
            <p className="text-[15px] leading-relaxed text-[#404C5C]/85" style={{ fontFamily: '"Source Serif 4", Georgia, serif' }}>
              Compliance teams have spreadsheets. Security teams have GRCs. <em>Neither</em> tells you whether your controls actually work. We built one that does.
            </p>
          </div>
          <div className="md:col-span-4">
            <p className="text-[10.5px] uppercase tracking-[0.22em] text-[#404C5C]/55 font-semibold mb-2">What it does</p>
            <ul className="space-y-1.5 text-[14px] text-[#404C5C]/80">
              <li className="flex gap-2"><span className="text-[#3a8a82] font-bold">·</span>Maps evidence to controls.</li>
              <li className="flex gap-2"><span className="text-[#3a8a82] font-bold">·</span>Scores maturity, 1 to 5.</li>
              <li className="flex gap-2"><span className="text-[#3a8a82] font-bold">·</span>Tracks every framework.</li>
              <li className="flex gap-2"><span className="text-[#3a8a82] font-bold">·</span>Gives you the "why".</li>
            </ul>
          </div>
          <div className="md:col-span-4">
            <p className="text-[10.5px] uppercase tracking-[0.22em] text-[#404C5C]/55 font-semibold mb-2">Get started</p>
            <button className="group inline-flex items-center gap-2 text-[15px] font-semibold text-[#404C5C] hover:text-[#3a8a82] transition-colors">
              Access the platform
              <Icon name="arrowRight" className="h-4 w-4 transition-transform group-hover:translate-x-1" strokeWidth={2.2} />
            </button>
            <p className="mt-2 text-[12px] text-[#404C5C]/55">Free credits to start. Pay only for what you use.</p>
          </div>
        </div>

        {/* Hairline scrubber — restrained motion */}
        <div className="mt-14 relative">
          <div className="h-px bg-[#404C5C]/20" />
          <div
            className="absolute -top-1 h-2 w-2 rounded-full bg-[#3a8a82]"
            style={{ left: `${t * 100}%`, transform: "translateX(-50%)", transition: "background-color 0.3s" }}
          />
          <div className="mt-2 flex items-center justify-between text-[10.5px] uppercase tracking-[0.18em] text-[#404C5C]/45">
            <span>Evidence ingested</span>
            <span>Controls mapped</span>
            <span>Maturity scored</span>
            <span>Audit-ready</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function PullQuote() {
  return (
    <section className="bg-[#404C5C] text-white">
      <div className="mx-auto max-w-5xl px-6 py-16 md:py-20">
        <div className="grid gap-8 md:grid-cols-12 md:items-center">
          <div className="md:col-span-2 flex md:justify-end">
            <span className="text-[#93D2CC] text-[64px] leading-none font-serif" style={{ fontFamily: '"Source Serif 4", Georgia, serif' }}>"</span>
          </div>
          <blockquote className="md:col-span-10 text-[26px] md:text-[34px] leading-[1.2] tracking-tight font-medium" style={{ fontFamily: '"Source Serif 4", Georgia, serif', fontWeight: 500 }}>
            We replaced four spreadsheets, a SharePoint, and the second half of every audit prep call with one platform. Our SOC 2 prep dropped from <em className="text-[#93D2CC]">eleven weeks</em> to <em className="text-[#93D2CC]">nine days</em>.
          </blockquote>
        </div>
        <div className="mt-6 md:ml-[16.66%] flex items-center gap-3 text-[13px] text-white/65">
          <span className="h-7 w-7 rounded-full bg-[#93D2CC]/30 flex items-center justify-center text-[10px] font-bold text-white">JM</span>
          <span><b className="text-white">Jordan Marsh</b> · Head of Security, Mercury Labs</span>
        </div>
      </div>
    </section>
  );
}

function HowItWorksEditorial() {
  const steps = [
    { n: "01", title: "Set up your organization", body: "Workspace, preferences, teammates. Five minutes, not five days.", side: "Five minutes." },
    { n: "02", title: "Choose your frameworks", body: "Pre-loaded control libraries — CIS, NIST, ISO 27001, SOC 2, PCI, FedRAMP, DORA, GDPR. Stack them.", side: "Stack them." },
    { n: "03", title: "Submit and review evidence", body: "Upload the doc. We map it to controls, score maturity, and explain the reasoning. You decide what to publish.", side: "You stay in charge." },
  ];
  return (
    <section id="how" className="bg-[#FAF7F4]">
      <div className="mx-auto max-w-6xl px-6 py-20 md:py-24">
        <div className="grid gap-3 md:grid-cols-12 mb-10 md:mb-14">
          <p className="md:col-span-4 text-[11px] uppercase tracking-[0.22em] text-[#404C5C]/55 font-semibold">Section II</p>
          <h2 className="md:col-span-8 text-[32px] md:text-[44px] leading-[1.05] tracking-tight text-[#404C5C]" style={{ fontFamily: '"Source Serif 4", Georgia, serif', fontWeight: 500 }}>
            Three steps. <em className="text-[#3a8a82]">No drama.</em>
          </h2>
        </div>
        <div className="space-y-0 border-t border-[#404C5C]/15">
          {steps.map((s) => (
            <article key={s.n} className="grid gap-4 md:grid-cols-12 md:gap-10 py-7 border-b border-[#404C5C]/15">
              <div className="md:col-span-2">
                <span className="text-[44px] leading-none font-medium text-[#3a8a82]" style={{ fontFamily: '"Source Serif 4", Georgia, serif' }}>{s.n}</span>
              </div>
              <div className="md:col-span-7">
                <h3 className="text-[22px] md:text-[26px] tracking-tight text-[#404C5C] mb-1" style={{ fontFamily: '"Source Serif 4", Georgia, serif' }}>{s.title}</h3>
                <p className="text-[15px] leading-relaxed text-[#404C5C]/75 max-w-2xl">{s.body}</p>
              </div>
              <div className="md:col-span-3 flex md:justify-end items-end">
                <span className="text-[12px] uppercase tracking-[0.18em] font-semibold text-[#404C5C]/45">{s.side}</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function FrameworksEditorial() {
  const total = FRAMEWORK_GROUPS.reduce((a, g) => a + g.frameworks.length, 0);
  return (
    <section id="frameworks" className="bg-[#404C5C] text-white">
      <div className="mx-auto max-w-6xl px-6 py-20 md:py-24">
        <div className="grid gap-3 md:grid-cols-12 mb-10">
          <p className="md:col-span-4 text-[11px] uppercase tracking-[0.22em] text-[#93D2CC] font-semibold">Section III · {total} frameworks</p>
          <h2 className="md:col-span-8 text-[32px] md:text-[44px] leading-[1.05] tracking-tight" style={{ fontFamily: '"Source Serif 4", Georgia, serif', fontWeight: 500 }}>
            Every standard your auditor cares about — <em className="text-[#93D2CC]">already loaded.</em>
          </h2>
        </div>
        <div className="grid gap-10 md:grid-cols-3 border-t border-white/15 pt-8">
          {FRAMEWORK_GROUPS.map((group) => (
            <div key={group.category}>
              <p className="text-[11px] uppercase tracking-[0.18em] text-[#93D2CC] font-semibold mb-4">{group.category}</p>
              <ul className="space-y-3">
                {group.frameworks.map((f) => (
                  <li key={f.name} className="flex items-baseline justify-between border-b border-white/8 pb-2.5">
                    <span className="text-[14.5px] text-white/90" style={{ fontFamily: '"Source Serif 4", Georgia, serif' }}>{f.name}</span>
                    <span className="text-[10.5px] uppercase tracking-wider text-white/40 font-mono">{f.publisher}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <p className="mt-10 text-center text-[13px] text-white/55">
          Need something more obscure? <a href="#" className="text-[#93D2CC] underline-offset-4 hover:underline">Tell us.</a>
        </p>
      </div>
    </section>
  );
}

function ClosingEditorial() {
  return (
    <section className="bg-[#FAF7F4]">
      <div className="mx-auto max-w-5xl px-6 py-24 md:py-28">
        <div className="border-t-2 border-b-2 border-[#404C5C] py-12 md:py-16 text-center">
          <p className="text-[11px] uppercase tracking-[0.22em] text-[#3a8a82] font-bold mb-5">— The end of section —</p>
          <h2 className="text-[40px] md:text-[64px] leading-[0.98] tracking-[-0.02em] text-[#404C5C]" style={{ fontFamily: '"Source Serif 4", Georgia, serif', fontWeight: 500 }}>
            Start with free credits. <em className="text-[#3a8a82]">Read the rest yourself.</em>
          </h2>
          <button className="mt-9 inline-flex items-center gap-2 px-7 py-3 rounded-full bg-[#404C5C] text-white text-[14px] font-semibold hover:bg-[#2e3744] transition-colors">
            Access platform
            <Icon name="arrowRight" className="h-4 w-4" strokeWidth={2.2} />
          </button>
          <p className="mt-5 text-[13px] text-[#404C5C]/60">
            For dedicated deployments, <a href="mailto:anouar@shadesec.com" className="font-medium underline underline-offset-4">anouar@shadesec.com</a>.
          </p>
        </div>
      </div>
    </section>
  );
}

window.LP_Editorial = function ({ headline, kicker, sectionOrder }) {
  const sections = {
    proof: <CustomerWall key="proof" tone="light" title="Featured in dispatches from" />,
    how: <HowItWorksEditorial key="how" />,
    frameworks: <FrameworksEditorial key="frameworks" />,
    quote: <PullQuote key="quote" />,
  };
  return (
    <div className="bg-[#FAF7F4]">
      <TopNav variant="light" />
      <HeroEditorial headline={headline} kicker={kicker} />
      {sectionOrder.map((k) => sections[k])}
      <ClosingEditorial />
      <Footer tone="dark" />
    </div>
  );
};
})();