/* global React, AX */

function Showcase() {
  const phones = [
    { el: <AX.DoorScreen/>, label: "La Porte", icon: <AX.IconDoor size={16}/>, desc: "Occupation en direct, un appui pour admettre ou libérer." },
    { el: <AX.ScanScreen/>, label: "Scanner", icon: <AX.IconScan size={16}/>, desc: "Un réticule pour les billets et les réservations de tables." },
    { el: <AX.ReservationsScreen/>, label: "Réservations", icon: <AX.IconCalendar size={16}/>, desc: "Les réservations du soir, le statut d'un coup d'œil." },
    { el: <AX.FloorScreen/>, label: "Plan de salle", icon: <AX.IconGrid size={16}/>, desc: "Tables libres vs occupées dans toute la salle." },
  ];
  const values = [
    { icon: <AX.IconTrending size={20}/>, k: "Occupation en temps réel", v: "Chaque entrée et sortie met à jour le compteur instantanément — la porte connaît toujours la salle." },
    { icon: <AX.IconShield size={20}/>, k: "Pas de double entrée", v: "Les billets et les réservations de tables passent par un seul scanner. Rien n'échappe, rien ne se double." },
  ];
  return (
    <section id="venue" className="relative py-24 lg:py-32 overflow-hidden">
      <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">
        <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)" }}>La pièce maîtresse</span>
            </div>
            <h2 className="mt-6 font-bold tracking-[-0.035em] leading-[0.94]" style={{ fontSize: "clamp(40px,6vw,76px)" }}>
              Gérez la porte.<br/><span className="text-amber">Maîtrisez la nuit.</span>
            </h2>
            <p className="mt-7 text-[17px] lg:text-[19px] leading-relaxed text-sub max-w-[560px]">
              Une application pour les réservations, le placement, l'occupation et une porte unifiée qui admet billets et réservations de tables via un seul scanner — validée hors ligne, pour que votre équipe gère la salle depuis un seul écran en direct, même sans réseau.
            </p>
            <a href="/fr/venue/" className="focusable group mt-6 inline-flex items-center gap-1.5 text-[14px] font-semibold text-amberHi">
              Voir la visite complète <AX.IconArrowRight size={16} className="group-hover:translate-x-0.5 transition-transform"/>
            </a>
          </div>
          <div className="reveal hidden lg:flex flex-col gap-2 pb-2" data-d="1">
            {["Interface sombre, conçue pour le terrain", "Fonctionne hors ligne à la porte", "Conçu pour toute l'équipe"].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>

        <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>

        <div className="mt-20 grid md:grid-cols-2 gap-5 max-w-[780px]">
          {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 });