// Two parallel product demos: For Pets (marketplace) + For Sitters (admin app).
// Each renders an A–F tab strip and an in-window screen for the active tab.
const { motion: mD, AnimatePresence: APD } = window;

// ---------- shared chrome ----------
const WindowChrome = ({ right }) => (
  <div className="flex items-center justify-between px-4 py-3 border-b border-line bg-creamSoft/50">
    <div className="flex items-center gap-1.5">
      <span className="w-2.5 h-2.5 rounded-full bg-coral/60" />
      <span className="w-2.5 h-2.5 rounded-full bg-butter" />
      <span className="w-2.5 h-2.5 rounded-full bg-mintDeep" />
    </div>
    <div className="flex-1" />
    <div className="min-w-[60px] flex justify-end">{right}</div>
  </div>
);

const DemoTabs = ({ tabs, active, onChange }) => (
  <div className="flex flex-wrap items-center justify-center gap-2">
    {tabs.map((t, i) => {
      const letter = String.fromCharCode(65 + i);
      const isActive = active === t.id;
      return (
        <button
          key={t.id}
          onClick={() => onChange(t.id)}
          className={`group relative inline-flex items-center gap-2 pl-1 pr-3 py-1 rounded-full border text-[12.5px] transition-all ${
            isActive
              ? "bg-forest text-cream border-forest shadow-soft"
              : "bg-white text-ink border-line hover:border-forest/30"
          }`}
        >
          <span
            className={`inline-flex w-6 h-6 rounded-full text-[10.5px] font-mono items-center justify-center ${
              isActive ? "bg-cream/15 text-cream" : "bg-cream text-forest"
            }`}
          >
            {letter}
          </span>
          <span className="font-medium">{t.label}</span>
          {isActive && (
            <span className="absolute left-3 right-3 bottom-0.5 h-[2px] rounded-full overflow-hidden">
              <mD.span
                key={t.id + "-progress"}
                initial={{ width: "0%" }}
                animate={{ width: "100%" }}
                transition={{ duration: 6, ease: "linear" }}
                className="absolute left-0 top-0 h-full bg-coral/70 rounded-full"
              />
            </span>
          )}
        </button>
      );
    })}
  </div>
);

const useAutoAdvance = (ids, delay = 6000) => {
  const [active, setActive] = React.useState(ids[0]);
  const userTouched = React.useRef(false);
  React.useEffect(() => {
    if (userTouched.current) return;
    const t = setTimeout(() => {
      const i = ids.indexOf(active);
      setActive(ids[(i + 1) % ids.length]);
    }, delay);
    return () => clearTimeout(t);
  }, [active, ids, delay]);
  return [
    active,
    (id) => {
      userTouched.current = true;
      setActive(id);
    },
  ];
};

const DemoShell = ({ id, title, eyebrow, kicker, tabs, active, onChange, children }) => (
  <Section id={id} eyebrow={eyebrow} title={title} kicker={kicker} className="py-12 sm:py-20">
    <div className="flex justify-center mb-5">
      <DemoTabs tabs={tabs} active={active} onChange={onChange} />
    </div>
    <div className="bg-white rounded-[24px] border border-line shadow-ring overflow-hidden">
      <WindowChrome
        right={
          <div className="flex items-center gap-2 text-inkSoft">
            <IconHeart size={14} />
            <IconUser size={14} />
          </div>
        }
      />
      <APD mode="wait">
        <mD.div
          key={active}
          initial={{ opacity: 0, y: 8 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -6 }}
          transition={{ duration: 0.35 }}
        >
          {children}
        </mD.div>
      </APD>
    </div>
  </Section>
);

// =========================================================================
//  FOR PETS — marketplace demo (A Search · B Results · C Listing · D Pet · E Quote · F Reservations)
// =========================================================================

const PET_TABS = [
  { id: "search", label: "Search" },
  { id: "results", label: "Results + filters" },
  { id: "listing", label: "Listing detail" },
  { id: "pet", label: "Pet profile" },
  { id: "quote", label: "Quote wizard" },
  { id: "res", label: "Reservations" },
];

// ----- A. Search -----
const PetSearch = () => {
  const [city, setCity] = React.useState("Amsterdam");
  const cities = ["Amsterdam", "Lisbon", "Berlin", "Madrid", "Porto"];
  return (
    <div className="p-6 sm:p-10 bg-cream min-h-[560px]">
      <div className="max-w-3xl mx-auto text-center mb-6">
        <div className="font-display text-[26px] sm:text-[34px] text-forestDeep leading-tight">
          Where does your pet need care?
        </div>
        <p className="text-[13.5px] text-inkSoft mt-2">
          Start with the basics. StayWise helps owners explain what their pet needs before they contact a host.
        </p>
      </div>
      <div className="max-w-3xl mx-auto bg-white border border-line rounded-2xl p-3 shadow-soft grid grid-cols-1 sm:grid-cols-[1.4fr_1fr_1fr_auto] gap-2 items-center">
        <label className="flex items-center gap-2 px-3 py-2 rounded-xl bg-cream border border-line">
          <IconPin size={16} className="text-forest" />
          <div className="flex-1">
            <div className="text-[10.5px] uppercase tracking-[0.12em] text-inkSoft">Location</div>
            <input
              value={city}
              onChange={(e) => setCity(e.target.value)}
              className="bg-transparent text-[14px] text-ink outline-none w-full"
            />
          </div>
        </label>
        <label className="flex items-center gap-2 px-3 py-2 rounded-xl bg-cream border border-line">
          <IconCal size={16} className="text-forest" />
          <div>
            <div className="text-[10.5px] uppercase tracking-[0.12em] text-inkSoft">Dates</div>
            <div className="text-[14px] text-ink">12 → 19 Jun</div>
          </div>
        </label>
        <label className="flex items-center gap-2 px-3 py-2 rounded-xl bg-cream border border-line">
          <IconPaw size={16} className="text-forest" />
          <div>
            <div className="text-[10.5px] uppercase tracking-[0.12em] text-inkSoft">Pets</div>
            <div className="text-[14px] text-ink">1 dog · Medium</div>
          </div>
        </label>
        <span className="inline-flex items-center justify-center gap-2 rounded-xl font-medium px-4 py-2.5 text-[14px] bg-coral text-white shadow-soft">
          <IconSearch size={14} /> Search
        </span>
      </div>

      <div className="max-w-3xl mx-auto mt-6">
        <div className="text-[11.5px] uppercase tracking-[0.12em] text-inkSoft mb-2">Popular cities</div>
        <div className="flex flex-wrap gap-2">
          {cities.map((c) => (
            <button
              key={c}
              onClick={() => setCity(c)}
              className={`px-3 py-1.5 rounded-full border text-[13px] ${
                c === city ? "bg-forest text-cream border-forest" : "bg-white border-line text-ink hover:border-forest/30"
              }`}
            >
              {c}
            </button>
          ))}
        </div>
      </div>

      <div className="max-w-3xl mx-auto mt-8 grid grid-cols-1 sm:grid-cols-3 gap-3">
        {[
          { i: <IconShield size={16} />, t: "Verified hosts only", c: "ID + first-aid checked." },
          { i: <IconMed size={16} />, t: "Care needs first", c: "Medication, yard, size." },
          { i: <IconChat size={16} />, t: "Talk before booking", c: "Ask questions first." },
        ].map((b) => (
          <div key={b.t} className="bg-white border border-line rounded-xl p-3">
            <span className="inline-flex w-9 h-9 rounded-lg bg-mint text-forest items-center justify-center mb-2">{b.i}</span>
            <div className="text-[13.5px] font-semibold text-forestDeep">{b.t}</div>
            <div className="text-[12px] text-inkSoft mt-0.5">{b.c}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

// ----- Real Leaflet map (used in B Results + C Listing) -----
const MiniMap = ({ pins = [], center = [52.366, 4.9], zoom = 13, height = 420 }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!window.L || !ref.current) return;
    if (ref.current._leaflet_id) return;
    const map = window.L.map(ref.current, {
      center,
      zoom,
      zoomControl: true,
      attributionControl: false,
      scrollWheelZoom: false,
    });
    window.L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png", {
      maxZoom: 19,
      subdomains: "abcd",
    }).addTo(map);
    pins.forEach((p) => {
      const html = `
        <div style="
          position:relative;
          background:${p.highlight ? "#B45309" : "#0F4F4A"};
          color:#F1F5F9;
          font-family:'DM Sans',system-ui;
          font-weight:600;
          font-size:13px;
          padding:6px 12px;
          border-radius:9999px;
          box-shadow:0 4px 14px rgba(11,58,55,.25);
          border:2px solid #fff;
          white-space:nowrap;
        ">${p.price}</div>`;
      const icon = window.L.divIcon({
        html,
        className: "sw-pin",
        iconSize: [56, 30],
        iconAnchor: [28, 30],
      });
      window.L.marker(p.coords, { icon }).addTo(map);
    });
    return () => map.remove();
  }, []);
  return <div ref={ref} style={{ width: "100%", height }} />;
};

