// Miss-Scully — DOCTR care Technologie-Seite (Inhalte von DOCTRs pet care)

const TECH_BLOCKS = [
{ t: 'Biomimetische DML-Technologie für tiergerechte Hautpflege',
  d: 'Die DML®-Technologie (Derma-Membrane-Layer) ahmt die natürliche Zellmembranstruktur der Haut von Hund, Katze und Pferd nach. So wird der Zellmembrankomplex auf biomimetische Weise stabilisiert — ein entscheidender Faktor für Hautgesundheit und Fellqualität.' },
{ t: 'Biomimetischer Mikro-Schutzfilm (MSF) – unsichtbar wirksamer Schutz',
  d: 'Mit der MSF-Technologie legt sich ein feiner, unsichtbarer Schutzfilm auf Haut und Fell, der die Barriere stärkt und für Schutz vor Umweltbelastungen sorgt. Das schützt vor Schmutz, Parasiten und äusseren Einflüssen – ideal für aktive Hunde und Outdoor-Tiere.' },
{ t: 'pH-Wert – optimal abgestimmt auf Tiere',
  d: 'Die Haut von Hunden, Katzen und Pferden unterscheidet sich deutlich von menschlicher Haut — u. a. im pH-Wert und Aufbau. Unsere Pflegeprodukte sind speziell auf das Tier-Hautmilieu abgestimmt und puffern den pH-Wert in dem für Tiere optimalen Bereich von etwa 7,0–8,5. So bleibt die Hautbarriere intakt, Irritationen werden verhindert.' },
{ t: 'Promikrobiomelle Pflege – unterstützt das natürliche Hautmilieu',
  d: 'Unsere Formulierungen respektieren und unterstützen das natürliche Mikro-Ökosystem der Tierhaut. So bleiben Haut und Fell gesund, selbst bei regelmässiger oder intensiver Pflege – ohne dass das Gleichgewicht der Hautflora gestört wird.' },
{ t: 'Veterinärmedizinische Qualität & dermatologisch orientierte Rezepturen',
  d: 'DOCTRs pet care basiert auf Technologien und Rezepturen, die ursprünglich in der Human- bzw. medizinischen Pflege entwickelt wurden — für Haut und Haar. Diese wurden für Tiere adaptiert und dermatologisch auf Verträglichkeit geprüft.' },
{ t: 'Stabiler Hautschutz durch biopolymerbasierte Formulierungen',
  d: 'Die Formulierungen nutzen hochreine Biopolymere, die sich wie ein schützender, luftdurchlässiger Film auf Haut und Fell legen. Dieser Schutz reduziert Reibung, beugt Irritationen vor und unterstützt die natürliche Regeneration – selbst bei beanspruchter oder geschädigter Haut.' }];


const TECH_DEEP = [
{ id: 'dml', title: 'DML-Technologie', paras: [
  'Die DML-Technologie (Derma-Membrane-Layer-Technologie) ist biomimetisch, d.h. aus der Natur abgeleitet und speziell auf Haut und Haar von Hund, Katze und Pferd ausgerichtet.',
  'Bei vielen Säugetieren, insbesondere bei Hund, Katze und Pferd ist – wie auch beim Menschen – die Epidermis ein Barriere-Organ des Organismus. Die Haut schützt vor mechanischen, chemischen und auch physikalischen (z.B. UV-Strahlung) Einflüssen.',
  'Einer der bedeutsamsten Unterschiede ist, dass sich die Epidermis dieser Tiere alle 18 bis 22 Tage erneuert. Beim Menschen sind es ca. 28 Tage.',
  'Zudem ist der pH-Wert der tierischen Haut bei 7 bis 8,5 äquilibriert. Beim Menschen liegt ein solches Gleichgewicht bei einem pH-Wert von durchschnittlich 5,5 vor.',
  'Der „talglastige" tierische Zellmembrankomplex ist nur bei einem höheren, alkalischen pH-Wert ausreichend geschmeidig und fliessfähig. Bei einem pH-Wert von 5,5 würde er zu fest, könnte kein Wasser mehr speichern und seiner Barrierefunktion nicht mehr nachkommen.',
  'Die DML-Technologie stützt diesen liquid-kristallinen Zustand, indem seine Konsistenz und Konstellation beim individuellen pH-Wert des Tieres im Spektrum von 7,0 – 8,5 direkt unterstützt wird – mit einem speziellen pH-Puffer, der stetig auf diesen Wert reguliert.'] },
{ id: 'msf', title: 'MSF-Technologie', paras: [
  'Die MSF-Technologie bildet auf der tierischen Haut einen biomimetischen Mikro-Schutzfilm (MSF) aus, der als nicht sichtbarer, dünner Film die Haut und auch das Fellhaar ummantelt. Der MSF unterstützt den Zellmembrankomplex der tierischen Haut und forciert dessen Barriere- sowie Schutzfunktion.',
  'Zudem werden im MSF produktspezifisch spezielle Wirkstoffe integriert: etwa eine massive pH-Regulierung bei Kontakt mit Streusalz (PAD PROTECTION) oder die Parasitenabwehr von Zecken, Grasmilben, Haarlingen, Flöhen oder Bremsen (INSECT & TICK REPELLENT).'] }];


