// Miss-Scully — DOCTR PetCare Shop (Partnerseite, Adcell)
// Lädt nach homepage-sections.jsx + subpages-content.jsx + doctr-data.jsx.

function DoctrTilt({ children, max }) {
  const ref = React.useRef(null);
  const reduced = window.useReducedMotion ? window.useReducedMotion() : false;
  const m = max || 8;
  const onMove = (e) => {
    if (reduced) return;
    const el = ref.current;if (!el) return;
    const r = el.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width - 0.5, py = (e.clientY - r.top) / r.height - 0.5;
    el.style.transform = 'perspective(900px) rotateY(' + (px * m).toFixed(2) + 'deg) rotateX(' + (-py * m).toFixed(2) + 'deg) translateY(-6px)';
    el.style.setProperty('--glare-x', ((px + 0.5) * 100).toFixed(1) + '%');
    el.style.setProperty('--glare-y', ((py + 0.5) * 100).toFixed(1) + '%');
  };
  const onLeave = () => {if (ref.current) ref.current.style.transform = '';};
  return (
    <div className="tilt3d" ref={ref} onMouseMove={onMove} onMouseLeave={onLeave}>
      {children}
      <span className="tilt-glare"></span>
    </div>);

}

const CHF_RATE = 0.95;
const chf = (eur) => 'CHF ' + (eur * CHF_RATE).toFixed(2);

function DoctrShot({ file, alt }) {
  const [bad, setBad] = React.useState(false);
  if (bad) return <span className="doctr-shot-fallback">DOCTR</span>;
  return <img src={doctrImg(file)} alt={alt} loading="lazy" onError={() => setBad(true)}></img>;
}

/* ---------- Hero ---------- */

function DoctrHero({ pet, setPet }) {
  return (
    <section className="page-hero doctr-hero" data-screen-label="DOCTR PetCare Hero">
      <p className="kicker" data-reveal>DOCTR care — Partnershop</p>
      <h1 data-reveal>Tierpflege auf Wirkstoff&shy;niveau</h1>
      <p className="lede" data-reveal>
        Hypoallergen, duftstofffrei und pH-adaptiv: DOCTR care pflegt Haut und Fell von Hund
        und Katze – von der schnellen Reinigung bis zur Akutversorgung.
      </p>
      <div className="seg-control doctr-switch" data-reveal role="tablist">
        {DOCTR_PETS.map((p) =>
        <button
          key={p.k}
          role="tab"
          aria-selected={pet === p.k}
          className={'seg-btn' + (pet === p.k ? ' active' : '')}
          onClick={() => setPet(p.k)}>
            {p.label}
          </button>
        )}
      </div>
      <div className="hero-actions page-hero-actions" data-reveal>
        <a className="btn btn-primary btn-lg" href={DOCTR_PET_PAGES[pet].file}>
          {pet === 'dog' ? 'Alles zur Hundepflege' : 'Alles zur Katzenpflege'}
        </a>
      </div>
      <div className="doctr-trust" data-reveal>
        <span>Versand 2–3 Werktage</span>
        <span>Auf Lager</span>
        <span>Ohne DEET & Duftstoffe</span>
      </div>
    </section>);

}

/* ---------- Produkt-Karte + Detail ---------- */

function DoctrCard({ p }) {
  return (
    <DoctrTilt>
      <article className="doctr-card">
        <a className="doctr-card-media" href={doctrArticleHref(p.id)} aria-label={p.name + ' ansehen'}>
          <DoctrShot file={p.img} alt={p.name + ' – ' + p.sub}></DoctrShot>
          {p.old ? <span className="doctr-badge">Aktion</span> : null}
          <span className="doctr-zoom">Details</span>
        </a>
        <div className="doctr-card-body">
          <a className="doctr-card-title" href={doctrArticleHref(p.id)}><strong>{p.name}</strong></a>
          <span className="doctr-sub">{p.sub}</span>
          <span className="doctr-size">{p.size}</span>
          <ul className="doctr-bullets">
            {p.bullets.slice(0, 2).map((b) => <li key={b}>{b}</li>)}
          </ul>
          <div className="doctr-price-row">
            <span className="doctr-price">{chf(p.price)}</span>
            {p.old ? <s>{chf(p.old)}</s> : null}
          </div>
          <div className="doctr-actions">
            <a className="btn btn-ghost doctr-more" href={doctrArticleHref(p.id)}>Mehr Infos</a>
            <a className="btn btn-primary doctr-buy" href={doctrLink(p.slug)}>Bestellen</a>
          </div>
        </div>
      </article>
    </DoctrTilt>);

}

