/* 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 }) {
  const [openFaq, setOpenFaq] = useStateContact(null);

  return (
    <div>
      <PageHero
        eyebrow="Contact & Leasing"
        title="Get in touch."
        lede="Our leasing team is here to answer questions, schedule tours, 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: "Tour", title: "Schedule a Tour", body: "Hard-hat tours and finished model walk-throughs starting early 2026.", cta: "Book a Tour", action: openTour },
              { ico: IconCheck,    eyebrow: "Apply", title: "Apply Now",        body: "Five-step application. Save and resume anytime. Most decisions within 48 hours.", cta: "Start Application", action: openApply },
              { ico: IconPhone,    eyebrow: "Talk", title: "Call or Text",     body: "Our leasing team is available 9am–7pm, seven days a week.", cta: "(609) 710-7977", action: () => 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 earn a competitive referral fee on each signed lease at Boardwalk House.",
                bullets: ["Generous flat-fee referral", "Monthly co-op events", "Direct line to leasing team"],
                cta: "Get Program Details"
              },
              {
                title: "Preferred Employer Program",
                lede: "Major Atlantic City employers receive priority scheduling, reduced fees, and exclusive incentives for their teams.",
                bullets: ["Waived application fees", "Reduced security deposits", "Dedicated employer contact"],
                cta: "Become a Partner"
              },
              {
                title: "Launch Offers",
                lede: "Founding residents who sign before our Summer 2026 opening receive special pricing and incentives.",
                bullets: ["Founding-resident rate", "First month free option", "Priority parking selection"],
                cta: "See Launch Incentives",
                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={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)}
                            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>
                    {openFaq === i && (
                      <div style={{ paddingBottom: 20, fontSize: 14, color: "var(--muted)", lineHeight: 1.65, maxWidth: 540 }}>
                        {f.a}
                      </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">Ready when you are</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}>Schedule a Tour</button>
            <button className="btn btn-ghost" onClick={openApply}>Apply Now</button>
          </div>
        </div>
      </section>

      <BrandStrip />
    </div>
  );
}

function ContactForm() {
  const [done, setDone] = useStateContact(false);
  const [data, setData] = useStateContact({ name: "", email: "", phone: "", interest: "1br", message: "" });
  const submit = async (e) => {
    e.preventDefault();
    try {
      await window.submitForm({
        subject: `[Boardwalk House] Contact message from ${data.name || "website visitor"}`,
        formType: "contact",
        ...data,
      });
    } catch (_) { /* silent — UI still confirms */ }
    setDone(true);
    setTimeout(() => setDone(false), 4500);
    setData({ name: "", email: "", phone: "", interest: "1br", message: "" });
  };
  if (done) {
    return (
      <div 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 }}>
          A member of our leasing team will follow up within one business day.
        </p>
      </div>
    );
  }
  return (
    <form onSubmit={submit} className="form-grid" 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>
      <button type="submit" className="btn btn-navy" style={{ justifySelf: "start", marginTop: 8 }}>
        Send Message <IconArrow size={14} />
      </button>
    </form>
  );
}

