// Petzone — page components
const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP } = React;

// ============== HOME ==============
const HomePage = ({ go, openBook, heroVariant, density }) => {
  const D = window.PZ_DATA;
  const heroImg = { care: D.heroImages.care, interior: D.heroImages.interior, safe: D.heroImages.safe, cat: D.heroImages.cat }[heroVariant] || D.heroImages.care;

  return (
    <div>
      {/* ============ HERO ============ */}
      <section className="relative overflow-hidden bg-[var(--cream)]">
        <div className="mx-auto max-w-[1240px] px-5 lg:px-8 pt-12 lg:pt-16 pb-16 lg:pb-24 grid lg:grid-cols-12 gap-10 items-center">
          <div className="lg:col-span-6">
            <Eyebrow>Family vet on Sheikh Zayed Road · Since 2009</Eyebrow>
            <h1 className="mt-5 font-display text-[44px] md:text-[64px] lg:text-[72px] leading-[0.98] tracking-[-0.02em] text-[var(--ink)]" style={{ textWrap: "balance" }}>
              Where pets <em className="italic" style={{ fontFamily: "var(--font-display)", color: "var(--teal-deep)" }}>come first</em> — and so do their families.
            </h1>
            <p className="mt-6 text-[17px] leading-relaxed text-[var(--slate)] max-w-xl" style={{ textWrap: "pretty" }}>
              A family-owned small-animal clinic on Sheikh Zayed Road. In-house lab, X-ray, ultrasound and pharmacy under one roof. The same caring vets you've been bringing your pets to for fifteen years.
            </p>
            <div className="mt-8 flex flex-wrap gap-3">
              <button onClick={openBook} className="pz-btn-primary text-[15px] !py-3 !px-5">Book an appointment <Icon name="arrow" size={16} stroke={2}/></button>
              <a href={`tel:${D.clinic.phonePrimary.replace(/\s/g,"")}`} className="pz-btn-ghost text-[15px] !py-3 !px-5"><Icon name="phone" size={15} stroke={2}/> {D.clinic.phonePrimary}</a>
            </div>
            <div className="mt-8 flex flex-wrap items-center gap-x-6 gap-y-2 text-[13px] text-[var(--slate)]">
              <span className="flex items-center gap-1.5"><Icon name="check" size={14} stroke={2.4} className="text-[var(--teal)]"/> Same-day appointments often available</span>
              <span className="flex items-center gap-1.5"><Icon name="check" size={14} stroke={2.4} className="text-[var(--teal)]"/> Dogs · Cats · Birds · Small mammals</span>
            </div>
          </div>
          <div className="lg:col-span-6 relative">
            <div className="relative aspect-[5/6] rounded-[28px] overflow-hidden shadow-[0_30px_80px_-30px_rgba(20,39,44,0.35)]">
              <img src={heroImg} alt="Vet care at Petzone" className="w-full h-full object-cover"/>
              <div className="absolute inset-0" style={{ background: "linear-gradient(180deg, transparent 55%, rgba(20,39,44,0.55))" }}/>
            </div>
            {/* floating tile */}
            <div className="absolute -bottom-6 -left-4 lg:-left-10 bg-[var(--paper)] rounded-2xl shadow-[0_20px_50px_-20px_rgba(20,39,44,0.25)] p-4 flex items-center gap-3 max-w-[320px]">
              <div className="w-11 h-11 rounded-full flex items-center justify-center shrink-0" style={{ background: "var(--teal-soft)", color: "var(--teal-deep)" }}><Icon name="heart" size={20} /></div>
              <div>
                <div className="text-[13px] font-medium text-[var(--ink)] leading-tight">Dr Natascia is in today</div>
                <div className="text-[12px] text-[var(--slate)] mt-0.5">Most-asked-for family vet</div>
              </div>
            </div>
            <div className="absolute -top-3 -right-3 lg:-right-6 bg-[var(--paper)] rounded-2xl shadow-[0_20px_50px_-20px_rgba(20,39,44,0.25)] py-3 px-4">
              <div className="text-[28px] font-display font-semibold leading-none text-[var(--ink)]">15<span className="text-[var(--teal)]">+</span></div>
              <div className="text-[11px] text-[var(--slate)] uppercase tracking-wider font-mono mt-1">years caring</div>
            </div>
          </div>
        </div>

        {/* decorative paw watermark */}
        <div className="absolute -bottom-10 -left-10 opacity-[0.04] pointer-events-none">
          <Icon name="paw" size={280} stroke={1}/>
        </div>
      </section>

      {/* ============ TRUST STRIP ============ */}
      <section className="border-y border-[var(--line)] bg-[var(--paper)]">
        <div className="mx-auto max-w-[1240px] px-5 lg:px-8 py-6">
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-x-6 gap-y-4">
            {D.trust.map(t => (
              <div key={t.k} className="flex flex-col">
                <div className="text-[13.5px] font-medium text-[var(--ink)]">{t.k}</div>
                <div className="text-[12px] text-[var(--slate)] mt-0.5 leading-snug">{t.v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============ SERVICES GRID ============ */}
      <section className="mx-auto max-w-[1240px] px-5 lg:px-8 py-20 md:py-28">
        <div className="flex flex-col lg:flex-row lg:items-end justify-between gap-6 mb-12">
          <SectionHead eyebrow="What we do" title="Companion-animal care, all under one roof." lede="One-stop care means fewer trips and faster answers — diagnostics, treatment and dispensing happen in the same building, on the same visit." />
          <button onClick={() => go("services")} className="pz-link self-start lg:self-end">All services <Icon name="arrow" size={14} stroke={2}/></button>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-3">
          {D.services.map((s, i) => (
            <button key={s.slug} onClick={() => go(`service/${s.slug}`)} className="group text-left bg-[var(--paper)] border border-[var(--line)] rounded-2xl p-5 hover:border-[var(--teal)] hover:shadow-[0_20px_40px_-20px_rgba(20,39,44,0.18)] transition-all">
              <div className="flex items-start justify-between mb-5">
                <div className="w-11 h-11 rounded-xl flex items-center justify-center" style={{ background: "var(--teal-soft)", color: "var(--teal-deep)" }}><Icon name={s.icon} size={20}/></div>
                <span className="font-mono text-[10.5px] text-[var(--slate)] tracking-wider">0{i+1}</span>
              </div>
              <h3 className="font-display text-[19px] font-semibold text-[var(--ink)] leading-tight">{s.name}</h3>
              <p className="text-[13.5px] text-[var(--slate)] mt-2 leading-relaxed line-clamp-2">{s.short}</p>
              <div className="mt-4 text-[13px] text-[var(--teal-deep)] flex items-center gap-1.5 opacity-0 group-hover:opacity-100 transition">
                Learn more <Icon name="arrow" size={13} stroke={2}/>
              </div>
            </button>
          ))}
        </div>
      </section>

      {/* ============ WHY PETZONE — split layout ============ */}
      <section className="bg-[var(--cream)] py-20 md:py-28">
        <div className="mx-auto max-w-[1240px] px-5 lg:px-8 grid lg:grid-cols-12 gap-12 items-center">
          <div className="lg:col-span-5">
            <SectionHead eyebrow="Why Petzone" title="The small things you can feel, the big things you can prove." lede="Trust isn't a tagline. It's fifteen years of the same address, the same families, the same quiet way of explaining what's going on." />
          </div>
          <div className="lg:col-span-7 grid sm:grid-cols-2 gap-3">
            {[
              { t: "One-stop diagnostics", b: "Blood, urine, X-ray and ultrasound run on-site — we rarely need to send anything out.", icon: "flask" },
              { t: "Caring named vets", b: "You see the same faces year after year. Most of our families have a vet they ask for by name.", icon: "heart" },
              { t: "Pharmacy on premises", b: "Most prescriptions filled before you leave. No second errand.", icon: "pill" },
              { t: "Family-vet voice", b: "We sit down. We explain. We never rush you out of a consultation room.", icon: "stethoscope" },
            ].map(card => (
              <div key={card.t} className="bg-[var(--paper)] rounded-2xl p-5 border border-[var(--line)]">
                <div className="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style={{ background: "var(--teal-soft)", color: "var(--teal-deep)" }}><Icon name={card.icon} size={18}/></div>
                <div className="font-display text-[17px] font-semibold text-[var(--ink)] leading-tight">{card.t}</div>
                <p className="text-[13.5px] text-[var(--slate)] mt-2 leading-relaxed">{card.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============ MEET THE VETS TEASER ============ */}
      <section className="mx-auto max-w-[1240px] px-5 lg:px-8 py-20 md:py-28">
        <div className="flex flex-col lg:flex-row lg:items-end justify-between gap-6 mb-10">
          <SectionHead eyebrow="The team" title="Vets your pet remembers." lede="Verified profiles only — credentials and licences published as the clinic confirms them." />
          <button onClick={() => go("vets")} className="pz-link self-start lg:self-end">Meet the full team <Icon name="arrow" size={14} stroke={2}/></button>
        </div>
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
          {D.vets.filter(v => !v.draft).map(v => (
            <button key={v.slug} onClick={() => go(`vet/${v.slug}`)} className="group text-left">
              <div className="relative aspect-[4/5] rounded-2xl overflow-hidden bg-[var(--teal-soft)]">
                <img src={v.photo} alt={v.name} className="w-full h-full object-cover transition group-hover:scale-[1.02]"/>
              </div>
              <div className="mt-4">
                <div className="font-display text-[20px] font-semibold text-[var(--ink)] leading-tight">{v.name}</div>
                <div className="text-[13px] text-[var(--slate)] mt-1">{v.role}</div>
                <div className="mt-3 flex flex-wrap gap-1.5">
                  {v.tags.slice(0,3).map(tg => <span key={tg} className="text-[11.5px] px-2 py-0.5 rounded-full bg-[var(--cream)] text-[var(--slate)] font-mono uppercase tracking-wider">{tg}</span>)}
                </div>
              </div>
            </button>
          ))}
          <button onClick={() => go("vets")} className="hidden lg:flex items-center justify-center aspect-[4/5] rounded-2xl border-2 border-dashed border-[var(--line)] hover:border-[var(--teal)] hover:bg-[var(--teal-soft)]/40 transition group">
            <div className="text-center">
              <div className="w-14 h-14 mx-auto rounded-full flex items-center justify-center mb-3 transition group-hover:scale-110" style={{ background: "var(--teal-soft)", color: "var(--teal-deep)" }}><Icon name="arrow" size={24} stroke={2}/></div>
              <div className="font-display text-[16px] text-[var(--ink)] font-medium">See the full team</div>
              <div className="text-[12px] text-[var(--slate)] mt-1">Plus profiles pending confirmation</div>
            </div>
          </button>
        </div>
      </section>

      {/* ============ STORY STRIP — quote + image ============ */}
      <section className="mx-auto max-w-[1240px] px-5 lg:px-8 mb-20 md:mb-28">
        <div className="bg-[var(--teal-deep)] text-white rounded-[28px] overflow-hidden grid lg:grid-cols-12 relative">
          <div className="lg:col-span-7 p-10 lg:p-16 relative z-10">
            <Icon name="sparkles" size={28} stroke={1.6} className="opacity-70"/>
            <p className="mt-6 font-display text-[28px] md:text-[36px] leading-[1.15] tracking-[-0.01em]" style={{ textWrap: "balance" }}>
              "A client-centered facility that goes above and beyond to provide friendly customer service and uphold first-class veterinary standards."
            </p>
            <div className="mt-6 font-mono text-[11.5px] uppercase tracking-[0.2em] opacity-75">— From the clinic's own description</div>
            <div className="mt-10 flex flex-wrap gap-3">
              <button onClick={openBook} className="pz-btn-coral">Book a visit</button>
              <button onClick={() => go("about")} className="pz-btn-ghost-light">Our story</button>
            </div>
          </div>
          <div className="lg:col-span-5 relative min-h-[280px]">
            <img src={D.heroImages.safe} alt="" className="absolute inset-0 w-full h-full object-cover"/>
            <div className="absolute inset-0 lg:bg-gradient-to-r lg:from-[var(--teal-deep)] lg:to-transparent"/>
          </div>
        </div>
      </section>

      {/* ============ GALLERY ============ */}
      <section className="mx-auto max-w-[1240px] px-5 lg:px-8 mb-20 md:mb-28">
        <SectionHead eyebrow="Inside the clinic" title="A quiet, bright building on Sheikh Zayed Road." />
        <div className="mt-10 grid grid-cols-2 md:grid-cols-4 gap-3">
          {D.gallery.slice(0,8).map((src, i) => (
            <div key={src} className={`relative rounded-2xl overflow-hidden bg-[var(--cream)] ${i === 0 || i === 5 ? "row-span-2 aspect-[3/5]" : "aspect-[4/5]"}`}>
              <img src={src} alt="" className="w-full h-full object-cover"/>
            </div>
          ))}
        </div>
      </section>

      {/* ============ CONTACT / MAP ============ */}
      <ContactBlock go={go} openBook={openBook} compact />
    </div>
  );
};

// ============== SERVICES HUB ==============
const ServicesPage = ({ go, openBook }) => {
  const D = window.PZ_DATA;
  return (
    <div>
      <section className="bg-[var(--cream)] border-b border-[var(--line)]">
        <div className="mx-auto max-w-[1240px] px-5 lg:px-8 py-16 md:py-20">
          <Eyebrow>Services</Eyebrow>
          <h1 className="mt-4 font-display text-[44px] md:text-[60px] leading-[1] tracking-[-0.02em] text-[var(--ink)] max-w-3xl" style={{ textWrap: "balance" }}>
            Everything your pet needs, in one Sheikh Zayed Road building.
          </h1>
          <p className="mt-5 text-[16px] text-[var(--slate)] max-w-2xl leading-relaxed">
            Eight verified services — consultation, vaccination, surgery, dental, in-house lab, imaging, pharmacy and prescription diets. We don't publish a price list because no two pets are the same; your vet will walk you through cost before anything begins.
          </p>
        </div>
      </section>

      <section className="mx-auto max-w-[1240px] px-5 lg:px-8 py-16 md:py-20">
        <div className="grid lg:grid-cols-2 gap-4">
          {D.services.map((s, i) => (
            <button key={s.slug} onClick={() => go(`service/${s.slug}`)} className="group flex gap-5 text-left bg-[var(--paper)] border border-[var(--line)] rounded-2xl p-5 hover:border-[var(--teal)] hover:shadow-[0_20px_40px_-20px_rgba(20,39,44,0.18)] transition-all">
              <div className="w-32 h-32 rounded-xl overflow-hidden shrink-0 bg-[var(--cream)]">
                <img src={s.photo} alt="" className="w-full h-full object-cover"/>
              </div>
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2 mb-2">
                  <div className="w-8 h-8 rounded-lg flex items-center justify-center" style={{ background: "var(--teal-soft)", color: "var(--teal-deep)" }}><Icon name={s.icon} size={16}/></div>
                  <span className="font-mono text-[10.5px] text-[var(--slate)] tracking-wider">0{i+1}</span>
                  {s.tag && <span className="ml-auto text-[10.5px] px-2 py-0.5 rounded-full font-mono uppercase tracking-wider" style={{ background: "var(--coral)", color: "white" }}>{s.tag}</span>}
                </div>
                <h3 className="font-display text-[20px] font-semibold text-[var(--ink)] leading-tight">{s.name}</h3>
                <p className="text-[13.5px] text-[var(--slate)] mt-2 leading-relaxed line-clamp-2">{s.short}</p>
                <div className="mt-3 text-[12.5px] text-[var(--teal-deep)] flex items-center gap-1.5 font-medium">
                  Learn more <Icon name="arrow" size={13} stroke={2} className="transition group-hover:translate-x-0.5"/>
                </div>
              </div>
            </button>
          ))}
        </div>

        {/* Draft note */}
        <div className="mt-10 p-5 rounded-2xl bg-[var(--cream)] border border-[var(--line)] text-[13px] text-[var(--slate)] leading-relaxed">
          <div className="font-medium text-[var(--ink)] mb-1.5 flex items-center gap-2"><Icon name="sparkles" size={14} stroke={2}/> Coming once we confirm with the clinic</div>
          Microchipping & Dubai Municipality pet registration, pet travel & relocation paperwork, full grooming, and boarding — sector-standard services that the clinic may offer but which weren't surfaced in available sources. We won't publish them until the team confirms scope.
        </div>
      </section>

      <CTABand openBook={openBook}/>
    </div>
  );
};

// ============== SERVICE DETAIL ==============
const ServiceDetailPage = ({ slug, go, openBook }) => {
  const D = window.PZ_DATA;
  const s = D.services.find(x => x.slug === slug);
  if (!s) return <div className="p-20 text-center">Service not found. <button onClick={() => go("services")} className="text-[var(--teal-deep)] underline">Back to services</button></div>;

  const related = D.services.filter(x => x.slug !== slug).slice(0, 3);

  return (
    <div>
      <section className="bg-[var(--cream)] border-b border-[var(--line)]">
        <div className="mx-auto max-w-[1240px] px-5 lg:px-8 py-10">
          <button onClick={() => go("services")} className="text-[13px] text-[var(--slate)] hover:text-[var(--ink)] flex items-center gap-1.5"><Icon name="arrowLeft" size={14} stroke={2}/> All services</button>
        </div>
      </section>

      <section className="mx-auto max-w-[1240px] px-5 lg:px-8 py-12 md:py-16 grid lg:grid-cols-12 gap-10">
        <div className="lg:col-span-7">
          <Eyebrow>Service</Eyebrow>
          <h1 className="mt-4 font-display text-[40px] md:text-[54px] leading-[1.02] tracking-[-0.02em] text-[var(--ink)]" style={{ textWrap: "balance" }}>{s.name}</h1>
          <p className="mt-5 text-[17px] text-[var(--slate)] leading-relaxed max-w-2xl">{s.body}</p>

          <div className="mt-10 grid sm:grid-cols-2 gap-8">
            <div>
              <div className="font-mono text-[11px] uppercase tracking-[0.2em] text-[var(--teal-deep)] mb-4">What's included</div>
              <ul className="space-y-2.5">
                {s.included.map(item => (
                  <li key={item} className="flex gap-2.5 text-[14.5px] text-[var(--ink)]">
                    <Icon name="check" size={16} stroke={2.4} className="text-[var(--teal)] mt-1 shrink-0"/>
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <div className="font-mono text-[11px] uppercase tracking-[0.2em] text-[var(--teal-deep)] mb-4">When your pet needs it</div>
              <p className="text-[14.5px] text-[var(--ink)] leading-relaxed">{s.when}</p>
              <div className="mt-6 p-4 rounded-xl bg-[var(--cream)] text-[13px] text-[var(--slate)] leading-relaxed">
                We don't publish prices because no two visits are identical. After the vet has seen your pet, you'll get a clear cost breakdown before anything begins.
              </div>
            </div>
          </div>

          <div className="mt-10 flex flex-wrap gap-3">
            <button onClick={() => openBook(s.name)} className="pz-btn-primary !py-3 !px-5">Book this visit <Icon name="arrow" size={15} stroke={2}/></button>
            <a href={`tel:${D.clinic.phonePrimary.replace(/\s/g,"")}`} className="pz-btn-ghost !py-3 !px-5"><Icon name="phone" size={14} stroke={2}/> Ask us first</a>
          </div>
        </div>

        <div className="lg:col-span-5">
          <div className="relative aspect-[4/5] rounded-[24px] overflow-hidden">
            <img src={s.photo} alt="" className="w-full h-full object-cover"/>
          </div>
          <div className="mt-4 bg-[var(--paper)] border border-[var(--line)] rounded-2xl p-5">
            <div className="font-mono text-[10.5px] uppercase tracking-[0.2em] text-[var(--slate)]">How to book</div>
            <ol className="mt-3 space-y-2.5 text-[13.5px] text-[var(--ink)]">
              {["Tell us what kind of pet and what's going on.","We confirm a slot by phone, usually within the hour.","Walk in to Al Thuraya Bldg, Showroom #2. Public parking outside."].map((step, i) => (
                <li key={i} className="flex gap-3">
                  <span className="w-5 h-5 rounded-full bg-[var(--teal-soft)] text-[var(--teal-deep)] text-[11px] font-medium flex items-center justify-center shrink-0 mt-0.5">{i+1}</span>
                  <span>{step}</span>
                </li>
              ))}
            </ol>
          </div>
        </div>
      </section>

      {/* Related */}
      <section className="bg-[var(--cream)] py-16 md:py-20">
        <div className="mx-auto max-w-[1240px] px-5 lg:px-8">
          <SectionHead eyebrow="Also relevant" title="Pair this with"/>
          <div className="mt-8 grid md:grid-cols-3 gap-3">
            {related.map(r => (
              <button key={r.slug} onClick={() => go(`service/${r.slug}`)} className="group text-left bg-[var(--paper)] rounded-2xl p-5 border border-[var(--line)] hover:border-[var(--teal)] transition">
                <div className="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style={{ background: "var(--teal-soft)", color: "var(--teal-deep)" }}><Icon name={r.icon} size={18}/></div>
                <div className="font-display text-[17px] font-semibold text-[var(--ink)] leading-tight">{r.name}</div>
                <p className="text-[13px] text-[var(--slate)] mt-1.5 leading-relaxed line-clamp-2">{r.short}</p>
              </button>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

// ============== VETS HUB ==============
const VetsPage = ({ go, openBook }) => {
  const D = window.PZ_DATA;
  const confirmed = D.vets.filter(v => !v.draft);
  const pending = D.vets.filter(v => v.draft);
  return (
    <div>
      <section className="bg-[var(--cream)] border-b border-[var(--line)]">
        <div className="mx-auto max-w-[1240px] px-5 lg:px-8 py-16 md:py-20">
          <Eyebrow>Our vets</Eyebrow>
          <h1 className="mt-4 font-display text-[44px] md:text-[60px] leading-[1] tracking-[-0.02em] text-[var(--ink)] max-w-3xl" style={{ textWrap: "balance" }}>
            The vets your pet remembers, the vets you ask for by name.
          </h1>
          <p className="mt-5 text-[16px] text-[var(--slate)] max-w-2xl leading-relaxed">
            We publish only verified profiles. Credentials and MOCCAE / Dubai Municipality licence numbers go up as the clinic confirms them, with the staff member's consent.
          </p>
        </div>
      </section>

      <section className="mx-auto max-w-[1240px] px-5 lg:px-8 py-16 md:py-20">
        <SectionHead title="Verified" eyebrow="Currently practising"/>
        <div className="mt-8 grid md:grid-cols-2 lg:grid-cols-3 gap-5">
          {confirmed.map(v => (
            <button key={v.slug} onClick={() => go(`vet/${v.slug}`)} className="group text-left">
              <div className="relative aspect-[4/5] rounded-2xl overflow-hidden bg-[var(--teal-soft)]">
                <img src={v.photo} alt={v.name} className="w-full h-full object-cover transition group-hover:scale-[1.02]"/>
                <div className="absolute top-3 left-3 flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-[var(--paper)]/95 text-[10.5px] font-mono uppercase tracking-wider text-[var(--teal-deep)]">
                  <span className="w-1.5 h-1.5 rounded-full bg-[var(--teal)] inline-block"/> Verified
                </div>
              </div>
              <div className="mt-4">
                <div className="font-display text-[22px] font-semibold text-[var(--ink)] leading-tight">{v.name}</div>
                <div className="text-[13.5px] text-[var(--slate)] mt-1">{v.role}</div>
                <p className="text-[13.5px] text-[var(--ink)] mt-3 leading-relaxed line-clamp-2">{v.short}</p>
              </div>
            </button>
          ))}
        </div>

        <div className="mt-16">
          <SectionHead title="Pending confirmation" eyebrow="Archived portraits"/>
          <p className="mt-3 text-[13.5px] text-[var(--slate)] max-w-2xl">These portraits were recovered from archived clinic media. They will not be published as current staff until consent and credentials are confirmed with each person.</p>
          <div className="mt-8 grid md:grid-cols-3 gap-4">
            {pending.map(v => (
              <div key={v.slug} className="bg-[var(--paper)] border border-dashed border-[var(--line)] rounded-2xl p-4 opacity-90">
                <div className="aspect-[4/5] rounded-xl overflow-hidden bg-[var(--cream)] mb-4 relative">
                  <img src={v.photo} alt={v.name} className="w-full h-full object-cover"/>
                  <div className="absolute inset-0 bg-[var(--ink)]/10"/>
                  <div className="absolute top-2 left-2 px-2 py-0.5 rounded-full bg-[var(--paper)] text-[10.5px] font-mono uppercase tracking-wider text-[var(--slate)]">Draft</div>
                </div>
                <div className="font-display text-[16px] font-medium text-[var(--ink)] leading-tight">{v.name}</div>
                <div className="text-[12.5px] text-[var(--slate)] mt-1">{v.role}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTABand openBook={openBook}/>
    </div>
  );
};

// ============== VET DETAIL ==============
const VetDetailPage = ({ slug, go, openBook }) => {
  const D = window.PZ_DATA;
  const v = D.vets.find(x => x.slug === slug);
  if (!v) return <div className="p-20 text-center">Profile not found.</div>;
  return (
    <div>
      <section className="bg-[var(--cream)] border-b border-[var(--line)]">
        <div className="mx-auto max-w-[1240px] px-5 lg:px-8 py-10">
          <button onClick={() => go("vets")} className="text-[13px] text-[var(--slate)] hover:text-[var(--ink)] flex items-center gap-1.5"><Icon name="arrowLeft" size={14} stroke={2}/> All vets</button>
        </div>
      </section>

      <section className="mx-auto max-w-[1240px] px-5 lg:px-8 py-12 md:py-16 grid lg:grid-cols-12 gap-10">
        <div className="lg:col-span-5">
          <div className="relative aspect-[4/5] rounded-[24px] overflow-hidden bg-[var(--teal-soft)]">
            <img src={v.photo} alt={v.name} className="w-full h-full object-cover"/>
          </div>
        </div>
        <div className="lg:col-span-7">
          <Eyebrow>Veterinarian</Eyebrow>
          <h1 className="mt-4 font-display text-[44px] md:text-[56px] leading-[1] tracking-[-0.02em] text-[var(--ink)]">{v.name}</h1>
          <div className="mt-3 text-[16px] text-[var(--slate)]">{v.role}</div>
          <p className="mt-6 text-[17px] text-[var(--ink)] leading-relaxed">{v.bio}</p>

          <div className="mt-8">
            <div className="font-mono text-[11px] uppercase tracking-[0.2em] text-[var(--teal-deep)] mb-3">Focus areas</div>
            <div className="flex flex-wrap gap-2">
              {v.tags.map(t => <span key={t} className="px-3 py-1 rounded-full bg-[var(--teal-soft)] text-[12.5px] text-[var(--teal-deep)]">{t}</span>)}
            </div>
          </div>

          <div className="mt-8 p-5 rounded-2xl bg-[var(--cream)] border border-[var(--line)]">
            <div className="font-mono text-[11px] uppercase tracking-[0.2em] text-[var(--slate)] mb-2">Credentials & licence</div>
            <p className="text-[13.5px] text-[var(--slate)] leading-relaxed">{v.credentials}</p>
          </div>

          <div className="mt-8 flex flex-wrap gap-3">
            <button onClick={() => openBook()} className="pz-btn-primary !py-3 !px-5">Book with {v.name.split(" ")[0]} <Icon name="arrow" size={15} stroke={2}/></button>
            <a href={`tel:${D.clinic.phonePrimary.replace(/\s/g,"")}`} className="pz-btn-ghost !py-3 !px-5"><Icon name="phone" size={14} stroke={2}/> Call to ask</a>
          </div>
        </div>
      </section>
    </div>
  );
};

// ============== ABOUT ==============
const AboutPage = ({ go, openBook }) => {
  const D = window.PZ_DATA;
  return (
    <div>
      <section className="bg-[var(--cream)]">
        <div className="mx-auto max-w-[1240px] px-5 lg:px-8 py-16 md:py-24 grid lg:grid-cols-12 gap-10 items-center">
          <div className="lg:col-span-7">
            <Eyebrow>About Petzone</Eyebrow>
            <h1 className="mt-4 font-display text-[44px] md:text-[64px] leading-[1] tracking-[-0.02em] text-[var(--ink)]" style={{ textWrap: "balance" }}>
              Family-owned. Family-vet. Same building since 2009.
            </h1>
            <p className="mt-5 text-[17px] text-[var(--slate)] leading-relaxed max-w-2xl">
              Petzone Veterinary Clinic is a client-focused, family-owned small-animal clinic on Sheikh Zayed Road. We've been here long enough to see puppies grow into seniors, and we still pick up the phone when the same families call.
            </p>
          </div>
          <div className="lg:col-span-5">
            <div className="aspect-[4/5] rounded-[24px] overflow-hidden"><img src={D.heroImages.interior} alt="" className="w-full h-full object-cover"/></div>
          </div>
        </div>
      </section>

      {/* Story */}
      <section className="mx-auto max-w-[1240px] px-5 lg:px-8 py-20 md:py-24 grid lg:grid-cols-12 gap-12">
        <div className="lg:col-span-4 lg:sticky lg:top-24 self-start">
          <Eyebrow>The mission</Eyebrow>
          <h2 className="mt-4 font-display text-[30px] leading-tight tracking-[-0.01em] text-[var(--ink)]">"To provide the highest quality veterinary, surgical and nursing care possible to the animals entrusted to us."</h2>
          <div className="mt-3 font-mono text-[11px] uppercase tracking-[0.2em] text-[var(--slate)]">— Verbatim from Petzone</div>
        </div>
        <div className="lg:col-span-8 space-y-10">
          {[
            { t: "Where pets come first", b: "It's not a slogan — it's the order things happen in. Your pet meets the vet before we meet a clipboard. Diagnostics happen on-site, so answers arrive on the same visit. Medications dispense before you leave." },
            { t: "Client-centered, by design", b: "We are, in our own words, 'a client-centered facility that goes above and beyond to provide friendly customer service and uphold first-class veterinary standards.' That means unrushed consults, written care plans, and follow-up calls when you'd expect a voicemail." },
            { t: "One building, fewer trips", b: "Petzone keeps lab, X-ray, ultrasound, pharmacy, and prescription diets under one roof. For your pet, that's less stress; for you, that's fewer cars across Sheikh Zayed Road on a Tuesday morning." },
          ].map(b => (
            <div key={b.t}>
              <div className="font-display text-[24px] font-semibold text-[var(--ink)] leading-tight">{b.t}</div>
              <p className="mt-3 text-[16px] text-[var(--slate)] leading-relaxed">{b.b}</p>
            </div>
          ))}

          <div className="bg-[var(--cream)] rounded-2xl p-6 border border-[var(--line)] mt-6">
            <div className="font-mono text-[11px] uppercase tracking-[0.2em] text-[var(--slate)] mb-2">Licence block</div>
            <p className="text-[14px] text-[var(--ink)] leading-relaxed">MOCCAE / Dubai Municipality clinic licence numbers will be published here once supplied by the clinic. We do not publish unverified credentials.</p>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="bg-[var(--cream)] py-20 md:py-24">
        <div className="mx-auto max-w-[1240px] px-5 lg:px-8 grid lg:grid-cols-12 gap-12">
          <div className="lg:col-span-4">
            <SectionHead eyebrow="FAQ" title="The things most families ask."/>
          </div>
          <div className="lg:col-span-8">
            <FAQList items={D.faq}/>
          </div>
        </div>
      </section>

      <CTABand openBook={openBook}/>
    </div>
  );
};

// ============== CONTACT ==============
const ContactPage = ({ go, openBook }) => {
  return (
    <div>
      <section className="bg-[var(--cream)] border-b border-[var(--line)]">
        <div className="mx-auto max-w-[1240px] px-5 lg:px-8 py-16 md:py-20">
          <Eyebrow>Contact</Eyebrow>
          <h1 className="mt-4 font-display text-[44px] md:text-[60px] leading-[1] tracking-[-0.02em] text-[var(--ink)]" style={{ textWrap: "balance" }}>
            Pick up the phone, or just walk in.
          </h1>
        </div>
      </section>
      <ContactBlock go={go} openBook={openBook}/>
    </div>
  );
};

// ============== shared bits ==============
const ContactBlock = ({ go, openBook, compact }) => {
  const c = window.PZ_DATA.clinic;
  return (
    <section className={`mx-auto max-w-[1240px] px-5 lg:px-8 ${compact ? "pb-20 md:pb-28" : "py-16 md:py-20"}`}>
      <div className="grid lg:grid-cols-12 gap-6">
        {/* Map */}
        <div className="lg:col-span-7 relative rounded-[24px] overflow-hidden bg-[var(--cream)] aspect-[5/4] lg:aspect-auto border border-[var(--line)]">
          <FakeMap/>
          <div className="absolute top-5 left-5 right-5 lg:right-auto lg:max-w-[360px] bg-[var(--paper)] rounded-2xl shadow-[0_20px_50px_-20px_rgba(20,39,44,0.25)] p-5">
            <div className="flex items-start gap-3">
              <div className="w-10 h-10 rounded-lg flex items-center justify-center shrink-0" style={{ background: "var(--teal-soft)", color: "var(--teal-deep)" }}><Icon name="pin" size={18}/></div>
              <div>
                <div className="font-display text-[17px] font-semibold text-[var(--ink)] leading-tight">Petzone Veterinary Clinic</div>
                <div className="text-[13px] text-[var(--slate)] mt-1.5 leading-relaxed">{c.address.line1}<br/>{c.address.line2}<br/>{c.address.line3}</div>
                <div className="text-[12px] text-[var(--slate)] mt-2 italic">Map pin — pending exact coordinates from clinic.</div>
              </div>
            </div>
          </div>
        </div>

        {/* Sidebar */}
        <div className="lg:col-span-5 space-y-3">
          <div className="bg-[var(--paper)] border border-[var(--line)] rounded-2xl p-6">
            <div className="font-mono text-[11px] uppercase tracking-[0.2em] text-[var(--teal-deep)]">Reach us</div>
            <div className="mt-5 space-y-4">
              <a href={`tel:${c.phonePrimary.replace(/\s/g,"")}`} className="flex items-center gap-4 group">
                <div className="w-11 h-11 rounded-xl flex items-center justify-center shrink-0" style={{ background: "var(--teal-soft)", color: "var(--teal-deep)" }}><Icon name="phone" size={18}/></div>
                <div>
                  <div className="text-[15px] font-medium text-[var(--ink)] group-hover:text-[var(--teal-deep)]">{c.phonePrimary}</div>
                  <div className="text-[12px] text-[var(--slate)]">Reception · proven channel today</div>
                </div>
              </a>
              <button className="flex items-center gap-4 group w-full text-left opacity-70 cursor-not-allowed">
                <div className="w-11 h-11 rounded-xl flex items-center justify-center shrink-0" style={{ background: "var(--cream)", color: "var(--slate)" }}><Icon name="whatsapp" size={18}/></div>
                <div>
                  <div className="text-[15px] font-medium text-[var(--ink)]">WhatsApp — coming</div>
                  <div className="text-[12px] text-[var(--slate)]">Awaiting business number from clinic</div>
                </div>
              </button>
              <a href={`mailto:${c.email}`} className="flex items-center gap-4 group">
                <div className="w-11 h-11 rounded-xl flex items-center justify-center shrink-0" style={{ background: "var(--teal-soft)", color: "var(--teal-deep)" }}><Icon name="mail" size={18}/></div>
                <div>
                  <div className="text-[15px] font-medium text-[var(--ink)] group-hover:text-[var(--teal-deep)]">{c.email}</div>
                  <div className="text-[12px] text-[var(--slate)]">For non-urgent enquiries</div>
                </div>
              </a>
            </div>
            <button onClick={openBook} className="pz-btn-primary w-full justify-center mt-6">Book an appointment <Icon name="arrow" size={15} stroke={2}/></button>
          </div>

          <div className="bg-[var(--paper)] border border-[var(--line)] rounded-2xl p-6">
            <div className="font-mono text-[11px] uppercase tracking-[0.2em] text-[var(--teal-deep)]">Hours</div>
            <div className="mt-3 text-[13px] text-[var(--slate)] leading-relaxed italic">
              Three different schedules appear across the clinic's own listings. We're confirming the single correct schedule with reception before publishing.
            </div>
            <div className="mt-4 pt-4 border-t border-[var(--line)] text-[12px] text-[var(--slate)] font-mono">
              Not a 24/7 emergency clinic.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const FakeMap = () => (
  <div className="absolute inset-0">
    {/* stylized abstract map illustration */}
    <svg viewBox="0 0 600 400" className="w-full h-full" preserveAspectRatio="xMidYMid slice">
      <rect width="600" height="400" fill="var(--teal-soft)"/>
      {/* road grid — SZR diagonal */}
      <g stroke="white" strokeWidth="2" opacity="0.7">
        <path d="M -50 280 L 650 60" strokeWidth="38"/>
      </g>
      <g stroke="var(--teal-soft)" strokeWidth="1" opacity="0.6">
        <path d="M -50 280 L 650 60" strokeWidth="1" strokeDasharray="8 8"/>
      </g>
      <g stroke="white" strokeWidth="14" opacity="0.6">
        <path d="M 50 0 L 200 400"/>
        <path d="M 380 0 L 530 400"/>
        <path d="M 0 100 L 600 100"/>
        <path d="M 0 340 L 600 340"/>
      </g>
      {/* blocks */}
      <g fill="white" opacity="0.5">
        <rect x="60" y="120" width="120" height="80" rx="4"/>
        <rect x="220" y="120" width="140" height="40" rx="4"/>
        <rect x="220" y="180" width="140" height="80" rx="4"/>
        <rect x="400" y="120" width="120" height="60" rx="4"/>
        <rect x="400" y="200" width="120" height="80" rx="4"/>
      </g>
      {/* labels */}
      <g fill="var(--teal-deep)" fontFamily="monospace" fontSize="10" opacity="0.7">
        <text x="320" y="170" transform="rotate(-18 320 170)">SHEIKH ZAYED RD</text>
      </g>
      {/* pin */}
      <g transform="translate(300 200)">
        <circle r="32" fill="var(--coral)" opacity="0.2"/>
        <circle r="20" fill="var(--coral)" opacity="0.3"/>
        <circle r="10" fill="var(--coral)"/>
        <circle r="4" fill="white"/>
      </g>
    </svg>
  </div>
);

const FAQList = ({ items }) => {
  const [open, setOpen] = useStateP(0);
  return (
    <div className="space-y-2">
      {items.map((it, i) => (
        <div key={i} className="bg-[var(--paper)] border border-[var(--line)] rounded-2xl overflow-hidden">
          <button onClick={() => setOpen(open === i ? -1 : i)} className="w-full text-left flex items-center justify-between gap-4 p-5">
            <span className="font-display text-[17px] font-medium text-[var(--ink)]">{it.q}</span>
            <Icon name="chevron" size={18} stroke={2} className={`shrink-0 transition ${open === i ? "rotate-90" : ""}`}/>
          </button>
          {open === i && <div className="px-5 pb-5 text-[14.5px] text-[var(--slate)] leading-relaxed -mt-1">{it.a}</div>}
        </div>
      ))}
    </div>
  );
};

const CTABand = ({ openBook }) => (
  <section className="mx-auto max-w-[1240px] px-5 lg:px-8 py-12 md:py-16">
    <div className="bg-[var(--ink)] text-white rounded-[28px] p-10 md:p-14 grid lg:grid-cols-12 gap-8 items-center">
      <div className="lg:col-span-8">
        <Eyebrow>Ready when you are</Eyebrow>
        <h2 className="mt-4 font-display text-[34px] md:text-[44px] leading-[1.05] tracking-[-0.01em]" style={{ textWrap: "balance" }}>
          Bring your pet in. We'll take it from there.
        </h2>
      </div>
      <div className="lg:col-span-4 flex flex-col gap-2">
        <button onClick={() => openBook()} className="pz-btn-coral justify-center !py-3.5">Book an appointment</button>
        <a href={`tel:${window.PZ_DATA.clinic.phonePrimary.replace(/\s/g,"")}`} className="pz-btn-ghost-light justify-center !py-3.5"><Icon name="phone" size={15} stroke={2}/> {window.PZ_DATA.clinic.phonePrimary}</a>
      </div>
    </div>
  </section>
);

Object.assign(window, { HomePage, ServicesPage, ServiceDetailPage, VetsPage, VetDetailPage, AboutPage, ContactPage, CTABand, ContactBlock, FAQList });
