{{--
    Partial: related-articles
    Variablen:
        $relatedArticles  — Collection von Article-Objekten (max. 3 werden dargestellt)
    Verwendung:
        @include('partials.related-articles', ['relatedArticles' => $related])
--}}

@if(isset($relatedArticles) && $relatedArticles->isNotEmpty())
<section
    aria-labelledby="related-articles-heading"
    class="bg-surface-container-lowest py-24"
>
    <div class="max-w-7xl mx-auto px-8">

        {{-- Section Header --}}
        <div class="mb-12">
            <span class="text-primary font-headline text-sm tracking-[0.2em] uppercase mb-4 block">
                Weiterlesen
            </span>
            <h2
                id="related-articles-heading"
                class="text-3xl md:text-4xl font-headline font-bold text-on-surface"
            >
                Das könnte dich auch interessieren
            </h2>
        </div>

        {{-- Card Grid: 1 Spalte Mobile → 3 Spalten Desktop --}}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            @foreach($relatedArticles->take(3) as $relatedArticle)
                @php
                    $cat = $relatedArticle->category;
                    $articleUrl = $cat
                        ? url(($cat->parent?->slug ? $cat->parent->slug . '/' : '') . $cat->slug . '/' . $relatedArticle->slug)
                        : url($relatedArticle->slug);
                @endphp

                <a
                    href="{{ $articleUrl }}"
                    class="group no-underline"
                    aria-label="{{ $relatedArticle->title }}"
                >
                    <article class="bg-surface-container rounded-xl overflow-hidden transition-all duration-500 hover:-translate-y-2 h-full flex flex-col">

                        {{-- Tonal Card Image / Placeholder --}}
                        <div class="h-48 overflow-hidden bg-gradient-to-br from-surface-container-high to-surface-container-low flex items-center justify-center flex-shrink-0" aria-hidden="true">
                            @if($relatedArticle->image)
                                <img
                                    src="{{ $relatedArticle->image }}"
                                    alt=""
                                    class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                                    loading="lazy"
                                    decoding="async"
                                >
                            @else
                                <span class="material-symbols-outlined text-5xl text-outline/30 group-hover:text-primary/40 transition-colors duration-500">
                                    article
                                </span>
                            @endif
                        </div>

                        {{-- Card Body --}}
                        <div class="p-6 flex flex-col flex-1">

                            {{-- Meta Row: Kategorie + Datum + Lesezeit --}}
                            <div class="flex items-center gap-3 mb-3 flex-wrap">
                                @if($relatedArticle->category)
                                    <span class="text-[10px] uppercase tracking-widest bg-surface-container-high px-3 py-1 rounded-full text-primary">
                                        {{ $relatedArticle->category->name }}
                                    </span>
                                @endif

                                @if($relatedArticle->published_at)
                                    <span class="text-[10px] text-on-surface-variant uppercase tracking-widest">
                                        {{ $relatedArticle->published_at->format('d. M Y') }}
                                    </span>
                                @endif

                                @if($relatedArticle->reading_time ?? false)
                                    <span class="text-[10px] text-outline uppercase tracking-widest flex items-center gap-1">
                                        <span class="material-symbols-outlined" style="font-size: 12px" aria-hidden="true">schedule</span>
                                        {{ $relatedArticle->reading_time }}&nbsp;Min.
                                    </span>
                                @endif
                            </div>

                            {{-- Titel --}}
                            <h3 class="font-headline text-lg mb-2 text-on-surface group-hover:text-primary transition-colors leading-snug">
                                {{ $relatedArticle->title }}
                            </h3>

                            {{-- Excerpt --}}
                            @if($relatedArticle->excerpt)
                                <p class="text-on-surface-variant text-sm line-clamp-2 leading-relaxed">
                                    {{ $relatedArticle->excerpt }}
                                </p>
                            @endif

                            {{-- Spacer + Read-More Link --}}
                            <div class="mt-auto pt-4">
                                <span class="inline-flex items-center gap-1 text-primary text-xs font-semibold group-hover:gap-2 transition-all duration-200">
                                    Weiterlesen
                                    <span class="material-symbols-outlined text-sm" aria-hidden="true">arrow_forward</span>
                                </span>
                            </div>
                        </div>

                    </article>
                </a>
            @endforeach
        </div>

    </div>
</section>
@endif