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

<section class="trust-v2" aria-labelledby="trust-title">
  <div class="trust-v2__rating">
    <p class="eyebrow-v2">Lokales Vertrauen</p>
    <h2 id="trust-title">{siteContent.reviewSummary.rating}</h2>
    <div class="trust-v2__stars" aria-hidden="true">
      <svg width="28" height="28" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0.5l2.47 5.01L16 6.22l-4 3.9.94 5.5L8 12.88l-4.94 2.6.94-5.5-4-3.9 5.53-.71L8 .5z"/></svg>
      <svg width="28" height="28" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0.5l2.47 5.01L16 6.22l-4 3.9.94 5.5L8 12.88l-4.94 2.6.94-5.5-4-3.9 5.53-.71L8 .5z"/></svg>
      <svg width="28" height="28" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0.5l2.47 5.01L16 6.22l-4 3.9.94 5.5L8 12.88l-4.94 2.6.94-5.5-4-3.9 5.53-.71L8 .5z"/></svg>
      <svg width="28" height="28" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0.5l2.47 5.01L16 6.22l-4 3.9.94 5.5L8 12.88l-4.94 2.6.94-5.5-4-3.9 5.53-.71L8 .5z"/></svg>
      <svg width="28" height="28" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0.5l2.47 5.01L16 6.22l-4 3.9.94 5.5L8 12.88l-4.94 2.6.94-5.5-4-3.9 5.53-.71L8 .5z"/></svg>
    </div>
  </div>
  <p class="trust-v2__copy">
    <strong>{siteContent.reviewSummary.count}</strong>
    <span>{siteContent.reviewSummary.text}</span>
  </p>
</section>

<style>
  .trust-v2 {
    display: grid;
    align-items: center;
    gap: 3rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--v2-primary);
    color: var(--v2-hero-ink);
    padding: clamp(4.5rem, 9vw, 8rem) clamp(1rem, 5vw, 5rem);
    position: relative;
    overflow: hidden;
  }

  .trust-v2::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    width: 50vw;
    height: 50vw;
    border: 2px solid color-mix(in oklch, var(--v2-accent) 25%, transparent);
    border-radius: 50%;
    pointer-events: none;
  }

  .trust-v2::after {
    content: "";
    position: absolute;
    bottom: -30%;
    left: -15%;
    width: 40vw;
    height: 40vw;
    border: 2px solid color-mix(in oklch, var(--v2-accent) 18%, transparent);
    border-radius: 50%;
    pointer-events: none;
  }

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

  .trust-v2 h2 {
    font-family: var(--font-heading);
    font-size: clamp(7rem, 16vw, 15rem);
    line-height: 0.82;
    margin: 0.8rem 0 0;
    position: relative;
    z-index: 2;
    letter-spacing: -0.02em;
  }

  .trust-v2__stars {
    display: flex;
    gap: 0.4rem;
    margin-top: 1.2rem;
    color: var(--v2-accent);
    position: relative;
    z-index: 2;
  }

  .trust-v2__copy {
    display: grid;
    gap: 0.9rem;
    font-size: clamp(1.15rem, 2.1vw, 1.6rem);
    line-height: 1.55;
    max-width: 36ch;
    margin: 0;
    color: color-mix(in oklch, var(--v2-hero-ink) 78%, transparent);
    position: relative;
    z-index: 2;
  }

  .trust-v2__copy strong {
    color: var(--v2-hero-ink);
    font-size: 1.35em;
    font-weight: 700;
  }

  @media (max-width: 820px) {
    .trust-v2 {
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    .trust-v2 h2 {
      font-size: clamp(5.5rem, 20vw, 9rem);
    }

    .trust-v2__stars svg {
      width: 22px;
      height: 22px;
    }
  }
</style>