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

@section('title', 'Cookie-Richtlinien - Business Portal 24')

@section('content')

    <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 />

        <!-- Hero Section -->
        <section class="relative overflow-hidden text-white py-16 animate-fade-in" style="background: var(--gradient-hero);">
            <div class="container mx-auto px-4 text-center">
                <h1 class="text-4xl md:text-5xl font-bold mb-4 animate-fade-in-up">
                    Cookie-Richtlinien
                </h1>
            </div>
        </section>

        <!-- Content Section -->
        <section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
            <div class="container mx-auto px-4">
                <div class="max-w-4xl mx-auto">
                    <div
                        class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-8 md:p-12 transition-colors duration-200">

                        <div class="mb-8">
                            <h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">Was sind Cookies?</h2>
                            <p class="text-zinc-600 dark:text-zinc-400 mb-4">
                                Cookies sind kleine Textdateien, die auf Ihrem Computer oder mobilen Gerät gespeichert
                                werden, wenn Sie eine Website besuchen.
                                Sie ermöglichen es der Website, Ihr Gerät zu erkennen und bestimmte Informationen über Ihre
                                Nutzung zu speichern.
                            </p>
                            <p class="text-zinc-600 dark:text-zinc-400">
                                Wir verwenden Cookies, um Ihnen ein optimales Nutzungserlebnis zu bieten und unsere Website
                                kontinuierlich zu verbessern.
                            </p>
                        </div>

                        <div class="mb-8">
                            <h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">Welche Cookies verwenden
                                wir?</h2>

                            <div class="mb-6">
                                <h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-3">1. Notwendige
                                    Cookies</h3>
                                <p class="text-zinc-600 dark:text-zinc-400 mb-3">
                                    Diese Cookies sind für den Betrieb der Website unbedingt erforderlich und können nicht
                                    deaktiviert werden.
                                </p>
                                <div class="bg-zinc-50 dark:bg-zinc-950 rounded-lg p-4">
                                    <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-2"><strong>Beispiele:</strong></p>
                                    <ul class="list-disc list-inside text-sm text-zinc-600 dark:text-zinc-400">
                                        <li>Session-Cookies (Anmeldung)</li>
                                        <li>Sicherheits-Cookies (CSRF-Schutz)</li>
                                        <li>Cookie-Einwilligungs-Cookies</li>
                                    </ul>
                                </div>
                            </div>

                            <div class="mb-6">
                                <h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-3">2. Funktionale
                                    Cookies</h3>
                                <p class="text-zinc-600 dark:text-zinc-400 mb-3">
                                    Diese Cookies ermöglichen erweiterte Funktionalitäten und Personalisierung.
                                </p>
                                <div class="bg-zinc-50 dark:bg-zinc-950 rounded-lg p-4">
                                    <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-2"><strong>Beispiele:</strong></p>
                                    <ul class="list-disc list-inside text-sm text-zinc-600 dark:text-zinc-400">
                                        <li>Spracheinstellungen</li>
                                        <li>Dark-Mode-Präferenzen</li>
                                        <li>Gespeicherte Filtereinstellungen</li>
                                    </ul>
                                </div>
                            </div>

                            <div class="mb-6">
                                <h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-3">3. Analytische
                                    Cookies</h3>
                                <p class="text-zinc-600 dark:text-zinc-400 mb-3">
                                    Diese Cookies helfen uns zu verstehen, wie Besucher mit unserer Website interagieren.
                                </p>
                                <div class="bg-zinc-50 dark:bg-zinc-950 rounded-lg p-4">
                                    <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-2"><strong>Dienste:</strong></p>
                                    <ul class="list-disc list-inside text-sm text-zinc-600 dark:text-zinc-400">
                                        <li>Google Analytics (anonymisiert)</li>
                                        <li>Interne Analysetools</li>
                                    </ul>
                                </div>
                            </div>

                            <div class="mb-6">
                                <h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-3">4. Marketing-Cookies
                                </h3>
                                <p class="text-zinc-600 dark:text-zinc-400 mb-3">
                                    Diese Cookies werden verwendet, um Ihnen relevante Werbung anzuzeigen.
                                </p>
                                <div class="bg-zinc-50 dark:bg-zinc-950 rounded-lg p-4">
                                    <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-2"><strong>Beispiele:</strong></p>
                                    <ul class="list-disc list-inside text-sm text-zinc-600 dark:text-zinc-400">
                                        <li>Remarketing-Cookies</li>
                                        <li>Social Media Tracking</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="mb-8">
                            <h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">Cookie-Laufzeiten</h2>
                            <div class="overflow-x-auto">
                                <table class="min-w-full text-sm">
                                    <thead class="bg-zinc-50 dark:bg-zinc-950">
                                        <tr>
                                            <th class="px-4 py-3 text-left text-zinc-900 dark:text-zinc-100">Cookie-Typ</th>
                                            <th class="px-4 py-3 text-left text-zinc-900 dark:text-zinc-100">Laufzeit</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-zinc-200 dark:divide-zinc-800">
                                        <tr>
                                            <td class="px-4 py-3 text-zinc-600 dark:text-zinc-400">Session-Cookies</td>
                                            <td class="px-4 py-3 text-zinc-600 dark:text-zinc-400">Bis zum Schließen des
                                                Browsers</td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-3 text-zinc-600 dark:text-zinc-400">Funktionale Cookies</td>
                                            <td class="px-4 py-3 text-zinc-600 dark:text-zinc-400">1 Jahr</td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-3 text-zinc-600 dark:text-zinc-400">Analytische Cookies</td>
                                            <td class="px-4 py-3 text-zinc-600 dark:text-zinc-400">2 Jahre</td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-3 text-zinc-600 dark:text-zinc-400">Marketing-Cookies</td>
                                            <td class="px-4 py-3 text-zinc-600 dark:text-zinc-400">1 Jahr</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="mb-8">
                            <h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">Wie können Sie Cookies
                                verwalten?</h2>
                            <p class="text-zinc-600 dark:text-zinc-400 mb-4">
                                Sie können Ihre Cookie-Einstellungen jederzeit ändern. Die meisten Browser erlauben es
                                Ihnen:
                            </p>
                            <ul class="list-disc list-inside text-zinc-600 dark:text-zinc-400 mb-4">
                                <li>Cookies anzuzeigen und zu löschen</li>
                                <li>Cookies von Drittanbietern zu blockieren</li>
                                <li>Alle Cookies zu blockieren</li>
                                <li>Cookies beim Schließen des Browsers zu löschen</li>
                            </ul>
                            <p class="text-zinc-600 dark:text-zinc-400 mb-4">
                                Bitte beachten Sie, dass das Deaktivieren von Cookies die Funktionalität unserer Website
                                beeinträchtigen kann.
                            </p>
                        </div>

                        <div class="mb-8">
                            <h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">Weitere Informationen</h2>
                            <p class="text-zinc-600 dark:text-zinc-400 mb-4">
                                Weitere Informationen zum Datenschutz finden Sie in unserer <a href="/datenschutz"
                                    class="text-[var(--color-primary)] hover:underline">Datenschutzerklärung</a>.
                            </p>
                            <p class="text-zinc-600 dark:text-zinc-400">
                                Bei Fragen zu unseren Cookie-Richtlinien kontaktieren Sie uns bitte unter:
                                <a href="mailto:datenschutz@businessportal.de"
                                    class="text-[var(--color-primary)] hover:underline">datenschutz@businessportal.de</a>
                            </p>
                        </div>

                        <div>
                            <p class="text-sm text-zinc-500 dark:text-zinc-500">
                                Stand: Januar 2025
                            </p>
                        </div>

                    </div>
                </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' }};
        }

        [x-cloak] {
            display: none !important;
        }
    </style>
@endpush