---
import "../styles/global.css";

const services = [
  { ico: "✂️", h: "Damenhaarschnitt", p: "Beratung, Waschen, Schnitt & Styling – abgestimmt auf Haar und Typ.", tag: "Schnitt & Styling" },
  { ico: "🧔", h: "Herren & Barbershop", p: "Klassischer Schnitt, Bartpflege, Konturen und heiße Rasur.", tag: "Barbershop" },
  { ico: "🧒", h: "Kinder", p: "Geduldig, schnell und mit einem Lächeln – der erste Salonbesuch wird schön.", tag: "Familienfreundlich" },
  { ico: "🎨", h: "Balayage & Farbe", p: "Sanfte Übergänge, Foliensträhnen, Glossing – mit Redken & Paul Mitchell.", tag: "Coloration" },
  { ico: "💍", h: "Braut & Event", p: "Probetermin, Hochsteckfrisuren und Styling für euren großen Tag.", tag: "Hochzeitsservice" },
];

const team = [
  { n: "Veronika Sprangel", r: "Inhaberin & Friseurmeisterin", i: "VS" },
  { n: "Iris Winterstein", r: "Stylistin", i: "IW" },
  { n: "Christin Gottschlich", r: "Stylistin", i: "CG" },
  { n: "Marco Gollnast-Heise", r: "Barber & Stylist", i: "MG" },
  { n: "Tina Sahling", r: "Stylistin", i: "TS" },
  { n: "Ella Schizipin", r: "Stylistin", i: "ES" },
  { n: "Fabian Gidom", r: "Auszubildender", i: "FG" },
  { n: "Dennis Sprangel", r: "Organisation", i: "DS" },
];

const hours = [
  { d: "Montag", t: "Geschlossen", closed: true },
  { d: "Dienstag", t: "09:00 – 18:00" },
  { d: "Mittwoch", t: "09:00 – 20:00" },
  { d: "Donnerstag", t: "09:00 – 18:00" },
  { d: "Freitag", t: "09:00 – 20:00" },
  { d: "Samstag", t: "09:00 – 14:00" },
];
---

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Friseur-Team VK · Veronika Sprangel · Friseur in Tostedt</title>
  <meta name="description" content="Friseur-Team VK in Tostedt – euer Salon für Schnitt, Farbe, Balayage, Barbershop, Braut & Haarverlängerung. Online Termin buchen, rund um die Uhr." />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Public+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
</head>
<body>

<header class="nav" id="nav">
  <div class="wrap nav-inner">
    <a href="#top" class="logo">Friseur-Team <b>VK</b></a>
    <nav class="nav-links">
      <a href="#leistungen">Leistungen</a>
      <a href="#team">Team</a>
      <a href="#galerie">Galerie</a>
      <a href="#preise">Preise</a>
      <a href="#kontakt">Kontakt</a>
    </nav>
    <div class="nav-cta">
      <a href="#buchen" class="btn btn-primary">Termin buchen</a>
    </div>
  </div>
</header>

<!-- HERO -->
<section class="hero" id="top">
  <div class="hero-bg"><img src="/img/hero.webp" alt="Friseur-Team VK Salon in Tostedt" fetchpriority="high" /></div>
  <div class="wrap hero-inner">
    <span class="eyebrow">Friseur in Tostedt · seit 2017</span>
    <h1>Mehr als ein Haarschnitt. <em>Euer Salon</em> in Tostedt.</h1>
    <p class="lead">Großes Meisterteam, Premium-Produkte und ein helles Wohlfühl-Ambiente in der Kastanienallee. Von Balayage bis Braut – wir kümmern uns um euren Look.</p>
    <div class="hero-actions">
      <a href="#buchen" class="btn btn-accent">Termin buchen →</a>
      <a href="#leistungen" class="btn btn-ghost" style="color:#fff;border-color:rgba(255,255,255,.4)">Leistungen ansehen</a>
    </div>
    <div class="hero-trust">
      <span>● 8-köpfiges Meisterteam</span>
      <span>● Redken &amp; Paul Mitchell</span>
      <span>● Damen · Herren · Kinder</span>
    </div>
  </div>
</section>

<!-- TRUST STRIP -->
<div class="strip">
  <div class="wrap strip-inner">
    <div><span class="num">2017</span><span class="lbl">seit</span></div>
    <div><span class="num">8</span><span class="lbl">Profis im Team</span></div>
    <div><span class="num">2</span><span class="lbl">Premium-Marken</span></div>
    <div><span class="num">24/7</span><span class="lbl">online buchbar</span></div>
  </div>
