// Miss-Scully — EMMY & PEPE Gassitaschen (Partner-Sortiment)
// Lädt nach homepage-sections.jsx + subpages-content.jsx.

const GT_AFF =
'?utm_source=ADCELL&utm_medium=Banner&utm_campaign=Standard&bid=434610-95722-&adcref=www-miss-scully-ch.filesusr.com%2F';
const GT_BASE = 'https://www.emmyundpepe.com/collections/gassitaschen';
const GT_CDN = 'https://www.emmyundpepe.com/cdn/shop/files/';

const WAU_TO_GO = [
{ n: 'Neon Pink', img: 'Leckerlitasche_Wau-to-go_Neon-Pink.jpg?v=1780989130', p: 'wau-to-go-neon-pink' },
{ n: 'Cinnamon', img: 'Wau-to-go_Gassitasche_Wau-to-go_Cinnamon.jpg?v=1780912086', p: 'wau-to-go-cinnamon' },
{ n: 'Hazel', img: 'Artikelbild_Gassitasche_Wau-to-Hazel.jpg?v=1780990296', p: 'wau-to-go-hazel' },
{ n: 'Aqua', img: 'Artikelbild_Gassitasche_Wau-to-Aqua.jpg?v=1780989975', p: 'wau-to-go-aqua' },
{ n: 'Magnolia', img: 'Artikelbild_Gassitasche_Wau-to-go_Magnolia.jpg?v=1780993280', p: 'wau-to-go-magnolia' },
{ n: 'Velvet', img: 'Artikelbild_Gassitasche_Wau-to-go_Velvet.jpg?v=1780990787', p: 'wau-to-go-velvet' },
{ n: 'Spirit', img: 'Artikelbild_Gassitasche_Wau-to-go_Spirit.jpg?v=1780992106', p: 'wau-to-go-spirit' },
{ n: 'Lemonade', img: 'Artikelbild_Gassitasche_Wau-to-go_Lemonade.jpg?v=1780993023', p: 'wau-to-go-lemonade' },
{ n: 'Stone', img: 'Artikelbild_Gassitasche_Wau-to-go_Stone.jpg?v=1780991939', p: 'wau-to-go-stone' },
{ n: 'Rosi', img: 'Artikelbild_Gassitasche_Wau-to-go_Dune.jpg?v=1780991499', p: 'wau-to-go-rosi' },
{ n: 'Dahlia', img: 'Artikelbild_Gassitasche_Wau-to-go_Dahlia.jpg?v=1780993551', p: 'wau-to-go-dahlia' },
{ n: 'Watson', img: 'Artikelbild_Gassitasche_Wau-to-go_Watson.jpg?v=1780992508', p: 'wau-to-go-watson' },
{ n: 'Dune', img: 'Artikelbild_Gassitasche_Wau-to-go_Dune.png?v=1780987997', p: 'wau-to-go-dune' },
{ n: 'Heart', img: 'Artikelbild_Gassitasche_Wau-to-go_Heart.jpg?v=1780993871', p: 'wau-to-go-hearth' },
{ n: 'Golden Plum', img: 'Artikelbild_Gassitasche_Wau-to-go_Golden-Plum.jpg?v=1780992857', p: 'wau-to-go-golden-plum' }];

