---
import "../styles/site.css";
const { title = "Friseur-Team VK · Veronika Sprangel · Friseur in Tostedt", description = "Friseur-Team VK in Tostedt – Schnitt, Farbe, Balayage, Barbershop, Braut & Haarverlängerung. Meisterbetrieb seit 2017, 8-köpfiges Team." } = Astro.props;
const tel = "+4941822889535";
const telDisplay = "04182 / 28 89 535";
---
<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>{title}</title>
  <meta name="description" content={description} />
  <link rel="icon" href="/img/logo.png" />
  <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=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap" rel="stylesheet" />
</head>
<body>

  <div class="topbar">
    <div class="inner">
      <span><span class="dot"></span>Willkommen bei Friseur-Team VK · Ihr Friseur im Herzen von Tostedt</span>
      <span class="right">
        <a href={`tel:${tel}`}>{telDisplay}</a>
        <span class="muted">Di–Sa · Termine nach Vereinbarung</span>
      </span>
    </div>
  </div>

  <header class="header">
    <div class="inner">
      <a href="/" class="brand" aria-label="Friseur-Team VK Startseite">
        <img src="/img/logo.png" alt="Friseur-Team VK Tostedt" height="46" style="height:46px;width:auto" />
      </a>
      <nav class="nav">
        <a href="/#leistungen">Leistungen</a>
        <a href="/haarverlaengerung">Haarverlängerung</a>
        <a href="/braut">Braut</a>
        <a href="/treuekarte">Treuekarte</a>
        <a href="/#kontakt">Kontakt</a>
      </nav>
      <div class="header-cta">
        <a href={`tel:${tel}`} class="tel">{telDisplay}</a>
        <a href="/#buchen" class="btn btn-dark btn-sm">Termin buchen</a>
      </div>
    </div>
  </header>

  <main>
    <slot />
  </main>

  <footer class="footer">
    <div class="container" style="padding-top:clamp(48px,7vw,80px);padding-bottom:clamp(48px,7vw,80px)">
      <div class="grid">
        <div>
          <span style="display:inline-flex;background:#fff;border-radius:12px;padding:10px 14px">
            <img src="/img/logo.png" alt="Friseur-Team VK" height="40" style="height:40px;width:auto" />
          </span>
          <p class="lead">Ihr Meisterbetrieb für schöne Haare in Tostedt – mit Zeit, Handwerk und einem guten Gefühl. Inhaberin: Veronika Sprangel.</p>
          <a class="wa" href={`https://wa.me/${tel.replace('+','')}`} target="_blank" rel="noopener">💬 WhatsApp</a>
        </div>
        <div>
          <h4>Salon</h4>
          <div class="col">
            <a href="/#leistungen">Leistungen</a>
            <a href="/haarverlaengerung">Haarverlängerung</a>
            <a href="/braut">Braut & Event</a>
            <a href="/treuekarte">Treuekarte</a>
            <a href="/#galerie">Galerie</a>
          </div>
        </div>
        <div>
          <h4>Kontakt</h4>
          <div class="col">
            <a href={`tel:${tel}`}>{telDisplay}</a>
            <a href="mailto:info@friseur-team-vk.de">info@friseur-team-vk.de</a>
            <span>Kastanienallee 1</span>
            <span>21255 Tostedt</span>
          </div>
        </div>
        <div>
          <h4>Öffnungszeiten</h4>
          <div class="col">
            <span class="hours-row closed"><span>Montag</span><span>geschlossen</span></span>
            <span class="hours-row"><span>Di · Do</span><span>9–18 Uhr</span></span>
            <span class="hours-row"><span>Mi · Fr</span><span>9–20 Uhr</span></span>
            <span class="hours-row"><span>Samstag</span><span>9–14 Uhr</span></span>
          </div>
        </div>
      </div>
      <div class="bottom">
        <span>© 2026 Friseur-Team VK · Veronika Sprangel · Tostedt</span>
        <div style="display:flex;align-items:center;gap:22px">
          <a href="#">Impressum</a><a href="#">Datenschutz</a>
          <span style="color:#74758a">Demo · Heidrich Digital</span>
        </div>
      </div>
    </div>
  </footer>

  <div class="toast" id="toast">Aktion – im Live-System aktiv ✨</div>
  <script is:inline>
    const io=new IntersectionObserver((es)=>{es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}})},{threshold:.1});
    document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
    window.__toast=(m)=>{const t=document.getElementById('toast');if(!t)return;if(m)t.textContent=m;t.classList.add('show');setTimeout(()=>t.classList.remove('show'),2600)};
    document.querySelectorAll('[data-wallet]').forEach(b=>b.addEventListener('click',()=>window.__toast('Zu Apple/Google Wallet hinzufügen – im Live-System aktiv ✨')));
  </script>
</body>
</html>
