// Sites page — industry showcase
const { Btn: SiBtn, Pill: SiPill, Avatar: SiAvatar } = window.UI;

const industries = [
  {
    id: "igaming",
    label: "iGaming & sportsbooks",
    desc: "Cash-out concierges, KYC chat, VIP white-glove. Skill-routed by site brand.",
    tint: "#A6F84A",
    icon: "Game",
    chip: "WINFORLIFE88",
    pageTitle: "Pearl Fortune · Spin to win",
    pageBg: "from-emerald-900 via-emerald-950 to-ink-950",
    accent: "from-lime/30 to-emerald-500/10",
    stats: ["38s avg reply","4.9 CSAT","6 brands"],
    widgetMessage: "Pending pa po yung withdrawal ko since 2pm — pwede pa-check?",
    widgetReply: "Tinitignan ko po ngayon, Marisol. Cash-out na sa loob ng 60 segundo.",
  },
  {
    id: "affiliate",
    label: "Affiliate networks",
    desc: "Partner-facing chat, payout tickets, attribution disputes. Routed by territory.",
    tint: "#7AB6FF",
    icon: "Layers",
    chip: "AFFILIATE HUB",
    pageTitle: "Affiliate dashboard · December payouts",
    pageBg: "from-sky-900 via-indigo-950 to-ink-950",
    accent: "from-sky-400/30 to-indigo-500/10",
    stats: ["12 languages","94% partner CSAT","Tier 1–3 SLA"],
    widgetMessage: "My December payout is missing line items from the SE-Asia campaign.",
    widgetReply: "I've opened a payout dispute and looped in attribution. ETA: 4 hours.",
  },
  {
    id: "fintech",
    label: "Fintech & lending",
    desc: "KYC walk-throughs, card-decline help, lending disclosures. Audit-logged.",
    tint: "#5EE9D6",
    icon: "Shield",
    chip: "KAYA CREDIT",
    pageTitle: "Apply for credit · Step 3 of 5",
    pageBg: "from-teal-900 via-cyan-950 to-ink-950",
    accent: "from-teal-400/30 to-cyan-500/10",
    stats: ["100% audit","−6d KYC","0 incidents"],
    widgetMessage: "Why did my ID upload fail on step 3?",
    widgetReply: "Yung file ng ID mo is HEIC — i-convert natin to PNG. Step-by-step?",
  },
  {
    id: "saas",
    label: "SaaS dashboards",
    desc: "Onboarding chat, billing tickets, in-product help. Triggered by page URL.",
    tint: "#C7B6FF",
    icon: "Code",
    chip: "ORION ANALYTICS",
    pageTitle: "Orion · Cohort retention",
    pageBg: "from-violet-900 via-purple-950 to-ink-950",
    accent: "from-violet-400/30 to-purple-500/10",
    stats: ["Sub-200ms","13 integrations","SSO + SCIM"],
    widgetMessage: "How do I export this cohort to a CSV with timestamps?",
    widgetReply: "Click ⌘E on any chart — or I can send you the API curl. ¿Which?",
  },
  {
    id: "travel",
    label: "Travel & hospitality",
    desc: "Itinerary edits, refund triage, group bookings. Auto-translated replies.",
    tint: "#FF9DD2",
    icon: "Globe",
    chip: "TRIPAI PH",
    pageTitle: "Seoul · 5-day itinerary",
    pageBg: "from-rose-900 via-fuchsia-950 to-ink-950",
    accent: "from-rose-400/30 to-fuchsia-500/10",
    stats: ["11k chats/mo","23 languages","4 min install"],
    widgetMessage: "Pwede ba palitan yung flight ko sa Day 2 going to Busan?",
    widgetReply: "Yes — KTX 09:42 has 2 seats left. Confirm na ba I-book ko?",
  },
  {
    id: "ecom",
    label: "E-commerce",
    desc: "Order tracking, returns, sizing questions. Pre-fills order ID from URL.",
    tint: "#FFD37A",
    icon: "Wallet",
    chip: "PASEO MARKET",
    pageTitle: "Cart · 3 items · ₱2,840",
    pageBg: "from-amber-900 via-orange-950 to-ink-950",
    accent: "from-amber-400/30 to-orange-500/10",
    stats: ["+22% checkout","0.3% RTO","Stripe + GCash"],
    widgetMessage: "Anong size guide para sa Saturday Hoodie size M?",
    widgetReply: "Para sa M: chest 44\", length 27.5\". Slim-fit, true to size.",
  },
];

