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

<section id="leistungen" class="section-v2 services-v2" aria-labelledby="services-title">
  <div class="section-heading-v2">
    <p class="eyebrow-v2">Leistungen</p>
    <h2 id="services-title">Alles, was ein guter Salonbesuch braucht.</h2>
    <p>Fokus auf das Wesentliche: Ihr Look, Ihr Typ, Ihr Termin. Details und Wünsche besprechen wir am besten kurz am Telefon.</p>
  </div>

  <div class="services-v2__grid">
    {
      siteContent.services.map((service, index) => (
        <article class="services-v2__card" style={index % 2 === 1 ? "margin-top: 3.5rem;" : undefined}>
          <span class="service-index-v2">{String(index + 1).padStart(2, "0")}</span>
          <h3>{service.title}</h3>
          <p>{service.text}</p>
        </article>
      ))
    }
  </div>
</section>

<style>
  .services-v2 {
    background: var(--v2-bg);
  }

  .services-v2__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2.5rem, 5vw, 5rem);
    margin-top: clamp(3.5rem, 6vw, 6rem);
  }

  .services-v2__card {
    display: grid;
    gap: 0.9rem;
    padding: clamp(2rem, 3.5vw, 3.5rem) clamp(1.5rem, 2.5vw, 2.5rem);
    background: var(--v2-surface);
    border: 1.5px solid var(--v2-hairline);
    border-radius: var(--v2-radius);
    transition: transform 0.4s var(--ease-out-quart), box-shadow 0.4s var(--ease-out-quart);
  }

  .services-v2__card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
  }

  .services-v2__card:nth-child(even) {
    margin-top: 5rem;
  }

  .service-index-v2 {
    color: var(--v2-primary);
    font-family: var(--font-heading);
    font-size: clamp(3.5rem, 7vw, 7rem);
    line-height: 0.82;
    display: block;
    margin-bottom: 0.75rem;
    opacity: 0.85;
  }

  .services-v2__card h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    line-height: 1.05;
    margin: 0;
  }

  .services-v2__card p {
    color: var(--v2-muted);
    line-height: 1.65;
    margin: 0;
    max-width: 36ch;
  }

  @media (max-width: 820px) {
    .services-v2__grid {
      grid-template-columns: 1fr;
    }

    .services-v2__card:nth-child(even) {
      margin-top: 0;
    }
  }
</style>