---
import Base from '../layouts/Base.astro';
import LoyaltyCard from '../components/LoyaltyCard.astro';
import Faq from '../components/Faq.astro';
import Icon from '../components/Icon.astro';
import { KARTE_START, KARTE_DEMO, salon } from '../data/site';

const wege = [
  { t: 'Apple Wallet', d: 'Auf dem iPhone landet die Karte in der Wallet-App, ohne zusätzliche App. Der Stempelstand aktualisiert sich nach jedem Besuch von selbst.' },
  { t: 'Google Wallet', d: 'Auf Android-Handys genauso: Karte einmal hinzufügen, an der Kasse zeigen, fertig.' },
  { t: 'Web-Karte', d: 'Ein persönlicher Link, der im Browser funktioniert. Auf Wunsch legen Sie ihn als Symbol auf den Startbildschirm.' },
  { t: 'Gedruckte Karte', d: 'Im Visitenkartenformat mit Ihrem persönlichen QR-Code, für alle, die lieber etwas in der Hand haben.' },
];
const faq = [
  { q: 'Was passiert mit meiner Papier-Stempelkarte?', a: 'Sie gilt weiter. Bringen Sie sie beim nächsten Besuch mit, dann übertragen wir Ihre Stempel auf das neue Konto. Verloren geht nichts.' },
  { q: 'Brauche ich dafür eine App?', a: 'Nein. Apple Wallet und Google Wallet sind auf den meisten Handys schon installiert. Ohne Wallet nutzen Sie die Web-Karte oder die gedruckte Karte.' },
  { q: 'Kann ich mehrere Wege gleichzeitig nutzen?', a: 'Ja. Wallet, Web-Karte und gedruckte Karte gehören zu einem Konto. Egal, was Sie an der Kasse zeigen, der Stempel landet am selben Ort.' },
  { q: 'Welche Daten werden gespeichert?', a: 'Für die Karte brauchen wir Ihren Namen und Ihre Stempel. Telefonnummer oder E-Mail sind freiwillig. Nachrichten von uns bekommen Sie nur, wenn Sie das ausdrücklich erlauben, und Sie können die Karte jederzeit löschen lassen.' },
  { q: 'Was bekomme ich für sechs Stempel?', a: 'Beim sechsten Stempel gibt es ein Pflege-Upgrade gratis, zum Beispiel eine intensivere Pflegebehandlung zu Ihrem nächsten Termin.' },
];
const faqSchema = {
  '@context': 'https://schema.org',
  '@type': 'FAQPage',
  mainEntity: faq.map((f) => ({ '@type': 'Question', name: f.q, acceptedAnswer: { '@type': 'Answer', text: f.a } })),
};
---
<Base
  title="Kundenkarte: die digitale Stempelkarte"
  description="Die Kundenkarte vom Friseur-Team VK: Stempel sammeln in Apple Wallet, Google Wallet, als Web-Karte oder gedruckt. Sechs Stempel, ein Pflege-Upgrade gratis. Papierkarten gelten weiter."
  crumbs={[{ name: 'Kundenkarte', href: '/kundenkarte' }]}
  schema={[faqSchema]}
