---
import Base from "../layouts/Base.astro";
---
<Base title="Digitale Treuekarte · Apple & Google Wallet · Friseur-Team VK" description="Die Stempelkarte von Friseur-Team VK – digital in Apple Wallet & Google Wallet. Jeder 10. Schnitt eine Pflege gratis. Nie wieder Karte vergessen.">

  <section class="lp-hero">
    <div class="container grid">
      <div>
        <span class="eyebrow"><span class="ln"></span>Treuekarte – digital</span>
        <h1>Die Stempelkarte, die man nie vergisst.</h1>
        <p class="lead">Ihre Papier-Stempelkarte – jetzt direkt im Handy. Einmal hinzufügen, beim Bezahlen zeigen, wir stempeln digital. Der zehnte Schnitt bringt eine Pflege gratis.</p>
        <div class="wallet-btns">
          <button class="wbtn" data-wallet> Zu Apple Wallet</button>
          <button class="wbtn g" data-wallet>Zu Google Wallet</button>
        </div>
        <p style="margin-top:14px"><span class="demo-flag">Demo</span> &nbsp;im Live-System fügt ein Tap die echte Wallet-Karte hinzu.</p>
      </div>
      <div>
        <div class="pass">
          <div class="ptop"><span class="pbrand">Friseur-Team VK<span class="s">Tostedt</span></span><span class="chip">Treuekarte</span></div>
          <span class="plabel">Ihre Stempel</span>
          <div class="preward">Jeder 10. Schnitt – Pflege gratis 🎁</div>
          <div class="stamps">
            <div class="stamp on">✂</div><div class="stamp on">✂</div><div class="stamp on">✂</div><div class="stamp on">✂</div><div class="stamp on">✂</div>
            <div class="stamp on">✂</div><div class="stamp on">✂</div><div class="stamp">✂</div><div class="stamp">✂</div><div class="stamp">🎁</div>
          </div>
          <div class="pfoot"><span>7 / 10 Stempel</span><span>Kastanienallee 1</span></div>
        </div>
      </div>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <div class="head-center reveal">
        <span class="eyebrow center"><span class="ln"></span>So funktioniert's<span class="ln"></span></span>
        <h2>In drei Schritten zur digitalen Karte</h2>
      </div>
      <div class="how">
        <div class="step reveal"><div class="n">1</div><h4>Hinzufügen</h4><p>Gast scannt einen QR-Code im Salon oder tippt auf der Website – die Karte landet in Apple oder Google Wallet.</p></div>
        <div class="step reveal"><div class="n">2</div><h4>Stempeln</h4><p>Nach jedem Besuch stempeln wir digital. Der Stand aktualisiert sich automatisch auf dem Handy des Gasts.</p></div>
        <div class="step reveal"><div class="n">3</div><h4>Belohnen</h4><p>Ist die Karte voll, gibt's die Prämie – und optional eine Push-Nachricht „Ihre Karte ist voll".</p></div>
      </div>
    </div>
  </section>

  <section class="section bg-soft">
    <div class="container">
      <div class="head-center reveal">
        <span class="eyebrow center"><span class="ln"></span>Vernetzt & self-hosted<span class="ln"></span></span>
        <h2>Karte, Website und Salon – ein System</h2>
        <p>Alles läuft auf eigener Infrastruktur, DSGVO-konform. Kein teurer Drittanbieter pro Karte.</p>
      </div>
      <div class="how">
        <div class="step reveal"><div class="n">🌐</div><h4>Website</h4><p>„Zur Wallet hinzufügen"-Button + QR-Code im Salon erzeugen die Karte für jeden Gast.</p></div>
        <div class="step reveal"><div class="n">🔄</div><h4>Pass-Server</h4><p>Ein kleiner Dienst auf eurem Hetzner-Server erstellt und aktualisiert die Pässe (Apple PassKit + Google Wallet) und schickt Push bei neuem Stempel.</p></div>
        <div class="step reveal"><div class="n">💇‍♀️</div><h4>Salon-Ansicht</h4><p>Veronika stempelt mit einem Tap (Tablet/Handy) – verknüpft mit der Kundenkartei. Optional an die Buchung gekoppelt.</p></div>
      </div>
      <p style="text-align:center;margin-top:28px;color:var(--body);max-width:60ch;margin-left:auto;margin-right:auto">Eine echte Apple-Wallet-Karte wird mit einem Apple-Developer-Zertifikat signiert (einmalige Einrichtung). Danach läuft alles automatisch auf eurer Infrastruktur.</p>
      <div style="text-align:center;margin-top:24px"><a href="/#buchen" class="btn btn-dark">Klingt gut? Termin buchen</a></div>
    </div>
  </section>

</Base>
