// Miss-Scully homepage — section components
// Exposed on window at the bottom for use by homepage-app.jsx

const { useState, useEffect, useRef } = React;

// Resource indirection so the standalone bundler can inline code-referenced assets
const RES = (id, fallback) =>
window.__resources && window.__resources[id] || fallback;

/* ---------- shared hooks ---------- */

function useReducedMotion() {
  const [reduced, setReduced] = useState(
    () => window.matchMedia('(prefers-reduced-motion: reduce)').matches
  );
  useEffect(() => {
    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
    const fn = (e) => setReduced(e.matches);
    mq.addEventListener('change', fn);
    return () => mq.removeEventListener('change', fn);
  }, []);
  return reduced;
}

function useReveal() {
  // Visible by default; JS adds .pre to hide, then removes it as elements enter
  // the viewport. Failsafe reveals everything if IO never fires.
  useEffect(() => {
    if (!('IntersectionObserver' in window)) return;
    const els = Array.from(document.querySelectorAll('[data-reveal]:not(.in)'));
    els.forEach((el) => el.classList.add('pre'));
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((en) => {
          if (en.isIntersecting) {
            en.target.classList.remove('pre');
            en.target.classList.add('in');
            io.unobserve(en.target);
          }
        });
      },
      { threshold: 0.12 }
    );
    els.forEach((el) => io.observe(el));
    const failsafe = setTimeout(() => {
      els.forEach((el) => el.classList.remove('pre'));
    }, 1500);
    return () => {
      io.disconnect();
      clearTimeout(failsafe);
    };
  }, []);
}

/* ---------- paw glyph (simple circles only) ---------- */

function PawMark({ size = 28, color = 'var(--accent)' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" aria-hidden="true">
      <circle cx="9" cy="10" r="3.4" fill={color}></circle>
      <circle cx="16" cy="7.5" r="3.4" fill={color}></circle>
      <circle cx="23" cy="10" r="3.4" fill={color}></circle>
      <ellipse cx="16" cy="20.5" rx="7.2" ry="6" fill={color}></ellipse>
    </svg>);

}

/* ---------- header ---------- */

function Header({ active }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', fn, { passive: true });
    fn();
    return () => window.removeEventListener('scroll', fn);
  }, []);

  const links = [
  ['Anifit Shop', 'Anifit Shop.html'],
  ['Tractive GPS', 'Tractive GPS.html'],
  ['Animalia Versicherung', 'Animalia Versicherung.html'],
  ['Hundezubehör', 'Hundezubehoer.html'],
  ['Über uns', 'Ueber uns.html']];


  return (
    <header className={'site-header' + (scrolled ? ' scrolled' : '')}>
      <a className="brand" href="index.html">
        <img className="brand-logo" src={RES('logoBadge', 'assets/logo-badge.png')} alt="Miss Scully — Caring for your furry friends ®"></img>
      </a>
      <nav className={'main-nav' + (open ? ' open' : '')}>
        {links.map(([label, href]) =>
        <a key={label} href={href} className={active === label ? 'active' : ''} onClick={() => setOpen(false)}>{label}</a>
        )}
      </nav>
      <button
        className={'burger' + (open ? ' open' : '')}
        aria-label="Menü"
        onClick={() => setOpen(!open)}>
        
        <span></span><span></span><span></span>
      </button>
    </header>);

}

/* ---------- hero with 3D scene ---------- */

