@extends('layout')

@section('title', 'Kleider-Hub — Plus-Size Kleider für alle Größen | SoulSize')
@section('description', 'Dein zentraler Anlaufpunkt für Plus-Size Kleider: Sommerkleider, Abendkleider, Freizeitkleider und mehr. Kuratierte Empfehlungen ab Größe 44.')

@section('schema')
{!! $pageSchema->toScript() !!}
@endsection

@section('content')

    {{-- Hero --}}
    <section class="relative overflow-hidden mb-20">
        <div class="relative max-w-7xl mx-auto px-8 py-20 md:py-28">
            <div class="mb-6">
                @include('partials.breadcrumbs', ['hubPage' => 'Kleider-Hub'])
            </div>
            <div class="flex items-end justify-between gap-8 flex-wrap">
                <div>
                    <span class="inline-block text-[11px] uppercase tracking-widest text-primary font-semibold mb-4">Hub</span>
                    <h1 class="font-headline text-5xl md:text-6xl font-extrabold text-on-surface tracking-tight mb-4">
                        Kleider-Hub
                    </h1>
                    <p class="font-body text-lg text-on-surface-variant max-w-2xl">
                        Dein zentraler Einstiegspunkt für Plus-Size Kleider: von eleganten Abendkleidern über luftige Sommerkleider bis hin zu stylischen Alltags-Looks — alles kuratiert ab Größe 44.
                    </p>
                </div>
                <a href="{{ url('damen/' . $category->slug) }}" class="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-primary text-on-primary font-semibold text-sm no-underline hover:opacity-90 transition-opacity shrink-0">
                    Alle Kleider entdecken
                    <span class="material-symbols-outlined text-sm" aria-hidden="true">arrow_forward</span>
                </a>
            </div>
        </div>
    </section>

    {{-- Unterkategorie-Karten --}}
    @if($category->children->count())
        <section class="max-w-7xl mx-auto px-8 mb-20" aria-labelledby="subcat-heading">
            <h2 id="subcat-heading" class="font-headline text-2xl font-bold text-on-surface mb-8">Kategorien</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                @php
                    $subcatIcons = [
                        'damen-sommerkleider' => 'wb_sunny',
                        'damen-abendkleider'  => 'star',
                        'damen-freizeitkleider' => 'local_cafe',
                    ];
                @endphp
                @foreach($category->children as $sub)
                    @php
                        $subcatUrl = url('damen/' . $category->slug . '/' . $sub->slug);
                        $icon = $subcatIcons[$sub->slug] ?? 'styler';
                    @endphp
                    <a href="{{ $subcatUrl }}"
                       class="group relative flex flex-col gap-4 p-8 rounded-2xl bg-surface-container hover:bg-surface-container-high transition-colors no-underline">
                        <div class="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center shrink-0">
                            <span class="material-symbols-outlined text-3xl text-primary" aria-hidden="true">{{ $icon }}</span>
                        </div>
                        <div>
                            <h3 class="font-headline text-xl font-bold text-on-surface group-hover:text-primary transition-colors mb-1">
                                {{ $sub->name }}
                            </h3>
                            <p class="text-sm text-on-surface-variant">
                                {{ $sub->articles_count ?? 0 }} {{ ($sub->articles_count ?? 0) === 1 ? 'Artikel' : 'Artikel' }}
                            </p>
                        </div>
                        <span class="absolute top-6 right-6 material-symbols-outlined text-outline/30 group-hover:text-primary/60 transition-colors" aria-hidden="true">arrow_forward</span>
                    </a>
                @endforeach

                {{-- Alle Kleider — Catch-all Karte --}}
                <a href="{{ url('damen/' . $category->slug) }}"
                   class="group relative flex flex-col gap-4 p-8 rounded-2xl border-2 border-dashed border-outline/20 hover:border-primary/40 hover:bg-surface-container transition-colors no-underline">
                    <div class="w-14 h-14 rounded-xl bg-surface-container-high flex items-center justify-center shrink-0">
                        <span class="material-symbols-outlined text-3xl text-outline/50 group-hover:text-primary transition-colors" aria-hidden="true">grid_view</span>
                    </div>
                    <div>
                        <h3 class="font-headline text-xl font-bold text-on-surface-variant group-hover:text-primary transition-colors mb-1">
                            Alle Kleider
                        </h3>
                        <p class="text-sm text-outline">Komplette Übersicht</p>
                    </div>
                </a>
            </div>
        </section>
    @endif

    {{-- Neueste Artikel --}}
    <section class="max-w-7xl mx-auto px-8 pb-32" aria-labelledby="articles-heading">
        <div class="flex items-center justify-between mb-8 flex-wrap gap-4">
            <h2 id="articles-heading" class="font-headline text-2xl font-bold text-on-surface">Neueste Artikel</h2>
            <a href="{{ url('damen/' . $category->slug) }}" class="text-sm text-primary hover:underline font-semibold no-underline">
                Alle ansehen →
            </a>
        </div>

        @if($featuredArticles->count())
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                @foreach($featuredArticles as $article)
                    @php
                        $articleCat = $article->category;
                        if ($articleCat && $articleCat->parent?->parent_id) {
                            $articleUrl = url($articleCat->parent->parent->slug . '/' . $articleCat->parent->slug . '/' . $articleCat->slug . '/' . $article->slug);
                        } elseif ($articleCat && $articleCat->parent_id) {
                            $articleUrl = url($articleCat->parent->slug . '/' . $articleCat->slug . '/' . $article->slug);
                        } else {
                            $articleUrl = url($category->slug . '/' . $article->slug);
                        }
                    @endphp
                    <article class="group relative flex flex-col h-full">
                        <div class="aspect-[4/5] overflow-hidden rounded-lg bg-surface-container mb-6">
                            @if($article->heroImage)
                                <img
                                    src="{{ $article->heroImage }}"
                                    alt="{{ $article->title }}"
                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                                    loading="lazy"
                                >
                            @else
                                <div class="flex flex-col items-center justify-center h-full gap-3 bg-surface-container-high/60" aria-hidden="true">
                                    <span class="material-symbols-outlined text-5xl text-primary/20">styler</span>
                                    <span class="text-xs uppercase tracking-widest text-outline/40 font-semibold">Kleider</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">
                                    {{ $article->category?->name ?? 'Kleider' }}
                                </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>
        @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" aria-hidden="true">styler</span>
                <p class="font-headline text-xl text-on-surface-variant">Artikel folgen bald.</p>
            </div>
        @endif
    </section>

@endsection