/* global React, AX */
const { useState } = React;

(function(){
  if(document.getElementById('ax-r'))return;
  const s=document.createElement('style');s.id='ax-r';
  s.textContent='.ax-r{-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;cursor:pointer;outline:none;}.ax-r::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#FAFAFA;box-shadow:0 0 0 3px rgba(250,250,250,0.12);cursor:pointer;}.ax-r::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:#FAFAFA;cursor:pointer;}';
  document.head.appendChild(s);
})();

function Slider({ label, display, min, max, step, value, onChange }) {
  const pct = ((value - min) / (max - min) * 100).toFixed(1) + '%';
  return (
    <label className="block">
      <div className="flex justify-between text-[13.5px] mb-2.5">
        <span className="text-sub">{label}</span><span className="font-bold">{display}</span>
      </div>
      <input type="range" className="ax-r w-full" min={min} max={max} step={step} value={value}
        style={{ background:`linear-gradient(to right,rgba(250,250,250,0.85) ${pct},rgba(250,250,250,0.1) ${pct})` }}
        onChange={e => onChange(+e.target.value)}/>
    </label>
  );
}

/* ---- NAV ---- */
function VenueNav() {
  return (
    <header className="sticky top-0 z-50 border-b border-line"
      style={{ background:"rgba(10,10,10,0.92)", backdropFilter:"blur(18px)", WebkitBackdropFilter:"blur(18px)" }}>
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10 h-16 flex items-center justify-between gap-8">
        <div className="flex items-center gap-6">
          <a href="../../fr/" className="focusable flex items-center gap-1.5 text-[13px] text-sub hover:text-paper transition-colors">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
              <path d="M9 11L5 7L9 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            Retour
          </a>
          <span className="w-px h-4 bg-line"/>
          <AX.Wordmark markSize={20} fontSize={16} ls={4}/>
        </div>
        <nav aria-label="Navigation page salle" className="hidden md:flex items-center gap-6 text-[13px] text-sub">
          <a href="#capabilities" className="focusable hover:text-paper transition-colors">Fonctionnalités</a>
          <a href="#how-it-works" className="focusable hover:text-paper transition-colors">Configuration</a>
          <a href="#revenue" className="focusable hover:text-paper transition-colors">Tarifs</a>
        </nav>
        <AX.CTA primary href="mailto:contact@yellogem.com">Accès anticipé</AX.CTA>
      </div>
    </header>
  );
}

