// ─── Homepage sections ───────────────────────────────────────
const { useState, useEffect, useRef } = React;

function Img({ src, alt = "", style, className = "" }) {
  const [loaded, setLoaded] = useState(false);
  return (
    <div className={"shimmer " + className} style={{position:"relative", width:"100%", height:"100%", ...style}}>
      <img
        src={src} alt={alt}
        onLoad={() => setLoaded(true)}
        loading="lazy"
        style={{
          position:"absolute", inset:0, width:"100%", height:"100%",
          objectFit:"cover",
          opacity: loaded ? 1 : 0, transition: "opacity 380ms ease",
        }}
      />
    </div>
  );
}

// ───── NAV ─────
function Nav({ openWizard, basePath = "", rootPath = "" }) {
  const D = window.PP_DATA;
  const [drawerOpen, setDrawerOpen] = useState(false);
  useEffect(() => {
    document.body.classList.toggle("drawer-locked", drawerOpen);
    return () => document.body.classList.remove("drawer-locked");
  }, [drawerOpen]);
  const close = () => setDrawerOpen(false);
  const h = (frag) => `${basePath}${frag}`;
  const page = (p) => `${rootPath}${p}`;
  const links = [
    { href:page("venues.html"),   label:"Venues",   sub:"13 inflatables" },
    { href:page("extras.html"),   label:"Extras",   sub:"21 individual items" },
    { href:page("gallery.html"),  label:"Gallery",  sub:"Real builds, no stock" },
    { href:h("#packages"),        label:"Packages", sub:"3 tiers, real prices" },
    { href:page("playbook.html"), label:"Playbook", sub:"Guides & cost breakdowns" },
    { href:page("promoter-pass.html"), label:"Promoter Pass", sub:"Up to 20% off" },
    { href:page("reviews.html"),  label:"Reviews",  sub:"312 real parties" },
    { href:h("#contact"),         label:"Contact",  sub:"Within the hour" },
  ];
  return (
    <>
      <nav className="nav">
        <div className="container nav-inner">
          <a href={h("#top")} className="nav-logo" onClick={close}>
            <div className="nav-mark" />
            <div className="nav-name">popup<span>parties</span></div>
          </a>
          <div className="nav-links">
            <a href={page("venues.html")}>Venues</a>
            <a href={page("extras.html")}>Extras</a>
            <a href={page("gallery.html")}>Gallery</a>
            <a href={h("#packages")}>Packages</a>
            <a href={page("playbook.html")}>Playbook</a>
            <a href={page("promoter-pass.html")} className="nav-promoter">Promoter Pass</a>
            <a href={h("#contact")}>Contact</a>
          </div>
          <div className="nav-cta">
            <a href="tel:+442070780814" className="pill pill-glass" style={{height:36,padding:"0 14px"}}>
              <Icon.Phone width={14} height={14}/> 0207 078 0814
            </a>
            <button className="btn btn-primary btn-sm" onClick={openWizard}>Plan my night <Icon.Arrow /></button>
            <button
              className={"nav-burger " + (drawerOpen ? "open" : "")}
              aria-label="Menu"
              aria-expanded={drawerOpen}
              onClick={() => setDrawerOpen(v => !v)}>
              <span/><span/><span/>
            </button>
          </div>
        </div>
      </nav>
      <div className={"nav-drawer " + (drawerOpen ? "open" : "")}>
        {links.map(l => (
          <a key={l.href} href={l.href} className="drawer-link" onClick={close}>
            {l.label}<span>{l.sub}</span>
          </a>
        ))}
        <div className="drawer-contact">
          <a href={`https://wa.me/${D.brand.whatsappNum}`} target="_blank" rel="noreferrer" className="drawer-wa">
            <span className="ic"><Icon.Chat width={18} height={18}/></span>
            <div style={{flex:1}}>
              <div style={{fontWeight:700,fontSize:15}}>Message us on WhatsApp</div>
              <div style={{fontSize:12,color:"rgba(255,255,255,0.78)"}}>Usually under 10 min · 7 days</div>
            </div>
          </a>
          <a href={`tel:${D.brand.phoneTel}`}>
            <span className="ic"><Icon.Phone width={16} height={16} style={{color:"var(--gold)"}}/></span>
            <div style={{flex:1}}>
              <div style={{fontWeight:700}}>{D.brand.phone}</div>
              <div style={{fontSize:12,color:"var(--ink-3)"}}>9am–8pm, 7 days</div>
            </div>
          </a>
          <button
            className="btn btn-primary"
            style={{marginTop:6}}
            onClick={() => { close(); openWizard(); }}>
            Plan my night <Icon.Arrow />
          </button>
        </div>
      </div>
    </>
  );
}

