// Modern Vet — page components

const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP } = React;

// ── HOME ──────────────────────────────────────────────────────────
const HomePage = ({ onBook, branch, setBranch }) => {
  const featuredServices = ["pet-consultation", "vaccinations", "emergency", "spay-neuter", "dentistry", "cardiology", "grooming", "mobile-clinic"].map(s => SERVICES.find(x => x.slug === s));
  const featuredVets = VETS.filter(v => v.featured).slice(0, 5);

  return (
    <>
      {/* HERO */}
      <section className="hero">
        <div className="hero-photo">
          <img src="media/hero-home-desktop.webp" alt="Modern Vet — pet care in Dubai" />
          <div className="hero-photo-fade"></div>
        </div>
        <div className="hero-inner">
          <div className="hero-copy">
            <div className="hero-eyebrow">
              <Wedge className="hero-eyebrow-mark" color="var(--peach)" />
              <span>Trusted pet care · since 1995</span>
            </div>
            <h1 className="hero-title">
              The vet that <em>stays open</em>,<br/>
              the team that <em>knows your pet</em>.
            </h1>
            <p className="hero-sub">Dubai's only 24-hour multi-specialty pet hospital, plus five neighbourhood clinics and a mobile clinic that comes to your door. One record, one team, one phone number — across the city.</p>
            <div className="hero-ctas">
              <button className="btn btn-primary btn-lg" onClick={onBook}><Icon name="calendar"/> Book an appointment</button>
              <a href="https://wa.me/971506304573?text=Hi%20Modern%20Vet%2C%20I%27d%20like%20to%20book" target="_blank" rel="noopener" className="btn btn-ghost btn-lg"><Icon name="whatsapp"/> WhatsApp us</a>
            </div>
            <div className="hero-badges">
              <div className="hero-badge"><strong>24/7</strong><span>Al Wasl ER</span></div>
              <div className="hero-badge"><strong>6</strong><span>Dubai branches</span></div>
              <div className="hero-badge"><strong>30 yrs</strong><span>since 1995</span></div>
              <div className="hero-badge"><strong>AED</strong><span>Public prices</span></div>
            </div>
          </div>
        </div>
        <div className="hero-strip">
          <span>As reported by the clinic</span>
          <span className="dotsep">·</span>
          <span><b>120,000+</b> pet families cared for</span>
          <span className="dotsep">·</span>
          <span><b>60,000+</b> surgeries performed</span>
          <span className="dotsep">·</span>
          <span>Avian &amp; exotics welcome</span>
        </div>
      </section>

      {/* SERVICES GRID */}
      <section className="section">
        <div className="container">
          <SectionHead eyebrow="What we do" title="Care for the whole life of your pet." sub="From puppy vaccines to overnight ICU — under one roof, by one team that keeps notes." />
          <div className="service-grid">
            {featuredServices.map(s => (
              <a key={s.slug} href={`#/services/${s.slug}`} className={"service-card" + (s.isEmergency ? " is-emergency" : "")}>
                <div className="service-card-icon"><Icon name={s.icon}/></div>
                <h3 className="service-card-name">{s.name}</h3>
                <p className="service-card-short">{s.short}</p>
                {s.priceFrom && <div className="service-card-price">from AED {s.priceFrom} <span>+ VAT</span></div>}
                {s.isEmergency && <div className="service-card-price service-card-price-em">Open now · 24/7</div>}
                <div className="service-card-arrow"><Icon name="arrow-right" /></div>
              </a>
            ))}
          </div>
          <div className="see-all"><a href="#/services" className="link-arrow">See all services <Icon name="arrow-right"/></a></div>
        </div>
      </section>

      {/* BRANCHES STRIP */}
      <section className="section section-cream">
        <div className="container">
          <SectionHead eyebrow="Find your nearest" title="Six branches across Dubai." sub="Same records. Same standards. Different parking situations." />
          <div className="branch-row">
            {BRANCHES.map(b => (
              <a key={b.slug} href={`#/branches/${b.slug}`} className="branch-tile" onMouseEnter={() => setBranch(b.slug)}>
                <div className="branch-tile-photo">
                  <img src={b.image} alt={b.name} loading="lazy" />
                  {b.is24 && <span className="badge-24 on-photo">24/7</span>}
                </div>
                <div className="branch-tile-body">
                  <h3 className="branch-tile-name">{b.name}</h3>
                  <div className="branch-tile-hours"><Icon name="clock" /> {b.hoursShort}</div>
                  <div className="branch-tile-addr">{b.address.split(",").slice(0, 2).join(", ")}</div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* WHY MODERN VET — navy section */}
      <section className="section section-navy">
        <div className="container">
          <div className="why-grid">
            <div className="why-head">
              <div className="eyebrow on-navy">Why Modern Vet</div>
              <h2 className="section-title section-title-navy">A grown-up hospital, with a neighbourhood-vet bedside manner.</h2>
              <p className="why-sub">When the worst happens at 2am, you want a hospital. The rest of the time, you want someone who calls your dog by name. We try to be both.</p>
              <a href="#/about" className="link-arrow link-arrow-navy">Our story since 1995 <Icon name="arrow-right" /></a>
            </div>
            <div className="why-list">
              {[
                ["Open all night, every night", "Our Al Wasl flagship is the only 24-hour multi-specialty pet hospital in the UAE. On-call surgeons, ICU, in-house imaging."],
                ["One record, six branches", "Visit any of our six Dubai branches — your pet's history, vaccinations and notes travel with them."],
                ["Specialists in-house", "Cardiology, neurology, oncology, ophthalmology, orthopaedics — we don't refer for the things we should do ourselves."],
                ["Prices on the website", "Consultation from AED 249 + VAT. Vaccination from AED 349. Surgery tiers listed. No quote-only games."],
                ["A clinic that comes to you", "The Modern Vet mobile clinic is a fully-equipped consult room and lab on wheels — across Dubai."],
              ].map(([h, b], i) => (
                <div key={i} className="why-item">
                  <div className="why-num">0{i + 1}</div>
                  <div>
                    <h3 className="why-h">{h}</h3>
                    <p className="why-p">{b}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* VETS TEASER */}
      <section className="section">
        <div className="container">
          <SectionHead eyebrow="Meet the team" title="Specialists you'll get to know by their first names." sub="Sixteen vets and nurses across the group. Here are a few." />
          <div className="vet-row">
            {featuredVets.map(v => (
              <a key={v.slug} href={`#/vets/${v.slug}`} className="vet-card">
                <div className="vet-card-photo"><img src={v.image} alt={v.name} loading="lazy" /></div>
                <div className="vet-card-name">{v.name}</div>
                <div className="vet-card-role">{v.role}</div>
                <div className="vet-card-spec">{v.specialties.slice(0, 2).join(" · ")}</div>
              </a>
            ))}
          </div>
          <div className="see-all"><a href="#/vets" className="link-arrow">All vets &amp; nurses <Icon name="arrow-right"/></a></div>
        </div>
      </section>

      {/* PRICING TEASER */}
      <section className="section section-cream">
        <div className="container">
          <div className="pricing-teaser">
            <div className="pricing-teaser-copy">
              <div className="eyebrow">Transparent pricing</div>
              <h2 className="section-title">No "call for a quote." <br/>The prices are on the website.</h2>
              <p className="pricing-teaser-sub">Most Dubai vets won't tell you what a consultation costs until you walk in. We publish a public starting-price list — so you can plan, not negotiate.</p>
              <a href="#/prices" className="btn btn-dark btn-lg">See the full price list <Icon name="arrow-right"/></a>
            </div>
            <div className="pricing-teaser-list">
              {PRICES.slice(0, 5).map(p => (
                <div key={p.service} className="pricing-teaser-row">
                  <span className="pricing-teaser-name">{p.service}</span>
                  <span className="pricing-teaser-from">from <b>AED {p.from}</b> <span className="muted">+ VAT</span></span>
                </div>
              ))}
              <a href="#/prices" className="pricing-teaser-row pricing-teaser-more">
                <span>+ 6 more, including surgery tiers</span>
                <Icon name="arrow-right" />
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* MOBILE CLINIC FEATURE */}
      <section className="section">
        <div className="container">
          <div className="feature-split">
            <div className="feature-split-photo">
              <img src="media/service-mobile-clinic.webp" alt="Modern Vet mobile clinic" />
              <span className="feature-tag"><Icon name="mobile"/> Mobile clinic</span>
            </div>
            <div className="feature-split-copy">
              <div className="eyebrow">A clinic that comes to you</div>
              <h2 className="section-title">For the cat who hates the carrier. The dog who can't take a car ride. The household with five animals.</h2>
              <p>Our branded mobile clinic is a fully-equipped consult room and mobile lab. Consultations, vaccinations, microchipping, sample collection — all at your door, across Dubai. Same notes, same digital record as in-clinic.</p>
              <div className="feature-split-actions">
                <button className="btn btn-primary" onClick={onBook}>Request a home visit</button>
                <a href="#/services/mobile-clinic" className="link-arrow">How it works <Icon name="arrow-right"/></a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA BAND */}
      <section className="cta-band">
        <div className="container cta-band-inner">
          <Wedge className="cta-band-mark" color="var(--peach)" />
          <h2 className="cta-band-title">Need a vet today?</h2>
          <p className="cta-band-sub">Book online and we'll confirm on WhatsApp within an hour. Or call the line that never closes.</p>
          <div className="cta-band-actions">
            <button className="btn btn-peach btn-lg" onClick={onBook}><Icon name="calendar"/> Book appointment</button>
            <a href="tel:80082" className="btn btn-ghost-light btn-lg"><Icon name="phone"/> Call 800-VET</a>
          </div>
        </div>
      </section>
    </>
  );
};

// ── SERVICES HUB ──────────────────────────────────────────────────
const ServicesPage = ({ onBook }) => {
  const groups = ["Critical", "Wellness", "Specialist", "Surgery", "Diagnostics", "Convenience"];
  return (
    <main className="page">
      <div className="page-head">
        <div className="container">
          <div className="eyebrow">Services</div>
          <h1 className="page-title">Everything pet medicine, in one place.</h1>
          <p className="page-sub">Sixteen services across wellness, specialist medicine, surgery, diagnostics and emergency care — performed by the same team that wrote your pet's notes.</p>
        </div>
      </div>
      <div className="container page-body">
        {groups.map(g => {
          const items = SERVICES.filter(s => s.group === g);
          if (!items.length) return null;
          return (
            <section key={g} className="service-group">
              <h2 className="service-group-head"><span className="service-group-dot"></span>{g}</h2>
              <div className="service-list">
                {items.map(s => (
                  <a key={s.slug} href={`#/services/${s.slug}`} className={"service-list-item " + (s.isEmergency ? "is-emergency" : "")}>
                    <div className="service-list-icon"><Icon name={s.icon}/></div>
                    <div className="service-list-body">
                      <div className="service-list-name">{s.name}{s.isEmergency && <span className="badge-24" style={{ marginLeft: 10 }}>24/7</span>}</div>
                      <div className="service-list-short">{s.short}</div>
                    </div>
                    {s.priceFrom && <div className="service-list-price">from AED {s.priceFrom}<span>+ VAT</span></div>}
                    <Icon name="chevron-right" className="service-list-chev"/>
                  </a>
                ))}
              </div>
            </section>
          );
        })}
      </div>
    </main>
  );
};

// ── SERVICE DETAIL ────────────────────────────────────────────────
const ServiceDetailPage = ({ slug, onBook, setBookService }) => {
  const service = SERVICES.find(s => s.slug === slug) || SERVICES[0];
  return (
    <main className="page">
      <div className={"page-head " + (service.isEmergency ? "page-head-emergency" : "")}>
        <div className="container service-detail-head">
          <div className="service-detail-head-copy">
            <a href="#/services" className="back-link">← All services</a>
            <div className={"eyebrow " + (service.isEmergency ? "on-emergency" : "")}>{service.group}{service.isEmergency && " · 24/7"}</div>
            <h1 className="page-title">{service.name}</h1>
            <p className="page-sub">{service.body.what}</p>
            <div className="service-detail-actions">
              <button className="btn btn-primary btn-lg" onClick={() => { setBookService(service.slug); onBook(); }}>
                {service.isEmergency ? <><Icon name="phone"/> Call 800-VET now</> : <><Icon name="calendar"/> Book this service</>}
              </button>
              {service.priceFrom && <div className="service-detail-price">from <b>AED {service.priceFrom}</b> + VAT</div>}
            </div>
          </div>
          {service.flagshipImage && <div className="service-detail-photo"><img src={service.flagshipImage} alt={service.name}/></div>}
        </div>
      </div>
      <div className="container page-body service-detail-body">
        <div className="service-detail-grid">
          <div className="service-detail-block">
            <h3 className="service-detail-h">What's included</h3>
            <ul className="check-list">
              {service.body.included.map((it, i) => <li key={i}><Icon name="check"/> {it}</li>)}
            </ul>
          </div>
          <div className="service-detail-block">
            <h3 className="service-detail-h">When your pet might need this</h3>
            <ul className="check-list check-list-dots">
              {service.body.when.map((it, i) => <li key={i}><span className="dot"></span> {it}</li>)}
            </ul>
          </div>
        </div>
        <div className="service-detail-cta">
          <Wedge className="service-detail-cta-mark" color="var(--peach)" />
          <div>
            <h3 className="service-detail-cta-h">Not sure if this is what you need?</h3>
            <p className="service-detail-cta-p">Send us a quick message on WhatsApp — describe what's going on, and we'll suggest the right next step.</p>
          </div>
          <a href="https://wa.me/971506304573" target="_blank" rel="noopener" className="btn btn-primary"><Icon name="whatsapp"/> Ask on WhatsApp</a>
        </div>
      </div>
    </main>
  );
};

// ── BRANCHES INDEX ────────────────────────────────────────────────
const BranchesPage = () => (
  <main className="page">
    <div className="page-head">
      <div className="container">
        <div className="eyebrow">Branches</div>
        <h1 className="page-title">Six clinics in Dubai. One phone number.</h1>
        <p className="page-sub">Same digital record, same standards. Pick the closest one and book — your history follows you.</p>
      </div>
    </div>
    <div className="container page-body">
      <div className="branches-grid">
        {BRANCHES.map(b => (
          <a key={b.slug} href={`#/branches/${b.slug}`} className={"branch-detail-card" + (b.is24 ? " is-24" : "")}>
            <div className="branch-detail-photo"><img src={b.image} alt={b.name} loading="lazy"/></div>
            <div className="branch-detail-body">
              <div className="branch-detail-tag">{b.tag}</div>
              <h3 className="branch-detail-name">{b.name}</h3>
              <p className="branch-detail-blurb">{b.blurb}</p>
              <dl className="branch-detail-meta">
                <div><dt><Icon name="map-pin"/></dt><dd>{b.address}</dd></div>
                <div><dt><Icon name="clock"/></dt><dd>{b.hours}</dd></div>
              </dl>
              <span className="link-arrow">View branch <Icon name="arrow-right"/></span>
            </div>
          </a>
        ))}
      </div>
    </div>
  </main>
);

// ── BRANCH DETAIL ─────────────────────────────────────────────────
const BranchDetailPage = ({ slug, onBook, setBookBranch }) => {
  const branch = BRANCHES.find(b => b.slug === slug) || BRANCHES[0];
  const team = (branch.onSiteSpecialists || []).map(s => VETS.find(v => v.slug === s)).filter(Boolean);

  return (
    <main className="page">
      <div className="branch-hero">
        <img src={branch.image} alt={branch.name} />
        <div className="branch-hero-fade"></div>
        <div className="container branch-hero-inner">
          <a href="#/branches" className="back-link on-navy">← All branches</a>
          <div className="branch-hero-tag">{branch.tag}</div>
          <h1 className="branch-hero-title">{branch.name}</h1>
          {branch.is24 && <div className="branch-hero-24"><span className="pulse-dot"></span> Open right now · 24 hours, every day</div>}
        </div>
      </div>
      <div className="container page-body">
        <div className="branch-detail-grid">
          <div className="branch-detail-main">
            <h2 className="branch-h">About this branch</h2>
            <p className="branch-p">{branch.blurb}</p>

            <dl className="branch-facts">
              <div><dt>Address</dt><dd>{branch.address}</dd></div>
              <div><dt>Hours</dt><dd>{branch.hours}</dd></div>
              <div><dt>Phone</dt><dd><a href="tel:80082">800-VET (800-82)</a></dd></div>
              <div><dt>WhatsApp</dt><dd><a href="https://wa.me/971506304573" target="_blank" rel="noopener">+971 50 630 4573</a></dd></div>
            </dl>

            {team.length > 0 && <>
              <h2 className="branch-h" style={{ marginTop: 48 }}>Team at this branch</h2>
              <div className="vet-row vet-row-tight">
                {team.map(v => (
                  <a key={v.slug} href={`#/vets/${v.slug}`} className="vet-card">
                    <div className="vet-card-photo"><img src={v.image} alt={v.name} loading="lazy"/></div>
                    <div className="vet-card-name">{v.name}</div>
                    <div className="vet-card-role">{v.role}</div>
                  </a>
                ))}
              </div>
            </>}
          </div>
          <aside className="branch-side">
            <div className="branch-side-card">
              <h3 className="branch-side-h">Book at {branch.name.replace(" Hospital", "").replace(" Clinic", "")}</h3>
              <p className="branch-side-p">We'll confirm on WhatsApp within an hour.</p>
              <button className="btn btn-primary btn-block" onClick={() => { setBookBranch(branch.slug); onBook(); }}><Icon name="calendar"/> Book appointment</button>
              <a href="tel:80082" className="btn btn-dark btn-block"><Icon name="phone"/> Call 800-VET</a>
              <a href="https://wa.me/971506304573" target="_blank" rel="noopener" className="btn btn-ghost btn-block"><Icon name="whatsapp"/> WhatsApp</a>
            </div>
            <div className="branch-map">
              <div className="branch-map-placeholder">
                <Icon name="map-pin"/>
                <span>Map embed — pin to be supplied by client</span>
              </div>
            </div>
            <div className="branch-side-note">
              <Icon name="emergency" />
              <span>For after-hours emergencies, our <a href="#/branches/al-wasl">Al Wasl hospital</a> is open 24/7.</span>
            </div>
          </aside>
        </div>
      </div>
    </main>
  );
};

// ── VETS INDEX ────────────────────────────────────────────────────
const VetsPage = () => {
  const [filter, setFilter] = useStateP("All");
  const branches = ["All", ...new Set(VETS.map(v => v.branch))];
  const branchName = (slug) => slug === "All" ? "All branches" : BRANCHES.find(b => b.slug === slug)?.name.replace(" Hospital", "").replace(" Clinic", "");
  const filtered = VETS.filter(v => filter === "All" || v.branch === filter);
  return (
    <main className="page">
      <div className="page-head">
        <div className="container">
          <div className="eyebrow">The team</div>
          <h1 className="page-title">Sixteen vets and nurses, on first-name terms.</h1>
          <p className="page-sub">We hire vets with subspecialty training — so when the case gets unusual, you don't get sent across town. Credentials marked "to verify" are pending client confirmation.</p>
        </div>
      </div>
      <div className="container page-body">
        <div className="vet-filters">
          {branches.map(b => (
            <button key={b} className={"vet-filter " + (filter === b ? "is-active" : "")} onClick={() => setFilter(b)}>{branchName(b)}</button>
          ))}
        </div>
        <div className="vet-grid">
          {filtered.map(v => (
            <a key={v.slug} href={`#/vets/${v.slug}`} className="vet-card vet-card-lg">
              <div className="vet-card-photo"><img src={v.image} alt={v.name} loading="lazy"/></div>
              <div className="vet-card-body">
                <div className="vet-card-name">{v.name}</div>
                <div className="vet-card-role">{v.role}</div>
                <div className="vet-card-spec">{v.specialties.slice(0, 2).join(" · ")}</div>
                <div className="vet-card-branch">{branchName(v.branch)}</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </main>
  );
};

// ── VET DETAIL ────────────────────────────────────────────────────
const VetDetailPage = ({ slug, onBook }) => {
  const vet = VETS.find(v => v.slug === slug) || VETS[0];
  const branch = BRANCHES.find(b => b.slug === vet.branch);
  const verified = !vet.credentials.startsWith("Credentials");
  return (
    <main className="page">
      <div className="container page-body">
        <a href="#/vets" className="back-link">← All vets &amp; team</a>
        <div className="vet-detail">
          <div className="vet-detail-photo">
            <img src={vet.image} alt={vet.name} />
            <Wedge className="vet-detail-bg" color="var(--peach)" />
          </div>
          <div className="vet-detail-body">
            <div className="eyebrow">{vet.role}</div>
            <h1 className="page-title">{vet.name}</h1>
            <div className="vet-detail-creds">
              {verified
                ? <><span className="creds-verified"><Icon name="check"/> Credentials verified</span>{vet.credentials}</>
                : <span className="creds-pending">{vet.credentials}</span>}
            </div>
            {vet.bio && <p className="vet-detail-bio">{vet.bio}</p>}
            <dl className="vet-detail-meta">
              <div><dt>Specialties</dt><dd>{vet.specialties.join(" · ")}</dd></div>
              {vet.languages && <div><dt>Languages</dt><dd>{vet.languages.join(", ")}</dd></div>}
              {branch && <div><dt>Branch</dt><dd><a href={`#/branches/${branch.slug}`}>{branch.name}</a></dd></div>}
              <div><dt>MOCCAE licence</dt><dd className="muted">To be supplied by client</dd></div>
            </dl>
            <button className="btn btn-primary btn-lg" onClick={onBook}>Book with {vet.name.split(" ")[0]} {vet.name.split(" ")[1]}</button>
          </div>
        </div>
      </div>
    </main>
  );
};

// ── PRICES ────────────────────────────────────────────────────────
const PricesPage = ({ onBook }) => (
  <main className="page">
    <div className="page-head">
      <div className="container">
        <div className="eyebrow">Transparent pricing</div>
        <h1 className="page-title">Public price list.</h1>
        <p className="page-sub">A starting list for our most-asked-about services. All prices are <b>"from"</b> and <b>+ VAT</b> — the exact figure depends on your pet's needs, and we'll always tell you before we do anything.</p>
      </div>
    </div>
    <div className="container page-body">
      <table className="price-table">
        <thead>
          <tr>
            <th>Service</th>
            <th>What's included</th>
            <th className="ta-r">From</th>
          </tr>
        </thead>
        <tbody>
          {PRICES.map(p => (
            <tr key={p.service}>
              <td><div className="price-name">{p.service}</div><div className="price-group">{p.group}{p.caveat && ` · ${p.caveat}`}</div></td>
              <td className="price-inc">{p.includes}</td>
              <td className="ta-r price-from"><div className="price-aed">AED {p.from.toLocaleString()}</div><div className="price-vat">+ VAT</div></td>
            </tr>
          ))}
        </tbody>
      </table>
      <p className="price-disclaimer">Procedure-to-tier mapping is pending client confirmation. We never charge for a service we haven't agreed with you first.</p>
      <div className="price-cta">
        <h2 className="price-cta-h">Ready when you are.</h2>
        <button className="btn btn-primary btn-lg" onClick={onBook}><Icon name="calendar"/> Book an appointment</button>
      </div>
    </div>
  </main>
);

// ── EMERGENCY ─────────────────────────────────────────────────────
const EmergencyPage = () => (
  <main className="page emergency-page">
    <div className="emergency-hero">
      <div className="container emergency-hero-inner">
        <div className="emergency-hero-pulse"><span className="pulse-dot pulse-dot-lg"></span> Open right now</div>
        <h1 className="emergency-title">If it's an emergency, call us first. Then drive.</h1>
        <p className="emergency-sub">Our Al Wasl flagship hospital is open 24 hours a day, every day. A vet will pick up the phone and tell you what to do next.</p>
        <div className="emergency-ctas">
          <a href="tel:80082" className="btn btn-emergency btn-lg"><Icon name="phone"/> Call 800-VET</a>
          <a href="https://wa.me/971506304573?text=Emergency%20—%20my%20pet%20needs%20urgent%20help" target="_blank" rel="noopener" className="btn btn-ghost-light btn-lg"><Icon name="whatsapp"/> WhatsApp the ER</a>
        </div>
      </div>
    </div>
    <div className="container page-body">
      <div className="emergency-grid">
        <div className="emergency-block">
          <h2 className="emergency-h">When to come straight in</h2>
          <ul className="check-list check-list-emergency">
            {["Trouble breathing or persistent vomiting", "Suspected poisoning or toxic ingestion", "Trauma — falls, road accidents, attacks", "Inability to urinate, collapse, or seizure", "Bleeding that won't stop after 5 minutes", "Bloat — distended abdomen, retching"].map(t => <li key={t}><Icon name="check"/> {t}</li>)}
          </ul>
        </div>
        <div className="emergency-block">
          <h2 className="emergency-h">What we'll do when you arrive</h2>
          <ol className="num-list">
            <li><b>Triage in under 5 minutes.</b> A vet — not just reception — assesses your pet on arrival.</li>
            <li><b>Stabilise.</b> Oxygen, IV access, fluids and pain relief where indicated, before further work-up.</li>
            <li><b>Diagnose.</b> In-house lab, digital X-ray and ultrasound on site. CT and MRI on call.</li>
            <li><b>Treat.</b> ICU monitoring and surgical theatre on site if needed. We'll explain every step.</li>
          </ol>
        </div>
      </div>
      <div className="emergency-where">
        <h2 className="emergency-h">Where to go</h2>
        <div className="emergency-where-card">
          <img src="media/branch-al-wasl.webp" alt="Al Wasl Hospital" />
          <div>
            <div className="branch-detail-tag">Flagship · 24/7</div>
            <h3 className="branch-detail-name">Al Wasl Hospital</h3>
            <p>Villa #793, Al Wasl Road, Umm Suqeim 1, Dubai</p>
            <a href="#/branches/al-wasl" className="link-arrow">View branch &amp; map <Icon name="arrow-right"/></a>
          </div>
        </div>
      </div>
    </div>
  </main>
);

// ── ABOUT ─────────────────────────────────────────────────────────
const AboutPage = () => (
  <main className="page">
    <div className="page-head">
      <div className="container">
        <div className="eyebrow">About</div>
        <h1 className="page-title">Three decades. One conviction:<br/> pets deserve real medicine.</h1>
        <p className="page-sub">Modern Vet opened its doors in Dubai in 1995. Three decades, six branches and one mobile clinic later, we're still the only 24-hour multi-specialty pet hospital in the UAE.</p>
      </div>
    </div>
    <div className="container page-body">
      <div className="about-feature">
        <div className="about-feature-photo"><img src="media/facility-hospital.webp" alt="Al Wasl Hospital"/></div>
        <div>
          <div className="eyebrow">The flagship</div>
          <h2 className="section-title">Al Wasl, since the beginning.</h2>
          <p>Our Al Wasl hospital has been on the same street for thirty years. ICU, three surgical suites, in-house imaging and lab, and a team that goes home only when the patients are stable.</p>
        </div>
      </div>
      <div className="about-stats">
        {[
          ["1995", "Year founded"],
          ["6", "Dubai branches"],
          ["24/7", "ER hospital"],
          ["16+", "Vets & nurses"],
        ].map(([n, l]) => (
          <div key={l} className="about-stat">
            <div className="about-stat-n">{n}</div>
            <div className="about-stat-l">{l}</div>
          </div>
        ))}
      </div>
      <div className="about-grid">
        <div className="about-photo"><img src="media/facility-medical-care.webp" alt="Medical care"/></div>
        <div className="about-photo"><img src="media/facility-infrastructure.webp" alt="Medical infrastructure"/></div>
        <div className="about-photo"><img src="media/facility-clinical-protocols.webp" alt="Clinical protocols"/></div>
      </div>
      <div className="about-values">
        <div className="eyebrow">What we believe</div>
        <h2 className="section-title">Modern medicine. Old-fashioned attention.</h2>
        <div className="about-values-grid">
          {[
            ["Tell the truth.", "If we don't know, we'll say so. If the right next step is a referral, we'll arrange it."],
            ["Charge fairly.", "Public prices, agreed before we act. No surprise bills, no quote-only games."],
            ["Treat the family.", "Vet medicine is a family decision. We explain every step, in plain English (or Arabic, Russian, or whichever fits)."],
            ["Stay open.", "When it's the middle of the night and you need help, you should be able to reach a vet. We will pick up."],
          ].map(([h, p]) => (
            <div key={h} className="about-value">
              <Wedge className="about-value-mark" color="var(--peach)" />
              <h3>{h}</h3>
              <p>{p}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  </main>
);

// ── CONTACT (small) ───────────────────────────────────────────────
const ContactPage = ({ onBook }) => (
  <main className="page">
    <div className="page-head">
      <div className="container">
        <div className="eyebrow">Contact</div>
        <h1 className="page-title">We're easy to reach.</h1>
        <p className="page-sub">One number, one WhatsApp, six branches. Pick whichever you prefer.</p>
      </div>
    </div>
    <div className="container page-body">
      <div className="contact-grid">
        <a href="tel:80082" className="contact-card">
          <Icon name="phone" />
          <h3>Call us</h3>
          <p>800-VET (800-82) · 24/7 for emergencies</p>
        </a>
        <a href="https://wa.me/971506304573" target="_blank" rel="noopener" className="contact-card">
          <Icon name="whatsapp" />
          <h3>WhatsApp</h3>
          <p>+971 50 630 4573 — usually replies within minutes</p>
        </a>
        <button onClick={onBook} className="contact-card contact-card-btn">
          <Icon name="calendar" />
          <h3>Book online</h3>
          <p>Choose a branch, pick a time, we confirm on WhatsApp</p>
        </button>
      </div>
    </div>
  </main>
);

Object.assign(window, { HomePage, ServicesPage, ServiceDetailPage, BranchesPage, BranchDetailPage, VetsPage, VetDetailPage, PricesPage, EmergencyPage, AboutPage, ContactPage });
