/* ════════════════════════════════════════════════════════════
   Promoter Pass — standalone page
   The pitch: discount on your booking in exchange for letting
   us film your night for promo. Honest, two-sided.
   ════════════════════════════════════════════════════════════ */
const { useState: usePP } = React;

function PromoterHero({ openWizard }) {
  return (
    <section className="promoter-hero">
      <div className="grain" />
      <div className="neon-ring" style={{width:520,height:520,background:"#FF2E8A",top:-160,left:-180,opacity:0.38}} />
      <div className="neon-ring" style={{width:560,height:560,background:"#FFD15C",bottom:-220,right:-180,opacity:0.18}} />
      <div className="film-strip film-strip-top" aria-hidden="true" />
      <div className="film-strip film-strip-bot" aria-hidden="true" />

      <div className="container promoter-hero-inner">
        <div>
          <div className="hero-pre" style={{marginBottom:24}}>
            <span className="pill pill-pink" style={{height:24,padding:"0 10px",fontSize:10.5,letterSpacing:"0.18em",textTransform:"uppercase"}}>Invite-only</span>
            <span>Open to 1 booking per weekend · April–October</span>
          </div>

          <h1 className="promoter-h1">
            Let us film your night.<br/>
            <span className="txt-pink">Pay less for the party.</span>
          </h1>
          <p className="promoter-lede">
            Our best promo footage comes from real parties — not staged shoots. If you're up for a small camera crew slipping in after dark, we'll knock a meaningful chunk off your package and treat your event like a flagship.
          </p>

          <div style={{display:"flex",gap:12,flexWrap:"wrap",marginBottom:28}}>
            <a href="index.html#packages" className="btn btn-primary btn-lg">
              See packages <Icon.Arrow />
            </a>
            <button className="btn btn-ghost btn-lg" onClick={openWizard}>
              Enquire as a promoter
            </button>
          </div>

          <div className="promoter-trust">
            <div>
              <div className="num">up to <strong>20%</strong></div>
              <div className="lbl">off your package</div>
            </div>
            <div className="sep" aria-hidden="true" />
            <div>
              <div className="num"><strong>1 in 4</strong></div>
              <div className="lbl">bookings on the pass</div>
            </div>
            <div className="sep" aria-hidden="true" />
            <div>
              <div className="num"><strong>14 days</strong></div>
              <div className="lbl">to your final cut</div>
            </div>
          </div>
        </div>

        <div className="promoter-hero-visual">
          <div className="reel">
            <div className="reel-frame reel-frame-1">
              <video
                className="reel-video"
                src="uploads/landing-page-reel.mp4"
                autoPlay muted loop playsInline
                aria-label="Promoter Pass reel — real footage from a recent night"
              />
              <span className="reel-overlay-tag">4K · LIVE REEL</span>
            </div>
            <div className="reel-frame reel-frame-2">
              <div className="ph alt"><span>B-cam · gimbal</span></div>
            </div>
            <div className="reel-frame reel-frame-3">
              <div className="ph dark"><span className="rec"><i/>REC</span><span style={{position:"absolute",bottom:14,left:14,fontSize:11,letterSpacing:"0.18em",color:"#FFD15C",textTransform:"uppercase"}}>23:48 · Sat</span></div>
            </div>
            <div className="reel-clap">
              <div className="row top">
                <span/><span/><span/><span/><span/>
              </div>
              <div className="rows">
                <div><b>Scene</b><span>04</span></div>
                <div><b>Take</b><span>01</span></div>
                <div><b>Roll</b><span>A</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───── THE SWAP ─────
function TheSwap() {
  const give = [
    {
      label: "We film after dark",
      body: "One small crew (2 people, gimbal + drone if it suits) shoots between 9pm and midnight on the night of your party. Low-profile — no boom mics, no producer with a clipboard.",
    },
    {
      label: "Guests sign a model release",
      body: "Standard release for over-18s. Guests under 18 are never on camera, and anyone who doesn't want to be filmed just tells us — we steer around them.",
    },
    {
      label: "You leave a review",
      body: "An honest one. Good or bad — we'd rather hear it. Trustpilot or Google, you pick.",
    },
    {
      label: "You refer one friend",
      body: "One genuine intro to someone planning a party. No quotas, no spam — just a name and a number when it comes up.",
    },
  ];
  const get = [
    {
      label: "Up to 20% off your package",
      body: "The exact discount depends on the package, date and footage scope. We tell you the number before you commit — no haggling.",
    },
    {
      label: "Flagship treatment",
      body: "A senior planner, our best kit, an upgraded lighting rig at no extra cost. Your night becomes the calling card for the next 50 bookings.",
    },
    {
      label: "Your own cinematic edit",
      body: "A 60–90 second hero cut + 3 vertical clips for socials, delivered within 14 days. Yours to post, share, frame on the wall.",
    },
    {
      label: "Right of approval",
      body: "We won't publish anything until you've seen the final cut and said yes. Full stop.",
    },
  ];

  return (
    <section className="section swap-section" id="swap">
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="h-eyebrow pink">01 · THE DEAL</div>
            <h2>The honest <span className="txt-pink">swap.</span></h2>
          </div>
          <p>Most "discount" schemes ask for more than they admit. This is the whole exchange, on one page. Read both columns, then decide.</p>
        </div>

        <div className="swap-grid">
          <div className="swap-col swap-col-give">
            <div className="swap-col-head">
              <div className="swap-tag">You give</div>
              <h3>Four things, all reasonable.</h3>
            </div>
            <ol className="swap-list">
              {give.map((it, i) => (
                <li key={i}>
                  <span className="swap-num">{String(i+1).padStart(2,"0")}</span>
                  <div>
                    <h4>{it.label}</h4>
                    <p>{it.body}</p>
                  </div>
                </li>
              ))}
            </ol>
          </div>

          <div className="swap-divider" aria-hidden="true">
            <span>↔</span>
          </div>

          <div className="swap-col swap-col-get">
            <div className="swap-col-head">
              <div className="swap-tag gold">You get</div>
              <h3>A better night, for less.</h3>
            </div>
            <ol className="swap-list">
              {get.map((it, i) => (
                <li key={i}>
                  <span className="swap-num gold">{String(i+1).padStart(2,"0")}</span>
                  <div>
                    <h4>{it.label}</h4>
                    <p>{it.body}</p>
                  </div>
                </li>
              ))}
            </ol>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───── HOW FILMING NIGHT ACTUALLY GOES ─────
function FilmingNight() {
  const steps = [
    {
      time: "T-2 weeks",
      title: "Creative call",
      body: "30 minutes on the phone. We talk vibe, must-have shots, lighting cues, sensitivities — and meet anyone you want us to know about.",
    },
    {
      time: "T-1 day",
      title: "Site walkthrough",
      body: "Crew arrives with the build team. We mark our angles, agree where we can't go (bedrooms, anywhere your guests need privacy), test the lighting.",
    },
    {
      time: "9pm – Midnight",
      title: "Shoot window",
      body: "Two camera people. No lights of our own — we shoot the party as it looks. You won't notice us most of the time. We leave by 12.",
    },
    {
      time: "T+10 days",
      title: "Your review cut",
      body: "We send the 60–90s hero + three vertical clips. You watch, mark anything you want pulled, send it back.",
    },
    {
      time: "T+14 days",
      title: "Final delivery",
      body: "Approved cut goes live — yours to post, our promo channels too. You get the raw stems if you want them.",
    },
  ];

  return (
    <section className="section filming-section" id="filming">
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="h-eyebrow">02 · WHAT FILMING NIGHT LOOKS LIKE</div>
            <h2>Not a TV shoot.<br/><span className="txt-gold">A small crew, in the corner.</span></h2>
          </div>
          <p>The whole point is that the party is the party — not a production. Here's the timeline, end to end.</p>
        </div>

        <ol className="timeline">
          {steps.map((s, i) => (
            <li key={i} className="timeline-step">
              <div className="timeline-dot"><span>{i+1}</span></div>
              <div className="timeline-card">
                <div className="timeline-time">{s.time}</div>
                <h4>{s.title}</h4>
                <p>{s.body}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

// ───── ELIGIBILITY (the fine print, made readable) ─────
function Eligibility() {
  const cards = [
    {
      icon: "📦",
      title: "VIP Nightclub or Ultra VIP only",
      body: "Venue-only bookings don't qualify — the footage needs the full kit to look right. Upgrades are welcome if you're nearly there.",
    },
    {
      icon: "🗓",
      title: "Apr–Oct weekends",
      body: "Better light, longer nights, more atmosphere. We open 8–12 promoter slots per season — usually all booked by March.",
    },
    {
      icon: "👥",
      title: "25+ guests",
      body: "Below that, an inflatable nightclub on camera reads empty. Above 200 we cap at one shoot per day to do it justice.",
    },
    {
      icon: "🔒",
      title: "Your call on usage",
      body: "We propose the channels — site, Instagram, paid social, YouTube — and you pick which are in. Pull permission any time within 12 months, we take it down.",
    },
  ];
  return (
    <section className="section elig-section" id="eligibility">
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="h-eyebrow cyan">03 · WHO IT'S FOR</div>
            <h2>The fine print, <span className="txt-pink">in plain English.</span></h2>
          </div>
          <p>If any of this is a deal-breaker, that's fine — say so and we'll quote you on a regular booking instead.</p>
        </div>

        <div className="elig-grid">
          {cards.map((c, i) => (
            <div key={i} className="elig-card">
              <div className="elig-icon" aria-hidden="true">{c.icon}</div>
              <h4>{c.title}</h4>
              <p>{c.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───── FAQ (uses same .faq styling as homepage) ─────
function PromoterFAQ() {
  const items = [
    {
      q: "Can specific guests opt out of being filmed?",
      a: "Yes — give us names ahead of time and we'll keep them out of frame. On the night, anyone who'd rather not be filmed just lets the crew know.",
    },
    {
      q: "Do I get to approve the final cut?",
      a: "Always. We send the edit roughly 10 days after your party. You mark anything you want pulled — guest faces, specific moments, anything. We only publish once you've signed off.",
    },
    {
      q: "What happens if the weather's bad?",
      a: "Same as any party — we film inside the dome. Rain on the inflatable actually looks great on camera. Severe wind (40mph+) is the only thing that postpones the whole event.",
    },
    {
      q: "Is the discount on top of seasonal offers?",
      a: "It replaces them. We give you the better of the two, never both. We'll show you the maths so you can see the difference yourself.",
    },
    {
      q: "Can I change my mind after the party?",
      a: "If you don't want the footage published at all post-event, we'll honour it — but the discount becomes a 50% credit toward your next booking instead of cash back. We need to recoup the crew costs somehow.",
    },
    {
      q: "Do you film weddings?",
      a: "Not under the promoter pass — weddings are too personal. We refer you to a dedicated wedding videographer if you want one.",
    },
  ];
  const [open, setOpen] = usePP(-1);

  return (
    <section className="section faq-section" id="promoter-faq">
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="h-eyebrow">04 · BEFORE YOU ASK</div>
            <h2>The honest <span className="txt-pink">answers.</span></h2>
          </div>
          <p>Six things people ask before signing up. If we missed one, WhatsApp us — we reply faster than you'd expect.</p>
        </div>

        <div className="faq-list">
          {items.map((it, idx) => {
            const isOpen = open === idx;
            return (
              <div key={idx} className={"faq-item " + (isOpen ? "open" : "")}>
                <button className="faq-q" onClick={() => setOpen(isOpen ? -1 : idx)} aria-expanded={isOpen}>
                  <span>{it.q}</span>
                  <span className="faq-plus" aria-hidden="true">
                    <span/><span/>
                  </span>
                </button>
                <div className="faq-a-wrap">
                  <p className="faq-a">{it.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ───── FINAL CTA ─────
function PromoterCTA({ openWizard }) {
  const D = window.PP_DATA;
  return (
    <section className="section" id="apply" style={{paddingTop:0}}>
      <div className="container">
        <div className="cta-block">
          <div className="grain" />
          <div style={{position:"relative"}}>
            <div className="h-eyebrow pink">05 · APPLY FOR A SLOT</div>
            <h2>Pick your package.<br/>Tell us your date.<br/><span className="txt-gold">We'll come back with a number.</span></h2>
            <p>Eight to twelve promoter slots a season. We hold them for serious bookings only — confirm within 7 days of our quote or we open the date back up.</p>
            <div style={{display:"flex",gap:12,flexWrap:"wrap"}}>
              <a href="index.html#packages" className="btn btn-primary btn-lg">
                Browse packages <Icon.Arrow />
              </a>
              <button className="btn btn-ghost btn-lg" onClick={openWizard}>
                Start my enquiry
              </button>
            </div>
          </div>
          <div className="cta-side">
            <div className="h-eyebrow">PROMOTER LINE</div>
            <h4>Talk to the booker.</h4>
            <p>For pass enquiries, ask for <strong>Ruth</strong> — she runs the season's filming calendar.</p>
            <div className="row">
              <div className="ic"><Icon.Chat width={16} height={16} style={{color:"var(--green)"}}/></div>
              <div style={{flex:1}}>
                <div style={{fontWeight:700}}>{D.brand.whatsapp}</div>
                <div style={{fontSize:12,color:"var(--ink-3)"}}>WhatsApp · mention "promoter pass"</div>
              </div>
            </div>
            <div className="row">
              <div className="ic"><Icon.Phone width={16} height={16} style={{color:"var(--gold)"}}/></div>
              <div style={{flex:1}}>
                <div style={{fontWeight:700}}>{D.brand.phone}</div>
                <div style={{fontSize:12,color:"var(--ink-3)"}}>Mon–Sun · 9am–8pm</div>
              </div>
            </div>
            <div className="row">
              <div className="ic"><Icon.Mail width={16} height={16} style={{color:"var(--pink-glow)"}}/></div>
              <div style={{flex:1}}>
                <div style={{fontWeight:700,fontSize:13.5,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>promoter@popupparties.uk</div>
                <div style={{fontSize:12,color:"var(--ink-3)"}}>Full applications</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PromoterHero, TheSwap, FilmingNight, Eligibility, PromoterFAQ, PromoterCTA });