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

<section class="final-cta-v2" aria-labelledby="final-cta-title">
  <div class="final-cta-v2__deco" aria-hidden="true"></div>
  <p class="eyebrow-v2">Bereit für den nächsten Schnitt?</p>
  <h2 id="final-cta-title">Kurz anrufen, Termin sichern, sich wohlfühlen.</h2>
  <div class="final-cta-v2__actions">
    <a class="button-link-v2 button-link-v2--light" href={siteContent.cta.primary.href}>
      {siteContent.business.phone.display}
    </a>
  </div>
</section>

<style>
  .final-cta-v2 {
    display: grid;
    gap: 2rem;
    justify-items: start;
    background: var(--v2-surface-dark);
    color: var(--v2-hero-ink);
    padding: clamp(6rem, 12vw, 11rem) clamp(1rem, 5vw, 5rem);
    position: relative;
    overflow: hidden;
  }

  .final-cta-v2__deco {
    position: absolute;
    top: -40%;
    right: -20%;
    width: 60vw;
    height: 60vw;
    border: 2px solid color-mix(in oklch, var(--v2-accent) 15%, transparent);
    border-radius: 50%;
    pointer-events: none;
  }

  .final-cta-v2::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 50% at 80% 120%, color-mix(in oklch, var(--v2-primary) 40%, transparent) 0%, transparent 70%),
      radial-gradient(ellipse 40% 30% at 20% -10%, color-mix(in oklch, var(--v2-accent) 12%, transparent) 0%, transparent 60%);
    pointer-events: none;
  }

  .final-cta-v2 .eyebrow-v2 {
    color: var(--v2-accent);
    position: relative;
    z-index: 2;
  }

  .final-cta-v2 h2 {
    max-width: 14ch;
    position: relative;
    z-index: 2;
    color: var(--v2-hero-ink);
    font-size: clamp(3rem, 7vw, 7rem);
    line-height: 0.92;
  }

  .final-cta-v2__actions {
    border-top: 2px solid color-mix(in oklch, var(--v2-hero-ink) 22%, transparent);
    padding-top: 2rem;
    position: relative;
    z-index: 2;
  }
</style>