</div>

<!-- LEISTUNGEN -->
<section id="leistungen">
  <div class="wrap">
    <div class="sec-head reveal">
      <span class="eyebrow">Leistungen</span>
      <h2>Alles rund um euer Haar – aus einer Hand.</h2>
      <p>Vom schnellen Schnitt bis zum großen Auftritt. Unser Team berät euch ehrlich und findet den Look, der zu euch passt.</p>
    </div>
    <div class="bento">
      <div class="card-svc feature reveal">
        <div>
          <div class="ico">💆‍♀️</div>
          <h3>Haarverlängerung &amp; Haarverdichtung</h3>
          <p>Unser Premium-Segment: mehr Länge, mehr Fülle, natürlich schön. Mit ausführlicher Beratung und hochwertigen Echthaar-Tressen.</p>
        </div>
        <span class="tag">Spezialität des Hauses →</span>
      </div>
      {services.map((s) => (
        <div class="card-svc reveal">
          <div class="ico">{s.ico}</div>
          <h3>{s.h}</h3>
          <p>{s.p}</p>
          <span class="tag">{s.tag}</span>
        </div>
      ))}
    </div>
  </div>
</section>

<!-- GALERIE -->
<section id="galerie" style="background:var(--cream-2)">
  <div class="wrap">
    <div class="sec-head center reveal">
      <span class="eyebrow">Galerie</span>
      <h2>Ergebnisse, die für sich sprechen.</h2>
      <p>Ein Einblick in Salon und Handwerk. Bald hier: euer eigenes Foto-Shooting.</p>
    </div>
    <div class="gallery reveal">
      <figure class="big"><img src="/img/salon.webp" alt="Salon-Ambiente" loading="lazy" /></figure>
      <figure><img src="/img/g1.webp" alt="Coloration" loading="lazy" /></figure>
      <figure class="tall"><img src="/img/g2.webp" alt="Styling" loading="lazy" /></figure>
      <figure><img src="/img/g3.webp" alt="Schnitt" loading="lazy" /></figure>
      <figure><img src="/img/g4.webp" alt="Im Salon" loading="lazy" /></figure>
      <figure><img src="/img/g5.webp" alt="Detail" loading="lazy" /></figure>
    </div>
    <div class="insta-cta reveal">
      <a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener" class="btn btn-ghost">📸 Folgt uns @friseur.team_vk</a>
    </div>
  </div>
</section>

<!-- TEAM -->
<section id="team">
  <div class="wrap">
    <div class="sec-head reveal">
      <span class="eyebrow">Das Team</span>
      <h2>8 Profis. Eine Leidenschaft.</h2>
      <p>Das größte Friseurteam in Tostedt – von der Meisterin bis zum Azubi. <span class="demo-flag">Demo · echte Mitarbeiterfotos folgen</span></p>
    </div>
    <div class="team-grid">
      {team.map((m) => (
        <div class="member reveal">
          <div class="avatar"><span class="ini">{m.i}</span><span class="ph">Foto folgt</span></div>
          <div class="mname">{m.n}</div>
          <div class="mrole">{m.r}</div>
        </div>
      ))}
    </div>
  </div>
</section>

<!-- WALLET / STEMPELKARTE -->
<section class="wallet-sec" id="treue">
  <div class="wrap wallet-layout">
    <div class="reveal">
      <span class="eyebrow">Treuekarte – digital</span>
      <h2 style="font-size:clamp(2rem,4vw,3rem);margin:.8rem 0 1rem">Die Stempelkarte, die man nie vergisst.</h2>
      <p style="color:var(--soft);margin-bottom:1rem">Eure Papier-Stempelkarte – jetzt direkt auf dem Handy. Ein Klick, und die Karte liegt in Apple Wallet oder Google Wallet. Kein Verlieren, kein Suchen. Beim Bezahlen einfach zeigen, wir stempeln digital.</p>
      <p style="color:var(--soft)">Optional mit Push-Nachricht, sobald die Karte voll ist – ein sanfter Grund, wiederzukommen.</p>
      <div class="wallet-btns">
        <button class="wallet-btn" data-wallet>  Zu Apple Wallet</button>
        <button class="wallet-btn g" data-wallet>Zu Google Wallet</button>
      </div>
    </div>
    <div class="reveal">
      <div class="pass">
        <div class="pass-top">
          <span class="pass-brand">Friseur-Team <b>VK</b></span>
          <span class="pass-chip">Treuekarte</span>
        </div>
        <span class="pass-label">Deine Stempel</span>
        <div class="pass-reward">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="pass-foot"><span>7 / 10 Stempel</span><span>Kastanienallee 1, Tostedt</span></div>
      </div>
    </div>
  </div>
