// 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.' }]
  }
};

/* ---------- 3D-Tilt Wrapper ---------- */
function Tilt3D({ children, max, className }) {
  const ref = React.useRef(null);
  const reduced = window.useReducedMotion ? window.useReducedMotion() : false;
  const m = max || 9;
  const onMove = (e) => {
    if (reduced) return;
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width - 0.5;
    const py = (e.clientY - r.top) / r.height - 0.5;
    el.style.transform =
    'perspective(900px) rotateY(' + (px * m).toFixed(2) + 'deg) rotateX(' + (-py * m).toFixed(2) + 'deg) translateY(-5px)';
    el.style.setProperty('--glare-x', ((px + 0.5) * 100).toFixed(1) + '%');
    el.style.setProperty('--glare-y', ((py + 0.5) * 100).toFixed(1) + '%');
  };
  const onLeave = () => {
    if (ref.current) ref.current.style.transform = '';
  };
  return (
    <div
      className={'tilt3d' + (className ? ' ' + className : '')}
      ref={ref}
      onMouseMove={onMove}
      onMouseLeave={onLeave}>
      {children}
      <span className="tilt-glare"></span>
    </div>);

}

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) =>
          <Tilt3D key={tile.n}>
              <a 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>
            </Tilt3D>
          )}
        </div>
      </section>
    </React.Fragment>);

}

/* ---------- Video-Stories (interaktiv: Hund/Katze) ---------- */
function AnifitVideos({ petType, setPetType }) {
  const frames = petType === 'cat' ?
  [
  { wide: true, src: '/assets/anifit-video-katze-1.mp4', fallback: '/assets/video-frischfutter.mp4', slotId: 'anifit-video-katze-1', ph: 'Video/Foto: Katze beim Fressen – Datei assets/anifit-video-katze-1.mp4 hochladen oder Foto hier ablegen', title: 'Auch für Katzen', text: 'Feine Menüs, die auch wählerische Katzen überzeugen.', href: SHOP + 'shop/catalog/gesundes-katzenfutter', label: 'Zum Katzenfutter' },
  { src: '/assets/anifit-video-katze-2.mp4', slotId: 'anifit-video-katze-2', ph: 'Video/Foto: Katze – Datei assets/anifit-video-katze-2.mp4 hochladen oder Foto hier ablegen', title: 'Das Probierset', text: 'Nass-, Trockenfutter und Snacks zum Kennenlernen.', href: SHOP + 'shop/catalog/cat-sets', label: 'Cat Sets ansehen' },
  { src: '/assets/anifit-video-katze-3.mp4', slotId: 'anifit-video-katze-3', ph: 'Video/Foto: Katzensnack – Datei assets/anifit-video-katze-3.mp4 hochladen oder Foto hier ablegen', title: 'Snacks ohne Chemie', text: 'Würste, Sticks und Chips aus Lachs, Huhn oder Rind.', href: SHOP + 'shop/catalog/katzenleckerlis', label: 'Zu den Snacks' }] :

  [
  { wide: true, src: '/assets/anifit-video-hund-1.mp4', fallback: '/assets/startseite-video.mp4', slotId: 'anifit-video-1', ph: 'Video/Foto: Hund – Datei assets/anifit-video-hund-1.mp4 hochladen oder Foto hier ablegen', title: 'Frischfutter, das begeistert', text: '60–75 % Fleischanteil, kalt abgefüllt – ohne künstliche Zusätze.', href: SHOP + 'shop/catalog/nassfutter-hund', label: 'Zum Nassfutter' },
  { src: '/assets/anifit-video-hund-2.mp4', slotId: 'anifit-video-2', ph: 'Video/Foto: Fütterung – Datei assets/anifit-video-hund-2.mp4 hochladen oder Foto hier ablegen', title: 'Die Fütterung', text: 'So einfach ist die Umstellung auf Anifit.', href: SHOP + 'shop/catalog/dog-sets', label: 'Probierset ansehen' },
  { src: '/assets/anifit-video-hund-3.mp4', slotId: 'anifit-video-3', ph: 'Video/Foto: Hund unterwegs – Datei assets/anifit-video-hund-3.mp4 hochladen oder Foto hier ablegen', title: 'Energie, die man sieht', text: 'Gesunde Ernährung für jedes Abenteuer.', href: SHOP + 'shop/catalog/hundeleckerlis', label: 'Zu den Snacks' }];

  return (
    <section className="vstories" data-screen-label="Anifit Videos">
      <div className="section-head" data-reveal>
        <p className="kicker">Anifit in Bewegung</p>
        <h2>Sehen Sie selbst, wie es schmeckt</h2>
      </div>
      <div className="seg-control anifit-video-toggle" data-reveal>
        <button
          className={'seg-btn' + (petType === 'dog' ? ' active' : '')}
          onClick={() => setPetType('dog')}>
          Hunde-Videos
        </button>
        <button
          className={'seg-btn' + (petType === 'cat' ? ' active' : '')}
          onClick={() => setPetType('cat')}>
          Katzen-Videos
        </button>
      </div>
      <div className="vstories-grid" key={petType}>
        {frames.map((f) =>
        <VideoStoryFrame
          key={f.slotId}
          wide={f.wide}
          src={f.src}
          slotId={f.slotId}
          placeholder={f.ph}
          title={f.title}
          text={f.text}
          href={f.href}
          label={f.label}>
        </VideoStoryFrame>
        )}
      </div>
    </section>);

}