function Hero({ headline, intensity }) {
  const reduced = useReducedMotion();
  const sceneRef = useRef(null);
  const target = useRef({ rx: 0, ry: 0 });
  const current = useRef({ rx: 0, ry: 0 });

  useEffect(() => {
    if (reduced || intensity === 0) {
      if (sceneRef.current) sceneRef.current.style.transform = '';
      return;
    }
    const fine = window.matchMedia('(pointer: fine)').matches;
    let raf;
    const tick = () => {
      const c = current.current,t = target.current;
      c.rx += (t.rx - c.rx) * 0.07;
      c.ry += (t.ry - c.ry) * 0.07;
      if (sceneRef.current) {
        sceneRef.current.style.transform =
        'rotateX(' + c.rx.toFixed(3) + 'deg) rotateY(' + c.ry.toFixed(3) + 'deg)';
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);

    const onMove = (e) => {
      const nx = e.clientX / window.innerWidth - 0.5;
      const ny = e.clientY / window.innerHeight - 0.5;
      target.current.ry = nx * 9 * intensity;
      target.current.rx = -ny * 7 * intensity;
    };
    const onScroll = () => {
      // gentle scroll-driven tilt for touch devices
      const y = Math.min(window.scrollY / 600, 1);
      target.current.rx = -4 * intensity * y;
      target.current.ry = 3 * intensity * y;
    };
    if (fine) window.addEventListener('pointermove', onMove, { passive: true });else
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('pointermove', onMove);
      window.removeEventListener('scroll', onScroll);
    };
  }, [reduced, intensity]);

  const z = (n) => ({ transform: 'translateZ(' + Math.round(n * (0.4 + 0.6 * intensity)) + 'px)' });

  return (
    <section className="hero" data-screen-label="Hero">
      <div className="hero-nature" aria-hidden="true">
        <div className="nature-glow"></div>
        <span className="pollen p1"></span>
        <span className="pollen p2"></span>
        <span className="pollen p3"></span>
        <span className="pollen p4"></span>
        <span className="pollen p5"></span>
      </div>
      <div className="hero-copy">
        <p className="kicker" data-reveal>Hunde- &amp; Katzenshop · Zürich</p>
        <h1 data-reveal>{headline}</h1>
        <p className="lede" data-reveal>
          Frischfutter in Anifit-Qualität aus der Schweiz, Tractive GPS-Tracker und
          Animalia Tierversicherungen – sorgfältig ausgewählt von Scully,
          der Chefin auf vier Pfoten.
        </p>
        <div className="hero-actions" data-reveal>
          <a className="btn btn-primary btn-lg" href="https://miss-scully.anifit.ch/">
            Zum Anifit Shop
          </a>
          <a className="btn btn-ghost btn-lg" href="#saeulen">Entdecken</a>
        </div>
        <p className="hero-note" data-reveal>Versandkostenfrei ab CHF 69 in der ganzen Schweiz</p>
      </div>

      <div className="hero-stage" aria-hidden="false">
        <div className="hero-scene" ref={sceneRef}>
          <div className="blob" style={z(0)}></div>

          <div className="paw-trail" style={z(30)}>
            <PawMark size={26} color="var(--paw)"></PawMark>
            <PawMark size={20} color="var(--paw)"></PawMark>
            <PawMark size={15} color="var(--paw)"></PawMark>
          </div>

          <div className="hero-photo float-a" style={z(70)}>
            <image-slot
              id="hero-scully"
              shape="rounded"
              radius="26"
              src={RES('scullyPhoto', 'assets/scully.jpg')}
              placeholder="Foto von Scully hier ablegen">
            </image-slot>
            <span className="photo-tag">Chefin Ms. Scully</span>
          </div>

          <div className="hero-card product-card float-b" style={z(120)}>
            <image-slot
              id="hero-product"
              shape="rounded"
              radius="14"
              placeholder="Produktfoto">
            </image-slot>
            <div className="product-meta">
              <strong>Anifit Frischfutter</strong>
              <span>Naturnah · aus der Schweiz</span>
            </div>
          </div>

          <div className="hero-chip gps-chip float-c" style={z(160)}>
            <span className="pulse-dot"></span>
            Tractive GPS · Live
          </div>

          <div className="hero-chip ship-chip float-d" style={z(140)}>
            Versandkostenfrei ab CHF 69
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- 3D showcase ---------- */

function Showcase3D() {
  return (
    <section className="showcase3d" data-screen-label="Showcase 3D">
      <div className="section-head" data-reveal>
        <p className="kicker">Miss-Scully Welt</p>
        <h2>Wo Hunde &amp; Katzen zu Hause sind</h2>
        <p className="section-sub">Ein Blick in die Welt von Scully &amp; Co.</p>
      </div>
      <div className="showcase-frame" data-reveal>
        {/*
              Higgsfield 3D-Video: Legen Sie die Datei assets/hero-3d.mp4 ins Projekt
              und kommentieren Sie das <video>-Element ein – es ersetzt dann die beiden Fotos.
              <video className="showcase-video" src="assets/hero-3d.mp4" autoPlay muted loop playsInline></video>
             */}
        <div className="showcase-media">
          <image-slot
            id="showcase-dog"
            shape="rect"
            src="assets/scully.jpg"
            placeholder="Hundefoto">
          </image-slot>
          <image-slot
            id="showcase-cat"
            shape="rect"
            src="assets/westie-vet.jpg"
            placeholder="Katzenfoto">
          </image-slot>
        </div>
        <span className="showcase-divider"></span>
        <div className="showcase-badge">
          <span className="pulse-dot"></span>
          Miss-Scully · Schweiz
        </div>
        <div className="showcase-overlay">
          <span className="naturnah-pill">NATURNAH</span>
          <h3>Wo Hunde &amp; Katzen zu Hause sind</h3>
          <p>Das beste Leben für Ihren Hund und Ihre Katze — direkt aus der Schweiz.</p>
        </div>
      </div>
    </section>);

}

/* ---------- homepage video ---------- */

function VideoSection() {
  // Video-Element wird erst gemountet, wenn die Datei existiert (HEAD-Check) –
  // bis dahin zeigt der Rahmen den Platzhalter, ohne Lade-Fehler in der Konsole.
  const [videoReady, setVideoReady] = useState(false);
  useEffect(() => {
    let alive = true;
    fetch('assets/startseite-video.mp4', { method: 'HEAD' }).
    then((r) => {if (alive && r.ok) setVideoReady(true);}).
    catch(() => {});
    return () => {alive = false;};
  }, []);
  return (
    <section className="video-section" data-screen-label="Video">
      <div className="showcase-frame video-frame" data-reveal>
        {videoReady ?
        <video
          className="showcase-video"
          src="assets/startseite-video.mp4"
          poster="assets/homepage-still.png"
          autoPlay={true}
          muted={true}
          loop={true}
          playsInline={true}>
        </video> :
        <img
          className="showcase-video"
          src="assets/homepage-still.png"
          alt="Hund im Abendlicht – Miss-Scully">
        </img>}
        <div className="showcase-badge">
          <span className="pulse-dot"></span>
          Miss-Scully · Schweiz
        </div>
      </div>
    </section>);

}

/* ---------- video hero (vollflächig) ---------- */

function VideoHero({ headline }) {
  return (
    <section className="video-hero" data-screen-label="Video Hero">
      <video
        className="video-hero-bg"
        src="assets/startseite-video.mp4"
        poster="assets/homepage-still.png"
        autoPlay={true}
        muted={true}
        loop={true}
        playsInline={true}>
      </video>
      <div className="video-hero-shade"></div>
      <div className="video-hero-content">
        <p className="kicker kicker-light" data-reveal style={{ fontFamily: "\"Instrument Sans\"" }}>Hunde- &amp; Katzenshop · Zürich</p>
        <h1 data-reveal>{headline}</h1>
        <p className="lede" data-reveal style={{ fontFamily: "\"Instrument Sans\"" }}>
          Frischfutter in Anifit-Qualität aus der Schweiz, Tractive GPS-Tracker
          und Animalia Tierversicherungen – sorgfältig ausgewählt von Scully,
          der Chefin auf vier Pfoten.
        </p>
        <div className="hero-actions" data-reveal>
          <a className="btn btn-primary btn-lg" href="https://miss-scully.anifit.ch/">Zum Anifit Shop</a>
          <a className="btn btn-ghost-light btn-lg" href="#bewegung">Entdecken</a>
        </div>
        <p className="video-hero-note" data-reveal>Versandkostenfrei ab CHF 69 in der ganzen Schweiz</p>
      </div>
    </section>);

}

/* ---------- video stories ---------- */

function VideoStoryFrame({ wide, src, slotId, placeholder, title, text, href, label }) {
  const [ready, setReady] = useState(false);
  useEffect(() => {
    let alive = true;
    fetch(src, { method: 'HEAD' }).
    then((r) => {if (alive && r.ok) setReady(true);}).
    catch(() => {});
    return () => {alive = false;};
  }, []);
  return (
    <div className={'vstory' + (wide ? ' vstory-wide' : '')} data-reveal>
      {ready ?
      <video
        className="vstory-media"
        src={src}
        autoPlay={true}
        muted={true}
        loop={true}
        playsInline={true}>
      </video> :
      <image-slot
        id={slotId}
        shape="rect"
        placeholder={placeholder}>
      </image-slot>}
      <span className="vstory-shade"></span>
      <span className="vstory-copy">
        <strong>{title}</strong>
        <span className="vstory-text">{text}</span>
        <a className="btn btn-light vstory-btn" href={href}>{label}</a>
      </span>
    </div>);

}

function VideoStories() {
  return (
    <section className="vstories" id="bewegung" data-screen-label="Video Stories">
      <div className="section-head" data-reveal>
        <p className="kicker">Miss-Scully in Bewegung</p>
        <h2>Erleben statt nur lesen</h2>
      </div>
      <div className="vstories-grid">
        <VideoStoryFrame
          wide={true}
          src="assets/video-frischfutter.mp4"
          slotId="vstory-frischfutter"
          placeholder="Video/Foto: Frischfutter – Datei assets/video-frischfutter.mp4 hochladen oder Foto hier ablegen"
          title="Frischfutter, das begeistert"
          text="Anifit-Qualität – naturnah, ohne künstliche Zusätze."
          href="Anifit Shop.html"
          label="Zum Frischfutter">
        </VideoStoryFrame>
        <VideoStoryFrame
          src="assets/video-tractive.mp4"
          slotId="vstory-tractive"
          placeholder="Video/Foto: Tractive – Datei assets/video-tractive.mp4 hochladen oder Foto hier ablegen"
          title="Immer wissen, wo sie sind"
          text="Live-Ortung für Hund & Katze."
          href="Tractive GPS.html"
          label="Zu Tractive GPS">
        </VideoStoryFrame>
        <VideoStoryFrame
          src="assets/video-zubehoer.mp4"
          slotId="vstory-zubehoer"
          placeholder="Video/Foto: Zubehör – Datei assets/video-zubehoer.mp4 hochladen oder Foto hier ablegen"
          title="Handarbeit fürs Halsband"
          text="Geschirre, Betten & mehr von EMMY & PEPE."
          href="Hundezubehoer.html"
          label="Zum Zubehör">
        </VideoStoryFrame>
      </div>
    </section>);

}

/* ---------- trust bar ---------- */

function TrustBar() {
  const items = [
  'Anifit-Qualität aus der Schweiz',
  'Offizieller Animalia-Partner',
  'Tractive GPS Fachhändler',
  'Schweizer Shop · Zürich'];

  return (
    <div className="trust-bar" data-reveal>
      {items.map((t) =>
      <span key={t} className="trust-item">
          <span className="trust-dot"></span>{t}
        </span>
      )}
    </div>);

}

/* ---------- pillars with 3D tilt ---------- */

function TiltCard({ children, className, href, intensity }) {
  const ref = useRef(null);
  const reduced = useReducedMotion();
  const onMove = (e) => {
    if (reduced || intensity === 0) return;
    if (!window.matchMedia('(pointer: fine)').matches) return;
    const el = ref.current;
    const r = el.getBoundingClientRect();
    const nx = (e.clientX - r.left) / r.width - 0.5;
    const ny = (e.clientY - r.top) / r.height - 0.5;
    el.style.transform =
    'perspective(900px) rotateX(' + -ny * 8 * intensity + 'deg) rotateY(' +
    nx * 10 * intensity + 'deg) translateY(-6px)';
  };
  const onLeave = () => {
    if (ref.current) ref.current.style.transform = '';
  };
  return (
    <a
      ref={ref}
      className={'tilt-card ' + (className || '')}
      href={href}
      onPointerMove={onMove}
      onPointerLeave={onLeave}>
      
      {children}
    </a>);

}

function Pillars({ intensity }) {
  const pillars = [
  {
    num: '01',
    tag: 'Frischfutter',
    title: 'Anifit Shop',
    text: 'Frischfutter für Hunde & Katzen mit hohem Fleischanteil – ohne künstliche Zusätze.',
    href: 'Anifit Shop.html',
    tone: 'tone-green',
    span: 'span-7'
  },
  {
    num: '02',
    tag: 'GPS-Tracker',
    title: 'Tractive GPS',
    text: 'Live-Ortung für Ihren Vierbeiner – damit Sie immer wissen, wo er gerade schnüffelt.',
    href: 'Tractive GPS.html',
    tone: 'tone-terra',
    span: 'span-5'
  },
  {
    num: '03',
    tag: 'Versicherung',
    title: 'Animalia Tierversicherung',
    text: 'Als offizieller Partner vermitteln wir den passenden Schutz für Hund & Katze.',
    href: 'Animalia Versicherung.html',
    tone: 'tone-sand',
    span: 'span-5'
  },
  {
    num: '04',
    tag: 'Zubehör',
    title: 'Hundezubehör',
    text: 'Ausgewähltes Zubehör, das Scullys feine Nase überzeugt hat.',
    href: 'Hundezubehoer.html',
    tone: 'tone-ink',
    span: 'span-7'
  }];

  return (
    <section className="pillars" id="saeulen" data-screen-label="Vier Säulen">
      <div className="section-head" data-reveal>
        <p className="kicker">Alles für Ihren Vierbeiner</p>
        <h2>Vier gute Gründe für Miss-Scully</h2>
      </div>
      <div className="pillar-index">
        {pillars.map((p, i) =>
        <a
          key={p.num}
          className={'pillar-row ' + p.tone}
          href={p.href}
          data-reveal
          style={{ transitionDelay: i * 60 + 'ms' }}>
            <span className="row-num">{p.num}</span>
            <span className="row-main">
              <h3>{p.title}</h3>
              <p>{p.text}</p>
            </span>
            <span className="pillar-tag">{p.tag}</span>
            <span className="pillar-arrow" aria-hidden="true">→</span>
          </a>
        )}
      </div>
    </section>);

}

/* ---------- fresh food story ---------- */

function Story() {
  const points = [
  {
    t: 'Hoher Fleischanteil',
    d: 'Frischfleisch in Lebensmittelqualität statt Füllstoffe – so frisst Ihr Tier, was es wirklich braucht.'
  },
  {
    t: 'Ohne künstliche Zusätze',
    d: 'Keine Lockstoffe, keine künstlichen Konservierungs- oder Farbstoffe. Natur pur.'
  },
  {
    t: 'Persönliche Beratung',
    d: 'Als Anifit-Berater begleitet Nicolas die Futterumstellung persönlich – von der ersten Dose an.'
  }];

  return (
    <section className="story" data-screen-label="Frischfutter Story">
      <div className="story-inner">
        <div className="story-copy" data-reveal>
          <p className="kicker kicker-light">Frischfutter statt Trockenfutter</p>
          <h2>Weil dein Tier Familie ist</h2>
          <p className="story-lede">
            Miss-Scully vereint Qualität, Natur und Herz für Hund &amp; Katze.
            Darum setzen wir auf naturnahe Ernährung in Anifit-Qualität.
          </p>
          <a className="btn btn-light btn-lg" href="Anifit Shop.html">
            Frischfutter entdecken
          </a>
        </div>
        <div className="story-media" data-reveal>
          <image-slot
            id="story-care"
            shape="rounded"
            radius="22"
            src={RES('westieVet', 'assets/westie-vet.jpg')}
            placeholder="Foto">
          </image-slot>
          <span className="story-media-tag">Gut umsorgt – von der Schnauze bis zur Pfote</span>
        </div>
        <ol className="story-points">
          {points.map((p, i) =>
          <li key={p.t} data-reveal style={{ transitionDelay: i * 90 + 'ms' }}>
              <strong>{p.t}</strong>
              <p>{p.d}</p>
            </li>
          )}
        </ol>
      </div>
    </section>);

}

/* ---------- Animalia premium calculator ---------- */

function AnimaliaCalc({ breedType }) {
  const calcUrl =
  'https://animalia.ch/de/pramienrechner-versicherung-hund-katze?codeAgent=9590&breedType=' + (
  breedType || 'dog');
  return (
    <section className="animalia" id="animalia" data-screen-label="Animalia Prämienrechner">
      <div className="section-head" data-reveal>
        <p className="kicker">Animalia Tierversicherung</p>
        <h2>Berechnen Sie Ihre Prämie direkt hier</h2>
        <p className="section-sub">
          Als offizieller Animalia-Partner bieten wir Ihnen den Prämienrechner
          gleich hier an – in wenigen Minuten zur passenden Versicherung für
          Hund oder Katze.
        </p>
      </div>
      <div className="calc-frame" data-reveal>
        <iframe
          key={calcUrl}
          src={calcUrl}
          title="Animalia Prämienrechner"
          loading="lazy">
        </iframe>
      </div>
      <p className="calc-fallback" data-reveal>
        Der Rechner lädt nicht?{' '}
        <a href={calcUrl} target="_blank" rel="noopener">
          Prämienrechner in neuem Fenster öffnen →
        </a>
      </p>
    </section>);

}

/* ---------- the duo ---------- */

function Duo({ hideHead }) {
  return (
    <section className="duo" data-screen-label="Scully & Nicolas">
      {hideHead ? null :
      <div className="section-head" data-reveal>
        <p className="kicker">Über uns</p>
        <h2>Die Chefin auf vier Pfoten &amp; ihr Assistent auf zwei Beinen</h2>
      </div>}
      <div className="duo-grid">
        <article className="duo-card" data-reveal>
          <image-slot
            id="duo-scully"
            shape="rounded"
            radius="20"
            src={RES('scullyPhoto', 'assets/scully.jpg')}
            placeholder="Foto von Ms. Scully">
          </image-slot>
          <p className="duo-role">Chief Tasting Officer (CTO)</p>
          <h3>Ms. Scully</h3>
          <p className="duo-quote">
            «Mit ihrer feinen Nase sorgt sie dafür, dass nur die besten Produkte
            in den Shop kommen.»
          </p>
        </article>
        <article className="duo-card" data-reveal style={{ transitionDelay: '90ms' }}>
          <image-slot
            id="duo-nicolas"
            shape="rounded"
            radius="20"
            src={RES('nicolasPhoto', 'assets/nicolas.png')}
            placeholder="Foto von Nicolas">
          </image-slot>
          <p className="duo-role">Der Mensch, der alles möglich macht</p>
          <h3>Nicolas Piccolo-Leeser</h3>
          <p className="duo-quote">
            «Mit Leidenschaft und Erfahrung wähle ich nachhaltige Produkte aus,
            die Hunde und Katzen gesund und glücklich machen.»
          </p>
        </article>
      </div>
    </section>);

}

/* ---------- CTA band ---------- */

function CTABand() {
  return (
    <section className="cta-band" data-reveal data-screen-label="Abschluss CTA">
      <PawMark size={36} color="var(--paw-on-dark)"></PawMark>
      <h2>Bereit für die Futterumstellung?</h2>
      <p>
        Scully hat schon mal vorgekostet. Persönliche Beratung inklusive –
        versandkostenfrei ab CHF 69.
      </p>
      <div className="cta-actions">
        <a className="btn btn-primary btn-lg" href="https://miss-scully.anifit.ch/">
          Zum Anifit Shop
        </a>
        <a className="btn btn-ghost-light btn-lg" href="https://www.miss-scully.ch/kontakt">
          Beratung anfragen
        </a>
      </div>
    </section>);

}

/* ---------- SEO text ---------- */

function SeoText() {
  return (
    <section className="seo-section" data-screen-label="SEO Text">
      <div className="seo-grid">
        <div className="seo-col" data-reveal>
          <h2>Miss-Scully – Ihr Hunde- und Katzenshop in der Schweiz</h2>
          <p>
            Miss-Scully ist Ihr Schweizer Online-Shop für gesunde Tiernahrung
            und durchdachtes Hundezubehör. Im Zentrum steht naturnahes{' '}
            <a href="Anifit Shop.html">Anifit Frischfutter für Hunde und
            Katzen</a> aus schonender Herstellung – mit hohem Fleischanteil,
            ohne unnötige Zusätze. Als zertifizierter Anifit-Ernährungsberater
            begleiten wir Sie persönlich bei der Futterumstellung – auf Deutsch
            und Englisch, schweizweit.
          </p>
          <p>
            Ergänzt wird das Sortiment durch handgefertigtes{' '}
            <a href="Hundezubehoer.html">Hundezubehör von EMMY &amp; PEPE</a>:
            Hundegeschirre, Halsbänder, Leinen, Gassitaschen, orthopädische
            Hundebetten und Reisekörbchen.
          </p>
        </div>
        <div className="seo-col" data-reveal>
          <h2>GPS-Tracker und Tierversicherung – alles aus einer Hand</h2>
          <p>
            Mit dem <a href="Tractive GPS.html">Tractive GPS-Tracker für Hunde
            und Katzen</a> wissen Sie jederzeit, wo Ihr Liebling ist – mit
            Live-Ortung, virtuellem Zaun und Gesundheitsmonitoring. Und als
            Partner von <a href="Animalia Versicherung.html">Animalia Tierversicherung</a>{' '}
            helfen wir Ihnen, Tierarztkosten abzusichern, bevor sie entstehen.
          </p>
          <p>
            Ob Welpe oder Senior, Stubentiger oder Freigänger: Bei Miss-Scully
            in Zürich finden Sie alles für ein gesundes, sicheres und glückliches
            Tierleben – <a href="Ueber uns.html">lernen Sie uns kennen</a> oder
            stöbern Sie im <a href="Blog.html">Ratgeber-Blog</a>.
          </p>
        </div>
      </div>
    </section>);

}

/* ---------- footer ---------- */

function Footer() {
  return (
    <footer className="site-footer" data-screen-label="Footer">
      <div className="footer-grid">
        <div className="footer-brand">
          <a className="brand" href="index.html">
            <img className="footer-logo" src={RES('logoOriginal', 'assets/logo-original.png')} alt="Miss Scully — Caring for your furry friends ®"></img>
          </a>
          <p>
            Förrlibuckstrasse 201<br></br>8005 Zürich
          </p>
        </div>
        <div>
          <h4>Shop</h4>
          <a href="Anifit Shop.html">Anifit Shop</a>
          <a href="Tractive GPS.html">Tractive GPS Tracker</a>
          <a href="Tractive GPS Katzen.html">Tractive GPS für Katzen</a>
          <a href="Animalia Versicherung.html">Animalia Tierversicherung</a>
          <a href="Hundezubehoer.html">Hundezubehör</a>
        </div>
        <div>
          <h4>Über uns</h4>
          <a href="Ueber uns.html">Scully &amp; Nicolas</a>
          <a href="Blog.html">Blog</a>
          <a href="FAQ.html">FAQ</a>
          <a href="AGB.html">AGB</a>
        </div>
        <div>
          <h4>Kontakt</h4>
          <a href="mailto:info@miss-scully.ch">info@miss-scully.ch</a>
          <a href="tel:+41449742626">+41 44 974 26 26</a>
        </div>
      </div>
      <div className="footer-legal">
        <span>
          © 2026 Miss-Scully Caring for your furry friends ®. Alle Rechte vorbehalten.<br></br>
          Part of NPL Group Holding, Shaping the Future© <a href="https://www.nplgroup.ch/">www.nplgroup.ch</a>
        </span>
        <span className="footer-legal-links">
          <a href="Datenschutz.html">Datenschutz</a>
          <a href="Cookies.html">Cookies</a>
          <a href="Impressum.html">Impressum</a>
        </span>
      </div>
    </footer>);

}

Object.assign(window, {
  useReducedMotion, useReveal, PawMark,
  Header, Hero, VideoHero, VideoStories, TrustBar, Showcase3D, VideoSection, Pillars, Story, AnimaliaCalc, Duo, CTABand, Footer
});