// Services, Service Detail, Diagnostics, Team, Vet, About, Contact, Emergency pages

function PageHeader({ eyebrow, title, lede, kicker }) {
  return (
    <section className="ph">
      <div className="container">
        {kicker && <div style={{marginBottom: 16}}><a href="#" onClick={(e)=>{e.preventDefault(); kicker.onBack();}} className="ph-back"><Icon name="arrow-right" size={14} stroke={2} style={{transform:"rotate(180deg)"}}/> {kicker.label}</a></div>}
        <span className="eyebrow">{eyebrow}</span>
        <h1 className="h-display ph-title">{title}</h1>
        {lede && <p className="lede ph-lede">{lede}</p>}
      </div>
      <ECGLine color="var(--oasis)"/>
      <style>{`
        .ph { padding: clamp(40px, 6vw, 80px) 0 24px; background: linear-gradient(180deg, var(--sky) 0%, var(--paper-warm) 100%); }
        .ph-title { font-size: clamp(44px, 6.2vw, 88px); margin: 12px 0 20px; line-height: .98; }
        .ph-title em { color: var(--leaf-deep); }
        .ph-lede { max-width: 680px; font-size: 18px; }
        .ph-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--oasis); }
      `}</style>
    </section>
  );
}

/* ========== SERVICES HUB ========== */
function ServicesPage({ setRoute }) {
  const data = window.BOV_DATA;
  const groups = ["Flagship","Urgent","Clinical","Specialist","Wellness","Convenience"];
  const byGroup = groups.map(g => ({ g, items: data.services.filter(s => s.group === g) }));

  return (
    <main className="page-enter">
      <PageHeader
        eyebrow="Services"
        title={<>Care across <em>every</em> stage of life.</>}
        lede="From puppy boosters to MRI-led diagnostics and round-the-clock emergency surgery — explore the full range."
      />

      <section style={{paddingTop: 40}}>
        <div className="container">
          {byGroup.map(({ g, items }) => items.length > 0 && (
            <div key={g} className="svc-group">
              <div className="svc-group-h">
                <span className="eyebrow">{g}</span>
                <div className="svc-group-rule"/>
              </div>
              <div className="svc-group-grid">
                {items.map(s => (
                  <button key={s.slug} className="svc-card-lg card card-link"
                          onClick={() => setRoute({ page: "service", slug: s.slug })}>
                    <span className="svc-ico"><Icon name={s.icon} size={20}/></span>
                    <div className="svc-card-lg-body">
                      <div className="svc-card-lg-top">
                        <h3>{s.name}</h3>
                        {s.flagship && <span className="tag leaf">Flagship</span>}
                        {s.group === "Urgent" && <span className="tag alert">24/7</span>}
                      </div>
                      <p>{s.lede}</p>
                      <span className="svc-more">Read more <Icon name="arrow-right" size={13} stroke={2}/></span>
                    </div>
                  </button>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      <CTABand setRoute={setRoute}/>

      <style>{`
        .svc-group { margin-bottom: 56px; }
        .svc-group-h { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
        .svc-group-rule { flex: 1; height: 1px; background: var(--line); }
        .svc-group-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
        .svc-card-lg {
          padding: 22px;
          display: grid; grid-template-columns: auto 1fr; gap: 18px;
          align-items: flex-start; text-align: left; cursor: pointer;
        }
        .svc-card-lg-body { display: flex; flex-direction: column; gap: 8px; }
        .svc-card-lg-top { display: flex; gap: 10px; align-items: center; }
        .svc-card-lg h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); }
        .svc-card-lg p { margin: 0; font-size: 13.5px; color: var(--slate); line-height: 1.5; }
        @media (max-width: 880px) { .svc-group-grid { grid-template-columns: 1fr; } }
      `}</style>
    </main>
  );
}

/* ========== SERVICE DETAIL ========== */
function ServiceDetail({ slug, setRoute }) {
  const data = window.BOV_DATA;
  const s = data.services.find(x => x.slug === slug);
  if (!s) return <NotFound setRoute={setRoute}/>;
  const related = data.services.filter(x => x.slug !== slug && x.group === s.group).slice(0, 3);

  const heroImg = {
    "diagnostics-imaging": "media/clinic-imaging-suite.webp",
    "emergency-critical-care": "media/imaging-equipment-station.webp",
    "surgery": "media/surgery-theatre-procedure.webp",
    "vaccinations": "media/vaccination-syringe-prep.webp",
    "dermatology": "media/team-vet-portrait-noura.webp",
    "internal-medicine": "media/consult-cat-stethoscope-exam.webp",
    "dentistry": "media/consult-cat-stethoscope-exam.webp",
    "spay-neuter": "media/surgery-theatre-procedure.webp",
    "physiotherapy": "media/grooming-dog-on-table.webp",
    "gold-bead-implants": "media/grooming-dog-on-table.webp",
    "microchipping": "media/vaccination-syringe-prep.webp",
    "housecall": "media/team-vet-holding-cat.webp",
    "pet-taxi": "media/reception-front-desk.webp",
    "pet-relocation": "media/reception-front-desk.webp",
  }[s.slug] || "media/clinic-home-01.webp";

  return (
    <main className="page-enter">
      <PageHeader
        kicker={{ label: "All services", onBack: () => setRoute({ page: "services" }) }}
        eyebrow={s.group}
        title={s.name}
        lede={s.lede}
      />

      <section style={{paddingTop: 40}}>
        <div className="container svc-detail">
          <div className="svc-detail-main">
            <div className="photo svc-photo"><img src={heroImg} alt={s.name}/></div>
            <h2 className="h-sans" style={{fontSize: 26, marginTop: 40, color: "var(--oasis-deep)"}}>What it is</h2>
            <p style={{color: "var(--slate)", fontSize: 17, lineHeight: 1.6}}>{s.body}</p>

            <h2 className="h-sans" style={{fontSize: 22, marginTop: 36, color: "var(--oasis-deep)"}}>What's included</h2>
            <ul className="svc-includes">
              {s.includes.map(i => (
                <li key={i}><span className="svc-check"><Icon name="check" size={14} stroke={2.4}/></span> {i}</li>
              ))}
            </ul>

            <h2 className="h-sans" style={{fontSize: 22, marginTop: 36, color: "var(--oasis-deep)"}}>What to expect</h2>
            <ol className="svc-steps">
              <li>
                <span className="svc-step-n">1</span>
                <div>
                  <div className="svc-step-h">Book your visit</div>
                  <p>Pick a time online via Floof, call us, or send a request through the contact page.</p>
                </div>
              </li>
              <li>
                <span className="svc-step-n">2</span>
                <div>
                  <div className="svc-step-h">In-clinic exam</div>
                  <p>A vet from the relevant focus area sees you. If imaging or lab work is needed, it happens on-site.</p>
                </div>
              </li>
              <li>
                <span className="svc-step-n">3</span>
                <div>
                  <div className="svc-step-h">Treatment plan</div>
                  <p>You leave with a clear written plan — next steps, medication, follow-up. Questions answered before you go.</p>
                </div>
              </li>
            </ol>

            <h2 className="h-sans" style={{fontSize: 22, marginTop: 36, color: "var(--oasis-deep)"}}>Questions we get a lot</h2>
            <div className="faq">
              <Faq q="How long will the appointment take?" a="Most consultations run 20–30 minutes. Imaging-led or surgical workups take longer — we'll tell you when booking."/>
              <Faq q="Do I need to fast my pet?" a="Only for sedated procedures or imaging that needs anaesthesia. We'll flag this when you book."/>
              <Faq q="Is this covered by pet insurance?" a="Most UAE pet insurers reimburse veterinary care; we'll provide itemised invoices and any required forms."/>
            </div>
          </div>

          <aside className="svc-detail-side">
            <div className="card svc-side-card">
              <span className="eyebrow">Book this service</span>
              <h3 style={{fontSize: 20, margin: "8px 0 10px", color: "var(--oasis-deep)"}}>Ready to bring your pet in?</h3>
              <p style={{fontSize: 13.5, color: "var(--slate)", margin: "0 0 16px"}}>The fastest path is the online booking page — pick a slot, tell us about your pet, and we'll confirm.</p>
              <button className="btn btn-primary" style={{width: "100%"}} onClick={() => setRoute({ page: "contact" })}>
                <Icon name="calendar" size={16} stroke={2}/> Book an appointment
              </button>
              <a href={`tel:${data.clinic.phoneTel}`} className="btn btn-ghost" style={{width: "100%", marginTop: 8, justifyContent: "center"}}>
                <Icon name="phone" size={14} stroke={2}/> Call 04 884 8580
              </a>
              <div style={{marginTop: 18, paddingTop: 18, borderTop: "1px solid var(--line)"}}>
                <div className="svc-side-line"><Icon name="clock" size={14}/> Mon–Fri 09–21 · Sat–Sun 10–20</div>
                <div className="svc-side-line"><Icon name="alert" size={14} style={{color:"var(--alert)"}}/> 24/7 emergency 050 557 8834</div>
                <div className="svc-side-line"><Icon name="pin" size={14}/> Dubai Investments Park 1</div>
              </div>
            </div>

            {related.length > 0 && (
              <div className="svc-related">
                <span className="eyebrow">Related care</span>
                {related.map(r => (
                  <button key={r.slug} className="svc-related-row" onClick={() => setRoute({page:"service",slug:r.slug})}>
                    <span className="svc-ico" style={{width:36, height:36}}><Icon name={r.icon} size={16}/></span>
                    <div>
                      <div style={{fontWeight:600, fontSize:14, color:"var(--ink)"}}>{r.name}</div>
                      <div style={{fontSize:12.5, color:"var(--mute)"}}>{r.group}</div>
                    </div>
                    <Icon name="arrow-right" size={14} stroke={2} style={{marginLeft:"auto", color:"var(--oasis)"}}/>
                  </button>
                ))}
              </div>
            )}
          </aside>
        </div>
      </section>

      <style>{`
        .svc-detail { display: grid; grid-template-columns: 1fr 360px; gap: 56px; align-items: start; }
        .svc-photo { aspect-ratio: 16/9; }
        .svc-includes { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .svc-includes li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--ink); padding: 8px 0; }
        .svc-check { width: 22px; height: 22px; border-radius: 999px; background: rgba(90,171,63,.16); color: var(--leaf-deep); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
        .svc-steps { list-style: none; padding: 0; margin: 16px 0 0; counter-reset: step; }
        .svc-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
        .svc-step-n { font-family: var(--f-display); font-style: italic; font-size: 36px; color: var(--oasis); line-height: 1; }
        .svc-step-h { font-weight: 600; font-size: 15.5px; color: var(--ink); margin-bottom: 4px; }
        .svc-steps p { margin: 0; color: var(--slate); font-size: 14px; }
        .svc-side-card { padding: 24px; position: sticky; top: 100px; }
        .svc-side-line { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--slate); padding: 4px 0; }
        .svc-related { margin-top: 20px; }
        .svc-related-row {
          display: flex; align-items: center; gap: 12px;
          padding: 10px 12px;
          background: var(--paper);
          border: 1px solid var(--line);
          border-radius: var(--r-md);
          margin-top: 8px;
          width: 100%; text-align: left;
          transition: border-color .15s ease;
          cursor: pointer;
        }
        .svc-related-row:hover { border-color: var(--oasis); }
        @media (max-width: 980px) {
          .svc-detail { grid-template-columns: 1fr; }
          .svc-side-card { position: static; }
          .svc-includes { grid-template-columns: 1fr; }
        }
      `}</style>
    </main>
  );
}

function Faq({ q, a }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div className="faq-row" onClick={() => setOpen(o => !o)}>
      <div className="faq-q">
        <span>{q}</span>
        <span className="faq-icon">{open ? "−" : "+"}</span>
      </div>
      {open && <p className="faq-a">{a}</p>}
      <style>{`
        .faq-row { border-bottom: 1px solid var(--line-soft); padding: 14px 0; cursor: pointer; }
        .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 600; font-size: 15px; color: var(--ink); }
        .faq-icon { font-size: 22px; color: var(--oasis); font-family: var(--f-display); }
        .faq-a { margin: 8px 0 0; color: var(--slate); font-size: 14.5px; line-height: 1.55; }
      `}</style>
    </div>
  );
}

/* ========== DIAGNOSTICS ========== */
function DiagnosticsPage({ setRoute }) {
  const c = window.BOV_DATA.clinic;
  return (
    <main className="page-enter">
      <PageHeader
        eyebrow="Diagnostics & Imaging · The differentiator"
        title={<>An imaging suite <em>under one roof</em>.</>}
        lede="MRI, digital X-ray, ultrasound and an in-house laboratory — so we can move from suspicion to diagnosis in a single visit. We also accept referrals."
      />

      <section style={{paddingTop: 40}}>
        <div className="container diag-page">
          <div className="diag-page-photo photo">
            <img src="media/clinic-imaging-suite.webp" alt="MRI imaging suite"/>
            <div className="diag-page-badge"><Icon name="scan" size={16}/> MRI · Magnetic Resonance Imaging</div>
          </div>

          <div className="diag-page-stack">
            {[
              {i:"scan", t:"MRI", body:"For soft-tissue, neurological and orthopaedic work-ups that X-ray and ultrasound can't see — referred and in-house patients alike."},
              {i:"spark", t:"Digital X-ray", body:"Skeletal, thoracic and abdominal radiographs. Instant images, no film delay, lower-dose technique."},
              {i:"drop", t:"Ultrasound", body:"Abdominal and cardiac ultrasound — quick, non-invasive answers for the right cases."},
              {i:"tag", t:"In-house laboratory", body:"Bloods, biochemistry, urinalysis and cytology. Same-visit results for most panels."},
            ].map(b => (
              <div key={b.t} className="diag-page-row">
                <span className="svc-ico"><Icon name={b.i} size={20}/></span>
                <div>
                  <h3 style={{margin:0, fontSize:18, color:"var(--ink)", fontWeight:600}}>{b.t}</h3>
                  <p style={{margin:"6px 0 0", color:"var(--slate)", fontSize:14.5, lineHeight:1.5}}>{b.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{background:"var(--sky)"}}>
        <div className="container diag-ref-grid">
          <div>
            <span className="eyebrow">For referring clinics</span>
            <h2 className="h-display" style={{fontSize:"clamp(34px,4.4vw,52px)", margin:"10px 0 16px"}}>
              Refer MRI, cytology &amp; oncology cases.
            </h2>
            <p className="lede">
              Send your case to Dr Dieter (imaging &amp; neurology), Dr Mariana (imaging) or Dr Nour (cytology &amp; oncology). You'll receive a written report within working hours and continue managing your patient with full notes.
            </p>
            <div style={{display:"flex", gap:12, marginTop:24, flexWrap:"wrap"}}>
              <button className="btn btn-primary" onClick={() => setRoute({page:"contact"})}>
                <Icon name="mail" size={16}/> Send a referral
              </button>
              <a className="btn btn-ghost" href={`tel:${c.phoneTel}`}>
                <Icon name="phone" size={14}/> 04 884 8580
              </a>
            </div>
          </div>
          <div className="diag-ref-people">
            {["dieter-malleczek","mariana-barreto","nour-abou-fakher"].map(slug => {
              const v = window.BOV_DATA.vets.find(x=>x.slug===slug);
              return (
                <button key={slug} className="diag-ref-person" onClick={() => setRoute({page:"vet", slug})}>
                  <div className="diag-ref-avatar"><img src={v.photo} alt={v.name}/></div>
                  <div>
                    <div style={{fontWeight:600, color:"var(--oasis-deep)"}}>{v.name}</div>
                    <div style={{fontSize:13, color:"var(--slate)"}}>{v.focus.split("·")[0]}</div>
                  </div>
                  <Icon name="arrow-right" size={14} stroke={2} style={{marginLeft:"auto", color:"var(--oasis)"}}/>
                </button>
              );
            })}
          </div>
        </div>
      </section>

      <CTABand setRoute={setRoute}/>

      <style>{`
        .diag-page { display:grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: start; }
        .diag-page-photo { position: relative; aspect-ratio: 4/3; }
        .diag-page-badge {
          position: absolute; left: 16px; bottom: 16px;
          background: var(--paper);
          padding: 8px 12px;
          border-radius: var(--r-pill);
          display: inline-flex; align-items: center; gap: 8px;
          font-size: 13px; font-weight: 600; color: var(--oasis-deep);
          box-shadow: 0 8px 24px -10px rgba(15,26,36,.18);
        }
        .diag-page-stack { display: flex; flex-direction: column; gap: 14px; }
        .diag-page-row {
          display: grid; grid-template-columns: auto 1fr; gap: 18px;
          padding: 22px; background: var(--paper); border: 1px solid var(--line);
          border-radius: var(--r-lg);
        }
        .diag-ref-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
        .diag-ref-people { display: flex; flex-direction: column; gap: 10px; }
        .diag-ref-person {
          display: flex; align-items: center; gap: 14px; padding: 12px;
          background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
          text-align: left; cursor: pointer; transition: border-color .15s ease;
        }
        .diag-ref-person:hover { border-color: var(--oasis); }
        .diag-ref-avatar { width: 56px; height: 56px; border-radius: 999px; overflow: hidden; background: var(--sky); flex-shrink: 0; }
        .diag-ref-avatar img { width: 100%; height: 100%; object-fit: cover; }
        @media (max-width: 980px) {
          .diag-page, .diag-ref-grid { grid-template-columns: 1fr; }
        }
      `}</style>
    </main>
  );
}

/* ========== TEAM ========== */
function TeamPage({ setRoute }) {
  const data = window.BOV_DATA;
  return (
    <main className="page-enter">
      <PageHeader
        eyebrow={`Our vets · ${data.vets.length} specialists`}
        title={<>An international team you'll <em>actually</em> meet.</>}
        lede="Trained in Vienna, Wroclaw, Cairo, Brno, Beirut, Manila and Kyiv — practising in Dubai. Every credential below was verified from the clinic's published team pages."
      />

      <section style={{paddingTop:40}}>
        <div className="container">
          <div className="team-grid">
            {data.vets.map(v => (
              <button key={v.slug} className="vet-card card card-link" onClick={() => setRoute({page:"vet", slug: v.slug})}>
                <div className="vet-card-photo"><img src={v.photo} alt={v.name}/></div>
                <div className="vet-card-body">
                  <h3>{v.name}</h3>
                  <div className="vet-card-role">{v.role}</div>
                  <p>{v.focus}</p>
                  <div className="vet-card-tags">
                    {v.tags.map(t => <span key={t} className="tag">{t}</span>)}
                  </div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      <CTABand setRoute={setRoute}/>

      <style>{`
        .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .vet-card { padding: 0; overflow: hidden; text-align: left; cursor: pointer; }
        .vet-card-photo { aspect-ratio: 4/5; background: var(--sky); overflow: hidden; }
        .vet-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
        .vet-card:hover .vet-card-photo img { transform: scale(1.03); }
        .vet-card-body { padding: 22px; }
        .vet-card-body h3 { margin: 0; font-size: 19px; font-weight: 600; color: var(--ink); }
        .vet-card-role { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--oasis); margin: 6px 0 10px; }
        .vet-card-body p { margin: 0 0 14px; font-size: 14px; color: var(--slate); line-height: 1.5; }
        .vet-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
        @media (max-width: 880px) { .team-grid { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 520px) { .team-grid { grid-template-columns: 1fr; } }
      `}</style>
    </main>
  );
}

/* ========== VET DETAIL ========== */
function VetDetail({ slug, setRoute }) {
  const data = window.BOV_DATA;
  const v = data.vets.find(x => x.slug === slug);
  if (!v) return <NotFound setRoute={setRoute}/>;
  const others = data.vets.filter(x => x.slug !== slug).slice(0, 4);

  return (
    <main className="page-enter">
      <PageHeader
        kicker={{ label: "All vets", onBack: () => setRoute({page:"team"}) }}
        eyebrow={v.role}
        title={v.name}
        lede={v.focus}
      />

      <section style={{paddingTop:40}}>
        <div className="container vet-detail">
          <div className="vet-detail-photo photo">
            <img src={v.photo} alt={v.name}/>
          </div>
          <div className="vet-detail-body">
            <div className="vet-detail-tags">
              {v.tags.map(t => <span key={t} className="tag leaf">{t}</span>)}
            </div>
            <h2 className="h-sans" style={{fontSize: 22, marginTop: 24, color: "var(--oasis-deep)"}}>Background</h2>
            <p style={{color: "var(--slate)", fontSize: 16.5, lineHeight: 1.65}}>{v.bio}</p>

            <h2 className="h-sans" style={{fontSize: 22, marginTop: 28, color: "var(--oasis-deep)"}}>Practice notes</h2>
            <ul className="vet-detail-list">
              <li><Icon name="check" size={16} stroke={2.4} style={{color:"var(--leaf-deep)"}}/> Sees small-animal patients (dogs &amp; cats); some vets see exotics — call ahead to confirm</li>
              <li><Icon name="check" size={16} stroke={2.4} style={{color:"var(--leaf-deep)"}}/> Speaks English; clinic supports Arabic, Russian and Polish (vet-dependent)</li>
              <li><Icon name="check" size={16} stroke={2.4} style={{color:"var(--leaf-deep)"}}/> Available by appointment at the DIP 1 clinic</li>
            </ul>

            <div style={{display:"flex", gap:10, marginTop: 28, flexWrap:"wrap"}}>
              <button className="btn btn-primary" onClick={() => setRoute({page:"contact"})}>
                <Icon name="calendar" size={16} stroke={2}/> Book with {v.short}
              </button>
              <a className="btn btn-ghost" href={`tel:${data.clinic.phoneTel}`}>
                <Icon name="phone" size={14}/> Call clinic
              </a>
            </div>

            <p style={{marginTop: 32, fontSize: 12.5, color: "var(--mute)", borderTop: "1px solid var(--line-soft)", paddingTop: 16}}>
              Dubai Municipality / MOCCAE licence number will be published here once supplied by the clinic. No invented numbers.
            </p>
          </div>
        </div>
      </section>

      <section style={{background:"var(--paper-warm)"}}>
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow">More of the team</span>
              <h2 className="h-display" style={{fontSize: "clamp(28px,3.6vw,40px)", margin: "10px 0 6px"}}>You might also meet…</h2>
            </div>
            <button className="btn btn-ghost" onClick={() => setRoute({page:"team"})}>
              See all <Icon name="arrow-right" size={14} stroke={2}/>
            </button>
          </div>
          <div className="vet-related">
            {others.map(o => (
              <button key={o.slug} className="vet-related-card card card-link" onClick={() => setRoute({page:"vet", slug:o.slug})}>
                <div className="vet-related-photo"><img src={o.photo} alt={o.name}/></div>
                <div style={{padding:"14px 16px"}}>
                  <div style={{fontWeight:600, fontSize:14.5, color:"var(--ink)"}}>{o.name}</div>
                  <div style={{fontSize:12.5, color:"var(--slate)", marginTop:4}}>{o.role}</div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      <style>{`
        .vet-detail { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
        .vet-detail-photo { aspect-ratio: 4/5; position: sticky; top: 100px; }
        .vet-detail-tags { display: flex; flex-wrap: wrap; gap: 8px; }
        .vet-detail-list { list-style: none; padding: 0; margin: 14px 0 0; }
        .vet-detail-list li { display:flex; align-items:flex-start; gap:10px; padding:8px 0; color: var(--ink); font-size: 14.5px; }
        .vet-related { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
        .vet-related-card { padding: 0; overflow: hidden; text-align: left; cursor: pointer; }
        .vet-related-photo { aspect-ratio: 1/1; background: var(--sky); overflow: hidden; }
        .vet-related-photo img { width:100%; height:100%; object-fit: cover; }
        @media (max-width: 880px) {
          .vet-detail { grid-template-columns: 1fr; }
          .vet-detail-photo { position: static; max-width: 360px; }
          .vet-related { grid-template-columns: 1fr 1fr; }
        }
      `}</style>
    </main>
  );
}

/* ========== ABOUT ========== */
function AboutPage({ setRoute }) {
  const data = window.BOV_DATA;
  return (
    <main className="page-enter">
      <PageHeader
        eyebrow={`About · since ${data.clinic.since}`}
        title={<>A pillar of progressive, <em>caring</em> veterinary practice.</>}
        lede='"To provide personalised, exceptional veterinary care to keep your animals healthy, happy, and free from pain." — Blue Oasis Vet, est. 2008.'
      />

      <section style={{paddingTop: 40}}>
        <div className="container about-grid">
          <div>
            <span className="eyebrow">Our story</span>
            <h2 className="h-display" style={{fontSize:"clamp(28px,3.4vw,42px)", margin:"12px 0 18px"}}>
              16+ years in the same city — same standard.
            </h2>
            <p style={{color:"var(--slate)", fontSize:16.5, lineHeight:1.7}}>
              Blue Oasis Veterinary Clinic opened in Dubai Investments Park in 2008. We treat dogs, cats, rabbits and avian patients — and over time the clinic has grown around a simple idea: that pets are family members, and the care they get should reflect that.
            </p>
            <p style={{color:"var(--slate)", fontSize:16.5, lineHeight:1.7}}>
              Today the practice combines an in-house MRI and imaging suite, a dedicated operating theatre, in-patient ward and a {data.vets.length}-strong specialist team. Our motto is short: <em style={{color:"var(--oasis-deep)"}}>We care more.</em>
            </p>

            <div style={{marginTop: 28, padding: "20px 24px", background:"var(--sky)", borderRadius: "var(--r-lg)", borderLeft: "4px solid var(--leaf)"}}>
              <span className="eyebrow" style={{color: "var(--leaf-deep)"}}>What this looks like in practice</span>
              <ul style={{margin: "12px 0 0", paddingLeft: 18, color: "var(--slate)", fontSize: 14.5, lineHeight: 1.7}}>
                <li>Diagnoses worked through in a single visit when imaging and lab work line up</li>
                <li>Specialists you can ask for by name — not "the on-call vet"</li>
                <li>A 24/7 emergency line that picks up at 03:00 if your pet needs it</li>
                <li>Housecall and Pet Taxi options for patients who don't travel well</li>
              </ul>
            </div>
          </div>

          <div className="about-side">
            <div className="photo" style={{aspectRatio:"4/5", borderRadius:"var(--r-lg)"}}>
              <img src="media/team-vet-holding-cat-2.webp" alt="A vet holding a cat at the clinic"/>
            </div>
            <div className="about-stats">
              {data.stats.map(s => (
                <div key={s.l} className="about-stat">
                  <div className="h-display" style={{fontSize: 44, color: "var(--oasis)", lineHeight: 1}}>{s.v}</div>
                  <div style={{fontSize: 13, color: "var(--slate)", marginTop: 4}}>{s.l}</div>
                </div>
              ))}
              <div style={{gridColumn:"1/-1", fontSize: 12, color:"var(--mute)", paddingTop: 12, borderTop: "1px dashed var(--line)"}}>
                All figures reported by the clinic.
              </div>
            </div>
          </div>
        </div>
      </section>

      <section style={{background: "var(--paper-warm)"}}>
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow">The facility</span>
              <h2 className="h-display" style={{fontSize:"clamp(30px,4vw,48px)", margin:"10px 0 6px"}}>One building, full workup.</h2>
            </div>
          </div>
          <div className="about-gallery">
            <div className="ag-tall photo"><img src="media/surgery-theatre-procedure.webp" alt="Operating theatre"/></div>
            <div className="ag-wide photo"><img src="media/imaging-equipment-station.webp" alt="Imaging equipment station"/></div>
            <div className="ag-sq photo"><img src="media/reception-front-desk.webp" alt="Reception"/></div>
            <div className="ag-sq photo"><img src="media/team-vet-with-poodle.webp" alt="Vet with a poodle"/></div>
            <div className="ag-wide photo"><img src="media/clinic-imaging-suite.webp" alt="MRI suite"/></div>
          </div>
        </div>
      </section>

      <CTABand setRoute={setRoute}/>

      <style>{`
        .about-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: start; }
        .about-side { display: flex; flex-direction: column; gap: 18px; }
        .about-stats { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); }
        .about-stat { padding: 8px; }
        .about-gallery {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          grid-template-rows: 220px 220px;
          gap: 14px;
        }
        .ag-tall { grid-row: span 2; }
        .ag-wide { grid-column: span 2; }
        .ag-sq { grid-column: span 1; }
        .about-gallery .photo { border-radius: var(--r-lg); height: 100%; }
        @media (max-width: 980px) {
          .about-grid { grid-template-columns: 1fr; }
          .about-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
          .ag-tall, .ag-wide { grid-column: auto; grid-row: auto; aspect-ratio: 4/3; }
          .ag-sq { aspect-ratio: 1/1; }
        }
      `}</style>
    </main>
  );
}

/* ========== EMERGENCY ========== */
function EmergencyPage({ setRoute }) {
  const c = window.BOV_DATA.clinic;
  return (
    <main className="page-enter">
      <section className="em-hero">
        <div className="container">
          <span className="dot alert pulse" style={{color:"#fff", background:"#fff", width:12, height:12, marginRight:8}}/>
          <span style={{fontFamily:"var(--f-mono)", fontSize: 13, letterSpacing:".18em", textTransform: "uppercase", color: "#fff", opacity: .85}}>Emergency · 24/7 · 365 days</span>
          <h1 className="h-display em-h">If it can't wait, <em>neither do we.</em></h1>
          <p className="em-lede">Call us before you set off. The team will be ready when you arrive, with the right people, the right equipment and a clean theatre.</p>
          <div className="em-cta">
            <a className="btn em-call" href={`tel:${c.emergencyTel.replace(/\s+/g,'')}`}>
              <Icon name="phone" size={18} stroke={2}/>
              <div style={{textAlign:"left"}}>
                <div style={{fontSize:11, opacity:.7, letterSpacing:".14em", textTransform:"uppercase"}}>Call now</div>
                <div style={{fontSize:22, fontWeight:600}}>050 557 8834</div>
              </div>
            </a>
            <a className="btn em-call alt" href={`tel:${c.phoneTel}`}>
              <Icon name="phone" size={18} stroke={2}/>
              <div style={{textAlign:"left"}}>
                <div style={{fontSize:11, opacity:.7, letterSpacing:".14em", textTransform:"uppercase"}}>Main line</div>
                <div style={{fontSize:22, fontWeight:600}}>04 884 8580</div>
              </div>
            </a>
          </div>
        </div>
      </section>

      <section style={{paddingTop:40}}>
        <div className="container em-grid">
          <div>
            <span className="eyebrow">What to do</span>
            <h2 className="h-display" style={{fontSize:"clamp(28px,3.6vw,42px)", margin:"10px 0 18px"}}>Before you set off</h2>
            <ol className="em-steps">
              <li><span className="em-step-n">1</span><div><strong>Call us first.</strong> Even a 60-second call lets the team prepare the right room and equipment.</div></li>
              <li><span className="em-step-n">2</span><div><strong>Keep your pet calm and contained.</strong> A carrier for cats; a leash or blanket-wrap for dogs.</div></li>
              <li><span className="em-step-n">3</span><div><strong>If toxin exposure:</strong> bring the packaging or a photo of the substance.</div></li>
              <li><span className="em-step-n">4</span><div><strong>Drive safely.</strong> We're in Dubai Investments Park 1, next to Premier Inn — directions below.</div></li>
            </ol>
          </div>

          <div className="em-side">
            <h3 className="h-sans" style={{fontSize: 18, color:"var(--oasis-deep)", margin:"0 0 12px"}}>When to come in immediately</h3>
            <ul className="em-list">
              {["Difficulty breathing", "Trauma — hit by car, fall, bite", "Suspected poisoning or toxin", "Severe vomiting / diarrhoea > 12 h", "Inability to urinate (especially male cats)", "Seizure or collapse", "Bloated, distended abdomen (large dogs)", "Heatstroke"].map(s => (
                <li key={s}><Icon name="alert" size={14} stroke={2} style={{color:"var(--alert)"}}/> {s}</li>
              ))}
            </ul>
            <p style={{fontSize:12, color:"var(--mute)", marginTop: 16}}>
              This list is a guide only. If you're unsure — call. We'd rather take the call.
            </p>
          </div>
        </div>
      </section>

      <CTABand setRoute={setRoute}/>

      <style>{`
        .em-hero { background: linear-gradient(135deg, var(--alert) 0%, var(--alert-deep) 100%); padding: clamp(60px,8vw,120px) 0; color: #fff; }
        .em-h { font-size: clamp(48px,6.6vw,92px); color: #fff; margin: 18px 0 16px; line-height: .98; }
        .em-h em { color: #ffd6d2; }
        .em-lede { color: rgba(255,255,255,.88); font-size: 18px; max-width: 620px; }
        .em-cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
        .em-call { background:#fff; color: var(--alert-deep); padding: 14px 22px; }
        .em-call.alt { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.3); }
        .em-call:hover { background: #fff; color: var(--alert-deep); }
        .em-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; }
        .em-steps { list-style: none; padding: 0; margin: 0; }
        .em-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); align-items: flex-start; color: var(--ink); font-size: 15.5px; line-height: 1.55; }
        .em-step-n { font-family: var(--f-display); font-style: italic; font-size: 32px; color: var(--alert); line-height: 1; }
        .em-side { background: rgba(201,54,45,.06); border: 1px solid rgba(201,54,45,.18); padding: 28px; border-radius: var(--r-lg); }
        .em-list { list-style: none; padding: 0; margin: 0; }
        .em-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: var(--ink); font-size: 14.5px; border-bottom: 1px dashed rgba(201,54,45,.12); }
        @media (max-width: 880px) { .em-grid { grid-template-columns: 1fr; } }
      `}</style>
    </main>
  );
}

/* ========== CONTACT / BOOK ========== */
function ContactPage({ setRoute }) {
  const c = window.BOV_DATA.clinic;
  const [step, setStep] = React.useState(1);
  const [form, setForm] = React.useState({
    ownerName: "", phone: "", email: "",
    petName: "", species: "Dog", service: "General consultation",
    date: "", time: "", notes: "",
  });

  const update = (k, v) => setForm(f => ({...f, [k]: v}));

  return (
    <main className="page-enter">
      <PageHeader
        eyebrow="Contact &amp; Book"
        title={<>Let's get your pet <em>seen</em>.</>}
        lede="Pick a slot below, send us a message, or call. We answer the phones."
      />

      <section style={{paddingTop:40}}>
        <div className="container contact-grid">
          {/* Form */}
          <div className="card contact-form">
            <div className="form-steps">
              {[1,2,3].map(n => (
                <div key={n} className={"form-step " + (step >= n ? "active" : "")}>
                  <span className="form-step-n">{step > n ? "✓" : n}</span>
                  <span>{n === 1 ? "Your details" : n === 2 ? "About your pet" : "Choose a time"}</span>
                </div>
              ))}
            </div>

            {step === 1 && (
              <div className="form-step-body">
                <h3 className="h-sans" style={{fontSize: 22, color: "var(--oasis-deep)", margin: 0}}>Your details</h3>
                <p style={{color:"var(--slate)", fontSize: 14}}>So we can confirm your booking.</p>
                <Field label="Your name" value={form.ownerName} onChange={v => update("ownerName", v)} placeholder="e.g. Sara Al Marri"/>
                <div className="form-row">
                  <Field label="Phone" value={form.phone} onChange={v => update("phone", v)} placeholder="+971 ..."/>
                  <Field label="Email" value={form.email} onChange={v => update("email", v)} placeholder="you@email.com" type="email"/>
                </div>
                <div className="form-actions">
                  <button className="btn btn-primary" onClick={() => setStep(2)} disabled={!form.ownerName || !form.phone}>
                    Continue <Icon name="arrow-right" size={14} stroke={2}/>
                  </button>
                </div>
              </div>
            )}

            {step === 2 && (
              <div className="form-step-body">
                <h3 className="h-sans" style={{fontSize: 22, color: "var(--oasis-deep)", margin: 0}}>About your pet</h3>
                <p style={{color:"var(--slate)", fontSize: 14}}>What's their name, and what brings them in?</p>
                <div className="form-row">
                  <Field label="Pet name" value={form.petName} onChange={v => update("petName", v)} placeholder="e.g. Mochi"/>
                  <div className="field">
                    <label>Species</label>
                    <div className="pill-group">
                      {["Dog","Cat","Rabbit","Avian","Other"].map(s => (
                        <button key={s} className={"pill " + (form.species === s ? "active" : "")} onClick={() => update("species", s)}>{s}</button>
                      ))}
                    </div>
                  </div>
                </div>
                <div className="field">
                  <label>Service</label>
                  <select value={form.service} onChange={e => update("service", e.target.value)}>
                    <option>General consultation</option>
                    {window.BOV_DATA.services.map(s => (
                      <option key={s.slug}>{s.name}</option>
                    ))}
                  </select>
                </div>
                <Field label="Notes (optional)" value={form.notes} onChange={v => update("notes", v)} placeholder="Anything we should know — symptoms, allergies, last visit…" textarea/>
                <div className="form-actions">
                  <button className="btn btn-ghost" onClick={() => setStep(1)}>Back</button>
                  <button className="btn btn-primary" onClick={() => setStep(3)} disabled={!form.petName}>
                    Continue <Icon name="arrow-right" size={14} stroke={2}/>
                  </button>
                </div>
              </div>
            )}

            {step === 3 && (
              <div className="form-step-body">
                <h3 className="h-sans" style={{fontSize: 22, color: "var(--oasis-deep)", margin: 0}}>Pick a time</h3>
                <p style={{color:"var(--slate)", fontSize: 14}}>We'll confirm by phone or email within a few hours.</p>
                <div className="form-row">
                  <Field label="Preferred date" type="date" value={form.date} onChange={v => update("date", v)}/>
                  <div className="field">
                    <label>Preferred time</label>
                    <div className="pill-group wrap">
                      {["09:00","11:00","13:00","15:00","17:00","19:00"].map(t => (
                        <button key={t} className={"pill " + (form.time === t ? "active" : "")} onClick={() => update("time", t)}>{t}</button>
                      ))}
                    </div>
                  </div>
                </div>

                <div className="form-recap">
                  <div className="eyebrow">You're booking</div>
                  <div className="form-recap-grid">
                    <div><span>Service</span><strong>{form.service}</strong></div>
                    <div><span>Pet</span><strong>{form.petName || "—"} <span style={{color:"var(--mute)"}}>· {form.species}</span></strong></div>
                    <div><span>When</span><strong>{form.date || "—"} {form.time && "at " + form.time}</strong></div>
                    <div><span>For</span><strong>{form.ownerName} · {form.phone}</strong></div>
                  </div>
                </div>

                <div className="form-actions">
                  <button className="btn btn-ghost" onClick={() => setStep(2)}>Back</button>
                  <button className="btn btn-primary" onClick={() => setStep(4)} disabled={!form.date || !form.time}>
                    Send booking request <Icon name="check" size={14} stroke={2}/>
                  </button>
                </div>
              </div>
            )}

            {step === 4 && (
              <div className="form-step-body form-done">
                <div className="form-done-ico"><Icon name="check" size={28} stroke={2.4}/></div>
                <h3 className="h-display" style={{fontSize: 40, color: "var(--oasis-deep)", margin: 0}}>Booking request sent.</h3>
                <p style={{color: "var(--slate)", fontSize: 16, maxWidth: 420, margin: "10px auto 0"}}>
                  We'll call <strong>{form.phone}</strong> to confirm {form.petName ? form.petName + "'s" : "your pet's"} appointment on <strong>{form.date}</strong> at <strong>{form.time}</strong>.
                </p>
                <p style={{color:"var(--mute)", fontSize: 13, marginTop: 18}}>This is a working prototype — in production the form would post to the clinic's booking system. For real bookings today: <a style={{color: "var(--oasis)"}} href={c.booking} target="_blank" rel="noreferrer">book.floof.ae/blue-oasis-vet</a></p>
                <button className="btn btn-ghost" style={{marginTop: 24}} onClick={() => { setStep(1); setForm({ownerName:"", phone:"", email:"", petName:"", species:"Dog", service:"General consultation", date:"", time:"", notes:""}); }}>Book another</button>
              </div>
            )}
          </div>

          {/* Side: location / hours / call */}
          <div className="contact-side">
            <div className="card map-card">
              <div className="map-stripe striped">
                <div className="map-pin"><Icon name="pin" size={20}/></div>
                <div className="map-label">
                  <div style={{fontFamily:"var(--f-mono)", fontSize: 11, letterSpacing:".14em", textTransform:"uppercase", color:"var(--mute)"}}>Map preview</div>
                  <div style={{fontWeight:600, color:"var(--oasis-deep)"}}>DIP 1 · Green Community</div>
                </div>
                <a className="map-link" href={`https://maps.google.com/?q=${encodeURIComponent(c.address+", "+c.address2)}`} target="_blank" rel="noreferrer">
                  Open in Maps <Icon name="arrow-up-right" size={14} stroke={2}/>
                </a>
              </div>

              <div style={{padding: 24}}>
                <span className="eyebrow">Visit us</span>
                <h3 style={{margin:"8px 0 4px", fontSize: 18, color:"var(--ink)"}}>Blue Oasis Veterinary Clinic</h3>
                <p style={{margin:0, color:"var(--slate)", fontSize: 14, lineHeight: 1.5}}>{c.address}<br/>{c.address2}</p>
                <p style={{margin:"8px 0 0", color:"var(--mute)", fontSize: 12.5, fontFamily: "var(--f-mono)"}}>Plus code · {c.plus}</p>
              </div>

              <div style={{padding:"0 24px 24px"}}>
                <div className="contact-list">
                  <a href={`tel:${c.phoneTel}`} className="contact-line">
                    <span className="contact-ico"><Icon name="phone" size={14}/></span>
                    <div><span>Call</span><strong>{c.phone}</strong></div>
                  </a>
                  <a href={`tel:${c.emergencyTel.replace(/\s+/g,'')}`} className="contact-line alert">
                    <span className="contact-ico" style={{background:"rgba(201,54,45,.12)", color:"var(--alert)"}}><Icon name="alert" size={14}/></span>
                    <div><span>Emergency 24/7</span><strong>050 557 8834</strong></div>
                  </a>
                  <a href={`mailto:${c.email}`} className="contact-line">
                    <span className="contact-ico"><Icon name="mail" size={14}/></span>
                    <div><span>Email</span><strong>{c.email}</strong></div>
                  </a>
                  <a href={c.booking} target="_blank" rel="noreferrer" className="contact-line">
                    <span className="contact-ico"><Icon name="calendar" size={14}/></span>
                    <div><span>Online booking</span><strong>book.floof.ae/blue-oasis-vet</strong></div>
                  </a>
                </div>
              </div>
            </div>

            <div className="card" style={{padding: 24}}>
              <span className="eyebrow">Hours</span>
              <div style={{marginTop: 10}}>
                {c.hours.map(h => (
                  <div key={h.d} style={{display:"flex", justifyContent:"space-between", padding:"6px 0", borderBottom: "1px dashed var(--line)", fontSize: 14}}>
                    <span>{h.d}</span><strong>{h.t}</strong>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <style>{`
        .contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: start; }
        .contact-form { padding: 32px; }
        .form-steps { display: flex; gap: 6px; margin-bottom: 28px; }
        .form-step { display: flex; align-items: center; gap: 8px; flex: 1; padding: 10px 12px; border-radius: var(--r-pill); background: var(--paper-warm); border: 1px solid var(--line); font-size: 13px; color: var(--mute); }
        .form-step.active { background: var(--sky); border-color: var(--oasis); color: var(--oasis-deep); }
        .form-step-n { width: 24px; height: 24px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
        .form-step.active .form-step-n { background: var(--oasis); color: #fff; border-color: var(--oasis); }
        .form-step-body { display: flex; flex-direction: column; gap: 16px; }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .field { display: flex; flex-direction: column; gap: 6px; }
        .field label { font-size: 12.5px; font-weight: 500; color: var(--slate); letter-spacing: .02em; }
        .field input, .field textarea, .field select {
          padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line);
          background: var(--paper-warm); font-family: inherit; font-size: 14.5px; color: var(--ink);
          transition: border-color .15s ease, background .15s ease;
        }
        .field input:focus, .field textarea:focus, .field select:focus {
          outline: none; border-color: var(--oasis); background: var(--paper);
        }
        .field textarea { resize: vertical; min-height: 80px; }
        .pill-group { display: flex; gap: 6px; }
        .pill-group.wrap { flex-wrap: wrap; }
        .pill { padding: 9px 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--paper); font-size: 13px; color: var(--slate); cursor: pointer; transition: all .15s ease; }
        .pill:hover { border-color: var(--oasis); }
        .pill.active { background: var(--oasis); color: #fff; border-color: var(--oasis); }
        .form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
        .form-actions .btn:disabled { opacity: .4; pointer-events: none; }
        .form-recap { background: var(--sky); padding: 18px 20px; border-radius: var(--r-md); }
        .form-recap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-top: 8px; }
        .form-recap-grid > div { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
        .form-recap-grid span { color: var(--mute); font-size: 11.5px; font-family: var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
        .form-done { text-align: center; align-items: center; padding: 24px 0; }
        .form-done-ico { width: 64px; height: 64px; border-radius: 999px; background: rgba(90,171,63,.16); color: var(--leaf-deep); display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 16px; }

        .map-card { overflow: hidden; padding: 0; }
        .map-stripe { position: relative; aspect-ratio: 16/8; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
        .map-pin { width: 44px; height: 44px; border-radius: 999px; background: var(--oasis); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px -8px rgba(31,127,184,.6); margin-top: 8px; }
        .map-label { position: absolute; bottom: 16px; left: 16px; background: var(--paper); padding: 10px 14px; border-radius: var(--r-md); }
        .map-link { position: absolute; top: 16px; right: 16px; background: var(--paper); padding: 8px 12px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; color: var(--oasis); display: inline-flex; gap: 6px; align-items: center; }
        .contact-list { display: flex; flex-direction: column; gap: 4px; }
        .contact-line { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); }
        .contact-line:hover { border-color: var(--oasis); }
        .contact-line span { display: block; font-size: 11.5px; color: var(--mute); font-family: var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
        .contact-line strong { display: block; font-size: 14px; color: var(--ink); margin-top: 2px; }
        .contact-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--sky); color: var(--oasis); display: inline-flex; align-items: center; justify-content: center; }
        @media (max-width: 980px) { .contact-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } }
      `}</style>
    </main>
  );
}

function Field({ label, value, onChange, placeholder, type="text", textarea }) {
  return (
    <div className="field">
      <label>{label}</label>
      {textarea
        ? <textarea value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder} rows={3}/>
        : <input type={type} value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder}/>}
    </div>
  );
}

/* ========== CTA BAND + NOT FOUND ========== */
function CTABand({ setRoute }) {
  const c = window.BOV_DATA.clinic;
  return (
    <section style={{background:"var(--paper)", borderTop:"1px solid var(--line)"}}>
      <div className="container" style={{display:"grid", gridTemplateColumns:"1.4fr 1fr", gap: 40, alignItems:"center"}}>
        <div>
          <span className="eyebrow">Ready when you are</span>
          <h2 className="h-display" style={{fontSize:"clamp(30px,4vw,48px)", margin:"10px 0 6px"}}>Book in. Or just call.</h2>
          <p style={{color:"var(--slate)", fontSize:16, maxWidth: 520}}>Online booking takes about a minute. If you'd rather talk to a person, we pick up the phone.</p>
        </div>
        <div style={{display:"flex", gap:10, justifyContent:"flex-end", flexWrap:"wrap"}}>
          <button className="btn btn-primary" onClick={() => setRoute({page:"contact"})}><Icon name="calendar" size={16} stroke={2}/> Book an appointment</button>
          <a className="btn btn-ghost" href={`tel:${c.phoneTel}`}><Icon name="phone" size={14}/> 04 884 8580</a>
        </div>
      </div>
      <style>{`
        @media (max-width: 720px) {
          section > .container { grid-template-columns: 1fr !important; }
          section > .container > div:last-child { justify-content: flex-start !important; }
        }
      `}</style>
    </section>
  );
}

function NotFound({ setRoute }) {
  return (
    <main className="page-enter container" style={{padding: "120px var(--pad)", textAlign: "center"}}>
      <h1 className="h-display" style={{fontSize: 80, color: "var(--oasis-deep)"}}>Page not found</h1>
      <p style={{color: "var(--slate)", fontSize: 17}}>The page you're looking for doesn't exist. Let's get you back on track.</p>
      <div style={{marginTop: 24, display:"flex", justifyContent:"center", gap: 10}}>
        <button className="btn btn-primary" onClick={() => setRoute({page:"home"})}>Back to home</button>
        <button className="btn btn-ghost" onClick={() => setRoute({page:"services"})}>Browse services</button>
      </div>
    </main>
  );
}

window.ServicesPage = ServicesPage;
window.ServiceDetail = ServiceDetail;
window.DiagnosticsPage = DiagnosticsPage;
window.TeamPage = TeamPage;
window.VetDetail = VetDetail;
window.AboutPage = AboutPage;
window.EmergencyPage = EmergencyPage;
window.ContactPage = ContactPage;
window.CTABand = CTABand;
window.NotFound = NotFound;