// Miss-Scully — Hurtta Seite (offizieller Verkauf Schweiz, Adcell-Links)
// Lädt nach homepage-sections.jsx + subpages-content.jsx + doctr-page.jsx (DoctrBanner, DoctrTilt).

const HURTTA_SHOP = 'https://www.hurtta-deutschland.de/?bid=521038-95722-&adcref=www.adcell.de%2F&aexp=1800343217&avrf=TGfAwdt-u3y8-vvuGLaCGQ&aclk=1792567217';
const HURTTA_CODE = 'Hurtta-Adcell';

const HURTTA_IMG = 'https://dn.hurtta-deutschland.de/';
const HURTTA_CATS = [
{ id: 'regen', name: 'Regenmäntel', line: 'z. B. Monsoon Coat II ECO', img: 'Hurtta-Regenmantel-Monsoon-Coat-II-blackberry,105456,1,4,7p.jpg', text: 'Wasserdicht, atmungsaktiv und mit Bauchschutz, damit Spritzwasser und Schmutz am Mantel bleiben und nicht im Fell.', w: ['regen', 'dunkel'] },
{ id: 'winter', name: 'Winterjacken', line: 'z. B. Expedition Parka II', img: 'Hurtta-Hundejacke-Expedition-Parka-II-lavender-Limited-Edition,115854,1,8,7p.jpg', text: 'Wärmende Isolation für kurzhaarige, kleine und ältere Hunde, die im Winter schneller auskühlen.', w: ['kalt'] },
{ id: 'kuehl', name: 'Kühlwesten', line: 'z. B. Cooling Wrap', img: 'Hurtta-Kuehlweste-Cooling-Wrap-lavender,110810,1,8,7p.jpg', text: 'Befeuchten, auswringen, anziehen: Die Verdunstung kühlt den Hund an heissen Tagen und bei Bewegung.', w: ['hitze'] },
{ id: 'schwimm', name: 'Schwimmwesten', line: 'z. B. Life Savior', img: 'Hurtta-Schwimmweste-Life-Savior-peacock,101370,1,13,7p.jpg', text: 'Auftrieb im See, auf dem Boot und beim Paddeln, mit Griff zum sicheren Herausheben aus dem Wasser.', w: ['wasser'] },
{ id: 'geschirr', name: 'Geschirre', line: 'z. B. Weekend Warrior Harness II', img: 'LOCAL:assets/hurtta-geschirr.jpg', text: 'Ergonomisch geschnitten für Wandern, Alltag und Zughundesport, gepolstert und mit reflektierenden Details.', w: ['regen', 'kalt', 'hitze', 'wasser', 'dunkel'] },
{ id: 'leine', name: 'Halsbänder & Leinen', line: 'z. B. Rover Collar', img: 'LOCAL:assets/hurtta-leine.jpg', text: 'Robuste Materialien, die nass werden dürfen, mit Reflexelementen für die dunkle Jahreszeit.', w: ['dunkel', 'regen'] },
{ id: 'bett', name: 'Hundebetten & Decken', line: 'z. B. Sleepover Sleeping Bag', img: 'LOCAL:assets/hurtta-bett.jpg', text: 'Leicht zu reinigende Liegeplätze und Decken für Haus, Auto und Ferienunterkunft.', w: ['kalt'] },
{ id: 'pflege', name: 'Pflege & Trocknung', line: 'Nach Regen, Matsch & Baden', img: 'Hurtta-Mudventure-Coat-ECO,1433,7,3b.jpg', text: 'Saugstarke Trocknungsmäntel und Pflegeprodukte für die Zeit nach Regen, Schnee und Baden.', w: ['regen', 'wasser', 'kalt'] }];

