function EstimateModal({ open, onClose, ctaLabel }) {
  const [step, setStep] = React.useState(0);
  const [answers, setAnswers] = React.useState({});
  const [errors, setErrors] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);

  React.useEffect(() => {
    if (!open) {
      setTimeout(() => { setStep(0); setAnswers({}); setErrors({}); setSubmitted(false); }, 400);
    }
  }, [open]);

  React.useEffect(() => {
    if (!open) return;
    window.history.pushState({ modalStep: step }, '');
    const onPopState = (e) => {
      if (step > 0 && step < 4) {
        setStep(s => Math.max(0, s - 1));
        window.history.pushState({ modalStep: step - 1 }, '');
      } else if (step === 0) {
        onClose();
      }
    };
    window.addEventListener('popstate', onPopState);
    return () => window.removeEventListener('popstate', onPopState);
  }, [open, step]);

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape' && open) onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  if (!open) return null;

  const totalSteps = 5;
  const disqualified = answers.owner === "No";

  const select = (key, val) => {
    setAnswers(a => ({ ...a, [key]: val }));
    setErrors(e => ({ ...e, [key]: null }));
    if (key === "owner") {
      if (val === "No" && window.fbq) fbq('trackCustom', 'Disqualified');
    }
    if (key === "windows") {
      if (val === "1–3 Windows") { if (window.fbq) fbq('trackCustom', 'UnqualifiedLead'); }
      else { if (window.fbq) fbq('trackCustom', 'QualifiedLead'); }
    }
    if (["owner", "windows", "timeline"].includes(key)) {
      setTimeout(() => {
        if (key === "owner" && val === "No") return;
        setStep(s => s + 1);
      }, 180);
    }
  };

  const progress = disqualified ? 100 : Math.min(100, ((step) / (totalSteps - 1)) * 100);

  const validateContact = () => {
    const errs = {};
    if (!answers.name?.trim()) errs.name = "Please enter your name";
    if (!answers.email?.trim()) errs.email = "Please enter your email";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(answers.email)) errs.email = "Please enter a valid email";
    if (!answers.phone?.trim()) errs.phone = "Please enter your phone";
    else if (answers.phone.replace(/\D/g,'').length < 10) errs.phone = "Please enter a valid phone";
    setErrors(errs);
    return Object.keys(errs).length === 0;
  };

  const submit = () => {
    if (!validateContact()) return;
    if (window.fbq) fbq('track', 'Lead');

    const params = new URLSearchParams(window.location.search);
    const payload = {
      timestamp: new Date().toLocaleString('en-US', {timeZone: 'America/Los_Angeles'}),
      name: answers.name,
      email: answers.email,
      phone: answers.phone,
      windows: answers.windows || '',
      timeline: answers.timeline || '',
      utm_source: params.get('utm_source') || '',
      utm_medium: params.get('utm_medium') || '',
      utm_campaign: params.get('utm_campaign') || '',
      utm_adset: params.get('utm_adset') || '',
      utm_content: params.get('utm_content') || '',
      utm_term: params.get('utm_term') || '',
      page_url: window.location.href,
    };

    // ── Google Sheets via Apps Script ──────────────────────────────────
    const SHEET_WEBHOOK = "https://script.google.com/macros/s/AKfycbzqL3KL88YP8IrtHVBHpw6V8sOBOxGNXESBhRpQmME4qzSpL4Huq3JuvbHPd-1mLLJd/exec";
    if (SHEET_WEBHOOK !== "YOUR_APPS_SCRIPT_URL_HERE") {
      const qs = new URLSearchParams(payload).toString();
      fetch(SHEET_WEBHOOK + '?' + qs, { method: 'GET', mode: 'no-cors' }).catch(() => {});
    }
    console.log('Form submitted:', payload);

    setSubmitted(true);
    setStep(4);
  };

  // DISQUALIFIED screen
  if (disqualified && !submitted) {
    return (
      <div className="modal-backdrop" onClick={onClose}>
        <div className="modal" onClick={e => e.stopPropagation()}>
          <div className="modal-header">
            <div />
            <button className="modal-close" onClick={onClose}><Ic.close /></button>
          </div>
          <div className="modal-body">
            <div className="modal-disqualify">
              <div className="emoji" style={{fontSize:36, marginBottom:16}}>🙏</div>
              <h3 style={{marginBottom:14}}>Thanks for reaching out.</h3>
              <p style={{color:'var(--ink-2)', lineHeight:1.6, margin:'0 auto', maxWidth:360}}>
                Unfortunately we're only able to work with homeowners in the Northern California area right now. We appreciate your interest in Elevate Construction and wish you the best with your project.
              </p>
              <button className="btn btn-ghost" style={{marginTop:24}} onClick={onClose}>Close</button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-header">
          {step > 0 && step < 4 ? (
            <button className="modal-back" onClick={() => setStep(s => Math.max(0, s-1))} aria-label="Go back">
              <Ic.arrow style={{transform:'rotate(180deg)'}} /> Back
            </button>
          ) : <span className="modal-back modal-back--placeholder" aria-hidden="true" />}
          <div className="modal-progress">
            <div className="modal-progress-bar" style={{width: progress + "%"}} />
          </div>
          <div className="modal-step-count">Step {Math.min(step+1, 4)} of 4</div>
          <button className="modal-close" onClick={onClose}><Ic.close /></button>
        </div>

        <div className="modal-body">
          {step === 0 && (
            <Step
              eyebrow="Quick question"
              title="Are you a homeowner in Northern California?"
              sub="We only work with homeowners in Northern California. This helps us confirm a quick fit."
              options={["Yes", "No"]}
              value={answers.owner}
              onSelect={v => select("owner", v)}
            />
          )}
          {step === 1 && (
            <Step
              eyebrow="Your project"
              title="How many windows are you looking to replace?"
              sub="A rough number is fine — we'll get exact measurements during the estimate."
              options={[
                "1–3 Windows",
                "4–7 Windows",
                "8+ Windows",
                "Not sure yet",
              ]}
              value={answers.windows}
              onSelect={v => select("windows", v)}
            />
          )}
          {step === 2 && (
            <Step
              eyebrow="Your timeline"
              title="When are you hoping to start your project?"
              sub="A rough target is fine — we can refine this in the consultation."
              options={[
                "ASAP",
                "Within 1 Month",
                "2–3 Months",
                "Not Sure Yet",
              ]}
              value={answers.timeline}
              onSelect={v => select("timeline", v)}
            />
          )}
          {step === 3 && (
            <>
              <span className="eyebrow" style={{marginBottom:12}}>Almost done</span>
              <h3>Where should we send your estimate?</h3>
              <p className="sub modal-promise">
                We promise not to spam you or sell your information <Ic.lock />
              </p>
              <div className="step-fields">
                <Field label="Full name" name="name" value={answers.name || ""} error={errors.name} onChange={v => setAnswers(a => ({...a, name: v}))} placeholder="Jane Doe" />
                <Field label="Email address" name="email" type="email" value={answers.email || ""} error={errors.email} onChange={v => setAnswers(a => ({...a, email: v}))} placeholder="jane@example.com" />
                <Field label="Phone number" name="phone" type="tel" value={answers.phone || ""} error={errors.phone} onChange={v => {
                  const digits = v.replace(/\D/g, '').slice(0, 10);
                  let formatted = digits;
                  if (digits.length >= 7) formatted = `(${digits.slice(0,3)}) ${digits.slice(3,6)}-${digits.slice(6)}`;
                  else if (digits.length >= 4) formatted = `(${digits.slice(0,3)}) ${digits.slice(3)}`;
                  else if (digits.length > 0) formatted = `(${digits}`;
                  setAnswers(a => ({...a, phone: formatted}));
                }} placeholder="(916) 555-0100" />
              </div>
            </>
          )}
          {step === 4 && submitted && (
            <div className="modal-success">
              <div className="check-big"><Ic.check size={32} /></div>
              <h3 style={{marginBottom:10}}>You're all set!</h3>
              <p style={{color:'var(--ink-2)', lineHeight:1.6, margin:'0 auto 24px', maxWidth:380}}>
                Thanks, {answers.name?.split(' ')[0] || "friend"}! A member of our team will reach out within 24 hours to schedule your free in-home estimate and confirm your bonus upgrade offer.
              </p>
              <div style={{background:'var(--green-tint)', borderRadius:12, padding:'16px 18px', textAlign:'left', maxWidth:400, margin:'0 auto 24px', display:'flex', gap:12}}>
                <div style={{color:'var(--green)', flexShrink:0}}><Ic.gift size={22} /></div>
                <div>
                  <div style={{fontWeight:600, fontSize:14, color:'var(--ink)'}}>Your offer is reserved</div>
                  <div style={{fontSize:13, color:'var(--ink-2)', marginTop:2}}>$100 off every window + free Sun Matrix glass + free heavy-duty screens.</div>
                </div>
              </div>
            </div>
          )}
        </div>

        {step === 3 && (
          <div className="modal-footer">
            <button className="btn btn-primary btn-lg" onClick={submit}>
              {ctaLabel || "Get My Free Estimate & Offer Now"} <Ic.arrow />
            </button>
            <div className="modal-disclaimer">
              By submitting this form, you agree to be contacted by Elevate Construction Group via call, text, and email. Message &amp; data rates may apply. Reply STOP to opt out.
            </div>
          </div>
        )}
        {step === 4 && (
          <div className="modal-footer modal-footer--divider">
            <button className="btn btn-dark btn-lg" onClick={onClose}>Close</button>
          </div>
        )}
      </div>
    </div>
  );
}

function Step({ eyebrow, title, sub, options, value, onSelect }) {
  return (
    <>
      <span className="eyebrow" style={{marginBottom:12}}>{eyebrow}</span>
      <h3>{title}</h3>
      <p className="sub">{sub}</p>
      <div className="step-options">
        {options.map(opt => (
          <button
            key={opt}
            className={"step-option " + (value === opt ? "is-selected" : "")}
            onClick={() => onSelect(opt)}
          >
            <span className="radio" />
            <span>{opt}</span>
          </button>
        ))}
      </div>
    </>
  );
}

function Field({ label, name, type="text", value, onChange, error, placeholder }) {
  return (
    <div className={"field " + (error ? "has-error" : "")}>
      <label htmlFor={name}>{label}</label>
      <input id={name} type={type} value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder} autoComplete={type === "email" ? "email" : type === "tel" ? "tel" : "name"} />
      {error && <div className="err">{error}</div>}
    </div>
  );
}

window.EstimateModal = EstimateModal;