@extends('layout')

@section('title', $query ? 'Suche: ' . $query . ' — SoulSize' : 'Suche — SoulSize')
@section('description', 'Durchsuche den SoulSize Ratgeber für Plus-Size Mode.')

@section('content')

    <section class="max-w-7xl mx-auto px-8 py-16">
        <h1 class="font-headline text-4xl md:text-5xl font-bold text-on-surface mb-8">
            @if($query)
                Ergebnisse für „{{ $query }}"
            @else
                Suche
            @endif
        </h1>

        <form action="/suche" method="GET" class="mb-12" role="search">
            <div class="flex gap-3 max-w-xl">
                <label for="search-results" class="sr-only">Artikel durchsuchen</label>
                <input type="search" name="q" id="search-results" value="{{ $query }}" placeholder="Artikel durchsuchen..." minlength="3"
                       @if($query && strlen($query) < 3) aria-describedby="search-error" aria-invalid="true" @endif
                       class="flex-1 bg-surface-container border border-outline-variant/30 rounded-xl px-5 py-3 font-body text-on-surface placeholder:text-outline focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-colors">
                <button type="submit" class="bg-primary-container text-on-primary-container px-6 py-3 rounded-xl font-semibold hover:bg-primary transition-colors">
                    Suchen
                </button>
            </div>
            @if($query && strlen($query) < 3)
                <p id="search-error" role="alert" class="text-error text-sm mt-2">Bitte mindestens 3 Zeichen eingeben.</p>
            @endif
        </form>

        @if($query && strlen($query) >= 3)
            @if($articles instanceof \Illuminate\Pagination\LengthAwarePaginator && $articles->count())
                <p class="text-on-surface-variant text-sm mb-8" role="status" aria-live="polite">{{ $articles->total() }} Artikel gefunden</p>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    @foreach($articles as $article)
                        @php
                            $cat = $article->category;
                            $articleUrl = $cat ? ('/' . ($cat->parent ? $cat->parent->slug . '/' . $cat->slug : $cat->slug) . '/' . $article->slug) : '#';
                        @endphp
                        <a href="{{ $articleUrl }}" class="group no-underline">
                            <article class="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="{{ $article->title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" loading="lazy">
                                    @else
                                        <div class="flex items-center justify-center h-full">
                                            <span class="material-symbols-outlined text-6xl text-outline/30">article</span>
                                        </div>
                                    @endif
                                </div>
                                <div class="p-8">
                                    @if($cat)
                                        <span class="text-[11px] uppercase tracking-widest bg-surface-container-high px-3 py-1 rounded-full text-primary mb-3 inline-block">{{ $cat->name }}</span>
                                    @endif
                                    <h3 class="font-headline text-xl mb-3 text-on-surface group-hover:text-primary transition-colors">{{ $article->title }}</h3>
                                    <p class="text-on-surface-variant text-sm line-clamp-2 leading-relaxed">{{ $article->excerpt }}</p>
                                </div>
                            </article>
                        </a>
                    @endforeach
                </div>
                <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">search_off</span>
                    <p class="font-headline text-xl text-on-surface-variant">Keine Artikel zu „{{ $query }}" gefunden.</p>
                    <p class="text-sm text-outline mt-2">Versuche einen anderen Suchbegriff.</p>
                </div>
            @endif
        @endif
    </section>

@endsection