// Miss-Scully — Tractive GPS Seite (interaktiv)
// Lädt nach homepage-sections.jsx + subpages-content.jsx und ersetzt window.TractivePage.

const TRACTIVE_LINK = 'https://t.adcell.com/p/click?promoId=517821&slotId=95722';
const TRACTIVE_CAT_LINK = 'https://t.adcell.com/p/click?promoId=517856&slotId=95722';

/* ---------- photo gallery strip ---------- */

function TrackerGallery({ prefix, captions }) {
  return (
    <section className="gallery-section" data-screen-label="Galerie">
      <div className="gallery-strip" data-reveal>
        {captions.map((c, i) =>
        <figure key={c} className={'gallery-item g' + (i + 1)}>
            <image-slot
            id={prefix + '-gal-' + (i + 1)}
            shape="rounded"
            radius="20"
            placeholder={'Foto: ' + c}>
          </image-slot>
            <figcaption>{c}</figcaption>
          </figure>
        )}
      </div>
    </section>);

}

/* ---------- live map demo ---------- */

function LiveMapDemo({ petName, introText }) {
  const NAME = petName || 'Scully';
  const reduced = useReducedMotion();
  const [fenceOn, setFenceOn] = React.useState(true);
  const [alarm, setAlarm] = React.useState(false);
  const [pinging, setPinging] = React.useState(false);
  const [running, setRunning] = React.useState(true);
  const [liveMode, setLiveMode] = React.useState(true);
  const [fence, setFence] = React.useState({ x: 44, y: 56, r: 26 });
  const [stats, setStats] = React.useState({ speed: '0,0', lat: '47.39210', lng: '8.50884', battery: 98, age: 0 });
  const mapRef = React.useRef(null);
  const dogRef = React.useRef(null);
  const trailRef = React.useRef(null);
  const stateRef = React.useRef({
    seg: 0, t: 0, trail: [], lastTrail: 0,
    disp: { x: 30, y: 62 }, lastJump: 0, prev: { x: 30, y: 62 },
    start: performance.now(), lastStats: 0
  });
  const refs = React.useRef({});
  refs.current = { fenceOn, running, liveMode, fence };

  // waypoints in % of map (x, y) — a stroll around the quartier
  const PATH = [
  [30, 62], [42, 48], [55, 40], [68, 34], [78, 26], [84, 38],
  [74, 50], [62, 58], [52, 70], [38, 76], [26, 72]];

  React.useEffect(() => {
    if (reduced) {
      if (dogRef.current) {
        dogRef.current.style.left = '42%';
        dogRef.current.style.top = '52%';
      }
      return;
    }
    let raf;
    const SPEED = 0.0022;
    const step = () => {
      const s = stateRef.current;
      const R = refs.current;
      if (R.running) {
        s.t += SPEED * 16;
        if (s.t >= 1) { s.t = 0; s.seg = (s.seg + 1) % PATH.length; }
      }
      const a = PATH[s.seg];
      const b = PATH[(s.seg + 1) % PATH.length];
      const tt = s.t * s.t * (3 - 2 * s.t);
      const x = a[0] + (b[0] - a[0]) * tt;
      const y = a[1] + (b[1] - a[1]) * tt;

      // Anzeige-Position: flüssig im Live-Modus, sonst diskrete GPS-Pings alle 2,5 s
      const now = performance.now();
      if (R.liveMode || now - s.lastJump > 2500) {
        s.disp = { x: x, y: y };
        s.lastJump = now;
      }
      if (dogRef.current) {
        dogRef.current.style.left = s.disp.x + '%';
        dogRef.current.style.top = s.disp.y + '%';
      }
      // Positionsverlauf
      if (R.running && now - s.lastTrail > 420) {
        s.lastTrail = now;
        s.trail.push([s.disp.x, s.disp.y]);
        if (s.trail.length > 16) s.trail.shift();
        if (trailRef.current) {
          trailRef.current.innerHTML = s.trail.
          map(([tx, ty], i) =>
          '<span class="trail-dot" style="left:' + tx + '%;top:' + ty +
          '%;opacity:' + ((i + 1) / s.trail.length * 0.55).toFixed(2) + '"></span>').
          join('');
        }
      }
      // Statuswerte ~2× pro Sekunde
      if (now - s.lastStats > 600) {
        const dx0 = x - s.prev.x, dy0 = y - s.prev.y;
        const dist = Math.sqrt(dx0 * dx0 + dy0 * dy0);
        const speed = R.running ? dist / ((now - s.lastStats) / 1000) * 1.9 : 0;
        s.prev = { x: x, y: y };
        s.lastStats = now;
        setStats({
          speed: speed.toFixed(1).replace('.', ','),
          lat: (47.3921 + (56 - y) * 0.00012).toFixed(5),
          lng: (8.50884 + (x - 44) * 0.00018).toFixed(5),
          battery: Math.max(60, Math.round(98 - (now - s.start) / 60000)),
          age: R.liveMode ? 0 : Math.max(0, Math.round((now - s.lastJump) / 1000))
        });
      }
      // Zaun-Prüfung gegen die angezeigte Position
      const dx = s.disp.x - R.fence.x, dy = s.disp.y - R.fence.y;
      setAlarm(R.fenceOn && Math.sqrt(dx * dx + dy * dy) > R.fence.r);
      raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [reduced]);

  // Zaun mit der Maus verschieben
  const startFenceDrag = (e) => {
    e.preventDefault();
    const map = mapRef.current;
    if (!map) return;
    const move = (ev) => {
      const r = map.getBoundingClientRect();
      const nx = Math.min(92, Math.max(8, (ev.clientX - r.left) / r.width * 100));
      const ny = Math.min(90, Math.max(10, (ev.clientY - r.top) / r.height * 100));
      setFence((f) => ({ x: nx, y: ny, r: f.r }));
    };
    const up = () => {
      window.removeEventListener('pointermove', move);
      window.removeEventListener('pointerup', up);
    };
    window.addEventListener('pointermove', move);
    window.addEventListener('pointerup', up);
  };

  const ping = () => {
    setPinging(true);
    setTimeout(() => setPinging(false), 2600);
  };

  return (
    <section className="demo-section" data-screen-label="Live Demo">
      <div className="section-head" data-reveal>
        <p className="kicker">So fühlt sich Tractive an</p>
        <h2>Probieren Sie die Live-Ortung aus</h2>
        <p className="section-sub">
          {introText ||
          'Eine kleine Demo: Scully dreht ihre Runde durchs Quartier. Schalten Sie den virtuellen Zaun ein und beobachten Sie, was passiert, wenn sie die sichere Zone verlässt.'}
        </p>
      </div>

      <div className="demo-map-wrap" data-reveal>
        <div ref={mapRef} className={'demo-map' + (alarm ? ' alarm' : '')}>
          <div className="map-park"></div>
          <div className="map-pond"></div>
          <div className="map-street street-h"></div>
          <div className="map-street street-h street-h2"></div>
          <div className="map-street street-v"></div>
          <div className="map-street street-v street-v2"></div>
          <span className="street-label" style={{ left: '3%', top: '40%' }}>Pfotenweg</span>
          <span className="map-building" style={{ left: '6%', top: '12%', width: '10%', height: '16%' }}></span>
          <span className="map-building" style={{ left: '30%', top: '8%', width: '14%', height: '13%' }}></span>
          <span className="map-building" style={{ left: '8%', top: '58%', width: '9%', height: '14%' }}></span>
          <span className="map-building" style={{ left: '55%', top: '80%', width: '13%', height: '12%' }}></span>
          <span className="map-building" style={{ left: '80%', top: '62%', width: '10%', height: '15%' }}></span>
          <span className="map-tree" style={{ left: '25%', top: '30%' }}></span>
          <span className="map-tree" style={{ left: '47%', top: '22%' }}></span>
          <span className="map-tree" style={{ left: '91%', top: '52%' }}></span>
          <span className="map-tree" style={{ left: '35%', top: '88%' }}></span>

          {fenceOn ?
          <div
            className={'map-fence draggable' + (alarm ? ' breached' : '')}
            onPointerDown={startFenceDrag}
            title="Zaun verschieben"
            style={{
              left: fence.x + '%', top: fence.y + '%',
              width: fence.r * 2 + '%', paddingBottom: fence.r * 2 + '%'
            }}>
          </div> :
          null}

          <div className="map-home" style={{ left: fence.x + '%', top: fence.y + '%' }}>
            <span className="home-square"></span>
            <span className="map-label">Zuhause</span>
          </div>

          <div ref={trailRef} className="map-trail"></div>

          <div ref={dogRef} className={'map-dog' + (pinging ? ' pinging' : '')}>
            <span className={'acc-ring' + (liveMode ? '' : ' wide')}></span>
            <span className="dog-dot">
              <PawMark size={14} color="#fff"></PawMark>
            </span>
            <span className="map-label">{NAME} · {liveMode ? 'live' : 'GPS'}</span>
          </div>

          {alarm ?
          <div className="map-alert">
              <span className="alert-dot"></span>
              Weglaufalarm! {NAME} hat die sichere Zone verlassen.
            </div> :
          null}
        </div>

        <div className="map-stats">
          <span className="stat-chip"><strong>{stats.speed}</strong>&nbsp;km/h</span>
          <span className="stat-chip">{stats.lat}° N, {stats.lng}° O</span>
          <span className="stat-chip">Akku&nbsp;<strong>{stats.battery} %</strong></span>
          <span className="stat-chip">{liveMode ? 'Update: live' : 'Update: vor ' + stats.age + ' s'}</span>
        </div>

        <div className="demo-controls">
          <button
            className={'demo-toggle' + (fenceOn ? ' on' : '')}
            onClick={() => setFenceOn(!fenceOn)}>
            <span className="toggle-knob"></span>
            Virtueller Zaun
          </button>
          <button
            className={'demo-toggle' + (liveMode ? ' on' : '')}
            onClick={() => setLiveMode(!liveMode)}>
            <span className="toggle-knob"></span>
            Live-Modus
          </button>
          {fenceOn ?
          <label className="fence-size">
            Zaun-Grösse
            <input
              type="range"
              min="14"
              max="38"
              value={fence.r}
              onChange={(e) => setFence({ x: fence.x, y: fence.y, r: Number(e.target.value) })}>
            </input>
          </label> :
          null}
          <button className="btn btn-ghost demo-btn" onClick={ping}>
            Ton &amp; Licht
          </button>
          <button className="btn btn-ghost demo-btn" onClick={() => setRunning(!running)}>
            {running ? 'Pause' : 'Weiter'}
          </button>
        </div>
        <p className="demo-hint">Tipp: Ziehen Sie den virtuellen Zaun mit der Maus an eine neue Stelle – oder schalten Sie den Live-Modus aus, um echte GPS-Pings im 2,5-Sekunden-Takt zu sehen.</p>
      </div>
    </section>);

}

/* ---------- feature tabs ---------- */

function FeatureTabs() {
  const [tab, setTab] = React.useState(0);
  const groups = [
  {
    label: 'Ortung & Sicherheit',
    items: [
    { t: 'Live-Tracking', d: 'Der Standort Ihres Hundes in Echtzeit – im Live-Modus alle paar Sekunden aktualisiert.' },
    { t: 'Virtuelle Zäune', d: 'Sichere Zonen definieren und sofort einen Weglaufalarm erhalten, wenn Ihr Hund sie verlässt.' },
    { t: 'Positionsverlauf', d: 'Zurückgelegte Wege und Lieblingsorte nachvollziehen – mit Premium bis zu 365 Tage zurück.' },
    { t: 'Familienfreigabe', d: 'Mehrere Personen können denselben Tracker in der App mitverfolgen.' }]
  },
  {
    label: 'Gesundheit & Verhalten',
    items: [
    { t: 'Aktivität & Schlaf', d: 'Bewegung und Ruhephasen im Blick – wie ein Fitnesstracker für Ihren Hund.' },
    { t: 'Vitalwerte', d: 'Herz- und Atemfrequenz in Ruhe beobachten und Veränderungen früh erkennen.' },
    { t: 'Gesundheitswarnungen', d: 'Benachrichtigung, wenn sich Aktivität, Schlaf oder Vitalwerte auffällig verändern.' },
    { t: 'Bell- & Kratzverhalten', d: 'Hinweise auf Trennungsangst oder mögliche Hautprobleme – bevor sie gross werden.' }]
  }];

  return (
    <section className="feature-tabs-section" data-screen-label="Funktionen">
      <div className="section-head" data-reveal>
        <p className="kicker">Funktionen</p>
        <h2>Mehr als nur ein GPS-Punkt</h2>
      </div>
      <div className="seg-control" data-reveal role="tablist">
        {groups.map((g, i) =>
        <button
          key={g.label}
          role="tab"
          aria-selected={tab === i}
          className={'seg-btn' + (tab === i ? ' active' : '')}
          onClick={() => setTab(i)}>
            {g.label}
          </button>
        )}
      </div>
      <div className="feature-grid feature-grid-4" data-reveal>
        {groups[tab].items.map((f) =>
        <div key={f.t} className="feature-card">
            <strong>{f.t}</strong>
            <p>{f.d}</p>
          </div>
        )}
      </div>
    </section>);

}

/* ---------- model comparison ---------- */

function ModelPicker() {
  const models = [
  {
    name: 'DOG 6',
    tag: 'Der Klassiker',
    weight: 'Für Hunde ab ca. 4 kg',
    battery: 'Bis zu 14 Tage Akku',
    batteryNote: 'mit Energiesparzonen, sonst bis zu 6 Tage',
    dims: '7,2 × 2,9 × 1,8 cm · ca. 40 g',
    bark: true, scratch: true
  },
  {
    name: 'DOG 6 XL',
    tag: 'Ausdauer-Champion',
    weight: 'Für Hunde ab ca. 20 kg',
    battery: 'Bis zu 6 Wochen Akku',
    batteryNote: 'mit Energiesparzonen, sonst bis zu 20 Tage',
    dims: '8,4 × 4,8 × 2,0 cm · ca. 70 g',
    bark: true, scratch: true
  },
  {
    name: 'DOG XL Adventure',
    tag: 'Für Grosse & Wilde',
    weight: 'Für Hunde ab ca. 25 kg',
    battery: 'Bis zu 30 Tage Akku',
    batteryNote: 'mit Energiesparzonen, sonst bis zu 15 Tage',
    dims: '8,9 × 5,1 × 2,3 cm · ca. 115 g',
    bark: false, scratch: false
  }];

  const [sel, setSel] = React.useState(0);
  const m = models[sel];

  const always = [
  '100 % wasserdicht (IP68)',
  'Bissfestes Glasfasergehäuse',
  'LED-Licht & Signalton',
  'Funktioniert in über 175 Ländern'];

  return (
    <section className="model-section" data-screen-label="Modellvergleich">
      <div className="section-head" data-reveal>
        <p className="kicker">Welcher Tracker passt?</p>
        <h2>Wählen Sie nach Grösse Ihres Hundes</h2>
      </div>
      <div className="seg-control" data-reveal>
        {models.map((mo, i) =>
        <button
          key={mo.name}
          className={'seg-btn' + (sel === i ? ' active' : '')}
          onClick={() => setSel(i)}>
            {mo.name}
          </button>
        )}
      </div>
      <div className="model-card" data-reveal>
        <div className="model-head">
          <div>
            <p className="duo-role">{m.tag}</p>
            <h3>{m.name}</h3>
          </div>
          <a className="btn btn-primary" href={TRACTIVE_LINK}>Bei Tractive ansehen</a>
        </div>
        <div className="model-specs">
          <div className="spec">
            <span className="spec-label">Empfohlen</span>
            <strong>{m.weight}</strong>
          </div>
          <div className="spec">
            <span className="spec-label">Akku</span>
            <strong>{m.battery}</strong>
            <span className="spec-note">{m.batteryNote}</span>
          </div>
          <div className="spec">
            <span className="spec-label">Grösse & Gewicht</span>
            <strong>{m.dims}</strong>
          </div>
          <div className="spec">
            <span className="spec-label">Verhaltens-Monitoring</span>
            <strong>{m.bark ? 'Bellen & Kratzen ✓' : 'Nicht enthalten'}</strong>
          </div>
        </div>
        <div className="model-always">
          {always.map((a) =>
          <span key={a} className="trust-item">
              <span className="trust-dot"></span>{a}
            </span>
          )}
        </div>
        <p className="model-footnote">
          Alle Tracker benötigen ein Tractive-Abo (eingebaute SIM, unbegrenzte
          Reichweite, jederzeit kündbar). Aktuelle Schweizer Preise sehen Sie
          direkt bei Tractive.
        </p>
      </div>
    </section>);

}

/* ---------- FAQ accordion ---------- */

function TractiveFaq() {
  const faqs = [
  {
    q: 'Wie funktioniert der Tractive GPS Tracker?',
    a: 'Wie ein kleines Handy am Halsband: Der Tracker hat eine eingebaute SIM-Karte, ortet Ihren Hund per GPS und schickt den Standort über das Mobilfunknetz an Ihre App.'
  },
  {
    q: 'Welche Reichweite hat der Tracker?',
    a: 'Es gibt keine Distanzgrenze. Solange Mobilfunkabdeckung besteht, sehen Sie den Standort – in über 175 Ländern, auch aus den Ferien.'
  },
  {
    q: 'Warum braucht es ein Abo?',
    a: 'Das Abo deckt die Mobilfunkgebühren der eingebauten SIM-Karte ab – ohne Roaming-Kosten und ohne Distanzlimit. Es ist jederzeit kündbar.'
  },
  {
    q: 'Welcher Tracker passt zu meinem Hund?',
    a: 'Der DOG 6 eignet sich für Hunde ab ca. 4 kg. Für grosse Hunde ab ca. 20 kg gibt es den DOG 6 XL mit deutlich längerer Akkulaufzeit.'
  },
  {
    q: 'Ist der Tracker wasserdicht?',
    a: 'Ja, alle Modelle sind 100 % wasserdicht (IP68) – schwimmen, regnen, durch den Bach toben ist alles kein Problem.'
  },
  {
    q: 'Erkennt Tractive Krankheiten?',
    a: 'Nein. Der Tracker zeigt Veränderungen bei Aktivität, Schlaf und Vitalwerten – ein Frühwarnsystem. Für Diagnosen ist immer die Tierarztpraxis zuständig.'
  }];

  const [open, setOpen] = React.useState(0);

  return (
    <section className="faq-section" data-screen-label="FAQ">
      <div className="section-head" data-reveal>
        <p className="kicker">Häufige Fragen</p>
        <h2>Gut zu wissen</h2>
      </div>
      <div className="faq-list" data-reveal>
        {faqs.map((f, i) =>
        <div key={f.q} className={'faq-item' + (open === i ? ' open' : '')}>
            <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
              {f.q}
              <span className="faq-chevron"></span>
            </button>
            <div className="faq-a">
              <p>{f.a}</p>
            </div>
          </div>
        )}
      </div>
    </section>);

}

/* ---------- page ---------- */

function DogTractiveBody() {
  const stats = [
  '175+ Länder',
  '100 % wasserdicht (IP68)',
  'Bis zu 6 Wochen Akku',
  'Trustpilot 4,7 / 5'];

  return (
    <React.Fragment>
      <div className="trust-bar stat-bar" data-reveal>
        {stats.map((s) =>
        <span key={s} className="trust-item">
            <span className="trust-dot"></span>{s}
          </span>
        )}
      </div>

      <LiveMapDemo></LiveMapDemo>

      <TrackerGallery
        prefix="tractive-dog"
        captions={['Unterwegs im Wald', 'Schwimmen mit Tracker', 'Abenteuer im Schnee']}>
      </TrackerGallery>

      <section className="split-section" data-screen-label="Tracker Foto">
        <div className="split-media" data-reveal>
          <image-slot
            id="tractive-product"
            shape="rounded"
            radius="22"
            placeholder="Foto Tractive Tracker hier ablegen">
          </image-slot>
          <div className="hero-chip gps-chip static-chip">
            <span className="pulse-dot"></span>
            Tractive GPS · Live
          </div>
        </div>
        <div className="split-copy">
          <p className="kicker" data-reveal>Robust gebaut</p>
          <h2 data-reveal>Gemacht für Abenteuer aller Art</h2>
          <div className="feature-list">
            <div className="feature-row" data-reveal>
              <span className="trust-dot"></span>
              <div>
                <strong>100 % wasserdicht</strong>
                <p>IP68-zertifiziert – schwimmt mit, ohne zu murren.</p>
              </div>
            </div>
            <div className="feature-row" data-reveal style={{ transitionDelay: '70ms' }}>
              <span className="trust-dot"></span>
              <div>
                <strong>Bissfestes Glasfasergehäuse</strong>
                <p>Übersteht auch wilde Spielstunden im Hundepark.</p>
              </div>
            </div>
            <div className="feature-row" data-reveal style={{ transitionDelay: '140ms' }}>
              <span className="trust-dot"></span>
              <div>
                <strong>LED-Licht & Signalton</strong>
                <p>Per App aktivierbar – ideal für Nachtspaziergänge.</p>
              </div>
            </div>
            <div className="feature-row" data-reveal style={{ transitionDelay: '210ms' }}>
              <span className="trust-dot"></span>
              <div>
                <strong>USB-C, schnell geladen</strong>
                <p>Klammern befestigen den Tracker sicher am Halsband.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <FeatureTabs></FeatureTabs>

      <ModelPicker></ModelPicker>

      <PageCTA
        title="Nie wieder suchen müssen"
        text="Bestellen Sie Ihren Tractive GPS-Tracker über unseren Partnerlink – kostenloser Versand und 30 Tage Geld-zurück-Garantie inklusive."
        primaryLabel="Bei Tractive bestellen"
        primaryHref={TRACTIVE_LINK}>
      </PageCTA>
    </React.Fragment>);

}

function TractivePageInteractive() {
  const [petType, setPetType] = React.useState('dog');
  const CatBody = window.CatTractiveBody;
  const isDog = petType === 'dog' || !CatBody;

  return (
    <PageShell active="Tractive GPS">
      <PageHero
        kicker="Tractive GPS Tracker"
        title={isDog ? 'Immer wissen, wo Ihr Hund ist' : 'Wissen, wo Ihre Katze streunt'}
        lede={isDog ?
        'Live-Ortung, virtuelle Zäune und smartes Gesundheitstracking – der meistgenutzte GPS-Tracker für Hunde, am Halsband befestigt.' :
        'Live-Ortung, virtuelle Zonen und Gesundheitstracking für Freigänger – federleicht am Katzenhalsband, mit Sollbruchstelle für die Sicherheit.'}>

        <div className="seg-control pet-toggle">
          <button
            className={'seg-btn' + (isDog ? ' active' : '')}
            onClick={() => setPetType('dog')}>
            Für Hunde
          </button>
          <button
            className={'seg-btn' + (!isDog ? ' active' : '')}
            onClick={() => setPetType('cat')}>
            Für Katzen
          </button>
        </div>
        <a className="btn btn-primary btn-lg" href={isDog ? TRACTIVE_LINK : TRACTIVE_CAT_LINK}>
          Bei Tractive bestellen
        </a>
      </PageHero>
      {isDog ? <DogTractiveBody></DogTractiveBody> : <CatBody></CatBody>}
    </PageShell>);

}

window.TractivePage = TractivePageInteractive;
window.LiveMapDemo = LiveMapDemo;
window.TrackerGallery = TrackerGallery;
window.TRACTIVE_CAT_AFFILIATE = TRACTIVE_CAT_LINK;