// ─── Qualifying wizard: filter budget BEFORE contact step ─────
const { useState: useWS, useMemo: useWM } = React;

function Wizard({ open, onClose }) {
  const D = window.PP_DATA;
  const [step, setStep] = useWS(0);
  const [data, setData] = useWS({
    occasion: "",
    date: "",
    guests: 60,
    postcode: "",
    pkg: "",
    addons: [],
    confirmBudget: false,
    name: "", email: "", phone: "", notes: "",
  });
  const set = (k, v) => setData(d => ({ ...d, [k]: v }));
  const TOTAL = 5;

  // Reset to step 0 each time it opens
  React.useEffect(() => { if (open) setStep(0); }, [open]);

  // Recommendations + estimate based on guest count + package
  const estimate = useWM(() => {
    const g = data.guests;
    // Pick venue by capacity
    const venue =
      g <= 15 ? { name:"Rave in a Cave or Bubble Tent", price: 595 } :
      g <= 40 ? { name:"6m Inflatable Dome", price: 494 } :
      g <= 80 ? { name:"8m Inflatable Dome", price: 595 } :
      g <= 110 ? { name:"10m Inflatable Dome", price: 795 } :
      g <= 200 ? { name:"12m Inflatable Dome", price: 1190 } :
                 { name:"15m Inflatable Dome", price: 1490 };
    // Package multiplier
    const pkgMult = data.pkg === "ultra" ? 2.0 : data.pkg === "nightclub" ? 1.55 : 1.0;
    // Addons
    const addonAdd = data.addons.length * 200;
    const low = Math.round((venue.price * pkgMult + addonAdd) / 50) * 50;
    const high = Math.round((low * 1.35) / 50) * 50;
    return { venue, low, high };
  }, [data.guests, data.pkg, data.addons]);

  if (!open) return null;

  return (
    <div className={"modal-shroud open"} onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <div>
            <div className="label">Plan my night</div>
            <div style={{fontFamily:"var(--font-display)",fontWeight:700,fontSize:18,letterSpacing:"-0.01em",marginTop:2}}>
              Let's check the fit, then quote you back.
            </div>
          </div>
          <div style={{display:"flex",alignItems:"center",gap:14}}>
            <span className="step-count">{String(step+1).padStart(2,"0")} / 0{TOTAL}</span>
            <button onClick={onClose} aria-label="Close" style={{width:36,height:36,borderRadius:"50%",background:"var(--surface-2)",border:"1px solid var(--line)",display:"flex",alignItems:"center",justifyContent:"center"}}>
              <Icon.X width={18} height={18}/>
            </button>
          </div>
        </div>
        <div className="modal-steps">
          {[0,1,2,3,4].map(i => <span key={i} className={i < step ? "done" : i === step ? "on" : ""} />)}
        </div>
        <div className="modal-body">
          {step === 0 && <StepOccasion data={data} set={set} />}
          {step === 1 && <StepDetails data={data} set={set} />}
          {step === 2 && <StepPackage data={data} set={set} estimate={estimate} onClose={onClose} />}
          {step === 3 && <StepBudgetCheck data={data} set={set} estimate={estimate} />}
          {step === 4 && <StepContact data={data} set={set} estimate={estimate} />}
        </div>
        <div className="modal-foot">
          <button className="btn btn-ghost btn-sm"
                  onClick={() => step === 0 ? onClose() : setStep(s => s - 1)}>
            <Icon.Back/> {step === 0 ? "Close" : "Back"}
          </button>
          <div style={{display:"flex",alignItems:"center",gap:12}}>
            <button className="btn btn-primary btn-sm"
                    disabled={
                      (step === 0 && !data.occasion) ||
                      (step === 1 && (!data.date || !data.postcode)) ||
                      (step === 2 && !data.pkg)
                    }
                    style={{
                      opacity:
                        ((step === 0 && !data.occasion) ||
                         (step === 1 && (!data.date || !data.postcode)) ||
                         (step === 2 && !data.pkg)) ? 0.4 : 1,
                    }}
                    onClick={() => {
                      if (step < TOTAL - 1) setStep(s => s + 1);
                      else setStep(TOTAL); // success
                    }}>
              {step < TOTAL - 1 ? "Continue" : "Send enquiry"} <Icon.Arrow/>
            </button>
          </div>
        </div>
        {step >= TOTAL && <SuccessOverlay onClose={onClose} estimate={estimate} />}
      </div>
    </div>
  );
}