// ───── MOBILE STICKY BOTTOM BAR ─────
function MobileBar({ openWizard }) {
  const D = window.PP_DATA;
  return (
    <div className="mobile-bar">
      <button className="btn btn-primary" onClick={openWizard}>
        Plan my night <Icon.Arrow />
      </button>
      <a className="btn btn-wa" href={`https://wa.me/${D.brand.whatsappNum}`} target="_blank" rel="noreferrer" aria-label="WhatsApp">
        <Icon.Chat width={20} height={20}/>
      </a>
    </div>
  );
}

// ───── HERO (simplified: single cinematic image) ─────
function Hero({ openWizard }) {
  const D = window.PP_DATA;
  return (
    <section className="hero" id="top">
      <div className="grain" />
      <div className="neon-ring" style={{width:520,height:520,background:"#FF2E8A",top:-200,left:-180,opacity:0.45}} />
      <div className="neon-ring" style={{width:420,height:420,background:"#4DE3FF",top:120,right:-160,opacity:0.20}} />

      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="hero-pre">
              <span className="stars">
                {[0,1,2,3,4].map(i => <Icon.Star key={i} width={12} height={12}/>)}
              </span>
              <strong>4.8</strong> · 312 verified parties
            </div>
            <h1>
              Your garden.<br/>
              <span className="txt-pink">Reimagined</span><br/>
              as a nightclub.
            </h1>
            <p className="lede">
              Inflatable VIP venues, rave caves & bubble tents — delivered, set up, and ready to go in under 90 minutes. For birthdays, garden parties and brand nights.
            </p>
            <div className="hero-cta-row">
              <button className="btn btn-primary btn-lg" onClick={openWizard}>
                See my price <Icon.Arrow />
              </button>
              <a href="#fits" className="btn btn-ghost btn-lg">Take the 30-sec quiz</a>
            </div>
            <div className="hero-trust-row">
              <span className="pill pill-live"><span className="live-dot" /> {D.brand.enquiriesLast24h} enquiries · last 24h</span>
              <TrustBadge kind="google" />
              <span className="pill pill-glass">Free delivery · 45mi</span>
            </div>
          </div>

          <div className="hero-image">
            <video
              className="hero-video"
              src="uploads/landing-page-reel.mp4"
              autoPlay muted loop playsInline
              poster="https://popupparties.uk/wp-content/uploads/2023/08/Skype_Picture_2022_05_18T06_13_37_837Z.jpg"
              aria-label="Real footage from Popup Parties events"
            />
            <div className="hero-image-overlay">
              <div className="stat stat-pink">
                <span className="num">£494+</span>
                <span className="lbl">From / package</span>
              </div>
              <div className="stat stat-gold">
                <span className="num">230</span>
                <span className="lbl">Max guests</span>
              </div>
              <div className="stat">
                <span className="num">90m</span>
                <span className="lbl">Setup time</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───── FIT-FINDER ─────
function Fits({ openWizard }) {
  const fits = [
    {
      key: "birthday",
      img: "https://popupparties.uk/wp-content/uploads/2023/11/imgpsh_fullsize_anim.png",
      eyebrow: "BIRTHDAYS & MILESTONES",
      title: "The 30th, 40th or 50th nobody forgets.",
      bullets: ["12 to 230 guests in your garden", "Inflatable dome + lasers + LED bar", "Setup ~90 min · 24h hire"],
      from: 494,
      accent: "pink",
    },
    {
      key: "garden",
      img: "https://popupparties.uk/wp-content/uploads/2023/08/IMG_2591-1.jpg",
      eyebrow: "GARDEN & PRIVATE PARTIES",
      title: "Bubble tents, rave caves, intimate domes.",
      bullets: ["10 to 80 guests, more relaxed energy", "Choose chill bubble or full nightclub", "Indoor-ready · indoor or outdoor"],
      from: 595,
      accent: "gold",
    },
    {
      key: "corporate",
      img: "https://popupparties.uk/wp-content/uploads/2023/08/Skype_Picture_2022_05_18T06_13_37_837Z.jpg",
      eyebrow: "CORPORATE & BRAND",
      title: "Activations, summer parties, launches.",
      bullets: ["80 to 230 guests, branded space", "Custom LED, 360° photobooth, DJ booth", "Insured · invoiceable · UK-wide"],
      from: 1190,
      accent: "cyan",
    },
  ];
  return (
    <section className="section" id="fits">
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="h-eyebrow">WHICH SETUP FITS?</div>
            <h2>Tell us the kind of <span className="txt-pink">night</span> you're throwing.</h2>
          </div>
          <p>Three routes, three feelings. Pick the one closest to your event — we'll fine-tune from there.</p>
        </div>
        <div className="fits">
          {fits.map(f => (
            <button key={f.key} className="fit" onClick={openWizard}>
              <div className="fit-img">
                <Img src={f.img} />
              </div>
              <div className="fit-body">
                <div className={"h-eyebrow " + f.accent}>{f.eyebrow}</div>
                <h3>{f.title}</h3>
                <ul className="fit-bullets">
                  {f.bullets.map(b => <li key={b}>{b}</li>)}
                </ul>
                <div className="fit-foot">
                  <div className="fit-from">
                    <span className="label">From</span>
                    <span className="num">£{f.from}</span>
                  </div>
                  <span className="btn btn-ghost btn-sm">Check fit <Icon.Arrow /></span>
                </div>
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───── VENUES ─────
function Venues() {
  const D = window.PP_DATA;
  const venues = D.products.filter(p => p.cat !== "extras");
  return (
    <section className="section" id="venues" style={{paddingTop:0}}>
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="h-eyebrow">THE VENUES</div>
            <h2>Eight setups. <span className="txt-gold">One that fits yours.</span></h2>
          </div>
          <p>Browse the lineup — capacity, footprint and starting price on every option. Click any for full specs.</p>
        </div>
        <div className="venues">
          {venues.map(p => (
            <a key={p.id} href={`product.html?id=${p.id}`} className="venue" style={{textDecoration:"none",color:"inherit",display:"flex",flexDirection:"column"}}>
              <div className="venue-img">
                <Img src={p.img} />
                <div className="venue-price">From £{p.price}</div>
              </div>
              <div className="venue-body">
                <div className="venue-name">{p.name}</div>
                <div className="venue-meta">
                  <span><Icon.Users width={12} height={12}/> {p.capacity}</span>
                  <span><Icon.Ruler width={12} height={12}/> {p.size}</span>
                </div>
              </div>
            </a>
          ))}
        </div>
        <div style={{textAlign:"center",marginTop:32}}>
          <a href="venues.html" className="btn btn-ghost btn-lg">
            See all 13 venues &amp; filters <Icon.Arrow />
          </a>
        </div>
      </div>
    </section>
  );
}

// ───── BESPOKE INDOOR — pivot moment for hosts without a garden ─────
function Bespoke({ openWizard }) {
  return (
    <section className="bespoke" id="bespoke">
      <div className="container">
        <div className="bespoke-inner">
          <div className="bespoke-img">
            <img src="media/indoor-bespoke.png" alt="A bespoke indoor party setup — LED 3D dancefloor, LED LOVE letters, LED bar with light-up stools, smoke and lighting inside a residential home" loading="lazy" />
            <span className="bespoke-tag">REAL BUILD · KENT, FEB 2026</span>
          </div>
          <div className="bespoke-body">
            <div className="h-eyebrow pink" style={{marginBottom:18}}>03B · NO GARDEN? NO PROBLEM</div>
            <h2>The kit <span className="txt-pink">comes inside.</span></h2>
            <p className="bespoke-lede">
              Don't have a garden? Or got a living room already worth showing off? Hire the LEDs, the dancefloor, the bar, the lasers and the smoke — without the inflatable. We bring the nightclub into your home.
            </p>

            <ul className="bespoke-list">
              <li>
                <div className="ic" aria-hidden="true">🏠</div>
                <div>
                  <strong>Designed around your space</strong>
                  <span>Kitchens, lounges, basements, conservatories — we measure your room and build to fit.</span>
                </div>
              </li>
              <li>
                <div className="ic" aria-hidden="true">💡</div>
                <div>
                  <strong>Same kit, indoor-rated</strong>
                  <span>LED dancefloor, LED bar &amp; letters, lasers, smoke. Bring 1 piece or 20 — à la carte.</span>
                </div>
              </li>
              <li>
                <div className="ic" aria-hidden="true">⏱</div>
                <div>
                  <strong>Setup in 60–90 minutes</strong>
                  <span>We protect floors, run cabling under rugs, and tidy up so it looks intentional, not improvised.</span>
                </div>
              </li>
            </ul>

            <div className="bespoke-cta-row">
              <a href="extras.html" className="btn btn-primary btn-lg">
                Browse extras à la carte <Icon.Arrow />
              </a>
              <button className="btn btn-ghost btn-lg" onClick={openWizard}>
                Plan a bespoke build
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───── PACKAGES ─────
function Packages({ openWizard }) {
  const D = window.PP_DATA;
  const minSpend = { raw: 494, essentials: 595, nightclub: 1190, ultra: 1990 };
  const tierPackages = D.packages.filter(p => p.kind === "tier");
  const venueOnly = D.packages.find(p => p.id === "raw");
  const tierLabel = (i, p) => {
    const idx = String(i + 1).padStart(2, "0");
    if (p.id === "essentials") return `TIER ${idx} · ESSENTIAL`;
    if (p.id === "nightclub")  return `TIER ${idx} · SIGNATURE`;
    if (p.id === "ultra")      return `TIER ${idx} · ULTRA`;
    return `TIER ${idx}`;
  };
  return (
    <section className="section" id="packages">
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="h-eyebrow">PACKAGES</div>
            <h2>Three ways to <span className="txt-pink">pull it together.</span></h2>
          </div>
          <p>Every package includes delivery, setup and next-day collection. Mix in extras anytime. Minimum spends are real, not hidden.</p>
        </div>
        <div className="packages">
          {tierPackages.map((p, i) => (
            <div key={p.id} className={"pkg " + (p.featured ? "featured" : "")}>
              {p.featured && <div className="pkg-badge"><span className="pill pill-pink">★ Most booked</span></div>}
              <div className="h-eyebrow" style={{color: p.featured ? "var(--pink-glow)" : "var(--ink-3)"}}>
                {tierLabel(i, p)}
              </div>
              <h3>{p.name}</h3>
              <div className="tag">{p.tagline}</div>
              <div className="pkg-price">
                <span className="label">From</span>
                <span className="num">£{p.from}<span className="plus">+</span></span>
              </div>
              <div className="min">Minimum spend <strong>£{minSpend[p.id]}</strong> · 25% deposit secures your date</div>
              <ul className="pkg-list">
                {p.includes.map(i => (
                  <li key={i}><Icon.Check style={{color: p.featured ? "var(--pink-glow)" : "var(--gold)"}}/>{i}</li>
                ))}
              </ul>
              <div className="pkg-cta">
                <button className={"btn " + (p.featured ? "btn-primary" : "btn-ghost")} style={{width:"100%"}}
                        onClick={openWizard}>
                  Check availability <Icon.Arrow />
                </button>
              </div>
            </div>
          ))}
        </div>

        {/* OFF-MENU strip — venue-only + bespoke, side by side */}
        <div className="offmenu-strip">
          <div className="offmenu-head">
            <div className="h-eyebrow muted">OFF-MENU</div>
            <h4>None of these quite fit? Two more ways in.</h4>
          </div>
          <div className="offmenu-grid">
            <div className="offmenu-card">
              <div className="offmenu-card-head">
                <span className="lbl">Just the venue</span>
                <span className="price">From £{venueOnly ? venueOnly.from : 494}</span>
              </div>
              <p>Pick your inflatable, we deliver, set up, collect the next day — that's it. Bring your own DJ, bar, the lot.</p>
              <a className="btn btn-ghost btn-sm" href="venues.html">Browse venues <Icon.Arrow width={14} height={14}/></a>
            </div>
            <div className="offmenu-divider" aria-hidden="true"><span>OR</span></div>
            <div className="offmenu-card">
              <div className="offmenu-card-head">
                <span className="lbl">Build your own</span>
                <span className="price">Bespoke quote</span>
              </div>
              <p>Mix any venue with any extras. We'll come back within the hour with a tailored quote — best for unusual combinations or when nothing fits.</p>
              <button className="btn btn-ghost btn-sm" onClick={() => window.dispatchEvent(new CustomEvent("openPlanner", { detail: { source: "off-menu-build-your-own" } }))}>Start building <Icon.Arrow width={14} height={14}/></button>
            </div>
          </div>
        </div>

        <a href="promoter-pass.html" className="promoter-strip" style={{marginTop: 32}}>
          <div className="promoter-strip-mark" aria-hidden="true">
            <span className="rec"><i/></span>
            <span className="lbl">REC</span>
          </div>
          <div className="promoter-strip-copy">
            <div className="h-eyebrow pink" style={{marginBottom:6}}>Promoter Pass · Invite-only</div>
            <h4>Want this for less? Let us film your night.</h4>
            <p>Up to 20% off your package in exchange for a small camera crew on the night. 8–12 slots a season — read the swap before you book.</p>
          </div>
          <div className="promoter-strip-cta">
            <span className="btn btn-ghost">See the deal <Icon.Arrow /></span>
          </div>
        </a>
      </div>
    </section>
  );
}

// ───── PROOF / REVIEWS ─────
function Proof() {
  const D = window.PP_DATA;
  const photos = [
    "https://popupparties.uk/wp-content/uploads/2023/08/Skype_Picture_2022_05_18T06_13_37_837Z.jpg",
    "https://popupparties.uk/wp-content/uploads/2023/08/IMG_0729-1.jpg",
    "https://popupparties.uk/wp-content/uploads/2023/11/imgpsh_fullsize_anim.png",
    "https://popupparties.uk/wp-content/uploads/2023/08/IMG_2591-1.jpg",
    "https://popupparties.uk/wp-content/uploads/2023/09/8m-Dome-300x300.jpg",
    "https://popupparties.uk/wp-content/uploads/2023/08/tiktok_party_images.jpg",
  ];
  return (
    <section className="section" id="reviews">
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="h-eyebrow">REAL PARTIES, REAL REVIEWS</div>
            <h2>312 parties. <span className="txt-gold">4.8★ average.</span></h2>
          </div>
          <p>Every review on this page is verified through Google. Photos are real guests, real gardens, real nights.</p>
        </div>
        <div className="proof-grid">
          <div style={{display:"grid",gap:14}}>
            {D.reviews.map((r, i) => (
              <div key={i} className="review">
                <div className="stars">{[0,1,2,3,4].map(j => <Icon.Star key={j} width={16} height={16} style={{opacity: j < r.stars ? 1 : 0.25}}/>)}</div>
                <p>"{r.text}"</p>
                <div className="review-meta">
                  <strong>— {r.name}</strong>
                  <span>{r.date} · Google review</span>
                </div>
              </div>
            ))}
            <div className="review" style={{background:"transparent",borderStyle:"dashed",alignItems:"center",flexDirection:"row",gap:18,justifyContent:"space-between"}}>
              <div>
                <div className="h-eyebrow" style={{marginBottom:6}}>WHAT TO EXPECT NEXT</div>
                <div style={{fontWeight:700,fontSize:15}}>Free virtual survey before you commit.</div>
                <div style={{fontSize:13,color:"var(--ink-2)",marginTop:4}}>Send a photo of your space — we'll confirm what fits.</div>
              </div>
              <Icon.Arrow style={{color:"var(--pink-glow)"}}/>
            </div>
          </div>
          <div className="gallery">
            <div className="gallery-tile tall"><Img src={photos[0]} /></div>
            <div className="gallery-tile"><Img src={photos[1]} /></div>
            <div className="gallery-tile"><Img src={photos[2]} /></div>
            <div className="gallery-tile"><Img src={photos[3]} /></div>
            <div className="gallery-tile"><Img src={photos[4]} /></div>
            <div className="gallery-tile"><Img src={photos[5]} /></div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───── FINAL CTA + CONTACT ─────
function FinalCTA({ openWizard }) {
  const D = window.PP_DATA;
  return (
    <section className="section" id="contact" style={{paddingTop:0}}>
      <div className="container">
        <div className="cta-block">
          <div className="grain" />
          <div style={{position:"relative"}}>
            <div className="h-eyebrow pink">LET'S PLAN IT</div>
            <h2>Tell us the date. <br/>We'll quote you back <span className="txt-gold">within the hour.</span></h2>
            <p>A two-minute fit-finder gathers everything we need — date, space, guest count, package — and gives you an estimate before you hand over your email. No spam, no chasing.</p>
            <div style={{display:"flex",gap:12,flexWrap:"wrap"}}>
              <button className="btn btn-primary btn-lg" onClick={openWizard}>
                Start my enquiry <Icon.Arrow />
              </button>
              <a href={`https://wa.me/${D.brand.whatsappNum}`} target="_blank" rel="noreferrer" className="btn btn-ghost btn-lg">
                <Icon.Chat /> WhatsApp us
              </a>
            </div>
          </div>
          <div className="cta-side">
            <div className="h-eyebrow">REACH US DIRECT</div>
            <h4>Real humans, fast replies.</h4>
            <p>Most enquiries get a personalised quote within an hour, 7 days a week.</p>
            <a href={`https://wa.me/${D.brand.whatsappNum}`} target="_blank" rel="noreferrer" className="wa-cta">
              <span className="wa-cta-icon"><Icon.Chat width={20} height={20}/></span>
              <span className="wa-cta-body">
                <span className="wa-cta-title">Message us on WhatsApp</span>
                <span className="wa-cta-sub">Usually under 10 min</span>
              </span>
              <Icon.Arrow width={16} height={16} className="wa-cta-arrow"/>
            </a>
            <a href={`tel:${D.brand.phoneTel}`} className="cta-contact-row cta-contact-phone">
              <span className="ic"><Icon.Phone width={16} height={16}/></span>
              <span className="cta-contact-body">
                <span className="cta-contact-title">Call {D.brand.phone}</span>
                <span className="cta-contact-sub">Mon–Sun · 9am–8pm</span>
              </span>
              <Icon.Arrow width={14} height={14} className="cta-contact-arrow"/>
            </a>
            <a href={`mailto:${D.brand.email}`} className="cta-contact-row cta-contact-email">
              <span className="ic"><Icon.Mail width={16} height={16}/></span>
              <span className="cta-contact-body">
                <span className="cta-contact-title">Email {D.brand.email}</span>
                <span className="cta-contact-sub">For longer enquiries</span>
              </span>
              <Icon.Arrow width={14} height={14} className="cta-contact-arrow"/>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───── FOOTER ─────
function Footer({ basePath = "", rootPath = "" }) {
  const D = window.PP_DATA;
  const h = (frag) => `${basePath}${frag}`;
  const page = (p) => `${rootPath}${p}`;
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <a href={h("#top")} className="nav-logo">
              <div className="nav-mark" />
              <div className="nav-name">popup<span>parties</span></div>
            </a>
            <p style={{color:"var(--ink-2)",fontSize:14,lineHeight:1.55,margin:"16px 0 18px",maxWidth:320}}>
              Take your garden party to the next level with UK's most-booked inflatable nightclub hire.
            </p>
            <div style={{display:"flex",gap:8,flexWrap:"wrap"}}>
              <TrustBadge kind="google"/>
              <TrustBadge kind="trustpilot"/>
            </div>
            <div className="footer-socials" aria-label="Follow Popup Parties">
              {D.brand.socials.map((s) => {
                const IconCmp = Icon[s.id === "instagram" ? "Instagram" : s.id === "tiktok" ? "TikTok" : s.id === "facebook" ? "Facebook" : "YouTube"];
                return (
                  <a
                    key={s.id}
                    href={s.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className={`footer-social footer-social-${s.id}`}
                    aria-label={`${s.label} — ${s.handle}`}
                    title={`${s.label} · ${s.handle}`}
                  >
                    <IconCmp width={18} height={18}/>
                  </a>
                );
              })}
            </div>
          </div>
          <div>
            <h5>Setups</h5>
            <ul>
              <li><a href={page("venues.html") + "?cat=vip"}>VIP Venues</a></li>
              <li><a href={page("venues.html") + "?cat=rave"}>Rave Caves</a></li>
              <li><a href={page("venues.html") + "?cat=bubble"}>Bubble Tents</a></li>
              <li><a href={page("extras.html")}>Extras & LED</a></li>
              <li><a href={page("gallery.html")}>Gallery</a></li>
            </ul>
          </div>
          <div>
            <h5>Company</h5>
            <ul>
              <li><a href={page("reviews.html")}>Reviews</a></li>
              <li><a href={h("#packages")}>Packages</a></li>
              <li><a href={page("playbook.html")}>Party Playbook</a></li>
              <li><a href={h("#faq")}>FAQ</a></li>
              <li><a href={page("promoter-pass.html")}>Promoter pass</a></li>
            </ul>
          </div>
          <div>
            <h5>Contact</h5>
            <ul>
              <li>
                <a href={`https://wa.me/${D.brand.whatsappNum}`} target="_blank" rel="noreferrer" className="footer-wa-link">
                  <Icon.Chat width={14} height={14}/> Message us on WhatsApp
                </a>
              </li>
              <li>
                <a href={`tel:${D.brand.phoneTel}`} className="footer-phone-link">
                  <Icon.Phone width={14} height={14}/> Call us on {D.brand.phone}
                </a>
              </li>
              <li>
                <a href={`mailto:${D.brand.email}`} className="footer-email-link">
                  <Icon.Mail width={14} height={14}/> Email {D.brand.email}
                </a>
              </li>
              <li style={{color:"var(--ink-2)",fontSize:13.5}}>{D.brand.address}</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Popup Parties · Under new family-run ownership</div>
          <div style={{display:"flex",gap:18,flexWrap:"wrap"}}>
            <a href={page("legal/privacy-policy.html")}>Privacy</a>
            <a href={page("legal/terms.html")}>Terms</a>
            <a href={page("legal/cookies.html")}>Cookies</a>
            <a href={page("legal/data-deletion.html")}>Data deletion</a>
            <a href={page("sitemap.html")}>Sitemap</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Img, Nav, MobileBar, Hero, Fits, Venues, Bespoke, Packages, Proof, FinalCTA, Footer });