// Miss-Scully — Welpenfibel als eigene Seite (lädt nach welpenfibel.jsx)
const WP_HURTTA_URL = 'https://www.hurtta-deutschland.de/seeker-harness,1s.htm?bid=521038-95722-&adcref=www.miss-scully.ch';
const WP_STAGES = [
{ from: 8, to: 12, t: 'Ankommen & Vertrauen', d: 'Die ersten Wochen im neuen Zuhause: viel Schlaf, feste Rituale, Stubenreinheit üben und die Welt in kleinen Dosen kennenlernen. Ihr Welpe braucht jetzt vor allem Sicherheit und eine verlässliche Bezugsperson.',
  facts: [['Schlaf', '18–20 Stunden pro Tag'], ['Mahlzeiten', '4 kleine Portionen täglich'], ['Bewegung', 'ca. 5 Min. Spaziergang pro Lebensmonat, 2× täglich'], ['Gesundheit', 'Impfungen nach Plan des Tierarztes, üblich um 8, 12 und 16 Wochen; Entwurmung']],
  todo: ['Tierarzt-Check und Impfplan besprechen', 'Versicherung abschliessen, solange der Welpe gesund ist', 'Erstes leichtes Geschirr anpassen', 'Mikrochip bei AMICUS auf Ihre Adresse registrieren', 'Hund bei der Gemeinde anmelden (Stadt Zürich: Hundekontrolle)', 'Nach jedem Schlafen, Fressen und Spielen sofort nach draussen'],
  links: [['Animalia Tierversicherung', '/Animalia%20Versicherung.html'], ['Anifit Welpen-Sets', 'https://miss-scully.anifit.ch/shop/catalog/dog-sets'], ['Hurtta Seeker Harness', WP_HURTTA_URL]] },
{ from: 12, to: 20, t: 'Sozialisierung', d: 'Die wichtigste Lernphase: neue Menschen, Hunde, Geräusche und Untergründe – immer freiwillig und mit Rückzugsmöglichkeit. Was Ihr Hund jetzt positiv erlebt, prägt ihn ein Leben lang.',
  facts: [['Schlaf', '16–18 Stunden pro Tag'], ['Mahlzeiten', '3 Portionen täglich'], ['Bewegung', 'kurze, abwechslungsreiche Ausflüge statt langer Märsche'], ['Gesundheit', 'Impfungen abschliessen, Parasitenschutz besprechen']],
  todo: ['Welpenkurs besuchen', 'Kurze Spaziergänge: 5 Minuten pro Lebensmonat', 'Rückruf spielerisch üben', 'Autofahren, Bus, Stadt und Tierarztpraxis positiv kennenlernen', 'Alleinbleiben in Minuten-Schritten üben'],
  links: [['Hurtta Seeker Harness', WP_HURTTA_URL], ['Gassitaschen für Leckerli', '/Gassitaschen.html'], ['Reisekörbchen', '/Reisekoerbchen.html']] },
{ from: 20, to: 36, t: 'Junghund & Zahnwechsel', d: 'Der Hund wird mutiger und erkundet weiter. Die Milchzähne fallen aus, Kauen ist jetzt ein echtes Bedürfnis. Gleichzeitig wächst die Neugier – und der Radius beim Freilauf.',
  facts: [['Schlaf', '14–16 Stunden pro Tag'], ['Mahlzeiten', '2–3 Portionen täglich'], ['Bewegung', 'Spaziergänge langsam verlängern, keine Treppen- und Sprungorgien'], ['Gesundheit', 'Zahnwechsel beobachten, Kastrationsfrage mit dem Tierarzt klären']],
  todo: ['GPS-Tracker für mehr Sicherheit beim Freilauf', 'Geschirrgrösse neu prüfen – er wächst schnell', 'Kauartikel statt Schuhe anbieten', 'Leinenführigkeit konsequent trainieren'],
  links: [['Tractive GPS-Tracker', '/Tractive%20GPS.html'], ['Hurtta Geschirre & Grössenfinder', '/Hurtta.html'], ['Hundegeschirre', '/Hundegeschirre.html']] },
{ from: 36, to: 53, t: 'Pubertät', d: 'Grenzen werden getestet, Gelerntes scheint manchmal vergessen. Geduld, klare Regeln und viel gemeinsame Zeit draussen helfen durch diese Phase. Danach steht der Übergang zum erwachsenen Hund an.',
  facts: [['Schlaf', '12–14 Stunden pro Tag'], ['Mahlzeiten', '2 Portionen täglich'], ['Bewegung', 'längere Touren möglich, je nach Rasse und Grösse'], ['Gesundheit', 'Auffrischimpfung nach Plan, Gewicht und Gelenke im Blick behalten']],
  todo: ['Training konsequent weiterführen', 'Wetterfeste Ausrüstung für längere Touren', 'Futter auf Junghund bzw. Erwachsenenfutter umstellen', 'Orthopädisches Bett für gesunde Gelenke'],
  links: [['Hurtta Regen- & Winterjacken', '/Hurtta.html'], ['Hundebetten', '/Hundebetten.html'], ['Anifit Shop', '/Anifit%20Shop.html']] }];
