// ====== Modals: Quote (multi-step) + Lightbox + Service detail + Mobile menu ======
const { useState: useS, useEffect: useE } = React;

function QuoteModal({ open, onClose, defaultService }) {
  const [step, setStep] = useS(0);
  const [data, setData] = useS({
    services: [],
    name: "", email: "", phone: "", zip: "",
    timeline: "1-3 months",
    notes: "",
  });
  const [errors, setErrors] = useS({});
  const [done, setDone] = useS(false);

  useE(() => {
    if (open) {
      setStep(0);
      setDone(false);
      setErrors({});
      if (defaultService) {
        setData(d => ({ ...d, services: [defaultService] }));
      }
    }
  }, [open, defaultService]);

  useE(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    if (open) document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  const toggleSvc = (id) => {
    setData(d => ({
      ...d,
      services: d.services.includes(id)
        ? d.services.filter(x => x !== id)
        : [...d.services, id]
    }));
  };

  const validateStep = () => {
    const e = {};
    if (step === 0 && data.services.length === 0) e.services = "Select at least one service.";
    if (step === 1) {
      if (!data.name.trim()) e.name = "Name is required.";
      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) e.email = "Valid email required.";
      if (!/^[\d\s\-()+]{7,}$/.test(data.phone)) e.phone = "Valid phone required.";
      if (!/^\d{5}$/.test(data.zip.trim())) e.zip = "5-digit ZIP code.";
    }
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const next = () => { if (validateStep()) setStep(s => s + 1); };
  const back = () => setStep(s => Math.max(0, s - 1));
  const submit = () => {
    if (!validateStep()) return;
    // Build a mailto so this prototype actually routes the request
    // to the business inbox.
    const svcNames = data.services
      .map(id => (SERVICES.find(s => s.id === id) || {}).name || id)
      .join(", ");
    const body = [
      `Name: ${data.name}`,
      `Email: ${data.email}`,
      `Phone: ${data.phone}`,
      `ZIP: ${data.zip}`,
      `Services: ${svcNames}`,
      `Timeline: ${data.timeline}`,
      "",
      `Project details:`,
      data.notes || "(none)",
    ].join("\n");
    const subject = `Quote request — ${data.name}`;
    window.location.href =
      `mailto:info@acehomesolutionstx.com?subject=${encodeURIComponent(subject)}` +
      `&body=${encodeURIComponent(body)}`;
    setDone(true);
  };

  if (!open) return null;

  return (
    <div className={`modal-back ${open ? "open" : ""}`} onClick={(e) => e.target === e.currentTarget && onClose()}>
      <div className="modal" role="dialog" aria-modal="true">
        {done ? (
          <div className="success">
            <div className="ok"><I.Check size={36}/></div>
            <h3>Quote request received!</h3>
            <p>Thanks {data.name.split(" ")[0] || "there"} — your request has been sent to <strong>info@acehomesolutionstx.com</strong>. We&apos;ll reach out within one business day to schedule your free estimate.</p>
            <button className="btn btn-primary" onClick={onClose}>Close</button>
          </div>
        ) : (
          <React.Fragment>
            <div className="modal-head">
              <div>
                <h3>Get a Free Quote</h3>
                <p>{step === 0 ? "What can we help with?" : step === 1 ? "Where should we send the estimate?" : "Anything else we should know?"}</p>
              </div>
              <button className="modal-close" onClick={onClose} aria-label="Close"><I.Close size={20}/></button>
            </div>
            <div className="steps">
              {[0,1,2].map(i => <div key={i} className={`step ${i <= step ? "done" : ""}`}/>)}
            </div>
            <div className="modal-body">
              {step === 0 && (
                <div>
                  <label>Select services (one or more)</label>
                  <div className="pill-grid">
                    {SERVICES.map(s => {
                      const Icon = I[s.icon];
                      const on = data.services.includes(s.id);
                      return (
                        <button
                          type="button"
                          className={`pill ${on ? "active" : ""}`}
                          key={s.id}
                          onClick={() => toggleSvc(s.id)}
                        >
                          <span className="ico"><Icon size={26}/></span>
                          {s.name}
                        </button>
                      );
                    })}
                  </div>
                  {errors.services && <div className="err">{errors.services}</div>}
                </div>
              )}
              {step === 1 && (
                <div>
                  <div className="row">
                    <label>Full name</label>
                    <input value={data.name} onChange={e => setData({...data, name: e.target.value})} placeholder="Jane Doe"/>
                    {errors.name && <div className="err">{errors.name}</div>}
                  </div>
                  <div className="row grid-2">
                    <div>
                      <label>Email</label>
                      <input value={data.email} onChange={e => setData({...data, email: e.target.value})} placeholder="jane@example.com"/>
                      {errors.email && <div className="err">{errors.email}</div>}
                    </div>
                    <div>
                      <label>Phone</label>
                      <input value={data.phone} onChange={e => setData({...data, phone: e.target.value})} placeholder="(555) 123-4567"/>
                      {errors.phone && <div className="err">{errors.phone}</div>}
                    </div>
                  </div>
                  <div className="row">
                    <label>ZIP code</label>
                    <input value={data.zip} onChange={e => setData({...data, zip: e.target.value})} placeholder="12345" maxLength="5"/>
                    {errors.zip && <div className="err">{errors.zip}</div>}
                  </div>
                </div>
              )}
              {step === 2 && (
                <div>
                  <div className="row">
                    <label>Timeline</label>
                    <select value={data.timeline} onChange={e => setData({...data, timeline: e.target.value})}>
                      <option>ASAP</option>
                      <option>1-3 months</option>
                      <option>3-6 months</option>
                      <option>Just exploring</option>
                    </select>
                  </div>
                  <div className="row">
                    <label>Project details (optional)</label>
                    <textarea
                      rows="4"
                      value={data.notes}
                      onChange={e => setData({...data, notes: e.target.value})}
                      placeholder="Tell us about your project, room size, materials you're considering..."
                    />
                  </div>
                </div>
              )}
            </div>
            <div className="modal-foot">
              {step > 0
                ? <button className="btn-text" onClick={back}>← Back</button>
                : <span/>
              }
              {step < 2
                ? <button className="btn btn-primary" onClick={next}>
                    Continue <span className="arr"><I.Arrow size={14}/></span>
                  </button>
                : <button className="btn btn-primary" onClick={submit}>
                    Submit Request <span className="arr"><I.Arrow size={14}/></span>
                  </button>
              }
            </div>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

// =============================================================
function Lightbox({ open, idx, items, onClose, onPrev, onNext }) {
  useE(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowRight") onNext();
      if (e.key === "ArrowLeft") onPrev();
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open, onClose, onNext, onPrev]);

  if (!open) return null;
  const item = items[idx];
  return (
    <div className={`lightbox ${open ? "open" : ""}`} onClick={(e) => e.target === e.currentTarget && onClose()}>
      <button className="lb-close" onClick={onClose} aria-label="Close"><I.Close/></button>
      <button className="lb-nav lb-prev" onClick={onPrev} aria-label="Previous"><I.Arrow size={20}/><span style={{display:"none"}}>prev</span></button>
      <div className="lb-img">
        {item.img ?
          <img src={item.img} alt={item.label} style={{width:"100%", height:"100%", objectFit:"cover"}}/> :
          <div className="ph" data-tone={item.tone}>
            <span className="ph-label">[ {item.label.toLowerCase()} — full resolution photo ]</span>
          </div>
        }
        <div className="lb-cap">{item.label}</div>
      </div>
      <button className="lb-nav lb-next" onClick={onNext} aria-label="Next"><I.Arrow size={20}/></button>
    </div>
  );
}

// =============================================================
function MobileMenu({ open, onClose, onQuote }) {
  return (
    <React.Fragment>
      <div className={`mobile-back ${open ? "open" : ""}`} onClick={onClose}/>
      <div className={`mobile-menu ${open ? "open" : ""}`}>
        <button className="modal-close" style={{position:"absolute", top: 18, right: 18}} onClick={onClose}><I.Close/></button>
        <a href="/" onClick={onClose}>Home</a>
        <a href="/services" onClick={onClose}>Services</a>
        <a href="/about" onClick={onClose}>About</a>
        <a href="/gallery" onClick={onClose}>Gallery</a>
        <a href="/service-areas" onClick={onClose}>Service Areas</a>
        <a href="/contact" onClick={onClose}>Contact</a>
        <button className="btn btn-primary" onClick={() => { onClose(); onQuote(); }}>
          Get a Free Quote <span className="arr"><I.Arrow size={14}/></span>
        </button>
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { QuoteModal, Lightbox, MobileMenu });