// ── Step 0 — Occasion (event type)
function StepOccasion({ data, set }) {
  const opts = [
    { id:"birthday",  icon:"🎂", label:"Birthday / milestone", sub:"30th, 40th, 50th — most popular" },
    { id:"garden",    icon:"🌿", label:"Garden / private",      sub:"Intimate, summer, family parties" },
    { id:"corporate", icon:"🏢", label:"Corporate / brand",     sub:"Activations, summer parties, launches" },
    { id:"wedding",   icon:"💍", label:"Wedding",               sub:"Reception or after-party" },
    { id:"festival",  icon:"🎪", label:"Festival / event",      sub:"Multi-day setups, larger budgets" },
    { id:"other",     icon:"🎉", label:"Something else",        sub:"Just because" },
  ];
  return (
    <>
      <h2>What's the <span className="txt-pink">occasion?</span></h2>
      <p className="lede">We'll tailor recommendations to suit. One pick.</p>
      <div className="tile-grid">
        {opts.map(o => (
          <button key={o.id} className={"tile " + (data.occasion === o.id ? "on" : "")} onClick={() => set("occasion", o.id)}>
            <div className="tile-icon">{o.icon}</div>
            <div className="tile-text">
              <div className="name">{o.label}</div>
              <div className="sub">{o.sub}</div>
            </div>
            <div className="tile-check">{data.occasion === o.id && <Icon.Check width={12} height={12}/>}</div>
          </button>
        ))}
      </div>
    </>
  );
}

// ── Step 1 — Date, guests, postcode
function StepDetails({ data, set }) {
  return (
    <>
      <h2>When & how <span className="txt-pink">big</span>?</h2>
      <p className="lede">Helps us check availability and recommend the right venue.</p>
      <div style={{display:"grid",gap:18}}>
        <div className="field-row">
          <div className="field">
            <label>Event date</label>
            <input type="date" value={data.date} onChange={e => set("date", e.target.value)} />
          </div>
          <div className="field">
            <label>Postcode (so we can confirm delivery)</label>
            <input placeholder="e.g. CM15 8BA" value={data.postcode} onChange={e => set("postcode", e.target.value)} />
          </div>
        </div>

        <div>
          <div style={{display:"flex",justifyContent:"space-between",alignItems:"baseline",marginBottom:10}}>
            <label style={{fontSize:12,fontWeight:600,color:"var(--ink-2)",letterSpacing:"0.02em"}}>Guest count</label>
            <span style={{fontFamily:"var(--font-display)",fontWeight:800,fontSize:28,color:"var(--pink-glow)",letterSpacing:"-0.025em"}}>{data.guests}</span>
          </div>
          <input type="range" min="10" max="230" step="5" value={data.guests} onChange={e => set("guests", +e.target.value)} />
          <div style={{display:"flex",justifyContent:"space-between",fontSize:11,color:"var(--ink-3)",marginTop:8}}>
            <span>10</span><span>50</span><span>100</span><span>150</span><span>200</span><span>230</span>
          </div>
        </div>

        {data.postcode.length >= 4 && (
          <div style={{padding:14,borderRadius:"var(--r-md)",background:"rgba(34,197,94,0.10)",border:"1px solid rgba(34,197,94,0.35)",display:"flex",gap:12,alignItems:"flex-start",fontSize:13.5}}>
            <Icon.Check style={{color:"var(--green)",flexShrink:0,marginTop:2}}/>
            <div>
              <div style={{fontWeight:700,color:"var(--green)"}}>You're in our free delivery zone.</div>
              <div style={{color:"var(--ink-2)",marginTop:2}}>Approx 18 miles from our Roydon warehouse — no delivery charge.</div>
            </div>
          </div>
        )}
      </div>
    </>
  );
}