const WP_GEAR = [
{ k: 'Futter', t: 'Anifit Welpen-Sets', d: 'Hochwertiges Futter mit hohem Fleischanteil für gesundes Wachstum – mit persönlicher Beratung.', href: 'https://miss-scully.anifit.ch/shop/catalog/dog-sets', ext: true, img: '/assets/fibel/p05-1.png', cta: 'Zu den Welpen-Sets' },
{ k: 'Versicherung', t: 'Animalia Tierversicherung', d: 'Früh versichern lohnt sich: Bestehende Erkrankungen sind ausgeschlossen. Ohne Altersgrenze, freie Tierarztwahl.', href: '/Animalia%20Versicherung.html', img: '/assets/westie-vet.jpg', cta: 'Prämie schätzen' },
{ k: 'Sicherheit', t: 'Tractive GPS-Tracker', d: 'Live-Ortung und virtueller Zaun – für Hunde ab ca. 4 kg. Gibt Sicherheit, wenn der Junghund die Welt erkundet.', href: '/Tractive%20GPS.html', img: '/assets/tractive-hund-toben.jpg', cta: 'Tracker finden' },
{ k: 'Geschirr', t: 'Hurtta Seeker Harness', d: 'Leicht, weich und ideal für Welpen und kleine Hunde – perfekt für die ersten Spaziergänge an der Leine.', href: WP_HURTTA_URL, ext: true, img: '/assets/hurtta-geschirr.jpg', cta: 'Zum Seeker Harness' },
{ k: 'Wetter', t: 'Hurtta Regen- & Winterjacken', d: 'Kleine Hunde kühlen schneller aus. Mit Grössenfinder und 15 % Rabatt (Code Hurtta-Adcell).', href: '/Hurtta.html', img: '/assets/hurtta-schnee-spaziergang.png', cta: 'Zu Hurtta' },
{ k: 'Ruhe', t: 'Hundebetten', d: 'Welpen schlafen bis zu 20 Stunden am Tag – ein fester, gemütlicher Rückzugsort ist Gold wert.', href: '/Hundebetten.html', img: '/assets/zubehoer-bett.jpg', cta: 'Zu den Hundebetten' }];

function WelpenHero() {
  return (
    <section className="wp-hero" data-screen-label="Welpenfibel Hero">
      <video className="wp-hero-video" src="/assets/tractive-video-hund-3.mp4" poster="/assets/fibel/p01-1.png" autoPlay muted loop playsInline aria-label="Junger Hund im Wald"></video>
      <span className="wp-hero-shade"></span>
      <div className="wp-hero-copy">
        <p className="kicker">Welpenfibel</p>
        <h1>Der perfekte Start mit Ihrem Welpen</h1>
        <p className="lede">Checkliste, erste Tage, Ernährung, Entwicklung und Gefahren – interaktiv zum Durchklicken. Dazu die passende Ausstattung von Futter bis GPS-Tracker.</p>
        <div className="hero-actions">
          <a className="btn btn-primary btn-lg" href="#wp-alter">Wie alt ist Ihr Welpe?</a>
          <a className="btn btn-light btn-lg" href="/assets/welpenfibel.pdf" target="_blank" rel="noopener">Fibel als PDF</a>
        </div>
      </div>
    </section>);
}