// =====================================================
// SCHEDULE TOUR MODAL
// =====================================================
function ScheduleTourModal({ open, onClose }) {
  const [step, setStep] = useStateContact(0);
  const [data, setData] = useStateContact({ tourType: "in-person", date: "", time: "", name: "", email: "", phone: "" });

  const dates = generateDateOptions();
  const times = ["10:00 AM", "11:30 AM", "1:00 PM", "2:30 PM", "4:00 PM", "5:30 PM"];

  const reset = () => { setStep(0); setData({ tourType: "in-person", date: "", time: "", name: "", email: "", phone: "" }); };
  const close = () => { onClose(); setTimeout(reset, 300); };

  return (
    <Modal open={open} onClose={close} eyebrow="Schedule a Tour" title="Visit Boardwalk House">
      {step < 3 && (
        <div style={{ display: "flex", gap: 4, marginBottom: 28 }}>
          {[0, 1, 2].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 }}>
            How would you like to tour? In-person tours begin early 2026.
          </p>
          <div style={{ display: "grid", gap: 10 }}>
            {[
              { id: "in-person", lbl: "In-Person Tour", sub: "Walk the building with our leasing team. Available early 2026." },
              { id: "self-guided", lbl: "Self-Guided Tour", sub: "Tour at your own pace once finished models are open." },
              { id: "virtual", lbl: "Virtual Tour", sub: "Live video walk-through with leasing — book any week." },
            ].map((opt) => (
              <button key={opt.id} type="button"
                      onClick={() => setData({ ...data, tourType: opt.id })}
                      style={{
                        textAlign: "left", padding: 18,
                        background: data.tourType === opt.id ? "rgba(139,111,77,0.08)" : "#fff",
                        border: "1px solid " + (data.tourType === opt.id ? "var(--bronze)" : "rgba(13,27,42,0.12)"),
                      }}>
                <div style={{ fontWeight: 600, color: "var(--navy)", letterSpacing: "0.04em", textTransform: "uppercase", fontSize: 12 }}>{opt.lbl}</div>
                <div style={{ fontSize: 13, color: "var(--muted)", marginTop: 6 }}>{opt.sub}</div>
              </button>
            ))}
          </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>
          <div className="field" style={{ marginBottom: 20 }}>
            <label>Choose a date</label>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, marginTop: 6 }}>
              {dates.map((d) => (
                <button key={d.iso} type="button"
                        onClick={() => setData({ ...data, date: d.iso })}
                        style={{
                          padding: "12px 6px", textAlign: "center",
                          background: data.date === d.iso ? "var(--navy)" : "#fff",
                          color: data.date === d.iso ? "var(--linen-2)" : "var(--navy)",
                          border: "1px solid " + (data.date === d.iso ? "var(--navy)" : "rgba(13,27,42,0.12)")
                        }}>
                  <div style={{ fontSize: 9, letterSpacing: "0.16em", textTransform: "uppercase", opacity: 0.7 }}>{d.dayName}</div>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 22, marginTop: 4, fontWeight: 500 }}>{d.day}</div>
                  <div style={{ fontSize: 9, letterSpacing: "0.12em", textTransform: "uppercase", opacity: 0.7, marginTop: 2 }}>{d.month}</div>
                </button>
              ))}
            </div>
          </div>
          <div className="field">
            <label>Choose a time</label>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8, marginTop: 6 }}>
              {times.map((t) => (
                <button key={t} type="button"
                        onClick={() => setData({ ...data, time: t })}
                        style={{
                          padding: 12, fontSize: 13,
                          background: data.time === t ? "var(--bronze)" : "#fff",
                          color: data.time === t ? "#fff" : "var(--navy)",
                          border: "1px solid " + (data.time === t ? "var(--bronze)" : "rgba(13,27,42,0.12)"),
                          fontWeight: 600
                        }}>
                  {t}
                </button>
              ))}
            </div>
          </div>
          <div style={{ marginTop: 28, display: "flex", justifyContent: "space-between" }}>
            <button className="btn btn-outline" onClick={() => setStep(0)}>← Back</button>
            <button className="btn btn-navy" disabled={!data.date || !data.time} onClick={() => setStep(2)}
                    style={!data.date || !data.time ? { opacity: 0.45, cursor: "not-allowed" } : undefined}>
              Continue <IconArrow size={14} />
            </button>
          </div>
        </div>
      )}
      {step === 2 && (
        <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>
          </div>
          <div style={{ marginTop: 28, display: "flex", justifyContent: "space-between" }}>
            <button className="btn btn-outline" onClick={() => setStep(1)}>← Back</button>
            <button className="btn btn-primary"
                    disabled={!data.name || !data.email || !data.phone}
                    onClick={async () => {
                      try {
                        await window.submitForm({
                          subject: `[Boardwalk House] Tour request — ${data.date} ${data.time}`,
                          formType: "schedule_tour",
                          ...data,
                        });
                      } catch (_) { /* silent */ }
                      setStep(3);
                    }}
                    style={!data.name || !data.email || !data.phone ? { opacity: 0.45, cursor: "not-allowed" } : undefined}>
              Confirm Tour
            </button>
          </div>
        </div>
      )}
      {step === 3 && (
        <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 }}>Your tour is booked.</h4>
          <p style={{ fontSize: 14, color: "var(--muted)", marginTop: 10, maxWidth: 360, margin: "10px auto 0" }}>
            We'll email confirmation to <strong style={{ color: "var(--navy)" }}>{data.email}</strong> shortly. Looking forward to having you at Boardwalk House.
          </p>
          <div style={{ marginTop: 24, padding: 16, background: "rgba(139,111,77,0.08)", display: "inline-block", textAlign: "left", border: "1px solid rgba(139,111,77,0.25)" }}>
            <div style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--bronze)", fontWeight: 600 }}>Your appointment</div>
            <div style={{ fontFamily: "var(--serif)", fontSize: 20, marginTop: 6, color: "var(--navy)" }}>
              {data.date && new Date(data.date).toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" })} · {data.time}
            </div>
            <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 4, textTransform: "capitalize" }}>{data.tourType.replace("-", " ")} tour · 190 S Kentucky Ave</div>
          </div>
          <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;
}

