/* global React, BrandStrip, SectionHead, PageHero, WaveDivider, Modal,
   IconArrow, IconCheck, IconCalendar, IconPhone, IconMail, IconMapPin,
   FAQ, TYPE_META */

const { useState: useStateContact } = React;

// =====================================================
// CONTACT PAGE
// =====================================================
function ContactPage({ openTour, openApply, navTo }) {
  const [openFaq, setOpenFaq] = useStateContact(null);

  return (
    <div>
      <PageHero
        eyebrow="Contact & Leasing"
        title="Get in touch."
        lede="Our leasing team is here to answer questions, collect waitlist interest, and help you find the right residence at Boardwalk House."
        photoUrl="images/aerial-1.jpeg"
      />

      {/* Top action cards */}
      <section className="section bg-cream">
        <div className="shell">
          <div className="card-grid cols-3">
            {[
              { ico: IconCalendar, eyebrow: "Waitlist", title: "Join the Waitlist", body: "We are not scheduling showings yet while construction finishes. Share your contact info for leasing-team follow-up.", cta: "Join Waitlist", action: openTour },
              { ico: IconCheck,    eyebrow: "Waitlist", title: "Reserve Interest", body: "Join the waitlist and ask about fully refundable $500 deposits for specific units.", cta: "Submit Interest", action: openApply },
              { ico: IconPhone,    eyebrow: "Talk", title: "Call",     body: "Calls route to the Boardwalk House leasing line for immediate intake.", cta: "(609) 710-7977", action: () => { window.trackBoardwalkEvent?.("call_click", { link_url: "tel:6097107977", link_text: "Contact card" }); window.location.href = "tel:6097107977"; } },
            ].map((c) => (
              <article key={c.title} style={{ background: "#fff", border: "1px solid rgba(13,27,42,0.08)", padding: 36 }}>
                <c.ico size={36} style={{ color: "var(--bronze)" }} />
                <span className="eyebrow" style={{ display: "block", marginTop: 18 }}>{c.eyebrow}</span>
                <h3 style={{ marginTop: 6, fontSize: 24 }}>{c.title}</h3>
                <p style={{ fontSize: 13.5, color: "var(--muted)", marginTop: 10, lineHeight: 1.6 }}>{c.body}</p>
                <button className="btn btn-outline" style={{ marginTop: 24 }} onClick={c.action}>
                  {c.cta} <IconArrow size={14} />
                </button>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Programs */}
      <section className="section bg-linen">
        <div className="shell">
          <SectionHead
            eyebrow="Resident Programs"
            title="More ways to call this home."
            lede="Special programs for brokers, employer partners, and our pre-launch waitlist members."
          />
          <div className="card-grid cols-3">
            {[
              {
                title: "Broker Referral Program",
                lede: "Licensed brokers can register prospects for leasing-team follow-up now; referral details are confirmed before lease signing.",
                bullets: ["Prospect registration", "Monthly co-op events", "Direct line to leasing team"],
                cta: "Get Program Details"
              },
              {
                title: "Preferred Employer Program",
                lede: "Employees of participating employers receive dedicated leasing support, waitlist tracking, and limited move-in perks.",
                bullets: ["Priority leasing follow-up", "Dedicated employer contact", "Reservation-interest support"],
                cta: "View Program",
                action: () => navTo ? navTo("employer") : openTour()
              },
              {
                title: "Launch Offers",
                lede: "Waitlist members can ask about fully refundable $500 deposits for specific units and receive leasing-team follow-up as construction progresses.",
                bullets: ["Apartment preferences recorded", "Leasing-team follow-up", "Refundable deposit details"],
                cta: "Join Waitlist",
                highlight: true,
              },
            ].map((p) => (
              <article key={p.title} style={{
                background: p.highlight ? "var(--navy)" : "#fff",
                color: p.highlight ? "var(--linen-2)" : "var(--ink)",
                border: "1px solid " + (p.highlight ? "var(--navy)" : "rgba(13,27,42,0.08)"),
                padding: 32, position: "relative"
              }}>
                {p.highlight && (
                  <div style={{ position: "absolute", top: 0, right: 0, background: "var(--bronze)", color: "#fff", fontSize: 9.5, letterSpacing: "0.22em", textTransform: "uppercase", padding: "6px 12px", fontWeight: 600 }}>
                    Limited
                  </div>
                )}
                <h3 style={{ fontSize: 24, color: p.highlight ? "var(--linen-2)" : "var(--navy)" }}>{p.title}</h3>
                <WaveDivider onDark={p.highlight} />
                <p style={{ fontSize: 14, color: p.highlight ? "rgba(245,242,237,0.78)" : "var(--muted)", lineHeight: 1.6, marginTop: 14 }}>
                  {p.lede}
                </p>
                <ul style={{ listStyle: "none", padding: 0, margin: "20px 0", display: "grid", gap: 10 }}>
                  {p.bullets.map((b) => (
                    <li key={b} style={{ display: "flex", gap: 10, alignItems: "center", fontSize: 13, color: p.highlight ? "rgba(245,242,237,0.85)" : "var(--ink)" }}>
                      <IconCheck size={14} style={{ color: p.highlight ? "var(--bronze-soft)" : "var(--bronze)" }} /> {b}
                    </li>
                  ))}
                </ul>
                <button className={p.highlight ? "btn btn-primary btn-sm" : "btn btn-outline btn-sm"}
                        style={{ marginTop: 12 }}
                        onClick={p.action || openTour}>
                  {p.cta}
                </button>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* General contact + FAQ */}
      <section className="section bg-cream">
        <div className="shell">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: "var(--space-8)" }} className="contact-grid">
            <div>
              <span className="eyebrow">Send a Message</span>
              <h2 style={{ marginTop: 14, fontSize: 40 }}>Have a question?</h2>
              <WaveDivider />
              <p style={{ marginTop: 18, color: "var(--muted)", maxWidth: 420 }}>
                Drop us a note and our leasing team will follow up within one business day.
              </p>

              <ContactForm />
            </div>

            <div>
              <span className="eyebrow">Frequently Asked</span>
              <h2 style={{ marginTop: 14, fontSize: 40 }}>Everything you wanted to know.</h2>
              <WaveDivider />
              <div style={{ marginTop: 28, borderTop: "1px solid rgba(13,27,42,0.08)" }}>
                {FAQ.map((f, i) => (
                  <div key={i} style={{ borderBottom: "1px solid rgba(13,27,42,0.08)" }}>
                    <button onClick={() => setOpenFaq(openFaq === i ? null : i)}
                            aria-expanded={openFaq === i}
                            style={{
                              width: "100%", textAlign: "left",
                              padding: "18px 0",
                              background: "transparent", border: "none",
                              fontFamily: "var(--serif)", fontSize: 19,
                              color: "var(--navy)",
                              display: "flex", justifyContent: "space-between", alignItems: "center",
                              cursor: "pointer"
                            }}>
                      <span>{f.q}</span>
                      <span style={{
                        fontFamily: "var(--sans)",
                        fontSize: 22,
                        color: "var(--bronze)",
                        transition: "transform .2s ease",
                        transform: openFaq === i ? "rotate(45deg)" : "none"
                      }}>+</span>
                    </button>
                    <div className={"faq-answer" + (openFaq === i ? " open" : "")} aria-hidden={openFaq !== i}>
                      <div>
                        <div style={{ paddingBottom: 20, fontSize: 14, color: "var(--muted)", lineHeight: 1.65, maxWidth: 540 }}>
                          {f.a}
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Final CTA strip */}
      <section className="bg-navy section-tight">
        <div className="shell" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 24 }}>
          <div>
            <div className="eyebrow on-dark">Waitlist open</div>
            <h3 style={{ marginTop: 8, color: "var(--linen-2)", fontSize: 32 }}>Experience oceanfront living at Boardwalk House.</h3>
          </div>
          <div style={{ display: "flex", gap: 14 }}>
            <button className="btn btn-primary" onClick={openTour}>Join Waitlist</button>
            <button className="btn btn-ghost" onClick={openApply}>Reserve Interest</button>
          </div>
        </div>
      </section>

      <BrandStrip />
    </div>
  );
}

function ContactForm() {
  const [done, setDone] = useStateContact(false);
  const [data, setData] = useStateContact({ name: "", email: "", phone: "", interest: "1br", message: "", smsConsent: false });
  const { send, pending, error } = window.useLeadSubmission();
  const submit = async (e) => {
    e.preventDefault();
    const saved = await send({
        subject: `[Boardwalk House] Contact message from ${data.name || "website visitor"}`,
        formType: "contact",
        ...data,
    });
    if (!saved) return;
    setDone(true);
  };
  if (done) {
    return (
      <div className="form-success" style={{ marginTop: 32, padding: 36, background: "#fff", border: "1px solid var(--bronze)" }}>
        <IconCheck size={28} style={{ color: "var(--bronze)" }} />
        <h4 style={{ fontFamily: "var(--serif)", fontSize: 22, marginTop: 12 }}>Message received.</h4>
        <p style={{ fontSize: 14, color: "var(--muted)", marginTop: 8 }}>
          Your message and preferences have been recorded for the leasing team.
        </p>
        <LeadReceiptDetails data={data} />
        <button type="button" className="btn btn-navy" onClick={() => { setData({ name: "", email: "", phone: "", interest: "1br", message: "", smsConsent: false }); setDone(false); }}>Send another message</button>
      </div>
    );
  }
  return (
    <form onSubmit={submit} className="form-grid form-enter" style={{ marginTop: 32 }}>
      <div className="field-row">
        <div className="field">
          <label>Full Name</label>
          <input value={data.name} onChange={(e) => setData({...data, name: e.target.value})} required />
        </div>
        <div className="field">
          <label>Email</label>
          <input type="email" value={data.email} onChange={(e) => setData({...data, email: e.target.value})} required />
        </div>
      </div>
      <div className="field-row">
        <div className="field">
          <label>Phone</label>
          <input type="tel" value={data.phone} onChange={(e) => setData({...data, phone: e.target.value})} />
        </div>
        <div className="field">
          <label>I'm interested in</label>
          <select value={data.interest} onChange={(e) => setData({...data, interest: e.target.value})}>
            <option value="1br">1 Bedroom</option>
            <option value="1br_den">1 Bedroom + Den</option>
            <option value="2br">2 Bedroom</option>
            <option value="any">Any availability</option>
            <option value="broker">Broker partnership</option>
            <option value="employer">Employer program</option>
          </select>
        </div>
      </div>
      <div className="field">
        <label>Message</label>
        <textarea rows="4" value={data.message} onChange={(e) => setData({...data, message: e.target.value})} />
      </div>
      <SmsConsentCheckbox
        checked={data.smsConsent}
        onChange={(smsConsent) => setData({ ...data, smsConsent })} />
      <button disabled={pending} type="submit" className="btn btn-navy" style={{ justifySelf: "start", marginTop: 8 }}>
        Send Message <IconArrow size={14} />
      </button>
      {error && <p role="alert" style={{ color: "#b3261e", background: "#fff", padding: 12 }}>{error}</p>}
        </form>
  );
}

function SmsConsentCheckbox({ checked, onChange }) {
  return (
    <label className="sms-consent">
      <input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} />
      <span>
        Optional: I agree to receive recurring automated text messages from 190 S Kentucky LLC d/b/a Boardwalk House
        about leasing questions, waitlist updates, and follow-up at the mobile number provided. Message frequency varies.
        Message and data rates may apply. Reply HELP for help and STOP to opt out. Consent is not required to rent,
        or join the waitlist.{" "}See <a href="privacy.html">Privacy Policy</a> and <a href="terms.html">Terms</a>.
      </span>
    </label>
  );
}

// =====================================================
// WAITLIST / LEASING INTEREST MODAL
// =====================================================
function ScheduleTourModal({ open, onClose }) {
  const { send, pending, error } = window.useLeadSubmission();
  const [step, setStep] = useStateContact(0);
  const [data, setData] = useStateContact({ name: "", email: "", phone: "", unitType: "1br", moveIn: "fall-2026", message: "", smsConsent: false });

  const reset = () => { setStep(0); setData({ name: "", email: "", phone: "", unitType: "1br", moveIn: "fall-2026", message: "", smsConsent: false }); };
  const close = () => { onClose(); setTimeout(reset, 300); };

  return (
    <Modal open={open} onClose={close} eyebrow="Waitlist" title="Join the Boardwalk House Waitlist">
      {error && <p role="alert">{error}</p>}
      {step < 2 && (
        <div style={{ display: "flex", gap: 4, marginBottom: 28 }}>
          {[0, 1].map((i) => (
            <div key={i} style={{
              flex: 1,
              height: 3,
              background: i <= step ? "var(--bronze)" : "rgba(13,27,42,0.1)",
              transition: "background .2s ease"
            }} />
          ))}
        </div>
      )}
      {step === 0 && (
        <div>
          <p style={{ fontSize: 14, color: "var(--muted)", marginBottom: 20 }}>
            We are not scheduling showings yet while construction finishes. Share your preferences and our leasing team will follow up when the next leasing step is ready.
          </p>
          <div className="form-grid">
            <div className="field-row">
              <div className="field">
                <label>Preferred Residence</label>
                <select value={data.unitType} onChange={(e) => setData({ ...data, unitType: e.target.value })}>
                  <option value="1br">1 Bedroom</option>
                  <option value="1br_den">1 Bedroom + Den</option>
                  <option value="2br">2 Bedroom</option>
                  <option value="flexible">Flexible</option>
                </select>
              </div>
              <div className="field">
                <label>Target Move-In</label>
                <select value={data.moveIn} onChange={(e) => setData({ ...data, moveIn: e.target.value })}>
                  <option value="fall-2026">Fall 2026</option>
                  <option value="winter-2026">Winter 2026/27</option>
                  <option value="flexible">Flexible</option>
                </select>
              </div>
            </div>
            <div className="field">
              <label>Notes for Leasing</label>
              <textarea
                value={data.message}
                onChange={(e) => setData({ ...data, message: e.target.value })}
                placeholder="Example: ocean view preferred, parking needed, interested in a specific unit"
                rows={4}
              />
            </div>
          </div>
          <div style={{ marginTop: 28, display: "flex", justifyContent: "flex-end" }}>
            <button className="btn btn-navy" onClick={() => setStep(1)}>Continue <IconArrow size={14} /></button>
          </div>
        </div>
      )}
      {step === 1 && (
        <div>
          <p style={{ fontSize: 14, color: "var(--muted)", marginBottom: 20 }}>Where can we reach you?</p>
          <div className="form-grid">
            <div className="field-row">
              <div className="field">
                <label>Full Name</label>
                <input value={data.name} onChange={(e) => setData({...data, name: e.target.value})} required />
              </div>
              <div className="field">
                <label>Phone</label>
                <input type="tel" value={data.phone} onChange={(e) => setData({...data, phone: e.target.value})} required />
              </div>
            </div>
            <div className="field">
              <label>Email</label>
              <input type="email" value={data.email} onChange={(e) => setData({...data, email: e.target.value})} required />
            </div>
            <SmsConsentCheckbox
              checked={data.smsConsent}
              onChange={(smsConsent) => setData({ ...data, smsConsent })} />
          </div>
          <div style={{ marginTop: 28, display: "flex", justifyContent: "space-between" }}>
            <button className="btn btn-outline" onClick={() => setStep(0)}>← Back</button>
            <button className="btn btn-primary"
                    disabled={pending || !data.name || !data.email || !data.phone}
                    onClick={async () => {
                      const saved = await send({
                          subject: `[Boardwalk House] Waitlist interest — ${data.name || data.email}`,
                          formType: "waitlist",
                          name: data.name,
                          email: data.email,
                          phone: data.phone,
                          interest: data.unitType,
                          moveInTimeline: data.moveIn,
                          message: data.message || "Prospect joined the waitlist for leasing follow-up while construction finishes.",
                          smsConsent: data.smsConsent,
                      });
                      if (saved) setStep(2);
                    }}
                    style={!data.name || !data.email || !data.phone ? { opacity: 0.45, cursor: "not-allowed" } : undefined}>
              Join Waitlist
            </button>
          </div>
        </div>
      )}
      {step === 2 && (
        <div style={{ textAlign: "center", padding: "20px 0" }}>
          <div style={{ display: "inline-grid", placeItems: "center", width: 64, height: 64, background: "var(--bronze)", color: "#fff", borderRadius: "50%" }}>
            <IconCheck size={28} />
          </div>
          <h4 style={{ fontFamily: "var(--serif)", fontSize: 26, marginTop: 18 }}>You're on the waitlist.</h4>
          <p style={{ fontSize: 14, color: "var(--muted)", marginTop: 10, maxWidth: 360, margin: "10px auto 0" }}>
            Your request is recorded. Your preferred timing is not a confirmed move-in date, and joining the waitlist does not reserve a unit. Tours and lease signing are not open yet.
          </p>
          <LeadReceiptDetails data={data} />
          <div style={{ marginTop: 28 }}>
            <button className="btn btn-navy" onClick={close}>Close</button>
          </div>
        </div>
      )}
    </Modal>
  );
}

function generateDateOptions() {
  const start = new Date();
  start.setDate(start.getDate() + 3);
  const out = [];
  for (let i = 0; i < 8; i++) {
    const d = new Date(start);
    d.setDate(start.getDate() + i);
    out.push({
      iso: d.toISOString().split("T")[0],
      dayName: d.toLocaleDateString("en-US", { weekday: "short" }),
      day: d.getDate(),
      month: d.toLocaleDateString("en-US", { month: "short" }),
    });
  }
  return out;
}

// =====================================================
// RESERVATION INTEREST MODAL (multi-step)
// =====================================================
function ApplyNowModal({ open, onClose }) {
  const { send, pending, error } = window.useLeadSubmission();
  const [step, setStep] = useStateContact(0);
  const [data, setData] = useStateContact({
    unitType: "1br", moveIn: "fall-2026",
    name: "", email: "", phone: "",
    employer: "", monthlyBudget: "", coApp: false,
    pets: "none", parking: true,
    consent: false, smsConsent: false,
  });

  const STEPS = ["Residence", "About You", "Preferences", "Lifestyle", "Review"];
  const next = () => setStep((s) => Math.min(s + 1, STEPS.length));
  const back = () => setStep((s) => Math.max(s - 1, 0));
  const close = () => { onClose(); setTimeout(() => { setStep(0); }, 300); };
  const submitApplication = async () => {
      const applicantName = [data.firstName, data.lastName].filter(Boolean).join(" ") || data.email || "prospect";
      const saved = await send({
        subject: `[Boardwalk House] Reservation interest — ${applicantName}`,
        formType: "reservation_interest",
        ...data,
      });
    if (saved) next();
  };

  return (
    <Modal open={open} onClose={close} eyebrow="Waitlist" title="Reservation Interest" wide>
      {error && <p role="alert">{error}</p>}
      {step < STEPS.length && (
        <div className="steps">
          {STEPS.map((s, i) => (
            <div key={s} className={"step" + (i === step ? " active" : i < step ? " done" : "")}>
              <span className="num">{i < step ? "✓" : i + 1}</span>{s}
            </div>
          ))}
        </div>
      )}

      {step === 0 && (
        <div>
          <h4 style={{ fontFamily: "var(--serif)", fontSize: 22, marginBottom: 16 }}>Which residence?</h4>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10 }}>
            {[
              { id: "1br",     lbl: "1 Bedroom",   sub: `From $${window.BOARDWALK_FACTS.estimatedStartingRents["1br"].toLocaleString()}` },
              { id: "1br_den", lbl: "1BR + Den",   sub: `From $${window.BOARDWALK_FACTS.estimatedStartingRents["1br_den"].toLocaleString()}` },
              { id: "2br",     lbl: "2 Bedroom",   sub: `From $${window.BOARDWALK_FACTS.estimatedStartingRents["2br"].toLocaleString()}` },
            ].map((o) => (
              <button key={o.id} type="button"
                      onClick={() => setData({ ...data, unitType: o.id })}
                      style={{
                        padding: 18, textAlign: "center",
                        background: data.unitType === o.id ? "var(--navy)" : "#fff",
                        color: data.unitType === o.id ? "var(--linen-2)" : "var(--navy)",
                        border: "1px solid " + (data.unitType === o.id ? "var(--navy)" : "rgba(13,27,42,0.12)")
                      }}>
                <div style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 600 }}>{o.lbl}</div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 16, marginTop: 8, opacity: 0.8 }}>{o.sub}*</div>
              </button>
            ))}
          </div>

          <PricingDisclosure />
          <div className="field" style={{ marginTop: 24 }}>
            <label>Preferred Move-In</label>
            <select value={data.moveIn} onChange={(e) => setData({ ...data, moveIn: e.target.value })}>
              <option value="fall-2026">Fall 2026</option>
              <option value="winter-2026">Winter 2026/27</option>
              <option value="flexible">Flexible</option>
            </select>
          </div>
          <ModalNav onNext={next} canNext />
        </div>
      )}

      {step === 1 && (
        <div>
          <h4 style={{ fontFamily: "var(--serif)", fontSize: 22, marginBottom: 16 }}>About you</h4>
          <div className="form-grid">
            <div className="field-row">
              <div className="field"><label>First Name</label><input value={data.firstName || ""} onChange={(e) => setData({...data, firstName: e.target.value})} /></div>
              <div className="field"><label>Last Name</label><input value={data.lastName || ""} onChange={(e) => setData({...data, lastName: e.target.value})} /></div>
            </div>
            <div className="field-row">
              <div className="field"><label>Email</label><input type="email" value={data.email} onChange={(e) => setData({...data, email: e.target.value})} /></div>
              <div className="field"><label>Phone</label><input type="tel" value={data.phone} onChange={(e) => setData({...data, phone: e.target.value})} /></div>
            </div>
            <div className="field">
              <label>Current Address</label>
              <input value={data.currentAddress || ""} onChange={(e) => setData({...data, currentAddress: e.target.value})} />
            </div>
            <label style={{ display: "flex", gap: 10, alignItems: "center", fontSize: 13, color: "var(--muted)" }}>
              <input type="checkbox" checked={data.coApp} onChange={(e) => setData({...data, coApp: e.target.checked})} />
              I may reserve with a co-resident
            </label>
            <SmsConsentCheckbox
              checked={data.smsConsent}
              onChange={(smsConsent) => setData({ ...data, smsConsent })} />
          </div>
          <ModalNav onBack={back} onNext={next} canNext={!!(data.firstName && data.email && data.phone)} />
        </div>
      )}

      {step === 2 && (
        <div>
          <h4 style={{ fontFamily: "var(--serif)", fontSize: 22, marginBottom: 16 }}>Preferences</h4>
          <div className="form-grid">
            <div className="field-row">
              <div className="field"><label>Employer</label><input value={data.employer} onChange={(e) => setData({...data, employer: e.target.value})} /></div>
              <div className="field"><label>Job Title</label><input value={data.jobTitle || ""} onChange={(e) => setData({...data, jobTitle: e.target.value})} /></div>
            </div>
            <div className="field-row">
              <div className="field">
                <label>Monthly Rent Budget (optional)</label>
                <select value={data.monthlyBudget} onChange={(e) => setData({...data, monthlyBudget: e.target.value})}>
                  <option value="">Select range</option>
                  <option>Under $1,600/month</option>
                  <option>$1,600–$1,899/month</option>
                  <option>$1,900–$2,199/month</option>
                  <option>$2,200+/month</option>
                  <option>Flexible</option>
                </select>
              </div>
              <div className="field">
                <label>Preferred Unit</label>
                <input placeholder="Example: 401, ocean view, or flexible" value={data.preferredUnit || ""} onChange={(e) => setData({...data, preferredUnit: e.target.value})} />
              </div>
            </div>
            <div style={{ padding: 14, background: "rgba(125,143,161,0.1)", border: "1px solid rgba(125,143,161,0.25)", fontSize: 12, color: "var(--muted)" }}>
              Boardwalk House is not signing leases yet while certificate-of-occupancy timing is pending. A fully refundable $500 deposit may reserve a specific unit through the leasing team.
            </div>
          </div>
          <ModalNav onBack={back} onNext={next} canNext />
        </div>
      )}

      {step === 3 && (
        <div>
          <h4 style={{ fontFamily: "var(--serif)", fontSize: 22, marginBottom: 16 }}>Lifestyle</h4>
          <div className="form-grid">
            <div className="field">
              <label>Pets</label>
              <select value={data.pets} onChange={(e) => setData({...data, pets: e.target.value})}>
                <option value="none">No pets</option>
                <option value="cat">Cat(s)</option>
                <option value="dog-small">Small dog (under 25 lbs)</option>
                <option value="multi">Multiple pets</option>
              </select>
            </div>
            <label style={{ display: "flex", gap: 10, alignItems: "center", fontSize: 14 }}>
              <input type="checkbox" checked={data.parking} onChange={(e) => setData({...data, parking: e.target.checked})} />
              Parking is important to me
            </label>
            <div className="field">
              <label>How did you hear about us?</label>
              <select value={data.selfReportedSource || ""} onChange={(e) => setData({...data, selfReportedSource: e.target.value})}>
                <option value="">Select</option>
                <option>Web search</option>
                <option>Walked by</option>
                <option>Referral / friend</option>
                <option>Broker</option>
                <option>Employer program</option>
                <option>Social media</option>
              </select>
            </div>
          </div>
          <ModalNav onBack={back} onNext={next} canNext />
        </div>
      )}

      {step === 4 && (
        <div>
          <h4 style={{ fontFamily: "var(--serif)", fontSize: 22, marginBottom: 16 }}>Review & submit</h4>
          <div style={{ background: "rgba(139,111,77,0.06)", padding: 24, border: "1px solid rgba(139,111,77,0.2)" }}>
            <ReviewRow label="Residence" value={`${TYPE_META[data.unitType].label} · Move in ${data.moveIn.replace("-", " ")}`} />
            <ReviewRow label="Applicant" value={`${data.firstName || ""} ${data.lastName || ""} · ${data.email}`} />
            <ReviewRow label="Preferences" value={`${data.employer || "Employer not provided"} — ${data.monthlyBudget || "Monthly rent budget not provided"}`} />
            <ReviewRow label="Lifestyle" value={`Pets: ${data.pets} · Parking: ${data.parking ? "yes" : "no"}`} />
          </div>
          <label style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 13, color: "var(--muted)", marginTop: 18 }}>
            <input type="checkbox" checked={data.consent} onChange={(e) => setData({...data, consent: e.target.checked})} style={{ marginTop: 4 }} />
            <span>I understand this is a waitlist and reservation-interest request, not a lease application or signed lease. The leasing team will confirm availability, pricing, certificate-of-occupancy timing, and any refundable deposit instructions.</span>
          </label>
          <ModalNav
            onBack={back}
            onNext={submitApplication}
            canNext={data.consent && !pending}
            nextLabel={pending ? "Saving…" : "Submit Interest"} />
        </div>
      )}

      {step === 5 && (
        <div style={{ textAlign: "center", padding: "20px 0" }}>
          <div style={{ display: "inline-grid", placeItems: "center", width: 64, height: 64, background: "var(--bronze)", color: "#fff", borderRadius: "50%" }}>
            <IconCheck size={28} />
          </div>
          <h4 style={{ fontFamily: "var(--serif)", fontSize: 28, marginTop: 18 }}>Interest received.</h4>
          <p style={{ fontSize: 14, color: "var(--muted)", marginTop: 10, maxWidth: 420, margin: "10px auto 0" }}>
            Thank you, {data.firstName || "there"}. Your preferences are recorded for the leasing team. This request does not reserve a unit or confirm a move-in date. Tours and lease signing are not open yet.
          </p>
          <LeadReceiptDetails data={data} />
          <div style={{ marginTop: 28 }}>
            <button className="btn btn-navy" onClick={close}>Close</button>
          </div>
        </div>
      )}
    </Modal>
  );
}

function ModalNav({ onBack, onNext, canNext, nextLabel }) {
  return (
    <div style={{ marginTop: 28, display: "flex", justifyContent: "space-between", gap: 10 }}>
      {onBack ? <button className="btn btn-outline" onClick={onBack}>← Back</button> : <span />}
      <button
        className="btn btn-navy"
        disabled={!canNext}
        onClick={onNext}
        style={!canNext ? { opacity: 0.45, cursor: "not-allowed" } : undefined}>
        {nextLabel || "Continue"} <IconArrow size={14} />
      </button>
    </div>
  );
}

function ReviewRow({ label, value }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "140px 1fr", gap: 16, padding: "10px 0", borderBottom: "1px dashed rgba(13,27,42,0.12)" }}>
      <div style={{ fontSize: 10.5, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--muted)", fontWeight: 600 }}>{label}</div>
      <div style={{ fontSize: 14, color: "var(--navy)" }}>{value}</div>
    </div>
  );
}

Object.assign(window, { ContactPage, ScheduleTourModal, ApplyNowModal });