// Miss-Scully — Unterseiten (Anifit, Tractive, Animalia, Zubehör, Über uns)
// Requires homepage-sections.jsx loaded first (Header, Footer, useReveal, AnimaliaCalc, Duo, RES).

const ANIFIT_URL = 'https://miss-scully.anifit.ch/';
const TRACTIVE_URL =
'https://t.adcell.com/p/click?promoId=517821&slotId=95722';

/* ---------- shared shell ---------- */

function PageShell({ active, children }) {
  useReveal();
  React.useEffect(() => {
    document.querySelectorAll('a[href^="http"]').forEach((a) => {
      a.target = '_blank';
      a.rel = 'noopener';
    });
  }, []);
  return (
    <React.Fragment>
      <Header active={active}></Header>
      <main>{children}</main>
      <Footer></Footer>
    </React.Fragment>);

}

function PageHero({ kicker, title, lede, children }) {
  return (
    <section className="page-hero" data-screen-label={title}>
      <p className="kicker" data-reveal style={{ fontSize: "28px" }}>{kicker}</p>
      <h1 data-reveal>{title}</h1>
      <p className="lede" data-reveal>{lede}</p>
      {children ? <div className="hero-actions page-hero-actions" data-reveal>{children}</div> : null}
    </section>);

}

function PageCTA({ title, text, primaryLabel, primaryHref, secondaryLabel, secondaryHref }) {
  return (
    <section className="cta-band" data-reveal data-screen-label="CTA">
      <PawMark size={36} color="var(--paw-on-dark)"></PawMark>
      <h2>{title}</h2>
      <p>{text}</p>
      <div className="cta-actions">
        <a className="btn btn-primary btn-lg" href={primaryHref}>{primaryLabel}</a>
        {secondaryLabel ?
        <a className="btn btn-ghost-light btn-lg" href={secondaryHref}>{secondaryLabel}</a> :
        null}
      </div>
    </section>);

}

/* ---------- Anifit ---------- */

function AnifitPage() {
  const features = [
  {
    t: 'Hoher Fleischanteil',
    d: 'Fleisch in Lebensmittelqualität statt Füllstoffe – artgerechte Ernährung für Hund & Katze.'
  },
  {
    t: 'Ohne künstliche Zusätze',
    d: 'Keine Lockstoffe, keine künstlichen Konservierungs- oder Farbstoffe.'
  },
  {
    t: 'Naturnah & nachhaltig',
    d: 'Sorgfältig ausgewählte Zutaten, schonend verarbeitet – von Scully persönlich verkostet.'
  }];

  const steps = [
  {
    t: 'Beraten lassen',
    d: 'Nicolas ist zertifizierter Anifit-Berater und hilft bei Futterwahl und Umstellung – persönlich und kostenlos.'
  },
  {
    t: 'Im Shop bestellen',
    d: 'Im persönlichen Miss-Scully Anifit-Shop bestellen Sie direkt mit unserer Empfehlung.'
  },
  {
    t: 'Geliefert bekommen',
    d: 'Bequem nach Hause – versandkostenfrei ab CHF 69 in der ganzen Schweiz.'
  }];

  return (
    <PageShell active="Anifit Shop">
      <PageHero
        kicker="Anifit Frischfutter"
        title="Frischfutter statt Trockenfutter"
        lede="Naturnahe Ernährung für Hunde & Katzen – mit hohem Fleischanteil und ohne künstliche Zusätze. Von Scully verkostet, von Nicolas empfohlen.">

        <a className="btn btn-primary btn-lg" href={ANIFIT_URL}>Zum Anifit Shop</a>
        <a className="btn btn-ghost btn-lg" href="mailto:info@miss-scully.ch?subject=Anifit%20Beratung">Beratung anfragen</a>
      </PageHero>

      <section className="feature-section" data-screen-label="Anifit Vorteile">
        <div className="feature-grid">
          {features.map((f, i) =>
          <div key={f.t} className="feature-card" data-reveal style={{ transitionDelay: i * 80 + 'ms' }}>
              <strong>{f.t}</strong>
              <p>{f.d}</p>
            </div>
          )}
        </div>
      </section>

      <section className="split-section" data-screen-label="So funktioniert es">
        <div className="split-media" data-reveal>
          <image-slot
            id="anifit-product"
            shape="rounded"
            radius="22"
            placeholder="Anifit Produktfoto hier ablegen">
          </image-slot>
        </div>
        <div className="split-copy">
          <p className="kicker" data-reveal>So einfach geht's</p>
          <h2 data-reveal>In drei Schritten zum besseren Futter</h2>
          <ol className="step-list">
            {steps.map((s, i) =>
            <li key={s.t} data-reveal style={{ transitionDelay: i * 80 + 'ms' }}>
                <strong>{s.t}</strong>
                <p>{s.d}</p>
              </li>
            )}
          </ol>
        </div>
      </section>

      <PageCTA
        title="Bereit für die Futterumstellung?"
        text="Stöbern Sie im persönlichen Miss-Scully Anifit-Shop – Beratung inklusive."
        primaryLabel="Zum Anifit Shop"
        primaryHref={ANIFIT_URL}
        secondaryLabel="Beratung anfragen"
        secondaryHref="mailto:info@miss-scully.ch?subject=Anifit%20Beratung">
      </PageCTA>
    </PageShell>);

}

