// Miss-Scully — Anifit Shop Seite (Sortiment aus dem persönlichen Shop)
// Lädt nach homepage-sections.jsx + subpages-content.jsx, ersetzt window.AnifitPage.

const SHOP = 'https://miss-scully.anifit.ch/';
const SUB_IMG = 'https://miss-scully.anifit.ch/media/cache/subcategory_listing_image/uploads/category_product_example_image_upload/';
const CAT_IMG = {
  dog: 'https://miss-scully.anifit.ch/media/cache/maincategory_listing_image/uploads/category_image_upload/6346c83f71a0a.jpg',
  cat: 'https://miss-scully.anifit.ch/media/cache/maincategory_listing_image/uploads/category_image_upload/634ec0c37f5c7.jpg'
};

const SORTIMENT = {
  dog: {
    all: SHOP + 'shop/catalog/gesundes-hundefutter',
    img: CAT_IMG.dog,
    imgAlt: 'Gesundes, natürliches Hundefutter von ANiFiT',
    intro: 'Trocken- und Nassfutter für Hunde jeder Rasse, Grösse und jeden Alters – für gute Verdauung, gesunde Zähne und starke Gelenke.',
    tiles: [
    { n: 'Dog Menu Wet', d: 'Nassfutter für Hunde', p: 'shop/catalog/nassfutter-hund', img: '6398a403afd55.png', t: 'In Dosen, Beuteln oder als Wurst – mit 60–75 % Fleischanteil und ohne unnötige Zusatzstoffe.' },
    { n: 'Dog Menu Dry', d: 'Trockenfutter für Hunde', p: 'shop/catalog/trockenfutter-hund', img: '6398a380195b7.png', t: 'Bis zu 81 % Fleisch – auch kaltgepresst (Nature, Olymp, Sensi Mono) oder als Semi Dry.' },
    { n: 'Dog Sets', d: 'Sets für Hunde', p: 'shop/catalog/dog-sets', img: '681a0b637b0c5.png', t: 'Probierset S, Probierset M–L oder Welpenset – ideal zum Kennenlernen des Sortiments.' },
    { n: 'Dog Extra', d: 'Ergänzungsfuttermittel', p: 'shop/catalog/nahrungsergaenzung-hund', img: '6398a59a2a043.png', t: 'Gezielte Unterstützung für Immunsystem, Gelenke und Verdauung – auch als BARF-Zusatz.' },
    { n: 'Dog Snack', d: 'Hundeleckerli und Snacks', p: 'shop/catalog/hundeleckerlis', img: '6398a6aeed924.png', t: 'Für Training, Belohnung und Kauspass – z.B. Pouletherzen oder Trockenfleisch Rind.' },
    { n: 'Dog Care', d: 'Natürliche Hundepflege', p: 'shop/catalog/zubehoer-hund', img: '6398a671ebea8.png', t: 'Vom Zeckenmittel bis zur natürlichen Pflege von Augen, Pfoten und Ohren.' }]
  },
  cat: {
    all: SHOP + 'shop/catalog/gesundes-katzenfutter',
    img: CAT_IMG.cat,
    imgAlt: 'Gesundes Katzenfutter von ANiFiT',
    intro: 'Eine grosse Auswahl an Geschmacksrichtungen, Verpackungsarten und -grössen – für den optimalen Speiseplan Ihrer Katze.',
    tiles: [
    { n: 'Cat Menu Wet', d: 'Nassfutter für Katzen', p: 'shop/catalog/nassfutter-katze', img: '63989fdfbada3.png', t: 'Im Beutel, in der Aluschale oder Dose – Fleischstückchen mit Sauce, ohne Geschmacksverstärker.' },
    { n: 'Cat Menu Dry', d: 'Trockenfutter für Katzen', p: 'shop/catalog/trockenfutter-katze', img: '6398791fa789e.png', t: 'Schonend verarbeitet – z.B. das langsam im Ofen getrocknete Vision mit hohem Fleischanteil.' },
    { n: 'Cat Sets', d: 'Sets für Katzen', p: 'shop/catalog/cat-sets', img: '681a0f40279c8.png', t: 'Katzen-Probierset und Kittenset – Nass-, Trockenfutter und Snacks zum Kennenlernen.' },
    { n: 'Cat Extra', d: 'Ergänzungsfuttermittel', p: 'shop/catalog/nahrungsergaenzung-katze', img: '63987ecea70e3.png', t: 'Mineralstoffe und Spurenelemente – z.B. Lachsöl, Fell Vital, Gelafit oder Petmin.' },
    { n: 'Cat Snack', d: 'Katzensnacks und Leckerli', p: 'shop/catalog/katzenleckerlis', img: '6398a2801daa6.png', t: 'Würste, Sticks und Chips aus Lachs, Huhn oder Rind – ohne chemische Zusatzstoffe.' },
    { n: 'Cat Care', d: 'Katzenpflege', p: 'shop/catalog/zubehoer-katze', img: '6347b32b60b83.png', t: 'Zeckenöl, Notfallapotheke und natürliche Pflege für Pfoten, Augen und Ohren.' }]
  }
};

