A vet you can call by name.

No phone tag. Pick a branch, a time and we'll confirm by WhatsApp within an hour.

{i < step ? "✓" : i + 1} {s}

Emergency?

Call 800-VET — open now

{step === 0 && (

Where would you like to be seen?

{BRANCHES.map(b => ( ))}

What is this visit for?

{SERVICES.filter(s => !s.isEmergency).slice(0, 9).map(s => ( ))}

)} {step === 1 && (

Tell us about your pet

{["Dog", "Cat", "Bird", "Exotic"].map(t => ( ))}

Pet's name update("petName", e.target.value)} placeholder="e.g. Luna" /> Age update("petAge", e.target.value)} placeholder="e.g. 3 years" />

Anything we should know? (optional)

update("notes", e.target.value)} rows={3} placeholder="Recent symptoms, allergies, anxious in clinics — anything helps." />
              </label>
            </div>
          )}

{step === 2 && (
            <div className="book-step">
              <h3 className="book-h">When suits you?</h3>
              <div className="book-days">
                {days.map((d, i) => {
                  const key = d.toISOString().slice(0, 10);
                  return (
                    <button key={key} className={"book-day " + (data.date === key ? "is-active" : "")} onClick={() => update("date", key)}>
                      <span className="book-day-dow">{d.toLocaleDateString("en-US", { weekday: "short" })}</span>
                      <span className="book-day-num">{d.getDate()}</span>
                      <span className="book-day-mon">{d.toLocaleDateString("en-US", { month: "short" })}</span>
                    </button>
                  );
                })}
              </div>
              <div className="book-times">
                {TIMES.map(t => (
                  <button key={t} className={"book-time " + (data.time === t ? "is-active" : "")} onClick={() => update("time", t)}>{t}</button>
                ))}
              </div>
              <h3 className="book-h" style={{ marginTop: 32 }}>How can we reach you?</h3>
              <div className="field-grid">
                <label className="field"><span className="field-lab">Your name</span><input value={data.name} onChange={e => update("name", e.target.value)} placeholder="Full name" /></label>
                <label className="field"><span className="field-lab">Phone</span><input value={data.phone} onChange={e => update("phone", e.target.value)} placeholder="+971 …" /></label>
                <label className="field" style={{ gridColumn: "1 / -1" }}><span className="field-lab">Email</span><input value={data.email} onChange={e => update("email", e.target.value)} placeholder="you@email.com" /></label>
              </div>
            </div>
          )}

{step === 3 && (
            <div className="book-step book-confirm">
              <h3 className="book-h">All set — please confirm</h3>
              <dl className="book-summary">
                <div><dt>Branch</dt><dd>{activeBranch?.name}</dd></div>
                <div><dt>Service</dt><dd>{activeService?.name}</dd></div>
                <div><dt>Pet</dt><dd>{data.petName || "—"} · {data.petType}{data.petAge ? ` · ${data.petAge}` : ""}</dd></div>
                <div><dt>When</dt><dd>{data.date || "—"} at {data.time}</dd></div>
                <div><dt>You</dt><dd>{data.name || "—"} · {data.phone || "—"}</dd></div>
              </dl>
              <p className="book-confirm-note">We'll send a confirmation on WhatsApp within an hour. If your pet needs care sooner, please call <a href="tel:80082">800-VET</a>.</p>
              <div className="book-success-spot">
                <span className="pulse-dot"></span> A vet will see {data.petName || "your pet"} at {activeBranch?.name.replace(" Hospital", "").replace(" Clinic", "")}.
              </div>
            </div>
          )}
        </div>

<div className="book-foot">
          <div className="book-foot-step">Step {step + 1} of {steps.length}</div>
          <div className="book-foot-actions">
            {step > 0 && <button className="btn btn-ghost" onClick={prev}>← Back</button>}
            {step < steps.length - 1 && <button className="btn btn-primary" onClick={next}>Continue <Icon name="arrow-right" /></button>}
            {step === steps.length - 1 && <button className="btn btn-primary" onClick={onClose}>Request appointment</button>}
          </div>
        </div>
      </div>
    </div>
  );
};

// ── PHOTO SLOT (placeholder for tasteful image use) ───────────────
const Photo = ({ src, alt, ratio = "4 / 3", className = "", focal = "center" }) => (
  <div className={"photo " + className} style={{ aspectRatio: ratio }}>
    <img src={src} alt={alt} loading="lazy" style={{ objectPosition: focal }} />
  </div>
);

// ── SECTION HEADER ────────────────────────────────────────────────
const SectionHead = ({ eyebrow, title, sub, align = "left", onNavy = false }) => (
  <header className={"section-head section-head-" + align + (onNavy ? " on-navy" : "")}>
    {eyebrow && <div className={"eyebrow" + (onNavy ? " on-navy" : "")}>{eyebrow}</div>}
    <h2 className="section-title">{title}</h2>
    {sub && <p className="section-sub">{sub}</p>}
  </header>
);

Object.assign(window, { Icon, Wedge, Logo, Nav, EmergencyStrip, Footer, MobileBar, BookModal, Photo, SectionHead });