// Miss-Scully — Welpenfibel (interaktiver Guide, Inhalte aus der ANiFiT-Welpenfibel)
// Lädt nach homepage-sections.jsx. Exportiert WelpenGuide + ProbiersetSpotlight.

const FIBEL_PDF = '/assets/welpenfibel.pdf';
const CHECK_KEY = 'ms-welpen-checkliste-v1';

const FIBEL_CHECKLIST = [
'Transportbox fürs Auto',
'Hundebox als Rückzugsort für zu Hause',
'Zwei Hundenäpfe (Wasser & Futter)',
'Halsband und Leine',
'Kamm & Bürste, passend zum Fell',
'Richtiges Spielzeug: Kauwurzel, weiche Zerr-Spiele, Schnüffelteppich',
'Leckerli fürs Training',
'Kotbeutel',
'Alte Handtücher & Essigreiniger',
'Treppengitter, falls nötig',
'Futter von der Züchterin (dabei bleiben!)',
'Hundeschule / Welpenkurs ausgesucht'];

function WelpenChecklist() {
  const [done, setDone] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem(CHECK_KEY)) || []; } catch (e) { return []; }
  });
  const toggle = (item) => {
    const next = done.includes(item) ? done.filter((d) => d !== item) : done.concat(item);
    setDone(next);
    try { localStorage.setItem(CHECK_KEY, JSON.stringify(next)); } catch (e) {}
  };
  const n = FIBEL_CHECKLIST.filter((i) => done.includes(i)).length;
  return (
    <div>
      <div className="wf-progress">
        <div className="wf-progress-track">
          <div className="wf-progress-fill" style={{ width: n / FIBEL_CHECKLIST.length * 100 + '%' }}></div>
        </div>
        <span className="wf-progress-label">{n} von {FIBEL_CHECKLIST.length} bereit</span>
      </div>
      <ul className="wf-checklist">
        {FIBEL_CHECKLIST.map((item) =>
        <li key={item}>
            <label className={'wf-check' + (done.includes(item) ? ' done' : '')}>
              <input
              type="checkbox"
              checked={done.includes(item)}
              onChange={() => toggle(item)} />
              <span className="wf-box"></span>
              <span className="wf-check-text">{item}</span>
            </label>
          </li>
        )}
      </ul>
      <p className="wf-fine">Ihre Häkchen bleiben auf diesem Gerät gespeichert.</p>
    </div>);

}

function WelpenErsteTage() {
  const out = [
  'Morgens, sofort nach dem Aufwachen',
  'Vor jeder Fütterung',
  'Nach jedem Nickerchen',
  'Nach Spiel- und Toberunden',
  'Wenn er sichtbar unruhig wird (rumlaufen, schnüffeln)',
  'Vor dem Schlafengehen'];

  return (
    <div className="wf-cols">
      <div>
        <h4>Bei der Abholung</h4>
        <ul className="wf-list">
          <li><span className="trust-dot"></span>Vertraute Begleitperson mitnehmen, die fahren kann</li>
          <li><span className="trust-dot"></span>Ruhe bewahren – Ihre Ruhe überträgt sich auf den Welpen</li>
          <li><span className="trust-dot"></span>Etwas Hartes zum Kauen dabeihaben</li>
          <li><span className="trust-dot"></span>Decke mit Rudelgeruch von der Züchterin mitnehmen</li>
        </ul>
        <h4>Die erste Nacht</h4>
        <ul className="wf-list">
          <li><span className="trust-dot"></span>Die ersten Nächte nicht alleine schlafen lassen</li>
          <li><span className="trust-dot"></span>Nur einen Raum nach dem anderen zeigen – kein Trubel</li>
          <li><span className="trust-dot"></span>Nach neuen Eindrücken: schlafen lassen zum Verarbeiten</li>
        </ul>
      </div>
      <div>
        <h4>Wann raus? So wird er stubenrein</h4>
        <ul className="wf-list">
          {out.map((o) =>
          <li key={o}><span className="trust-dot"></span>{o}</li>
          )}
        </ul>
      </div>
    </div>);

}

