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

@section('title', 'Pressemitteilungen - Presseecho')

@section('content')

    <main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
        <!-- Burger Menu Component -->
        <livewire:web.burger-menu />

        <!-- Header Component -->
        <livewire:web.header />

        <!-- Filter Bar Component -->
        <livewire:web.filter-bar />

        <!-- Hero Banner -->
        <section class="relative overflow-hidden text-white py-12 animate-fade-in" style="background: var(--gradient-hero);">
            <div class="container mx-auto px-4">
                <div class="max-w-4xl">
                    <h1 class="text-3xl md:text-4xl lg:text-5xl text-white/90 font-bold mb-4 animate-fade-in-up">
                        Aktuelle Pressemitteilungen
                    </h1>
                    <p class="text-base md:text-lg text-white/90 animate-fade-in-up animation-delay-200">
                        Die führende Plattform für Unternehmensnachrichten aus Deutschland, Österreich und der Schweiz
                    </p>
                </div>
            </div>
            <!-- Decorative Pattern -->
            <div class="absolute top-0 right-0 opacity-10">
                <svg width="404" height="384" fill="none" viewBox="0 0 404 384">
                    <defs>
                        <pattern id="pattern-hero" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                            <rect x="0" y="0" width="4" height="4" fill="currentColor" />
                        </pattern>
                    </defs>
                    <rect width="404" height="384" fill="url(#pattern-hero)" />
                </svg>
            </div>
        </section>

        <!-- Featured Section -->
        <section
            class="bg-gray-50/50 dark:bg-gray-900/50 border-b border-gray-200 dark:border-gray-800 py-8 transition-colors duration-200">
            <div class="container mx-auto px-4">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
                        <span
                            class="w-1 h-6 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] rounded-full"></span>
                        Top-Meldungen
                    </h2>
                    <span
                        class="text-xs text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-700 px-2 py-1 rounded">Anzeige</span>
                </div>

                <livewire:web.featured-releases />
            </div>
        </section>

        <!-- Main Content Grid -->
        <section class="py-8 bg-white dark:bg-gray-950 transition-colors duration-200">
            <div class="container mx-auto px-4">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-sm font-medium text-gray-600 dark:text-gray-400 flex items-center gap-2">
                        <span class="w-2 h-2 bg-[var(--color-primary)] rounded-full"></span>
                        247 Pressemitteilungen
                    </h2>
                </div>

                <livewire:web.press-releases-grid />

                <!-- Pagination -->
                <nav class="flex justify-center mt-12" aria-label="Seitennummerierung">
                    <div class="flex items-center gap-2">
                        <button
                            class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                            disabled aria-label="Vorherige Seite">
                            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7">
                                </path>
                            </svg>
                        </button>
                        <button
                            class="px-4 py-2 text-sm font-medium text-white rounded-lg shadow-md hover:shadow-lg transition-all"
                            style="background: var(--gradient-hero);" aria-current="page">
                            1
                        </button>
                        <button
                            class="px-4 py-2 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
                            2
                        </button>
                        <button
                            class="px-4 py-2 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
                            3
                        </button>
                        <span class="px-2 text-gray-600 dark:text-gray-400">...</span>
                        <button
                            class="px-4 py-2 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
                            10
                        </button>
                        <button
                            class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
                            aria-label="Nächste Seite">
                            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7">
                                </path>
                            </svg>
                        </button>
                    </div>
                </nav>
            </div>
        </section>

        <!-- Footer Component -->
        <livewire:web.footer />
    </main>

@endsection

@push('styles')
    <style>
        /* Domain-spezifische Color-Variablen für Inline-Styles */
        :root {
            --color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#345636' }};
            --color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#6b8f71' }};
        }

        /* Alpine.js Cloak */
        [x-cloak] {
            display: none !important;
        }
    </style>
@endpush