// Petzone — shared components (icons, logo, nav, footer, mobile bar, book sheet)
const { useState, useEffect, useRef, useMemo } = React;

// ============== ICONS (simple stroke set) ==============
const Icon = ({ name, size = 22, stroke = 1.6, className = "" }) => {
  const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round", className };
  const paths = {
    stethoscope: <><path d="M6 3v6a4 4 0 0 0 8 0V3"/><path d="M6 3H4"/><path d="M14 3h2"/><path d="M10 13v3a5 5 0 0 0 10 0v-1"/><circle cx="20" cy="13" r="2"/></>,
    shield: <><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6l-8-3z"/><path d="m9 12 2 2 4-4"/></>,
    scalpel: <><path d="m4 20 7-7"/><path d="M11 13 20 4l-2-1-9 9z"/><path d="m11 13 1.5 1.5"/></>,
    tooth: <><path d="M8 3c-3 0-5 2-5 5 0 3 1 4 1 7 0 3 1 6 3 6 1.5 0 1.5-3 2.5-3s1 3 2.5 3c2 0 3-3 3-6 0-3 1-4 1-7 0-3-2-5-5-5-1.5 0-2.5 1-4 1z"/></>,
    flask: <><path d="M9 3h6"/><path d="M10 3v6L4 19a2 2 0 0 0 2 3h12a2 2 0 0 0 2-3l-6-10V3"/><path d="M7 14h10"/></>,
    scan: <><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M3 12h18"/></>,
    pill: <><rect x="3" y="9" width="18" height="6" rx="3" transform="rotate(-45 12 12)"/><path d="m8.5 8.5 7 7"/></>,
    bowl: <><path d="M3 11h18"/><path d="M4 11a8 8 0 0 0 16 0"/><path d="M12 7a3 3 0 0 1 3-3"/><path d="M9 7a2 2 0 0 0-2-2"/></>,
    phone: <><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></>,
    whatsapp: <><path d="M3 21l1.65-4.5A8.5 8.5 0 1 1 7.5 19.5L3 21z"/><path d="M8.5 9.5c.3 1.5 1.5 3.5 3.5 5s4 2.7 5 3"/></>,
    pin: <><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 1 1 16 0z"/><circle cx="12" cy="10" r="3"/></>,
    clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 7 9-7"/></>,
    arrow: <><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></>,
    arrowLeft: <><path d="M19 12H5"/><path d="m11 18-6-6 6-6"/></>,
    check: <><path d="M5 12l5 5L20 7"/></>,
    star: <><path d="m12 2 3 7 7 .6-5.3 4.7 1.7 7L12 17.5 5.6 21.3 7.3 14.3 2 9.6 9 9z"/></>,
    paw: <><circle cx="6" cy="9" r="2"/><circle cx="10" cy="6" r="2"/><circle cx="14" cy="6" r="2"/><circle cx="18" cy="9" r="2"/><path d="M8 14c0-3 8-3 8 0 0 2-2 3-4 5-2-2-4-3-4-5z"/></>,
    menu: <><path d="M3 6h18"/><path d="M3 12h18"/><path d="M3 18h18"/></>,
    close: <><path d="M18 6 6 18"/><path d="m6 6 12 12"/></>,
    globe: <><circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3a14 14 0 0 1 0 18"/><path d="M12 3a14 14 0 0 0 0 18"/></>,
    heart: <><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></>,
    chevron: <><path d="m9 6 6 6-6 6"/></>,
    sparkles: <><path d="M12 3v4"/><path d="M12 17v4"/><path d="M3 12h4"/><path d="M17 12h4"/><path d="m5 5 3 3"/><path d="m16 16 3 3"/><path d="m5 19 3-3"/><path d="m16 8 3-3"/></>,
  };
  return <svg {...common}>{paths[name] || paths.paw}</svg>;
};