// ----- B. Results + filters -----
const PetResults = () => {
  const listings = [
    {
      name: "Green Paws Family Boarding",
      city: "Amsterdam, Netherlands",
      tags: ["Fenced yard", "Daily photos", "Oral medication"],
      rating: 4.9,
      reviews: 38,
      price: "€32",
      unit: "night",
      badges: [{ t: "Verified", tone: "mint", i: <IconShield size={12} /> }, { t: "Pet first aid", tone: "coral", i: <IconMed size={12} /> }],
      photoCat: "host",
      photoIdx: 0,
    },
    {
      name: "Cozy Tails Daycare",
      city: "Berlin, Germany",
      tags: ["Indoor playroom", "Camera access", "Puppy care"],
      rating: 4.8,
      reviews: 51,
      price: "€24",
      unit: "day",
      badges: [{ t: "Superhost", tone: "butter", i: <IconStar size={12} /> }, { t: "Fast responder", tone: "mint", i: <IconBolt size={12} /> }],
      photoCat: "host",
      photoIdx: 3,
    },
    {
      name: "Luna's Home Visits",
      city: "Vienna, Austria",
      tags: ["Cats accepted", "Medication support", "Daily updates"],
      rating: 4.7,
      reviews: 22,
      price: "€18",
      unit: "visit",
      badges: [{ t: "Verified address", tone: "mint", i: <IconShield size={12} /> }],
      photoCat: "walk",
      photoIdx: 1,
    },
  ];
  const filters = [
    { k: "Verified only", on: true, i: <IconShield size={12} /> },
    { k: "Superhost", on: false, i: <IconStar size={12} /> },
    { k: "Instant quote", on: false, i: <IconBolt size={12} /> },
    { k: "Fenced yard", on: true, i: <IconFence size={12} /> },
    { k: "Camera access", on: false, i: <IconCamera size={12} /> },
    { k: "Oral medication", on: true, i: <IconMed size={12} /> },
    { k: "Accepts puppies", on: false, i: <IconPaw size={12} /> },
    { k: "Speaks English", on: false, i: <IconLang size={12} /> },
  ];
  return (
    <div className="grid grid-cols-1 lg:grid-cols-[230px_1fr_360px] min-h-[560px] bg-cream">
      {/* Filters */}
      <aside className="p-5 border-r border-line">
        <div className="flex items-center justify-between mb-3">
          <div className="font-display text-[18px] text-forestDeep">Filters</div>
          <span className="text-[11.5px] text-inkSoft">Clear</span>
        </div>
        <div className="text-[11px] uppercase tracking-[0.12em] text-inkSoft">Price (per night)</div>
        <div className="mt-2 relative h-1.5 bg-creamSoft rounded-full">
          <div className="absolute left-0 top-0 h-full w-[55%] bg-coral rounded-full" />
          <div className="absolute -top-1 left-[55%] w-3.5 h-3.5 rounded-full bg-coral border-2 border-white shadow" />
        </div>
        <div className="flex justify-between text-[11px] text-inkSoft mt-1.5 font-mono">
          <span>€15</span>
          <span>up to €71</span>
          <span>€120+</span>
        </div>

        <div className="mt-5 text-[11px] uppercase tracking-[0.12em] text-inkSoft mb-2">Rating</div>
        <div className="flex flex-wrap gap-1.5">
          {["3.5+", "4+", "4.5+", "4.8+"].map((r) => (
            <span
              key={r}
              className={`px-2.5 py-1 rounded-full text-[11.5px] border ${
                r === "4.5+" ? "bg-forest text-cream border-forest" : "bg-white border-line text-ink"
              }`}
            >
              {r}
            </span>
          ))}
        </div>

        <div className="mt-5 text-[11px] uppercase tracking-[0.12em] text-inkSoft mb-2">Quick filters</div>
        <div className="flex flex-wrap gap-1.5">
          {filters.map((f) => (
            <span
              key={f.k}
              className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11.5px] border ${
                f.on ? "bg-forest text-cream border-forest" : "bg-white border-line text-ink"
              }`}
            >
              {f.i}
              {f.k}
            </span>
          ))}
        </div>
      </aside>

      {/* List */}
      <main className="p-5 space-y-3">
        <div className="flex items-center justify-between">
          <div className="text-[13px] text-inkSoft">
            <span className="text-forestDeep font-semibold">91 stays</span> in Amsterdam
          </div>
          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white border border-line text-[12px]">
            Recommended <IconArrow size={12} className="rotate-90" />
          </div>
        </div>
        {listings.map((l, i) => (
          <div key={l.name} className="bg-white border border-line rounded-2xl p-3 flex gap-3 hover:shadow-soft transition-shadow">
            <Photo
              ratio="4/3"
              className="w-[160px] flex-none"
              rounded="rounded-xl"
              cat={l.photoCat}
              idx={l.photoIdx}
              w={320}
              alt={l.name}
              label="photos"
            />
            <div className="flex-1 min-w-0">
              <div className="flex flex-wrap items-center gap-1.5 mb-1">
                {l.badges.map((b) => (
                  <Badge key={b.t} tone={b.tone} icon={b.i}>{b.t}</Badge>
                ))}
              </div>
              <div className="font-display text-[18px] text-forestDeep leading-tight">{l.name}</div>
              <div className="text-[12.5px] text-inkSoft">{l.city}</div>
              <div className="flex flex-wrap gap-1.5 mt-2">
                {l.tags.map((t) => (
                  <span key={t} className="text-[11.5px] px-2 py-0.5 rounded-full border border-line text-ink/80 bg-cream">
                    {t}
                  </span>
                ))}
              </div>
              <div className="flex items-end justify-between mt-2">
                <div className="text-[12px] text-inkSoft inline-flex items-center gap-1">
                  <IconStar size={12} className="text-coral" /> {l.rating} · {l.reviews}
                </div>
                <div className="text-[15px] font-semibold text-forestDeep">
                  {l.price} <span className="text-[12px] text-inkSoft font-normal">/ {l.unit}</span>
                </div>
              </div>
            </div>
          </div>
        ))}
      </main>

      {/* Real map */}
      <aside className="relative border-l border-line">
        <MiniMap
          height={560}
          center={[52.366, 4.9]}
          zoom={13}
          pins={[
            { coords: [52.378, 4.86], price: "€32", highlight: false },
            { coords: [52.358, 4.92], price: "€24", highlight: false },
            { coords: [52.345, 4.88], price: "€18", highlight: true },
          ]}
        />
        <div className="absolute top-3 right-3 bg-white border border-line rounded-full px-2.5 py-1 text-[11px] text-inkSoft font-mono shadow-soft">
          drag · zoom
        </div>
        <div className="absolute bottom-3 right-3 w-9 h-9 rounded-full bg-white border border-line shadow-soft flex items-center justify-center text-forest" aria-hidden="true">
          <IconUser size={14} />
        </div>
      </aside>
    </div>
  );
};

// ----- C. Listing detail -----
const PetListing = () => (
  <div className="p-5 sm:p-6 bg-cream min-h-[560px] space-y-4">
    <div className="grid grid-cols-4 grid-rows-2 gap-2 h-[260px]">
      <Photo ratio={null} className="col-span-2 row-span-2 h-full" src="assets/backyard.jpg" alt="Backyard" label="Backyard · 1 of 5" />
      <Photo ratio={null} className="h-full" cat="dogpark" idx={0} w={400} alt="Dogs in park" label="Nearby park · dogs welcome" />
      <Photo ratio={null} className="h-full" cat="host" idx={2} w={400} alt="Sleeping area" label="Sleeping area" />
      <Photo ratio={null} className="h-full" cat="dog" idx={2} w={400} alt="Pets welcome" label="Pets welcome" />
      <Photo ratio={null} className="h-full" src="assets/dog-playground.webp" alt="Dog playground" label="Dog playground" />
    </div>

    <div className="grid grid-cols-1 lg:grid-cols-[1fr_320px] gap-4">
      <div className="space-y-3">
        <div className="flex items-start justify-between gap-3">
          <div>
            <Badge tone="mint" icon={<IconShield size={12} />}>Verified host</Badge>
            <div className="font-display text-[26px] text-forestDeep leading-tight mt-2">Green Paws Family Boarding</div>
            <div className="text-[13px] text-inkSoft">Amsterdam, Netherlands · fenced 200m² garden</div>
            <div className="flex items-center gap-2 text-[13px] text-inkSoft mt-1">
              <IconStar size={12} className="text-coral" /> 4.9 (38 reviews) · responds in 2h
            </div>
          </div>
          <div className="text-right">
            <div className="text-[22px] font-display text-forestDeep">€32<span className="text-[13px] text-inkSoft font-sans">/night</span></div>
            <div className="text-[11.5px] text-inkSoft">Free cancel · 7d</div>
          </div>
        </div>

        <div className="flex items-center gap-3 bg-white border border-line rounded-2xl p-3">
          <Photo ratio="1/1" className="w-12 flex-none" rounded="rounded-full" cat="person" idx={0} w={120} alt="Host" />
          <div className="flex-1 min-w-0">
            <div className="text-[13.5px] font-semibold text-forestDeep">Hosted by Anna · 4 yrs on StayWise</div>
            <div className="text-[12px] text-inkSoft">Speaks English, Dutch · vet 10 min away</div>
          </div>
          <span className="inline-flex items-center justify-center gap-2 rounded-full font-medium px-3.5 py-2 text-[13px] bg-transparent text-forest border border-forest/20">
            <IconChat size={12} /> Message
          </span>
        </div>

        <div className="bg-white border border-line rounded-2xl p-4">
          <div className="text-[11.5px] uppercase tracking-[0.12em] text-inkSoft mb-2">What this host offers</div>
          <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
            {[
              { i: <IconFence size={13} />, t: "Fenced 200m² yard" },
              { i: <IconCamera size={13} />, t: "Daily photo updates" },
              { i: <IconMed size={13} />, t: "Oral medication" },
              { i: <IconWalk size={13} />, t: "2 walks / day" },
              { i: <IconPaw size={13} />, t: "Up to medium size" },
              { i: <IconHome size={13} />, t: "Cat-free home" },
            ].map((a) => (
              <div key={a.t} className="flex items-center gap-2 text-[12.5px] text-forestDeep">
                <span className="w-7 h-7 rounded-lg bg-mint text-forest flex items-center justify-center">{a.i}</span>
                {a.t}
              </div>
            ))}
          </div>
        </div>
      </div>

      <aside className="bg-white border border-line rounded-2xl p-4 h-fit">
        <div className="text-[11.5px] uppercase tracking-[0.12em] text-inkSoft mb-2">Location</div>
        <div className="rounded-xl overflow-hidden border border-line">
          <MiniMap
            height={170}
            center={[52.378, 4.86]}
            zoom={14}
            pins={[{ coords: [52.378, 4.86], price: "€32", highlight: true }]}
          />
        </div>
        <span className="inline-flex items-center justify-center gap-2 rounded-full font-medium px-4 py-2.5 text-[14px] bg-coral text-white shadow-soft w-full mt-3">
          Request a quote <IconArrow size={14} />
        </span>
        <div className="text-[11.5px] text-inkSoft text-center mt-2">Free to ask — host replies in ~2h</div>
      </aside>
    </div>
  </div>
);

// ----- D. Pet profile -----
const PetProfile = () => (
  <div className="p-5 sm:p-6 bg-cream min-h-[560px] grid grid-cols-1 lg:grid-cols-[300px_1fr] gap-4">
    <div className="bg-white border border-line rounded-2xl p-5 text-center">
      <Photo ratio="1/1" className="w-32 mx-auto" rounded="rounded-full" src="assets/checkin-luna-front.jpg" alt="Luna" objectPosition="center 45%" />
      <div className="font-display text-[22px] text-forestDeep mt-3">Luna</div>
      <div className="text-[12.5px] text-inkSoft">Beagle · F · 3 yrs</div>
      <div className="flex justify-center gap-1.5 mt-3 flex-wrap">
        <Badge tone="mint" icon={<IconCheck size={12} />}>Vaccines OK</Badge>
        <Badge tone="butter" icon={<IconMed size={12} />}>Daily meds</Badge>
      </div>
      <div className="mt-4 pt-4 border-t border-line text-left space-y-1.5 text-[12.5px]">
        <Row k="Size" v="Medium · 12kg" />
        <Row k="Microchip" v="985 141 002 339 471" />
        <Row k="Vet" v="Clínica Petropolis" />
        <Row k="Special" v="Oral medication 2× / day" />
      </div>
    </div>

    <div className="space-y-3">
      <div className="bg-white border border-line rounded-2xl p-4">
        <div className="flex items-center justify-between mb-2">
          <div className="font-display text-[16px] text-forestDeep">Care needs</div>
          <span className="text-[11.5px] text-inkSoft">Saved · used on every quote</span>
        </div>
        <div className="flex flex-wrap gap-1.5">
          {[
            { i: <IconMed size={12} />, t: "Oral medication" },
            { i: <IconFence size={12} />, t: "Needs fenced yard" },
            { i: <IconWalk size={12} />, t: "2 walks / day" },
            { i: <IconPaw size={12} />, t: "OK with other dogs" },
            { i: <IconSlash size={12} />, t: "No cats" },
            { i: <IconClock size={12} />, t: "Quiet at night" },
          ].map((c) => (
            <span key={c.t} className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-cream border border-line text-[12px] text-forestDeep">
              {c.i}{c.t}
            </span>
          ))}
        </div>
      </div>

      <div className="bg-white border border-line rounded-2xl p-4">
        <div className="font-display text-[16px] text-forestDeep mb-2">Vaccinations</div>
        <div className="space-y-1.5">
          {[
            { v: "Rabies", d: "12 Mar 2025", ok: true },
            { v: "DHPP (5-in-1)", d: "08 Jan 2025", ok: true },
            { v: "Heartworm protection", d: "Monthly · last dose 01 May 2025", ok: true },
          ].map((r) => (
            <div key={r.v} className="flex items-center justify-between p-2 rounded-lg bg-cream border border-line text-[13px]">
              <span className="inline-flex items-center gap-2">
                <span className={`w-2 h-2 rounded-full ${r.ok ? "bg-forest" : "bg-coral"}`} /> {r.v}
              </span>
              <span className={`text-[12px] ${r.ok ? "text-inkSoft" : "text-coral font-semibold"}`}>{r.d}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="bg-mint/40 border border-mintDeep/50 rounded-2xl p-4 flex items-center gap-3">
        <span className="w-10 h-10 rounded-full bg-forest text-cream inline-flex items-center justify-center"><IconBolt size={16} /></span>
        <div className="flex-1 text-[13px] text-forestDeep">
          Your profile is complete — quote requests show everything the host needs to say <strong>yes</strong>.
        </div>
      </div>
    </div>
  </div>
);
const Row = ({ k, v }) => (
  <div className="flex items-baseline justify-between gap-2">
    <span className="text-inkSoft text-[11.5px] uppercase tracking-[0.1em]">{k}</span>
    <span className="text-forestDeep font-medium text-right">{v}</span>
  </div>
);

// ----- E. Quote wizard -----
const PetQuote = () => {
  const steps = ["Dates", "Pet", "Services", "Review"];
  const [step] = React.useState(3);
  return (
    <div className="p-5 sm:p-6 bg-cream min-h-[560px] grid grid-cols-1 lg:grid-cols-[1fr_340px] gap-4">
      <div className="bg-white border border-line rounded-2xl p-5">
        <div className="flex items-center gap-2 mb-5">
          {steps.map((s, i) => (
            <React.Fragment key={s}>
              <div className={`inline-flex items-center gap-2 px-3 py-1 rounded-full text-[12px] border ${
                i < step ? "bg-mint border-mintDeep/60 text-forest" :
                i === step ? "bg-forest border-forest text-cream" :
                "bg-cream border-line text-inkSoft"
              }`}>
                <span className="w-5 h-5 rounded-full inline-flex items-center justify-center text-[10px] font-mono bg-white/40">{i + 1}</span>
                {s}
              </div>
              {i < steps.length - 1 && <div className="flex-1 h-px bg-line" />}
            </React.Fragment>
          ))}
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <Field2 k="Check-in" v="Thu 12 Jun · 14:00" />
          <Field2 k="Check-out" v="Thu 19 Jun · 11:00" />
          <Field2 k="Nights" v="7" />
          <Field2 k="Pets" v="Luna · Beagle" />
        </div>

        <div className="mt-4 text-[11.5px] uppercase tracking-[0.12em] text-inkSoft mb-2">Add-on services</div>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
          {[
            { i: <IconWalk size={14} />, t: "Extra daily walk", p: "+€8 / day", on: true },
            { i: <IconCamera size={14} />, t: "Daily photo report", p: "Included", on: true },
            { i: <IconMed size={14} />, t: "Oral medication", p: "Included", on: true },
            { i: <IconKey size={14} />, t: "Late check-out 18:00", p: "+€10", on: false },
          ].map((a) => (
            <div key={a.t} className={`flex items-center gap-3 p-3 rounded-xl border ${a.on ? "bg-mint/40 border-mintDeep/50" : "bg-cream border-line"}`}>
              <span className={`w-8 h-8 rounded-lg flex items-center justify-center ${a.on ? "bg-forest text-cream" : "bg-white text-forest border border-line"}`}>{a.i}</span>
              <div className="flex-1">
                <div className="text-[13px] font-medium text-forestDeep">{a.t}</div>
                <div className="text-[11.5px] text-inkSoft">{a.p}</div>
              </div>
              <span className={`w-5 h-5 rounded-md border flex items-center justify-center ${a.on ? "bg-forest border-forest text-cream" : "border-line"}`}>
                {a.on && <IconCheck size={12} />}
              </span>
            </div>
          ))}
        </div>

        <div className="mt-4 text-[11.5px] uppercase tracking-[0.12em] text-inkSoft mb-1.5">Message to host</div>
        <div className="bg-cream border border-line rounded-xl p-3 text-[13px] text-ink/85">
          Hi Anna — Luna takes 5mg of oral medication at 8h &amp; 20h. She gets along with other dogs but is scared of cats. Looking forward to hearing from you!
        </div>
      </div>

      <aside className="bg-white border border-line rounded-2xl p-4 h-fit">
        <Photo ratio="16/9" className="w-full" cat="host" idx={0} w={400} alt="Listing" />
        <div className="font-display text-[16px] text-forestDeep mt-3">Green Paws Family Boarding</div>
        <div className="text-[12px] text-inkSoft">Amsterdam · 7 nights</div>

        <div className="mt-3 pt-3 border-t border-line space-y-1.5 text-[13px]">
          <Line k="€32 × 7 nights" v="€224" />
          <Line k="Extra walks (7×)" v="€56" />
          <Line k="Service fee" v="€18" />
        </div>
        <div className="mt-2 pt-2 border-t border-line flex justify-between text-[15px] font-semibold text-forestDeep">
          <span>Total</span>
          <span>€298</span>
        </div>
        <span className="inline-flex items-center justify-center gap-2 rounded-full font-medium px-4 py-2.5 text-[14px] bg-coral text-white shadow-soft w-full mt-3">
          Send quote request <IconArrow size={14} />
        </span>
        <div className="text-[11px] text-inkSoft text-center mt-2">No charge yet — host confirms first</div>
      </aside>
    </div>
  );
};
const Field2 = ({ k, v }) => (
  <div className="bg-cream border border-line rounded-xl p-2.5">
    <div className="text-[10.5px] uppercase tracking-[0.12em] text-inkSoft">{k}</div>
    <div className="text-[14px] text-forestDeep font-medium mt-0.5">{v}</div>
  </div>
);
const Line = ({ k, v }) => (
  <div className="flex justify-between text-inkSoft">
    <span>{k}</span>
    <span className="text-forestDeep font-medium">{v}</span>
  </div>
);

// ----- F. Reservations -----
const PetReservations = () => (
  <div className="p-5 sm:p-6 bg-cream min-h-[560px] grid grid-cols-1 lg:grid-cols-[1fr_360px] gap-4">
    <div className="space-y-3">
      {[
        { name: "Green Paws Family Boarding", city: "Amsterdam", dates: "12 → 19 Jun", status: "Confirmed", tone: "mint", price: "€298", pet: "Luna", cat: "host", idx: 0 },
        { name: "Cozy Tails Daycare", city: "Berlin", dates: "5 → 7 Jul", status: "Awaiting host", tone: "butter", price: "€72", pet: "Luna", cat: "host", idx: 3 },
        { name: "Luna's Home Visits", city: "Vienna", dates: "22 → 24 Aug", status: "Quote sent", tone: "coral", price: "€54", pet: "Mochi", cat: "walk", idx: 1 },
      ].map((r) => (
        <div key={r.name} className="bg-white border border-line rounded-2xl p-3 flex gap-3 items-center">
          <Photo ratio="1/1" className="w-20 flex-none" rounded="rounded-xl" cat={r.cat} idx={r.idx} w={200} alt={r.name} />
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 mb-1 flex-wrap">
              <Badge tone={r.tone}>{r.status}</Badge>
              <span className="text-[11.5px] text-inkSoft">Pet: {r.pet}</span>
            </div>
            <div className="font-display text-[16px] text-forestDeep">{r.name}</div>
            <div className="text-[12px] text-inkSoft">{r.city} · {r.dates}</div>
          </div>
          <div className="text-right">
            <div className="text-[15px] font-semibold text-forestDeep">{r.price}</div>
            <div className="text-[11px] text-inkSoft">total</div>
          </div>
        </div>
      ))}
    </div>

    <aside className="bg-white border border-line rounded-2xl p-4 flex flex-col h-[480px]">
      <div className="flex items-center gap-2 pb-3 border-b border-line">
        <Photo ratio="1/1" className="w-9 flex-none" rounded="rounded-full" cat="person" idx={0} w={90} alt="Anna" />
        <div>
          <div className="text-[13.5px] font-semibold text-forestDeep">Anna · Green Paws</div>
          <div className="text-[11px] text-inkSoft">Active now · replies in 2h</div>
        </div>
      </div>
      <div className="flex-1 overflow-hidden py-3 space-y-2">
        {[
          { s: "them", t: "Hi! Yes we can give Luna her meds — happy to have her." },
          { s: "me", t: "Amazing. She's a bit anxious on day 1, OK to send a photo?" },
          { s: "them", t: "Of course — we send daily updates 🌿" },
          { s: "me", t: "Perfect, confirming the dates." },
        ].map((b, i) => (
          <div key={i} className={`text-[12.5px] max-w-[85%] px-3 py-1.5 rounded-2xl ${
            b.s === "me" ? "bg-forest text-cream ml-auto rounded-br-sm" : "bg-cream border border-line text-ink rounded-bl-sm"
          }`}>{b.t}</div>
        ))}
      </div>
      <div className="pt-3 border-t border-line flex items-center gap-2">
        <input className="flex-1 bg-cream border border-line rounded-full px-3 py-2 text-[13px] outline-none" placeholder="Message Anna…" />
        <span className="inline-flex items-center justify-center gap-2 rounded-full font-medium px-3.5 py-2 text-[13px] bg-coral text-white shadow-soft">
          <IconArrow size={14} />
        </span>
      </div>
    </aside>
  </div>
);

const DemoForPets = () => {
  const ids = PET_TABS.map((t) => t.id);
  const [active, setActive] = useAutoAdvance(ids, 7000);
  return (
    <DemoShell
      id="pets-preview"
      eyebrow="See it in action"
      title="What pet owners can do on StayWise."
      kicker="A guided preview of the owner journey: create a pet profile, search trusted care, compare details, ask questions, and request a quote."
      tabs={PET_TABS}
      active={active}
      onChange={setActive}
    >
      {active === "search" && <PetSearch />}
      {active === "results" && <PetResults />}
      {active === "listing" && <PetListing />}
      {active === "pet" && <PetProfile />}
      {active === "quote" && <PetQuote />}
      {active === "res" && <PetReservations />}
    </DemoShell>
  );
};

// =========================================================================
//  FOR SITTERS — admin app demo
// =========================================================================

const SIT_TABS = [
  { id: "dashboard", label: "Dashboard" },
  { id: "bookings", label: "Bookings" },
  { id: "checkin", label: "Check-in" },
  { id: "pet", label: "Pet records" },
  { id: "payments", label: "Quotes & payments" },
  { id: "calendar", label: "Calendar" },
];

const SitSidebar = ({ active }) => {
  const items = [
    { id: "dashboard", t: "Dashboard", i: <IconHome size={14} /> },
    { id: "bookings", t: "Bookings", i: <IconCal size={14} /> },
    { id: "checkin", t: "Check-ins", i: <IconCamera size={14} /> },
    { id: "pet", t: "Pets & clients", i: <IconPaw size={14} /> },
    { id: "payments", t: "Quotes & payments", i: <IconChart size={14} /> },
    { id: "calendar", t: "Calendar", i: <IconFilter size={14} /> },
  ];
  return (
    <div className="hidden md:flex flex-col gap-1 p-3 bg-forest text-cream/85 min-h-[560px]">
      <div className="flex items-center gap-2 px-2 py-2 mb-1">
        <Logo tone="cream" height={22} />
      </div>
      {items.map((it) => (
        <div
          key={it.id}
          className={`flex items-center gap-2 px-2.5 py-2 rounded-lg text-[12.5px] ${
            it.id === active ? "bg-cream/15 text-cream" : "text-cream/70"
          }`}
        >
          {it.i}
          <span className="truncate" dangerouslySetInnerHTML={{ __html: it.t }} />
        </div>
      ))}
      <div className="mt-auto pt-4 border-t border-cream/10 flex items-center gap-2 px-2">
        <Photo ratio="1/1" className="w-7 flex-none" rounded="rounded-full" cat="person" idx={0} w={80} />
        <div className="text-[11.5px] leading-tight">
          <div className="text-cream">Sarah M.</div>
          <div className="text-cream/60">Bristol · Plan: Pro</div>
        </div>
      </div>
    </div>
  );
};

const SitFrame = ({ active, title, children, action }) => (
  <div className="grid grid-cols-1 md:grid-cols-[180px_1fr] bg-cream min-h-[560px]">
    <SitSidebar active={active} />
    <div className="p-4 sm:p-5 space-y-4">
      <div className="flex items-center justify-between">
        <div className="font-display text-[22px] text-forestDeep">{title}</div>
        {action}
      </div>
      {children}
    </div>
  </div>
);

// ----- A. Dashboard -----
const SitDashboard = () => (
  <SitFrame active="dashboard" title="Good morning, Sarah" action={<Badge tone="mint" icon={<IconBolt size={12} />}>Live</Badge>}>
    <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
      {[
        { k: "Occupancy", v: "82%", s: "+6% vs last wk" },
        { k: "Today arrivals", v: "4", s: "2 confirmed" },
        { k: "Departures", v: "3", s: "1 photo pending" },
        { k: "Outstanding", v: "€480", s: "2 quotes open" },
      ].map((s) => (
        <div key={s.k} className="bg-white border border-line rounded-xl p-3">
          <div className="text-[10.5px] uppercase tracking-[0.12em] text-inkSoft">{s.k}</div>
          <div className="text-[22px] font-display text-forestDeep mt-1 leading-none">{s.v}</div>
          <div className="text-[11px] text-inkSoft mt-1">{s.s}</div>
        </div>
      ))}
    </div>
    <div className="grid grid-cols-1 lg:grid-cols-5 gap-3">
      <div className="lg:col-span-3 bg-white border border-line rounded-xl p-3">
        <div className="flex items-center justify-between mb-2">
          <div className="text-[12px] uppercase tracking-[0.12em] text-inkSoft">Today's activity</div>
          <span className="text-[11px] text-inkSoft">9 events</span>
        </div>
        <div className="space-y-2">
          {[
            { time: "08:12", t: "Luna (Beagle) checked in", tone: "mint", i: <IconCheck size={12} /> },
            { time: "09:40", t: "Photo report sent to Mariana S.", tone: "butter", i: <IconCamera size={12} /> },
            { time: "11:15", t: "Quote sent to Tom B. — €420", tone: "coral", i: <IconChart size={12} /> },
            { time: "12:30", t: "Pixel (cat) arriving at 14:00", tone: "mint", i: <IconCat size={12} /> },
            { time: "13:05", t: "Payment received — €224", tone: "butter", i: <IconBolt size={12} /> },
          ].map((e, i) => (
            <div key={i} className="flex items-center gap-3 p-2 rounded-lg bg-cream border border-line">
              <span className="font-mono text-[11px] text-inkSoft w-12">{e.time}</span>
              <Badge tone={e.tone} icon={e.i}>{e.t}</Badge>
            </div>
          ))}
        </div>
      </div>
      <div className="lg:col-span-2 bg-white border border-line rounded-xl p-3">
        <div className="text-[12px] uppercase tracking-[0.12em] text-inkSoft mb-2">Capacity this week</div>
        <div className="flex items-end gap-1.5 h-[120px]">
          {[55, 70, 88, 82, 95, 78, 60].map((v, i) => (
            <div key={i} className="flex-1 flex flex-col items-center gap-1">
              <div className={`w-full rounded-md ${i === 4 ? "bg-coral" : "bg-forest/85"}`} style={{ height: `${v}%` }} />
              <span className="text-[10px] text-inkSoft font-mono">{["M","T","W","T","F","S","S"][i]}</span>
            </div>
          ))}
        </div>
        <div className="mt-3 pt-3 border-t border-line flex items-center justify-between text-[12px]">
          <span className="text-inkSoft">Peak Friday</span>
          <span className="font-semibold text-forestDeep">12 / 13 rooms</span>
        </div>
      </div>
    </div>
  </SitFrame>
);

// ----- B. Bookings -----
const SitBookings = () => {
  const rows = [
    { pet: "Luna", breed: "Beagle · M", client: "Mariana S.", dates: "12 → 19 Jun", room: "Suite 2", status: "Checked-in", tone: "mint", cat: "dog", idx: 0, src: "assets/checkin-luna-front.jpg", objectPosition: "center 45%" },
    { pet: "Pixel", breed: "Tabby · cat", client: "Tom B.", dates: "14 → 22 Jun", room: "Cat lounge", status: "Arriving 14:00", tone: "butter", cat: "cat", idx: 0 },
    { pet: "Otis", breed: "Labrador · L", client: "Hannah W.", dates: "12 → 16 Jun", room: "Suite 4", status: "Photo due", tone: "coral", cat: "dog", idx: 1 },
    { pet: "Bisou", breed: "Frenchie · S", client: "Léa D.", dates: "15 → 17 Jun", room: "Suite 1", status: "Confirmed", tone: "mint", cat: "dog", idx: 3 },
    { pet: "Mochi", breed: "Shiba · M", client: "Pedro F.", dates: "16 → 20 Jun", room: "Suite 3", status: "Quote sent", tone: "coral", cat: "dog", idx: 2 },
  ];
  return (
    <SitFrame
      active="bookings"
      title="Bookings"
      action={
        <div className="flex items-center gap-2">
          <Badge tone="mint">All · 23</Badge>
          <Badge tone="butter">This week · 7</Badge>
          <span className="inline-flex items-center justify-center gap-2 rounded-full font-medium px-3.5 py-2 text-[13px] bg-coral text-white shadow-soft">
            <IconArrow size={12} /> New booking
          </span>
        </div>
      }
    >
      <div className="bg-white border border-line rounded-2xl overflow-hidden">
        <div className="grid grid-cols-[80px_2fr_1.5fr_1.4fr_1fr_1.2fr] gap-3 px-4 py-2.5 bg-cream border-b border-line text-[11.5px] uppercase tracking-[0.12em] text-inkSoft">
          <div>Pet</div><div>Client</div><div>Dates</div><div>Room</div><div>Status</div><div className="text-right">Actions</div>
        </div>
        {rows.map((r, i) => (
          <div key={i} className="grid grid-cols-[80px_2fr_1.5fr_1.4fr_1fr_1.2fr] gap-3 px-4 py-3 items-center border-b border-line last:border-0 hover:bg-cream/50">
            <div className="flex items-center gap-2">
              <Photo ratio="1/1" className="w-10 flex-none" rounded="rounded-lg" src={r.src} cat={r.cat} idx={r.idx} w={120} alt={r.pet} objectPosition={r.objectPosition} />
            </div>
            <div>
              <div className="text-[13.5px] font-semibold text-forestDeep">{r.pet}</div>
              <div className="text-[11.5px] text-inkSoft">{r.breed} · {r.client}</div>
            </div>
            <div className="text-[13px] text-ink">{r.dates}</div>
            <div className="text-[13px] text-ink">{r.room}</div>
            <div><Badge tone={r.tone}>{r.status}</Badge></div>
            <div className="flex justify-end gap-1.5">
              <span className="w-7 h-7 rounded-lg border border-line bg-cream text-forest inline-flex items-center justify-center"><IconChat size={12} /></span>
              <span className="w-7 h-7 rounded-lg border border-line bg-cream text-forest inline-flex items-center justify-center"><IconCamera size={12} /></span>
              <span className="w-7 h-7 rounded-lg border border-line bg-cream text-forest inline-flex items-center justify-center"><IconArrow size={12} /></span>
            </div>
          </div>
        ))}
      </div>
    </SitFrame>
  );
};

const checkinPhotoSlots = [
  { label: "Front", hint: "Face, chest, paws" },
  { label: "Left side", hint: "Full body profile" },
  { label: "Right side", hint: "Other side profile" },
  { label: "Back", hint: "Back and tail" },
];

const PhotoCaptureSlot = ({ label, hint }) => (
  <div className="aspect-square rounded-2xl border-2 border-dashed border-line bg-cream/80 p-3 flex flex-col items-center justify-center text-center">
    <div className="w-11 h-11 rounded-full bg-white border border-line text-forest flex items-center justify-center shadow-soft">
      <IconCamera size={20} />
    </div>
    <div className="mt-2 font-semibold text-[13px] text-forestDeep">{label}</div>
    <div className="mt-0.5 text-[10.5px] text-inkSoft leading-snug min-h-[28px]">{hint}</div>
    <span className="mt-2 inline-flex items-center gap-1.5 rounded-full bg-white border border-line px-2.5 py-1 text-[11px] text-forest">
      <IconCamera size={11} /> Add photo
    </span>
  </div>
);

// ----- C. Check-in with photos -----
const SitCheckin = () => (
  <SitFrame
    active="checkin"
    title="Check-in · Luna"
    action={<Badge tone="mint" icon={<IconCheck size={12} />}>Step 2 of 3</Badge>}
  >
    <div className="grid grid-cols-1 lg:grid-cols-[1fr_360px] gap-4">
      <div className="bg-white border border-line rounded-2xl p-4">
        <div className="flex items-center justify-between gap-3 mb-2">
          <div className="text-[11.5px] uppercase tracking-[0.12em] text-inkSoft">Arrival photo preview</div>
          <Badge tone="butter">4 required</Badge>
        </div>
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
          {checkinPhotoSlots.map((slot) => (
            <PhotoCaptureSlot key={slot.label} {...slot} />
          ))}
        </div>

        <div className="mt-4 text-[11.5px] uppercase tracking-[0.12em] text-inkSoft mb-2">Belongings</div>
        <div className="grid grid-cols-2 gap-2">
          {[
            { t: "Travel bag · red", on: true },
            { t: "Food container · 1.2kg", on: true },
            { t: "Toy · rubber bone", on: true },
            { t: "Medication · 14 pills", on: true },
            { t: "Blanket · grey", on: true },
            { t: "Leash · black harness", on: false },
          ].map((b) => (
            <label key={b.t} className={`flex items-center gap-2 p-2.5 rounded-xl border ${b.on ? "bg-mint/40 border-mintDeep/50" : "bg-cream border-line"}`}>
              <span className={`w-5 h-5 rounded-md border flex items-center justify-center ${b.on ? "bg-forest border-forest text-cream" : "border-line"}`}>
                {b.on && <IconCheck size={12} />}
              </span>
              <span className="text-[13px] text-forestDeep">{b.t}</span>
            </label>
          ))}
        </div>

        <div className="mt-4 text-[11.5px] uppercase tracking-[0.12em] text-inkSoft mb-2">Behavioural assessment on arrival</div>
        <div className="flex flex-wrap gap-1.5">
          {["Calm", "Alert", "Curious", "Anxious", "Tail wagging"].map((m, i) => (
            <span key={m} className={`px-2.5 py-1 rounded-full text-[12px] border ${
              i < 3 ? "bg-forest text-cream border-forest" : "bg-cream border-line text-ink"
            }`}>{m}</span>
          ))}
        </div>
        <div className="mt-3 bg-cream border border-line rounded-xl p-3 text-[13px] text-ink/85">
          Luna arrived at 14:08, ate within an hour, took her morning medication at 16:00. Settling well.
        </div>
      </div>

      <aside className="space-y-3">
        <div className="bg-white border border-line rounded-2xl p-4">
          <div className="flex items-center gap-3">
            <Photo ratio="1/1" className="w-12 flex-none" rounded="rounded-full" src="assets/checkin-luna-front.jpg" alt="Luna" objectPosition="center 45%" />
            <div>
              <div className="font-display text-[16px] text-forestDeep">Luna</div>
              <div className="text-[11.5px] text-inkSoft">Beagle · 12kg · 3 yrs</div>
            </div>
          </div>
          <div className="mt-3 pt-3 border-t border-line text-[12.5px] space-y-1.5">
            <Row k="Room" v="Suite 2" />
            <Row k="Stay" v="12 → 19 Jun" />
            <Row k="Meds" v="2× / day · 08h &amp; 20h" />
            <Row k="Emergency" v="Clínica Petropolis" />
          </div>
        </div>
        <div className="bg-mint/40 border border-mintDeep/50 rounded-2xl p-3 flex gap-2 items-start">
          <IconShield size={16} className="text-forest mt-0.5" />
          <div className="text-[12.5px] text-forestDeep">
            Front, side, and back photos auto-share with Mariana when you complete check-in. <strong>No disputes on departure.</strong>
          </div>
        </div>
        <span className="inline-flex items-center justify-center gap-2 rounded-full font-medium px-4 py-2.5 text-[14px] bg-coral text-white shadow-soft w-full">
          Complete check-in <IconArrow size={14} />
        </span>
      </aside>
    </div>
  </SitFrame>
);

// ----- D. Pet records (sitter side, fuller record) -----
const SitPet = () => (
  <SitFrame
    active="pet"
    title="Luna · Beagle"
    action={
      <div className="flex items-center gap-2">
        <Badge tone="mint" icon={<IconCheck size={12} />}>Vaccines OK</Badge>
        <span className="inline-flex items-center justify-center gap-2 rounded-full font-medium px-3.5 py-2 text-[13px] bg-transparent text-forest border border-forest/20">
          <IconChat size={12} /> Message owner
        </span>
      </div>
    }
  >
    <div className="grid grid-cols-1 lg:grid-cols-[260px_1fr] gap-4">
      <div className="bg-white border border-line rounded-2xl p-4 text-center">
        <Photo ratio="1/1" className="w-28 mx-auto" rounded="rounded-full" src="assets/checkin-luna-front.jpg" alt="Luna" objectPosition="center 45%" />
        <div className="font-display text-[18px] text-forestDeep mt-2">Luna</div>
        <div className="text-[12px] text-inkSoft">Owner: Mariana S.</div>
        <div className="mt-3 pt-3 border-t border-line text-left space-y-1.5 text-[12.5px]">
          <Row k="Microchip" v="985 141 002 339 471" />
          <Row k="Weight" v="12 kg" />
          <Row k="Age" v="3 yrs" />
          <Row k="Size" v="Medium" />
        </div>
      </div>
      <div className="space-y-3">
        <div className="bg-white border border-line rounded-2xl p-4">
          <div className="flex items-center justify-between mb-2">
            <div className="font-display text-[16px] text-forestDeep">Veterinary record</div>
            <span className="text-[11.5px] text-inkSoft">One tap away in any situation</span>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
            <div className="p-3 rounded-xl bg-cream border border-line">
              <div className="flex items-center gap-2 text-[13px] font-semibold text-forestDeep">
                <IconStethoscope size={14} /> Clínica Petropolis
              </div>
              <div className="text-[11.5px] text-inkSoft mt-1">Amsterdam · 10 min away</div>
              <div className="text-[12px] text-forestDeep mt-1.5">+31 20 555 9911 · dr. van Dijk</div>
            </div>
            <div className="p-3 rounded-xl bg-coralSoft/60 border border-coral/30">
              <div className="text-[11px] uppercase tracking-[0.12em] text-coral">Emergency contact</div>
              <div className="text-[13px] font-semibold text-forestDeep mt-1">Mariana S. (owner)</div>
              <div className="text-[12px] text-ink/80 mt-0.5">+34 612 482 091</div>
            </div>
          </div>
        </div>

        <div className="bg-white border border-line rounded-2xl p-4">
          <div className="font-display text-[16px] text-forestDeep mb-2">Vaccinations</div>
          <div className="space-y-1.5">
            {[
              { v: "Rabies", d: "12 Mar 2025", ok: true },
              { v: "DHPP (5-in-1)", d: "08 Jan 2025", ok: true },
              { v: "Leptospirosis", d: "08 Jan 2025", ok: true },
              { v: "Bordetella", d: "Renewal due 22 Jul 2025", ok: false },
            ].map((r) => (
              <div key={r.v} className="flex items-center justify-between p-2 rounded-lg bg-cream border border-line text-[13px]">
                <span className="inline-flex items-center gap-2"><span className={`w-2 h-2 rounded-full ${r.ok ? "bg-forest" : "bg-coral"}`} />{r.v}</span>
                <span className={`text-[12px] ${r.ok ? "text-inkSoft" : "text-coral font-semibold"}`}>{r.d}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="bg-white border border-line rounded-2xl p-4">
          <div className="font-display text-[16px] text-forestDeep mb-2">Stay history</div>
          <div className="space-y-2">
            {[
              { d: "12 → 19 Jun '25", t: "Boarding · Suite 2", st: "In progress", tone: "mint" },
              { d: "01 → 04 Feb '25", t: "Boarding · Suite 1", st: "Completed", tone: "cream" },
              { d: "22 → 24 Dec '24", t: "Daycare · 3 days", st: "Completed", tone: "cream" },
            ].map((s, i) => (
              <div key={i} className="flex items-center justify-between p-2.5 rounded-lg bg-cream border border-line text-[13px]">
                <div className="flex items-center gap-2">
                  <span className="font-mono text-[11.5px] text-inkSoft">{s.d}</span>
                  <span className="text-forestDeep">{s.t}</span>
                </div>
                <Badge tone={s.tone}>{s.st}</Badge>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </SitFrame>
);

// ----- E. Quotes & payments -----
const SitPayments = () => (
  <SitFrame
    active="payments"
    title="Quotes & payments"
    action={
      <span className="inline-flex items-center justify-center gap-2 rounded-full font-medium px-3.5 py-2 text-[13px] bg-coral text-white shadow-soft">
        <IconArrow size={12} /> Build quote
      </span>
    }
  >
    <div className="grid grid-cols-1 lg:grid-cols-[1fr_360px] gap-4">
      <div className="bg-white border border-line rounded-2xl p-4">
        <div className="grid grid-cols-3 gap-2 mb-4">
          {[
            { k: "Paid this month", v: "€3,240", tone: "mint" },
            { k: "Outstanding", v: "€480", tone: "butter" },
            { k: "Refunded", v: "€120", tone: "coral" },
          ].map((s) => (
            <div key={s.k} className={`rounded-xl p-3 border ${
              s.tone === "mint" ? "bg-mint/40 border-mintDeep/40" :
              s.tone === "butter" ? "bg-butter/60 border-butter" :
              "bg-coralSoft/60 border-coral/20"
            }`}>
              <div className="text-[10.5px] uppercase tracking-[0.12em] text-inkSoft">{s.k}</div>
              <div className="text-[20px] font-display text-forestDeep leading-none mt-1">{s.v}</div>
            </div>
          ))}
        </div>

        <div className="grid grid-cols-[1.4fr_1fr_1fr_1fr_0.6fr] gap-3 px-3 py-2 bg-cream rounded-lg text-[11.5px] uppercase tracking-[0.12em] text-inkSoft">
          <div>Client / Pet</div><div>Total</div><div>Issued</div><div>Status</div><div></div>
        </div>
        {[
          { c: "Mariana S.", p: "Luna", total: "€298", issued: "08 Jun", st: "Paid", tone: "mint" },
          { c: "Tom B.", p: "Pixel", total: "€420", issued: "10 Jun", st: "Awaiting", tone: "butter" },
          { c: "Hannah W.", p: "Otis", total: "€180", issued: "09 Jun", st: "Paid", tone: "mint" },
          { c: "Léa D.", p: "Bisou", total: "€60", issued: "11 Jun", st: "Quote sent", tone: "coral" },
          { c: "Pedro F.", p: "Mochi", total: "€340", issued: "11 Jun", st: "Quote sent", tone: "coral" },
        ].map((r, i) => (
          <div key={i} className="grid grid-cols-[1.4fr_1fr_1fr_1fr_0.6fr] gap-3 px-3 py-2.5 items-center border-b border-line last:border-0 text-[13px]">
            <div>
              <div className="text-forestDeep font-semibold">{r.c}</div>
              <div className="text-[11px] text-inkSoft">Pet: {r.p}</div>
            </div>
            <div className="font-semibold text-forestDeep">{r.total}</div>
            <div className="text-inkSoft">{r.issued}</div>
            <div><Badge tone={r.tone}>{r.st}</Badge></div>
            <div className="text-right text-inkSoft"><IconArrow size={12} /></div>
          </div>
        ))}
      </div>

      <aside className="bg-white border border-line rounded-2xl p-4 h-fit">
        <div className="text-[11.5px] uppercase tracking-[0.12em] text-inkSoft mb-1">Building quote</div>
        <div className="font-display text-[16px] text-forestDeep">Pedro F. · Mochi</div>
        <div className="text-[12px] text-inkSoft">Shiba · 16 → 20 Jun (4 nights)</div>
        <div className="mt-3 pt-3 border-t border-line space-y-1.5 text-[13px]">
          <Line k="Boarding €32 × 4" v="€128" />
          <Line k="Daily walk €8 × 4" v="€32" />
          <Line k="Medication" v="Included" />
          <Line k="Service fee" v="€12" />
        </div>
        <div className="mt-2 pt-2 border-t border-line flex justify-between text-[15px] font-semibold text-forestDeep">
          <span>Total</span><span>€172</span>
        </div>
        <span className="inline-flex items-center justify-center gap-2 rounded-full font-medium px-4 py-2.5 text-[14px] bg-coral text-white shadow-soft w-full mt-3">
          Send quote <IconArrow size={14} />
        </span>
      </aside>
    </div>
  </SitFrame>
);

// ----- F. Calendar / capacity -----
const SitCalendar = () => {
  // 2 weeks × 7 days grid; values 0..1 of capacity
  const data = [
    [0.4, 0.6, 0.8, 0.7, 0.95, 0.85, 0.5],
    [0.55, 0.7, 0.88, 0.92, 1.0, 0.78, 0.6],
  ];
  const rooms = [
    { n: "Suite 1", pet: "Bisou", cat: "dog", idx: 3 },
    { n: "Suite 2", pet: "Luna", cat: "dog", idx: 0, src: "assets/checkin-luna-front.jpg", objectPosition: "center 45%" },
    { n: "Suite 3", pet: "Mochi", cat: "dog", idx: 2 },
    { n: "Suite 4", pet: "Otis", cat: "dog", idx: 1 },
    { n: "Cat lounge", pet: "Pixel", cat: "cat", idx: 0 },
  ];
  return (
    <SitFrame
      active="calendar"
      title="Capacity calendar"
      action={
        <div className="flex items-center gap-2">
          <Badge tone="mint">June 2025</Badge>
          <span className="inline-flex items-center justify-center gap-2 rounded-full font-medium px-3.5 py-2 text-[13px] bg-transparent text-forest border border-forest/20">
            Set limits
          </span>
        </div>
      }
    >
      <div className="bg-white border border-line rounded-2xl p-4">
        <div className="grid grid-cols-[180px_repeat(7,1fr)] gap-2 items-end">
          <div />
          {["Mon","Tue","Wed","Thu","Fri","Sat","Sun"].map((d, i) => (
            <div key={d} className="text-center">
              <div className="text-[11px] uppercase tracking-[0.12em] text-inkSoft">{d}</div>
              <div className="text-[15px] font-display text-forestDeep">{9 + i}</div>
            </div>
          ))}
        </div>
        <div className="mt-3 text-[11.5px] uppercase tracking-[0.12em] text-inkSoft mb-1.5">Daily occupancy · this week</div>
        <div className="grid grid-cols-[180px_repeat(7,1fr)] gap-2 items-end">
          <div className="text-[12.5px] text-inkSoft pl-1">13 rooms total</div>
          {data[0].map((v, i) => (
            <div key={i} className={`h-16 rounded-lg flex items-end p-1 ${v >= 0.9 ? "bg-coralSoft" : v >= 0.7 ? "bg-butter/70" : "bg-mint/60"}`}>
              <div
                className={`w-full rounded ${v >= 0.9 ? "bg-coral" : v >= 0.7 ? "bg-amber-500" : "bg-forest"}`}
                style={{ height: `${v * 100}%` }}
              />
            </div>
          ))}
        </div>

        <div className="mt-5 text-[11.5px] uppercase tracking-[0.12em] text-inkSoft mb-2">Rooms · this week</div>
        <div className="space-y-1.5">
          {rooms.map((r, ri) => (
            <div key={r.n} className="grid grid-cols-[180px_repeat(7,1fr)] gap-2 items-center">
              <div className="flex items-center gap-2">
                <Photo ratio="1/1" className="w-7 flex-none" rounded="rounded-md" src={r.src} cat={r.cat} idx={r.idx} w={80} alt={r.pet} objectPosition={r.objectPosition} />
                <div className="text-[12.5px]">
                  <div className="text-forestDeep font-semibold leading-tight">{r.n}</div>
                  <div className="text-[11px] text-inkSoft leading-tight">{r.pet}</div>
                </div>
              </div>
              {[0,1,2,3,4,5,6].map((di) => {
                const fill = (di + ri) % 7 < 4 ? "bg-forest" : (di + ri) % 7 < 6 ? "bg-mint" : "bg-cream";
                return <div key={di} className={`h-6 rounded-md border border-line ${fill}`} />;
              })}
            </div>
          ))}
        </div>
      </div>
    </SitFrame>
  );
};

const DemoForSitters = () => {
  const ids = SIT_TABS.map((t) => t.id);
  const [active, setActive] = useAutoAdvance(ids, 7000);
  return (
    <DemoShell
      id="platform-preview"
      eyebrow="Inside the platform"
      title="What sitters and hotels use to run the day."
      kicker="A guided preview of the operations side: bookings, check-ins, pet records, quotes, payments, and capacity planning."
      tabs={SIT_TABS}
      active={active}
      onChange={setActive}
    >
      {active === "dashboard" && <SitDashboard />}
      {active === "bookings" && <SitBookings />}
      {active === "checkin" && <SitCheckin />}
      {active === "pet" && <SitPet />}
      {active === "payments" && <SitPayments />}
      {active === "calendar" && <SitCalendar />}
    </DemoShell>
  );
};

Object.assign(window, { DemoForPets, DemoForSitters });