const HURTTA_BEST = [
{ n: 'Expedition Parka II', c: 'lavender · Limited Edition', img: 'Hurtta-Hundejacke-Expedition-Parka-II-lavender-Limited-Edition,115854,1,8,7p.jpg' },
{ n: 'Walk All-Season Jacket', c: 'forest', img: 'Hurtta-Hundejacke-Walk-All-Season-Jacket-forest,115840,1,8,7p.jpg' },
{ n: 'Warming Midlayer', c: 'eggplant', img: 'Hurtta-Waermende-Hundejacke-Warming-Midlayer-eggplant,115844,1,8,7p.jpg' },
{ n: 'Extreme Overall II', c: 'arctic sea', img: 'Hurtta-Hunde-Overall-Extreme-Overall-II-arctic-sea,115838,1,8,7p.jpg' },
{ n: 'Mudventure Coat', c: 'forest', img: 'Hurtta-Regenmantel-Mudventure-Coat-forest,110793,1,8,7p.jpg' },
{ n: 'Mudventure Reflective Coat', c: 'lavender', img: 'Hurtta-Reflektierender-Regenmantel-Mudventure-Reflective-Coat-lavender,115835,1,8,7p.jpg' },
{ n: 'Cooling Wrap', c: 'lavender', img: 'Hurtta-Kuehlweste-Cooling-Wrap-lavender,110810,1,8,7p.jpg' },
{ n: 'Life Savior', c: 'peacock', img: 'Hurtta-Schwimmweste-Life-Savior-peacock,101370,1,13,7p.jpg' }];

const HURTTA_VIDEOS = [
{ id: 'BnqOGH4O-uA', t: 'Expedition Parka II', d: 'Anziehen, anpassen, losgehen: der Wintermantel im Einsatz.' },
{ id: 'EahL0nQ9B5U', t: 'Mudventure Reflective Coat', d: 'Trocken im Regen und sichtbar in der Dunkelheit.' },
{ id: 'OsgQtN-_DwM', t: 'Die richtige Grösse', d: 'So messen Sie Ihren Hund für die perfekte Passform.' },
{ id: '3NePNbA0uFM', t: 'Passform bei Mänteln', d: 'Rückenlänge, Brust und Hals richtig messen.' }];

const HURTTA_WEATHER = [
{ id: 'regen', label: 'Regen & Matsch' },
{ id: 'kalt', label: 'Kälte & Schnee' },
{ id: 'hitze', label: 'Sommerhitze' },
{ id: 'wasser', label: 'See & Boot' },
{ id: 'dunkel', label: 'Dunkle Tage' }];

function HurttaHero() {
  return (
    <section className="hurtta-hero" data-screen-label="Hurtta Hero">
      <div className="hurtta-hero-bg" aria-hidden="true">
        <img className="hurtta-kenburns" src="/assets/hurtta-schnee-spaziergang.png" alt=""></img>
        <video className="hurtta-hero-video" src="/assets/hurtta-hero.mp4" poster="/assets/hurtta-schnee-spaziergang.png" autoPlay muted loop playsInline></video>
        <span className="hurtta-hero-shade"></span>
      </div>
      <div className="hurtta-hero-copy">
        <span className="hurtta-hero-badge">Autumn/Winter 2026</span>
        <p className="kicker" data-reveal>Offizieller Verkauf für die Schweiz</p>
        <h1 data-reveal>Hurtta Ausrüstung aus dem Norden für jedes Wetter</h1>
        <p className="lede" data-reveal>Die finnische Marke entwickelt Hundebekleidung und Zubehör für Regen, Schnee, Hitze und Wasser. Bei Miss-Scully finden Sie das Sortiment nach Einsatz sortiert.</p>
        <div className="hero-actions" data-reveal>
          <a className="btn btn-primary btn-lg" href={HURTTA_SHOP} target="_blank" rel="noopener">Zum Hurtta Shop</a>
          <a className="btn btn-light btn-lg" href="#hurtta-groesse">Passende Ausrüstung finden</a>
        </div>
      </div>
    </section>);
}

function HurttaCoupon() {
  const [copied, setCopied] = React.useState(false);
  const copy = () => {
    navigator.clipboard && navigator.clipboard.writeText(HURTTA_CODE);
    setCopied(true);
    setTimeout(() => setCopied(false), 1800);
  };
  return (
    <section className="hurtta-coupon" data-screen-label="Hurtta Gutschein">
      <div className="hurtta-coupon-card" data-reveal>
        <div className="hurtta-coupon-big">
          <span>15 %</span>
          <small>auf alle Hurtta-Artikel</small>
        </div>
        <div className="hurtta-coupon-copy">
          <a className="hurtta-coupon-text" href="https://t.adcell.com/p/click?promoId=521038&slotId=95722" target="_blank" rel="noopener">Jetzt 15 % Rabatt auf alle Artikel der Marke Hurtta sichern! Gültig für das gesamte Hurtta-Sortiment bei hurtta-deutschland.de – von wetterfester Hundebekleidung über funktionale Geschirre bis zu reflektierendem Sicherheitszubehör.</a>
          <ul className="hurtta-terms">
            <li>Auch für Kunden in der Schweiz gültig</li>
            <li>15 % Rabatt auf alle Hurtta-Produkte</li>
            <li>Kein Mindestbestellwert</li>
            <li>Gültig für Neu- und Bestandskunden</li>
            <li>Nicht kombinierbar mit anderen Gutscheinen</li>
          </ul>
          <div className="hurtta-coupon-actions">
            <button className="deal-code" onClick={copy}>
              <span>{HURTTA_CODE}</span>
              <small>{copied ? 'Kopiert' : 'Code kopieren'}</small>
            </button>
            <a className="btn btn-primary" href="https://t.adcell.com/p/click?promoId=521038&slotId=95722" target="_blank" rel="noopener">Gutschein einlösen</a>
          </div>
        </div>
        <img className="deal-px" src="https://t.adcell.com/p/view?promoId=521038&slotId=95722" width="1" height="1" alt=""></img>
      </div>
    </section>);
}