</section>

<!-- BUCHEN -->
<section class="book-sec" id="buchen">
  <div class="wrap">
    <div class="sec-head center reveal">
      <span class="eyebrow" style="color:var(--terracotta)">Online buchen</span>
      <h2>Termin buchen – rund um die Uhr.</h2>
      <p>In drei Schritten zum Wunschtermin. Eure Anfrage landet direkt bei euch im Salon – ihr bestätigt wie gewohnt, die Erinnerung läuft automatisch.</p>
    </div>
    <div class="booker reveal">
      <div class="steps-nav">
        <div class="step-dot active" data-dot="0"></div>
        <div class="step-dot" data-dot="1"></div>
        <div class="step-dot" data-dot="2"></div>
      </div>

      <div class="step active" data-step="0">
        <h3>1 · Leistung wählen</h3>
        <div class="opt-grid">
          <div class="opt" data-pick="svc" data-val="Damenschnitt"><span class="o-name">Damenschnitt</span><span class="o-meta">ca. 60 Min</span></div>
          <div class="opt" data-pick="svc" data-val="Herren / Barber"><span class="o-name">Herren / Barber</span><span class="o-meta">ca. 40 Min</span></div>
          <div class="opt" data-pick="svc" data-val="Balayage & Farbe"><span class="o-name">Balayage &amp; Farbe</span><span class="o-meta">ca. 150 Min</span></div>
          <div class="opt" data-pick="svc" data-val="Beratung Verlängerung"><span class="o-name">Beratung Verlängerung</span><span class="o-meta">ca. 30 Min</span></div>
        </div>
      </div>

      <div class="step" data-step="1">
        <h3>2 · Termin wählen</h3>
        <p style="color:rgba(255,255,255,.6);font-size:.85rem;margin-bottom:1rem">Freie Zeiten · Mittwoch</p>
        <div class="slots">
          <div class="slot" data-pick="time" data-val="09:30">09:30</div>
          <div class="slot" data-pick="time" data-val="11:00">11:00</div>
          <div class="slot" data-pick="time" data-val="13:30">13:30</div>
          <div class="slot" data-pick="time" data-val="15:00">15:00</div>
          <div class="slot" data-pick="time" data-val="16:30">16:30</div>
          <div class="slot" data-pick="time" data-val="17:15">17:15</div>
          <div class="slot" data-pick="time" data-val="18:00">18:00</div>
          <div class="slot" data-pick="time" data-val="19:00">19:00</div>
        </div>
      </div>

      <div class="step" data-step="2">
        <div class="confirm-box">
          <div class="ok">✓</div>
          <h3 style="text-align:center">Fast geschafft!</h3>
          <p style="color:rgba(255,255,255,.7)">Eure Anfrage <b style="color:var(--terracotta)" id="sumLine">…</b> geht an den Salon. Ihr bekommt die Bestätigung per WhatsApp – und 24 h vorher eine Erinnerung zum Bestätigen oder Absagen.</p>
        </div>
      </div>

      <div class="book-foot">
        <div class="book-summary">Auswahl: <b id="sumSvc">–</b> · <b id="sumTime">–</b></div>
        <div>
          <button class="btn btn-ghost" id="backBtn" style="color:#fff;border-color:rgba(255,255,255,.3);display:none">Zurück</button>
          <button class="btn btn-accent" id="nextBtn">Weiter</button>
        </div>
      </div>
      <p class="note-line">Demo-Ablauf · echte Buchung später self-hosted (Cal.com) + WhatsApp-Bestätigung</p>
    </div>
  </div>
</section>

