/* global React, AX */

/* ============ PROOF BAND : metrics + villes ============ */
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 ProofBand() {
  const cities = [
    ["New York", 1], ["Miami", 1], ["Los Angeles", 1], ["Chicago", 1],
    ["Londres", 0], ["Berlin", 0], ["Mexico", 0], ["Toronto", 0], ["Dubaï", 0], ["São Paulo", 0],
  ];
  return (
    <section id="cities" 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">Adopté sur le terrain</AX.Eyebrow>
          </div>
          <div className="grid grid-cols-2 gap-y-10 gap-x-6 max-w-[680px] mx-auto">
            <Metric target={1.2} suffix="M" decimals={1} label="Billets admis"/>
            <Metric target={340} suffix="+" label="Salles sur la plateforme"/>
          </div>

          <div className="mt-14 pt-12" style={{ borderTop: "1px solid rgba(250,250,250,0.07)" }}>
            <div className="text-center mb-8">
              <span className="text-[12.5px] font-bold uppercase tracking-[0.15em] text-faint">Lancement ville par ville</span>
            </div>
            <div className="flex flex-wrap justify-center gap-3">
              {cities.map(([c, live], i) => (
                <div key={i} className="flex items-center gap-2.5 rounded-full pl-4 pr-5 py-2.5"
                  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-[14px] font-semibold">{c}</span>
                  <span className="text-[10px] font-bold uppercase tracking-wide" style={{ color: live ? "#FAFAFA" : "rgba(250,250,250,0.4)" }}>{live ? "En direct" : "Bientôt"}</span>
                </div>
              ))}
            </div>
          </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="max-w-[760px] mx-auto">
          <div className="reveal rounded-3xl p-9 lg:p-14 relative overflow-hidden text-center" 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">Pour les salles &amp; promoteurs</span>
              <h3 className="mt-4 font-bold tracking-[-0.025em] leading-[1.02]" style={{ fontSize: "clamp(30px,3.8vw,46px)" }}>Gérez votre salle avec Axxess.</h3>
              <p className="mt-4 text-[15px] text-sub max-w-[420px] mx-auto leading-relaxed">0% de commission, une porte unifiée, en ligne en 30 minutes. Sans contrat.</p>
              <div className="mt-8 flex flex-wrap gap-3 justify-center">
                <AX.CTA primary href="mailto:contact@yellogem.com">Rejoignez-nous</AX.CTA>
                <AX.CTA href="/fr/venue/">Voir Axxess Venue</AX.CTA>
              </div>
              <a href="#top" className="focusable mt-6 inline-block text-[13px] font-medium text-faint hover:text-paper transition-colors">Invité ? Téléchargez l'app →</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ FOOTER ============ */
function Footer() {
  const cols = [
    ["Plateforme", [["Application Axxess","#top"], ["Axxess Venue","#venue"], ["Axxess Ops","/fr/venue/"], ["Tableaux de bord","/fr/venue/"]]],
    ["Entreprise", [["Pour les salles","/fr/venue/"], ["Pour les promoteurs","/fr/venue/"], ["Tarification","/fr/pricing/"], ["Matériel de porte","#top"]]],
    ["Société", [["À propos","#top"], ["Villes","#cities"], ["Carrières","#top"], ["Presse","#top"]]],
    ["Juridique", [["Confidentialité","#top"], ["Conditions","#top"], ["Sécurité","/fr/security/"], ["Statut","#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">Le système d'exploitation de la nuit et des événements. Billets, tables et porte — une seule plateforme.</p>
            <div className="mt-6 flex items-center gap-2 text-[12px] text-faint">
              <AX.IconGlobe size={14}/><span>Multi-région · Billets, tables, la porte</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 · Tous droits réservés</span>
          <div className="flex items-center gap-5 text-[12.5px] text-faint">
            <a href="#top" className="focusable hover:text-paper transition-colors">Confidentialité</a>
            <a href="#top" className="focusable hover:text-paper transition-colors">Conditions</a>
            <a href="#top" className="focusable hover:text-paper transition-colors">Cookies</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.AX = Object.assign(window.AX || {}, { ProofBand, FooterCTA, Footer });