// ============== LOGO (clean SVG redraw — original mark) ==============
const PetzoneLogo = ({ size = 36, mono = false }) => {
  const c = mono ? "currentColor" : "var(--teal)";
  return (
    <div className="flex items-center gap-2.5" aria-label="Petzone Veterinary Clinic">
      <svg width={size} height={size} viewBox="0 0 48 48" fill="none" aria-hidden="true">
        {/* paw mark */}
        <g fill={c}>
          <ellipse cx="14" cy="18" rx="3.4" ry="4.2" transform="rotate(-18 14 18)"/>
          <ellipse cx="22" cy="13" rx="3.4" ry="4.4"/>
          <ellipse cx="30" cy="13" rx="3.4" ry="4.4"/>
          <ellipse cx="38" cy="18" rx="3.4" ry="4.2" transform="rotate(18 38 18)"/>
          <path d="M26 21c-6 0-11 5-11 9.5 0 3.5 2.5 5.5 5 5.5 2 0 3-1.5 6-1.5s4 1.5 6 1.5c2.5 0 5-2 5-5.5C37 26 32 21 26 21z"/>
        </g>
        {/* heart cutout inside paw pad */}
        <path d="M26 28.5c-.9-1.3-3.2-1-3.2 1 0 1.4 1.6 2.5 3.2 3.8 1.6-1.3 3.2-2.4 3.2-3.8 0-2-2.3-2.3-3.2-1z" fill="var(--paper)"/>
      </svg>
      <div className="flex flex-col leading-none">
        <span className="font-display text-[20px] font-semibold tracking-tight" style={{ color: mono ? "currentColor" : "var(--ink)" }}>Petzone</span>
        <span className="font-mono text-[9px] uppercase tracking-[0.18em] mt-0.5" style={{ color: "var(--slate)" }}>Veterinary · Dubai</span>
      </div>
    </div>
  );
};