/* ---------- Sortiment mit Filter ---------- */

function DoctrSortiment({ pet }) {
  const [use, setUse] = React.useState('all');
  const list = DOCTR_PRODUCTS.filter((p) => p.pet === pet && (use === 'all' || p.use === use));
  const uses = DOCTR_USES.filter((u) => u.k === 'all' || DOCTR_PRODUCTS.some((p) => p.pet === pet && p.use === u.k));
  React.useEffect(() => {
    if (use !== 'all' && !uses.some((u) => u.k === use)) setUse('all');
  }, [pet]);
  return (
    <section className="doctr-section" data-screen-label="DOCTR Sortiment">
      <div className="section-head" data-reveal>
        <p className="kicker">Sortiment</p>
        <h2>Pflege für jede Situation</h2>
      </div>
      <div className="doctr-filters" data-reveal>
        {uses.map((u) =>
        <button
          key={u.k}
          className={'doctr-chip' + (use === u.k ? ' is-active' : '')}
          onClick={() => setUse(u.k)}>
            {u.label}
            <span className="doctr-chip-n">
              {u.k === 'all' ?
            DOCTR_PRODUCTS.filter((p) => p.pet === pet).length :
            DOCTR_PRODUCTS.filter((p) => p.pet === pet && p.use === u.k).length}
            </span>
          </button>
        )}
      </div>
      <div className="doctr-grid" key={pet + use}>
        {list.map((p, i) =>
        <div className="doctr-cell" key={p.id} style={{ animationDelay: i * 55 + 'ms' }}>
            <DoctrCard p={p}></DoctrCard>
          </div>
        )}
      </div>
    </section>);

}

/* ---------- Pflege-Berater ---------- */

const BERATER_Q = [
{ id: 'need', q: 'Worum geht es gerade?', a: [
  { label: 'Schnell sauber machen', v: 'clean' },
  { label: 'Fell glänzend & kämmbar', v: 'coat' },
  { label: 'Haut, Wunde oder Juckreiz', v: 'wound' },
  { label: 'Pfoten schützen', v: 'paw' },
  { label: 'Zecken & Insekten', v: 'protect' },
  { label: 'Gerüche neutralisieren', v: 'odor' }] }];



function DoctrBerater({ pet }) {
  const [need, setNeed] = React.useState(null);
  const hits = need ? DOCTR_PRODUCTS.filter((p) => p.pet === pet && p.use === need) : [];
  const petLabel = pet === 'dog' ? 'Hund' : pet === 'cat' ? 'Katze' : 'Pferd';
  return (
    <section className="doctr-berater" data-screen-label="Pflege-Berater">
      <div className="section-head" data-reveal>
        <p className="kicker">Pflege-Berater</p>
        <h2>Welches Produkt passt zu Ihrem {petLabel}?</h2>
      </div>
      <div className="berater-box" data-reveal>
        <p className="berater-q">{BERATER_Q[0].q}</p>
        <div className="berater-opts">
          {BERATER_Q[0].a.map((o) =>
          <button
            key={o.v}
            className={'berater-opt' + (need === o.v ? ' is-active' : '')}
            onClick={() => setNeed(need === o.v ? null : o.v)}>
              {o.label}
            </button>
          )}
        </div>
        {need ?
        <div className="berater-result">
            {hits.length ?
          <React.Fragment>
                <p className="berater-lead">Unsere Empfehlung für {petLabel}e:</p>
                <div className="berater-hits">
                  {hits.map((p) =>
              <a key={p.id} className="berater-hit" href={doctrArticleHref(p.id)}>
                      <span className="berater-hit-img"><DoctrShot file={p.img} alt={p.name}></DoctrShot></span>
                      <span>
                        <strong>{p.name}</strong>
                        <small>{p.size} · {chf(p.price)}</small>
                      </span>
                    </a>
              )}
                </div>
              </React.Fragment> :

          <p className="berater-lead">Für {petLabel}e gibt es hier kein passendes Produkt – wechseln Sie oben die Tierart oder fragen Sie uns direkt.</p>}
          </div> :
        null}
      </div>
    </section>);

}