/* ---------- Tractive ---------- */

function TractivePage() {
  const features = [
  {
    t: 'Live-Ortung',
    d: 'Sehen Sie in Echtzeit, wo Ihr Hund gerade schnüffelt – direkt in der App.'
  },
  {
    t: 'Virtueller Zaun',
    d: 'Sie werden sofort benachrichtigt, wenn Ihr Vierbeiner einen sicheren Bereich verlässt.'
  },
  {
    t: 'Aktivität & Schlaf',
    d: 'Bewegung, Ruhephasen und Kalorien im Blick – wie ein Fitnesstracker für Hunde.'
  },
  {
    t: 'Ohne Distanzlimit',
    d: 'Funktioniert über das Mobilfunknetz – im Quartier, im Wald und in über 175 Ländern.'
  }];

  return (
    <PageShell active="Tractive GPS">
      <PageHero
        kicker="Tractive GPS Tracker"
        title="Immer wissen, wo Ihr Hund ist"
        lede="Der Tractive GPS-Tracker zeigt Ihnen live den Standort Ihres Vierbeiners – leicht, wasserdicht und am Halsband befestigt.">

        <a className="btn btn-primary btn-lg" href={TRACTIVE_URL}>Bei Tractive bestellen</a>
      </PageHero>

      <section className="split-section" data-screen-label="Tractive Funktionen">
        <div className="split-media" data-reveal>
          <image-slot
            id="tractive-product"
            shape="rounded"
            radius="22"
            placeholder="Foto Tractive Tracker hier ablegen">
          </image-slot>
          <div className="hero-chip gps-chip static-chip">
            <span className="pulse-dot"></span>
            Tractive GPS · Live
          </div>
        </div>
        <div className="split-copy">
          <p className="kicker" data-reveal>Funktionen</p>
          <h2 data-reveal>Sicherheit, die mitläuft</h2>
          <div className="feature-list">
            {features.map((f, i) =>
            <div key={f.t} className="feature-row" data-reveal style={{ transitionDelay: i * 70 + 'ms' }}>
                <span className="trust-dot"></span>
                <div>
                  <strong>{f.t}</strong>
                  <p>{f.d}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      <PageCTA
        title="Nie wieder suchen müssen"
        text="Bestellen Sie Ihren Tractive GPS-Tracker über unseren Partnerlink."
        primaryLabel="Bei Tractive bestellen"
        primaryHref={TRACTIVE_URL}>
      </PageCTA>
    </PageShell>);

}

/* ---------- Animalia ---------- */

function AnimaliaPage() {
  const reasons = [
  {
    t: 'Tierarztkosten im Griff',
    d: 'Behandlungen, Operationen und Medikamente können schnell teuer werden – die Versicherung fängt das auf.'
  },
  {
    t: 'Schutz für Hund & Katze',
    d: 'Flexible Deckungen, passend zu Alter und Rasse Ihres Tieres.'
  },
  {
    t: 'Offizieller Partner',
    d: 'Miss-Scully ist offizieller Animalia-Partner – Sie profitieren von persönlicher Begleitung.'
  }];

  return (
    <PageShell active="Animalia Versicherung">
      <PageHero
        kicker="Animalia Tierversicherung"
        title="Gut versichert durchs Hundeleben"
        lede="Damit Sie sich im Ernstfall um Ihr Tier kümmern können – nicht um die Rechnung.">
      </PageHero>

      <section className="feature-section" data-screen-label="Warum versichern">
        <div className="feature-grid">
          {reasons.map((r, i) =>
          <div key={r.t} className="feature-card" data-reveal style={{ transitionDelay: i * 80 + 'ms' }}>
              <strong>{r.t}</strong>
              <p>{r.d}</p>
            </div>
          )}
        </div>
      </section>

      <AnimaliaCalc></AnimaliaCalc>
    </PageShell>);

}

/* ---------- Hundezubehör ---------- */

function ZubehoerPage() {
  const EP_URL =
  'https://www.emmyundpepe.com/?utm_source=ADCELL&utm_medium=Banner&utm_campaign=Standard&bid=434610-95722-&adcref=www-miss-scully-ch.filesusr.com%2F';
  const EP_PARAMS =
  '?utm_source=ADCELL&utm_medium=Banner&utm_campaign=Standard&bid=434610-95722-&adcref=www-miss-scully-ch.filesusr.com%2F';
  const cats = [
  { c: 'Hundegeschirre', href: 'Hundegeschirre.html' },
  { c: 'Gassitaschen', href: 'Gassitaschen.html' },
  { c: 'Orthopädische Hundebetten', href: 'Hundebetten.html' },
  { c: 'Reisekörbchen', href: 'Reisekoerbchen.html' },
  { c: 'Halsbänder & Leinen', href: 'Halsbaender.html' },
  { c: 'Futteraufbewahrung', path: 'collections/wau-kau-familie' }];

  const values = [
  {
    t: '100 % Handarbeit',
    d: 'Jedes Stück entsteht in der eigenen Manufaktur – entwickelt, designt und gefertigt mit höchstem Qualitätsanspruch.'
  },
  {
    t: 'Vegane Materialien',
    d: 'Robust und stilvoll, mit Fokus auf Nachhaltigkeit und das Wohlbefinden Ihres Hundes.'
  },
  {
    t: '30 Tage Geld-zurück-Garantie',
    d: 'In Ruhe im Alltag testen – Ihr Hund darf sogar 30 Tage probeschlafen.'
  }];

  return (
    <PageShell active="Hundezubehör">
      <PageHero
        kicker="Hundezubehör"
        title="Zubehör, das Scullys Nase besteht"
        lede="Unser Partner EMMY & PEPE fertigt einzigartiges Hundezubehör in 100 % Handarbeit – robust, stilvoll und gemacht für gemeinsame Abenteuer. Sorgfältig kuratiert statt Massenware.">

        <a className="btn btn-primary btn-lg" href={EP_URL}>Zum EMMY &amp; PEPE Shop</a>
        <a className="btn btn-ghost btn-lg" href="mailto:info@miss-scully.ch?subject=Hundezubeh%C3%B6r">Beratung anfragen</a>
      </PageHero>

      <section className="feature-section" data-screen-label="Emmy und Pepe Versprechen">
        <div className="feature-grid">
          {values.map((v, i) =>
          <div key={v.t} className="feature-card" data-reveal style={{ transitionDelay: i * 80 + 'ms' }}>
              <strong>{v.t}</strong>
              <p>{v.d}</p>
            </div>
          )}
        </div>
      </section>

      <section className="product-section" data-screen-label="Zubehör Kategorien">
        <div className="section-head" data-reveal>
          <p className="kicker">Das Sortiment</p>
          <h2>Entdecken Sie die Kategorien</h2>
        </div>
        <div className="product-grid">
          {cats.map((item, i) =>
          <a
            key={item.c}
            className="product-card-tile"
            href={item.href || 'https://www.emmyundpepe.com/' + item.path + EP_PARAMS}
            data-reveal
            style={{ transitionDelay: i % 3 * 70 + 'ms' }}>
              <image-slot
              id={'zubehoer-' + (i + 1)}
              shape="rounded"
              radius="16"
              placeholder={'Foto: ' + item.c}>
            </image-slot>
              <strong>{item.c}</strong>
              <span className="pillar-link tile-link">Ansehen →</span>
            </a>
          )}
        </div>
      </section>

      <PageCTA
        title="Den Wau-Effekt selbst erleben?"
        text="Stöbern Sie im EMMY & PEPE Sortiment – oder schreiben Sie uns, wir beraten Sie gerne persönlich."
        primaryLabel="Zum EMMY & PEPE Shop"
        primaryHref={EP_URL}
        secondaryLabel="E-Mail schreiben"
        secondaryHref="mailto:info@miss-scully.ch?subject=Hundezubeh%C3%B6r">
      </PageCTA>
    </PageShell>);

}

/* ---------- Über uns ---------- */

function UeberUnsPage() {
  return (
    <PageShell active="Über uns">
      <PageHero
        kicker="Über uns"
        title="Die Chefin auf vier Pfoten & ihr Assistent auf zwei Beinen"
        lede="Ich bin Nicolas Piccolo-Leeser, Tierexperte und Inhaber von Miss-Scully. Mit Leidenschaft für gesunde Ernährung und Tierwohl unterstütze ich Tierhalter in der ganzen Schweiz – zusammen mit meiner Westie-Dame Scully, der Namensgeberin von Miss Scully.">
      </PageHero>

      <section className="philosophy-section" data-screen-label="Philosophie">
        <div className="legal-doc">
          <div className="legal-section" data-reveal>
            <h3>Unsere Philosophie</h3>
            <p>
              Als Anifit-Berater wähle ich nur Produkte, die natürlich, nachhaltig
              und hochwertig sind – damit Ihr Vierbeiner gesund, glücklich und
              vital lebt. Vertrauen Sie auf Erfahrung und Ehrlichkeit – für das
              Wohl Ihres Tieres.
            </p>
          </div>
          <div className="legal-section" data-reveal>
            <h3>Meine Motivation – Gesunde Tiere, glückliche Halter</h3>
            <p>
              Bei Miss Scully finden Sie sorgfältig ausgewählte Produkte, die das
              Leben Ihres Vierbeiners bereichern: natürliches Anifit Hundefutter
              und Katzenfutter, funktionales Hundezubehör und Sicherheit mit dem
              Tractive GPS-Tracker. Mein Ziel: Produkte, die Gesundheit,
              Sicherheit und Lebensfreude fördern – für ein langes, glückliches
              Zusammenleben.
            </p>
          </div>
          <div className="legal-section" data-reveal>
            <h3>Qualifikationen &amp; Erfahrung</h3>
            <ul>
              <li>Zertifizierter Anifit Ernährungsberater für Hunde &amp; Katzen</li>
              <li>Zertifizierter Partner-Verkäufer für Tiernahrung &amp; Zubehör</li>
              <li>Langjährige Erfahrung in Tiergesundheit und Ernährung</li>
              <li>Zweisprachige Beratung (DE/EN) – Schweizweit</li>
            </ul>
          </div>
        </div>
      </section>

      <Duo hideHead={true}></Duo>

      <section className="contact-section" data-screen-label="Kontakt">
        <div className="contact-card" data-reveal>
          <div>
            <h3>Besuchen Sie uns</h3>
            <p>
              Miss-Scully Caring for your furry friends ®<br></br>
              Förrlibuckstrasse 201<br></br>
              8005 Zürich
            </p>
            <a className="btn btn-ghost" href="https://www.google.com/maps/place/Miss+Scully+-+Caring+for+your+furry+friends/@47.3921069,8.5062675,17z">Auf Karte zeigen</a>
          </div>
          <div>
            <h3>Kontakt</h3>
            <p>
              <a href="mailto:info@miss-scully.ch">info@miss-scully.ch</a><br></br>
              <a href="tel:+41449742626">+41 44 974 26 26</a>
            </p>
            <a className="btn btn-primary" href="mailto:info@miss-scully.ch">E-Mail schreiben</a>
          </div>
        </div>
      </section>
    </PageShell>);

}

Object.assign(window, {
  PageShell, PageHero, PageCTA,
  AnifitPage, TractivePage, AnimaliaPage, ZubehoerPage, UeberUnsPage
});