// Landing Page — premium SaaS marketing
const { Btn: LBtn, Pill: LPill, Avatar: LAvatar, LoopMark: LLogo } = window.UI;

function Landing({ onLaunch, onNav }) {
  const [showWidget, setShowWidget] = React.useState(false);

  return (
    <div className="h-full overflow-y-auto bg-ink-950 text-white/85 relative">
      {/* Aurora bg */}
      <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-50" />

      {/* 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 && onNav("home")} className="flex items-center gap-2.5">
            <LLogo size={30} />
            <span className="text-[16px] font-semibold tracking-tight text-white">Loop</span>
            <LPill tone="lime" className="ml-2">v3.0</LPill>
          </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 === "home";
              return (
                <button
                  key={x.id}
                  onClick={() => onNav && 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>

      {/* Hero */}
      <section className="relative max-w-[1280px] mx-auto px-8 pt-24 pb-20">
        <div className="grid lg:grid-cols-[1.1fr_0.9fr] gap-14 items-center">
          <div>
            <div className="inline-flex items-center gap-2 glass rounded-full px-3 py-1.5 text-[11.5px] text-white/70 mb-7">
              <span className="w-1.5 h-1.5 rounded-full bg-lime dot-online"/> 
              New · Loop 3.0 with AI Copilot
              <Icon.ArrowRight size={12} className="text-lime"/>
            </div>
            <h1 className="font-sans tracking-[-0.03em] text-white text-[64px] leading-[1.02] font-semibold">
              One inbox for <br/>every site you ship.
            </h1>
            <p className="text-[17px] text-white/55 mt-6 leading-relaxed max-w-[520px]">
              Loop is the live chat platform built for operators running multiple brands. Route any visitor from any domain to the right CSR, in under 30 seconds.
            </p>
            <div className="flex items-center gap-3 mt-9">
              <button onClick={onLaunch} className="btn-lime h-12 px-5 rounded-xl text-[14px] font-semibold">
                Start free for 14 days <Icon.ArrowRight size={15}/>
              </button>
              <button className="h-12 px-5 rounded-xl text-[14px] text-white/85 border border-white/[0.1] hover:bg-white/[0.04] flex items-center gap-2">
                <Icon.Eye size={15}/> Watch 90s demo
              </button>
            </div>
            <div className="flex items-center gap-5 mt-10 text-[12px] text-white/45">
              <div className="flex items-center gap-1.5"><Icon.Check size={14} className="text-lime"/> No credit card</div>
              <div className="flex items-center gap-1.5"><Icon.Check size={14} className="text-lime"/> SOC 2 ready</div>
              <div className="flex items-center gap-1.5"><Icon.Check size={14} className="text-lime"/> Unlimited sites</div>
            </div>
          </div>

          {/* Mini dashboard preview */}
          <div className="relative">
            <div className="absolute -inset-12 bg-lime/[0.08] blur-[80px] rounded-full"/>
            <DashboardPreviewMini />
          </div>
        </div>

        {/* Logos */}
        <div className="mt-24">
          <div className="text-center text-[11px] uppercase tracking-[0.2em] text-white/40 mb-6">Trusted by operators running 200+ brands</div>
          <div className="flex flex-wrap items-center justify-center gap-x-12 gap-y-4 opacity-60">
            {["WINFORLIFE88","AFFILIATE HUB","TRIPAI","NORTHSTAR","KAYA","REGAL","NIMBUS"].map(n => (
              <div key={n} className="text-white/55 font-semibold tracking-[0.18em] text-[13px]">{n}</div>
            ))}
          </div>
        </div>
      </section>

      {/* Multi-website */}
      <section className="relative max-w-[1280px] mx-auto px-8 py-20">
        <div className="grid lg:grid-cols-[0.9fr_1.1fr] gap-14 items-center">
          <div>
            <LPill tone="lime">Multi-site routing</LPill>
            <h2 className="font-sans tracking-[-0.025em] text-white text-[44px] leading-[1.05] font-semibold mt-4">
              Run support for ten <br/>brands like it's one.
            </h2>
            <p className="text-[15.5px] text-white/55 mt-5 leading-relaxed">
              Drop one snippet on every domain. Loop tags every conversation with its site of origin and routes by team, language, page URL, or visitor concern. No more juggling tabs.
            </p>
            <div className="space-y-3 mt-7">
              {[
                { i: "Globe", t: "One snippet, infinite domains", b: "Embed Loop on as many properties as you operate. Zero config per site." },
                { i: "Layers", t: "Route by site, team or concern", b: "Cash-out on WINFORLIFE goes to Tier 1 Manila. KYC on Affiliate Hub goes to the KYC desk. Done." },
                { i: "Sparkle", t: "Brand each widget separately", b: "Custom colors, copy, avatars, and triggers per website. Brand-safe by default." },
              ].map((f) => {
                const I = Icon[f.i];
                return (
                  <div key={f.t} className="flex gap-3.5 group">
                    <span className="grid place-items-center w-9 h-9 rounded-lg bg-lime/12 text-lime border border-lime/25 shrink-0 group-hover:bg-lime/20 transition">
                      <I size={16}/>
                    </span>
                    <div>
                      <div className="text-[14px] font-medium text-white/95">{f.t}</div>
                      <div className="text-[13px] text-white/55 leading-relaxed mt-0.5">{f.b}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
          <RoutingDiagram />
        </div>
      </section>

      {/* Features grid */}
      <section className="relative max-w-[1280px] mx-auto px-8 py-20">
        <div className="text-center mb-14">
          <LPill>Features</LPill>
          <h2 className="font-sans tracking-[-0.025em] text-white text-[44px] leading-[1.05] font-semibold mt-4">
            Everything your CSR floor needs.
          </h2>
        </div>
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
          {[
            { i: "Bolt", t: "Sub-second message delivery", b: "Edge-deployed websockets, anywhere your customers are.", tone: "lime" },
            { i: "Robot", t: "AI Copilot drafts & tags", b: "Auto-suggest replies in Tagalog, English, or Mandarin.", tone: "blue" },
            { i: "Headset", t: "Smart routing & overflow", b: "Round-robin, skill-based, and time-of-day routing rules." , tone: "pink"},
            { i: "Bookmark", t: "Canned responses with vars", b: "Insert {name}, {site}, {page} into shortcuts. ", tone: "yellow"},
            { i: "Shield", t: "Audit-ready compliance", b: "Encrypted at rest, GDPR DPA, SOC 2 Type II ready.", tone: "purple"},
            { i: "Chart", t: "Live ops analytics", b: "CSAT, response time, agent load — pivoted by site.", tone: "lime"},
          ].map((f, i) => {
            const I = Icon[f.i];
            const tonemap = {
              lime: "from-lime/15 text-lime border-lime/25",
              blue: "from-sky-400/15 text-sky-300 border-sky-400/25",
              pink: "from-fuchsia-400/15 text-fuchsia-300 border-fuchsia-400/25",
              yellow: "from-yellow-300/15 text-yellow-200 border-yellow-300/25",
              purple: "from-violet-400/15 text-violet-300 border-violet-400/25",
            };
            return (
              <div key={i} className="glass rounded-2xl p-6 hover:bg-white/[0.04] transition group">
                <div className={`grid place-items-center w-10 h-10 rounded-xl bg-gradient-to-b ${tonemap[f.tone]} border bg-opacity-30 mb-4`}>
                  <I size={18}/>
                </div>
                <div className="text-[15px] font-medium text-white/95">{f.t}</div>
                <div className="text-[13px] text-white/50 leading-relaxed mt-1.5">{f.b}</div>
              </div>
            );
          })}
        </div>
      </section>

      {/* Pricing */}
      <section className="relative max-w-[1280px] mx-auto px-8 py-20">
        <div className="text-center mb-14">
          <LPill>Pricing</LPill>
          <h2 className="font-sans tracking-[-0.025em] text-white text-[44px] leading-[1.05] font-semibold mt-4">
            Simple, per agent.
          </h2>
          <p className="text-[15px] text-white/55 mt-3">Unlimited sites and conversations on every plan.</p>
        </div>
        <div className="grid md:grid-cols-3 gap-5">
          {[
            { name: "Starter", price: 29, sub: "per agent / month", desc: "For solo operators getting their first widget live.", feats: ["1 website","Live chat widget","30-day history","Email support"], cta: "Start free trial" },
            { name: "Team", price: 59, sub: "per agent / month", desc: "Run a small CSR floor across multiple brands.", feats: ["Unlimited websites","Smart routing","Canned responses","Analytics dashboard","Priority support"], cta: "Start free trial", featured: true },
            { name: "Scale", price: "Talk", sub: "to sales", desc: "For ops running 24/7 with audit & SSO.", feats: ["Everything in Team","SSO + SCIM","SOC 2 audit logs","Dedicated CSM","Custom DPA"], cta: "Contact sales" },
          ].map(p => (
            <div key={p.name} className={`relative glass rounded-2xl p-7 ${p.featured ? "border-lime/40 ring-1 ring-lime/30" : ""}`}>
              {p.featured && <div className="absolute -top-3 left-7 px-2.5 py-1 rounded-full bg-lime text-ink-950 text-[10.5px] font-bold tracking-wider uppercase">Most popular</div>}
              <div className="text-[15px] font-medium text-white/90">{p.name}</div>
              <div className="flex items-baseline gap-1.5 mt-3">
                <span className="text-[42px] font-semibold tracking-tight text-white">{typeof p.price === "number" ? `$${p.price}` : p.price}</span>
                <span className="text-[12.5px] text-white/45">{p.sub}</span>
              </div>
              <p className="text-[13px] text-white/55 mt-2 leading-relaxed">{p.desc}</p>
              <button className={`w-full mt-5 h-11 rounded-xl text-[13.5px] font-semibold ${p.featured ? "btn-lime" : "bg-white/[0.05] hover:bg-white/[0.08] border border-white/[0.08] text-white/90"}`}>{p.cta}</button>
              <div className="border-t border-white/[0.06] mt-6 pt-5 space-y-2.5">
                {p.feats.map(f => (
                  <div key={f} className="flex items-start gap-2.5 text-[13px] text-white/75">
                    <Icon.Check size={15} className="text-lime mt-0.5 shrink-0"/> {f}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="relative max-w-[1280px] mx-auto px-8 pb-20">
        <div className="relative glass-strong rounded-3xl overflow-hidden p-12 lg:p-16 text-center">
          <div className="absolute inset-0" style={{
            background: "radial-gradient(60% 80% at 50% 0%, rgba(166,248,74,0.18), transparent 60%)"
          }}/>
          <div className="relative">
            <h2 className="font-sans tracking-[-0.02em] text-white text-[44px] leading-[1.05] font-semibold">
              Get to your first conversation <br/>in under 4 minutes.
            </h2>
            <p className="text-[15px] text-white/55 mt-4 max-w-[520px] mx-auto">Drop one script tag. Watch a real visitor reply. Then route, brand, and scale from there.</p>
            <div className="flex items-center justify-center gap-3 mt-8">
              <button onClick={onLaunch} className="btn-lime h-12 px-6 rounded-xl text-[14px] font-semibold">Open the dashboard <Icon.ArrowRight size={15}/></button>
              <button className="h-12 px-5 rounded-xl text-[14px] text-white/85 border border-white/[0.12] hover:bg-white/[0.04] flex items-center gap-2"><Icon.Code size={15}/> Get embed code</button>
            </div>
          </div>
        </div>
      </section>

      <footer className="relative max-w-[1280px] mx-auto px-8 pb-10">
        <div className="border-t border-white/[0.05] pt-8 flex flex-col md:flex-row items-center justify-between gap-4">
          <div className="flex items-center gap-2.5">
            <LLogo size={24} />
            <div className="text-[12px] text-white/45">© 2026 Loop Systems · Made in Manila</div>
          </div>
          <div className="flex items-center gap-5 text-[12px] text-white/50">
            <a href="#" className="hover:text-white">Privacy</a>
            <a href="#" className="hover:text-white">Terms</a>
            <a href="#" className="hover:text-white">DPA</a>
            <a href="#" className="hover:text-white">Status</a>
          </div>
        </div>
      </footer>

      {/* Floating widget on landing */}
      <div className="fixed bottom-4 right-3 sm:bottom-6 sm:right-6 z-50">
        {showWidget ? (
          <ChatWidget
            initialState="welcome"
            aiMode={true}
            onClose={() => setShowWidget(false)}
          />
        ) : (
          <button
            onClick={() => setShowWidget(true)}
            className="relative grid place-items-center rounded-full"
            style={{
              width: 60, height: 60,
              background: "linear-gradient(160deg, #A6F84A 0%, #A6F84Ad0 100%)",
              boxShadow: "0 18px 50px -10px rgba(166,248,74,0.6), inset 0 1px 0 rgba(255,255,255,0.4)",
            }}
          >
            <Icon.Chat size={26} className="text-ink-950" />
            <span className="absolute top-1 right-1 w-2.5 h-2.5 rounded-full bg-lime ring-2 ring-ink-950 dot-online" />
          </button>
        )}
      </div>
    </div>
  );
}

// Hero dashboard preview
function DashboardPreviewMini() {
  return (
    <div className="relative glass-strong rounded-2xl overflow-hidden p-3 shadow-[0_30px_80px_-20px_rgba(0,0,0,0.7)]">
      <div className="flex items-center gap-1.5 px-2 py-1.5">
        <span className="w-2.5 h-2.5 rounded-full bg-rose-400/70"/>
        <span className="w-2.5 h-2.5 rounded-full bg-yellow-400/70"/>
        <span className="w-2.5 h-2.5 rounded-full bg-lime/80"/>
        <span className="ml-3 text-[10.5px] text-white/40">app.loop.cs / conversations</span>
      </div>
      <div className="grid grid-cols-[180px_1fr] gap-2 mt-1">
        {/* Side nav */}
        <div className="rounded-xl bg-white/[0.02] border border-white/[0.05] p-2 space-y-1">
          {[
            ["Home", false], ["Conversations", true], ["Websites", false], ["Agents", false], ["Analytics", false]
          ].map(([n, a], i) => (
            <div key={i} className={`flex items-center gap-2 px-2 py-1.5 rounded-lg text-[10.5px] ${a ? "bg-white/[0.06] text-white" : "text-white/55"}`}>
              <span className={`w-1.5 h-1.5 rounded-full ${a ? "bg-lime" : "bg-white/30"}`}/>{n}
            </div>
          ))}
        </div>
        {/* Inbox + chat */}
        <div className="grid grid-cols-[1.1fr_1.4fr] gap-2">
          <div className="rounded-xl bg-white/[0.02] border border-white/[0.05] p-2 space-y-1.5">
            {window.Mock.conversations.slice(0,4).map((c,i) => (
              <div key={c.id} className={`p-2 rounded-lg ${i === 0 ? "bg-lime/10 border border-lime/25" : "hover:bg-white/[0.03]"}`}>
                <div className="flex items-center gap-2">
                  <div className="w-5 h-5 rounded-full" style={{ background: c.color }}/>
                  <div className="text-[10.5px] text-white/85 font-medium truncate">{c.visitor}</div>
                  {c.unread > 0 && <span className="ml-auto text-[8.5px] px-1 rounded bg-lime text-ink-950 font-bold">{c.unread}</span>}
                </div>
                <div className="text-[9.5px] text-white/45 mt-0.5 truncate">{c.last}</div>
              </div>
            ))}
          </div>
          <div className="rounded-xl bg-white/[0.02] border border-white/[0.05] p-2.5 flex flex-col gap-1.5">
            <div className="flex items-center gap-2 pb-2 border-b border-white/[0.05]">
              <div className="w-6 h-6 rounded-full bg-lime"/>
              <div>
                <div className="text-[10.5px] text-white/90 font-medium">Marisol Cruz</div>
                <div className="text-[8.5px] text-lime flex items-center gap-1"><span className="w-1 h-1 rounded-full bg-lime"/>Active · WINFORLIFE88</div>
              </div>
            </div>
            <div className="self-start max-w-[80%] bg-white/[0.06] rounded-xl rounded-bl-sm px-2.5 py-1.5 text-[10px] text-white/85">Pending pa po yung withdrawal ko since 2pm.</div>
            <div className="self-end max-w-[80%] bg-lime text-ink-950 rounded-xl rounded-br-sm px-2.5 py-1.5 text-[10px] font-medium">Tinitignan ko po yung transaction mo!</div>
            <div className="self-start bg-white/[0.06] rounded-xl rounded-bl-sm px-2.5 py-1.5 flex items-center gap-1">
              <span className="typing-dot w-1 h-1 rounded-full bg-white/60"/>
              <span className="typing-dot w-1 h-1 rounded-full bg-white/60"/>
              <span className="typing-dot w-1 h-1 rounded-full bg-white/60"/>
            </div>
          </div>
        </div>
      </div>
      {/* Stat strip */}
      <div className="mt-2 grid grid-cols-4 gap-2">
        {[["Active","22","lime"],["Wait","4","yellow"],["Online","3/5","blue"],["Avg","38s","pink"]].map(([l,v,c],i) => (
          <div key={i} className="rounded-xl bg-white/[0.02] border border-white/[0.05] p-2">
            <div className="text-[8.5px] uppercase tracking-wider text-white/40">{l}</div>
            <div className="text-[14px] font-semibold text-white tracking-tight mt-0.5">{v}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// Routing diagram
function RoutingDiagram() {
  return (
    <div className="relative glass-strong rounded-2xl p-7">
      <svg viewBox="0 0 480 360" className="w-full h-[360px]">
        <defs>
          <linearGradient id="ll" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="#A6F84A" stopOpacity="0.7"/>
            <stop offset="100%" stopColor="#A6F84A" stopOpacity="0.05"/>
          </linearGradient>
        </defs>
        {/* Lines */}
        <path d="M120 60 C 220 60, 220 180, 320 180" stroke="url(#ll)" strokeWidth="1.5" fill="none"/>
        <path d="M120 180 L 320 180" stroke="url(#ll)" strokeWidth="1.5" fill="none"/>
        <path d="M120 300 C 220 300, 220 180, 320 180" stroke="url(#ll)" strokeWidth="1.5" fill="none"/>
        <path d="M320 180 L 420 100" stroke="url(#ll)" strokeWidth="1.5" fill="none"/>
        <path d="M320 180 L 420 180" stroke="url(#ll)" strokeWidth="1.5" fill="none"/>
        <path d="M320 180 L 420 260" stroke="url(#ll)" strokeWidth="1.5" fill="none"/>
      </svg>
      {/* Nodes */}
      <div className="absolute inset-7">
        {/* Sites */}
        {window.Mock.websites.map((w, i) => (
          <div key={w.id} className="absolute glass rounded-xl px-3 py-2 flex items-center gap-2 w-[150px]" style={{ left: 0, top: i === 0 ? 30 : i === 1 ? 145 : 260 }}>
            <div className="w-7 h-7 rounded-lg grid place-items-center font-bold text-ink-950 text-[10px]" style={{ background: w.color }}>{w.initials}</div>
            <div className="min-w-0">
              <div className="text-[11.5px] font-medium text-white/95 truncate">{w.name}</div>
              <div className="text-[9.5px] text-white/40 truncate">{w.domain}</div>
            </div>
          </div>
        ))}
        {/* Loop core */}
        <div className="absolute" style={{ left: 195, top: 138 }}>
          <div className="glass-strong rounded-2xl px-4 py-3 flex items-center gap-2.5 border-lime/30 ring-1 ring-lime/20">
            <Icon.Layers size={18} className="text-lime"/>
            <div>
              <div className="text-[12px] font-semibold text-white">Loop Router</div>
              <div className="text-[9.5px] text-lime">live · 38ms</div>
            </div>
          </div>
        </div>
        {/* Agents */}
        {window.Mock.agents.slice(0,3).map((a, i) => (
          <div key={a.id} className="absolute glass rounded-xl px-2.5 py-1.5 flex items-center gap-2 w-[150px]" style={{ right: 0, top: i === 0 ? 60 : i === 1 ? 145 : 230 }}>
            <LAvatar name={a.name} color={a.color} size={26} status={a.status} />
            <div className="min-w-0">
              <div className="text-[11.5px] font-medium text-white/95 truncate">{a.name}</div>
              <div className="text-[9.5px] text-white/40 truncate">{a.role}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.Landing = Landing;