/* ---------- Sets ---------- */

function DoctrSets({ pet }) {
  const sets = DOCTR_SETS.filter((s) => s.pet === pet);
  if (!sets.length) return null;
  return (
    <section className="doctr-section doctr-sets" data-screen-label="DOCTR Sets">
      <div className="section-head" data-reveal>
        <p className="kicker">Sets</p>
        <h2>Kombiniert günstiger</h2>
        <p className="section-sub">Fertig zusammengestellte Pflege-Sets – mit Preisvorteil gegenüber den Einzelprodukten.</p>
      </div>
      <div className="doctr-set-grid">
        {sets.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((p) => <li key={p}>{p}</li>)}
              </ul>
              <span className="doctr-price-row">
                <span className="doctr-price">{chf(s.price)}</span>
                <s>{chf(s.old)}</s>
                <span className="doctr-save">
                  −{((s.old - s.price) * CHF_RATE).toFixed(2)} CHF
                </span>
              </span>
              <span className="pillar-link">Set bestellen →</span>
            </a>
          </DoctrTilt>
        )}
      </div>
    </section>);

}

/* ---------- Wirkprinzip ---------- */

function DoctrPrinzip() {
  const items = [
  { t: 'pH-adaptiv', d: 'Die Formulierungen passen sich dem Haut-pH an, statt ihn zu verschieben.' },
  { t: 'Hypoallergen', d: 'Ohne Duftstoffe, ohne DEET, ohne Picaridin oder IR3535.' },
  { t: 'Lotuseffekt', d: 'Schmutz und Feuchtigkeit perlen ab – die Pflege hält länger.' },
  { t: 'Biomimetisch', d: 'Promikrobiomielle Basis: Die Haut wird unterstützt, nicht sterilisiert.' }];

  return (
    <section className="doctr-prinzip" data-screen-label="DOCTR Wirkprinzip">
      <div className="section-head" data-reveal>
        <p className="kicker">Warum DOCTR</p>
        <h2>Vier Prinzipien statt Parfum</h2>
      </div>
      <div className="prinzip-row">
        {items.map((i, n) =>
        <div className="prinzip-col" key={i.t} data-reveal style={{ transitionDelay: n * 70 + 'ms' }}>
            <span className="prinzip-n">{'0' + (n + 1)}</span>
            <strong>{i.t}</strong>
            <p>{i.d}</p>
          </div>
        )}
      </div>
    </section>);

}

/* ---------- Aktionsleiste + Tierarten-Kacheln (Aufbau wie DOCTRs pet care) ---------- */

function DoctrTicker() {
  return (
    <div className="doctr-ticker">
      <a href={doctrLink('insect-tick-repellent-insekten-und-parasitenschutz-fur-hunde')} target="_blank" rel="noopener">
        Produkt des Monats: INSECT &amp; TICK REPELLENT — CHF 12.30
      </a>
      <span>Klimaneutraler Versand · Ohne DEET &amp; Duftstoffe</span>
    </div>);

}

const DOCTR_TILES = [
{ pet: 'dog', slot: 'doctr-tile-dog', src: '/assets/hund-toben.jpg', title: 'dog care', text: 'pH-adaptive Hundepflege für jedes Individuum.' },
{ pet: 'cat', slot: 'doctr-tile-cat', src: '/assets/katzenbaby.jpg', title: 'cat care', text: 'pH-adaptive Pflege für jede Katze.' }];


function DoctrTiles({ setPet }) {
  return (
    <section className="doctr-tiles" data-screen-label="Tierarten">
      <div className="section-head" data-reveal>
        <p className="kicker">Sortiment</p>
        <h2>Für wen suchen Sie Pflege?</h2>
      </div>
      <div className="tile-row">
        {DOCTR_TILES.map((t) =>
        <DoctrTilt key={t.pet} max={6}>
            <a
            className="doctr-tile"
            href={DOCTR_PET_PAGES[t.pet].file}
            onMouseEnter={() => setPet(t.pet)}>
              <span className="doctr-tile-media">
                <image-slot
                id={t.slot}
                shape="rect"
                src={t.src}
                placeholder={t.pet === 'dog' ? 'Foto: Hund hier ablegen' : 'Foto: Katze hier ablegen'}>
              </image-slot>
              </span>
              <span className="doctr-tile-copy">
                <strong>{t.title}</strong>
                <span>{t.text}</span>
                <span className="pillar-link">
                  {DOCTR_PRODUCTS.filter((p) => p.pet === t.pet).length} Produkte ansehen →
                </span>
              </span>
            </a>
          </DoctrTilt>
        )}
      </div>
    </section>);

}