// ── Step 2 — Package choice
function StepPackage({ data, set, estimate, onClose }) {
  const D = window.PP_DATA;
  const minSpend = { raw: 494, essentials: 595, nightclub: 1190, ultra: 1990 };
  const pkgIdx = { raw: "01", essentials: "01", nightclub: "02", ultra: "03" };
  // Tier packages only — venue-only lives in the off-menu strip on the home page
  const tierPkgs = D.packages.filter(p => p.kind !== "offmenu");
  const openBespoke = () => {
    window.dispatchEvent(new CustomEvent("openPlanner", {
      detail: {
        source: "wizard-bespoke",
        postcode: data.postcode,
        date: data.date,
        guests: data.guests,
        note: `Bespoke enquiry from the wizard — ${data.occasion || "occasion TBD"}. Wanted something outside the standard tiers.`,
      },
    }));
    onClose && onClose();
  };
  return (
    <>
      <h2>Which <span className="txt-pink">setup</span>?</h2>
      <p className="lede">Based on {data.guests} guests, we'd suggest the <strong style={{color:"var(--ink-0)"}}>{estimate.venue.name}</strong>. Pick how dressed-up you want it.</p>
      <div style={{display:"grid",gap:12}}>
        {tierPkgs.map(p => (
          <button key={p.id} className={"tile " + (data.pkg === p.id ? "on" : "")}
                  onClick={() => set("pkg", p.id)} style={{padding:18,alignItems:"flex-start"}}>
            <div className="tile-icon" style={{
              background: p.featured ? "var(--grad-pink)" : "var(--surface-2)",
              color: p.featured ? "#fff" : "var(--ink-1)",
              border: p.featured ? "0" : undefined,
              fontFamily:"var(--font-display)",fontWeight:800,fontSize:18,
            }}>{pkgIdx[p.id] || "·"}</div>
            <div className="tile-text" style={{flex:1}}>
              <div style={{display:"flex",alignItems:"baseline",gap:10,flexWrap:"wrap"}}>
                <div className="name" style={{fontSize:17}}>{p.name}</div>
                {p.featured && <span className="pill pill-pink" style={{height:22,fontSize:10.5}}>★ Most booked</span>}
              </div>
              <div className="sub" style={{fontSize:13}}>{p.tagline}</div>
              <div style={{display:"flex",gap:12,marginTop:8,flexWrap:"wrap"}}>
                <span style={{fontSize:12,color:"var(--ink-3)"}}>From <strong style={{color:"var(--ink-1)"}}>£{p.from}</strong></span>
                <span style={{fontSize:12,color:"var(--ink-3)"}}>Min spend <strong style={{color:"var(--gold)"}}>£{minSpend[p.id]}</strong></span>
              </div>
            </div>
            <div className="tile-check" style={{marginTop:4}}>{data.pkg === p.id && <Icon.Check width={12} height={12}/>}</div>
          </button>
        ))}
      </div>

      {/* "OR" divider */}
      <div style={{display:"flex",alignItems:"center",gap:12,margin:"28px 0 20px"}}>
        <div style={{flex:1,height:1,background:"var(--line)"}}></div>
        <span style={{fontFamily:"var(--font-mono)",fontSize:11,letterSpacing:"0.18em",color:"var(--ink-3)"}}>OR GO OFF-MENU</span>
        <div style={{flex:1,height:1,background:"var(--line)"}}></div>
      </div>

      {/* Bespoke escape hatch — promoted tile, gold-accented to read as off-menu */}
      <button
        onClick={openBespoke}
        className="tile"
        style={{
          padding:18, alignItems:"flex-start", width:"100%",
          textAlign:"left", cursor:"pointer",
          border:"1px solid rgba(212,175,55,0.45)",
          background:"linear-gradient(180deg, rgba(212,175,55,0.08), rgba(212,175,55,0.02))",
          boxShadow:"0 1px 0 rgba(212,175,55,0.12) inset",
        }}
      >
        <div className="tile-icon" style={{
          background:"linear-gradient(135deg, var(--gold), #b8902c)",
          color:"#1a1208", border:"0",
          fontFamily:"var(--font-display)", fontWeight:800, fontSize:18,
        }}>★</div>
        <div className="tile-text" style={{flex:1}}>
          <div style={{display:"flex",alignItems:"baseline",gap:10,flexWrap:"wrap"}}>
            <div className="name" style={{fontSize:17}}>Build something bespoke</div>
            <span className="pill" style={{
              height:22, fontSize:10.5,
              background:"rgba(212,175,55,0.14)",
              color:"var(--gold)",
              border:"1px solid rgba(212,175,55,0.35)",
            }}>OFF-MENU</span>
          </div>
          <div className="sub" style={{fontSize:13}}>None of these quite fit? A planner will shape the night around your brief — venue, vibe, extras, all yours to specify.</div>
          <div style={{display:"flex",gap:12,marginTop:8,flexWrap:"wrap",alignItems:"center"}}>
            <span style={{fontSize:12,color:"var(--gold)",fontFamily:"var(--font-mono)",letterSpacing:"0.04em"}}>TAILORED QUOTE · WITHIN THE HOUR</span>
          </div>
        </div>
        <div className="tile-check" style={{marginTop:4, color:"var(--gold)"}}>
          <Icon.Arrow width={14} height={14}/>
        </div>
      </button>
    </>
  );
}