function WelpenErnaehrung() {
  const sizes = [
  { n: 'Kleine Hunde', kg: '1–5 kg', m: 'ca. 8 Monate' },
  { n: 'Mittlere Hunde', kg: '6–20 kg', m: '10–12 Monate' },
  { n: 'Grosse Hunde', kg: '21–35 kg', m: '13–14 Monate' },
  { n: 'XL-Hunde', kg: '36–60 kg', m: '16–18 Monate' }];

  const [sel, setSel] = React.useState(1);
  return (
    <div className="wf-cols">
      <div>
        <h4>Das Wichtigste zur Fütterung</h4>
        <ul className="wf-list">
          <li><span className="trust-dot"></span>Beim gewohnten Futter der Züchterin bleiben – der Welpendarm mag keine Umstellungen</li>
          <li><span className="trust-dot"></span>Feuchtnahrung hat meist den höchsten Fleischanteil</li>
          <li><span className="trust-dot"></span>Auf 100 % offene Deklaration achten</li>
          <li><span className="trust-dot"></span>Leckerli energiemässig von der Hauptnahrung abziehen</li>
          <li><span className="trust-dot"></span>Nach dem Essen: Ruhe! Kein Toben (Gefahr der Magendrehung)</li>
        </ul>
      </div>
      <div>
        <h4>Wann aufs Adult-Futter wechseln?</h4>
        <div className="seg-control wf-sizes">
          {sizes.map((s, i) =>
          <button
            key={s.n}
            className={'seg-btn' + (sel === i ? ' active' : '')}
            onClick={() => setSel(i)}>
              {s.kg}
            </button>
          )}
        </div>
        <div className="wf-size-result">
          <strong>{sizes[sel].n}</strong>
          <span className="wf-size-months">{sizes[sel].m}</span>
          <p>Je kleiner die Rasse, desto schneller ist sie ausgewachsen – dann auf Adult-Futter umstellen.</p>
        </div>
      </div>
    </div>);

}

function WelpenEntwicklung() {
  const phases = [
  { t: 'Neonatale Phase', w: '0–3 Wochen', d: 'Nur angeborene Verhaltensweisen; Augen öffnen sich um Tag 10–13.' },
  { t: 'Übergangsperiode', w: '4–5 Wochen', d: 'Sehen und Hören entwickeln sich, erste Spielversuche, Milchzähne brechen durch.' },
  { t: 'Prägungsphase', w: 'bis 9 Wochen', d: 'Sinne voll entwickelt – jetzt möglichst viele Umweltreize kennenlernen.' },
  { t: 'Verhaltensontogenese', w: 'ab 10 Wochen', d: 'Der Welpe zieht ein: Bindung aufbauen, spielerisch lernen – die wertvollste Zeit.' },
  { t: 'Pubertät', w: 'ab ca. 6 Monaten', d: 'Grenzen werden getestet – liebevoll und konsequent bleiben.' }];

  const [sel, setSel] = React.useState(3);
  return (
    <div>
      <div className="wf-timeline">
        {phases.map((p, i) =>
        <button
          key={p.t}
          className={'wf-phase' + (sel === i ? ' active' : '')}
          onClick={() => setSel(i)}>
            <span className="wf-phase-dot"></span>
            <span className="wf-phase-week">{p.w}</span>
          </button>
        )}
      </div>
      <div className="wf-phase-card">
        <strong>{phases[sel].t}</strong>
        <p>{phases[sel].d}</p>
      </div>
    </div>);

}

function WelpenGefahren() {
  const foods = [
  'Schokolade & Kakao', 'Weintrauben & Rosinen', 'Zwiebeln', 'Koffein',
  'Alkohol', 'Avocado', 'Macadamianüsse', 'Obstkerne', 'Rohe Kartoffeln & Bohnen',
  'Zuckerersatz (z. B. Stevia)', 'Starke Gewürze'];

  return (
    <div className="wf-cols">
      <div>
        <h4>Diese Lebensmittel sind tabu</h4>
        <div className="wf-chips">
          {foods.map((f) =>
          <span key={f} className="wf-chip">{f}</span>
          )}
        </div>
      </div>
      <div>
        <h4>Ausser Reichweite aufbewahren</h4>
        <ul className="wf-list">
          <li><span className="trust-dot"></span>Medikamente, Putz- & Schädlingsbekämpfungsmittel</li>
          <li><span className="trust-dot"></span>Zigaretten, Batterien, Farben</li>
          <li><span className="trust-dot"></span>Stromkabel und Kleinteile (z. B. Büroklammern)</li>
          <li><span className="trust-dot"></span>Giftige Pflanzen wie Maiglöckchen, Eibe, Hortensie oder Tulpen aus Haus und Garten entfernen</li>
        </ul>
      </div>
    </div>);

}

