/* global React, AX */

function Showcase() {
  const phones = [
    { el: <AX.DoorScreen/>, label: "The Door", icon: <AX.IconDoor size={16}/>, desc: "Live occupancy, one tap to admit or release." },
    { el: <AX.ScanScreen/>, label: "Scan", icon: <AX.IconScan size={16}/>, desc: "One reticle for tickets and table bookings." },
    { el: <AX.ReservationsScreen/>, label: "Reservations", icon: <AX.IconCalendar size={16}/>, desc: "Tonight's bookings, status at a glance." },
    { el: <AX.FloorScreen/>, label: "Floor plan", icon: <AX.IconGrid size={16}/>, desc: "Open vs seated across your whole room." },
  ];
  const values = [
    { icon: <AX.IconTrending size={20}/>, k: "Real-time occupancy", v: "Every admit and exit updates the count instantly — the door always knows the room." },
    { icon: <AX.IconShield size={20}/>, k: "No double-entry", v: "Tickets and table reservations resolve through one scanner. Nothing slips, nothing double-counts." },
    { icon: <AX.IconGrid size={20}/>, k: "Your whole floor, one screen", v: "Reservations, seating, and the door share a single live picture of the night." },
  ];
  return (
    <section id="venue" className="relative py-24 lg:py-32 overflow-hidden">
      {/* deep bg */}
      <div className="absolute inset-0 -z-10" aria-hidden="true">
        <div className="absolute inset-0" style={{ background: "linear-gradient(180deg, #0A0A0A, #0c0b0a 40%, #0A0A0A)" }}></div>
        <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[900px] h-[500px] rounded-full blur-[120px]" style={{ background: "radial-gradient(circle, rgba(250,250,250,0.06), transparent 65%)" }}></div>
      </div>

      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        {/* header */}
        <div className="grid lg:grid-cols-[1fr_auto] gap-8 lg:items-end">
          <div className="reveal">
            <div className="flex items-center gap-3">
              <span className="inline-flex items-center justify-center w-9 h-9 rounded-xl" style={{ background: "#0A0A0A", boxShadow: "inset 0 0 0 1px rgba(250,250,250,0.4)" }}>
                <AX.Aperture size={20} color="#FAFAFA" stroke={9}/>
              </span>
              <span className="text-[12px] font-bold uppercase tracking-[0.2em] text-amberHi">Axxess Venue</span>
              <span className="text-[11px] font-semibold text-faint px-2.5 py-1 rounded-full" style={{ boxShadow: "inset 0 0 0 1px rgba(250,250,250,0.12)" }}>The centerpiece</span>
            </div>
            <h2 className="mt-6 font-bold tracking-[-0.035em] leading-[0.94]" style={{ fontSize: "clamp(40px,6vw,76px)" }}>
              Run the door.<br/><span className="text-amber">Own the night.</span>
            </h2>
            <p className="mt-7 text-[17px] lg:text-[19px] leading-relaxed text-sub max-w-[560px]">
              One app for reservations, seating, occupancy, and a unified door that admits both tickets and table bookings — so your team works the room from a single live screen.
            </p>
          </div>
          <div className="reveal hidden lg:flex flex-col gap-2 pb-2" data-d="1">
            {["Dark, on-floor UI", "Works offline at the door", "Built for the whole team"].map(t => (
              <div key={t} className="flex items-center gap-2 text-[13px] text-sub justify-end">
                <span>{t}</span><span className="w-1.5 h-1.5 rounded-full bg-amber"></span>
              </div>
            ))}
          </div>
        </div>

        {/* phone rail */}
        <div className="reveal mt-16 -mx-6 lg:-mx-10 px-6 lg:px-10 overflow-x-auto noscroll" data-d="1">
          <div className="flex gap-6 lg:gap-7 min-w-min lg:justify-between pb-2" style={{ scrollSnapType: "x mandatory" }}>
            {phones.map((p, i) => (
              <div key={i} className="shrink-0" style={{ scrollSnapAlign: "center", marginTop: i % 2 === 1 ? 34 : 0 }}>
                <div className={i % 2 === 1 ? "floaty2" : "floaty"}>
                  <AX.Phone>{p.el}</AX.Phone>
                </div>
                <div className="mt-5 max-w-[286px]">
                  <div className="flex items-center gap-2">
                    <span className="text-amberHi">{p.icon}</span>
                    <span className="text-[15px] font-bold">{p.label}</span>
                    <span className="ml-auto text-[12px] font-mono text-faint">0{i + 1}</span>
                  </div>
                  <p className="mt-1.5 text-[13px] text-sub leading-snug">{p.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* value points */}
        <div className="mt-20 grid md:grid-cols-3 gap-5">
          {values.map((v, i) => (
            <div key={i} className="reveal rounded-2xl p-7" data-d={i + 1}
              style={{ background: "rgba(255,255,255,0.025)", boxShadow: "inset 0 0 0 1px rgba(250,250,250,0.08)" }}>
              <div className="w-11 h-11 rounded-xl flex items-center justify-center text-amberHi" style={{ background: "rgba(250,250,250,0.12)" }}>{v.icon}</div>
              <h3 className="mt-5 text-[18px] font-bold tracking-[-0.01em]">{v.k}</h3>
              <p className="mt-2 text-[14px] text-sub leading-relaxed">{v.v}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.AX = Object.assign(window.AX || {}, { Showcase });