// Miss-Scully — Animalia Versicherung (interaktiv, Hund & Katze)
// 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=';

function AnimaliaPlans({ petType }) {
  const calc = '#animalia';
  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) =>
        <div key={p.name} className={'plan-card' + (p.pop ? ' popular' : '')}>
            {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={calc}>
              Prämie berechnen
            </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) =>
        <div key={b.t} className="feature-card benefit-card">
            <strong>{b.t}</strong>
            <p>{b.d}</p>
          </div>
        )}
      </div>
    </section>);

}

function AnimaliaPageInteractive() {
  const [petType, setPetType] = React.useState('dog');
  const calc = '#animalia';

  const steps = [
  { t: 'Einloggen', d: 'In den gesicherten Animalia-Kundenbereich einloggen.' },
  { t: 'Schadenfall melden', d: 'Tierarztrechnungen einfach online hochladen.' },
  { t: 'Geld erhalten', d: 'Die Kosten werden direkt auf Ihr Bankkonto erstattet.' }];

  return (
    <PageShell active="Animalia Versicherung">
      <PageHero
        kicker="Animalia Tierversicherung"
        title={petType === 'dog' ?
        'Die beste Versicherung für Ihren Hund' :
        'Die beste Versicherung für Ihre Katze'}
        lede="Schützen Sie Ihr Tier gegen Krankheiten und Unfälle – ohne jede Altersbegrenzung. Als offizieller Animalia-Partner begleiten wir Sie persönlich.">

        <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={calc}>Prämie berechnen</a>
      </PageHero>

      <AnimaliaPlans petType={petType}></AnimaliaPlans>

      <AnimaliaBenefits></AnimaliaBenefits>

      <section className="split-section" data-screen-label="Schadenservice">
        <div className="split-media" data-reveal>
          <image-slot
            id="animalia-pet"
            shape="rounded"
            radius="22"
            src="assets/westie-vet.jpg"
            placeholder="Foto">
          </image-slot>
        </div>
        <div className="split-copy">
          <p className="kicker" data-reveal>Tierisch einfach</p>
          <h2 data-reveal>So funktioniert der Schadenservice</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>

      <AnimaliaCalc breedType={petType}></AnimaliaCalc>
    </PageShell>);

}

window.AnimaliaPage = AnimaliaPageInteractive;