// ── Step 3 — Estimated spend (soft, with levers + planner door)
function StepBudgetCheck({ data, set, estimate }) {
  const [showLevers, setShowLevers] = useWS(false);
  const pkgLabel = data.pkg === "raw" ? "Venue Only"
                : data.pkg === "essentials" ? "Essential Vibes"
                : data.pkg === "nightclub" ? "VIP Nightclub"
                : "Ultra VIP";
  const openPlanner = () => {
    window.dispatchEvent(new CustomEvent("openPlanner", {
      detail: {
        source: "wizard-budget",
        postcode: data.postcode,
        date: data.date,
        guests: data.guests,
        note: `Wizard estimate: £${estimate.low.toLocaleString()}–£${estimate.high.toLocaleString()} for ${pkgLabel}.`,
      },
    }));
  };
  return (
    <>
      <h2>Your <span className="txt-gold">estimated spend.</span></h2>
      <p className="lede">An honest band before contact details. The number's a ballpark — it moves with the dials below.</p>

      <div className="estimate">
        <div className="row">
          <div>
            <div className="label">Estimated budget · all-in</div>
            <div className="num">£{estimate.low.toLocaleString()}<span style={{margin:"0 8px",color:"var(--ink-3)"}}>–</span>£{estimate.high.toLocaleString()}<span className="sub">incl. setup, hire & collection</span></div>
          </div>
        </div>
        <div className="note">
          Based on <strong style={{color:"var(--ink-1)"}}>{estimate.venue.name}</strong> · {data.guests} guests · {pkgLabel}{data.addons.length ? ` · ${data.addons.length} extras` : ""}.
        </div>
      </div>

      {/* Levers — collapsible, shows the number is a dial, not a wall */}
      <div style={{marginTop:18, borderRadius:"var(--r-md)", background:"var(--surface)", border:"1px solid var(--line)", overflow:"hidden"}}>
        <button onClick={() => setShowLevers(s => !s)}
                style={{width:"100%",display:"flex",alignItems:"center",justifyContent:"space-between",padding:"14px 18px",background:"transparent",border:"0",cursor:"pointer",color:"var(--ink-0)",fontSize:14,fontWeight:600,textAlign:"left"}}>
          <span style={{display:"inline-flex",alignItems:"center",gap:10}}>
            <span style={{color:"var(--gold)"}}>↕</span>
            What changes this number?
          </span>
          <span style={{color:"var(--ink-3)",fontFamily:"var(--font-mono)",fontSize:12,transform: showLevers ? "rotate(180deg)" : "none",transition:"transform 200ms"}}>▾</span>
        </button>
        {showLevers && (
          <div style={{padding:"4px 18px 18px",display:"grid",gap:10,fontSize:13.5,color:"var(--ink-1)"}}>
            <div style={{display:"flex",justifyContent:"space-between",gap:10,padding:"10px 0",borderTop:"1px solid var(--line)"}}>
              <span>Mid-week date (Mon–Thurs)</span>
              <strong style={{color:"var(--green)"}}>−£150</strong>
            </div>
            <div style={{display:"flex",justifyContent:"space-between",gap:10,padding:"10px 0",borderTop:"1px solid var(--line)"}}>
              <span>Step down a venue size</span>
              <strong style={{color:"var(--green)"}}>−£200 typical</strong>
            </div>
            <div style={{display:"flex",justifyContent:"space-between",gap:10,padding:"10px 0",borderTop:"1px solid var(--line)"}}>
              <span>Drop the Ultra extras (chef, dancefloor, etc.)</span>
              <strong style={{color:"var(--green)"}}>−£300 to −£600</strong>
            </div>
            <div style={{display:"flex",justifyContent:"space-between",gap:10,padding:"10px 0",borderTop:"1px solid var(--line)"}}>
              <span>Promoter Pass (we film your night)</span>
              <strong style={{color:"var(--green)"}}>up to −20%</strong>
            </div>
            <div style={{display:"flex",justifyContent:"space-between",gap:10,padding:"10px 0",borderTop:"1px solid var(--line)"}}>
              <span>DIY drinks, decor, catering</span>
              <strong style={{color:"var(--green)"}}>your call</strong>
            </div>
          </div>
        )}
      </div>

      {/* Soft confirm — optional flag, doesn't gate continue */}
      <div style={{marginTop:18, padding:16, borderRadius:"var(--r-md)", background:"var(--surface)", border:"1px solid var(--line)"}}>
        <div style={{display:"flex",gap:14,alignItems:"flex-start"}}>
          <button
            onClick={() => set("confirmBudget", !data.confirmBudget)}
            aria-pressed={data.confirmBudget}
            style={{
              width:22,height:22,borderRadius:6,flexShrink:0,marginTop:1,
              border:"1.5px solid " + (data.confirmBudget ? "var(--pink)" : "var(--line-strong)"),
              background: data.confirmBudget ? "var(--pink)" : "transparent",
              display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",
            }}>
            {data.confirmBudget && <Icon.Check width={12} height={12} style={{color:"#fff"}}/>}
          </button>
          <div style={{flex:1}}>
            <div style={{fontWeight:700,fontSize:14.5}}>This budget works for me. Continue to contact.</div>
            <div style={{fontSize:12.5,color:"var(--ink-2)",marginTop:3,lineHeight:1.5}}>
              Optional tick — just helps our team flag your enquiry as ready-to-quote. 25% deposit secures your date.
            </div>
          </div>
        </div>
      </div>

      {/* Planner door — the soft exit for warm-but-uncertain buyers */}
      <div style={{marginTop:14, padding:"16px 18px", borderRadius:"var(--r-md)",
                   background:"radial-gradient(80% 100% at 0% 0%, rgba(255,209,92,0.08) 0%, transparent 60%), var(--surface)",
                   border:"1px solid rgba(255,209,92,0.35)",
                   display:"flex",gap:14,alignItems:"center",flexWrap:"wrap"}}>
        <div style={{flex:"1 1 280px",fontSize:13.5,color:"var(--ink-1)",lineHeight:1.55}}>
          <strong style={{color:"var(--gold)"}}>Got a budget in mind?</strong> We'll build a night that fits it. Tell a planner the brief and we'll come back with options.
        </div>
        <button className="btn btn-ghost btn-sm" onClick={openPlanner} style={{flexShrink:0}}>
          Talk to a planner <Icon.Arrow width={14} height={14}/>
        </button>
      </div>
    </>
  );
}