<!-- REVIEWS -->
<section id="bewertungen">
  <div class="wrap">
    <div class="sec-head center reveal">
      <span class="eyebrow">Bewertungen</span>
      <h2>Was unsere Gäste sagen.</h2>
      <p><span class="demo-flag">Demo-Texte · später echte Google-Bewertungen</span></p>
    </div>
    <div class="reviews">
      <div class="review reveal"><div class="stars">★★★★★</div><p>„Endlich ein Salon, in dem man sich wohlfühlt. Veronika und ihr Team beraten ehrlich – meine Balayage ist ein Traum."</p><div class="who">— Sandra K.</div></div>
      <div class="review reveal"><div class="stars">★★★★★</div><p>„Mein Sohn war zum ersten Mal entspannt beim Friseur. Schnell, freundlich, total geduldig mit Kindern."</p><div class="who">— Markus T.</div></div>
      <div class="review reveal"><div class="stars">★★★★★</div><p>„Brautstyling war perfekt. Probetermin, alles abgestimmt, am großen Tag hat alles gesessen. Danke!"</p><div class="who">— Lena & Tim</div></div>
    </div>
  </div>
</section>

<!-- PREISE -->
<section id="preise" style="background:var(--cream-2)">
  <div class="wrap">
    <div class="sec-head center reveal">
      <span class="eyebrow">Preise</span>
      <h2>Transparente Richtwerte.</h2>
      <p>Damit ihr wisst, woran ihr seid. Der Endpreis hängt von Haarlänge und Aufwand ab – wir beraten euch vorab.</p>
    </div>
    <div class="price-grid reveal">
      <div class="price-col">
        <h3>✂️ Schnitt &amp; Styling</h3>
        <div class="price-row"><span class="name">Damen – Waschen, Schnitt, Föhnen</span><span class="val">ab 42 €</span></div>
        <div class="price-row"><span class="name">Herren – Schnitt</span><span class="val">ab 24 €</span></div>
        <div class="price-row"><span class="name">Bart / Konturen</span><span class="val">ab 14 €</span></div>
        <div class="price-row"><span class="name">Kinder (bis 12 J.)</span><span class="val">ab 18 €</span></div>
        <div class="price-row"><span class="name">Waschen &amp; Föhnen</span><span class="val">ab 20 €</span></div>
      </div>
      <div class="price-col">
        <h3>🎨 Farbe &amp; Spezial</h3>
        <div class="price-row"><span class="name">Ansatzfarbe</span><span class="val">ab 48 €</span></div>
        <div class="price-row"><span class="name">Foliensträhnen</span><span class="val">ab 75 €</span></div>
        <div class="price-row"><span class="name">Balayage</span><span class="val">ab 120 €</span></div>
        <div class="price-row"><span class="name">Brautstyling <small>inkl. Probetermin</small></span><span class="val">ab 95 €</span></div>
        <div class="price-row"><span class="name">Haarverlängerung <small>nach Beratung</small></span><span class="val">auf Anfrage</span></div>
      </div>
    </div>
    <p class="price-note"><span class="demo-flag">Demo-Richtwerte</span> &nbsp;Echte Preise tragen wir gemeinsam ein.</p>
  </div>
</section>

<!-- FAQ -->
<section id="faq">
  <div class="wrap">
    <div class="sec-head center reveal">
      <span class="eyebrow">FAQ</span>
      <h2>Häufige Fragen.</h2>
    </div>
    <div class="faq reveal">
      <details><summary>Muss ich vorher anrufen?</summary><div class="ans">Nein. Ihr könnt rund um die Uhr online anfragen – auch abends und am Wochenende. Telefonisch erreicht ihr uns natürlich weiterhin zu den Öffnungszeiten.</div></details>
      <details><summary>Welche Produkte verwendet ihr?</summary><div class="ans">Wir arbeiten mit Redken und Paul Mitchell – hochwertige Marken für Schnitt, Pflege und Coloration.</div></details>
      <details><summary>Macht ihr auch Haarverlängerungen?</summary><div class="ans">Ja, das ist eine unserer Spezialitäten. Wir bieten Haarverlängerung und Haarverdichtung mit ausführlicher Beratung an.</div></details>
      <details><summary>Bekomme ich eine Erinnerung an meinen Termin?</summary><div class="ans">Ja. Vor dem Termin erhaltet ihr eine Erinnerung – künftig per WhatsApp mit der Möglichkeit, direkt zu bestätigen oder abzusagen.</div></details>
      <details><summary>Seid ihr auch für Kinder geeignet?</summary><div class="ans">Absolut. Unser Team ist geduldig und familienfreundlich – der erste Friseurbesuch soll Spaß machen.</div></details>
      <details><summary>Wo finde ich euch?</summary><div class="ans">Kastanienallee 1, 21255 Tostedt. Parkmöglichkeiten sind in der Nähe vorhanden.</div></details>
    </div>
  </div>