function HurttaBand({ src, cap, text, pos }) {
  return (
    <section className={'hurtta-band ' + (pos || '')} data-screen-label="Hurtta Bild">
      <img src={src} alt={cap} loading="lazy"></img>
      <div className="hurtta-band-copy" data-reveal>
        <strong>{cap}</strong>
        {text ? <span>{text}</span> : null}
      </div>
    </section>);
}

function HurttaFinder({ weather, setWeather, setType }) {
  const pick = (id) => { setWeather(id); if (HURTTA_WEATHER_TYPE[id]) { setType(HURTTA_WEATHER_TYPE[id]); setTimeout(hurttaGoSize, 350); } };
  return (
    <section className="hurtta-finder" id="hurtta-finder" data-screen-label="Hurtta Wetter-Finder">
      <div className="section-head" data-reveal>
        <p className="kicker">Wetter-Finder</p>
        <h2>Wofür brauchen Sie Ausrüstung?</h2>
      </div>
      <div className="hurtta-weather" data-reveal>
        <button className={'hurtta-w' + (weather === null ? ' on' : '')} onClick={() => setWeather(null)}>Alles zeigen</button>
        {HURTTA_WEATHER.map((w) =>
        <button key={w.id} className={'hurtta-w' + (weather === w.id ? ' on' : '')} onClick={() => pick(w.id)}>{w.label}</button>
        )}
      </div>
    </section>);
}

function HurttaGrid({ weather, setType }) {
  return (
    <section className="hurtta-grid-section" data-screen-label="Hurtta Kategorien">
      <div className="hurtta-grid">
        {HURTTA_CATS.map((c, i) => {
          const hit = weather === null || c.w.includes(weather);
          return (
            <div className={'hurtta-cell' + (hit ? '' : ' dim')} key={c.id} style={{ transitionDelay: i * 40 + 'ms' }}>
              <DoctrTilt max={6}>
                <article className="hurtta-card">
                  <div className="hurtta-card-media">
                    <img src={c.img.indexOf('LOCAL:') === 0 ? c.img.slice(6) : HURTTA_IMG + c.img} alt={c.name} loading="lazy"></img>
                  </div>
                  <div className="hurtta-card-body">
                    <span className="hurtta-line">{c.line}</span>
                    <strong>{c.name}</strong>
                    <p>{c.text}</p>
                    <span className="hurtta-card-actions">
                      {HURTTA_CAT_TYPE[c.id] ?
                      <button className="btn btn-primary hurtta-shop-btn" onClick={() => { setType(HURTTA_CAT_TYPE[c.id]); hurttaGoSize(); }}>Grösse finden</button> :
                      null}
                      <a className="btn btn-ghost hurtta-shop-btn" href={HURTTA_CAT_TYPE[c.id] ? HURTTA_DEEP(HURTTA_TYPES.find((x) => x.id === HURTTA_CAT_TYPE[c.id]).url) : HURTTA_CAT_URL[c.id] ? HURTTA_DEEP(HURTTA_CAT_URL[c.id]) : HURTTA_SHOP} target="_blank" rel="noopener">{HURTTA_CAT_TYPE[c.id] ? 'Zum Artikel →' : 'Zum Shop →'}</a>
                    </span>
                  </div>
                </article>
              </DoctrTilt>
            </div>);
        })}
      </div>
    </section>);
}