>
  <section class="khero">
    <div class="wrap khero__grid">
      <div class="khero__txt">
        <p class="label">Kundenkarte</p>
        <h1>Sechs Stempel, <em>ein Pflege-Upgrade.</em></h1>
        <p class="lead">Unsere Stempelkarte gibt es jetzt auch digital. Bei jedem Besuch scannen wir Ihre Karte an der Kasse, beim sechsten Stempel ist ein Pflege-Upgrade gratis.</p>
        <div class="btn-row">
          <a class="btn" href={KARTE_START} rel="noopener">Karte holen<Icon name="arrow" /></a>
          <a class="btn btn--ghost" href={KARTE_DEMO} rel="noopener">So sieht’s aus</a>
        </div>
      </div>
      <div class="khero__card">
        <div class="khero__panel" aria-hidden="true"></div>
        <LoyaltyCard stamps={4} />
      </div>
    </div>
  </section>

  <section class="section" aria-labelledby="wege-h">
    <div class="wrap">
      <div class="head">
        <p class="label">Ein Konto, vier Wege</p>
        <h2 id="wege-h">Sie entscheiden, <em>wo die Karte liegt.</em></h2>
      </div>
      <ol class="wege">
        {wege.map((w, i) => (
          <li class="wege__item reveal">
            <span class="wege__n display" aria-hidden="true">{String(i + 1).padStart(2, '0')}</span>
            <h3>{w.t}</h3>
            <p>{w.d}</p>
          </li>
        ))}
      </ol>
    </div>
  </section>

  <section class="section section--nebel" aria-labelledby="so-h">
    <div class="wrap so">
      <div class="head">
        <p class="label">So geht’s</p>
        <h2 id="so-h">Einmal anmelden, <em>dann nur noch zeigen.</em></h2>
      </div>
      <ol class="so__list">
        <li><p><strong>Anmelden.</strong> Am Tresen liegt ein QR-Code. Scannen, Namen eingeben, Weg auswählen. Das geht auch vorab über den Knopf „Karte holen“.</p></li>
        <li><p><strong>Stempeln.</strong> Zeigen Sie die Karte an der Kasse. Wir scannen sie, der Stempel ist sofort da.</p></li>
        <li><p><strong>Einlösen.</strong> Beim sechsten Stempel bekommen Sie Ihr Pflege-Upgrade. Danach beginnt die Karte von vorn.</p></li>
      </ol>
    </div>
  </section>

  <section class="section" aria-labelledby="papier-h">
    <div class="wrap papier">
      <div>
        <p class="label">Papierkarte</p>
        <h2 id="papier-h" class="papier__h">Ihre alte Karte <em>gilt weiter.</em></h2>
      </div>
      <p class="lead">Bringen Sie Ihre Papier-Stempelkarte zum nächsten Termin mit. Wir übertragen die Stempel auf Ihr neues Konto, und Sie sammeln dort weiter.</p>
    </div>
  </section>

  <section class="section--tight" aria-labelledby="ds-h">
    <div class="wrap ds">
      <h2 id="ds-h" class="label">Datenschutz</h2>
      <p>Für die Karte speichern wir nur, was dafür nötig ist: Ihren Namen und Ihre Stempel. Telefonnummer und E-Mail sind freiwillig. Werbung oder Erinnerungen schicken wir nur mit Ihrer ausdrücklichen, getrennten Einwilligung, die Sie jederzeit widerrufen können. Auf Wunsch löschen wir Ihr Konto vollständig. Fragen dazu beantworten wir unter <a href={`mailto:${salon.email}`}>{salon.email}</a>; Details stehen in der <a href="/datenschutz">Datenschutzerklärung</a>.</p>
    </div>
  </section>

  <Faq items={faq} />

  <section class="section--tight kend">
    <div class="wrap kend__in">
      <h2 class="kend__h">Bereit für den ersten Stempel?</h2>
      <div class="btn-row">
        <a class="btn" href={KARTE_START} rel="noopener">Karte holen<Icon name="arrow" /></a>
        <a class="btn btn--ghost" href={KARTE_DEMO} rel="noopener">So sieht’s aus</a>
      </div>
    </div>
  </section>
</Base>

<style>
  .khero { padding-block: var(--s-7) var(--section); overflow: hidden; }
  .khero__grid { display: grid; gap: var(--s-8); align-items: center; }
  .khero__txt { display: grid; gap: var(--s-5); justify-items: start; }
  .khero__txt h1 { max-width: 12ch; }
  .khero__card { position: relative; display: grid; justify-items: center; padding-block: var(--s-7); }
  .khero__panel { position: absolute; inset: 0 10% 0 10%; background: var(--c-petrol); border-radius: var(--arch); }
  .khero__card :global(.lcard) { position: relative; }
  @media (min-width: 60rem) { .khero__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--s-9); } }
  @media (prefers-reduced-motion: no-preference) {
    .khero__card :global(.lcard) { animation: float-in 1s var(--ease-out) both 120ms; }
    @keyframes float-in { from { opacity: 0; transform: translateY(28px) rotate(-2deg); } }
  }
  .wege { list-style: none; padding: 0; margin-top: var(--s-7); display: grid; gap: var(--s-6); }
  @media (min-width: 52rem) { .wege { grid-template-columns: repeat(2, 1fr); gap: var(--s-7) var(--s-8); } }
  .wege__item { border-top: 1.5px solid var(--c-anthrazit); padding-top: var(--s-4); display: grid; gap: var(--s-2); }
  .wege__n { font-style: italic; color: var(--c-petrol); font-size: var(--fs-h4); }
  .wege__item p { max-width: 44ch; }
  .so { display: grid; gap: var(--s-7); }
  @media (min-width: 60rem) { .so { grid-template-columns: 1fr 1.2fr; gap: var(--s-9); } }
  .so__list { padding: 0; list-style: none; counter-reset: s; display: grid; gap: var(--s-5); }
  .so__list li { counter-increment: s; display: grid; grid-template-columns: 3rem 1fr; }
  .so__list li::before { content: counter(s); font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--c-petrol); font-style: italic; }
  .papier { display: grid; gap: var(--s-5); }
  .papier__h { font-size: var(--fs-h2); margin-top: var(--s-3); }
  @media (min-width: 60rem) { .papier { grid-template-columns: 1fr 1fr; gap: var(--s-9); align-items: end; } }
  .ds { max-width: 50rem; display: grid; gap: var(--s-4); }
  .kend__in { display: grid; gap: var(--s-5); justify-items: start; padding-bottom: var(--s-7); }
  .kend__h { font-size: var(--fs-h3); }
</style>