function WelpenFutter({ w, onTabu }) {
  const [kg, setKg] = React.useState(5);
  const [type, setType] = React.useState('wet');
  const rer = 70 * Math.pow(kg, 0.75);
  const kcal = Math.round(rer * (w < 17 ? 3 : 2));
  const g = Math.round(kcal / (type === 'wet' ? 1.1 : 3.8) / 5) * 5;
  const meals = w < 12 ? 4 : w < 26 ? 3 : 2;
  const tip = w < 12 ? 'Die ersten Tage das Futter des Züchters beibehalten und über 7–10 Tage langsam umstellen.' : w < 26 ? 'Wachstumsphase: Energiebedarf ist hoch – regelmässig wiegen und die Menge anpassen.' : 'Ab ca. 6 Monaten sinkt der Bedarf: auf 2 Mahlzeiten umstellen und Gewicht im Blick behalten.';
  return (
    <div className="wp-food">
      <span className="wp-sub">{`Futterrechner für Welpen · ${w} Wochen`}</span>
      <div className="wp-food-grid">
        <div className="wp-food-controls">
          <label className="wp-age-range">
            <span>Aktuelles Gewicht</span>
            <input type="range" min="1" max="40" value={kg} onChange={(e) => setKg(Number(e.target.value))}></input>
            <strong>{kg} kg</strong>
          </label>
          <div className="wp-food-seg">
            {[['wet', 'Nassfutter'], ['dry', 'Trockenfutter']].map(([v, l]) => <button key={v} className={type === v ? 'on' : ''} onClick={() => setType(v)}>{l}</button>)}
          </div>
          <div className="wp-food-result" key={kg + type + w}>
            <p className="wp-food-sum">{`Ihr Welpe (${kg} kg, ${w} Wochen) braucht pro Tag`}</p>
            <p className="wp-food-big">{`ca. ${g} g ${type === 'wet' ? 'Nassfutter' : 'Trockenfutter'}`}</p>
            <p className="wp-food-sum">{`verteilt auf ${meals} Mahlzeiten – so sieht ein Tag aus:`}</p>
            <div className="wp-food-plan">
              {(meals === 4 ? ['07:00', '12:00', '17:00', '21:00'] : meals === 3 ? ['07:00', '13:00', '19:00'] : ['07:30', '18:30']).map((h, i) =>
              <div key={h} className="wp-meal">
                  <span className="wp-meal-n">{`${i + 1}. Mahlzeit`}</span>
                  <strong className="wp-meal-g">{`${Math.round(g / meals / 5) * 5} g`}</strong>
                  <span className="wp-meal-t">{`ca. ${h} Uhr`}</span>
                </div>
              )}
            </div>
            <p className="wp-food-kcal">{`Entspricht ca. ${kcal} kcal pro Tag. Die Uhrzeiten sind ein Vorschlag – wichtig ist ein regelmässiger Rhythmus.`}</p>
          </div>
          <p className="wp-food-note">{tip} Allgemeiner Richtwert – Angaben auf der Packung und der Rat Ihrer Tierarztpraxis gehen vor.</p>
          <a className="wp-link" href="/Anifit%20Shop.html">Anifit Welpen-Sets ansehen →</a>
        </div>
        <div className="wp-food-lists">
          <div className="wp-food-ok">
            <strong>Darf Ihr Welpe essen</strong>
            <ul><li>Hochwertiges Welpenfutter mit hohem Fleischanteil</li><li>Gekochtes Huhn oder Pute ohne Gewürze und Knochen</li><li>Gekochter Reis oder Kartoffeln in kleinen Mengen</li><li>Gekochte Karotten, Kürbis, Zucchini</li><li>Altersgerechte Kauartikel und Welpen-Snacks (max. 10 %)</li><li>Immer frisches Wasser</li></ul>
          </div>
          <button className="wp-food-tabu" onClick={onTabu}>Was ist tabu? Alle verbotenen Lebensmittel unter «Gefahren» →</button>
        </div>
      </div>
    </div>);
}

