@props(['stats' => []])

<section class="max-w-layout mx-auto mt-12 px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 sm:grid-cols-[auto_minmax(0,1fr)_auto] items-start sm:items-center gap-4 sm:gap-7 p-5 sm:p-6 bg-bg-card-warm border border-bg-rule-strong">
        <div class="w-11 h-11 rounded-full flex-shrink-0 bg-white border border-bg-rule-strong flex items-center justify-center text-brand">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <path d="M12 2l9 4v6c0 5-3.5 9-9 10-5.5-1-9-5-9-10V6z" stroke="currentColor" stroke-width="1.6" fill="none" />
                <path d="M8 12l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </div>
        <div class="min-w-0">
            <div class="eyebrow mb-1">{{ __('web.quality.eyebrow') }}</div>
            <div class="text-[13.5px] text-ink leading-[1.5] font-medium">
                {{ __('web.quality.claim') }}
                <span class="text-ink-2 font-normal">
                    {{ __('web.quality.detail') }}
                </span>
            </div>
        </div>
        <a href="{{ route('richtlinien') }}" class="text-[12px] font-semibold text-brand sm:whitespace-nowrap underline underline-offset-[3px] decoration-brand/40 cursor-pointer hover:text-brand-deep hover:decoration-brand transition-colors">
            {{ __('web.quality.guidelines') }} →
        </a>
    </div>
</section>