// Contact / Book — multi-step booking funnel + branch contact panel.

function DSCContactPage({ navigate, prefill }) {
  const d = window.DSC_DATA;
  const [step, setStep] = useState(0);
  const [data, setData] = useState({
    treatment: prefill?.treatment || "",
    branch: prefill?.branch || "burjuman",
    dentist: prefill?.dentist || "",
    name: "",
    phone: "",
    email: "",
    date: "",
    note: "",
  });
  const [errors, setErrors] = useState({});
  const [submitted, setSubmitted] = useState(false);

  const steps = [
    { id: "treatment", label: "Treatment" },
    { id: "branch", label: "Branch" },
    { id: "contact", label: "Your details" },
    { id: "confirm", label: "Confirm" },
  ];

  // Skip directly to confirm when all required already prefilled? Keep multi-step for the demo.

  function setField(k, v) { setData((p) => ({ ...p, [k]: v })); }

  function validateStep() {
    const e = {};
    if (step === 0 && !data.treatment) e.treatment = "Pick a treatment to continue.";
    if (step === 1 && !data.branch) e.branch = "Pick a branch.";
    if (step === 2) {
      if (!data.name.trim()) e.name = "Your name, please.";
      if (!data.phone.trim() || data.phone.replace(/\D/g, "").length < 7) e.phone = "A valid phone helps us confirm.";
    }
    setErrors(e);
    return Object.keys(e).length === 0;
  }

  function next() { if (validateStep()) setStep((s) => Math.min(s + 1, steps.length - 1)); }
  function prev() { setStep((s) => Math.max(0, s - 1)); setErrors({}); }
  function submit() {
    if (!validateStep()) return;
    // Simulated — would POST to Formspree/Netlify in production
    setSubmitted(true);
  }

  const treatment = d.treatments.find((t) => t.slug === data.treatment);
  const branch = d.branches.find((b) => b.id === data.branch);
  const dentist = d.dentists.find((x) => x.slug === data.dentist);

  return (
    <div className="dsc-page" data-screen-label="06 Contact / Book">
      <section className="dsc-page-header">
        <div className="dsc-container">
          <div className="dsc-page-eyebrow" style={{marginBottom: "1.5rem"}}>
            <span className="dsc-eyebrow">Book a consultation</span>
            <span className="dsc-mono" style={{color: "var(--ink-mute)"}}>45 min · no commitment · written quote</span>
          </div>
          <h1 className="dsc-h1" style={{maxWidth: "14ch", textWrap: "balance"}}>
            Four steps to a chair on the <em>21st floor.</em>
          </h1>
          <p className="dsc-lede" style={{marginTop: "1.75rem"}}>
            Tell us what you'd like to discuss, which branch suits you, and how to reach you. Our front desk will confirm within one business day. For something urgent, use WhatsApp.
          </p>
        </div>
      </section>

      <section className="dsc-section">
        <div className="dsc-container" style={{display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: "clamp(2rem, 5vw, 5rem)"}} >
          <div>
            {/* Steps */}
            {!submitted && (
              <div className="dsc-steps">
                {steps.map((s, i) => (
                  <div key={s.id} className={`dsc-step ${step === i ? "active" : step > i ? "done" : ""}`}>
                    <span className="dsc-step-num">{step > i ? "✓" : i + 1}</span>
                    {s.label}
                  </div>
                ))}
              </div>
            )}

            {/* Step body */}
            {!submitted && step === 0 && (
              <div className="dsc-fade-in">
                <h2 className="dsc-h3" style={{marginBottom: "1.5rem"}}>What would you like to discuss?</h2>
                <div className="dsc-choice-grid">
                  {d.treatments.map((t) => (
                    <button key={t.slug}
                            role="radio"
                            aria-checked={data.treatment === t.slug}
                            onClick={() => setField("treatment", t.slug)}
                            className="dsc-choice">
                      <div className="dsc-choice-icon"><img src={t.icon} alt="" /></div>
                      <div className="dsc-choice-title">{t.name}</div>
                      <div className="dsc-choice-sub">{t.category}</div>
                    </button>
                  ))}
                </div>
                {errors.treatment && <p className="dsc-field-error" style={{marginTop: "1rem"}}>{errors.treatment}</p>}
                <p className="dsc-flag" style={{marginTop: "1.5rem"}}>
                  Not sure? Pick "General &amp; Preventive" and we will triage at the first visit.
                </p>
              </div>
            )}

            {!submitted && step === 1 && (
              <div className="dsc-fade-in">
                <h2 className="dsc-h3" style={{marginBottom: "1.5rem"}}>Which branch suits you?</h2>
                <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1rem"}}>
                  {d.branches.map((b) => (
                    <button key={b.id}
                            role="radio"
                            aria-checked={data.branch === b.id}
                            onClick={() => setField("branch", b.id)}
                            className="dsc-choice"
                            style={{minHeight: 200, alignItems: "flex-start"}}>
                      <div className="dsc-eyebrow">{b.flagship ? "Flagship" : "Sister premises"}</div>
                      <div className="dsc-choice-title" style={{fontSize: "1.5rem", marginTop: "0.25rem"}}>{b.brand}</div>
                      <div className="dsc-choice-sub" style={{fontSize: "0.92rem", marginTop: "0.5rem", lineHeight: 1.5}}>
                        {b.address1}<br/>{b.address3}
                      </div>
                      <div className="dsc-mono" style={{marginTop: "0.75rem", fontSize: "0.72rem", color: "var(--ink-mute)"}}>
                        {b.hours[0].d} {b.hours[0].t}
                      </div>
                    </button>
                  ))}
                </div>
              </div>
            )}

            {!submitted && step === 2 && (
              <div className="dsc-fade-in" style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1.25rem"}}>
                <div className="dsc-field" style={{gridColumn: "1 / -1"}}>
                  <label htmlFor="bk-name">Full name</label>
                  <input id="bk-name" className="dsc-input" placeholder="Anna Maria Silfverskiöld"
                         value={data.name} onChange={(e) => setField("name", e.target.value)} />
                  {errors.name && <span className="dsc-field-error">{errors.name}</span>}
                </div>
                <div className="dsc-field">
                  <label htmlFor="bk-phone">Phone</label>
                  <input id="bk-phone" className="dsc-input" placeholder="+971 …"
                         value={data.phone} onChange={(e) => setField("phone", e.target.value)} />
                  {errors.phone && <span className="dsc-field-error">{errors.phone}</span>}
                </div>
                <div className="dsc-field">
                  <label htmlFor="bk-email">Email (optional)</label>
                  <input id="bk-email" type="email" className="dsc-input" placeholder="you@example.com"
                         value={data.email} onChange={(e) => setField("email", e.target.value)} />
                </div>
                <div className="dsc-field">
                  <label htmlFor="bk-date">Preferred date (optional)</label>
                  <input id="bk-date" type="date" className="dsc-input"
                         value={data.date} onChange={(e) => setField("date", e.target.value)} />
                </div>
                <div className="dsc-field">
                  <label htmlFor="bk-dentist">Preferred dentist (optional)</label>
                  <select id="bk-dentist" className="dsc-select"
                          value={data.dentist} onChange={(e) => setField("dentist", e.target.value)}>
                    <option value="">No preference</option>
                    {d.dentists.map((doc) => <option key={doc.slug} value={doc.slug}>{doc.name} — {doc.role}</option>)}
                  </select>
                </div>
                <div className="dsc-field" style={{gridColumn: "1 / -1"}}>
                  <label htmlFor="bk-note">Anything to flag in advance? (optional)</label>
                  <textarea id="bk-note" className="dsc-textarea" rows={3}
                            placeholder="Pain, anxiety, recent X-rays, ongoing treatment elsewhere…"
                            value={data.note} onChange={(e) => setField("note", e.target.value)} />
                </div>
              </div>
            )}

            {!submitted && step === 3 && (
              <div className="dsc-fade-in">
                <h2 className="dsc-h3" style={{marginBottom: "1.5rem"}}>Please confirm.</h2>
                <div style={{border: "1px solid var(--rule)", borderRadius: 2, padding: "1.5rem", display: "grid", gridTemplateColumns: "auto 1fr", columnGap: "2rem", rowGap: "1rem", fontSize: "0.95rem"}}>
                  <div className="dsc-eyebrow">Treatment</div>
                  <div>{treatment?.name} <span style={{color: "var(--ink-mute)"}}>· {treatment?.category}</span></div>
                  <div className="dsc-eyebrow">Branch</div>
                  <div>{branch?.brand} — {branch?.label}<br/><span style={{color: "var(--ink-mute)"}}>{branch?.address1}, {branch?.address3}</span></div>
                  <div className="dsc-eyebrow">Name</div>
                  <div>{data.name || <span style={{color: "var(--ink-mute)"}}>—</span>}</div>
                  <div className="dsc-eyebrow">Phone</div>
                  <div>{data.phone}</div>
                  {data.email && <><div className="dsc-eyebrow">Email</div><div>{data.email}</div></>}
                  {data.date && <><div className="dsc-eyebrow">Preferred date</div><div>{data.date}</div></>}
                  {dentist && <><div className="dsc-eyebrow">Dentist</div><div>{dentist.name}</div></>}
                  {data.note && <><div className="dsc-eyebrow">Notes</div><div style={{color: "var(--ink-soft)"}}>{data.note}</div></>}
                </div>
                <p className="dsc-flag" style={{marginTop: "1.5rem"}}>
                  Submitting will POST to Formspree / Netlify Forms in production. This prototype simulates the submission only.
                </p>
              </div>
            )}

            {submitted && (
              <div className="dsc-confirm dsc-fade-in">
                <div className="dsc-confirm-mark">✓</div>
                <div className="dsc-eyebrow" style={{marginBottom: "1rem"}}>Booking request sent</div>
                <h2 className="dsc-h2" style={{maxWidth: "20ch", margin: "0 auto"}}>
                  Thank you, {data.name.split(" ")[0] || "friend"}.
                </h2>
                <p className="dsc-lede" style={{margin: "1.5rem auto 0", textAlign: "center"}}>
                  Our front desk at <strong>{branch?.brand}</strong> will confirm your <em>{treatment?.name}</em> consultation within one business day, on <strong>{data.phone}</strong>.
                </p>
                <div style={{marginTop: "2rem", display: "inline-flex", gap: "0.75rem"}}>
                  <a className="dsc-btn dsc-btn-ghost" href="#/" onClick={(e) => { e.preventDefault(); navigate("home"); }}>Back to home</a>
                  <a className="dsc-btn dsc-btn-primary" href={d.clinic.whatsapp} target="_blank" rel="noreferrer">Send same details on WhatsApp</a>
                </div>
              </div>
            )}

            {/* Nav buttons */}
            {!submitted && (
              <div style={{marginTop: "2.5rem", display: "flex", justifyContent: "space-between", alignItems: "center", gap: "1rem", borderTop: "1px solid var(--rule)", paddingTop: "1.5rem"}}>
                <button className="dsc-btn dsc-btn-ghost" onClick={prev} disabled={step === 0} style={{opacity: step === 0 ? 0.4 : 1}}>
                  ← Back
                </button>
                <span className="dsc-mono" style={{color: "var(--ink-mute)"}}>Step {step + 1} of {steps.length}</span>
                {step < steps.length - 1 ? (
                  <button className="dsc-btn dsc-btn-primary" onClick={next}>
                    Continue <span aria-hidden="true">→</span>
                  </button>
                ) : (
                  <button className="dsc-btn dsc-btn-primary" onClick={submit}>
                    Send booking request →
                  </button>
                )}
              </div>
            )}
          </div>

          {/* SIDEBAR: branches */}
          <aside>
            <div className="dsc-eyebrow" style={{marginBottom: "1rem"}}>Prefer the phone?</div>
            <h3 className="dsc-h3" style={{marginBottom: "2rem"}}>Two desks, <em>one team.</em></h3>

            {d.branches.map((b) => (
              <div key={b.id} style={{paddingBlock: "1.5rem", borderTop: "1px solid var(--rule)"}}>
                <div className="dsc-eyebrow" style={{marginBottom: 4}}>{b.flagship ? "Flagship" : "Sister premises"}</div>
                <div className="dsc-h4" style={{fontFamily: "var(--display)", fontSize: "1.25rem", marginBottom: "0.5rem"}}>{b.brand}</div>
                <div style={{color: "var(--ink-soft)", fontSize: "0.9rem", lineHeight: 1.5, marginBottom: "0.75rem"}}>
                  {b.address1}<br/>{b.address2}<br/>{b.address3}
                </div>
                <div style={{fontSize: "0.85rem", color: "var(--ink-soft)", marginBottom: "0.75rem"}}>
                  {b.hours.map((h, i) => <div key={i}><strong style={{color: "var(--ink)"}}>{h.d}</strong> · {h.t}</div>)}
                </div>
                <a className="dsc-btn-link" href={b.phoneTel}>{b.phone}</a>
              </div>
            ))}

            <div style={{marginTop: "1.5rem", padding: "1.25rem", background: "var(--surface)", border: "1px solid var(--rule)", borderRadius: 2}}>
              <div className="dsc-eyebrow" style={{marginBottom: "0.75rem"}}>WhatsApp</div>
              <p style={{margin: 0, fontSize: "0.92rem", color: "var(--ink-soft)", lineHeight: 1.5}}>
                Fastest way to reach us out of hours.
              </p>
              <a className="dsc-btn dsc-btn-ghost" href={d.clinic.whatsapp} target="_blank" rel="noreferrer" style={{marginTop: "0.75rem"}}>
                {d.clinic.whatsappLabel} →
              </a>
            </div>
          </aside>
        </div>
      </section>
    </div>
  );
}

window.DSCContactPage = DSCContactPage;