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

@section('title', 'KI & Innovation - Themendossier - Presseecho')

@section('content')

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

        <!-- Main Navigation -->
        <x-web.main-navigation theme="presseecho" />

        <!-- Breadcrumb -->
        <div class="container mx-auto px-4">
            <x-web.breadcrumb :items="[['label' => 'Themendossiers', 'url' => '/themendossiers'], ['label' => 'KI & Innovation']]" />
        </div>

        <!-- Page Header with Image -->
        <x-web.page-header title="KI & Innovation"
            subtitle="Alle Facetten der künstlichen Intelligenz in Produktion und Logistik"
            image="https://placehold.co/800x600/345636/ffffff?text=KI+Header">
            <x-slot name="meta">
                <div
                    class="inline-flex items-center gap-2 px-3 py-1 bg-white dark:bg-zinc-800 rounded-full text-sm font-medium">
                    <svg class="w-4 h-4 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
                        </path>
                    </svg>
                    <span>42 Artikel</span>
                </div>
            </x-slot>
        </x-web.page-header>

        <!-- Filter Bar -->
        <section class="bg-zinc-50 dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-800 py-4">
            <div class="container mx-auto px-4">
                <div class="flex items-center justify-between gap-4 flex-wrap">
                    <div class="flex items-center gap-4">
                        <span class="text-sm font-medium text-zinc-700 dark:text-zinc-300">Sortieren:</span>
                        <select
                            class="px-4 py-2 border border-zinc-300 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-800 text-sm">
                            <option>Neueste zuerst</option>
                            <option>Älteste zuerst</option>
                            <option>Meistgelesen</option>
                        </select>
                    </div>

                    <div class="flex items-center gap-2">
                        <span class="text-sm text-zinc-600 dark:text-zinc-400">Ansicht:</span>
                        <button class="p-2 rounded bg-[var(--color-primary)] text-white">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z">
                                </path>
                            </svg>
                        </button>
                        <button class="p-2 rounded bg-zinc-200 dark:bg-zinc-700 text-zinc-700 dark:text-zinc-300">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M4 6h16M4 12h16M4 18h16"></path>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <!-- Content Layout -->
        <x-web.content-layout>
            <x-slot name="sidebar">
                <!-- Filter Widget -->
                <x-web.sidebar-widget title="Filter">
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-medium text-sm mb-2">Content-Typ</h4>
                            <div class="space-y-2">
                                @foreach (['Alle', 'Interview', 'Analyse', 'Fachmeldung'] as $type)
                                    <label class="flex items-center gap-2 cursor-pointer">
                                        <input type="checkbox" {{ $type === 'Alle' ? 'checked' : '' }}
                                            class="rounded border-zinc-300">
                                        <span class="text-sm">{{ $type }}</span>
                                    </label>
                                @endforeach
                            </div>
                        </div>

                        <div>
                            <h4 class="font-medium text-sm mb-2">Zeitraum</h4>
                            <select
                                class="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-800 text-sm">
                                <option>Letzte 7 Tage</option>
                                <option>Letzter Monat</option>
                                <option>Letztes Jahr</option>
                                <option>Alle</option>
                            </select>
                        </div>
                    </div>
                </x-web.sidebar-widget>

                <!-- Popular Tags -->
                <x-web.sidebar-widget title="Beliebte Themen">
                    <div class="flex flex-wrap gap-2">
                        @foreach (['Machine Learning', 'Deep Learning', 'Automatisierung', 'IoT', 'Big Data', 'Cloud Computing'] as $tag)
                            <a href="#"
                                class="px-3 py-1 text-sm bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 rounded-full hover:bg-[var(--color-primary)] hover:text-white transition-colors">
                                {{ $tag }}
                            </a>
                        @endforeach
                    </div>
                </x-web.sidebar-widget>

                <!-- Newsletter -->
                <x-web.sidebar-widget title="Newsletter">
                    <p class="text-sm mb-4">Bleiben Sie auf dem Laufenden mit unserem wöchentlichen Newsletter.</p>
                    <form class="space-y-3">
                        <input type="email" placeholder="Ihre E-Mail"
                            class="w-full px-4 py-2 border border-zinc-300 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-800 text-sm">
                        <button type="submit" class="w-full btn-primary py-2 text-sm">
                            Anmelden
                        </button>
                    </form>
                </x-web.sidebar-widget>
            </x-slot>

            <!-- Articles Grid -->
            <div class="space-y-8">
                <!-- Featured Article -->
                <article class="card card-hover overflow-hidden group cursor-pointer">
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="relative h-64 md:h-full overflow-hidden bg-zinc-100 dark:bg-zinc-800">
                            <img src="https://placehold.co/800x600/345636/ffffff?text=Featured" alt="Featured"
                                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                            <div class="absolute top-4 left-4">
                                <span class="badge badge-primary shadow-md">Featured</span>
                            </div>
                        </div>
                        <div class="p-6 flex flex-col justify-between">
                            <div>
                                <div class="flex items-center gap-2 text-sm text-zinc-600 dark:text-zinc-400 mb-3">
                                    <span class="badge badge-secondary text-xs">Exklusiv-Interview</span>
                                    <span>•</span>
                                    <time>17. Oktober 2024</time>
                                </div>
                                <h3
                                    class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-3 group-hover:text-[var(--color-primary)] transition-colors">
                                    Die Zukunft der KI im deutschen Mittelstand
                                </h3>
                                <p class="text-zinc-700 dark:text-zinc-300 line-clamp-3">
                                    Im exklusiven Interview spricht Dr. Maria Schmidt über die Chancen und Herausforderungen
                                    der künstlichen Intelligenz für mittelständische Unternehmen.
                                </p>
                            </div>
                            <div class="flex items-center gap-2 mt-4">
                                <div
                                    class="w-10 h-10 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)] flex items-center justify-center text-white font-semibold text-sm">
                                    MS
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-zinc-900 dark:text-zinc-100">Dr. Maria Schmidt</p>
                                    <p class="text-xs text-zinc-600 dark:text-zinc-400">Expertin für KI</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </article>

                <!-- Articles Grid -->
                @php
                    $articles = array_fill(0, 9, [
                        'badge' => 'Analyse',
                        'badgeType' => 'primary',
                        'category' => 'KI & Innovation',
                        'categoryBadgeType' => 'secondary',
                        'date' => '2024-10-16',
                        'dateFormatted' => '16. Okt 2024',
                        'title' => 'KI-Strategien für den Mittelstand',
                        'teaser' => 'Wie mittelständische Unternehmen erfolgreich KI implementieren.',
                        'author' => 'Thomas Müller',
                        'authorInitials' => 'TM',
                        'image' => 'https://placehold.co/600x400/345636/ffffff?text=Article',
                    ]);
                @endphp

                <div class="grid md:grid-cols-2 gap-6">
                    @foreach ($articles as $article)
                        <x-web.article-card :article="$article" />
                    @endforeach
                </div>

                <!-- Pagination -->
                <nav class="flex justify-center mt-12" aria-label="Seitennummerierung">
                    <div class="flex items-center gap-2">
                        <button class="pagination-btn pagination-nav disabled:opacity-50" disabled>
                            <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="pagination-btn pagination-active">1</button>
                        <button class="pagination-btn">2</button>
                        <button class="pagination-btn">3</button>
                        <span class="px-2 text-zinc-600 dark:text-zinc-400">...</span>
                        <button class="pagination-btn">10</button>
                        <button class="pagination-btn pagination-nav">
                            <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>
        </x-web.content-layout>

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

@endsection

@push('styles')
    <style>
        :root {
            --color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#345636' }};
            --color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#6b8f71' }};
        }
    </style>
@endpush