// ============== NAV ==============
const Nav = ({ page, go, openBook }) => {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const [servicesOpen, setServicesOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const link = (key, label) => (
    <button
      onClick={() => { go(key); setOpen(false); }}
      className={`relative px-1 py-1.5 text-[14.5px] transition ${page === key ? "text-[var(--ink)]" : "text-[var(--slate)] hover:text-[var(--ink)]"}`}
    >
      {label}
      {page === key && <span className="absolute -bottom-0.5 left-0 right-0 h-[2px] rounded-full" style={{ background: "var(--teal)" }} />}
    </button>
  );

  return (
    <header className={`sticky top-0 z-40 transition-all ${scrolled ? "bg-[var(--paper)]/90 backdrop-blur-md border-b border-[var(--line)]" : "bg-[var(--paper)]"}`}>
      <div className="mx-auto max-w-[1240px] px-5 lg:px-8 h-[72px] flex items-center justify-between">
        <button onClick={() => go("home")} className="flex items-center"><PetzoneLogo /></button>

        <nav className="hidden lg:flex items-center gap-7">
          {link("home", "Home")}
          <div className="relative" onMouseEnter={() => setServicesOpen(true)} onMouseLeave={() => setServicesOpen(false)}>
            <button onClick={() => go("services")} className={`flex items-center gap-1 px-1 py-1.5 text-[14.5px] ${page === "services" || page.startsWith("service/") ? "text-[var(--ink)]" : "text-[var(--slate)] hover:text-[var(--ink)]"}`}>
              Services <Icon name="chevron" size={14} stroke={2} className="rotate-90" />
            </button>
            {servicesOpen && (
              <div className="absolute left-1/2 -translate-x-1/2 top-full pt-3 w-[560px]">
                <div className="bg-[var(--paper)] border border-[var(--line)] rounded-2xl shadow-[0_24px_60px_-20px_rgba(20,39,44,0.18)] p-3 grid grid-cols-2 gap-1">
                  {window.PZ_DATA.services.map((s) => (
                    <button key={s.slug} onClick={() => { go(`service/${s.slug}`); setServicesOpen(false); }} className="flex items-start gap-3 p-2.5 rounded-xl hover:bg-[var(--teal-soft)] text-left transition">
                      <div className="w-9 h-9 rounded-lg flex items-center justify-center shrink-0" style={{ background: "var(--teal-soft)", color: "var(--teal-deep)" }}>
                        <Icon name={s.icon} size={18} />
                      </div>
                      <div className="min-w-0">
                        <div className="text-[13.5px] font-medium text-[var(--ink)]">{s.name}</div>
                        <div className="text-[12px] text-[var(--slate)] truncate">{s.short.split(".")[0]}.</div>
                      </div>
                    </button>
                  ))}
                </div>
              </div>
            )}
          </div>
          {link("vets", "Our vets")}
          {link("about", "About")}
          {link("contact", "Contact")}
        </nav>

        <div className="hidden lg:flex items-center gap-2.5">
          <a href={`tel:${window.PZ_DATA.clinic.phonePrimary.replace(/\s/g, "")}`} className="flex items-center gap-2 px-3.5 py-2 rounded-full text-[13.5px] text-[var(--ink)] hover:bg-[var(--cream)] transition">
            <Icon name="phone" size={15} stroke={2} /> {window.PZ_DATA.clinic.phonePrimary}
          </a>
          <button onClick={openBook} className="pz-btn-primary">Book an appointment <Icon name="arrow" size={15} stroke={2} /></button>
        </div>

        <button onClick={() => setOpen(!open)} className="lg:hidden w-10 h-10 flex items-center justify-center rounded-lg hover:bg-[var(--cream)]" aria-label="Menu">
          <Icon name={open ? "close" : "menu"} />
        </button>
      </div>

      {open && (
        <div className="lg:hidden border-t border-[var(--line)] bg-[var(--paper)] px-5 py-4 space-y-1">
          {[["home","Home"],["services","Services"],["vets","Our vets"],["about","About"],["contact","Contact"]].map(([k,l]) => (
            <button key={k} onClick={() => { go(k); setOpen(false); }} className="block w-full text-left px-3 py-3 rounded-lg hover:bg-[var(--cream)] text-[15px]">{l}</button>
          ))}
          <button onClick={() => { openBook(); setOpen(false); }} className="pz-btn-primary w-full justify-center mt-3">Book an appointment</button>
        </div>
      )}
    </header>
  );
};

// ============== FOOTER ==============
const Footer = ({ go, openBook }) => {
  const c = window.PZ_DATA.clinic;
  return (
    <footer className="mt-24 bg-[var(--ink)] text-[var(--paper)]">
      <div className="mx-auto max-w-[1240px] px-5 lg:px-8 py-16">
        <div className="grid lg:grid-cols-12 gap-10">
          <div className="lg:col-span-5">
            <div className="text-[var(--paper)]"><PetzoneLogo mono /></div>
            <p className="mt-5 text-[15px] leading-relaxed text-white/70 max-w-md">
              A family-owned small-animal clinic on Sheikh Zayed Road. Caring for Dubai's dogs, cats, birds and small mammals since 2009.
            </p>
            <div className="mt-6 flex gap-2">
              <button onClick={openBook} className="pz-btn-coral">Book an appointment</button>
              <a href={`tel:${c.phonePrimary.replace(/\s/g, "")}`} className="pz-btn-ghost-light"><Icon name="phone" size={15} stroke={2} /> Call us</a>
            </div>
          </div>
          <div className="lg:col-span-3">
            <div className="text-[12px] uppercase tracking-[0.18em] text-white/50 mb-4 font-mono">Services</div>
            <ul className="space-y-2.5 text-[14px]">
              {window.PZ_DATA.services.slice(0,6).map(s => (
                <li key={s.slug}><button onClick={() => go(`service/${s.slug}`)} className="text-white/80 hover:text-white transition">{s.name}</button></li>
              ))}
              <li><button onClick={() => go("services")} className="text-[var(--teal)] hover:text-white transition">All services →</button></li>
            </ul>
          </div>
          <div className="lg:col-span-4">
            <div className="text-[12px] uppercase tracking-[0.18em] text-white/50 mb-4 font-mono">Visit</div>
            <ul className="space-y-3 text-[14px] text-white/80">
              <li className="flex gap-3"><Icon name="pin" size={17} stroke={1.8} className="shrink-0 mt-0.5 text-[var(--teal)]" /><span>{c.address.line1}<br/>{c.address.line2}<br/>{c.address.line3}</span></li>
              <li className="flex gap-3"><Icon name="phone" size={17} stroke={1.8} className="shrink-0 mt-0.5 text-[var(--teal)]" /><span>{c.phonePrimary}<br/><span className="text-white/50 text-[12.5px]">(2nd line {c.phoneSecondary} — confirming)</span></span></li>
              <li className="flex gap-3"><Icon name="mail" size={17} stroke={1.8} className="shrink-0 mt-0.5 text-[var(--teal)]" /><a className="hover:text-white" href={`mailto:${c.email}`}>{c.email}</a></li>
              <li className="flex gap-3"><Icon name="clock" size={17} stroke={1.8} className="shrink-0 mt-0.5 text-[var(--teal)]" /><span className="text-white/60 italic">Schedule pending — listings disagree across 3 versions; awaiting client confirmation.</span></li>
            </ul>
          </div>
        </div>
        <div className="mt-12 pt-6 border-t border-white/10 flex flex-col sm:flex-row gap-3 justify-between items-start sm:items-center text-[12.5px] text-white/50">
          <span>© {new Date().getFullYear()} Petzone Veterinary Clinic. Where pets come first.</span>
          <span className="font-mono">Sheikh Zayed Road · Al Wasl / Jumeirah · Dubai</span>
        </div>
      </div>
    </footer>
  );
};

// ============== MOBILE BOTTOM BAR ==============
const MobileBar = ({ openBook }) => (
  <div className="lg:hidden fixed bottom-0 inset-x-0 z-30 bg-[var(--paper)] border-t border-[var(--line)] p-2 grid grid-cols-3 gap-2 shadow-[0_-8px_24px_-12px_rgba(20,39,44,0.12)]">
    <a href={`tel:${window.PZ_DATA.clinic.phonePrimary.replace(/\s/g,"")}`} className="flex flex-col items-center justify-center py-2 rounded-xl bg-[var(--cream)]">
      <Icon name="phone" size={18} stroke={2} />
      <span className="text-[11px] mt-0.5">Call</span>
    </a>
    <button className="flex flex-col items-center justify-center py-2 rounded-xl bg-[var(--cream)] text-[var(--slate)]" title="WhatsApp — pending client number">
      <Icon name="whatsapp" size={18} stroke={2} />
      <span className="text-[11px] mt-0.5">WhatsApp</span>
    </button>
    <button onClick={openBook} className="flex flex-col items-center justify-center py-2 rounded-xl text-white" style={{ background: "var(--coral)" }}>
      <Icon name="check" size={18} stroke={2.4} />
      <span className="text-[11px] mt-0.5 font-medium">Book</span>
    </button>
  </div>
);

// ============== BOOK SHEET (multi-step) ==============
const BookSheet = ({ open, onClose, prefill }) => {
  const [step, setStep] = useState(1);
  const [form, setForm] = useState({
    petType: "Dog",
    petName: "",
    service: prefill?.service || "Consultation & Wellness",
    ownerName: "",
    phone: "",
    email: "",
    date: "",
    time: "",
    notes: "",
  });

  useEffect(() => {
    if (open) { setStep(1); setForm(f => ({ ...f, service: prefill?.service || f.service })); }
  }, [open, prefill]);

  if (!open) return null;

  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const canNext1 = !!form.petType && !!form.service;
  const canNext2 = !!form.ownerName && !!form.phone;
  const submitted = step === 4;

  return (
    <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center">
      <div className="absolute inset-0 bg-[var(--ink)]/40 backdrop-blur-sm" onClick={onClose} />
      <div className="relative w-full sm:max-w-[560px] bg-[var(--paper)] sm:rounded-2xl rounded-t-2xl shadow-2xl max-h-[92vh] overflow-y-auto">
        <div className="sticky top-0 bg-[var(--paper)] border-b border-[var(--line)] px-6 py-4 flex items-center justify-between">
          <div>
            <div className="font-display text-[19px] font-semibold text-[var(--ink)]">{submitted ? "We've got it" : "Book an appointment"}</div>
            {!submitted && <div className="text-[12.5px] text-[var(--slate)] mt-0.5">Step {step} of 3 · about 60 seconds</div>}
          </div>
          <button onClick={onClose} className="w-9 h-9 rounded-full hover:bg-[var(--cream)] flex items-center justify-center"><Icon name="close" /></button>
        </div>

        {!submitted && (
          <div className="px-6 pt-3">
            <div className="flex gap-1.5">
              {[1,2,3].map(n => (
                <div key={n} className="h-1.5 flex-1 rounded-full" style={{ background: n <= step ? "var(--teal)" : "var(--line)" }} />
              ))}
            </div>
          </div>
        )}

        <div className="p-6">
          {step === 1 && (
            <div className="space-y-5">
              <div>
                <label className="pz-label">Who's the appointment for?</label>
                <div className="grid grid-cols-4 gap-2 mt-2">
                  {["Dog","Cat","Bird","Small mammal"].map(t => (
                    <button key={t} onClick={() => update("petType", t)} className={`px-2 py-2.5 rounded-xl text-[13.5px] border transition ${form.petType === t ? "border-[var(--teal)] bg-[var(--teal-soft)] text-[var(--teal-deep)] font-medium" : "border-[var(--line)] hover:border-[var(--ink)]/30"}`}>{t}</button>
                  ))}
                </div>
              </div>
              <div>
                <label className="pz-label">Pet's name <span className="text-[var(--slate)] font-normal">(optional)</span></label>
                <input className="pz-input" placeholder="e.g. Mochi" value={form.petName} onChange={e => update("petName", e.target.value)} />
              </div>
              <div>
                <label className="pz-label">What's the visit for?</label>
                <select className="pz-input" value={form.service} onChange={e => update("service", e.target.value)}>
                  {window.PZ_DATA.services.map(s => <option key={s.slug}>{s.name}</option>)}
                  <option>I'm not sure — please advise</option>
                </select>
              </div>
            </div>
          )}

          {step === 2 && (
            <div className="space-y-5">
              <div>
                <label className="pz-label">Your name</label>
                <input className="pz-input" placeholder="Full name" value={form.ownerName} onChange={e => update("ownerName", e.target.value)} />
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="pz-label">Phone</label>
                  <input className="pz-input" placeholder="+971 ..." value={form.phone} onChange={e => update("phone", e.target.value)} />
                </div>
                <div>
                  <label className="pz-label">Email <span className="text-[var(--slate)] font-normal">(optional)</span></label>
                  <input className="pz-input" placeholder="you@example.com" value={form.email} onChange={e => update("email", e.target.value)} />
                </div>
              </div>
              <div className="text-[12.5px] text-[var(--slate)] bg-[var(--cream)] rounded-lg p-3 leading-relaxed">
                We only collect the minimum we need to call you back. No medical-history fields — your vet will take that in person.
              </div>
            </div>
          )}

          {step === 3 && (
            <div className="space-y-5">
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="pz-label">Preferred date</label>
                  <input type="date" className="pz-input" value={form.date} onChange={e => update("date", e.target.value)} />
                </div>
                <div>
                  <label className="pz-label">Preferred time</label>
                  <select className="pz-input" value={form.time} onChange={e => update("time", e.target.value)}>
                    <option value="">Any</option>
                    <option>Morning (9–12)</option>
                    <option>Afternoon (12–17)</option>
                    <option>Evening (17–20)</option>
                  </select>
                </div>
              </div>
              <div>
                <label className="pz-label">Anything we should know? <span className="text-[var(--slate)] font-normal">(optional)</span></label>
                <textarea className="pz-input min-h-[88px]" placeholder="e.g. Mochi is nervous on the table — bringing her usual blanket." value={form.notes} onChange={e => update("notes", e.target.value)} />
              </div>
              <div className="bg-[var(--teal-soft)] rounded-xl p-4 text-[13px] text-[var(--ink)]">
                <div className="font-medium mb-1">Summary</div>
                <div className="text-[var(--slate)] leading-relaxed">{form.petName || form.petType} · {form.service}<br/>{form.ownerName} · {form.phone}{form.date && <> · {form.date}{form.time && <> ({form.time})</>}</>}</div>
              </div>
            </div>
          )}

          {step === 4 && (
            <div className="text-center py-4">
              <div className="w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4" style={{ background: "var(--teal-soft)", color: "var(--teal-deep)" }}>
                <Icon name="check" size={32} stroke={2.4} />
              </div>
              <div className="font-display text-[22px] font-semibold text-[var(--ink)]">Thanks{form.ownerName ? `, ${form.ownerName.split(" ")[0]}` : ""}.</div>
              <p className="text-[14px] text-[var(--slate)] mt-2 max-w-sm mx-auto leading-relaxed">
                We'll call {form.phone || "you"} within one working hour to confirm your slot. Need us sooner? Tap the WhatsApp or call buttons below.
              </p>
              <div className="mt-5 flex gap-2 justify-center">
                <a href={`tel:${window.PZ_DATA.clinic.phonePrimary.replace(/\s/g,"")}`} className="pz-btn-ghost"><Icon name="phone" size={15} stroke={2}/> Call instead</a>
                <button onClick={onClose} className="pz-btn-primary">Done</button>
              </div>
            </div>
          )}
        </div>

        {!submitted && (
          <div className="sticky bottom-0 bg-[var(--paper)] border-t border-[var(--line)] px-6 py-4 flex justify-between items-center">
            <button onClick={() => step > 1 ? setStep(step-1) : onClose()} className="text-[14px] text-[var(--slate)] hover:text-[var(--ink)] flex items-center gap-1.5">
              <Icon name="arrowLeft" size={15} stroke={2}/> {step === 1 ? "Cancel" : "Back"}
            </button>
            <button
              onClick={() => setStep(step+1)}
              disabled={(step === 1 && !canNext1) || (step === 2 && !canNext2)}
              className="pz-btn-primary disabled:opacity-40 disabled:cursor-not-allowed"
            >
              {step === 3 ? "Confirm booking" : "Continue"} <Icon name="arrow" size={15} stroke={2}/>
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

// ============== EYEBROW / SECTION HEAD ==============
const Eyebrow = ({ children }) => (
  <div className="font-mono text-[11px] uppercase tracking-[0.22em] text-[var(--teal-deep)] flex items-center gap-2">
    <span className="w-6 h-px bg-[var(--teal-deep)] inline-block" />{children}
  </div>
);

const SectionHead = ({ eyebrow, title, lede, align = "left" }) => (
  <div className={`max-w-2xl ${align === "center" ? "mx-auto text-center" : ""}`}>
    {eyebrow && <div className={align === "center" ? "flex justify-center" : ""}><Eyebrow>{eyebrow}</Eyebrow></div>}
    <h2 className="mt-3 font-display text-[34px] md:text-[42px] leading-[1.05] tracking-[-0.01em] text-[var(--ink)]" style={{ textWrap: "balance" }}>{title}</h2>
    {lede && <p className="mt-4 text-[16px] leading-relaxed text-[var(--slate)]" style={{ textWrap: "pretty" }}>{lede}</p>}
  </div>
);

// ============== EXPORTS ==============
Object.assign(window, { Icon, PetzoneLogo, Nav, Footer, MobileBar, BookSheet, Eyebrow, SectionHead });
