// Customers page — case studies + logo wall + stat band
const { Btn: CuBtn, Pill: CuPill, Avatar: CuAvatar } = window.UI;

function Customers({ onNav, onLaunch }) {
  const [active, setActive] = React.useState("all");
  const customers = window.MarketingData.customers;
  const featured = customers.find(c => c.featured);
  const grid = customers.filter(c => !c.featured);

  const industries = [
    { id: "all", l: "All stories" },
    { id: "igaming", l: "iGaming" },
    { id: "fintech", l: "Fintech" },
    { id: "saas", l: "SaaS" },
    { id: "travel", l: "Travel" },
  ];

  return (
    <window.MarketingShell active="customers" onNav={onNav} onLaunch={onLaunch}>
      {/* Hero */}
      <section className="relative max-w-[1280px] mx-auto px-8 pt-20 pb-12 text-center">
        <CuPill tone="lime">Customer stories</CuPill>
        <h1 className="font-sans tracking-[-0.03em] text-white text-[64px] leading-[1.02] font-semibold mt-5">
          Operators ship faster <br/><span className="italic font-serif text-lime">with Loop in the loop.</span>
        </h1>
        <p className="text-[17px] text-white/55 mt-6 max-w-[600px] mx-auto leading-relaxed">
          From iGaming floors to fintech compliance, hundreds of brands route their conversations through Loop. Here's what changed for them.
        </p>
      </section>

      {/* Stat band */}
      <section className="relative max-w-[1280px] mx-auto px-8 pb-12">
        <div className="glass-strong rounded-2xl overflow-hidden">
          <div className="grid grid-cols-2 md:grid-cols-4 divide-x divide-white/[0.05]">
            {[
              { v: "2.4M", l: "Conversations handled" },
              { v: "94%", l: "Average CSAT" },
              { v: "38s", l: "Median first reply" },
              { v: "412", l: "Brands shipping with Loop" },
            ].map((s, i) => (
              <div key={i} className="p-7 text-center">
                <div className="text-[36px] font-semibold tracking-[-0.03em] text-white leading-none">{s.v}</div>
                <div className="text-[11.5px] uppercase tracking-[0.12em] text-white/45 mt-3">{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Featured story */}
      <section className="relative max-w-[1280px] mx-auto px-8 py-12">
        <div className="grid lg:grid-cols-[1.15fr_1fr] gap-10 items-stretch">
          {/* Left — story */}
          <div className="relative">
            <div className="absolute -inset-6 rounded-3xl blur-[60px] opacity-30 pointer-events-none" style={{ background: featured.color }}/>
            <div className="relative glass-strong rounded-3xl overflow-hidden h-full flex flex-col">
              {/* Brand strip */}
              <div className="px-8 pt-7 pb-6 border-b border-white/[0.06] flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 rounded-xl grid place-items-center font-bold text-ink-950 text-[13px] shadow-lg" style={{ background: `linear-gradient(135deg, ${featured.color}, ${featured.color}cc)` }}>{featured.initials}</div>
                  <div>
                    <div className="text-[18px] font-semibold text-white tracking-tight">{featured.name}</div>
                    <div className="text-[12px] text-white/55 mt-0.5">{featured.industry}</div>
                  </div>
                </div>
                <CuPill tone="lime">Featured · 2026</CuPill>
              </div>

              <div className="p-8 flex-1 flex flex-col">
                <Icon.ChatDots size={26} style={{ color: featured.color }}/>
                <blockquote className="font-serif text-[28px] leading-[1.25] text-white/95 mt-4 tracking-tight">
                  "{featured.quote}"
                </blockquote>
                <div className="flex items-center gap-3 mt-7">
                  <CuAvatar name={featured.person} color={featured.avatarColor} size={42}/>
                  <div>
                    <div className="text-[13.5px] font-medium text-white/95">{featured.person}</div>
                    <div className="text-[12px] text-white/55">{featured.title} · {featured.name}</div>
                  </div>
                </div>

                <div className="grid grid-cols-3 gap-3 mt-auto pt-8">
                  {featured.metrics.map((m, i) => (
                    <div key={i} className="rounded-xl p-4 bg-white/[0.03] border border-white/[0.06]">
                      <div className="text-[22px] font-semibold tracking-tight" style={{ color: featured.color }}>{m.v}</div>
                      <div className="text-[10.5px] uppercase tracking-wider text-white/45 mt-1">{m.l}</div>
                    </div>
                  ))}
                </div>

                <div className="flex items-center justify-between mt-6 pt-6 border-t border-white/[0.05]">
                  <div className="flex items-center gap-1.5 text-[11.5px] text-white/55">
                    <Icon.Bolt size={12} className="text-lime"/>
                    Shipped Loop in <span className="text-white/85">4 days</span>
                  </div>
                  <button className="text-[12.5px] font-medium text-lime hover:underline flex items-center gap-1">
                    Read the full story <Icon.ArrowUpRight size={12}/>
                  </button>
                </div>
              </div>
            </div>
          </div>

          {/* Right — preview image */}
          <CustomerStoryHero customer={featured}/>
        </div>
      </section>

      {/* Filter + grid */}
      <section className="relative max-w-[1280px] mx-auto px-8 py-16">
        <div className="flex items-center justify-between mb-7 flex-wrap gap-3">
          <h2 className="font-sans tracking-[-0.025em] text-white text-[32px] font-semibold">More customer stories</h2>
          <div className="flex flex-wrap items-center gap-1.5">
            {industries.map(i => (
              <button
                key={i.id}
                onClick={() => setActive(i.id)}
                className={`h-9 px-3.5 rounded-lg text-[12.5px] transition ${active === i.id ? "bg-white/[0.08] text-white border border-white/[0.1]" : "text-white/60 hover:text-white"}`}
              >{i.l}</button>
            ))}
          </div>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
          {grid.map(c => (
            <CustomerCard key={c.id} c={c}/>
          ))}
        </div>
      </section>

      {/* Logo wall */}
      <section className="relative max-w-[1280px] mx-auto px-8 py-16">
        <div className="text-center mb-8">
          <div className="text-[11px] uppercase tracking-[0.2em] text-white/40">In good company</div>
        </div>
        <div className="glass-strong rounded-3xl p-10 overflow-hidden relative">
          <div className="absolute inset-0 grid-bg opacity-20 pointer-events-none"/>
          <div className="relative grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6 items-center">
            {window.MarketingData.logoWall.map(n => (
              <div key={n} className="text-center text-white/55 font-bold tracking-[0.15em] text-[12.5px] hover:text-white transition">{n}</div>
            ))}
          </div>
        </div>
      </section>

      {/* Inline testimonials */}
      <section className="relative max-w-[1280px] mx-auto px-8 py-16">
        <div className="grid md:grid-cols-3 gap-4">
          {[
            { q: "The cleanest live-chat dashboard I've used in a decade.", who: "Antonio Cua", role: "CTO · BAYAN Holdings", c: "#A6F84A" },
            { q: "Setup felt like cheating. We were live before lunch.", who: "Diane Ng", role: "Head of CX · VEGA Wallet", c: "#7AB6FF" },
            { q: "Routing rules are powerful without being a maze.", who: "Lito Reyes", role: "Ops · HALO Sportsbook", c: "#FF9DD2" },
          ].map((t, i) => (
            <div key={i} className="glass rounded-2xl p-6">
              <div className="flex gap-0.5 mb-3">
                {Array.from({length: 5}).map((_, j) => <Icon.Star key={j} size={14} className="text-lime" fill="#A6F84A"/>)}
              </div>
              <blockquote className="text-[15px] text-white/90 leading-relaxed">"{t.q}"</blockquote>
              <div className="flex items-center gap-2.5 mt-5 pt-4 border-t border-white/[0.05]">
                <CuAvatar name={t.who} color={t.c} size={32}/>
                <div>
                  <div className="text-[12.5px] font-medium text-white/95">{t.who}</div>
                  <div className="text-[11px] text-white/50">{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="relative max-w-[1280px] mx-auto px-8 pb-16">
        <div className="relative glass-strong rounded-3xl overflow-hidden p-12 lg:p-14 text-center">
          <div className="absolute inset-0" style={{ background: "radial-gradient(60% 80% at 50% 0%, rgba(166,248,74,0.16), transparent 60%)" }}/>
          <div className="relative">
            <h2 className="font-sans tracking-[-0.02em] text-white text-[40px] leading-[1.05] font-semibold">Be the next story.</h2>
            <p className="text-[15px] text-white/55 mt-3 max-w-[460px] mx-auto">Join the operators ditching three tools for one. First conversation in 4 minutes.</p>
            <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 trial <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.12] hover:bg-white/[0.04]">See pricing</button>
            </div>
          </div>
        </div>
      </section>
    </window.MarketingShell>
  );
}

// Customer card for grid
function CustomerCard({ c }) {
  return (
    <div className="group relative glass rounded-2xl p-7 overflow-hidden hover:bg-white/[0.04] transition cursor-pointer">
      <div className="absolute -top-12 -right-12 w-40 h-40 rounded-full opacity-20 group-hover:opacity-30 transition" style={{ background: `radial-gradient(circle, ${c.color}, transparent 70%)` }}/>
      <div className="relative">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2.5">
            <div className="w-10 h-10 rounded-xl grid place-items-center font-bold text-ink-950 text-[11px]" style={{ background: c.color }}>{c.initials}</div>
            <div>
              <div className="text-[14px] font-semibold text-white/95 leading-tight">{c.name}</div>
              <div className="text-[11px] text-white/50 mt-0.5">{c.industry}</div>
            </div>
          </div>
          <Icon.ArrowUpRight size={16} className="text-white/30 group-hover:text-lime group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition"/>
        </div>

        <blockquote className="text-[14px] text-white/85 leading-relaxed mt-5">"{c.quote}"</blockquote>

        <div className="flex items-center gap-2.5 mt-5">
          <CuAvatar name={c.person} color={c.avatarColor} size={28}/>
          <div className="text-[12px]">
            <span className="text-white/85 font-medium">{c.person}</span>
            <span className="text-white/40"> · {c.title}</span>
          </div>
        </div>

        <div className="grid grid-cols-3 gap-2 mt-6 pt-5 border-t border-white/[0.06]">
          {c.metrics.map((m, i) => (
            <div key={i}>
              <div className="text-[15px] font-semibold tabular-nums" style={{ color: c.color }}>{m.v}</div>
              <div className="text-[10px] uppercase tracking-wider text-white/45 mt-0.5 leading-tight">{m.l}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// Hero visual for the featured customer — stylized "before / after" mock
function CustomerStoryHero({ customer }) {
  return (
    <div className="relative">
      <div className="absolute -inset-6 rounded-3xl blur-[80px] opacity-30 pointer-events-none" style={{ background: customer.color }}/>
      <div className="relative glass-strong rounded-3xl overflow-hidden h-full p-7 flex flex-col">
        <div className="text-[10.5px] uppercase tracking-[0.15em] text-white/45">Results · 90 days post-install</div>

        {/* Big delta */}
        <div className="mt-5 grid grid-cols-2 gap-3">
          <div className="rounded-2xl p-5 bg-white/[0.03] border border-white/[0.06]">
            <div className="text-[10.5px] uppercase tracking-wider text-white/45">Before Loop</div>
            <div className="text-[42px] font-semibold text-white/30 mt-2 tracking-tight">11m 24s</div>
            <div className="text-[11px] text-white/40 mt-1">Avg first response</div>
            <svg viewBox="0 0 100 30" className="w-full h-[30px] mt-3">
              <path d="M0 5 L20 8 L40 12 L60 6 L80 15 L100 9" stroke="rgba(255,255,255,0.3)" strokeWidth="1.5" fill="none"/>
            </svg>
          </div>
          <div className="rounded-2xl p-5 border border-lime/30 bg-lime/[0.06] relative overflow-hidden">
            <div className="absolute top-2 right-2 px-1.5 py-0.5 rounded-md bg-lime text-ink-950 text-[9.5px] font-bold">−97%</div>
            <div className="text-[10.5px] uppercase tracking-wider text-lime/80">With Loop</div>
            <div className="text-[42px] font-semibold text-lime mt-2 tracking-tight">38s</div>
            <div className="text-[11px] text-lime/70 mt-1">Avg first response</div>
            <svg viewBox="0 0 100 30" className="w-full h-[30px] mt-3">
              <path d="M0 22 L20 18 L40 24 L60 12 L80 8 L100 4" stroke="#A6F84A" strokeWidth="1.5" fill="none"/>
            </svg>
          </div>
        </div>

        {/* Timeline */}
        <div className="mt-7 pt-6 border-t border-white/[0.05] flex-1 flex flex-col">
          <div className="text-[10.5px] uppercase tracking-[0.12em] text-white/45 mb-4">Rollout timeline</div>
          <div className="space-y-3 relative">
            <div className="absolute left-[7px] top-2 bottom-2 w-px bg-white/[0.08]"/>
            {[
              { d: "Day 0", t: "Snippet installed on flagship", c: "#A6F84A" },
              { d: "Day 2", t: "All 3 brands consolidated", c: "#7AB6FF" },
              { d: "Day 7", t: "Routing rules live, AI Copilot on", c: "#FFD37A" },
              { d: "Day 30", t: "CSAT +18pp, hit −97% response", c: "#FF9DD2" },
            ].map((s, i) => (
              <div key={i} className="flex items-start gap-3 relative">
                <div className="grid place-items-center w-4 h-4 rounded-full mt-0.5 shrink-0 relative z-10" style={{ background: s.c, boxShadow: `0 0 0 4px rgba(0,0,0,0.5)` }}>
                  <Icon.Check size={9} className="text-ink-950"/>
                </div>
                <div className="flex-1 flex items-baseline justify-between gap-3">
                  <span className="text-[12.5px] text-white/85">{s.t}</span>
                  <span className="text-[10.5px] font-mono text-white/45 tabular-nums">{s.d}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="mt-6 pt-5 border-t border-white/[0.05] flex items-center justify-between">
          <span className="text-[10.5px] text-white/45 uppercase tracking-wider">Brands consolidated</span>
          <div className="flex -space-x-1.5">
            {["WFL","WIN","LIF"].map((x, i) => (
              <div key={i} className="w-7 h-7 rounded-full grid place-items-center text-[9px] font-bold text-ink-950 ring-2 ring-ink-900" style={{ background: customer.color, opacity: 1 - i * 0.15 }}>{x}</div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

window.Customers = Customers;