function HurttaVideos() {
  const [cur, setCur] = React.useState(0);
  const [play, setPlay] = React.useState(false);
  const v = HURTTA_VIDEOS[cur];
  const pick = (i) => { setCur(i); setPlay(true); };
  return (
    <section className="hurtta-videos" data-screen-label="Hurtta Videos">
      <div className="section-head" data-reveal>
        <p className="kicker">Hurtta in Bewegung</p>
        <h2>Sehen, wie es sitzt</h2>
      </div>
      <div className="hurtta-vid-layout" data-reveal>
        <div className="hurtta-vid-main">
          {play ?
          <iframe key={v.id} src={'https://www.youtube-nocookie.com/embed/' + v.id + '?autoplay=1&rel=0&modestbranding=1'} title={v.t} allow="autoplay; encrypted-media; picture-in-picture; fullscreen" allowFullScreen></iframe> :
          <button className="hurtta-vid-poster" onClick={() => setPlay(true)} aria-label={'Video abspielen: ' + v.t}>
              <img src={'https://i.ytimg.com/vi/' + v.id + '/hqdefault.jpg'} alt=""></img>
              <span className="hurtta-play"></span>
              <span className="hurtta-vid-cap"><strong>{v.t}</strong><small>{v.d}</small></span>
            </button>}
        </div>
        <div className="hurtta-vid-list">
          {HURTTA_VIDEOS.map((x, i) =>
          <button key={x.id} className={'hurtta-vid-item' + (i === cur ? ' on' : '')} onClick={() => pick(i)}>
              <span className="hurtta-vid-thumb"><img src={'https://i.ytimg.com/vi/' + x.id + '/mqdefault.jpg'} alt="" loading="lazy"></img><span className="hurtta-play sm"></span></span>
              <span className="hurtta-vid-txt"><strong>{x.t}</strong><small>{x.d}</small></span>
            </button>
          )}
        </div>
      </div>
      <p className="hurtta-vid-note">Videos: Hurtta Global auf YouTube</p>
    </section>);
}

function HurttaBest() {
  const items = HURTTA_BEST.concat(HURTTA_BEST);
  return (
    <section className="hurtta-best" data-screen-label="Hurtta Bestseller">
      <div className="section-head" data-reveal>
        <p className="kicker">Beliebt</p>
        <h2>Die Bestseller der Saison</h2>
      </div>
      <div className="hurtta-marquee">
        <div className="hurtta-track">
          {items.map((p, i) =>
          <a className="hurtta-prod" key={i} href={HURTTA_SHOP} target="_blank" rel="noopener" aria-hidden={i >= HURTTA_BEST.length ? 'true' : undefined} tabIndex={i >= HURTTA_BEST.length ? -1 : undefined}>
              <span className="hurtta-prod-img"><img src={HURTTA_IMG + p.img} alt={p.n} loading="lazy"></img></span>
              <strong>{p.n}</strong>
              <small>{p.c}</small>
              <span className="pillar-link">Zum Shop →</span>
            </a>
          )}
        </div>
      </div>
    </section>);
}