function WelpenAlter() {
  const [w, setW] = React.useState(10);
  const [tab, setTab] = React.useState('phase');
  const s = WP_STAGES.find((x) => w >= x.from && w < x.to) || WP_STAGES[WP_STAGES.length - 1];
  return (
    <section className="wp-age" id="wp-alter" data-screen-label="Welpen Alter">
      <div className="section-head" data-reveal>
        <p className="kicker">Welpenfibel von Miss-Scully</p>
        <h2>Welpen-Entwicklung Woche für Woche: Was ist jetzt wichtig?</h2>
      </div>
      <div className="wp-age-card" data-reveal>
        <div className="wp-official">
          <span className="wp-sub">Pflichten im Kanton Zürich</span>
          <div className="wp-official-grid">
            <a className="wp-official-card" href="https://www.stadt-zuerich.ch/de/stadtleben/veranstaltungen-und-bewilligungen/hundekontrolle.html" target="_blank" rel="noopener">
              <strong>Hundekontrolle Stadt Zürich</strong>
              <span>Hund anmelden, Hundeabgabe und Fragen zur Hundehaltung in der Stadt Zürich.</span>
              <em>Zur Stadt Zürich →</em>
            </a>
            <a className="wp-official-card" href="https://www.zh.ch/de/gesundheitsdirektion/veterinaeramt.html" target="_blank" rel="noopener">
              <strong>Veterinäramt Kanton Zürich</strong>
              <span>Hundegesetz, Tierschutz und Informationen zur Hundehaltung im ganzen Kanton.</span>
              <em>Zum Veterinäramt →</em>
            </a>
          </div>
        </div>
        <label className="wp-age-range">
          <span>Alter Ihres Welpen</span>
          <input type="range" min="8" max="52" value={w} onChange={(e) => setW(Number(e.target.value))}></input>
          <strong>{w} Wochen</strong>
        </label>
        <div className="wp-age-steps">
          {WP_STAGES.map((x) => <button key={x.t} className={'wp-age-step' + (x === s ? ' on' : '')} onClick={() => setW(x.from)}>{x.t}<small>{x.from}–{x.to} Wo.</small></button>)}
        </div>
        <div className="wp-tabs" role="tablist">
          {[['phase', 'Phase & Aufgaben'], ['futter', 'Futter & Mengen'], ['check', 'Checkliste'], ['tage', 'Erste Tage'], ['gefahr', 'Gefahren']].map(([k, l]) => <button key={k} role="tab" aria-selected={tab === k} className={'wp-tab' + (tab === k ? ' on' : '')} onClick={() => setTab(k)}>{l}</button>)}
        </div>
        {tab === 'phase' ? <React.Fragment>
          <div className="wp-age-body" key={s.t}>
            <div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
              <div className="wp-facts">{s.facts.map(([k, v]) => <div key={k} className="wp-fact"><span>{k}</span><strong>{v}</strong></div>)}</div>
            </div>
            <div>
              <span className="wp-sub">Jetzt erledigen</span>
              <ul>{s.todo.map((x) => <li key={x}>{x}</li>)}</ul>
              <span className="wp-sub">Passend dazu</span>
              <div className="wp-links">{s.links.map(([l, h]) => <a key={l} className="wp-link" href={h} target={/^https/.test(h) ? '_blank' : undefined} rel={/^https/.test(h) ? 'noopener' : undefined}>{l} →</a>)}</div>
            </div>
          </div>
          </React.Fragment> : null}
        {tab === 'futter' ? <WelpenFutter w={w} onTabu={() => setTab('gefahr')}></WelpenFutter> : null}
        {tab === 'check' ? <div className="wp-tabbody"><WelpenChecklist></WelpenChecklist></div> : null}
        {tab === 'tage' ? <div className="wp-tabbody"><WelpenErsteTage></WelpenErsteTage></div> : null}
        {tab === 'gefahr' ? <div className="wp-tabbody"><WelpenGefahren></WelpenGefahren></div> : null}
        <div className="wp-card-foot" id="welpenfibel">
          <a className="btn btn-ghost" href={FIBEL_PDF} target="_blank" rel="noopener">Welpenfibel als PDF herunterladen</a>
          <a className="btn btn-primary" href="https://miss-scully.anifit.ch/shop/catalog/dog-sets" target="_blank" rel="noopener">Welpenset entdecken →</a>
        </div>
      </div>
    </section>);
}

function WelpenGear() {
  return (
    <section className="wp-gear" data-screen-label="Welpen Ausstattung">
      <div className="section-head" data-reveal>
        <p className="kicker">Ausstattung für den Start</p>
        <h2>Alles, was Ihr Welpe braucht</h2>
      </div>
      <div className="wp-gear-grid">
        {WP_GEAR.map((g, i) =>
        <a key={g.t} className="wp-gear-card" href={g.href} target={g.ext ? '_blank' : undefined} rel={g.ext ? 'noopener' : undefined} data-reveal style={{ transitionDelay: i * 60 + 'ms' }}>
            <span className="wp-gear-img"><img src={g.img} alt={g.t} loading="lazy"></img><em>{g.k}</em></span>
            <strong>{g.t}</strong>
            <span className="wp-gear-d">{g.d}</span>
            <span className="pillar-link">{g.cta} →</span>
          </a>
        )}
      </div>
    </section>);
}

function WelpenPage() {
  return (
    <PageShell active="Welpenfibel">
      <WelpenHero></WelpenHero>
      <WelpenAlter></WelpenAlter>
      <WelpenGear></WelpenGear>
    </PageShell>);
}
window.WelpenPage = WelpenPage;