/* ---------- Foto-Momente (3D-Tilt Galerie) ---------- */
function AnifitMomente() {
  const cards = [
  { id: 'anifit-mom-1', src: '/assets/scully.jpg', cap: 'Scully – verkostet jedes Menü persönlich', ph: 'Foto: Hund mit Anifit' },
  { id: 'anifit-mom-2', src: '/assets/fibel/p06-2.png', cap: 'Volle Näpfe, glänzendes Fell', ph: 'Foto: Napf / Fütterung hier ablegen' },
  { id: 'anifit-mom-3', src: '/assets/katze-frisst.jpg', cap: 'Auch Katzen lieben Anifit', ph: 'Foto: Katze hier ablegen' },
  { id: 'anifit-mom-4', src: '/assets/fibel/p09-2.png', cap: 'Energie für jedes Abenteuer', ph: 'Foto: Snack-Moment hier ablegen' }];

  return (
    <section className="amoments-section" data-screen-label="Anifit Momente">
      <div className="section-head" data-reveal>
        <p className="kicker">Anifit-Momente</p>
        <h2>Gesund sieht man – jeden Tag</h2>
      </div>
      <div className="amoments-grid" data-reveal>
        {cards.map((c) =>
        <Tilt3D key={c.id} max={12}>
            <figure className="amoment-card">
              <div className="amoment-media">
                <image-slot
                id={c.id}
                shape="rect"
                src={c.src || undefined}
                placeholder={c.ph}>
              </image-slot>
              </div>
              <figcaption>{c.cap}</figcaption>
            </figure>
          </Tilt3D>
        )}
      </div>
    </section>);

}

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>);

}

/* ---------- Video-Hero (je Tierart) ---------- */
function AnifitHero({ petType, setPetType }) {
  const [videos, setVideos] = React.useState({ dog: null, cat: null });
  React.useEffect(() => {
    let alive = true;
    const candidates = {
      dog: ['/assets/anifit-hero-hund.mp4', '/assets/startseite-video.mp4'],
      cat: ['/assets/anifit-hero-katze.mp4', '/assets/video-frischfutter.mp4']
    };
    Object.entries(candidates).forEach(([pet, list]) => {
      list.reduce(
        (p, url) => p.then((found) => found ||
        fetch(url, { method: 'HEAD' }).then((r) => r.ok ? url : null).catch(() => null)),
        Promise.resolve(null)
      ).then((url) => {
        if (alive && url) setVideos((v) => Object.assign({}, v, { [pet]: url }));
      });
    });
    return () => {alive = false;};
  }, []);
  const src = videos[petType];
  return (
    <section className="video-hero anifit-hero" data-screen-label="Anifit Hero">
      {src ?
      <video
        key={src}
        className="video-hero-bg"
        src={src}
        poster="/assets/fibel/p02-2.png"
        autoPlay
        muted
        loop
        playsInline>
      </video> : null}
      <div className="video-hero-shade"></div>
      <div className="video-hero-content">
        <p className="kicker" data-reveal>Anifit Frischfutter</p>
        <h1 data-reveal>Frischfutter & Trockenfutter</h1>
        <p className="lede" data-reveal>
          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.
        </p>
        <div className="seg-control pet-toggle" data-reveal>
          <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>
        <div className="hero-actions" data-reveal>
          <a className="btn btn-primary btn-lg" href={SORTIMENT[petType].all}>
            Zum {petType === 'dog' ? 'Hundefutter' : 'Katzenfutter'}
          </a>
          <a className="btn btn-ghost-light btn-lg" href="mailto:info@miss-scully.ch?subject=Anifit%20Beratung">
            Beratung anfragen
          </a>
        </div>
        <div className="anifit-hero-chips" data-reveal>
          <span className="anifit-chip"><span className="pulse-dot"></span>60–75 % Fleischanteil</span>
          <span className="anifit-chip">100 % offene Deklaration</span>
          <span className="anifit-chip">Versandkostenfrei ab CHF 69</span>
        </div>
      </div>
    </section>);

}

