---
import Base from "../layouts/Base.astro";
const scissors = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><line x1="20" y1="4" x2="8.12" y2="15.88"></line><line x1="14.47" y1="14.48" x2="20" y2="20"></line><line x1="8.12" y1="8.12" x2="12" y2="12"></line></svg>`;
const services = [
  { img: "/img/g4.webp", h: "Damen – Schnitt & Föhnen", p: "Waschen, individueller Schnitt und Styling – abgestimmt auf Haarstruktur und Typ.", price: "ab 42 €", href: "#buchen" },
  { img: "/img/g5.webp", h: "Herren & Barbershop", p: "Präziser Schnitt, saubere Übergänge, Bartpflege und klassische Rasur.", price: "ab 24 €", href: "#buchen" },
  { img: "/img/g1.webp", h: "Coloration & Strähnen", p: "Glanzvolle Farben und feine Strähnen – schonend mit Redken & Paul Mitchell.", price: "ab 59 €", href: "#buchen" },
  { img: "/img/g3.webp", h: "Balayage & Highlights", p: "Natürliche Farbverläufe und sonnige Akzente für mehr Tiefe und Dimension.", price: "ab 89 €", href: "/balayage" },
  { img: "/img/hv.jpg", h: "Haarverlängerung & -verdichtung", p: "Unsere Spezialität: mehr Länge und Fülle, natürlich schön – mit ausführlicher Beratung.", price: "auf Anfrage", href: "/haarverlaengerung", feature: true },
  { img: "/img/g6.webp", h: "Braut & Hochsteckfrisuren", p: "Festliche Stylings für Hochzeit und besondere Anlässe – inkl. Probetermin.", price: "ab 95 €", href: "/braut" },
];
---
<Base>

  <!-- HERO -->
  <section class="hero" id="top">
    <div class="container grid">
      <div>
        <span class="eyebrow"><span class="ln"></span>Ihr Friseur in Tostedt</span>
        <h1>Zeit für schöne Haare.</h1>
        <p class="lead">Persönliche Beratung, präzise Schnitte und moderne Farbtechniken – mitten in Tostedt. Unser 8-köpfiges Meisterteam nimmt sich Zeit für Sie, Ihren Typ und Ihren Alltag.</p>
        <div class="actions">
          <a href="#buchen" class="btn btn-dark">Termin buchen</a>
          <a href="#leistungen" class="btn btn-outline">Unsere Leistungen</a>
        </div>
        <div class="stats">
          <span>Meisterbetrieb seit 2017</span>
          <span class="sep"></span>
          <span>Redken &amp; Paul Mitchell</span>
          <span class="sep"></span>
          <span>Damen · Herren · Kinder</span>
        </div>
      </div>
      <div class="hero-media">
        <img src="/img/hero.webp" alt="Friseur-Team VK Salon in Tostedt" fetchpriority="high" />
        <div class="float-card">
          <span class="ic" set:html={scissors}></span>
          <span style="line-height:1.2"><span style="display:block;font-weight:700;color:var(--ink);font-size:15px">Größtes Team in Tostedt</span><span style="font-size:13px;color:var(--muted)">8 Profis · seit 2017</span></span>
        </div>
      </div>
    </div>
  </section>

  <!-- INFO STRIP -->
  <section class="infostrip">
    <div class="container">
      <div class="grid">
        <div class="col"><h4>Kontakt</h4><p>04182 / 28 89 535<br>info@friseur-team-vk.de</p></div>
        <div class="col"><h4>Öffnungszeiten</h4><p>Di–Sa geöffnet<br>Mi &amp; Fr bis 20 Uhr · Mo geschlossen</p></div>
        <div class="col"><h4>Standort</h4><p>Kastanienallee 1<br>21255 Tostedt</p></div>
      </div>
    </div>
  </section>

  <!-- ABOUT -->
  <section id="ueber" class="section">
    <div class="container split reveal">
      <img class="media" src="/img/salon.webp" alt="Im Salon von Friseur-Team VK" />
      <div>
        <span class="eyebrow"><span class="ln"></span>Warum Friseur-Team VK?</span>
        <h2>Mehr als ein Friseursalon – ein Ort zum Wohlfühlen</h2>
        <p class="bodytext">Bei uns stehen Sie im Mittelpunkt. In heller, ruhiger Atmosphäre beraten wir Sie ehrlich, hören zu und finden gemeinsam Schnitt und Farbe, die wirklich zu Ihnen passen. Unser eingespieltes Team aus acht Profis bildet sich regelmäßig weiter – für Handwerk, das man sieht und fühlt.</p>
        <div class="checks">
          <div class="check"><span class="tick">✓</span>Persönliche Typberatung</div>
          <div class="check"><span class="tick">✓</span>Redken &amp; Paul Mitchell</div>
          <div class="check"><span class="tick">✓</span>Experten für Haarverlängerung</div>
          <div class="check"><span class="tick">✓</span>Damen · Herren · Kinder</div>
        </div>
        <a href="#leistungen" class="btn btn-dark" style="margin-top:34px">Unsere Leistungen</a>
      </div>
    </div>
  </section>

  <!-- SERVICES -->
  <section id="leistungen" class="section bg-soft">
    <div class="container">
      <div class="head-center reveal">
        <span class="eyebrow center"><span class="ln"></span>Unsere Leistungen<span class="ln"></span></span>
        <h2>Alles rund um Ihr Haar</h2>
        <p>Vom klassischen Schnitt bis zur aufwendigen Farbe – alles aus einer Hand, mit Sorgfalt und Zeit.</p>
      </div>
      <div class="svc-grid">
        {services.map((s) => (
          <a href={s.href} class="scard reveal" style={s.feature ? "border-color:var(--accent)" : ""}>
            <div class="imgwrap">
              <img src={s.img} alt={s.h} loading="lazy" />
              <span class="badge" set:html={scissors}></span>
            </div>
            <div class="body">
              <h3>{s.h}</h3>
              <p>{s.p}</p>
              <div class="row">
                <span class="price">{s.price}</span>
                <span class="more">{s.feature || s.href.startsWith("/") ? "Mehr erfahren →" : "Termin →"}</span>
              </div>
            </div>
          </a>
        ))}
      </div>
      <p style="text-align:center;margin-top:26px"><span class="demo-flag">Demo-Richtwerte</span> &nbsp;echte Preise tragen wir gemeinsam ein.</p>
      <div class="center-actions">
        <a href="#buchen" class="btn btn-dark">Termin buchen</a>
        <a href="/treuekarte" class="btn btn-outline">Digitale Treuekarte ansehen</a>
      </div>
    </div>
  </section>

  <!-- DARK CTA BAND -->
  <section class="cta-band">
    <div class="container inner">
      <div>
        <span class="eyebrow">Bereit für einen frischen Look?</span>
        <h2>Vereinbaren Sie jetzt Ihren Termin bei Friseur-Team VK.</h2>
      </div>
      <div style="display:flex;flex-wrap:wrap;gap:14px;align-items:center">
        <a href="#buchen" class="btn btn-light">Termin buchen</a>
        <a href="tel:+4941822889535" class="btn btn-outline" style="border-color:rgba(255,255,255,.35);color:#fff">04182 / 28 89 535</a>
      </div>
    </div>
  </section>

  <!-- TREUEKARTE TEASER -->
  <section class="section" id="treue">
    <div class="container wallet-grid">
      <div class="reveal">
        <span class="eyebrow"><span class="ln"></span>Treuekarte – digital</span>
        <h2 style="margin:16px 0 0;font-size:clamp(28px,3.4vw,42px)">Die Stempelkarte, die man nie vergisst.</h2>
        <p class="bodytext">Die Papier-Stempelkarte – jetzt direkt im Handy. Ein Klick, und die Karte liegt in Apple Wallet oder Google Wallet. Beim Bezahlen einfach zeigen, wir stempeln digital. Optional mit Push, sobald die Karte voll ist.</p>
        <div class="wallet-btns">
          <button class="wbtn" data-wallet> Apple Wallet</button>
          <button class="wbtn g" data-wallet>Google Wallet</button>
          <a href="/treuekarte" class="btn btn-outline btn-sm">So funktioniert's →</a>
        </div>
      </div>
      <div class="reveal">
        <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>

  <!-- BUCHEN -->
  <section class="section bg-dark" id="buchen">
    <div class="container">
      <div class="head-center reveal">
        <span class="eyebrow center" style="color:var(--accent-2)"><span class="ln"></span>Online buchen<span class="ln"></span></span>
        <h2 style="color:#fff">Termin buchen – rund um die Uhr</h2>
        <p style="color:rgba(255,255,255,.7)">In drei Schritten zum Termin. Im Live-System öffnet der Button eure <b style="color:#fff">e-cut Online-Buchung</b> – der Termin landet direkt im e-cut-Kalender, ganz ohne Systemwechsel.</p>
      </div>
      <div class="booker reveal" style="margin-top:42px">
        <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 (bis 20 Uhr)</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:30">18:30</div><div class="slot" data-pick="time" data-val="19:15">19:15</div>
          </div>
        </div>
        <div class="step confirm" data-step="2" style="text-align:center">
          <div class="ok">✓</div>
          <h3 style="text-align:center">Fast geschafft!</h3>
          <p style="color:rgba(255,255,255,.7)">Ihre Anfrage <b style="color:var(--accent-2)" id="sumLine">…</b> geht an den Salon. Sie erhalten die Bestätigung per WhatsApp – und 24 h vorher eine Erinnerung zum Bestätigen oder Absagen.</p>
        </div>
        <div class="book-foot">
          <div class="book-summary">Auswahl: <b id="sumSvc">–</b> · <b id="sumTime">–</b></div>
          <div>
            <button class="btn btn-outline btn-sm" id="backBtn" style="color:#fff;border-color:rgba(255,255,255,.3);display:none">Zurück</button>
            <button class="btn btn-accent btn-sm" id="nextBtn">Weiter</button>
          </div>
        </div>
        <p class="note-line">Demo-Ablauf · im Live-System angebunden an eure e-cut Online-Buchung (Termine direkt im e-cut-Kalender)</p>
      </div>
    </div>
  </section>

  <!-- STANDORT -->
  <section id="standort" class="section">
    <div class="container split rev reveal">
      <div>
        <span class="eyebrow"><span class="ln"></span>Standort</span>
        <h2 id="kontakt">Besuchen Sie uns in Tostedt</h2>
        <p class="bodytext">Mitten im Ort, gut erreichbar und mit Parkplätzen in der Nähe. Rufen Sie an oder schreiben Sie uns – wir finden den passenden Termin für Sie.</p>
        <div class="checks" style="grid-template-columns:1fr 1fr">
          <div><h4 class="eyebrow-label">Adresse</h4><p style="margin-top:8px;color:var(--text)">Kastanienallee 1<br>21255 Tostedt</p></div>
          <div><h4 class="eyebrow-label">Kontakt</h4><p style="margin-top:8px;color:var(--text)">04182 / 28 89 535<br>info@friseur-team-vk.de</p></div>
          <div><h4 class="eyebrow-label">Öffnungszeiten</h4><p style="margin-top:8px;color:var(--text)">Di · Do 9–18 · Mi · Fr 9–20<br>Sa 9–14 Uhr</p></div>
          <div><h4 class="eyebrow-label">Ruhetag</h4><p style="margin-top:8px;color:var(--text)">Montag</p></div>
        </div>
        <div style="margin-top:34px;display:flex;flex-wrap:wrap;gap:14px">
          <a href="tel:+4941822889535" class="btn btn-dark">Jetzt anrufen</a>
          <a href="https://maps.google.com/?q=Kastanienallee+1+21255+Tostedt" target="_blank" rel="noopener" class="btn btn-outline">Route planen</a>
        </div>
      </div>
      <img class="media" src="/img/g2.webp" alt="Friseur-Team VK Tostedt" />
    </div>
  </section>

  <!-- GALERIE + REELS -->
  <section id="galerie" class="section bg-soft">
    <div class="container">
      <div class="head-center reveal">
        <span class="eyebrow center"><span class="ln"></span>Galerie<span class="ln"></span></span>
        <h2>Eindrücke & Ergebnisse</h2>
        <p>Ein Blick in Salon und Handwerk. Bald hier: Ihr eigenes Foto- &amp; Video-Shooting.</p>
      </div>
      <div class="gal reveal">
        <a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener"><img src="/img/g1.webp" alt="Eindruck" loading="lazy" /></a>
        <a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener"><img src="/img/g3.webp" alt="Eindruck" loading="lazy" /></a>
        <a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener"><img src="/img/salon.webp" alt="Eindruck" loading="lazy" /></a>
        <a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener"><img src="/img/g4.webp" alt="Eindruck" loading="lazy" /></a>
        <a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener"><img src="/img/g6.webp" alt="Eindruck" loading="lazy" /></a>
        <a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener"><img src="/img/g5.webp" alt="Eindruck" loading="lazy" /></a>
        <a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener"><img src="/img/hv.jpg" alt="Eindruck" loading="lazy" /></a>
        <a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener"><img src="/img/hero.webp" alt="Eindruck" loading="lazy" /></a>
      </div>

      <div class="reels-head reveal">
        <h3>Reels &amp; Motion · 9:16</h3>
        <span>Hochformat-Content fürs Handy – direkt für Instagram &amp; TikTok.</span>
      </div>
      <div class="reels reveal">
        <figure class="reel"><img src="/img/g1.webp" alt="Reel" loading="lazy" /><span class="lab">Vorher / Nachher</span></figure>
        <figure class="reel"><img src="/img/hero.webp" alt="Reel" loading="lazy" /><span class="lab">Salon-Tour</span></figure>
        <figure class="reel"><img src="/img/g3.webp" alt="Reel" loading="lazy" /><span class="lab">Styling-Clip</span></figure>
        <figure class="reel"><img src="/img/g2.webp" alt="Reel" loading="lazy" /><span class="lab">Behind the Scenes</span></figure>
      </div>
      <div style="text-align:center;margin-top:28px"><span class="demo-flag">Demo · hier laufen später echte 9:16-Clips</span><div style="margin-top:14px"><a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener" class="btn btn-dark">@friseur.team_vk folgen</a></div></div>
    </div>
  </section>

  <!-- FAQ -->
  <section class="section">
    <div class="container">
      <div class="head-center reveal">
        <span class="eyebrow center"><span class="ln"></span>FAQ<span class="ln"></span></span>
        <h2>Häufige Fragen</h2>
      </div>
      <div class="faq reveal">
        <details><summary>Muss ich vorher anrufen?</summary><div class="ans">Nein. Sie können rund um die Uhr online anfragen – auch abends und am Wochenende. Telefonisch erreichen Sie 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 – Haarverlängerung und Haarverdichtung mit ausführlicher Beratung. <a href="/haarverlaengerung" style="color:var(--accent);font-weight:600">Mehr erfahren →</a></div></details>
        <details><summary>Bekomme ich eine Erinnerung an meinen Termin?</summary><div class="ans">Ja. Vor dem Termin erhalten Sie eine Erinnerung – künftig per WhatsApp mit der Möglichkeit, direkt zu bestätigen oder abzusagen.</div></details>
        <details><summary>Wie funktioniert die digitale Treuekarte?</summary><div class="ans">Sie fügen die Karte einmal zu Apple oder Google Wallet hinzu. Bei jedem Besuch stempeln wir digital – der zehnte Schnitt bringt eine Pflege gratis. <a href="/treuekarte" style="color:var(--accent);font-weight:600">So funktioniert's →</a></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>

  <script is:inline>
    let step=0;const picks={svc:null,time:null};
    const steps=document.querySelectorAll('.step'),dots=document.querySelectorAll('.step-dot');
    const nextBtn=document.getElementById('nextBtn'),backBtn=document.getElementById('backBtn');
    const sumSvc=document.getElementById('sumSvc'),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){document.getElementById('sumLine').textContent=`${picks.svc||'Termin'} · Mi ${picks.time||''}`}}
    document.querySelectorAll('[data-pick]').forEach(el=>el.addEventListener('click',()=>{const t=el.dataset.pick;el.parentElement.querySelectorAll('[data-pick]').forEach(x=>x.classList.remove('sel'));el.classList.add('sel');picks[t]=el.dataset.val;if(t==='svc')sumSvc.textContent=picks.svc;if(t==='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){window.__toast('Anfrage gesendet – Demo ✨');return}step++;render()});
    backBtn.addEventListener('click',()=>{if(step>0){step--;render()}});
    render();
  </script>
</Base>