function Sites({ onNav, onLaunch }) {
  const [active, setActive] = React.useState("igaming");
  const cur = industries.find(i => i.id === active);

  return (
    <window.MarketingShell active="sites" onNav={onNav} onLaunch={onLaunch}>
      {/* Hero */}
      <section className="relative max-w-[1280px] mx-auto px-8 pt-20 pb-12 text-center">
        <SiPill tone="lime">Built for multi-brand operators</SiPill>
        <h1 className="font-sans tracking-[-0.03em] text-white text-[64px] leading-[1.02] font-semibold mt-5">
          One widget. <span className="italic font-serif text-lime">Every</span> kind <br/>of site you ship.
        </h1>
        <p className="text-[17px] text-white/55 mt-6 max-w-[620px] mx-auto leading-relaxed">
          Loop installs in four minutes on any property — iGaming, fintech, SaaS, e-commerce. Branding, routing, and compliance are per-site, not per-tool.
        </p>
        <div className="flex items-center justify-center gap-3 mt-9">
          <button onClick={onLaunch} className="btn-lime h-12 px-5 rounded-xl text-[14px] font-semibold">
            Try the dashboard <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.Code size={15}/> Read install docs
          </button>
        </div>
      </section>

      {/* Industry showcase — switcher */}
      <section className="relative max-w-[1280px] mx-auto px-8 py-16">
        <div className="flex flex-wrap items-center justify-center gap-2 mb-10">
          {industries.map(i => {
            const I = Icon[i.icon];
            const isActive = i.id === active;
            return (
              <button
                key={i.id}
                onClick={() => setActive(i.id)}
                className={`h-10 px-4 rounded-full text-[12.5px] font-medium flex items-center gap-2 transition ${
                  isActive
                    ? "bg-lime text-ink-950 shadow-[0_8px_30px_-5px_rgba(166,248,74,0.5)]"
                    : "bg-white/[0.04] hover:bg-white/[0.08] text-white/75 border border-white/[0.06]"
                }`}
              >
                <I size={14}/> {i.label}
              </button>
            );
          })}
        </div>

        {/* The showcase card */}
        <motion.div
            key={active}
            initial={{ opacity: 0, y: 14 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.22, ease: "easeOut" }}
            className="grid lg:grid-cols-[1.3fr_1fr] gap-10 items-stretch"
          >
            {/* Browser mockup */}
            <SiteBrowser industry={cur}/>

            {/* Right column — copy + stats */}
            <div className="flex flex-col">
              <div className="grid place-items-center w-12 h-12 rounded-2xl mb-5" style={{ background: `${cur.tint}22`, color: cur.tint, border: `1px solid ${cur.tint}40` }}>
                {(() => { const I = Icon[cur.icon]; return <I size={20}/>; })()}
              </div>
              <h3 className="text-[34px] tracking-[-0.025em] font-semibold text-white leading-tight">{cur.label}</h3>
              <p className="text-[15px] text-white/55 mt-3 leading-relaxed">{cur.desc}</p>

              <div className="grid grid-cols-3 gap-2 mt-7">
                {cur.stats.map((s, i) => (
                  <div key={i} className="rounded-xl p-3.5 bg-white/[0.03] border border-white/[0.06]">
                    <div className="text-[18px] font-semibold tracking-tight" style={{ color: cur.tint }}>{s.split(" ")[0]}</div>
                    <div className="text-[10.5px] uppercase tracking-wider text-white/45 mt-1">{s.split(" ").slice(1).join(" ")}</div>
                  </div>
                ))}
              </div>

              <div className="space-y-3 mt-7 pt-6 border-t border-white/[0.06]">
                {[
                  ["Plug-and-play install", "Drop one snippet — no migration."],
                  ["Per-site branding", "Match each property's identity in seconds."],
                  ["Routed by your rules", "Concern, language, hour, agent skill."],
                ].map(([t, b], i) => (
                  <div key={i} className="flex items-start gap-3">
                    <Icon.Check size={16} className="mt-0.5 shrink-0" style={{ color: cur.tint }}/>
                    <div>
                      <div className="text-[13.5px] font-medium text-white/95">{t}</div>
                      <div className="text-[12.5px] text-white/55 mt-0.5">{b}</div>
                    </div>
                  </div>
                ))}
              </div>

              <button className="mt-auto pt-8">
                <span className="inline-flex items-center gap-2 text-[13px] font-medium text-lime hover:underline">
                  Read the {cur.label.split(" ")[0]} playbook <Icon.ArrowUpRight size={14}/>
                </span>
              </button>
            </div>
          </motion.div>
      </section>

      {/* What you get per site */}
      <section className="relative max-w-[1280px] mx-auto px-8 py-20">
        <div className="text-center mb-12">
          <SiPill>Configure per site</SiPill>
          <h2 className="font-sans tracking-[-0.025em] text-white text-[44px] leading-[1.05] font-semibold mt-4">
            Every site gets its own everything.
          </h2>
          <p className="text-[15px] text-white/55 mt-3 max-w-[560px] mx-auto">Branding, team, routing, business hours, and concerns — all independent per property. None of it leaks across.</p>
        </div>
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-3">
          {[
            { i: "Sparkle", t: "Per-site theming", b: "Color, copy, avatars, position." },
            { i: "Layers", t: "Per-site routing", b: "Different teams, different SLAs." },
            { i: "Tag", t: "Per-site concerns", b: "iGaming KYC ≠ SaaS billing." },
            { i: "Sun", t: "Per-site hours", b: "Manila daytime + Cebu nightshift." },
            { i: "Shield", t: "Per-site allowlists", b: "Domain & subdomain restrictions." },
            { i: "Bookmark", t: "Per-site canned", b: "Each brand's voice, preserved." },
            { i: "Chart", t: "Per-site analytics", b: "Separate dashboards, one inbox." },
            { i: "Bell", t: "Per-site triggers", b: "Cart abandon, scroll depth, idle." },
          ].map((f, i) => {
            const I = Icon[f.i];
            return (
              <div key={i} className="glass rounded-2xl p-5 hover:bg-white/[0.04] transition group">
                <div className="grid place-items-center w-9 h-9 rounded-xl bg-lime/15 text-lime border border-lime/25 mb-3 group-hover:scale-110 transition-transform">
                  <I size={15}/>
                </div>
                <div className="text-[13.5px] font-medium text-white/95">{f.t}</div>
                <div className="text-[12px] text-white/50 mt-1 leading-relaxed">{f.b}</div>
              </div>
            );
          })}
        </div>
      </section>

      {/* Routing map */}
      <section className="relative max-w-[1280px] mx-auto px-8 py-16">
        <div className="glass-strong rounded-3xl p-10 overflow-hidden relative">
          <div className="absolute inset-0 grid-bg opacity-30 pointer-events-none"/>
          <div className="relative grid lg:grid-cols-[1fr_1.2fr] gap-10 items-center">
            <div>
              <SiPill tone="lime">Routing</SiPill>
              <h2 className="font-sans tracking-[-0.025em] text-white text-[40px] leading-[1.05] font-semibold mt-4">
                Where each chat goes is your call.
              </h2>
              <p className="text-[15px] text-white/55 mt-4 leading-relaxed max-w-[440px]">
                Loop reads visitor language, page URL, concern picker, and time of day — then routes by your rules. Compose conditions visually.
              </p>
            </div>
            <RoutingFlow/>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="relative max-w-[1280px] mx-auto px-8 py-16">
        <div className="text-center">
          <h2 className="font-sans tracking-[-0.025em] text-white text-[40px] leading-[1.05] font-semibold">
            Got a site? Loop's ready for it.
          </h2>
          <div className="flex items-center justify-center gap-3 mt-7">
            <button onClick={onLaunch} className="btn-lime h-12 px-6 rounded-xl text-[14px] font-semibold">
              Start free <Icon.ArrowRight size={15}/>
            </button>
            <button onClick={() => onNav("pricing")} className="h-12 px-5 rounded-xl text-[14px] text-white/85 border border-white/[0.1] hover:bg-white/[0.04]">
              See pricing
            </button>
          </div>
        </div>
      </section>
    </window.MarketingShell>
  );
}