// =====================================================
// APPLY NOW MODAL (multi-step)
// =====================================================
function ApplyNowModal({ open, onClose }) {
  const [step, setStep] = useStateContact(0);
  const [data, setData] = useStateContact({
    unitType: "1br", moveIn: "summer-2026",
    name: "", email: "", phone: "",
    employer: "", income: "", coApp: false,
    pets: "none", parking: true,
    consent: false,
  });

  const STEPS = ["Residence", "About You", "Employment", "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 () => {
    try {
      const applicantName = [data.firstName, data.lastName].filter(Boolean).join(" ") || data.email || "applicant";
      await window.submitForm({
        subject: `[Boardwalk House] Lease application — ${applicantName}`,
        formType: "apply",
        ...data,
      });
    } catch (_) { /* silent */ }
    next();
  };

  return (
    <Modal open={open} onClose={close} eyebrow="Apply Now" title="Lease Application" wide>
      {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 $1,600" },
              { id: "1br_den", lbl: "1BR + Den",   sub: "From $1,850" },
              { id: "2br",     lbl: "2 Bedroom",   sub: "From $2,100" },
            ].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>

          <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="summer-2026">Summer 2026 (launch)</option>
              <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'll be applying with a co-applicant
            </label>
          </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 }}>Employment</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>Annual Income</label>
                <select value={data.income} onChange={(e) => setData({...data, income: e.target.value})}>
                  <option value="">Select range</option>
                  <option>Under $50,000</option>
                  <option>$50,000 – $75,000</option>
                  <option>$75,000 – $100,000</option>
                  <option>$100,000 – $150,000</option>
                  <option>Over $150,000</option>
                </select>
              </div>
              <div className="field">
                <label>Years at Employer</label>
                <input value={data.yearsEmployer || ""} onChange={(e) => setData({...data, yearsEmployer: 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 participates in the Preferred Employer Program — many AC employers receive waived application fees and reduced deposits.
            </div>
          </div>
          <ModalNav onBack={back} onNext={next} canNext={!!(data.employer && data.income)} />
        </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})} />
              I'd like a reserved parking space ($150/mo)
            </label>
            <div className="field">
              <label>How did you hear about us?</label>
              <select value={data.source || ""} onChange={(e) => setData({...data, source: 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="Employer" value={`${data.employer} — ${data.income}`} />
            <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 authorize Boardwalk House to verify employment and run a credit/background check. I understand the application fee is $50 (waived for Preferred Employer Program members).</span>
          </label>
          <ModalNav
            onBack={back}
            onNext={submitApplication}
            canNext={data.consent}
            nextLabel="Submit Application" />
        </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 }}>Application received.</h4>
          <p style={{ fontSize: 14, color: "var(--muted)", marginTop: 10, maxWidth: 420, margin: "10px auto 0" }}>
            Thank you, {data.firstName || "there"}. Most decisions come back within 48 hours. Watch your inbox at <strong style={{ color: "var(--navy)" }}>{data.email}</strong> for next steps.
          </p>
          <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 });