const HURTTA_DEEP = (url) => url + (url.indexOf('?') > -1 ? '&' : '?') + 'bid=521038-95722-&adcref=www.miss-scully.ch';
const HURTTA_TYPES = [
{ id: 'rain', label: 'Regenmantel', key: 'back', chart: '105456', chartName: 'Monsoon Coat II', url: 'https://www.hurtta-deutschland.de/Hurtta-Regenmantel-Monsoon-Coat-II-blackberry,105456,1160p.htm' },
{ id: 'coat', label: 'Wintermantel', key: 'back', chart: '115854', chartName: 'Expedition Parka II', url: 'https://www.hurtta-deutschland.de/Hurtta-Hundejacke-Expedition-Parka-II-lavender-Limited-Edition,115854,1161p.htm' },
{ id: 'reflect', label: 'Reflektierender Mantel', key: 'back', chart: '115835', chartName: 'Mudventure Reflective Coat', url: 'https://www.hurtta-deutschland.de/Hurtta-Reflektierender-Regenmantel-Mudventure-Reflective-Coat-lavender,115835,1160p.htm' },
{ id: 'overall', label: 'Overall', key: 'back', chart: '115838', chartName: 'Extreme Overall II', url: 'https://www.hurtta-deutschland.de/Hurtta-Hunde-Overall-Extreme-Overall-II-arctic-sea,115838,1162p.htm' },
{ id: 'cool', label: 'Kühlweste', key: 'back', chart: '110810', chartName: 'Cooling Wrap', url: 'https://www.hurtta-deutschland.de/Hurtta-Kuehlweste-Cooling-Wrap-lavender,110810,1152p.htm' },
{ id: 'life', label: 'Schwimmweste', key: 'chest', chart: '101370', chartName: 'Life Savior', url: 'https://www.hurtta-deutschland.de/Hurtta-Schwimmweste-Life-Savior-peacock,101370,1153p.htm' },
{ id: 'harness', label: 'Geschirr', key: 'chest', chart: '105462', chartName: 'Weekend Warrior Harness II', url: 'https://www.hurtta-deutschland.de/weekend-warrior-harness-ii,1s.htm' },
{ id: 'collar', label: 'Halsband', key: 'neck', chart: '110799', chartName: 'Rover Collar', url: 'https://www.hurtta-deutschland.de/Hurtta-Hundehalsband-Rover-Collar-peacock,110799,1156p.htm' },
{ id: 'bed', label: 'Schlafsack', key: 'back', chart: '108602', chartName: 'Sleepover Sleeping Bag', url: 'https://www.hurtta-deutschland.de/Hurtta-Hunde-Schlafsack-Sleepover-Sleeping-Bag-cinnamon,108602,1189p.htm' }];
const HURTTA_WEATHER_TYPE = { regen: 'rain', kalt: 'coat', hitze: 'cool', wasser: 'life', dunkel: 'reflect' };
const HURTTA_CAT_TYPE = { regen: 'rain', winter: 'coat', kuehl: 'cool', schwimm: 'life', geschirr: 'harness', leine: 'collar', bett: 'bed' };
const HURTTA_CAT_URL = { pflege: 'https://www.hurtta-deutschland.de/Zubehoer,1163,1k.htm' };
const hurttaGoSize = () => { const el = document.getElementById('hurtta-groesse'); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 90, behavior: 'smooth' }); };

const HURTTA_MEASURES = [
{ id: 'back', n: '1', t: 'Rückenlänge', d: 'Vom Halsansatz (Widerrist) bis zum Rutenansatz, im Stehen gemessen.', min: 15, max: 100 },
{ id: 'chest', n: '2', t: 'Brustumfang', d: 'An der breitesten Stelle des Brustkorbs, direkt hinter den Vorderbeinen.', min: 25, max: 130 },
{ id: 'neck', n: '3', t: 'Halsumfang', d: 'Dort, wo normalerweise das Halsband sitzt.', min: 15, max: 80 }];