</section>

<!-- FOOTER / KONTAKT -->
<footer id="kontakt">
  <div class="wrap">
    <div class="foot-grid">
      <div class="foot-col">
        <div class="logo">Friseur-Team <span class="u">VK</span></div>
        <p>Veronika Sprangel<br/>Kastanienallee 1<br/>21255 Tostedt</p>
        <a href="tel:+4941822889535">+49 4182 2889535</a>
        <a href="mailto:info@friseur-team-vk.de">info@friseur-team-vk.de</a>
        <a class="wa-btn" href="https://wa.me/4941822889535" target="_blank" rel="noopener">💬 WhatsApp</a>
      </div>
      <div class="foot-col">
        <h4>Öffnungszeiten</h4>
        {hours.map((h) => (
          <div class={"hours-row" + (h.closed ? " closed" : "")}><span>{h.d}</span><span>{h.t}</span></div>
        ))}
      </div>
      <div class="foot-col">
        <h4>Folgt uns</h4>
        <a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener">Instagram</a>
        <a href="https://www.facebook.com/FriseurTeamVK" target="_blank" rel="noopener">Facebook</a>
        <a href="https://search.google.com/local/writereview?placeid=ChIJoaTlnmahsUcRFbgiyxAG0Fs" target="_blank" rel="noopener">Google bewerten</a>
        <a href="#buchen" class="btn btn-accent" style="margin-top:1rem">Termin buchen →</a>
      </div>
    </div>
    <div class="foot-bottom">
      <span>© 2026 Friseur-Team VK · Veronika Sprangel · Tostedt</span>
      <span><a href="#">Impressum</a> · <a href="#">Datenschutz</a> · Demo-Entwurf von Heidrich Digital</span>
    </div>
  </div>
</footer>

<div class="toast" id="toast">In Apple/Google Wallet hinzufügen – im Live-System aktiv ✨</div>

<script is:inline>
  // nav scroll
  const nav = document.getElementById('nav');
  const onScroll = () => nav.classList.toggle('scrolled', window.scrollY > 40);
  onScroll(); window.addEventListener('scroll', onScroll, { passive: true });

  // reveal
  const io = new IntersectionObserver((es) => {
    es.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
  }, { threshold: 0.12 });
  document.querySelectorAll('.reveal').forEach((el) => io.observe(el));

  // wallet toast
  const toast = document.getElementById('toast');
  document.querySelectorAll('[data-wallet]').forEach((b) => b.addEventListener('click', () => {
    toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 2600);
  }));

  // booking
  let step = 0; const picks = { svc: null, time: null };
  const steps = document.querySelectorAll('.step');
  const dots = document.querySelectorAll('.step-dot');
  const nextBtn = document.getElementById('nextBtn');
  const backBtn = document.getElementById('backBtn');
  const sumSvc = document.getElementById('sumSvc');
  const sumTime = document.getElementById('sumTime');

  function render() {
    steps.forEach((s, i) => s.classList.toggle('active', i === step));
    dots.forEach((d, i) => d.classList.toggle('active', i <= step));
    backBtn.style.display = step === 0 ? 'none' : 'inline-flex';
    nextBtn.textContent = step === 2 ? 'Anfrage senden' : 'Weiter';
    if (step === 2) {
      const line = `${picks.svc || 'Termin'} · Mi ${picks.time || ''}`;
      document.getElementById('sumLine').textContent = line;
    }
  }
  document.querySelectorAll('[data-pick]').forEach((el) => el.addEventListener('click', () => {
    const type = el.dataset.pick;
    el.parentElement.querySelectorAll('[data-pick]').forEach((x) => x.classList.remove('sel'));
    el.classList.add('sel');
    picks[type] = el.dataset.val;
    if (type === 'svc') sumSvc.textContent = picks.svc;
    if (type === 'time') sumTime.textContent = picks.time;
  }));
  nextBtn.addEventListener('click', () => {
    if (step === 0 && !picks.svc) { sumSvc.textContent = 'bitte wählen'; return; }
    if (step === 1 && !picks.time) { sumTime.textContent = 'bitte wählen'; return; }
    if (step === 2) { toast.textContent = 'Anfrage gesendet – Demo ✨'; toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 2600); return; }
    step++; render();
  });
  backBtn.addEventListener('click', () => { if (step > 0) { step--; render(); } });
  render();
</script>

</body>
</html>