// Browser mockup with embedded chat widget
function SiteBrowser({ industry }) {
  return (
    <div className="relative">
      <div className="absolute -inset-8 rounded-3xl blur-[60px] opacity-40 pointer-events-none" style={{ background: industry.tint }}/>
      <div className="relative glass-strong rounded-2xl overflow-hidden shadow-[0_30px_80px_-20px_rgba(0,0,0,0.7)]">
        {/* Browser chrome */}
        <div className="flex items-center gap-2 px-3 py-2.5 border-b border-white/[0.06] bg-white/[0.02]">
          <span className="w-3 h-3 rounded-full bg-rose-400/80"/>
          <span className="w-3 h-3 rounded-full bg-yellow-400/80"/>
          <span className="w-3 h-3 rounded-full bg-lime/80"/>
          <div className="flex-1 mx-3">
            <div className="mx-auto max-w-[280px] flex items-center gap-1.5 px-3 py-1 rounded-md bg-white/[0.04] border border-white/[0.05] text-[11px] text-white/55">
              <Icon.Lock size={10}/>
              <span className="font-mono">{industry.chip.toLowerCase().replace(/\s/g,"") + ".com"}</span>
            </div>
          </div>
          <div className="flex gap-1">
            <span className="w-5 h-5 rounded-md bg-white/[0.03]"/>
            <span className="w-5 h-5 rounded-md bg-white/[0.03]"/>
          </div>
        </div>

        {/* Page content — themed */}
        <div className={`relative h-[460px] bg-gradient-to-br ${industry.pageBg} overflow-hidden`}>
          <div className="absolute inset-0" style={{
            background: "radial-gradient(60% 60% at 50% 0%, rgba(255,255,255,0.05), transparent 60%)"
          }}/>
          <div className="absolute inset-0 grid-bg opacity-20"/>

          {/* Faux site UI */}
          <div className="relative p-7">
            <div className="flex items-center justify-between mb-7">
              <div className="flex items-center gap-2.5">
                <div className="w-7 h-7 rounded-lg grid place-items-center font-bold text-ink-950 text-[10px]" style={{ background: industry.tint }}>{industry.chip.slice(0,2)}</div>
                <span className="text-[13px] font-bold text-white tracking-tight">{industry.chip}</span>
              </div>
              <div className="hidden md:flex items-center gap-1.5">
                {["Home","Cashier","Promos","Help"].map(n => <span key={n} className="px-2.5 py-1 text-[11px] text-white/70 rounded-md">{n}</span>)}
                <span className="px-3 py-1 text-[11px] font-medium rounded-md text-ink-950" style={{ background: industry.tint }}>Sign in</span>
              </div>
            </div>

            <div className="text-[10.5px] uppercase tracking-[0.15em] text-white/45 mb-2">{industry.pageTitle.split("·")[0]}</div>
            <h2 className="text-[26px] tracking-tight text-white font-semibold leading-tight max-w-[400px]">{industry.pageTitle.split("·")[1] || industry.pageTitle}</h2>

            {/* Skeleton content for the page */}
            <div className="grid grid-cols-2 gap-3 mt-6 max-w-[480px]">
              {Array.from({ length: 4 }).map((_, i) => (
                <div key={i} className="rounded-xl p-4 backdrop-blur-md bg-white/[0.06] border border-white/[0.1]">
                  <div className={`w-8 h-8 rounded-lg mb-3`} style={{ background: `${industry.tint}33` }}/>
                  <div className="h-2 rounded-full bg-white/15 w-3/4"/>
                  <div className="h-2 rounded-full bg-white/10 w-1/2 mt-1.5"/>
                </div>
              ))}
            </div>
          </div>

          {/* Embedded widget — bottom right */}
          <div className="absolute bottom-5 right-5 w-[280px] glass-strong rounded-2xl overflow-hidden shadow-2xl">
            <div className="p-3 flex items-center gap-2.5" style={{ background: `linear-gradient(135deg, ${industry.tint}30, transparent)` }}>
              <div className="w-8 h-8 rounded-lg grid place-items-center font-bold text-ink-950 text-[10px]" style={{ background: industry.tint }}>{industry.chip.slice(0,2)}</div>
              <div className="flex-1">
                <div className="text-[12px] font-medium text-white/95 leading-tight">{industry.chip} Support</div>
                <div className="text-[10px] text-white/55 flex items-center gap-1 mt-0.5"><span className="w-1.5 h-1.5 rounded-full bg-lime"/>Replies in &lt; 1 min</div>
              </div>
              <Icon.Close size={12} className="text-white/40"/>
            </div>
            <div className="p-3 space-y-2 bg-white/[0.02]">
              <div className="max-w-[85%] px-3 py-1.5 rounded-xl rounded-bl-sm text-[11px] bg-white/[0.06] text-white/85 border border-white/[0.05]">{industry.widgetMessage}</div>
              <div className="ml-auto max-w-[85%] px-3 py-1.5 rounded-xl rounded-br-sm text-[11px] font-medium text-ink-950" style={{ background: industry.tint }}>{industry.widgetReply}</div>
              <div className="flex items-center gap-1 max-w-[60px] px-3 py-2 rounded-xl rounded-bl-sm bg-white/[0.06]">
                <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 className="px-3 py-2 border-t border-white/[0.06] flex items-center gap-2">
              <input disabled placeholder="Type a message…" className="flex-1 bg-transparent text-[11px] text-white/40 outline-none"/>
              <button className="grid place-items-center w-7 h-7 rounded-md text-ink-950" style={{ background: industry.tint }}><Icon.Send size={11}/></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function RoutingFlow() {
  const conditions = [
    { i: "Globe", t: "If URL contains", v: "/cashier/*", c: "#A6F84A" },
    { i: "Tag", t: "AND concern is", v: "Cash in / Cash out", c: "#7AB6FF" },
    { i: "Sun", t: "AND time is", v: "08:00 – 22:00 PHT", c: "#FFD37A" },
  ];
  return (
    <div className="space-y-3">
      <div className="text-[10.5px] uppercase tracking-[0.12em] text-white/45 mb-2">Rule · cash-out concierge</div>
      {conditions.map((c, i) => {
        const I = Icon[c.i];
        return (
          <div key={i} className="flex items-center gap-3">
            <div className="grid place-items-center w-9 h-9 rounded-xl shrink-0" style={{ background: `${c.c}22`, color: c.c, border: `1px solid ${c.c}44` }}>
              <I size={14}/>
            </div>
            <div className="flex-1 flex items-center justify-between glass rounded-xl px-3.5 py-2.5">
              <span className="text-[12px] text-white/65">{c.t}</span>
              <span className="text-[12.5px] font-mono font-medium" style={{ color: c.c }}>{c.v}</span>
            </div>
          </div>
        );
      })}
      <div className="flex items-center gap-3 mt-1">
        <div className="grid place-items-center w-9 h-9 rounded-xl shrink-0 bg-lime/15 text-lime border border-lime/30">
          <Icon.ArrowRight size={14}/>
        </div>
        <div className="flex-1 glass-strong rounded-xl px-3.5 py-2.5 flex items-center justify-between border-lime/30 ring-1 ring-lime/20">
          <span className="text-[12px] text-white/65">Then route to</span>
          <div className="flex items-center gap-1.5">
            <SiAvatar name="CS Angelo" color="#A6F84A" size={20} status="online"/>
            <span className="text-[12.5px] font-medium text-white/90">Tier 1 Manila</span>
          </div>
        </div>
      </div>
      <div className="text-[11px] text-white/45 mt-3 flex items-center gap-1.5">
        <Icon.Bolt size={11} className="text-lime"/> Evaluated in &lt;40ms · 12 rules currently active
      </div>
    </div>
  );
}

window.Sites = Sites;