const HW_CODE = (c) => c === 0 ? ['Sonnig', 'sun'] : c <= 3 ? ['Bewölkt', 'cloud'] : c <= 48 ? ['Nebel', 'cloud'] : c <= 67 || (c >= 80 && c <= 82) ? ['Regen', 'rain'] : c <= 77 || c === 85 || c === 86 ? ['Schnee', 'snow'] : ['Gewitter', 'rain'];
const HW_DAYS = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
function HurttaWeather({ onPick }) {
  const [q, setQ] = React.useState('Zürich');
  const [place, setPlace] = React.useState(null);
  const [days, setDays] = React.useState(null);
  const [err, setErr] = React.useState('');
  const load = async (name) => {
    setErr('');
    try {
      const g = await (await fetch('https://geocoding-api.open-meteo.com/v1/search?count=1&language=de&name=' + encodeURIComponent(name))).json();
      const p = g.results && g.results[0];
      if (!p) { setErr('Ort nicht gefunden.'); return; }
      const f = await (await fetch('https://api.open-meteo.com/v1/forecast?latitude=' + p.latitude + '&longitude=' + p.longitude + '&daily=weathercode,temperature_2m_max,temperature_2m_min,precipitation_sum&timezone=auto&forecast_days=7')).json();
      setPlace(p.name + (p.admin1 ? ', ' + p.admin1 : '') + (p.country_code ? ' (' + p.country_code + ')' : ''));
      setDays(f.daily.time.map((d, i) => ({ d, code: f.daily.weathercode[i], max: Math.round(f.daily.temperature_2m_max[i]), min: Math.round(f.daily.temperature_2m_min[i]), rain: f.daily.precipitation_sum[i] })));
    } catch (e) { setErr('Wetterdaten konnten nicht geladen werden.'); }
  };
  React.useEffect(() => { load('Zürich'); }, []);
  let rec = null;
  if (days) {
    const rainy = days.filter((x) => x.rain >= 1 || HW_CODE(x.code)[1] === 'rain').length;
    const minT = Math.min(...days.map((x) => x.min)), maxT = Math.max(...days.map((x) => x.max));
    rec = maxT >= 25 ? ['hitze', 'Heisse Tage voraus – eine Kühlweste hilft.'] : minT <= 3 || days.some((x) => HW_CODE(x.code)[1] === 'snow') ? ['kalt', 'Kalte Tage voraus – Zeit für eine Winterjacke.'] : rainy >= 2 ? ['regen', rainy + ' Regentage voraus – ein Regenmantel lohnt sich.'] : ['dunkel', 'Trockene Woche – für frühe und späte Runden: reflektierende Ausrüstung.'];
  }
  return (
    <section className="hw" data-screen-label="Hurtta Wetter">
      <div className="hw-head">
        <div>
          <span className="hurtta-step">Wetter an Ihrem Ort · 7 Tage</span>
          <strong className="hw-place">{place || '…'}</strong>
        </div>
        <form className="hw-form" onSubmit={(e) => { e.preventDefault(); if (q.trim()) load(q.trim()); }}>
          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Ort eingeben, z. B. Bern" aria-label="Ort"></input>
          <button className="btn btn-primary" type="submit">Anzeigen</button>
        </form>
      </div>
      {err ? <p className="hw-err">{err}</p> : null}
      <div className="hw-days">
        {(days || Array.from({ length: 7 })).map((x, i) => {
          const w = x ? HW_CODE(x.code) : ['', ''];
          return (
            <div className={'hw-day hw-' + w[1]} key={i}>
              <span className="hw-dn">{x ? (i === 0 ? 'Heute' : HW_DAYS[new Date(x.d).getDay()]) : '–'}</span>
              <span className={'hw-ico hw-ico-' + w[1]}></span>
              <span className="hw-t"><b>{x ? x.max + '°' : ''}</b>{x ? ' / ' + x.min + '°' : ''}</span>
              <span className="hw-w">{w[0]}</span>
            </div>);
        })}
      </div>
      {rec ?
      <div className="hw-rec">
          <span>{rec[1]}</span>
          <button className="btn btn-light" onClick={() => onPick(rec[0])}>Passende Ausrüstung wählen →</button>
        </div> :
      null}
      <p className="hw-src">Wetterdaten: Open-Meteo</p>
    </section>);
}

