/* 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="../" 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>
            Back
          </a>
          <span className="w-px h-4 bg-line"/>
          <AX.Wordmark markSize={20} fontSize={16} ls={4}/>
        </div>
        <nav aria-label="Venue page" className="hidden md:flex items-center gap-6 text-[13px] text-sub">
          <a href="#capabilities" className="focusable hover:text-paper transition-colors">Features</a>
          <a href="#how-it-works" className="focusable hover:text-paper transition-colors">Setup</a>
          <a href="#revenue" className="focusable hover:text-paper transition-colors">Pricing</a>
        </nav>
        <AX.CTA primary href="mailto:contact@yellogem.com">Get early access</AX.CTA>
      </div>
    </header>
  );
}

/* ---- HERO ---- */
function VenueHero() {
  const stats = [
    { val:"0%", label:"Ticket commission" },
    { val:"<30min", label:"First event live" },
    { val:"99.9%", label:"Scan uptime" },
  ];
  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>For venue owners</AX.Eyebrow>
          <h1 id="venue-h1" className="mt-6 font-bold tracking-[-0.04em] leading-[1.0]"
            style={{ fontSize:"clamp(44px,6.5vw,82px)" }}>
            Every ticket sold.<br className="hidden sm:block"/>Zero taken.
          </h1>
          <p className="mt-7 text-[18px] text-sub leading-relaxed max-w-[560px]">
            Sell tickets, manage reservations, and control the door — from one platform built for nightlife. 0% commission. Always.
          </p>
        </div>
        <div className="reveal mt-10 flex flex-wrap gap-4" data-d="1">
          <AX.CTA primary href="mailto:contact@yellogem.com">Start for free</AX.CTA>
          <AX.CTA href="#how-it-works">See how it works</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% ticket commission",
      desc:"Every euro of the face price is yours. No booking fee at source, no settlement surprises. Price your tickets honestly and keep it all.",
      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:"Reservation system",
      desc:"Table bookings with custom minimums, deposit logic, and a floor-plan view for your team. No separate reservation tool needed.",
      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:"Door & scan app",
      desc:"Any iPhone or Android becomes a professional scanner. Works offline. Duplicate detection is immediate — no second-scan entry.",
      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:"Live analytics",
      desc:"Occupancy in real time. Revenue by event. Guest breakdown and no-show rate. The data your previous system never surfaced.",
      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:"Staff accounts",
      desc:"Create scoped access for each role. Doormen see only the scanner. Managers see occupancy. Owners see everything.",
      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:"Fraud prevention",
      desc:"Every ticket is cryptographically signed. Fake screenshots, edited PDFs, and resold duplicates are caught instantly at the door.",
      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>Full feature set</AX.Eyebrow>
          <h2 id="cap-h" className="mt-5 font-bold tracking-[-0.03em] leading-[1.02]" style={{ fontSize:"clamp(30px,4vw,48px)" }}>
            Everything a venue needs to operate.
          </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:"Create your venue", body:"Add your venue name, cover photo, and capacity. Your profile is live immediately — no review queue, no waiting period." },
    { num:"02", time:"< 3 min", title:"Publish an event", body:"Set date, time, ticket tiers, and prices. Add a reservation minimum and deposit logic if needed. Hit publish." },
    { num:"03", time:"Instant", title:"Share your link", body:"Your event page is live. Guests buy through the Axxess app or your direct link. Share it on Instagram or WhatsApp." },
    { num:"04", time:"Night of", title:"Run the door", body:"Your team scans from any phone. Real-time occupancy on the dashboard. Offline mode if the wifi goes down." },
  ];
  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>Setup</AX.Eyebrow>
          <h2 id="hiw-h" className="mt-5 font-bold tracking-[-0.03em] leading-[1.02]" style={{ fontSize:"clamp(30px,4vw,48px)" }}>
            Your first event live in 30 minutes.
          </h2>
          <p className="mt-5 text-[16px] text-sub leading-relaxed">No onboarding calls. No hardware to order. No approval queue. Create an account and go.</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, hi:false },
    { name:"Resident Advisor", pct:10, hi:false },
    { name:"DICE / Shotgun", pct:10, hi:false },
    { 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>No hidden fees</AX.Eyebrow>
            <h2 id="rev-h" className="mt-5 font-bold tracking-[-0.03em] leading-[1.02]" style={{ fontSize:"clamp(28px,3.8vw,46px)" }}>
              You keep every dirham of the ticket price.
            </h2>
            <p className="mt-5 text-[15.5px] text-sub leading-relaxed">
              Traditional ticketing platforms take 8–10% from every sale — even from your most loyal regulars who'd buy direct if they could. Axxess takes 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">Your savings — per event</p>
              <div className="mt-6 space-y-5">
                <Slider label="Tickets sold" display={tickets.toLocaleString()} min={50} max={1000} step={50} value={tickets} onChange={setTickets}/>
                <Slider label="Ticket price" 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">Gross ticket revenue</span>
                  <span className="text-[19px] font-bold">€{revenue.toLocaleString()}</span>
                </div>
                <div className="mt-2 flex justify-between items-baseline">
                  <span className="text-[13px] text-sub">Lost to Eventbrite (8%)</span>
                  <span className="text-[14px] font-bold" style={{ color:"rgba(210,70,70,0.9)" }}>−€{saved.toLocaleString()}</span>
                </div>
                <div className="mt-4 pt-4 border-t border-line flex justify-between items-baseline">
                  <span className="text-[14px] font-semibold">You keep extra with Axxess</span>
                  <span className="text-[22px] font-bold">+€{saved.toLocaleString()}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- DASHBOARD ---- */
function VenueDashboard() {
  const bars = [58,72,41,88,65,95,91];
  const days = ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"];

  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">Real-time operations</AX.Eyebrow>
          <h2 id="dash-h" className="mt-5 font-bold tracking-[-0.03em] leading-[1.02]" style={{ fontSize:"clamp(28px,3.8vw,46px)" }}>
            Your whole operation, one screen.
          </h2>
          <p className="mt-4 text-[15px] text-sub leading-relaxed">Occupancy, revenue, and door activity — live on any device, from anywhere.</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 — Sat 21 Jun</span>
            </div>
            <div className="hidden md:flex items-center gap-6 text-[12px]" aria-hidden="true">
              {["Overview","Events","Door","Reports"].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:"Tonight's revenue", val:"€14,200", sub:"+18% vs last week" },
              { label:"Tickets scanned", val:"312 / 400", sub:"78% capacity" },
              { label:"Tables reserved", val:"24 / 30", sub:"6 tables open" },
              { label:"Waiting list", val:"47 guests", sub:"Live" },
            ].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">Weekly revenue</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">Door activity</div>
              <div className="space-y-3.5">
                {[
                  { name:"Youssef A.", tag:"VIP Table", ok:true },
                  { name:"Camille D.", tag:"GA Ticket", ok:true },
                  { name:"DUPLICATE", tag:"GA Ticket", ok:false },
                  { name:"Maria S.", tag:"GA Ticket", 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:"No hardware to buy", body:"Any iPhone or Android running Axxess Ops is a door station. No dedicated terminals, no NFC readers, no delivery window. Your team is ready tonight." },
    { title:"Works without wifi", body:"Cryptographic tickets validate offline. Even if your venue internet dies at 1am on a Friday, the door keeps scanning without interruption." },
    { title:"Double entries blocked instantly", body:"Each ticket is unique and signed. Once scanned, it's permanently marked. Reprinted PDFs and screenshot re-entries are caught every time." },
  ];
  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>Why 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)" }}>
            Built for the reality of running a door.
          </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>Get started</AX.Eyebrow>
            <h2 id="vcta-h" className="mt-5 font-bold tracking-[-0.03em] leading-[1.02]" style={{ fontSize:"clamp(30px,4vw,52px)" }}>
              Ready to run your room on Axxess?
            </h2>
            <p className="mt-5 text-[16px] text-sub leading-relaxed">Free through launch. No credit card required. Your first event live in under 30 minutes.</p>
            <div className="mt-9 flex flex-wrap gap-4">
              <AX.CTA primary href="mailto:contact@yellogem.com">Partner with us</AX.CTA>
              <AX.CTA href="../pricing/">See pricing</AX.CTA>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

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