/* ---------- Gutscheine ---------- */

const DOCTR_DEALS = [
{ promo: 663956, title: '5 % Willkommensgutschein',
  text: 'Für die Anmeldung im Newsletter von DOCTR care.' }];


function DoctrDeals() {
  const [copied, setCopied] = React.useState(null);
  const copy = (code) => {
    navigator.clipboard && navigator.clipboard.writeText(code);
    setCopied(code);
    setTimeout(() => setCopied(null), 1800);
  };
  return (
    <section className="doctr-deals" data-screen-label="DOCTR Gutscheine">
      <div className="section-head" data-reveal>
        <p className="kicker">Aktuelle Vorteile</p>
        <h2>Gutscheine von DOCTR care</h2>
      </div>
      <div className="deal-grid">
        {DOCTR_DEALS.map((d) =>
        <div className="deal-card" key={d.promo} data-reveal>
            <strong>{d.title}</strong>
            <p>{d.text}</p>
            {d.code ?
          <button className="deal-code" onClick={() => copy(d.code)}>
                <span>{d.code}</span>
                <small>{copied === d.code ? 'Kopiert' : 'Code kopieren'}</small>
              </button> :
          null}
            <a className="btn btn-primary" href={'https://t.adcell.com/p/click?promoId=' + d.promo + '&slotId=95722'} target="_blank" rel="noopener">
              Gutschein einlösen
            </a>
            <img className="deal-px" src={'https://t.adcell.com/p/view?promoId=' + d.promo + '&slotId=95722'} width="1" height="1" alt=""></img>
          </div>
        )}
      </div>
    </section>);

}

/* ---------- Adcell Werbemittel ---------- */

function DoctrBanner({ promo, w, h, label }) {
  return (
    <div className={'doctr-banner doctr-banner-' + w} data-reveal>
      <a href={'https://t.adcell.com/p/click?promoId=' + promo + '&slotId=95722'} target="_blank" rel="noopener">
        <img
          src={'https://t.adcell.com/p/image?promoId=' + promo + '&slotId=95722'}
          width={w}
          height={h}
          alt={label}
          loading="lazy">
        </img>
      </a>
    </div>);

}

/* ---------- Seite ---------- */

function DoctrPage() {
  const [pet, setPet] = React.useState('dog');
  return (
    <PageShell active="DOCTR care">
      <DoctrTicker></DoctrTicker>
      <DoctrHero pet={pet} setPet={setPet}></DoctrHero>
      <DoctrTiles setPet={setPet}></DoctrTiles>
      <DoctrBanner promo={664614} w={728} h={90} label="DOCTRs pet care"></DoctrBanner>
      <DoctrDeals></DoctrDeals>
      <DoctrSortiment pet={pet}></DoctrSortiment>
      <DoctrBerater pet={pet}></DoctrBerater>
      <DoctrSets pet={pet}></DoctrSets>
      <DoctrPrinzip></DoctrPrinzip>
      <DoctrBanner promo={664506} w={728} h={90} label="DOCTRs pet care"></DoctrBanner>
      <PageCTA
        title="Fragen zur richtigen Pflege?"
        text="Nicolas und Scully beraten Sie gern – oder stöbern Sie direkt im DOCTR care Shop."
        primaryLabel="Zum DOCTR Shop"
        primaryHref={doctrLink('antidirt-pur-reinigungsschaum-fur-hunde')}
        secondaryLabel="Beratung anfragen"
        secondaryHref="mailto:info@miss-scully.ch?subject=DOCTR%20PetCare%20Beratung">
      </PageCTA>
    </PageShell>);

}

Object.assign(window, { DoctrPage, DoctrTilt, DoctrShot, DoctrCard, chf });