// Miss-Scully — Animalia Versicherung (voll interaktiv: Video-Hero, Szenarien, Schätzer, FAQ)
// Lädt nach homepage-sections.jsx + subpages-content.jsx, ersetzt window.AnimaliaPage.

const CALC_BASE =
'https://animalia.ch/de/pramienrechner-versicherung-hund-katze?codeAgent=9590&breedType=';

/* ---------- Count-up hook (startet, sobald sichtbar) ---------- */
function useCountUp(target, duration) {
  const ref = React.useRef(null);
  const [val, setVal] = React.useState(0);
  const reduced = window.useReducedMotion ? window.useReducedMotion() : false;
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (reduced || !('IntersectionObserver' in window)) { setVal(target); return; }
    let started = false;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started) {
          started = true;
          const dur = duration || 1400;
          const t0 = performance.now();
          const tick = (now) => {
            const p = Math.min(1, (now - t0) / dur);
            const ease = 1 - Math.pow(1 - p, 3);
            setVal(target * ease);
            if (p < 1) requestAnimationFrame(tick);else setVal(target);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [target, duration, reduced]);
  return [ref, val];
}

/* ---------- Video-Hero (eigenes Video je Tierart) ---------- */
function AnimaliaHero({ petType, setPetType }) {
  const [videos, setVideos] = React.useState({ dog: null, cat: null });
  React.useEffect(() => {
    let alive = true;
    const candidates = {
      dog: ['/assets/animalia-hero-hund.mp4', '/assets/animalia-hero.mp4'],
      cat: ['/assets/animalia-hero-katze.mp4', '/assets/animalia-hero.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 animalia-hero" data-screen-label="Animalia Hero">
      {src ?
      <video
        key={src}
        className="video-hero-bg"
        src={src}
        poster="/assets/westie-vet.jpg"
        autoPlay
        muted
        loop
        playsInline>
      </video> : null}
      <div className="video-hero-shade"></div>
      <div className="video-hero-content">
        <p className="kicker" data-reveal>Animalia Tierversicherung</p>
        <h1 data-reveal>
          {petType === 'dog' ?
          'Die beste Versicherung für Ihren Hund' :
          'Die beste Versicherung für Ihre Katze'}
        </h1>
        <p className="lede" data-reveal>
          Schützen Sie Ihr Tier gegen Krankheiten und Unfälle – ohne jede
          Altersbegrenzung. Als offizieller Animalia-Partner begleiten wir Sie persönlich.
        </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="#estimator">Prämie schätzen</a>
          <a className="btn btn-ghost-light btn-lg" href="#szenarien">Was kostet der Tierarzt?</a>
        </div>
        {src ? null :
        <p className="video-hero-note">
          Videos als «assets/animalia-hero-hund.mp4» und «assets/animalia-hero-katze.mp4» ablegen – sie erscheinen automatisch je nach Auswahl.
        </p>}
      </div>
    </section>);

}

/* ---------- Animierte Zahlen ---------- */
function Stat({ value, suffix, prefix, decimals, label }) {
  const [ref, val] = useCountUp(value, 1500);
  const shown = (prefix || '') + val.toFixed(decimals || 0).replace('.', ',') + (suffix || '');
  return (
    <div className="astat" ref={ref} data-reveal>
      <span className="astat-num">{shown}</span>
      <span className="astat-label">{label}</span>
    </div>);

}

function AnimaliaStats() {
  return (
    <section className="astat-section" data-screen-label="Animalia Zahlen">
      <div className="astat-grid">
        <Stat value={90} suffix=" %" label="Rückerstattung der Behandlungskosten"></Stat>
        <Stat value={0} label="Altersgrenze – auch Senioren willkommen"></Stat>
        <Stat value={24} suffix="/7" label="Schadenmeldung online, rund um die Uhr"></Stat>
        <Stat value={100} prefix="CHF " label="pro Jahr für Prävention geschenkt"></Stat>
      </div>
    </section>);

}

/* ---------- Interaktive Kosten-Szenarien ---------- */
function CostScenarios({ petType }) {
  const scenarios = [
  { n: 'Kreuzband-OP', cost: 4500, d: 'Eine der häufigsten Operationen bei Hunden: Riss des Kreuzbandes nach dem Toben – inkl. OP, Narkose und Nachkontrollen.' },
  { n: 'Magendrehung (Not-OP)', cost: 5800, d: 'Lebensbedrohlicher Notfall, der sofort operiert werden muss – oft nachts oder am Wochenende mit Notfallzuschlag.' },
  { n: 'Fremdkörper verschluckt', cost: 3200, d: 'Spielzeug, Stein oder Socke im Magen: Diagnostik, Endoskopie oder OP plus stationäre Überwachung.' },
  { n: 'Allergie-Abklärung', cost: 1800, d: 'Tests, Ausschlussdiät und Behandlung über mehrere Monate – Kosten, die sich leise summieren.' },
  { n: 'Zahnbehandlung', cost: 1400, d: 'Zahnstein-Entfernung unter Narkose, Extraktionen und Röntgen – bei Katzen und kleinen Hunden besonders häufig.' }];

  const [sel, setSel] = React.useState(0);
  const s = scenarios[sel];
  const deductible = 250;
  const refund = Math.round((s.cost - deductible) * 0.9);
  const own = s.cost - refund;
  const fmt = (n) => "CHF " + n.toLocaleString('de-CH').replace(/,/g, "'");

  return (
    <section className="scenario-section" id="szenarien" data-screen-label="Kosten-Szenarien">
      <div className="section-head" data-reveal>
        <p className="kicker">Was kostet der Tierarzt?</p>
        <h2>Echte Fälle, echte Zahlen</h2>
        <p className="section-sub">
          Wählen Sie einen typischen Behandlungsfall – und sehen Sie sofort,
          was die Versicherung übernimmt und was Sie selbst tragen.
        </p>
      </div>
      <div className="scenario-chips" data-reveal>
        {scenarios.map((sc, i) =>
        <button
          key={sc.n}
          className={'scenario-chip' + (sel === i ? ' active' : '')}
          onClick={() => setSel(i)}>
            {sc.n}
          </button>
        )}
      </div>
      <div className="scenario-panel" data-reveal>
        <div className="scenario-desc">
          <h3>{s.n}</h3>
          <p>{s.d}</p>
          <div className="scenario-total">
            {fmt(s.cost)}
            <small>Typische Gesamtkosten (Richtwert Schweiz)</small>
          </div>
        </div>
        <div>
          <div className="cost-bars">
            <div className="cost-bar-row">
              <div className="cost-bar-head">
                <span>Animalia erstattet</span>
                <strong>{fmt(refund)}</strong>
              </div>
              <div className="cost-bar-track">
                <div className="cost-bar-fill refund" style={{ width: refund / s.cost * 100 + '%' }}></div>
              </div>
            </div>
            <div className="cost-bar-row">
              <div className="cost-bar-head">
                <span>Ihr Anteil</span>
                <strong>{fmt(own)}</strong>
              </div>
              <div className="cost-bar-track">
                <div className="cost-bar-fill own" style={{ width: own / s.cost * 100 + '%' }}></div>
              </div>
            </div>
          </div>
          <p className="scenario-fine">
            Rechenbeispiel: 90 % Rückerstattung nach Selbstbehalt von CHF 250.–.
            Effektive Werte abhängig von Deckung und Police.
          </p>
        </div>
      </div>
    </section>);

}

/* ---------- Interaktiver Prämienschätzer ---------- */
function PremiumEstimator({ petType }) {
  const [plan, setPlan] = React.useState(1); // 0 Compact, 1 Classic, 2 Comfort
  const [age, setAge] = React.useState(3);
  const planData = [
  { name: 'Compact', base: 24 },
  { name: 'Classic', base: 41 },
  { name: 'Comfort', base: 57 }];

  const petFactor = petType === 'cat' ? 0.78 : 1;
  const ageAdd = Math.max(0, age - 2) * 1.9;
  const raw = (planData[plan].base + ageAdd) * petFactor;
  const monthly = Math.round(raw);

  const [display, setDisplay] = React.useState(monthly);
  React.useEffect(() => {
    let raf;const t0 = performance.now();const from = display;const to = monthly;
    const tick = (now) => {
      const p = Math.min(1, (now - t0) / 450);
      const e = 1 - Math.pow(1 - p, 3);
      setDisplay(Math.round(from + (to - from) * e));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [monthly]);

  const calc = CALC_BASE + (petType || 'dog');

  return (
    <section className="estimator-section" id="estimator" data-screen-label="Prämienschätzer">
      <div className="section-head" data-reveal>
        <p className="kicker">Prämienschätzer</p>
        <h2>In 10 Sekunden zur Richtprämie</h2>
        <p className="section-sub">
          Bewegen Sie die Regler – die geschätzte Monatsprämie passt sich sofort an.
          Für die verbindliche Prämie nutzen Sie den offiziellen Animalia-Rechner.
        </p>
      </div>

      <div className="estimator" data-reveal>
        <div className="est-controls">
          <div className="est-row">
            <label className="est-label">Deckung</label>
            <div className="seg-control est-plans">
              {planData.map((p, i) =>
              <button
                key={p.name}
                className={'seg-btn' + (plan === i ? ' active' : '')}
                onClick={() => setPlan(i)}>
                  {p.name}
                </button>
              )}
            </div>
          </div>

          <div className="est-row">
            <label className="est-label">
              Alter Ihre{petType === 'cat' ? 'r Katze' : 's Hundes'}
              <strong className="est-age">{age} {age === 1 ? 'Jahr' : 'Jahre'}</strong>
            </label>
            <input
              className="est-slider"
              type="range"
              min="0"
              max="12"
              step="1"
              value={age}
              onChange={(e) => setAge(Number(e.target.value))} />

            <div className="est-scale"><span>Welpe</span><span>Senior</span></div>
          </div>

          <ul className="est-includes">
            {(plan === 0 ?
            ['Unfälle'] :
            plan === 1 ?
            ['Unfälle', 'Akute & chronische Krankheiten', 'CHF 100.– Prävention'] :
            ['Unfälle', 'Krankheiten', 'Erbkrankheiten & Geburtsgebrechen', 'CHF 100.– Prävention']).
            map((it) =>
            <li key={it}><span className="trust-dot"></span>{it}</li>
            )}
          </ul>
        </div>

        <div className="est-result">
          <span className="est-result-tag">Geschätzte Monatsprämie</span>
          <div className="est-amount">
            <span className="est-cur">CHF</span>
            <span className="est-big">{display}</span>
            <span className="est-per">/Mt.</span>
          </div>
          <p className="est-note">
            {planData[plan].name}-Deckung · {petType === 'cat' ? 'Katze' : 'Hund'} · {age} {age === 1 ? 'Jahr' : 'Jahre'}
          </p>
          <a className="btn btn-primary btn-lg" href={calc} target="_blank" rel="noopener">
            Verbindliche Prämie berechnen →
          </a>
          <p className="est-fine">Unverbindliche Schätzung. Es gelten die Konditionen der Animalia.</p>
        </div>
      </div>
    </section>);

}

/* ---------- Video-Sektion (interaktiv: Hund/Katze) ---------- */
function AnimaliaVideo({ petType, setPetType }) {
  const frames = petType === 'cat' ?
  [
  { wide: true, src: '/assets/animalia-video-katze-1.mp4', slotId: 'animalia-video-katze-1', ph: 'Video/Foto: Katze – Datei assets/animalia-video-katze-1.mp4 hochladen oder Foto hier ablegen', title: 'Neugier ohne Risiko', text: 'Auch Freigänger sind rundum versichert.', href: '#estimator', label: 'Prämie schätzen' },
  { src: '/assets/animalia-video-katze-2.mp4', slotId: 'animalia-video-katze-2', ph: 'Video/Foto: Katze beim Tierarzt – Datei assets/animalia-video-katze-2.mp4 hochladen oder Foto hier ablegen', title: 'Beim Tierarzt entspannt', text: '90 % der Kosten werden zurückerstattet.', href: '#szenarien', label: 'Beispiele ansehen' },
  { src: '/assets/animalia-video-katze-3.mp4', slotId: 'animalia-video-katze-3', ph: 'Video/Foto: Katze zu Hause – Datei assets/animalia-video-katze-3.mp4 hochladen oder Foto hier ablegen', title: 'Ein Katzenleben lang', text: 'Ohne Altersgrenze – auch für Senioren.', href: '#estimator', label: 'Prämie schätzen' }] :

  [
  { wide: true, src: '/assets/animalia-video-hund-1.mp4', slotId: 'animalia-video-1', ph: 'Video/Foto: Hund & Halterin – Datei assets/animalia-video-hund-1.mp4 hochladen oder Foto hier ablegen', title: 'Sorglos unterwegs', text: 'Ohne Altersgrenze versichert – ein Hundeleben lang.', href: '#estimator', label: 'Prämie schätzen' },
  { src: '/assets/animalia-video-hund-2.mp4', slotId: 'animalia-video-2', ph: 'Video/Foto: Beim Tierarzt – Datei assets/animalia-video-hund-2.mp4 hochladen oder Foto hier ablegen', title: 'Beim Tierarzt entspannt', text: '90 % der Kosten werden zurückerstattet.', href: '#szenarien', label: 'Beispiele ansehen' },
  { src: '/assets/animalia-video-hund-3.mp4', slotId: 'animalia-video-3', ph: 'Video/Foto: Hund beim Spielen – Datei assets/animalia-video-hund-3.mp4 hochladen oder Foto hier ablegen', title: 'Toben ohne Sorgen', text: 'Unfälle sind mitversichert – weltweit.', href: '#estimator', label: 'Prämie schätzen' }];

  return (
    <section className="vstories animalia-video" data-screen-label="Animalia Videos">
      <div className="section-head" data-reveal>
        <p className="kicker">Im Schadenfall an Ihrer Seite</p>
        <h2>Sicherheit, die man spürt</h2>
      </div>
      <div className="seg-control agallery-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>);

}

function AnimaliaPlans() {
  const plans = [
  { name: 'Animalia Compact', tag: 'Der Basisschutz', items: ['Unfälle'], pop: false },
  { name: 'Animalia Classic', tag: 'Der Bewährte', items: ['Unfälle', 'Akute und chronische Krankheiten', 'CHF 100.– geschenkt für Präventionskosten'], pop: false },
  { name: 'Animalia Comfort', tag: 'Beliebt', items: ['Unfälle', 'Akute und chronische Krankheiten', 'Erbkrankheiten und/oder Geburtsgebrechen', 'CHF 100.– für Präventionskosten'], pop: true }];

  return (
    <section className="plan-section" data-screen-label="Animalia Deckungen">
      <div className="section-head" data-reveal>
        <p className="kicker">Drei Deckungen</p>
        <h2>Vom Basisschutz bis zum Rundum-Paket</h2>
      </div>
      <div className="plan-grid" data-reveal>
        {plans.map((p, i) =>
        <div key={p.name} className={'plan-card' + (p.pop ? ' popular' : '')} style={{ transitionDelay: i * 70 + 'ms' }}>
            {p.pop ? <span className="plan-badge">Beliebt</span> : null}
            <p className="duo-role">{p.tag}</p>
            <h3>{p.name}</h3>
            <ul className="plan-list">
              {p.items.map((it) =>
            <li key={it}><span className="trust-dot"></span>{it}</li>
            )}
            </ul>
            <a className={'btn ' + (p.pop ? 'btn-primary' : 'btn-ghost')} href="#estimator">
              Prämie schätzen
            </a>
          </div>
        )}
      </div>
    </section>);

}

function AnimaliaBenefits() {
  const benefits = [
  { t: 'Krankheiten', d: '90 % der Behandlungskosten nach Selbstbehalt – ohne Begrenzung der Versicherungssumme.' },
  { t: 'Unfälle', d: '90 % der Behandlungskosten nach Selbstbehalt, ebenfalls ohne Summenbegrenzung.' },
  { t: 'Präventionspaket', d: 'CHF 100.– pro Jahr für Vorsorge – ohne Selbstbehalt.' },
  { t: 'Weltweite Deckung', d: 'Im Notfall ist Ihr Tier auch in den Ferien weltweit versichert.' },
  { t: 'Komplementärmedizin', d: 'Bis CHF 600.–/Jahr für Osteopathie, Physiotherapie oder Akupunktur.' },
  { t: 'Tierambulanz', d: 'Bis CHF 100.–/Jahr für den Notfalltransport in die Tierklinik.' },
  { t: 'Unterbringung', d: 'Bis CHF 150.–/Jahr, falls Sie ins Spital müssen und Ihr Tier versorgt werden muss.' },
  { t: 'Unterkunftskosten', d: 'Bis CHF 200.–/Jahr bei Klinikaufenthalten – für Sie und Ihr Tier.' }];

  return (
    <section className="benefit-section" data-screen-label="Animalia Leistungen">
      <div className="section-head" data-reveal>
        <p className="kicker">8 gute Gründe</p>
        <h2>Das leistet die Animalia Tierversicherung</h2>
        <p className="section-sub">Ohne Altersbegrenzung – auch Senioren auf vier Pfoten sind willkommen.</p>
      </div>
      <div className="benefit-grid" data-reveal>
        {benefits.map((b, i) =>
        <div key={b.t} className="feature-card benefit-card" data-reveal style={{ transitionDelay: i % 4 * 60 + 'ms' }}>
            <strong>{b.t}</strong>
            <p>{b.d}</p>
          </div>
        )}
      </div>
    </section>);

}

/* ---------- Galerie (interaktiv: Hunde/Katzen, Bilder per Drag & Drop) ---------- */
function AnimaliaGallery({ petType, setPetType }) {
  const sets = {
    dog: [
    { id: 'animalia-gal-dog-1', src: '/assets/scully.jpg', cap: 'Scully – bestens versichert unterwegs', ph: 'Foto: Hund unterwegs' },
    { id: 'animalia-gal-dog-2', src: '/assets/westie-vet.jpg', cap: 'Beim Tierarzt ohne Kostensorgen', ph: 'Foto: Beim Tierarzt' },
    { id: 'animalia-gal-dog-3', src: '/assets/hund-toben.jpg', cap: 'Toben ohne Risiko', ph: 'Foto: Hund beim Spielen hier ablegen' }],

    cat: [
    { id: 'animalia-gal-cat-1', src: '/assets/katzenbaby.jpg', cap: 'Neugier ist mitversichert', ph: 'Foto: Katze hier ablegen' },
    { id: 'animalia-gal-cat-2', src: '', cap: 'Beim Tierarzt ohne Kostensorgen', ph: 'Foto: Katze beim Tierarzt hier ablegen' },
    { id: 'animalia-gal-cat-3', src: '/assets/katze-tracker.jpg', cap: 'Freigänger? Kein Problem.', ph: 'Foto: Katze draussen hier ablegen' }]
  };

  const cards = sets[petType] || sets.dog;
  return (
    <section className="agallery-section" data-screen-label="Animalia Galerie">
      <div className="section-head" data-reveal>
        <p className="kicker">Unbeschwerte Momente</p>
        <h2>{petType === 'cat' ? 'Versichert heisst: einfach Katze sein dürfen' : 'Versichert heisst: einfach Hund sein dürfen'}</h2>
      </div>
      <div className="seg-control agallery-toggle" data-reveal>
        <button
          className={'seg-btn' + (petType === 'dog' ? ' active' : '')}
          onClick={() => setPetType('dog')}>
          Hunde
        </button>
        <button
          className={'seg-btn' + (petType === 'cat' ? ' active' : '')}
          onClick={() => setPetType('cat')}>
          Katzen
        </button>
      </div>
      <div className="agallery-grid" key={petType} data-reveal>
        {cards.map((c, i) =>
        <figure key={c.id} className="agallery-card" style={{ animationDelay: i * 90 + 'ms' }}>
            <div className="agallery-media">
              <image-slot
              id={c.id}
              shape="rect"
              src={c.src || undefined}
              placeholder={c.ph}>
            </image-slot>
            </div>
            <figcaption className="agallery-cap">{c.cap}</figcaption>
          </figure>
        )}
      </div>
    </section>);

}

/* ---------- FAQ ---------- */
function AnimaliaFaq() {
  const items = [
  { q: 'Ab wann ist mein Tier versichert?', a: 'Nach Abschluss gilt eine kurze Wartefrist (Karenzfrist) für Krankheiten; Unfälle sind in der Regel schneller gedeckt. Die genauen Fristen finden Sie in Ihrer Police.' },
  { q: 'Kann ich meinen Tierarzt frei wählen?', a: 'Ja – Sie gehen zu dem Tierarzt oder der Klinik Ihres Vertrauens, in der ganzen Schweiz und im Notfall weltweit.' },
  { q: 'Wie melde ich einen Schadenfall?', a: 'Ganz einfach online: Im Animalia-Kundenbereich einloggen, Tierarztrechnung hochladen – die Rückerstattung kommt direkt auf Ihr Bankkonto.' }];

  const [openKey, setOpenKey] = React.useState(items[0].q);
  return (
    <section className="faq-section" data-screen-label="Animalia FAQ">
      <div className="section-head" data-reveal>
        <p className="kicker">Häufige Fragen</p>
        <h2>Gut zu wissen</h2>
      </div>
      <div className="faq-list" data-reveal>
        {items.map((f) =>
        <div key={f.q} className={'faq-item' + (openKey === f.q ? ' open' : '')}>
            <button className="faq-q" onClick={() => setOpenKey(openKey === f.q ? null : f.q)}>
              {f.q}
              <span className="faq-chevron"></span>
            </button>
            <div className="faq-a">
              <p>{f.a}</p>
            </div>
          </div>
        )}
      </div>
    </section>);

}

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

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

function useAnimaliaTweaks() {
  const [t, setTweak] = useTweaks(ANIMALIA_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 AnimaliaTweaks({ t, setTweak }) {
  return (
    <TweaksPanel>
      <TweakColor
        label="Farbwelt"
        value={t.palette}
        options={ANIMALIA_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>);

}

/* ---------- Seite ---------- */
function AnimaliaPageInteractive() {
  const [petType, setPetType] = React.useState('dog');
  const [t, setTweak] = useAnimaliaTweaks();

  return (
    <PageShell active="Animalia Versicherung">
      <AnimaliaHero petType={petType} setPetType={setPetType}></AnimaliaHero>

      <AnimaliaStats></AnimaliaStats>

      <CostScenarios petType={petType}></CostScenarios>

      <PremiumEstimator petType={petType}></PremiumEstimator>

      <AnimaliaPlans></AnimaliaPlans>

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

      <AnimaliaBenefits></AnimaliaBenefits>

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

      <AnimaliaFaq></AnimaliaFaq>

      <AnimaliaCalc breedType={petType}></AnimaliaCalc>

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

}

window.AnimaliaPage = AnimaliaPageInteractive;