// Miss-Scully — Tractive GPS für Katzen (interaktiv)
// Lädt nach homepage-sections.jsx + subpages-content.jsx + tractive-page.jsx.

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

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

function CatFeatureTabs() {
  const [tab, setTab] = React.useState(0);
  const groups = [
  {
    label: 'Ortung & Revier',
    items: [
    { t: 'Live-Tracking', d: 'Sehen Sie in Echtzeit, wo Ihre Katze gerade unterwegs ist – auch nachts.' },
    { t: 'Virtuelle Zäune', d: 'Sichere Zonen definieren und sofort einen Weglaufalarm erhalten.' },
    { t: 'Revier & Verlauf', d: 'Entdecken Sie die Lieblingsorte und Streifzüge Ihres Freigängers.' },
    { t: 'Familienfreigabe', d: 'Mehrere Personen können denselben Tracker in der App mitverfolgen.' }]
  },
  {
    label: 'Gesundheit & Wohlbefinden',
    items: [
    { t: 'Aktivität & Schlaf', d: 'Bewegung und Ruhephasen im Blick – wie ein Fitnesstracker für Ihre Katze.' },
    { t: 'Vitalwerte', d: 'Herz- und Atemfrequenz in Ruhe beobachten und Veränderungen früh erkennen.' },
    { t: 'Gesundheitswarnungen', d: 'Benachrichtigung, wenn sich Aktivität oder Schlaf auffällig verändern.' },
    { t: 'Wochenrückblick', d: 'Wöchentliche Einblicke ins Wohlbefinden Ihrer Katze.' }]
  }];

  return (
    <section className="feature-tabs-section" data-screen-label="Funktionen Katze">
      <div className="section-head" data-reveal>
        <p className="kicker">Funktionen</p>
        <h2>Wissen, was Ihre Katze treibt</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>);

}

/* ---------- cat model picker ---------- */

function CatModelPicker() {
  const models = [
  {
    name: 'CAT 6 Mini',
    tag: 'Der Neue',
    weight: 'Für Katzen von ca. 3–8 kg',
    battery: 'Bis zu 7 Tage Akku',
    batteryNote: 'mit Energiesparzonen',
    extra: 'Integriertes Sicherheitshalsband · Vitalwerte-Überwachung',
    vitals: true
  },
  {
    name: 'CAT Mini',
    tag: 'Der Bewährte',
    weight: 'Für Katzen ab ca. 3 kg',
    battery: 'Bis zu 5 Tage Akku',
    batteryNote: 'mit Energiesparzonen',
    extra: 'Inkl. Befestigung fürs eigene Halsband',
    vitals: false
  }];

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

  const always = [
  'Federleicht & klein',
  '100 % wasserdicht',
  'LED-Licht & Signalton',
  'Funktioniert in über 175 Ländern'];

  return (
    <section className="model-section" data-screen-label="Modellvergleich Katze">
      <div className="section-head" data-reveal>
        <p className="kicker">Welcher Tracker passt?</p>
        <h2>Wählen Sie nach Grösse Ihrer Katze</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={CAT_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">Besonderheit</span>
            <strong>{m.extra}</strong>
          </div>
          <div className="spec">
            <span className="spec-label">Vitalwerte</span>
            <strong>{m.vitals ? 'Herz- & Atemfrequenz ✓' : '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>);

}

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

function CatTractiveBody() {
  const stats = [
  '175+ Länder',
  '100 % wasserdicht',
  'Federleicht am Halsband',
  '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
        petName="Mimi"
        introText="Eine kleine Demo: Mimi streift durch ihr Revier. Schalten Sie den virtuellen Zaun ein und beobachten Sie, was passiert, wenn sie die sichere Zone verlässt.">
      </LiveMapDemo>

      <TrackerGallery
        prefix="tractive-cat"
        captions={['Freigängerin im Garten', 'Auf Entdeckungstour', 'Entspannt zu Hause']}>
      </TrackerGallery>

      <section className="split-section" data-screen-label="Katzen Tracker Foto">
        <div className="split-media" data-reveal>
          <image-slot
            id="tractive-cat-product"
            shape="rounded"
            radius="22"
            placeholder="Foto Katzen-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>Für Katzen gemacht</p>
          <h2 data-reveal>Klein, leicht und sicher</h2>
          <div className="feature-list">
            <div className="feature-row" data-reveal>
              <span className="trust-dot"></span>
              <div>
                <strong>Federleicht</strong>
                <p>So klein und leicht, dass Ihre Katze ihn kaum bemerkt.</p>
              </div>
            </div>
            <div className="feature-row" data-reveal style={{ transitionDelay: '70ms' }}>
              <span className="trust-dot"></span>
              <div>
                <strong>Sicherheitshalsband</strong>
                <p>Mit Sollbruchstelle – öffnet sich, falls Ihre Katze hängen bleibt.</p>
              </div>
            </div>
            <div className="feature-row" data-reveal style={{ transitionDelay: '140ms' }}>
              <span className="trust-dot"></span>
              <div>
                <strong>100 % wasserdicht</strong>
                <p>Regen und nasse Wiesen sind kein Problem.</p>
              </div>
            </div>
            <div className="feature-row" data-reveal style={{ transitionDelay: '210ms' }}>
              <span className="trust-dot"></span>
              <div>
                <strong>LED & Ton</strong>
                <p>Per App aktivierbar – so finden Sie Ihre Katze auch im Dunkeln.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <CatFeatureTabs></CatFeatureTabs>

      <CatModelPicker></CatModelPicker>

      <PageCTA
        title="Schluss mit Sorgen beim Freigang"
        text="Bestellen Sie den Tractive GPS Tracker für Katzen über unseren Partnerlink – kostenloser Versand und 30 Tage Geld-zurück-Garantie inklusive."
        primaryLabel="Bei Tractive bestellen"
        primaryHref={CAT_LINK}>
      </PageCTA>
    </React.Fragment>);

}

function TractiveCatPage() {
  return (
    <PageShell active="Tractive GPS">
      <PageHero
        kicker="Tractive GPS für Katzen"
        title="Wissen, wo Ihre Katze streunt"
        lede="Live-Ortung, virtuelle Zonen und Gesundheitstracking für Freigänger – federleicht am Katzenhalsband, mit Sollbruchstelle für die Sicherheit.">

        <a className="btn btn-primary btn-lg" href={CAT_LINK}>Bei Tractive bestellen</a>
        <a className="btn btn-ghost btn-lg" href="Tractive GPS.html">Für Hunde →</a>
      </PageHero>
      <CatTractiveBody></CatTractiveBody>
    </PageShell>);

}

window.TractiveCatPage = TractiveCatPage;
window.CatTractiveBody = CatTractiveBody;