/* ---------- Tweaks ---------- */
const ANIFIT_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#B77253", "#9A5B3F", "#221C36"],
  "tone": "Elegant",
  "motion": "Lebendig"
}/*EDITMODE-END*/;

const ANIFIT_PALETTES = [
["#B77253", "#9A5B3F", "#221C36"], // Kupfer (Brand)
["#5F8F6E", "#4C7A5B", "#1E2A22"], // Salbei
["#5E739E", "#4A5F89", "#1B2033"]]; // Nachtblau

function useAnifitTweaks() {
  const [t, setTweak] = useTweaks(ANIFIT_TWEAK_DEFAULTS);
  React.useEffect(() => {
    const r = document.documentElement.style;
    const [accent, deep, dark] = t.palette;
    r.setProperty('--accent', accent);
    r.setProperty('--accent-deep', deep);
    r.setProperty('--accent-tint', 'color-mix(in srgb, ' + accent + ' 14%, transparent)');
    r.setProperty('--paw', 'color-mix(in srgb, ' + accent + ' 35%, transparent)');
    r.setProperty('--paw-on-dark', accent);
    r.setProperty('--dark', dark);
    r.setProperty('--dark-2', 'color-mix(in srgb, ' + dark + ' 88%, white)');
    r.setProperty('--font-display',
    t.tone === 'Freundlich' ? '"Bricolage Grotesque", sans-serif' : '"DM Serif Display", serif');
    document.body.dataset.tone = t.tone.toLowerCase();
    document.body.dataset.motion = t.motion.toLowerCase();
  }, [t]);
  return [t, setTweak];
}

function AnifitTweaks({ t, setTweak }) {
  return (
    <TweaksPanel>
      <TweakColor
        label="Farbwelt"
        value={t.palette}
        options={ANIFIT_PALETTES}
        onChange={(v) => setTweak('palette', v)}>
      </TweakColor>
      <TweakRadio
        label="Charakter"
        value={t.tone}
        options={['Elegant', 'Freundlich']}
        onChange={(v) => setTweak('tone', v)}>
      </TweakRadio>
      <TweakRadio
        label="Bewegung"
        value={t.motion}
        options={['Lebendig', 'Ruhig']}
        onChange={(v) => setTweak('motion', v)}>
      </TweakRadio>
    </TweaksPanel>);

}

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

  return (
    <PageShell active="Anifit Shop">
      <AnifitHero petType={petType} setPetType={setPetType}></AnifitHero>

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

      <AnifitVideos petType={petType} setPetType={setPetType}></AnifitVideos>

      <ProbiersetSpotlight petType={petType}></ProbiersetSpotlight>

      <AnifitGarantie></AnifitGarantie>

      {petType === 'dog' ? <WelpenGuide></WelpenGuide> : null}

      <AnifitMomente></AnifitMomente>

      <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>

      <AnifitTweaks t={t} setTweak={setTweak}></AnifitTweaks>
    </PageShell>);

}

window.AnifitPage = AnifitPageShop;