const WAU_PACK = [
{ n: 'Neon Pink', img: 'Artikelbild_Wau-Pack_Gassitasch_Pink_Emmy_Pepe.jpg?v=1780321706', p: 'wau-pack-neon-pink' },
{ n: 'Cinnamon', img: 'Artikelbild_Wau-Pack_Gassitasch_Cinnamon_Emmy_Pepe.png?v=1780556666', p: 'wau-pack-cinnamon' },
{ n: 'Hazel', img: 'Artikelbild_Wau-Pack_Gassitasch_Hazel_Emmy_Pepe.png?v=1780558751', p: 'wau-pack-hazel' },
{ n: 'Aqua', img: 'Artikelbild_Wau-Pack_Gassitasch_Aqua_Emmy_Pepe.png?v=1780555427', p: 'wau-pack-aqua' },
{ n: 'Magnolia', img: 'Artikelbild_Wau-Pack_Gassitasch_Magnolia_Emmy_Pepe.png?v=1780556124', p: 'wau-pack-magnolia' },
{ n: 'Velvet', img: 'Artikelbild_Wau-Pack_Gassitasch_Velvet_Emmy_Pepe.png?v=1780557148', p: 'wau-pack-velvet' },
{ n: 'Spirit', img: 'Artikelbild_Wau-Pack_Gassitasch_Spirit_Emmy_Pepe.png?v=1780558127', p: 'wau-pack-spirit' },
{ n: 'Lemonade', img: 'Artikelbild_Wau-Pack_Gassitasch_Lemonade_Emmy_Pepe.png?v=1780559136', p: 'wau-pack-lemonade' },
{ n: 'Midnight', img: 'Artikelbild_Wau-Pack_Gassitasch_Midnight_Emmy_Pepe.png?v=1780560099', p: 'wau-pack-midnight' },
{ n: 'Stone', img: 'Artikelbild_Wau-Pack_Gassitasch_Stone_Emmy_Pepe.png?v=1780560837', p: 'wau-pack-stone' },
{ n: 'Rosi', img: 'Artikelbild_Wau-Pack_Gassitasch_Rosi_Emmy_Pepe.png?v=1780561234', p: 'wau-pack-rosi' },
{ n: 'Dahlia', img: 'Artikelbild_Wau-Pack_Gassitasch_Dahlia_Emmy_Pepe.png?v=1780561234', p: 'wau-pack-dahlia' },
{ n: 'Watson', img: 'WPWAT-Watson-DreiTeile.jpg?v=1771231191', p: 'wau-pack-watson' },
{ n: 'Dune', img: 'Artikelbild_Wau-Pack_Gassitasch_Dune_Emmy_Pepe.png?v=1780901808', p: 'wau-pack-dune' },
{ n: 'Heart', img: 'Artikelbild_Wau-Pack_Gassitasch_Heart_Emmy_Pepe.png?v=1780901808', p: 'wau-pack-hearth' },
{ n: 'Golden Plum', img: 'Artikelbild_Wau-Pack_Gassitasch_Golden_Plum_Emmy_Pepe.png?v=1780901807', p: 'wau-pack-golden-plum' },
{ n: 'Edle Black', img: 'Artikelbild_Wau-Pack_Gassitasch_Edle_Black_Emmy_Pepe.png?v=1780904735', p: 'wau-pack-edle-black2' }];

function GassitaschenPage() {
  const [model, setModel] = React.useState(0);
  const models = [
  {
    name: 'Wau-to-Go',
    price: '€69,95',
    desc: 'Die kompakte Leckerli- und Gassitasche mit Taugurt – leicht, schnell griffbereit, ideal für die tägliche Runde.',
    items: WAU_TO_GO
  },
  {
    name: 'Wau-Pack',
    price: '€99,95',
    desc: 'Die grosse 2-in-1 Gassi- und Bauchtasche mit abnehmbarer Wau-Pocket und verstellbarem Gurt – Platz für Leckerli, Kotbeutel, Schlüssel und Handy.',
    items: WAU_PACK
  }];

  const m = models[model];

  return (
    <PageShell active="Hundezubehör">
      <PageHero
        kicker="EMMY & PEPE · Gassitaschen"
        title="Alles dabei beim Spaziergang"
        lede="Leckerli, Kotbeutel, Schlüssel und Handy immer griffbereit – in Handarbeit gefertigte Gassitaschen, als kompakte Wau-to-Go oder grosse Wau-Pack.">

        <a className="btn btn-primary btn-lg" href={GT_BASE + GT_AFF}>Komplette Kollektion ansehen</a>
        <a className="btn btn-ghost btn-lg" href="/Hundezubehoer.html">← Zurück zum Zubehör</a>
      </PageHero>

      <section className="product-section" data-screen-label="Gassitaschen Modelle">
        <div className="seg-control" data-reveal>
          {models.map((mo, i) =>
          <button
            key={mo.name}
            className={'seg-btn' + (model === i ? ' active' : '')}
            onClick={() => setModel(i)}>
              {mo.name} · {mo.price}
            </button>
          )}
        </div>
        <div className="section-head" data-reveal>
          <p className="section-sub">{m.desc}</p>
        </div>
        <div className="shop-grid">
          {m.items.map((g, i) =>
          <a
            key={g.p}
            className="shop-card"
            href={GT_BASE + '/products/' + g.p + GT_AFF}
            data-reveal
            style={{ transitionDelay: i % 4 * 40 + 'ms' }}>
              <span className="shop-img">
                <img src={GT_CDN + g.img + '&width=800'} alt={m.name + ' ' + g.n} loading="lazy"></img>
              </span>
              <strong>{m.name} {g.n}</strong>
              <span className="shop-price">{m.price}</span>
            </a>
          )}
        </div>
        <p className="model-footnote shop-note" data-reveal>
          Produktbilder © EMMY &amp; PEPE. Als Partner verlinken wir direkt in
          den offiziellen Shop – Versand aus Deutschland, 30 Tage
          Geld-zurück-Garantie. Preise in Euro.
        </p>
      </section>

      <PageCTA
        title="Unsicher, welche Tasche passt?"
        text="Schreiben Sie uns – wir beraten Sie gerne persönlich."
        primaryLabel="Zur Kollektion"
        primaryHref={GT_BASE + GT_AFF}
        secondaryLabel="E-Mail schreiben"
        secondaryHref="mailto:info@miss-scully.ch?subject=Gassitaschen">
      </PageCTA>
    </PageShell>);

}

window.GassitaschenPage = GassitaschenPage;