function HurttaSize({ type, setType, noHead, weather, setWeather }) {
  const pickW = (id) => { setWeather(id); if (id && HURTTA_WEATHER_TYPE[id]) setType(HURTTA_WEATHER_TYPE[id]); };
  const [m, setM] = React.useState({ back: 45, chest: 60, neck: 38 });
  const [focus, setFocus] = React.useState(null);
  const T = HURTTA_TYPES.find((x) => x.id === type);
  const val = m[T.key];
  let size, note;
  if (T.key === 'back') {
    const lower = Math.max(20, Math.floor(val / 5) * 5);
    const upper = lower + 5;
    const exact = val % 5 === 0;
    if (exact) { size = String(val); note = 'Ihre Rückenlänge entspricht genau dieser Grösse.'; }
    else if (type === 'overall') { size = String(lower); note = 'Zwischen zwei Grössen? Bei Overalls passt die kleinere Grösse meist besser.'; }
    else { size = String(upper); note = 'Zwischen zwei Grössen? Bei Jacken mit verstellbarer Rückenlänge empfiehlt sich die grössere Grösse.'; }
  } else {
    size = val + ' cm';
    note = T.key === 'neck' ? 'Beim Halsband ist der Halsumfang entscheidend. Wählen Sie im Artikel die Grösse, deren Bereich diesen Wert einschliesst.' : 'Bei Geschirren und Schwimmwesten ist der Brustumfang entscheidend. Wählen Sie im Artikel die Grösse, deren Bereich diesen Wert einschliesst.';
  }
  const set = (k, v) => setM(Object.assign({}, m, { [k]: Number(v) }));
  return (
    <section className="hurtta-size" id="hurtta-groesse" data-screen-label="Hurtta Grössenfinder">
      {noHead ? null :
      <div className="section-head" data-reveal>
        <p className="kicker">Grössenfinder</p>
        <h2>Welche Grösse passt Ihrem Hund?</h2>
      </div>}
      <div className="hurtta-size-card" data-reveal>
        <div className="hurtta-size-left">
          <span className="hurtta-step">1 · Wofür brauchen Sie Ausrüstung?</span>
          <div className="hurtta-size-types">
            <button className={'hurtta-w' + (weather === null ? ' on' : '')} onClick={() => pickW(null)}>Alles</button>
            {HURTTA_WEATHER.map((w) =>
            <button key={w.id} className={'hurtta-w' + (weather === w.id ? ' on' : '')} onClick={() => pickW(w.id)}>{w.label}</button>
            )}
          </div>
          <span className="hurtta-step">2 · Produkt</span>
          <div className="hurtta-size-types">
            {HURTTA_TYPES.map((x) =>
            <button key={x.id} className={'hurtta-w' + (type === x.id ? ' on' : '')} onClick={() => setType(x.id)}>{x.label}</button>
            )}
          </div>
          <span className="hurtta-step">3 · Hund messen</span>
          {HURTTA_MEASURES.map((x) =>
          <label key={x.id} className={'hurtta-measure' + (T.key === x.id ? ' key' : '') + (focus === x.id ? ' focus' : '')} onMouseEnter={() => setFocus(x.id)} onMouseLeave={() => setFocus(null)}>
              <span className="hurtta-measure-head">
                <span className="hurtta-mn">{x.n}</span>
                <strong>{x.t}{T.key === x.id ? <em>entscheidend</em> : null}</strong>
                <span className="hurtta-mval">{m[x.id]} cm</span>
              </span>
              <input type="range" min={x.min} max={x.max} value={m[x.id]} onChange={(e) => set(x.id, e.target.value)} onFocus={() => setFocus(x.id)} onBlur={() => setFocus(null)}></input>
              <small>{x.d}</small>
            </label>
          )}
        </div>
        <div className="hurtta-size-right">
          <span className="hurtta-size-label">Empfehlung {T.label}</span>
          <span className="hurtta-size-num" key={type + size}>{size}</span>
          <p>{note}</p>
          <ul className="hurtta-size-tips">
            <li>Im Stehen messen, mit weichem Massband.</li>
            <li>Sehr schlanke oder muskulöse Hunde brauchen eventuell eine Grösse kleiner oder grösser.</li>
            <li>Die beste Passform zeigt die Anprobe am Hund.</li>
          </ul>
          <div className="hurtta-size-actions">
            <a className="btn btn-primary" href={HURTTA_DEEP(T.url)} target="_blank" rel="noopener">Zum Artikel {T.chartName} →</a>
            <a className="btn btn-light" href={'https://www.hurtta-deutschland.de/media/hundeshop/files/50/' + T.chart + '_sc.jpg'} target="_blank" rel="noopener">Grössentabelle {T.chartName}</a>
          </div>
        </div>
      </div>
    </section>);
}

