---
import Base from '../layouts/Base.astro';
import Pic from '../components/Pic.astro';
import Hours from '../components/Hours.astro';
import Icon from '../components/Icon.astro';
import Rating from '../components/Rating.astro';
import { salon } from '../data/site';
import salonInnen3 from '../assets/img/salon-innen-3.jpg';
---
<Base
  title="Kontakt und Anfahrt"
  description="Friseur-Team VK, Kastanienallee 1, 21255 Tostedt. Telefon 04182 2889535, WhatsApp und E-Mail. Öffnungszeiten Dienstag bis Samstag, Route planen."
  crumbs={[{ name: 'Kontakt', href: '/kontakt' }]}
  bar="kontakt"
>
  <section class="kt">
    <div class="wrap kt__grid">
      <div class="kt__txt">
        <p class="label">Kontakt und Anfahrt</p>
        <h1>So erreichen <em>Sie uns.</em></h1>
        <ul class="kt__ways">
          <li>
            <a href={salon.phoneHref} class="way">
              <Icon name="phone" /><span><span class="way__k">Telefon</span><span class="way__v">{salon.phoneDisplay}</span></span>
            </a>
          </li>
          <li>
            <a href={salon.whatsappHref} rel="noopener" class="way">
              <Icon name="whatsapp" /><span><span class="way__k">WhatsApp</span><span class="way__v">Nachricht schreiben</span></span>
            </a>
          </li>
          <li>
            <a href={`mailto:${salon.email}`} class="way">
              <Icon name="mail" /><span><span class="way__k">E-Mail</span><span class="way__v">{salon.email}</span></span>
            </a>
          </li>
          <li>
            <a href="/anfrage" class="way">
              <Icon name="arrow" /><span><span class="way__k">Für Braut, Farbe, Verlängerung</span><span class="way__v">Anfrage stellen</span></span>
            </a>
          </li>
        </ul>
        <p class="small leise">Termine vergeben wir am Telefon. Wenn wir gerade alle Hände voll zu tun haben, klappt das nicht immer beim ersten Klingeln. Dann schreiben Sie uns gern per WhatsApp.</p>
      </div>
      <div class="kt__info">
        <div class="kt__block">
          <h2 class="label">Adresse</h2>
          <address class="kt__addr">{salon.legalName}<br />{salon.street}<br />{salon.zip} {salon.city}</address>
          <div class="btn-row">
            <a class="btn btn--ghost" href={salon.routeUrl} rel="noopener"><Icon name="pin" />Google Maps</a>
            <a class="btn btn--ghost" href={salon.appleMapsUrl} rel="noopener"><Icon name="pin" />Apple Karten</a>
          </div>
          <p class="small leise">Die Knöpfe öffnen die Route in Ihrer Karten-App. Eine eingebettete Karte gibt es hier bewusst nicht, damit keine Daten an Dritte gehen.</p>
        </div>
        <div class="kt__block">
          <h2 class="label">Öffnungszeiten</h2>
          <Hours />
          <p class="small leise">Stand März 2026, wird vor dem Livegang bestätigt.</p>
        </div>
        <div class="kt__block">
          <h2 class="label">Bewertungen</h2>
          <Rating />
        </div>
      </div>
    </div>
  </section>

  <section class="section--tight">
    <div class="wrap">
      <figure class="kt__img">
        <div class="frame ratio-169">
          <Pic src={salonInnen3} alt="Blick durch den Salon mit Bedienplätzen und dem Aufsteller mit dem Salon-Logo" sizes="(min-width: 84rem) 80rem, 100vw" />
        </div>
        <figcaption>Der Salon von innen</figcaption>
      </figure>
    </div>
  </section>
</Base>

<style>
  .kt { padding-block: var(--s-7) var(--s-8); }
  .kt__grid { display: grid; gap: var(--s-8); }
  .kt__txt { display: grid; gap: var(--s-6); align-content: start; }
  .kt__ways { list-style: none; padding: 0; border-top: 1.5px solid var(--c-anthrazit); }
  .kt__ways li { border-bottom: var(--hair); }
  .way { display: flex; gap: var(--s-4); align-items: center; min-height: 4.5rem; padding-block: var(--s-3); color: var(--c-anthrazit); text-decoration: none; }
  .way > :global(svg) { width: 1.5rem; height: 1.5rem; color: var(--c-petrol); flex: none; }
  .way > span { display: grid; }
  .way__k { font-size: var(--fs-small); color: var(--c-text-leise); }
  .way__v { font-family: var(--font-display); font-size: var(--fs-h4); line-height: 1.25; overflow-wrap: anywhere; }
  .way:hover .way__v { color: var(--c-petrol); }
  .kt__info { display: grid; gap: var(--s-7); align-content: start; }
  .kt__block { display: grid; gap: var(--s-4); justify-items: start; }
  .kt__addr { font-style: normal; font-size: var(--fs-lead); line-height: 1.5; }
  .kt__img { margin: 0; }
  @media (min-width: 60rem) { .kt__grid { grid-template-columns: 1.2fr 1fr; gap: var(--s-9); } .kt__info { padding-top: var(--s-6); } }
</style>