// ── Step 4 — Contact
function StepContact({ data, set, estimate }) {
  return (
    <>
      <h2>Where do we <span className="txt-pink">send the quote?</span></h2>
      <p className="lede">We'll reply within the hour with your tailored quote and a confirmed price.</p>

      <div style={{display:"grid",gap:14}}>
        <div className="field-row">
          <div className="field">
            <label>Your name</label>
            <input placeholder="Jamie Smith" value={data.name} onChange={e => set("name", e.target.value)}/>
          </div>
          <div className="field">
            <label>Phone</label>
            <input type="tel" placeholder="07700 900000" value={data.phone} onChange={e => set("phone", e.target.value)}/>
          </div>
        </div>
        <div className="field">
          <label>Email</label>
          <input type="email" placeholder="jamie@example.com" value={data.email} onChange={e => set("email", e.target.value)}/>
        </div>
        <div className="field">
          <label>Anything else? <span style={{color:"var(--ink-3)",fontWeight:400}}>(optional)</span></label>
          <textarea rows="3" placeholder="Tell us about your vibe, theme, or anything we should know."
                    value={data.notes} onChange={e => set("notes", e.target.value)} />
        </div>
      </div>

      <div style={{marginTop:20, padding:16, borderRadius:"var(--r-md)", background:"var(--surface)", border:"1px solid var(--line)", display:"flex",gap:12,alignItems:"flex-start",fontSize:13,color:"var(--ink-2)"}}>
        <span style={{fontSize:18}}>🔒</span>
        <span>By submitting, you agree we'll contact you about this enquiry. No spam, no list-rental. <strong style={{color:"var(--ink-1)"}}>4.8★</strong> on Google · 312 verified reviews.</span>
      </div>
    </>
  );
}