function HurttaWhy() {
  const items = [
  { t: 'Aus dem Norden Finnlands', p: ['Hurtta ist das finnische Wort für einen Jagdhund oder, liebevoll gesagt, für einen Mischling. Die Marke stammt aus Finnland, wo vier ausgeprägte Jahreszeiten, lange Winter und wechselhaftes Wetter zum Alltag gehören.', 'Seit über 20 Jahren entwickelt Hurtta dort Bekleidung und Ausrüstung, mit der Hunde und ihre Menschen das ganze Jahr über draussen unterwegs sein können – bei Regen, Schnee und Sonne.'] },
  { t: 'Getestet bei rauem Wetter', p: ['Die Produkte werden unter harten Bedingungen geprüft, bevor sie in den Handel kommen. Regenmäntel wie der Monsoon Coat II halten Nässe und Schmutz vom Fell fern, Winterjacken wie der Expedition Parka II schützen vor Kälte, Wind und Nässe.', 'Für die dunkle Jahreszeit haben viele Modelle reflektierende Details, damit Ihr Hund auf Spaziergängen am Morgen und am Abend gut sichtbar bleibt.'] },
  { t: 'Passform aus über 4.000 Messungen', p: ['Das Hurtta-Grössensystem basiert auf Messdaten von über 4.000 Hunden verschiedener Rassen. So finden grosse und kleine, kurz- und langhaarige, aktive und ruhigere Hunde die passende Grösse.', 'Bei Jacken und Overalls ist die Rückenlänge entscheidend, bei Geschirren der Brustumfang. Viele Modelle sind verstellbar, damit sie auch bei Zwischengrössen gut sitzen.'] },
  { t: 'Bewegungsfreiheit für den Hund', p: ['Hurtta-Schnitte sind auf Bewegung ausgelegt. Der Hund soll laufen, springen und schnüffeln können, ohne dass der Mantel verrutscht oder einschränkt.', 'Ergonomische Geschirre wie das Weekend Warrior Harness II oder das Rover Harness verteilen den Zug gleichmässig und schonen den Körper – im Stadtalltag ebenso wie auf Wanderungen.'] },
  { t: 'Gemacht für ein Hundeleben', p: ['Die Produkte sind so konzipiert, dass sie mindestens ein Hundeleben lang halten. Robuste Materialien, sorgfältige Verarbeitung und Ersatzteile wie Schnallen und Karabiner verlängern die Nutzungsdauer zusätzlich.', 'Hurtta setzt sich für Nachhaltigkeit ein, arbeitet an Kreislaufdesign und bietet mit den ECO-Modellen Varianten aus umweltfreundlicheren Materialien an.'] },
  { t: 'Beratung bei Miss-Scully', p: ['Als offizieller Hurtta-Verkäufer für die Schweiz helfen wir Ihnen bei der Wahl von Modell und Grösse. Nutzen Sie oben den Wetter- und Grössenfinder oder schreiben Sie uns Rasse, Rückenlänge, Brust- und Halsumfang Ihres Hundes.', 'Wir empfehlen Ihnen das passende Produkt und schicken Ihnen den direkten Link zum Artikel – mit 15 % Rabatt über den Code Hurtta-Adcell.'] }];
  return (
    <section className="doctr-prinzip hurtta-why" data-screen-label="Warum Hurtta">
      <div className="section-head" data-reveal>
        <p className="kicker">Warum Hurtta</p>
        <h2>Ausrüstung, die draussen funktioniert</h2>
        <p className="section-sub">Hurtta ist eine nordische Marke, die sich der Liebe zu Hunden, zu Abenteuern in der Natur und zum Umweltschutz verschrieben hat. Alles, was Hurtta entwickelt, soll Hunden das Leben draussen angenehmer machen.</p>
      </div>
      <div className="prinzip-row hurtta-why-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>
            {i.p.map((x) => <p key={x}>{x}</p>)}
          </div>
        )}
      </div>
    </section>);
}

function HurttaPage() {
  const [weather, setWeather] = React.useState(null);
  const [sizeType, setSizeType] = React.useState('coat');
  return (
    <PageShell active="Hurtta Regen- & Winterjacken">
      <HurttaHero></HurttaHero>
      <div className="hurtta-size-row" data-screen-label="Hurtta Grössenfinder & Gutschein">
        <div className="section-head hurtta-size-row-head" data-reveal>
          <p className="kicker">Wetter- & Grössenfinder</p>
          <h2>Wetter, Produkt, Grösse – in drei Schritten zum passenden Artikel</h2>
        </div>
        <HurttaWeather onPick={(w) => { setWeather(w); if (HURTTA_WEATHER_TYPE[w]) setSizeType(HURTTA_WEATHER_TYPE[w]); }}></HurttaWeather>
        <HurttaSize type={sizeType} setType={setSizeType} noHead={true} weather={weather} setWeather={setWeather}></HurttaSize>
        <HurttaCoupon></HurttaCoupon>
        <p className="hurtta-zoll"><strong>Wichtiger Hinweis zu zusätzlichen Zollgebühren:</strong> Unter Umständen müssen Sie für die Einfuhr von Waren aus Deutschland in Ihrem Land eine Zollgebühr abführen.</p>
      </div>
      <HurttaGrid weather={weather} setType={setSizeType}></HurttaGrid>
      <HurttaWhy></HurttaWhy>
      <HurttaBand src="/assets/hurtta-golden-schnee.png" cap="Neugierig auch bei Schnee" text="Ausrüstung, die jedes Wetter mitmacht." pos="right"></HurttaBand>
      <HurttaVideos></HurttaVideos>
      <HurttaBand src="/assets/hurtta-schnee-spaziergang.png" cap="Winterspaziergang im Wald" text="Warm und trocken durch Schnee und Kälte."></HurttaBand>
    </PageShell>);
}

window.HurttaPage = HurttaPage;