function DoctrTechnologie() {
  const [open, setOpen] = React.useState('dml');
  const bestseller = ['d5', 'd7', 'd4', 'c7'].map(doctrById).filter(Boolean);
  return (
    <PageShell active="DOCTR care">
      <DoctrTicker></DoctrTicker>

      <section className="page-hero" data-screen-label="Technologie">
        <p className="kicker" data-reveal>Technologie</p>
        <h1 data-reveal>Das steckt hinter DOCTRs pet care</h1>
        <p className="lede" data-reveal>
          Sanfte Pflege abgestimmt auf tierische Haut – pH-gerecht, biomimetisch und besonders
          hautverträglich. Ideal für sensible Tiere.
        </p>
      </section>

      <section className="doctr-section" data-screen-label="Technologie Bausteine">
        <div className="tech-grid">
          {TECH_BLOCKS.map((b, n) =>
          <article className="tech-card" key={b.t} data-reveal style={{ transitionDelay: n * 60 + 'ms' }}>
              <span className="prinzip-n">{'0' + (n + 1)}</span>
              <h2>{b.t}</h2>
              <p>{b.d}</p>
            </article>
          )}
        </div>
      </section>

      <section className="artikel-info" data-screen-label="DML und MSF">
        <div className="tech-deep">
          {TECH_DEEP.map((d) =>
          <div className={'tech-acc' + (open === d.id ? ' is-open' : '')} key={d.id} data-reveal>
              <button className="tech-acc-q" onClick={() => setOpen(open === d.id ? null : d.id)}>
                <span>{d.title}</span>
                <span className="tech-acc-icon">{open === d.id ? '−' : '+'}</span>
              </button>
              {open === d.id ?
            <div className="tech-acc-a">
                  {d.paras.map((p) => <p key={p}>{p}</p>)}
                </div> :
            null}
            </div>
          )}
        </div>
      </section>

      <section className="doctr-section" data-screen-label="Bestseller">
        <div className="section-head" data-reveal>
          <p className="kicker">Produkt-Highlights</p>
          <h2>Meistverkaufte DOCTR Produkte</h2>
        </div>
        <div className="doctr-grid">
          {bestseller.map((p, i) =>
          <div className="doctr-cell" key={p.id} style={{ animationDelay: i * 55 + 'ms' }}>
              <DoctrCard p={p}></DoctrCard>
            </div>
          )}
        </div>
      </section>

      <DoctrBanner promo={664506} w={728} h={90} label="DOCTRs pet care"></DoctrBanner>

      <PageCTA
        title="Pflege, die zur Haut passt"
        text="Alle DOCTR Produkte für Hund und Katze – im Partnershop von Miss-Scully."
        primaryLabel="Zum Sortiment"
        primaryHref="/DOCTR%20Hunde.html"
        secondaryLabel="Beratung anfragen"
        secondaryHref="mailto:info@miss-scully.ch?subject=DOCTR%20Technologie">
      </PageCTA>
    </PageShell>);

}

window.DoctrTechnologie = DoctrTechnologie;