{{-- 
    Beispiel: Verwendung des CategoryService in einer Einzelkategorie-Seite
    Pfad: resources/views/web/kategorie.blade.php
--}}

@extends('web.layouts.web-master')

@section('title', 'Kategorie - Business Portal 24')

@section('content')

    @php
        use App\Services\CategoryService;

        // Kategorie aus Route-Parameter laden
        $slug = request()->segment(2); // z.B. 'wirtschaft'
        $category = CategoryService::getCategoryBySlug($slug);

        // Wenn Kategorie nicht gefunden, 404
        if (!$category) {
            abort(404);
        }

        // Alle Kategorien für Navigation
        $allCategories = CategoryService::getCategories();

        // Icon- und Farb-Informationen
        $iconPath = CategoryService::getIconPath($category['icon']);
        $gradient = CategoryService::getGradientForColor($category['color']);
        $iconColor = CategoryService::getClassForColor($category['color']);
    @endphp

    <main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950 transition-colors duration-200">
        <livewire:web.burger-menu />
        <livewire:web.header />

        <!-- Category Header -->
        <section class="bg-gradient-to-br {{ $gradient }} py-16">
            <div class="container mx-auto px-4">
                <div class="max-w-4xl mx-auto text-center">
                    <div
                        class="inline-flex items-center justify-center w-20 h-20 bg-white dark:bg-zinc-800 rounded-2xl shadow-lg mb-6">
                        <img src="{{ $iconPath }}" alt="{{ $category['name'] }}" class="h-10 w-10 {{ $iconColor }}">
                    </div>

                    <h1 class="text-4xl md:text-5xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
                        {{ $category['name'] }}
                    </h1>

                    <p class="text-xl text-zinc-700 dark:text-zinc-300 mb-6">
                        {{ $category['description'] }}
                    </p>

                    <div
                        class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 dark:bg-zinc-800/80 rounded-full text-sm font-medium backdrop-blur-sm">
                        <span>{{ $category['count'] }} Mitteilungen</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- Category Navigation -->
        <nav class="sticky top-0 z-40 bg-white dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-800 shadow-sm">
            <div class="container mx-auto px-4">
                <div class="flex items-center gap-4 overflow-x-auto scrollbar-hide py-4">
                    @foreach ($allCategories as $cat)
                        <a href="/kategorie/{{ $cat['slug'] }}"
                            class="flex items-center gap-2 px-4 py-2 rounded-lg whitespace-nowrap transition-colors
                              {{ $cat['slug'] === $category['slug']
                                  ? 'bg-[var(--color-primary)] text-white'
                                  : 'bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700' }}">
                            <img src="{{ CategoryService::getIconPath($cat['icon']) }}" alt="{{ $cat['name'] }}"
                                class="h-4 w-4">
                            <span class="text-sm font-medium">{{ $cat['name'] }}</span>
                        </a>
                    @endforeach
                </div>
            </div>
        </nav>

        <!-- Content Section -->
        <section class="py-12">
            <div class="container mx-auto px-4">
                <x-web.section-header title="Aktuelle Meldungen aus {{ $category['name'] }}"
                    subtitle="Die neuesten Pressemitteilungen dieser Kategorie" size="medium" />

                <!-- Hier würden die Pressemitteilungen angezeigt -->
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {{-- Press releases grid --}}
                </div>
            </div>
        </section>

        <!-- Related Categories -->
        <section class="py-12 bg-zinc-50 dark:bg-zinc-900">
            <div class="container mx-auto px-4">
                <x-web.section-header title="Weitere Kategorien" subtitle="Entdecken Sie auch diese Themenbereiche"
                    size="medium" />

                <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
                    @foreach ($allCategories->take(4) as $cat)
                        @if ($cat['slug'] !== $category['slug'])
                            @php
                                $catIconPath = CategoryService::getIconPath($cat['icon']);
                                $catGradient = CategoryService::getGradientForColor($cat['color']);
                                $catIconColor = CategoryService::getClassForColor($cat['color']);
                            @endphp

                            <a href="/kategorie/{{ $cat['slug'] }}"
                                class="group card-premium hover:card-premium-hover p-4 transition-all">
                                <div class="flex items-center gap-3">
                                    <div
                                        class="w-12 h-12 bg-gradient-to-br {{ $catGradient }} rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
                                        <img src="{{ $catIconPath }}" alt="{{ $cat['name'] }}"
                                            class="h-6 w-6 {{ $catIconColor }}">
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <h4
                                            class="font-semibold text-zinc-900 dark:text-zinc-100 truncate group-hover:text-[var(--color-primary)] transition-colors">
                                            {{ $cat['name'] }}
                                        </h4>
                                        <p class="text-xs text-zinc-500">{{ $cat['count'] }} Mitteilungen</p>
                                    </div>
                                </div>
                            </a>
                        @endif
                    @endforeach
                </div>
            </div>
        </section>

        <livewire:web.footer />
    </main>

@endsection

@push('styles')
    <style>
        :root {
            --color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#cf3628' }};
            --color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#f0834a' }};
        }

        /* Scrollbar für horizontale Navigation verstecken */
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }

        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    </style>
@endpush