// Shared chrome + icons + framework data for all landing-page variations.
// Each variation imports these as window.LP.*

(function () {
const FRAMEWORK_GROUPS = [
  {
    category: "Cybersecurity",
    frameworks: [
      { name: "CIS Controls v8.1.2", publisher: "CIS" },
      { name: "NIST CSF v2.0", publisher: "NIST" },
      { name: "NIST SP 800-53 rev 5", publisher: "NIST" },
      { name: "NIST SP 800-171 rev 3", publisher: "NIST" },
      { name: "NIST SP 800-171 rev 2", publisher: "NIST" },
      { name: "CMMC 2.0", publisher: "US DoD" },
      { name: "CPCSC Level 1", publisher: "PSPC Canada" },
      { name: "CPCSC Level 2 (ITSP 10.171)", publisher: "CCCS Canada" },
    ],
  },
  {
    category: "Governance",
    frameworks: [{ name: "ISO/IEC 27001:2022", publisher: "ISO/IEC" }],
  },
  {
    category: "Compliance and privacy",
    frameworks: [
      { name: "SOC 2 Trust Services Criteria", publisher: "AICPA" },
      { name: "PCI DSS 4.0", publisher: "PCI SSC" },
      { name: "FedRAMP rev 5", publisher: "US GSA" },
      { name: "DORA", publisher: "EU" },
      { name: "NIS 2 Directive", publisher: "EU" },
      { name: "GDPR", publisher: "EU" },
    ],
  },
];

const SOCIAL_PROOF = [
  { name: "Mercury Labs", kind: "fintech" },
  { name: "Helix BioScience", kind: "biotech" },
  { name: "Northwind Aerospace", kind: "defense" },
  { name: "Lumen Health", kind: "healthcare" },
  { name: "Beacon Logistics", kind: "logistics" },
  { name: "Vector Robotics", kind: "robotics" },
];

const SAMPLE_CONTROLS = [
  { id: "1.1.1", title: "Establish and Maintain Detailed Enterprise Asset Inventory", score: 5 },
  { id: "1.1.2", title: "Address Unauthorized Assets", score: 4 },
  { id: "2.1.1", title: "Ensure Software is Currently Supported", score: 5 },
  { id: "3.1.1", title: "Establish and Maintain a Data Management Process", score: 3 },
  { id: "5.3.3", title: "Require MFA for Externally Exposed Applications", score: 5 },
  { id: "6.1.2", title: "Require MFA for Remote Network Access", score: 2 },
  { id: "8.1.1", title: "Establish and Maintain an Audit Log Management Process", score: 4 },
  { id: "11.2.1", title: "Perform Automated Backups", score: 5 },
  { id: "12.6.1", title: "Use of Approved Network Authentication Protocols", score: null },
  { id: "13.1.1", title: "Centralize Security Event Alerting", score: 3 },
  { id: "14.1.1", title: "Establish and Maintain a Security Awareness Program", score: 4 },
  { id: "16.1.1", title: "Establish and Maintain a Secure Application Development Process", score: 3 },
];

// ----- Lucide-style icons (subset) -----
function Icon({ name, className = "h-4 w-4", strokeWidth = 1.75 }) {
  const paths = {
    arrowRight: <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></>,
    arrowUpRight: <><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></>,
    check: <polyline points="20 6 9 17 4 12"/>,
    checkCircle: <><circle cx="12" cy="12" r="10"/><polyline points="9 12 12 15 16 10"/></>,
    plus: <><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></>,
    sparkles: <><path d="M12 3l1.9 4.6L18.5 9l-4.6 1.9L12 15l-1.9-4.6L5.5 9l4.6-1.4L12 3z"/><path d="M19 15l.9 1.6 1.6.9-1.6.9-.9 1.6-.9-1.6-1.6-.9 1.6-.9.9-1.6z"/></>,
    upload: <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></>,
    file: <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></>,
    folder: <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>,
    shield: <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>,
    shieldCheck: <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/></>,
    building: <><rect x="4" y="2" width="16" height="20" rx="2"/><line x1="9" y1="6" x2="9" y2="6"/><line x1="15" y1="6" x2="15" y2="6"/><line x1="9" y1="11" x2="9" y2="11"/><line x1="15" y1="11" x2="15" y2="11"/><line x1="9" y1="16" x2="9" y2="16"/><line x1="15" y1="16" x2="15" y2="16"/></>,
    zap: <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>,
    chart: <><line x1="3" y1="3" x2="3" y2="21"/><line x1="3" y1="21" x2="21" y2="21"/><polyline points="7 14 11 10 14 13 20 7"/></>,
    grid: <><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></>,
    layers: <><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></>,
    target: <><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></>,
    play: <polygon points="5 3 19 12 5 21 5 3"/>,
    quote: <><path d="M3 21c3-1 6-3 6-9V7H3v8h3c0 3-1 5-3 6zm12 0c3-1 6-3 6-9V7h-6v8h3c0 3-1 5-3 6z"/></>,
    star: <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>,
    chevronRight: <polyline points="9 18 15 12 9 6"/>,
    chevronDown: <polyline points="6 9 12 15 18 9"/>,
    menu: <><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></>,
    code: <><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></>,
    eye: <><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></>,
    activity: <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>,
    clock: <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
    fileText: <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></>,
    lock: <><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></>,
    cog: <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></>,
  };
  const inner = paths[name];
  if (!inner) return null;
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {inner}
    </svg>
  );
}

// ----- Logo (matches the +S mark inferred from the app) -----
function Logo({ size = 28, white = true, withText = true }) {
  const fg = white ? "#FFFFFF" : "#404C5C";
  const accent = "#93D2CC";
  return (
    <span className="inline-flex items-center gap-2.5">
      <span className="relative inline-flex items-center justify-center" style={{ width: size, height: size }}>
        <span className="absolute inset-0 rounded-md" style={{ background: accent }} />
        <span className="relative font-bold text-[13px] tracking-tight" style={{ color: "#404C5C", fontFamily: "Geist, system-ui, sans-serif" }}>+S</span>
      </span>
      {withText && (
        <span className="text-[15px] font-semibold tracking-tight" style={{ color: fg, fontFamily: "Geist, system-ui, sans-serif" }}>
          Control<span style={{ color: accent }}>+S</span>
        </span>
      )}
    </span>
  );
}

// ----- Top nav, slightly upgraded -----
function TopNav({ variant = "dark", trailing }) {
  const isDark = variant === "dark";
  return (
    <nav className={`sticky top-0 z-40 backdrop-blur-xl ${isDark ? "bg-[#404C5C]/85 border-b border-white/8" : "bg-[#FAF7F4]/85 border-b border-[#404C5C]/10"}`}>
      <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-3.5">
        <Logo white={isDark} />
        <div className="hidden md:flex items-center gap-7 text-[13.5px]">
          <a href="#how" className={`transition-colors ${isDark ? "text-white/65 hover:text-white" : "text-[#404C5C]/65 hover:text-[#404C5C]"}`}>How it works</a>
          <a href="#frameworks" className={`transition-colors ${isDark ? "text-white/65 hover:text-white" : "text-[#404C5C]/65 hover:text-[#404C5C]"}`}>Frameworks</a>
          <a href="#proof" className={`transition-colors ${isDark ? "text-white/65 hover:text-white" : "text-[#404C5C]/65 hover:text-[#404C5C]"}`}>Customers</a>
          <a href="#pricing" className={`transition-colors ${isDark ? "text-white/65 hover:text-white" : "text-[#404C5C]/65 hover:text-[#404C5C]"}`}>Pricing</a>
        </div>
        <div className="flex items-center gap-3">
          {trailing}
          <button className={`hidden md:inline-flex items-center gap-2 px-4 py-2 rounded-full text-[13px] font-semibold transition-all ${isDark ? "bg-[#93D2CC] text-[#404C5C] hover:bg-white shadow-[0_8px_24px_-10px_rgba(147,210,204,0.55)]" : "bg-[#404C5C] text-white hover:bg-[#2e3744]"}`}>
            Access platform
            <Icon name="arrowRight" className="h-3.5 w-3.5" strokeWidth={2.4} />
          </button>
        </div>
      </div>
    </nav>
  );
}

// ----- Footer (light + dark) -----
function Footer({ tone = "dark" }) {
  const isDark = tone === "dark";
  return (
    <footer className={isDark ? "bg-[#404C5C] border-t border-white/10" : "bg-[#FAF7F4] border-t border-[#404C5C]/10"}>
      <div className="mx-auto max-w-6xl px-6 py-10">
        <div className="flex flex-col items-start gap-6 md:flex-row md:items-center md:justify-between">
          <Logo white={isDark} />
          <nav className={`flex flex-wrap items-center gap-x-5 gap-y-2 text-[13px] ${isDark ? "text-white/70" : "text-[#404C5C]/70"}`}>
            <a href="#" className="hover:opacity-100 transition-opacity">Terms</a>
            <a href="#" className="hover:opacity-100 transition-opacity">Privacy</a>
            <a href="#" className="hover:opacity-100 transition-opacity">DPA</a>
            <a href="#" className="hover:opacity-100 transition-opacity">Trust</a>
            <a href="#" className="hover:opacity-100 transition-opacity">security.txt</a>
          </nav>
        </div>
        <div className={`mt-6 flex flex-col items-start gap-1.5 border-t pt-5 text-[11.5px] md:flex-row md:items-center md:justify-between ${isDark ? "border-white/10 text-white/45" : "border-[#404C5C]/10 text-[#404C5C]/55"}`}>
          <span>© 2026 ShadeSec Inc. All rights reserved.</span>
          <span>Control+S is a product of ShadeSec Inc.</span>
        </div>
      </div>
    </footer>
  );
}

// ----- Customer logo wall (used by several variations) -----
function CustomerWall({ tone = "dark", title = "Trusted by security teams at" }) {
  const isDark = tone === "dark";
  return (
    <section id="proof" className={isDark ? "bg-[#404C5C]" : "bg-[#FAF7F4]"}>
      <div className="mx-auto max-w-6xl px-6 py-14">
        <p className={`text-center text-[11px] font-semibold uppercase tracking-[0.2em] ${isDark ? "text-white/45" : "text-[#404C5C]/55"}`}>
          {title}
        </p>
        <div className="mt-7 grid grid-cols-2 gap-y-6 sm:grid-cols-3 lg:grid-cols-6">
          {SOCIAL_PROOF.map((c) => (
            <div key={c.name} className="flex items-center justify-center">
              <span className={`text-[15px] font-semibold tracking-tight ${isDark ? "text-white/60" : "text-[#404C5C]/55"}`} style={{ fontFamily: "Geist, system-ui, sans-serif" }}>
                {c.name}
              </span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.LP = {
  FRAMEWORK_GROUPS,
  SOCIAL_PROOF,
  SAMPLE_CONTROLS,
  Icon,
  Logo,
  TopNav,
  Footer,
  CustomerWall,
};
})();