// Miss-Scully — DOCTR care: Kategorie-Unterseiten (Hund / Katze) + Artikel-Detailseite
// Lädt nach doctr-page.jsx (nutzt DoctrTilt, DoctrShot, chf, DoctrCard).

function DoctrKategorie({ pet }) {
  const info = DOCTR_PET_PAGES[pet];
  const all = DOCTR_PRODUCTS.filter((p) => p.pet === pet);
  const sets = DOCTR_SETS.filter((s) => s.pet === pet);
  const dog = pet === 'dog';
  const Photo = ({ src, alt, cls }) => <figure className={'doctr-photo ' + (cls || '')} data-reveal><img src={src} alt={alt} loading="lazy"></img></figure>;
  const [q, setQ] = React.useState('');
  const [use, setUse] = React.useState('all');
  const [sort, setSort] = React.useState('rel');
  const USES = [['all', 'Alle'], ['clean', 'Reinigen'], ['coat', 'Fell & Shampoo'], ['wound', 'Haut & Wunden'], ['paw', 'Pfoten'], ['protect', 'Zecken & Insekten'], ['odor', 'Geruch']].filter(([k]) => k === 'all' || all.some((p) => p.use === k)).concat(sets.length ? [['sets', 'Sets']] : []);
  const nq = q.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').trim();
  let list = all.filter((p) => (use === 'all' || p.use === use) && (!nq || (p.name + ' ' + p.sub + ' ' + (p.bullets || []).join(' ')).toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').includes(nq)));
  const matchSet = (s) => !nq || (s.name + ' ' + (s.text || '') + ' ' + (s.parts || []).join(' ')).toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').includes(nq);
  let setList = (use === 'all' || use === 'sets') ? sets.filter(matchSet) : [];
  if (use === 'sets') list = [];
  if (sort === 'asc') setList = [...setList].sort((a, b) => a.price - b.price);
  if (sort === 'desc') setList = [...setList].sort((a, b) => b.price - a.price);
  if (sort === 'asc') list = [...list].sort((a, b) => a.price - b.price);
  if (sort === 'desc') list = [...list].sort((a, b) => b.price - a.price);
  return (
    <PageShell active="DOCTR care">
      <section className="wp-hero doctr-hero" data-screen-label={info.label}>
        <img className="wp-hero-video doctr-hero-bg" src={dog ? '/assets/hund-frau-golden.jpg' : '/assets/katzenbaby.jpg'} alt={dog ? 'Frau kuschelt mit Golden Retriever' : 'Katze'}></img>
        <span className="wp-hero-shade"></span>
        <div className="wp-hero-copy">
          <p className="kicker">{info.label}</p>
          <h1>{info.claim}</h1>
          <p className="lede">{info.paras[0]}</p>
          <div className="hero-actions page-hero-actions" data-reveal>
          <a className="btn btn-primary btn-lg" href="#sortiment">Alle Produkte</a>
          <a className="btn btn-ghost-light btn-lg" href="/DOCTR%20Hunde.html">Zur DOCTR Übersicht</a>
        </div>
        </div>
      </section>
      {info.paras.length > 1 ? <section className="doctr-intro-sec" data-screen-label="DOCTR Einleitung">
          <div className="doctr-intro-grid">
            {info.paras.slice(1).map((t, i) => <p key={t} data-reveal style={{ transitionDelay: i * 80 + 'ms' }}>{t}</p>)}
          </div>
        </section> : null}


      <DoctrBanner promo={pet === 'dog' ? 664614 : 664506} w={728} h={90} label="DOCTRs pet care"></DoctrBanner>

      <section className="doctr-section" id="sortiment" data-screen-label="Produkte">
        <div className="section-head" data-reveal>
          <p className="kicker">Sortiment</p>
          <h2>Entdecke alle Produkte</h2>
        </div>
        <div className="doctr-finder" data-reveal>
          <label className="doctr-search">
            <span className="ss-icon" aria-hidden="true"></span>
            <input type="search" value={q} onChange={(e) => setQ(e.target.value)} placeholder={'Suchen: z. B. Zecken, Juckreiz, Shampoo …'} aria-label="Produkte durchsuchen"></input>
            {q ? <button className="doctr-clear" onClick={() => setQ('')} aria-label="Suche leeren">×</button> : null}
          </label>
          <div className="doctr-chips" role="tablist">
            {USES.map(([k, l]) => <button key={k} role="tab" aria-selected={use === k} className={'doctr-chip' + (use === k ? ' on' : '')} onClick={() => setUse(k)}>{l}<small>{k === 'all' ? all.length + sets.length : k === 'sets' ? sets.length : all.filter((p) => p.use === k).length}</small></button>)}
          </div>
          <div className="doctr-finder-bar">
            <span>{(list.length + setList.length) === 1 ? '1 Treffer' : (list.length + setList.length) + ' Treffer'}{setList.length ? ' · davon ' + setList.length + (setList.length === 1 ? ' Set' : ' Sets') : ''}</span>
            <select value={sort} onChange={(e) => setSort(e.target.value)} aria-label="Sortieren">
              <option value="rel">Empfohlen</option>
              <option value="asc">Preis aufsteigend</option>
              <option value="desc">Preis absteigend</option>
            </select>
          </div>
        </div>
        {list.length || setList.length ? null : <p className="doctr-empty">Kein Produkt gefunden. <button onClick={() => { setQ(''); setUse('all'); }}>Filter zurücksetzen</button></p>}
        <div className="doctr-grid" key={use + nq + sort}>
          {list.map((p, i) =>
          <React.Fragment key={p.id}>
              <div className="doctr-cell" style={{ animationDelay: i * 55 + 'ms' }}>
                <DoctrCard p={p}></DoctrCard>
              </div>
              {dog && use === 'all' && !nq && i === 2 ? <div className="doctr-cell doctr-cell-photo"><Photo src="/assets/hund-cocker-wiese.jpg" alt="Zwei Frauen mit Cocker Spaniel auf der Wiese"></Photo></div> : null}
              {dog && use === 'all' && !nq && i === 5 ? <div className="doctr-cell doctr-cell-photo"><Photo src="/assets/hund-weiss-wohnung.jpg" alt="Paar mit weissem Hund in der Wohnung"></Photo></div> : null}
            </React.Fragment>
          )}
        </div>
        {setList.length ? <div className="doctr-sets-inline">
          <h3 className="doctr-sets-h">Sets – kombiniert günstiger</h3>
          <div className="doctr-set-grid" key={'s' + use + nq + sort}>
            {setList.map((s) =>
          <DoctrTilt key={s.id} max={6}>
                <a className="doctr-set" href={doctrLink(s.slug)}>
                  <span className="doctr-set-media"><DoctrShot file={s.img} alt={s.name}></DoctrShot></span>
                  <strong>{s.name}</strong>
                  <span className="doctr-set-text">{s.text}</span>
                  <ul className="doctr-set-parts">
                    {s.parts.map((x) => <li key={x}>{x}</li>)}
                  </ul>
                  <span className="doctr-price-row">
                    <span className="doctr-price">{chf(s.price)}</span>
                    <s>{chf(s.old)}</s>
                  </span>
                  <span className="pillar-link">Set bestellen →</span>
                </a>
              </DoctrTilt>
          )}
          </div>
        </div> : null}
      </section>

      {dog ? <section className="doctr-band" data-screen-label="DOCTR Alltag">
          <Photo src="/assets/hund-husky-sofa.jpg" alt="Mann mit Husky auf dem Sofa"></Photo>
          <div className="doctr-band-copy" data-reveal>
            <p className="kicker">Gepflegt durch den Alltag</p>
            <h2>Nähe ohne Hundegeruch</h2>
            <p>Sofa, Bett, Homeoffice: Mit der pH-adaptiven Pflege von DOCTR bleibt Ihr Hund sauber und riecht neutral – ohne Parfum, das überdeckt.</p>
          </div>
        </section> : null}


      {dog ? <section className="doctr-band doctr-band-rev" data-screen-label="DOCTR Zuhause">
          <Photo src="/assets/hund-paar-bett.jpg" alt="Paar mit Mops-Welpe im Bett"></Photo>
          <div className="doctr-band-copy" data-reveal>
            <p className="kicker">Für jedes Fell</p>
            <h2>Vom Welpen bis zum Senior</h2>
            <p>Hypoallergen, duftstofffrei und für alle Fellarten geeignet – damit Kuscheln auch im Bett erlaubt bleibt.</p>
          </div>
        </section> : null}

      <PageCTA
        title="Unsicher, was Ihr Tier braucht?"
        text="Schreiben Sie uns kurz – wir empfehlen Ihnen die passende Pflege aus dem DOCTR Sortiment."
        primaryLabel="Beratung anfragen"
        primaryHref="mailto:info@miss-scully.ch?subject=DOCTR%20PetCare%20Beratung"
        secondaryLabel="Zur Shop-Übersicht"
        secondaryHref="/DOCTR%20Hunde.html">
      </PageCTA>
    </PageShell>);

}

/* ---------- Artikel-Detailseite ---------- */

function DoctrAcc({ title, children, initial }) {
  const [open, setOpen] = React.useState(!!initial);
  return (
    <div className={'tech-acc' + (open ? ' is-open' : '')}>
      <button className="tech-acc-q" onClick={() => setOpen(!open)}>
        <span>{title}</span>
        <span className="tech-acc-icon">{open ? '−' : '+'}</span>
      </button>
      {open ? <div className="tech-acc-a">{children}</div> : null}
    </div>);

}

function DoctrArtikel() {
  const id = new URLSearchParams(location.search).get('id') || 'd1';
  const p = doctrById(id) || DOCTR_PRODUCTS[0];
  const use = DOCTR_USE_INFO[p.use];
  const petPage = DOCTR_PET_PAGES[p.pet];
  const petWord = p.pet === 'dog' ? 'Hund' : 'Katze';
  const d = doctrDetail(p);
  const [shot, setShot] = React.useState(0);
  const set = DOCTR_SETS.filter((s) => s.pet === p.pet)[0];
  const related = DOCTR_PRODUCTS.filter((x) => x.pet === p.pet && x.id !== p.id).slice(0, 4);
  React.useEffect(() => {
    document.title = p.name + ' – ' + p.sub + ' | Miss-Scully';
  }, [p]);
  return (
    <PageShell active="DOCTR care">
      <nav className="doctr-crumbs" aria-label="Pfad">
        <a className="doctr-back" href={petPage.file} onClick={(e) => { if (history.length > 1 && document.referrer && new URL(document.referrer).host === location.host) { e.preventDefault(); history.back(); } }}>← Zurück</a>
        <a href="/DOCTR%20Hunde.html">DOCTR care</a>
        <span>/</span>
        <a href={petPage.file}>{petPage.label}</a>
        <span>/</span>
        <strong>{p.name}</strong>
      </nav>

      <section className="artikel-top" data-screen-label={p.name}>
        <div className="artikel-gallery" data-reveal>
          <div className="artikel-media">
            <DoctrShot file={d.gallery[shot]} alt={p.name + ' – ' + p.sub}></DoctrShot>
          </div>
          {d.gallery.length > 1 ?
          <div className="artikel-thumbs">
              {d.gallery.map((g, i) =>
            <button
              key={g}
              className={'artikel-thumb' + (i === shot ? ' is-active' : '')}
              onClick={() => setShot(i)}
              aria-label={'Bild ' + (i + 1)}>
                  <DoctrShot file={g} alt=""></DoctrShot>
                </button>
            )}
            </div> :
          null}
        </div>
        <div className="artikel-copy">
          <p className="kicker" data-reveal>{use.label} · {p.size}</p>
          <h1 data-reveal>{p.name}</h1>
          <p className="lede artikel-sub" data-reveal>{p.sub}</p>
          <div className="doctr-price-row artikel-price" data-reveal>
            <span className="doctr-price">{chf(p.price)}</span>
            {p.old ? <s>{chf(p.old)}</s> : null}
            {p.old ? <span className="doctr-save">Aktion</span> : null}
          </div>
          <ul className="doctr-bullets artikel-bullets" data-reveal>
            {p.bullets.map((b) => <li key={b}>{b}</li>)}
          </ul>
          <div className="artikel-facts" data-reveal>
            <span>Inhalt: {p.size}</span>
            <span>Auf Lager</span>
            <span>2–3 Werktage</span>
            {d.sku ? <span>Art.-Nr. {d.sku}</span> : null}
          </div>
          <div className="hero-actions" data-reveal>
            <a className="btn btn-primary btn-lg" href={doctrLink(p.slug)}>Im DOCTR Shop bestellen</a>
            <a className="btn btn-ghost btn-lg" href={petPage.file}>Weitere {petWord}e-Pflege</a>
          </div>
          {set ?
          <a className="artikel-setbox" href={doctrLink(set.slug)} data-reveal>
              <strong>Mehr Wirkung im Set</strong>
              <span>{set.name} – {chf(set.price)} statt {chf(set.old)}</span>
              <span className="pillar-link">Set ansehen →</span>
            </a> :
          null}
          <p className="artikel-note" data-reveal>
            Preis umgerechnet aus EUR – Bestellung und Abrechnung erfolgen im DOCTR Shop.
          </p>
        </div>
      </section>

      <section className="artikel-detail" data-screen-label="Produktdetails">
        <div className="artikel-detail-inner">
          <DoctrAcc title="Produktmerkmal" initial={true}>
            {d.merkmal.map((t) => <p key={t}>{t}</p>)}
          </DoctrAcc>
          <DoctrAcc title="Anwendung">
            <p>{d.anwendung}</p>
            {d.tipp ? <p><strong>Tipp:</strong> {d.tipp}</p> : null}
          </DoctrAcc>
          <DoctrAcc title="Insbesondere frei von">
            <ul className="doctr-bullets">
              {d.frei.map((f) => <li key={f}>{f}</li>)}
            </ul>
          </DoctrAcc>
          {d.inci ?
          <DoctrAcc title="Inhaltsstoffe">
              <p>{d.inci}</p>
            </DoctrAcc> :
          null}
          <DoctrAcc title="Lieferumfang">
            <p>{d.lieferumfang}</p>
          </DoctrAcc>
        </div>
      </section>

      <section className="artikel-info" data-screen-label="Häufige Fragen">
        <div className="section-head" data-reveal>
          <p className="kicker">Häufige Fragen</p>
          <h2>Gut zu wissen</h2>
        </div>
        <div className="artikel-faq">
          {d.faq.map((f) =>
          <div key={f.q} data-reveal>
              <DoctrAcc title={f.q}>
                <p>{f.a}</p>
              </DoctrAcc>
            </div>
          )}
        </div>
      </section>

      <section className="doctr-section" data-screen-label="Passt dazu">
        <div className="section-head" data-reveal>
          <p className="kicker">Passt dazu</p>
          <h2>Weitere Pflege für {petWord === 'Hund' ? 'Hunde' : 'Katzen'}</h2>
        </div>
        <div className="doctr-grid">
          {related.map((r, i) =>
          <div className="doctr-cell" key={r.id} style={{ animationDelay: i * 55 + 'ms' }}>
              <DoctrCard p={r}></DoctrCard>
            </div>
          )}
        </div>
      </section>

      <PageCTA
        title={'Fragen zu ' + p.name + '?'}
        text="Nicolas und Scully beraten Sie gern zur richtigen Anwendung."
        primaryLabel="Beratung anfragen"
        primaryHref={'mailto:info@miss-scully.ch?subject=' + encodeURIComponent('Frage zu ' + p.name)}
        secondaryLabel="Im DOCTR Shop bestellen"
        secondaryHref={doctrLink(p.slug)}>
      </PageCTA>
    </PageShell>);

}

Object.assign(window, { DoctrKategorie, DoctrArtikel });