---
import { siteContent } from "@/content/site-content"
---

<section id="zeiten" class="section-v2 hours-v2" aria-labelledby="hours-title">
  <div class="section-heading-v2">
    <p class="eyebrow-v2">Öffnungszeiten</p>
    <h2 id="hours-title">Planbar von Montag bis Samstag.</h2>
    <p>Für Termine bitte kurz anrufen. So lässt sich direkt klären, wann genug Zeit für Beratung, Schnitt oder Farbe frei ist.</p>
  </div>

  <div class="hours-v2__panel">
    {
      siteContent.hours.map((entry) => (
        <div class="hours-v2__row">
          <span>{entry.day}</span>
          <time>{entry.time}</time>
        </div>
      ))
    }
  </div>
</section>

<style>
  .hours-v2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.75fr);
    gap: clamp(3rem, 6vw, 6rem);
    background: var(--v2-surface);
  }

  .hours-v2__panel {
    border-top: 2px solid var(--v2-fg);
    background: color-mix(in oklch, var(--v2-bg) 50%, transparent);
    padding: 0 clamp(0.2rem, 1vw, 0.8rem);
  }

  .hours-v2__row {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    border-bottom: 1.5px solid color-mix(in oklch, var(--v2-fg) 16%, transparent);
    padding: 1.15rem 0;
  }

  .hours-v2__row span {
    font-weight: 800;
  }

  .hours-v2__row time {
    color: var(--v2-muted);
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 820px) {
    .hours-v2 {
      grid-template-columns: 1fr;
    }
  }
</style>