// ── Success overlay
function SuccessOverlay({ onClose, estimate }) {
  const ref = "PUP-" + Math.floor(Math.random()*9000+1000) + "-26";
  return (
    <div style={{position:"absolute",inset:0,background:"linear-gradient(180deg, #1A0A36 0%, #08030F 100%)",zIndex:5,padding:"40px",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center"}}>
      <div style={{width:88,height:88,borderRadius:"50%",background:"var(--grad-pink)",boxShadow:"0 20px 60px rgba(255,46,138,0.5)",display:"inline-flex",alignItems:"center",justifyContent:"center",marginBottom:24}}>
        <Icon.Check width={42} height={42} style={{color:"#fff"}}/>
      </div>
      <div className="h-display" style={{fontSize:44,margin:"0 0 12px",letterSpacing:"-0.025em"}}>
        You're <span className="txt-gold">on the list.</span>
      </div>
      <p style={{color:"var(--ink-2)",fontSize:15.5,lineHeight:1.55,maxWidth:440,margin:"0 0 24px"}}>
        Your tailored quote (around <strong style={{color:"var(--ink-0)"}}>£{estimate.low.toLocaleString()}–£{estimate.high.toLocaleString()}</strong>) is on its way to your inbox in under an hour.
      </p>
      <button className="btn btn-ghost" onClick={onClose}>Back to site</button>
      <div style={{marginTop:18,fontSize:12,color:"var(--ink-3)"}}>Reference: <span className="t-mono" style={{color:"var(--ink-1)"}}>{ref}</span></div>
    </div>
  );
}

Object.assign(window, { Wizard });