// Shared marketing nav + footer + customer data
const { Btn: MBtn, Pill: MPill, LoopMark: MLogo, Avatar: MAvatar } = window.UI;

// Customer mock data
const customers = [
  {
    id: "winforlife88",
    name: "WINFORLIFE88",
    industry: "iGaming · Manila",
    initials: "WFL",
    color: "#A6F84A",
    quote: "We collapsed three live-chat tools into Loop and got 6 minutes back on every withdrawal ticket. Our cash-out concierge runs on autopilot now.",
    person: "Chiqui Domingo",
    title: "Head of Operations",
    avatar: "CD",
    avatarColor: "#A6F84A",
    metrics: [{ v: "−42%", l: "First response time" }, { v: "+18pp", l: "CSAT lift" }, { v: "3", l: "Brands consolidated" }],
    featured: true,
  },
  {
    id: "affiliate-hub",
    name: "Affiliate Hub PH",
    industry: "Affiliate Network · Cebu",
    initials: "AH",
    color: "#7AB6FF",
    quote: "Loop routes partner KYC questions straight to the right agent. We stopped losing affiliates to slow email replies.",
    person: "Jerome Battung",
    title: "Partnerships Lead",
    avatar: "JB",
    avatarColor: "#7AB6FF",
    metrics: [{ v: "<30s", l: "Avg first reply" }, { v: "94%", l: "Partner CSAT" }, { v: "12", l: "Languages routed" }],
  },
  {
    id: "tripai",
    name: "TripAI PH",
    industry: "Travel AI · Beta",
    initials: "TA",
    color: "#FF9DD2",
    quote: "Loop's per-site theming let us match the pastel TripAI brand without forking the widget code. The dev install took 4 minutes flat.",
    person: "Sam Verzosa",
    title: "Founding Engineer",
    avatar: "SV",
    avatarColor: "#FF9DD2",
    metrics: [{ v: "4 min", l: "Time to install" }, { v: "0", l: "Code forks" }, { v: "11k", l: "Conversations / mo" }],
  },
  {
    id: "regal",
    name: "Regal Bookmakers",
    industry: "iGaming · Cebu",
    initials: "RB",
    color: "#FFD37A",
    quote: "Skill-based routing dropped our cash-out resolution time from 11 minutes to 38 seconds. VIPs noticed.",
    person: "Marie Ocampo",
    title: "VP Customer Experience",
    avatar: "MO",
    avatarColor: "#FFD37A",
    metrics: [{ v: "11m → 38s", l: "Resolution time" }, { v: "+24%", l: "VIP retention" }, { v: "5", l: "Brands on Loop" }],
  },
  {
    id: "northstar",
    name: "NorthStar Sportsbook",
    industry: "Sportsbook · Davao",
    initials: "NS",
    color: "#C7B6FF",
    quote: "AI Copilot drafts Tagalog replies that our agents barely have to edit. It's like adding three CSRs to the floor.",
    person: "Ferdie Cruz",
    title: "Director of Support",
    avatar: "FC",
    avatarColor: "#C7B6FF",
    metrics: [{ v: "3x", l: "Replies per agent / hr" }, { v: "−$48k", l: "Annual support cost" }, { v: "4.9", l: "CSAT" }],
  },
  {
    id: "kaya",
    name: "Kaya Credit",
    industry: "Fintech · Quezon City",
    initials: "KC",
    color: "#5EE9D6",
    quote: "Compliance loved the audit logs. Support loved the canned KYC variables. Win-win.",
    person: "Patricia Sy",
    title: "Compliance Officer",
    avatar: "PS",
    avatarColor: "#5EE9D6",
    metrics: [{ v: "100%", l: "Audit coverage" }, { v: "−6 days", l: "KYC turnaround" }, { v: "0", l: "Incidents YTD" }],
  },
];

const logoWall = ["WINFORLIFE88","AFFILIATE HUB","TRIPAI","NORTHSTAR","KAYA","REGAL","NIMBUS","PASEO","BAYAN","ORION","HALO","VEGA"];

window.MarketingData = { customers, logoWall };

