@extends('layout')

@section('title', $category->name . ' — SoulSize')
@section('description', $category->description ?? 'Plus-Size ' . $category->name . ' Mode bei SoulSize.')

@section('content')

    {{-- Category Hero --}}
    <section class="relative overflow-hidden mb-20">
        @if($category->image)
            <img src="{{ $category->image }}" alt="" class="absolute inset-0 w-full h-full object-cover opacity-30" loading="lazy">
            <div class="absolute inset-0 bg-gradient-to-t from-surface via-surface/80 to-transparent"></div>
        @endif
        <div class="relative max-w-7xl mx-auto px-8 py-20 md:py-32">
            <div class="mb-6">
                @include('partials.breadcrumbs', ['category' => $category])
            </div>
            <h1 class="font-headline text-5xl md:text-6xl font-extrabold text-on-surface mb-6 tracking-tight">{{ $category->name }}</h1>
            @if($category->description)
                <p class="font-body text-lg text-on-surface-variant max-w-2xl">{{ $category->description }}</p>
            @endif
        </div>
        <div class="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-outline-variant to-transparent"></div>
    </section>

    {{-- Subcategory Navigation --}}
    @if($category->children->count())
        <section class="max-w-7xl mx-auto px-8 mb-12">
            <nav aria-label="Unterkategorien" class="flex flex-wrap gap-3">
                <a href="{{ url($category->slug) }}" class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-body font-semibold bg-primary text-on-primary transition-colors no-underline">
                    Alle
                    <span class="text-xs opacity-75">({{ $articles->total() }})</span>
                </a>
                @foreach($category->children as $sub)
                    <a href="{{ url($category->slug . '/' . $sub->slug) }}" class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-body font-semibold bg-surface-container text-on-surface-variant hover:bg-surface-container-high hover:text-primary transition-colors no-underline">
                        {{ $sub->name }}
                        <span class="text-xs opacity-50">({{ $sub->articles()->where('status', 'published')->count() }})</span>
                    </a>
                @endforeach
            </nav>
        </section>
    @endif

    {{-- Articles Grid --}}
    <section class="max-w-7xl mx-auto px-8 pb-32">
        <h2 class="sr-only">Artikel</h2>
        @if($articles->count())
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                @foreach($articles as $article)
                    @php
                        $articleCat = $article->category;
                        if ($articleCat && $articleCat->parent?->parent_id) {
                            // Ebene-3-Kategorie: grandparent/parent/cat/article
                            $articleUrl = url($articleCat->parent->parent->slug . '/' . $articleCat->parent->slug . '/' . $articleCat->slug . '/' . $article->slug);
                        } elseif ($articleCat && $articleCat->parent_id) {
                            // Ebene-2-Kategorie: parent/cat/article
                            $articleUrl = url($articleCat->parent->slug . '/' . $articleCat->slug . '/' . $article->slug);
                        } else {
                            $articleUrl = url($category->slug . '/' . $article->slug);
                        }
                    @endphp
                    <article class="group relative bg-surface-container rounded-xl overflow-hidden transition-all duration-500 hover:-translate-y-2 h-full">
                        <div class="h-56 overflow-hidden bg-gradient-to-br from-surface-container-high to-surface-container-low">
                            @if($article->image)
                                <img src="{{ $article->image }}" alt="" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" loading="lazy" aria-hidden="true">
                            @else
                                <div class="flex items-center justify-center h-full" aria-hidden="true">
                                    <span class="material-symbols-outlined text-6xl text-outline/30 group-hover:text-primary/40 transition-colors duration-500">article</span>
                                </div>
                            @endif
                        </div>
                        <div class="p-8">
                            <div class="flex items-center gap-4 mb-4">
                                <span class="text-[11px] uppercase tracking-widest bg-surface-container-high px-3 py-1 rounded-full text-primary">{{ $category->name }}</span>
                                <span class="text-[11px] text-on-surface-variant uppercase tracking-widest">{{ $article->published_at?->format('d. M Y') }}</span>
                            </div>
                            <h3 class="font-headline text-xl md:text-2xl mb-3 text-on-surface group-hover:text-primary transition-colors">
                                <a href="{{ $articleUrl }}" class="no-underline text-inherit after:absolute after:inset-0">{{ $article->title }}</a>
                            </h3>
                            <p class="text-on-surface-variant text-sm line-clamp-2 leading-relaxed">{{ $article->excerpt }}</p>
                        </div>
                    </article>
                @endforeach
            </div>

            {{-- Pagination --}}
            <div class="mt-16 flex justify-center">
                {{ $articles->links() }}
            </div>
        @else
            <div class="bg-surface-container rounded-xl p-16 text-center">
                <span class="material-symbols-outlined text-6xl text-outline/40 mb-6 block">edit_note</span>
                <p class="font-headline text-xl text-on-surface-variant">Hier kommen bald Artikel.</p>
                <p class="text-sm text-outline mt-2">Schau später nochmal vorbei!</p>
            </div>
        @endif
    </section>

@endsection