/* global React, AX */

/* ============ ECOSYSTEM ============ */
function Ecosystem() {
  const apps = [
    { name: "Axxess", role: "Consumer app", platform: "iOS · Android", icon: <AX.IconPhone size={20}/>, desc: "Discover events, buy tickets, reserve tables, and carry every credential in one wallet.", tags: ["Discover", "Tickets", "Tables", "Wallet"], star: true },
    { name: "Axxess Venue", role: "Venue operations", platform: "iOS · Android", icon: <AX.IconDoor size={20}/>, desc: "Reservations, seating, occupancy, and a unified door for the venue team on the floor.", tags: ["Reservations", "The Door", "Floor plan"], accent: true },
    { name: "Axxess Ops", role: "Promoter door", platform: "iOS · Android", icon: <AX.IconScan size={20}/>, desc: "Fast event-grade ticket validation for promoters working entry at scale.", tags: ["Scan", "Validate", "Guest list"] },
    { name: "Admin & Operator", role: "Web dashboards", platform: "Web", icon: <AX.IconMonitor size={20}/>, desc: "Manage venues, promoters, events, staff, and regions from the operator console.", tags: ["Regions", "Staff", "Events"] },
  ];
  return (
    <section id="ecosystem" className="relative py-20 lg:py-28">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="reveal max-w-[620px]">
          <AX.Eyebrow>One platform, focused apps</AX.Eyebrow>
          <h2 className="mt-5 font-bold tracking-[-0.03em] leading-[1.02]" style={{ fontSize: "clamp(32px,4.4vw,52px)" }}>
            A surface for every role at the door.
          </h2>
          <p className="mt-5 text-[16px] text-sub leading-relaxed">
            Each app does one job exceptionally — all sharing the same lean, cryptographic ticket infrastructure underneath.
          </p>
        </div>

        <div className="mt-12 grid md:grid-cols-2 gap-5">
          {apps.map((a, i) => (
            <div key={i} className="reveal relative rounded-3xl p-7 lg:p-8 overflow-hidden" data-d={(i % 2) + 1}
              style={{ background: a.accent ? "linear-gradient(160deg, rgba(250,250,250,0.09), rgba(255,255,255,0.02))" : "rgba(255,255,255,0.025)", boxShadow: a.accent ? "inset 0 0 0 1px rgba(250,250,250,0.26)" : "inset 0 0 0 1px rgba(250,250,250,0.08)" }}>
              <div className="flex items-start justify-between">
                <div className="flex items-center gap-3.5">
                  <div className="w-12 h-12 rounded-2xl flex items-center justify-center" style={{ background: "#0A0A0A", boxShadow: a.accent ? "inset 0 0 0 1px rgba(250,250,250,0.4)" : "inset 0 0 0 1px rgba(250,250,250,0.1)", color: a.accent ? "#FAFAFA" : "#FAFAFA" }}>
                    {a.icon}
                  </div>
                  <div>
                    <div className="flex items-center gap-2">
                      <span className="text-[18px] font-bold tracking-[-0.01em]">{a.name}</span>
                      {a.star && <span className="text-[9px] font-bold px-2 py-0.5 rounded-full text-ink" style={{ background: "#FAFAFA" }}>FLAGSHIP</span>}
                    </div>
                    <div className="text-[12.5px] text-faint">{a.role}</div>
                  </div>
                </div>
                <span className="text-[11px] font-mono text-faint">{a.platform}</span>
              </div>
              <p className="mt-5 text-[14.5px] text-sub leading-relaxed">{a.desc}</p>
              <div className="mt-5 flex flex-wrap gap-2">
                {a.tags.map(t => (
                  <span key={t} className="text-[11.5px] font-semibold px-3 py-1.5 rounded-full text-sub" style={{ background: "rgba(250,250,250,0.04)", boxShadow: "inset 0 0 0 1px rgba(250,250,250,0.07)" }}>{t}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ CITIES ============ */
function Cities() {
  const cities = [
    ["New York", 1], ["Miami", 1], ["Los Angeles", 1], ["Chicago", 1],
    ["London", 0], ["Berlin", 0], ["Mexico City", 0], ["Toronto", 0], ["Dubai", 0], ["São Paulo", 0],
  ];
  return (
    <section id="cities" className="relative py-20 lg:py-24" style={{ background: "linear-gradient(180deg, transparent, rgba(250,250,250,0.03), transparent)" }}>
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="reveal flex flex-wrap items-end justify-between gap-6">
          <div className="max-w-[560px]">
            <AX.Eyebrow>Multi-region</AX.Eyebrow>
            <h2 className="mt-5 font-bold tracking-[-0.03em] leading-[1.04]" style={{ fontSize: "clamp(30px,4vw,48px)" }}>
              Launching city by city.
            </h2>
          </div>
          <p className="text-[15px] text-sub max-w-[360px] leading-relaxed">
            Axxess rolls out region by region — local venues, local promoters, one platform behind every door.
          </p>
        </div>

        <div className="reveal mt-12 flex flex-wrap gap-3" data-d="1">
          {cities.map(([c, live], i) => (
            <div key={i} className="flex items-center gap-2.5 rounded-full pl-4 pr-5 py-3"
              style={{ background: live ? "rgba(250,250,250,0.08)" : "rgba(255,255,255,0.025)", boxShadow: live ? "inset 0 0 0 1px rgba(250,250,250,0.3)" : "inset 0 0 0 1px rgba(250,250,250,0.08)" }}>
              <span className={"w-2 h-2 rounded-full " + (live ? "livepulse" : "")} style={{ background: live ? "#FAFAFA" : "rgba(250,250,250,0.3)" }}></span>
              <span className="text-[15px] font-semibold">{c}</span>
              <span className="text-[10px] font-bold uppercase tracking-wide" style={{ color: live ? "#FAFAFA" : "rgba(250,250,250,0.4)" }}>{live ? "Live" : "Soon"}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ METRICS ============ */
function Metric({ target, prefix = "", suffix = "", decimals = 0, label }) {
  const [ref, display] = AX.useCountUp(target, { decimals });
  return (
    <div ref={ref} className="text-center">
      <div className="font-bold tracking-[-0.03em] tabular-nums leading-none" style={{ fontSize: "clamp(40px,5.5vw,68px)" }}>
        {prefix}<span>{display}</span>{suffix}
      </div>
      <div className="mt-3 text-[12.5px] font-semibold uppercase tracking-[0.15em] text-faint">{label}</div>
    </div>
  );
}
function Metrics() {
  return (
    <section className="relative py-20 lg:py-24">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="reveal rounded-[2rem] px-7 lg:px-14 py-14 lg:py-16"
          style={{ background: "linear-gradient(150deg,#121214,#0b0b0c)", boxShadow: "inset 0 0 0 1px rgba(250,250,250,0.07)" }}>
          <div className="text-center mb-12">
            <AX.Eyebrow className="justify-center">Since launch</AX.Eyebrow>
          </div>
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-y-12 gap-x-6">
            <Metric target={1.2} prefix="" suffix="M" decimals={1} label="Tickets admitted"/>
            <Metric target={340} suffix="+" label="Venues on platform"/>
            <Metric target={0} suffix="%" label="Ticket commission"/>
            <Metric target={99.9} suffix="%" decimals={1} label="Scan uptime"/>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ CTA FOOTER ============ */
function FooterCTA() {
  return (
    <section id="cta" className="relative pt-12 pb-16 lg:pt-16 lg:pb-20">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="grid lg:grid-cols-2 gap-5">
          {/* guests */}
          <div className="reveal rounded-3xl p-9 lg:p-12 relative overflow-hidden" style={{ background: "rgba(255,255,255,0.025)", boxShadow: "inset 0 0 0 1px rgba(250,250,250,0.08)" }}>
            <span className="text-[11px] font-bold uppercase tracking-[0.18em] text-faint">For guests</span>
            <h3 className="mt-4 font-bold tracking-[-0.025em] leading-[1.02]" style={{ fontSize: "clamp(28px,3.4vw,40px)" }}>Get into the night.</h3>
            <p className="mt-4 text-[15px] text-sub max-w-[340px] leading-relaxed">Discover events, grab tickets, and book your table — all in one app.</p>
            <div className="mt-8 flex flex-wrap gap-3">
              <AX.CTA primary href="#top">Download Axxess</AX.CTA>
            </div>
          </div>
          {/* partners */}
          <div className="reveal rounded-3xl p-9 lg:p-12 relative overflow-hidden" data-d="1" style={{ background: "linear-gradient(160deg, rgba(250,250,250,0.06), rgba(11,11,12,0.6))", boxShadow: "inset 0 0 0 1px rgba(250,250,250,0.3)" }}>
            <div className="absolute -top-16 -right-10 w-52 h-52 rounded-full blur-3xl" style={{ background: "radial-gradient(circle,rgba(250,250,250,0.10),transparent 70%)" }}></div>
            <div className="relative">
              <span className="text-[11px] font-bold uppercase tracking-[0.18em] text-amberHi">For venues &amp; promoters</span>
              <h3 className="mt-4 font-bold tracking-[-0.025em] leading-[1.02]" style={{ fontSize: "clamp(28px,3.4vw,40px)" }}>Run your room on Axxess.</h3>
              <p className="mt-4 text-[15px] text-sub max-w-[360px] leading-relaxed">Sell tickets at 0% commission, manage reservations, and work a unified door. Free through launch.</p>
              <div className="mt-8 flex flex-wrap gap-3">
                <AX.CTA primary href="#top">Partner with us</AX.CTA>
                <AX.CTA href="#venue">See Axxess Venue</AX.CTA>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ FOOTER ============ */
function Footer() {
  const cols = [
    ["Platform", [["Axxess app","#top"], ["Axxess Venue","#venue"], ["Axxess Ops","#ecosystem"], ["Dashboards","#ecosystem"]]],
    ["Business", [["For venues","/venue/"], ["For promoters","#ecosystem"], ["Pricing","/pricing/"], ["Door hardware","#top"]]],
    ["Company", [["About","#top"], ["Cities","#cities"], ["Careers","#top"], ["Press","#top"]]],
    ["Legal", [["Privacy","#top"], ["Terms","#top"], ["Security","/security/"], ["Status","#top"]]],
  ];
  return (
    <footer className="relative border-t border-line">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10 py-16">
        <div className="grid lg:grid-cols-[1.4fr_2fr] gap-12">
          <div>
            <AX.Wordmark markSize={26} fontSize={20} ls={5} accent/>
            <p className="mt-5 text-[14px] text-sub max-w-[280px] leading-relaxed">The operating system for nightlife and events. Tickets, tables, and the door — one platform.</p>
            <div className="mt-6 flex items-center gap-2 text-[12px] text-faint">
              <AX.IconGlobe size={14}/><span>Multi-region · 0% commission</span>
            </div>
          </div>
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-8">
            {cols.map(([h, items]) => (
              <div key={h}>
                <div className="text-[12px] font-bold uppercase tracking-[0.14em] text-faint">{h}</div>
                <ul className="mt-4 space-y-2.5">
                  {items.map(([label, href]) => (
                    <li key={label}><a href={href} className="focusable text-[14px] text-sub hover:text-paper transition-colors">{label}</a></li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
        <div className="mt-14 pt-7 border-t border-line flex flex-col sm:flex-row items-center justify-between gap-4">
          <span className="text-[12.5px] text-faint font-mono">© 2026 Axxess · All rights reserved</span>
          <div className="flex items-center gap-5 text-[12.5px] text-faint">
            <a href="#top" className="focusable hover:text-paper transition-colors">Privacy</a>
            <a href="#top" className="focusable hover:text-paper transition-colors">Terms</a>
            <a href="#top" className="focusable hover:text-paper transition-colors">Cookies</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.AX = Object.assign(window.AX || {}, { Ecosystem, Cities, Metrics, FooterCTA, Footer });