function AnifitSortiment({ petType }) {
  const s = SORTIMENT[petType];
  return (
    <React.Fragment>
      <section className="split-section" data-screen-label="Anifit Sortiment Intro">
        <div className="split-media" data-reveal>
          <image-slot
            id={'anifit-cat-' + petType}
            shape="rounded"
            radius="24"
            placeholder={petType === 'dog' ? 'Foto: Anifit Hundefutter hier ablegen' : 'Foto: Anifit Katzenfutter hier ablegen'}>
          </image-slot>
        </div>
        <div className="split-copy">
          <p className="kicker" data-reveal>{petType === 'dog' ? 'Hundefutter' : 'Katzenfutter'}</p>
          <h2 data-reveal>{petType === 'dog' ? 'Gesundes, natürliches Hundefutter' : 'Gesundes Katzenfutter'}</h2>
          <p className="section-sub" data-reveal style={{ margin: '0 0 22px' }}>{s.intro}</p>
          <a className="btn btn-primary" href={s.all} data-reveal>Gesamtes Sortiment ansehen</a>
        </div>
      </section>

      <section className="product-section" data-screen-label="Anifit Kategorien">
        <div className="product-grid sortiment-grid">
          {s.tiles.map((tile) =>
          <a key={tile.n} className="sortiment-tile" href={SHOP.slice(0, -1) + '/' + tile.p}>
              <span className="sortiment-img">
                <img src={SUB_IMG + tile.img} alt={tile.n + ' – ' + tile.d} loading="lazy"></img>
              </span>
              <strong>{tile.n}</strong>
              <span>{tile.d}</span>
              <span className="sortiment-desc">{tile.t}</span>
              <span className="pillar-link">Ansehen →</span>
            </a>
          )}
        </div>
      </section>
    </React.Fragment>);

}

function AnifitGarantie() {
  const points = [
  'Verantwortungsvolle Produktion',
  'Hoher Fleischanteil',
  '100 % offene Deklaration',
  'Keine Füllstoffe',
  'Keine Farbstoffe',
  'Keine minderwertigen Schlachtabfälle',
  'Keine künstlichen Aromen & Geschmacksverstärker'];

  return (
    <section className="garantie-section" data-screen-label="ANiFiT Garantie">
      <div className="garantie-card" data-reveal>
        <div>
          <p className="kicker kicker-light">Die ANiFiT-Garantie</p>
          <h2>100 % natürlich, gesund und ehrlich</h2>
          <p className="garantie-text">
            Natürliche Tiernahrung in Lebensmittelqualität – mit über 60 %
            Fleischanteil, schonend zubereitet und kalt abgefüllt. Ohne
            chemische Zusatzstoffe, ohne Zucker.
          </p>
          <a className="btn btn-light" href={SHOP + 'ueber-anifit/schweiz/die-anifit-garantie'}>
            Zur ANiFiT-Garantie
          </a>
        </div>
        <ul className="garantie-list">
          {points.map((p) =>
          <li key={p}>
              <span className="trust-dot"></span>{p}
            </li>
          )}
        </ul>
      </div>
    </section>);

}

function AnifitServices() {
  const services = [
  {
    t: 'Futterrechner für Hunde',
    d: 'Erstellen Sie online einen individuellen Fütterungsplan für Ihren Hund.',
    href: SHOP + 'shop/futterrechner-hund',
    label: 'Jetzt ausprobieren'
  },
  {
    t: 'Tierfutter-Abo',
    d: 'Bequem liefern lassen und als Abo-Kund:in Pfotenpunkte-Prämien sammeln.',
    href: SHOP + 'ueber-anifit/services/abo',
    label: 'So funktioniert es'
  },
  {
    t: 'Persönliche Beratung',
    d: 'Nicolas berät Sie kostenlos und unverbindlich – passend zu Alter, Rasse und Unverträglichkeiten.',
    href: 'mailto:info@miss-scully.ch?subject=Anifit%20Beratung',
    label: 'Beratung anfragen'
  }];

  return (
    <section className="feature-section" data-screen-label="Anifit Services">
      <div className="section-head" data-reveal>
        <p className="kicker">Services</p>
        <h2>Mehr als nur ein Shop</h2>
      </div>
      <div className="feature-grid">
        {services.map((sv, i) =>
        <div key={sv.t} className="feature-card service-card" data-reveal style={{ transitionDelay: i * 80 + 'ms' }}>
            <strong>{sv.t}</strong>
            <p>{sv.d}</p>
            <a className="pillar-link" href={sv.href}>{sv.label} →</a>
          </div>
        )}
      </div>
    </section>);

}

function AnifitPageShop() {
  const [petType, setPetType] = React.useState('dog');

  return (
    <PageShell active="Anifit Shop">
      <PageHero
        kicker="Anifit Frischfutter"
        title="Frischfutter statt Trockenfutter"
        lede="Natürliches Hunde- und Katzenfutter in Lebensmittelqualität – über 60 % Fleischanteil, schonend zubereitet, ohne chemische Zusätze, Zucker oder Füllstoffe. Direkt geliefert in die ganze Schweiz.">

        <div className="seg-control pet-toggle">
          <button
            className={'seg-btn' + (petType === 'dog' ? ' active' : '')}
            onClick={() => setPetType('dog')}>
            Für Hunde
          </button>
          <button
            className={'seg-btn' + (petType === 'cat' ? ' active' : '')}
            onClick={() => setPetType('cat')}>
            Für Katzen
          </button>
        </div>
        <a className="btn btn-primary btn-lg" href={SORTIMENT[petType].all}>
          Zum {petType === 'dog' ? 'Hundefutter' : 'Katzenfutter'}
        </a>
      </PageHero>

      <AnifitSortiment petType={petType}></AnifitSortiment>

      <AnifitGarantie></AnifitGarantie>

      <AnifitServices></AnifitServices>

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

}

window.AnifitPage = AnifitPageShop;