function WelpenGuide() {
  const tabs = [
  { n: 'Checkliste', c: WelpenChecklist, img: '/assets/fibel/p01-1.png', alt: 'Welpe auf der Blumenwiese' },
  { n: 'Erste Tage', c: WelpenErsteTage, img: '/assets/fibel/p14-2.png', alt: 'Welpe wird liebevoll gehalten' },
  { n: 'Ernährung', c: WelpenErnaehrung, img: '/assets/fibel/p06-2.png', alt: 'Welpe am Futternapf' },
  { n: 'Entwicklung', c: WelpenEntwicklung, img: '/assets/fibel/p05-1.png', alt: 'Sennenhund-Welpe beim Entdecken' },
  { n: 'Gefahren', c: WelpenGefahren, img: '/assets/fibel/p07-1.png', alt: 'Welpe kaut an Gras' }];

  const [tab, setTab] = React.useState(0);
  const Body = tabs[tab].c;
  return (
    <section className="wf-section" data-screen-label="Welpenfibel">
      <div className="section-head" data-reveal>
        <p className="kicker">Die ANiFiT-Welpenfibel</p>
        <h2>Alles für den perfekten Start mit Ihrem Welpen</h2>
        <p className="section-sub">
          Das Wichtigste aus der Welpenfibel – interaktiv zum Durchklicken.
          Die vollständige Fibel gibt es als PDF zum Mitnehmen.
        </p>
      </div>
      <div className="wf-card" data-reveal>
        <div className="seg-control wf-tabs">
          {tabs.map((t, i) =>
          <button
            key={t.n}
            className={'seg-btn' + (tab === i ? ' active' : '')}
            onClick={() => setTab(i)}>
              {t.n}
            </button>
          )}
        </div>
        <div className="wf-layout">
          <div className="wf-media" key={'m' + tab}>
            <img src={tabs[tab].img} alt={tabs[tab].alt} />
          </div>
          <div className="wf-body" key={tab}>
            <Body></Body>
          </div>
        </div>
        <div className="wf-footer">
          <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">
            Welpenset entdecken →
          </a>
        </div>
      </div>
    </section>);

}

/* ---------- Probierset-Spotlight (Kauf-Anreiz) ---------- */
function ProbiersetSpotlight({ petType }) {
  const data = petType === 'cat' ?
  {
    kicker: 'Der einfachste Einstieg',
    title: 'Katzen-Probierset: erst testen, dann lieben',
    text: 'Nass-, Trockenfutter und Snacks zum Kennenlernen – die schnellste Art herauszufinden, was Ihrer Katze schmeckt.',
    href: 'https://miss-scully.anifit.ch/shop/catalog/cat-sets',
    label: 'Cat Sets ansehen'
  } :
  {
    kicker: 'Der einfachste Einstieg',
    title: 'Probierset: erst testen, dann lieben',
    text: 'Probierset S, M–L oder das Welpenset – die schnellste Art herauszufinden, was Ihrem Hund schmeckt. Versandkostenfrei ab CHF 69.',
    href: 'https://miss-scully.anifit.ch/shop/catalog/dog-sets',
    label: 'Dog Sets ansehen'
  };
  return (
    <section className="cta-band spotlight-band" data-reveal data-screen-label="Probierset">
      <p className="kicker kicker-light">{data.kicker}</p>
      <h2>{data.title}</h2>
      <p>{data.text}</p>
      <div className="cta-actions">
        <a className="btn btn-primary btn-lg" href={data.href}>{data.label}</a>
        <a className="btn btn-ghost-light btn-lg" href="mailto:info@miss-scully.ch?subject=Anifit%20Beratung">Erst beraten lassen</a>
      </div>
    </section>);

}

Object.assign(window, { WelpenGuide, ProbiersetSpotlight });