function MarketingShell({ active, onNav, onLaunch, children }) {
  return (
    <div className="h-full overflow-y-auto bg-ink-950 text-white/85 relative">
      <div className="absolute inset-0 pointer-events-none" style={{
        background:
          "radial-gradient(900px 500px at 75% 0%, rgba(166,248,74,0.16), transparent 60%)," +
          "radial-gradient(700px 500px at 0% 60%, rgba(96,180,255,0.10), transparent 60%)"
      }}/>
      <div className="absolute inset-0 grid-bg pointer-events-none opacity-40" />

      {/* Nav */}
      <div className="relative max-w-[1280px] mx-auto px-8 pt-6">
        <nav className="flex items-center justify-between glass rounded-2xl px-4 py-2.5">
          <button onClick={() => onNav("home")} className="flex items-center gap-2.5">
            <MLogo size={30} />
            <span className="text-[16px] font-semibold tracking-tight text-white">Loop</span>
            <MPill tone="lime" className="ml-2">v3.0</MPill>
          </button>
          <div className="hidden md:flex items-center gap-1">
            {[
              { id: "home", l: "Product" },
              { id: "sites", l: "Sites" },
              { id: "pricing", l: "Pricing" },
              { id: "customers", l: "Customers" },
              { id: "changelog", l: "Changelog" },
            ].map(x => {
              const isActive = x.id === active;
              return (
                <button
                  key={x.id}
                  onClick={() => onNav(x.id)}
                  className={`relative px-3 h-8 rounded-lg text-[13px] transition ${isActive ? "text-white" : "text-white/65 hover:text-white hover:bg-white/[0.04]"}`}
                >
                  {isActive && <span className="absolute inset-x-3 -bottom-0.5 h-0.5 rounded-full bg-lime"/>}
                  {x.l}
                </button>
              );
            })}
          </div>
          <div className="flex items-center gap-2">
            <button className="hidden sm:block px-3 h-8 rounded-lg text-[13px] text-white/70 hover:text-white">Sign in</button>
            <button onClick={onLaunch} className="btn-lime h-9 px-4 rounded-xl text-[13px] font-medium">
              Open dashboard <Icon.ArrowRight size={14} />
            </button>
          </div>
        </nav>
      </div>

      {children}

      {/* Footer */}
      <footer className="relative max-w-[1280px] mx-auto px-8 pt-10 pb-12">
        <div className="grid md:grid-cols-[1.4fr_1fr_1fr_1fr_1fr] gap-8 pb-10 border-b border-white/[0.05]">
          <div>
            <div className="flex items-center gap-2.5">
              <MLogo size={28} />
              <span className="text-[15px] font-semibold tracking-tight text-white">Loop</span>
            </div>
            <p className="text-[12.5px] text-white/50 mt-3 leading-relaxed max-w-[260px]">One inbox for every site you ship. Built in Manila, deployed at the edge.</p>
            <div className="flex items-center gap-2 mt-5">
              <span className="text-[10.5px] text-white/40 uppercase tracking-wider">Made in</span>
              <span className="text-[10.5px] text-lime">🇵🇭 Manila · 🌏 Edge</span>
            </div>
          </div>
          {[
            { h: "Product", links: ["Live chat","AI Copilot","Routing","Analytics","Integrations"] },
            { h: "Solutions", links: ["iGaming","Affiliate","SaaS","Fintech","Travel"] },
            { h: "Company", links: ["About","Customers","Careers","Press","Contact"] },
            { h: "Legal", links: ["Privacy","Terms","DPA","Security","Status"] },
          ].map(col => (
            <div key={col.h}>
              <div className="text-[11px] uppercase tracking-[0.12em] text-white/40 mb-3">{col.h}</div>
              <div className="space-y-2">
                {col.links.map(l => <a key={l} href="#" className="block text-[12.5px] text-white/65 hover:text-white">{l}</a>)}
              </div>
            </div>
          ))}
        </div>
        <div className="pt-6 flex flex-col md:flex-row items-center justify-between gap-3">
          <div className="text-[11.5px] text-white/45">© 2026 Loop Systems Inc. · SOC 2 Type II</div>
          <div className="flex items-center gap-2 text-[11px] text-white/50">
            <span className="flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-lime dot-online"/>All systems normal</span>
            <span className="text-white/20">·</span>
            <span>v3.0.14 shipped 2 days ago</span>
          </div>
        </div>
      </footer>
    </div>
  );
}

window.MarketingShell = MarketingShell;