/* eslint-disable */
/* VIP / SMS capture popup — appears 4s after page load, dismissible, persists in localStorage */
function VipPopup() {
  const [open, setOpen] = React.useState(false);
  const [step, setStep] = React.useState("intro"); // intro | success
  const [phone, setPhone] = React.useState("");

  React.useEffect(() => {
    if (localStorage.getItem("drop_vip_dismissed")) return;
    const t = setTimeout(() => setOpen(true), 4000);
    return () => clearTimeout(t);
  }, []);

  const close = () => {
    localStorage.setItem("drop_vip_dismissed", "1");
    setOpen(false);
  };
  const submit = (e) => {
    e.preventDefault();
    setStep("success");
    if (window.dropIdentify) window.dropIdentify({ phone_number: phone, $consent: ["sms"] });
    if (window.dropTrack) window.dropTrack("sms_capture", { source: "vip_popup" });
    setTimeout(close, 2200);
  };

  if (!open) return null;
  return (
    <div className="vip-scrim" onClick={close}>
      <div className="vip" onClick={e => e.stopPropagation()}>
        <button className="vip-close" onClick={close} aria-label="Close">×</button>
        <div className="vip-img" style={{backgroundImage:"url('assets/hero-necklaces.jpg')"}}></div>
        <div className="vip-body">
          {step === "intro" && (
            <React.Fragment>
              <div className="eyebrow">VIP TEXT CLUB</div>
              <h2 className="vip-h">Get <em>20% off</em><br/>your first order</h2>
              <p className="vip-sub">Plus first dibs on every drop, secret sales, and free gifts. Text us — opt out anytime.</p>
              <form className="vip-form" onSubmit={submit}>
                <div className="vip-input">
                  <span className="vip-flag">🇺🇸 +1</span>
                  <input
                    type="tel"
                    placeholder="(555) 123-4567"
                    value={phone}
                    onChange={e => setPhone(e.target.value)}
                    required
                  />
                </div>
                <button className="btn-primary btn-block" type="submit">UNLOCK 20% OFF</button>
              </form>
              <button className="vip-skip" onClick={close}>No thanks, I'll pay full price</button>
              <p className="vip-fine">By submitting, you agree to receive recurring marketing texts. Msg & data rates may apply. Reply STOP to opt out.</p>
            </React.Fragment>
          )}
          {step === "success" && (
            <div className="vip-success">
              <div className="vip-check">✓</div>
              <h2 className="vip-h">You're in.</h2>
              <p className="vip-sub">Code <strong>VIP20</strong> just hit your phone. Auto-applied at checkout.</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
window.VipPopup = VipPopup;