/* ---- HERO ---- */
function VenueHero() {
  const stats = [
    { val:"0%", label:"Commission sur les billets" },
    { val:"<30min", label:"Premier événement en ligne" },
    { val:"99,9%", label:"Disponibilité du scan" },
  ];
  return (
    <section aria-labelledby="venue-h1" className="relative pt-24 pb-20 lg:pt-32 lg:pb-28 overflow-hidden">
      <div className="absolute inset-0 pointer-events-none" aria-hidden="true">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[900px] h-[500px] rounded-full blur-[160px]"
          style={{ background:"radial-gradient(ellipse,rgba(250,250,250,0.05),transparent 70%)" }}/>
      </div>
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10 relative">
        <div className="reveal max-w-[760px]">
          <AX.Eyebrow>Pour les gérants de salle</AX.Eyebrow>
          <h1 id="venue-h1" className="mt-6 font-bold tracking-[-0.04em] leading-[1.0]"
            style={{ fontSize:"clamp(44px,6.5vw,82px)" }}>
            Chaque billet vendu.<br className="hidden sm:block"/>Zéro prélevé.
          </h1>
          <p className="mt-7 text-[18px] text-sub leading-relaxed max-w-[560px]">
            Vendez des billets, gérez les réservations et contrôlez l'entrée — depuis une seule plateforme conçue pour la nuit. 0% de commission. Toujours.
          </p>
        </div>
        <div className="reveal mt-10 flex flex-wrap gap-4" data-d="1">
          <AX.CTA primary href="mailto:contact@yellogem.com">Commencer gratuitement</AX.CTA>
          <AX.CTA href="#how-it-works">Voir comment ça marche</AX.CTA>
        </div>
        <div className="reveal mt-14 grid grid-cols-3 gap-px rounded-[20px] overflow-hidden" data-d="2"
          style={{ background:"rgba(250,250,250,0.07)" }}>
          {stats.map(({ val, label }) => (
            <div key={label} className="px-7 py-6" style={{ background:"#0A0A0A" }}>
              <div className="text-[28px] lg:text-[36px] font-bold tracking-[-0.03em]">{val}</div>
              <div className="mt-1.5 text-[11px] font-semibold uppercase tracking-[0.12em] text-faint">{label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- CAPABILITIES ---- */
function VenueCapabilities() {
  const features = [
    {
      hi:true, title:"0% de commission sur les billets",
      desc:"Chaque euro du prix facial vous revient. Pas de frais prélevés à la source, pas de surprise au virement. Fixez vos tarifs honnêtement et gardez tout.",
      icon:<svg width="18" height="18" viewBox="0 0 20 20" fill="none"><path d="M3.5 8.5a2.5 2.5 0 0 0 0-5M3.5 8.5a2.5 2.5 0 0 1 0 5M3.5 8.5H1.5m2 5H16.5m0-5a2.5 2.5 0 0 0 0-5M16.5 8.5a2.5 2.5 0 0 1 0 5M16.5 8.5h2" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>,
    },
    {
      title:"Système de réservation",
      desc:"Réservations de tables avec minimums personnalisés, acomptes et vue plan de salle pour votre équipe. Aucun outil tiers nécessaire.",
      icon:<svg width="18" height="18" viewBox="0 0 20 20" fill="none"><rect x="3" y="4" width="14" height="14" rx="2.5" stroke="currentColor" strokeWidth="1.4"/><path d="M7 2v4M13 2v4M3 9h14" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>,
    },
    {
      title:"Application d'entrée",
      desc:"N'importe quel iPhone ou Android devient un scanner professionnel. Fonctionne hors ligne. Détection des doublons immédiate — pas de deuxième passage.",
      icon:<svg width="18" height="18" viewBox="0 0 20 20" fill="none"><path d="M7 3H5a2 2 0 0 0-2 2v2M7 17H5a2 2 0 0 1-2-2v-2M13 3h2a2 2 0 0 1 2 2v2M13 17h2a2 2 0 0 0 2-2v-2M7 10h6" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>,
    },
    {
      title:"Analytiques en direct",
      desc:"Occupation en temps réel. Revenus par événement. Répartition des invités et taux de no-show. Les données que votre ancien système ne vous montrait jamais.",
      icon:<svg width="18" height="18" viewBox="0 0 20 20" fill="none"><path d="M4 16V11M8 16V7M12 16V9M16 16V3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>,
    },
    {
      title:"Comptes du personnel",
      desc:"Accès cloisonné par rôle. Les videurs ne voient que le scanner. Les managers voient l'occupation. Les propriétaires voient tout.",
      icon:<svg width="18" height="18" viewBox="0 0 20 20" fill="none"><circle cx="8" cy="6.5" r="3" stroke="currentColor" strokeWidth="1.4"/><path d="M2 17c0-3.314 2.686-6 6-6" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/><path d="M14 12v6m3-3h-6" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>,
    },
    {
      title:"Prévention de la fraude",
      desc:"Chaque billet est signé cryptographiquement. Les faux, les captures d'écran modifiées et les doublons revendus sont détectés immédiatement.",
      icon:<svg width="18" height="18" viewBox="0 0 20 20" fill="none"><path d="M10 18s-7-3-7-9V4l7-2 7 2v5c0 6-7 9-7 9Z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/><path d="M7 10l2 2 4-3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>,
    },
  ];
  return (
    <section id="capabilities" aria-labelledby="cap-h" className="relative py-20 lg:py-28">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="reveal max-w-[540px]">
          <AX.Eyebrow>Fonctionnalités complètes</AX.Eyebrow>
          <h2 id="cap-h" className="mt-5 font-bold tracking-[-0.03em] leading-[1.02]" style={{ fontSize:"clamp(30px,4vw,48px)" }}>
            Tout ce qu'une salle a besoin pour opérer.
          </h2>
        </div>
        <div className="mt-12 grid md:grid-cols-2 lg:grid-cols-3 gap-4">
          {features.map((f,i) => (
            <div key={i} className="reveal rounded-[1.5rem] p-7" data-d={(i%3)+1}
              style={{
                background: f.hi ? "linear-gradient(145deg,rgba(250,250,250,0.07),rgba(250,250,250,0.02))" : "rgba(255,255,255,0.025)",
                boxShadow: f.hi ? "inset 0 0 0 1px rgba(250,250,250,0.22)" : "inset 0 0 0 1px rgba(250,250,250,0.07)",
              }}>
              <div className="w-10 h-10 rounded-xl flex items-center justify-center text-sub"
                style={{ background:"rgba(250,250,250,0.06)", boxShadow:"inset 0 0 0 1px rgba(250,250,250,0.1)" }}>
                {f.icon}
              </div>
              <h3 className="mt-4 text-[17px] font-bold tracking-[-0.01em]">{f.title}</h3>
              <p className="mt-2.5 text-[14px] text-sub leading-relaxed">{f.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- HOW IT WORKS ---- */
function VenueHowItWorks() {
  const steps = [
    { num:"01", time:"< 2 min", title:"Créez votre salle", body:"Ajoutez le nom de votre salle, une photo de couverture et votre capacité. Votre profil est en ligne immédiatement — sans file d'attente." },
    { num:"02", time:"< 3 min", title:"Publiez un événement", body:"Définissez date, heure, types de billets et tarifs. Ajoutez un minimum de réservation et un acompte si besoin. Publiez." },
    { num:"03", time:"Instantané", title:"Partagez votre lien", body:"Votre événement est en ligne. Les invités achètent via l'app Axxess ou votre lien direct. Partagez-le sur Instagram ou WhatsApp." },
    { num:"04", time:"Le soir J", title:"Gérez l'entrée", body:"Votre équipe scanne depuis n'importe quel téléphone. Occupation en temps réel sur le tableau de bord. Mode hors ligne si le wifi coupe." },
  ];
  return (
    <section id="how-it-works" aria-labelledby="hiw-h" className="relative py-20 lg:py-28"
      style={{ background:"linear-gradient(180deg,transparent,rgba(250,250,250,0.025),transparent)" }}>
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="reveal max-w-[580px]">
          <AX.Eyebrow>Configuration</AX.Eyebrow>
          <h2 id="hiw-h" className="mt-5 font-bold tracking-[-0.03em] leading-[1.02]" style={{ fontSize:"clamp(30px,4vw,48px)" }}>
            Votre premier événement en ligne en 30 minutes.
          </h2>
          <p className="mt-5 text-[16px] text-sub leading-relaxed">Pas d'appel d'intégration. Pas de matériel à commander. Pas de liste d'attente. Créez un compte et lancez-vous.</p>
        </div>
        <div className="mt-14 grid md:grid-cols-2 lg:grid-cols-4 gap-5">
          {steps.map((s,i) => (
            <div key={i} className="reveal rounded-[1.5rem] 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.07)" }}>
              <div className="flex items-center justify-between">
                <span className="text-[13px] font-mono font-bold text-faint">{s.num}</span>
                <span className="text-[11px] font-semibold px-2.5 py-1 rounded-full"
                  style={{ background:"rgba(250,250,250,0.06)", color:"rgba(250,250,250,0.45)" }}>{s.time}</span>
              </div>
              <h3 className="mt-5 text-[17px] font-bold tracking-[-0.01em]">{s.title}</h3>
              <p className="mt-3 text-[13.5px] text-sub leading-relaxed">{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- REVENUE ---- */
function VenueRevenue() {
  const [tickets, setTickets] = useState(300);
  const [price, setPrice] = useState(40);
  const revenue = tickets * price;
  const saved = Math.round(revenue * 0.08);

  const comps = [
    { name:"Eventbrite", pct:8 },
    { name:"Resident Advisor", pct:10 },
    { name:"DICE / Shotgun", pct:10 },
    { name:"Axxess", pct:0, hi:true },
  ];

  return (
    <section id="revenue" aria-labelledby="rev-h" className="relative py-20 lg:py-28">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="reveal grid lg:grid-cols-2 gap-14 lg:gap-20 items-center">
          <div>
            <AX.Eyebrow>Pas de frais cachés</AX.Eyebrow>
            <h2 id="rev-h" className="mt-5 font-bold tracking-[-0.03em] leading-[1.02]" style={{ fontSize:"clamp(28px,3.8vw,46px)" }}>
              Vous gardez chaque dirham du prix du billet.
            </h2>
            <p className="mt-5 text-[15.5px] text-sub leading-relaxed">
              Les plateformes traditionnelles prélèvent 8 à 10% sur chaque vente — même sur vos habitués les plus fidèles qui achèteraient en direct s'ils pouvaient. Axxess prend 0%.
            </p>
            <div className="mt-8 space-y-2.5">
              {comps.map(c => (
                <div key={c.name} className="flex items-center gap-3 rounded-xl px-4 py-3"
                  style={{
                    background: c.hi ? "rgba(250,250,250,0.06)" : "rgba(250,250,250,0.02)",
                    boxShadow: c.hi ? "inset 0 0 0 1px rgba(250,250,250,0.18)" : "inset 0 0 0 1px rgba(250,250,250,0.05)",
                  }}>
                  <span className="text-[13.5px] font-semibold w-36 shrink-0" style={{ color: c.hi ? "#FAFAFA" : "rgba(250,250,250,0.5)" }}>{c.name}</span>
                  <div className="flex-1 h-1 rounded-full overflow-hidden" style={{ background:"rgba(250,250,250,0.05)" }}>
                    {c.pct > 0 && <div className="h-full rounded-full" style={{ width:`${c.pct}%`, background:"rgba(220,60,60,0.65)" }}/>}
                  </div>
                  <span className="text-[14px] font-bold w-8 text-right" style={{ color: c.hi ? "#FAFAFA" : "rgba(210,70,70,0.9)" }}>
                    {c.pct}%
                  </span>
                </div>
              ))}
            </div>
          </div>

          <div className="reveal" data-d="1">
            <div className="rounded-[1.5rem] p-8" style={{ background:"rgba(255,255,255,0.025)", boxShadow:"inset 0 0 0 1px rgba(250,250,250,0.09)" }}>
              <p className="text-[12px] font-bold uppercase tracking-[0.14em] text-faint">Vos économies — par événement</p>
              <div className="mt-6 space-y-5">
                <Slider label="Billets vendus" display={tickets.toLocaleString('fr')} min={50} max={1000} step={50} value={tickets} onChange={setTickets}/>
                <Slider label="Prix du billet" display={`€${price}`} min={5} max={150} step={5} value={price} onChange={setPrice}/>
              </div>
              <div className="mt-8 rounded-xl p-5"
                style={{ background:"linear-gradient(145deg,rgba(250,250,250,0.06),rgba(250,250,250,0.01))", boxShadow:"inset 0 0 0 1px rgba(250,250,250,0.13)" }}>
                <div className="flex justify-between items-baseline">
                  <span className="text-[13px] text-sub">Revenus bruts</span>
                  <span className="text-[19px] font-bold">€{revenue.toLocaleString('fr')}</span>
                </div>
                <div className="mt-2 flex justify-between items-baseline">
                  <span className="text-[13px] text-sub">Perdu sur Eventbrite (8%)</span>
                  <span className="text-[14px] font-bold" style={{ color:"rgba(210,70,70,0.9)" }}>−€{saved.toLocaleString('fr')}</span>
                </div>
                <div className="mt-4 pt-4 border-t border-line flex justify-between items-baseline">
                  <span className="text-[14px] font-semibold">Vous gardez en plus avec Axxess</span>
                  <span className="text-[22px] font-bold">+€{saved.toLocaleString('fr')}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- DASHBOARD ---- */
function VenueDashboard() {
  const bars = [58,72,41,88,65,95,91];
  const days = ["Lun","Mar","Mer","Jeu","Ven","Sam","Dim"];

  return (
    <section aria-labelledby="dash-h" className="relative py-20 lg:py-28 overflow-hidden">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="reveal text-center mb-12 max-w-[520px] mx-auto">
          <AX.Eyebrow className="justify-center">Opérations en temps réel</AX.Eyebrow>
          <h2 id="dash-h" className="mt-5 font-bold tracking-[-0.03em] leading-[1.02]" style={{ fontSize:"clamp(28px,3.8vw,46px)" }}>
            Toute votre opération, un seul écran.
          </h2>
          <p className="mt-4 text-[15px] text-sub leading-relaxed">Occupation, revenus et activité à l'entrée — en direct sur n'importe quel appareil, de n'importe où.</p>
        </div>

        <div className="reveal rounded-[2rem] overflow-hidden" data-d="1"
          style={{ background:"#0f0f12", boxShadow:"inset 0 0 0 1px rgba(250,250,250,0.08), 0 40px 100px rgba(0,0,0,0.5)" }}>
          <div className="flex items-center justify-between px-8 py-4 border-b border-line">
            <div className="flex items-center gap-3">
              <span className="w-2.5 h-2.5 rounded-full livepulse" style={{ background:"#FAFAFA" }} aria-hidden="true"/>
              <span className="text-[13px] font-semibold">Club Mirage — Sam 21 Juin</span>
            </div>
            <div className="hidden md:flex items-center gap-6 text-[12px]" aria-hidden="true">
              {["Vue d'ensemble","Événements","Entrée","Rapports"].map((t,i)=>(
                <span key={t} style={{ color: i===0?"#FAFAFA":"rgba(250,250,250,0.35)" }}>{t}</span>
              ))}
            </div>
          </div>

          <div className="grid grid-cols-2 lg:grid-cols-4 divide-x divide-y lg:divide-y-0 divide-line">
            {[
              { label:"Revenus ce soir", val:"€14 200", sub:"+18% vs semaine dernière" },
              { label:"Billets scannés", val:"312 / 400", sub:"78% de capacité" },
              { label:"Tables réservées", val:"24 / 30", sub:"6 tables libres" },
              { label:"Liste d'attente", val:"47 invités", sub:"En direct" },
            ].map(({ label, val, sub })=>(
              <div key={label} className="px-6 py-5">
                <div className="text-[11px] text-faint uppercase tracking-wide">{label}</div>
                <div className="mt-2 text-[20px] font-bold tracking-tight">{val}</div>
                <div className="mt-1 text-[11px] text-faint">{sub}</div>
              </div>
            ))}
          </div>

          <div className="grid lg:grid-cols-[1fr_290px] divide-x divide-line"
            style={{ borderTop:"1px solid rgba(250,250,250,0.07)" }}>
            <div className="px-7 py-7">
              <div className="text-[12px] font-bold uppercase tracking-[0.12em] text-faint mb-6">Revenus hebdomadaires</div>
              <div className="flex items-end gap-2.5 h-28">
                {bars.map((h,i)=>(
                  <div key={i} className="flex-1 flex flex-col items-center gap-2">
                    <div className="w-full rounded-t"
                      style={{ height:`${h}%`, background: i>=5?"rgba(250,250,250,0.82)":"rgba(250,250,250,0.18)" }}/>
                    <span className="text-[10px] text-faint">{days[i]}</span>
                  </div>
                ))}
              </div>
            </div>
            <div className="px-6 py-7">
              <div className="text-[12px] font-bold uppercase tracking-[0.12em] text-faint mb-5">Activité entrée</div>
              <div className="space-y-3.5">
                {[
                  { name:"Youssef A.", tag:"Table VIP", ok:true },
                  { name:"Camille D.", tag:"Billet GA", ok:true },
                  { name:"DOUBLON", tag:"Billet GA", ok:false },
                  { name:"Maria S.", tag:"Billet GA", ok:true },
                  { name:"Karim O.", tag:"VIP", ok:true },
                ].map(({ name, tag, ok },i)=>(
                  <div key={i} className="flex items-center gap-2.5 text-[12.5px]">
                    <div className="w-1.5 h-1.5 rounded-full shrink-0"
                      style={{ background: ok?"rgba(74,222,128,0.8)":"rgba(248,113,113,0.9)" }} aria-hidden="true"/>
                    <span className={"flex-1 " + (ok?"text-sub":"font-bold text-paper")}>{name}</span>
                    <span className="text-faint text-[11px]">{tag}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- PROOF ---- */
function VenueProof() {
  const items = [
    { title:"Pas de matériel à acheter", body:"N'importe quel iPhone ou Android avec Axxess Ops devient une station d'entrée. Pas de terminal dédié, pas de lecteur NFC, pas de délai de livraison. Votre équipe est prête ce soir." },
    { title:"Fonctionne sans wifi", body:"Les billets cryptographiques se valident hors ligne. Même si votre connexion coupe à 1h du matin un vendredi, l'entrée continue de scanner sans interruption." },
    { title:"Doubles entrées bloquées instantanément", body:"Chaque billet est unique et signé. Une fois scanné, il est marqué définitivement. Les PDF réimprimés et captures d'écran sont bloqués à chaque fois." },
  ];
  return (
    <section aria-labelledby="proof-h" className="relative py-20 lg:py-24"
      style={{ background:"linear-gradient(180deg,transparent,rgba(250,250,250,0.02),transparent)" }}>
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="reveal max-w-[520px]">
          <AX.Eyebrow>Pourquoi Axxess</AX.Eyebrow>
          <h2 id="proof-h" className="mt-5 font-bold tracking-[-0.03em] leading-[1.02]" style={{ fontSize:"clamp(28px,3.6vw,44px)" }}>
            Conçu pour la réalité de gérer une entrée.
          </h2>
        </div>
        <div className="mt-12 grid md:grid-cols-3 gap-10">
          {items.map(({ title, body },i)=>(
            <div key={i} className="reveal" data-d={i+1}>
              <div className="w-8 h-0.5 rounded-full mb-6" style={{ background:"rgba(250,250,250,0.35)" }}/>
              <h3 className="text-[18px] font-bold tracking-[-0.01em]">{title}</h3>
              <p className="mt-3 text-[14.5px] text-sub leading-relaxed">{body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- CTA ---- */
function VenueCTA() {
  return (
    <section id="venue-cta" aria-labelledby="vcta-h" className="relative pt-12 pb-24 lg:pt-16 lg:pb-32">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="reveal rounded-[2.5rem] p-10 lg:p-16 relative overflow-hidden"
          style={{ background:"linear-gradient(140deg,rgba(250,250,250,0.07),rgba(250,250,250,0.02))", boxShadow:"inset 0 0 0 1px rgba(250,250,250,0.2)" }}>
          <div className="absolute -top-20 -right-20 w-80 h-80 rounded-full blur-3xl pointer-events-none" aria-hidden="true"
            style={{ background:"radial-gradient(circle,rgba(250,250,250,0.07),transparent 70%)" }}/>
          <div className="relative max-w-[560px]">
            <AX.Eyebrow>Commencer</AX.Eyebrow>
            <h2 id="vcta-h" className="mt-5 font-bold tracking-[-0.03em] leading-[1.02]" style={{ fontSize:"clamp(30px,4vw,52px)" }}>
              Prêt à faire tourner votre salle sur Axxess ?
            </h2>
            <p className="mt-5 text-[16px] text-sub leading-relaxed">Gratuit pendant le lancement. Sans carte bancaire. Votre premier événement en ligne en moins de 30 minutes.</p>
            <div className="mt-9 flex flex-wrap gap-4">
              <AX.CTA primary href="mailto:contact@yellogem.com">Devenir partenaire</AX.CTA>
              <AX.CTA href="../pricing/">Voir les tarifs</AX.CTA>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.AX = Object.assign(window.AX||{}, {
  VenueNav, VenueHero, VenueCapabilities, VenueHowItWorks, VenueRevenue, VenueDashboard, VenueProof, VenueCTA,
});
