e.stopPropagation()}>

Book a consultation

{step === 0 && "What brings you to Biolite?"} {step === 1 && "Choose a treatment area"} {step === 2 && "When works for you?"} {step === 3 && "Your details"} {step === 4 && "Consultation requested"}

{step < 4 && (

{Array.from({ length: total }).map((_, i) => (

))}

)} {step === 0 && (

{["Surgical procedure", "Non-surgical aesthetics", "Wellness & longevity", "Cosmetic gynaecology", "I'm not sure — please advise"].map(o => ( update("intent", o)} style={{ padding: "16px 18px", textAlign: "left", display: "block" }}> {o} ))}

Minimal PHI policy We only collect contact + treatment interest. Medical history is reviewed in clinic.

)} {step === 1 && (

Area

{TREATMENT_AREAS.map(a => ( ))}

{data.area && (

Specific treatment

)}

)} {step === 2 && (

Preferred timing

{["This week", "Next week", "Within a month", "I'm visiting Dubai"].map(o => ( ))}

Anything to note? (optional)

update("notes", e.target.value)} />
              </div>
            </div>
          )}

{step === 3 && (
            <div>
              <div className="field">
                <label>Full name</label>
                <input className="input" value={data.name} onChange={(e) => update("name", e.target.value)} placeholder="Your name" />
              </div>
              <div className="field">
                <label>Email</label>
                <input className="input" type="email" value={data.email} onChange={(e) => update("email", e.target.value)} placeholder="you@example.com" />
              </div>
              <div className="field">
                <label>Phone (incl. country code)</label>
                <input className="input" value={data.phone} onChange={(e) => update("phone", e.target.value)} placeholder="+971 50 …" />
              </div>
              <div className="field">
                <label>Preferred contact</label>
                <div className="radio-group">
                  {[["whatsapp","WhatsApp"], ["call","Phone call"], ["email","Email"]].map(([v,l]) => (
                    <button key={v} className={"radio-pill " + (data.contact === v ? "active" : "")} onClick={() => update("contact", v)}>{l}</button>
                  ))}
                </div>
              </div>
              <div className="note">
                <span className="mono">Compliance</span>
                A care coordinator will reach out within 1 working day. Reported consultation fee from AED 400 (confirm at booking).
              </div>
            </div>
          )}

{step === 4 && (
            <div className="fadein" style={{ textAlign: "center", padding: "40px 0" }}>
              <BrandMark size={64} />
              <div className="serif" style={{ fontSize: 36, marginTop: 24, letterSpacing: "-0.01em" }}>
                Thank you, {data.name.split(" ")[0] || "friend"}.
              </div>
              <p className="lede" style={{ marginTop: 16, maxWidth: 380, marginLeft: "auto", marginRight: "auto" }}>
                Your consultation request is with our coordinator. We'll reach out via {data.contact === "whatsapp" ? "WhatsApp" : data.contact === "call" ? "phone" : "email"} within one working day.
              </p>
              <div className="micro" style={{ marginTop: 32 }}>REF · BIO-{Math.floor(Math.random() * 90000 + 10000)}</div>
            </div>
          )}
        </div>

{step < 4 && (
          <div className="modal-foot">
            {step > 0 && <button className="btn btn-ghost" onClick={() => setStep(step - 1)}>Back</button>}
            <div style={{ flex: 1 }} />
            <button
              className="btn"
              disabled={!canNext()}
              style={{ opacity: canNext() ? 1 : 0.4, cursor: canNext() ? "pointer" : "not-allowed" }}
              onClick={() => {
                if (step === 3) setStep(4);
                else setStep(step + 1);
              }}
            >
              {step === 3 ? "Request consultation" : "Continue"}
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

// Section header pattern
function SecHead({ roman, title, meta, children }) {
  return (
    <div className="sec-head">
      <div className="roman">{roman}</div>
      <div>
        <div className="title" dangerouslySetInnerHTML={{ __html: title }} />
        {children && <div className="lede" style={{ marginTop: 16, maxWidth: 720 }}>{children}</div>}
      </div>
      <div className="meta">{meta}</div>
    </div>
  );
}

Object.assign(window, { BrandMark, Logo, Nav, Footer, BookRail, BookingModal, SecHead });