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

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

@section('content')

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

        <!-- Header Component -->
        <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">
                    Kontakt
                </h1>
                <p class="text-xl text-white/90 max-w-2xl mx-auto animate-fade-in-up animation-delay-200">
                    Wir sind für Sie da – per E-Mail, Telefon oder vor Ort in München
                </p>
            </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-kontakt" 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-kontakt)"/>
                </svg>
            </div>
        </section>

        <!-- Contact Methods -->
        <section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
            <div class="container mx-auto px-4">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto mb-16">
                    <!-- Email -->
                    <div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
                        <div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                            </svg>
                        </div>
                        <h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
                            E-Mail
                        </h3>
                        <a href="mailto:info@businessportal.de" class="text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors font-medium block mb-1">
                            info@businessportal.de
                        </a>
                        <p class="text-sm text-zinc-600 dark:text-zinc-400">
                            Antwort innerhalb von 24 Stunden
                        </p>
                    </div>

                    <!-- Phone -->
                    <div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
                        <div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                            </svg>
                        </div>
                        <h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
                            Telefon
                        </h3>
                        <a href="tel:+498912345678" class="text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors font-medium block mb-1">
                            +49 89 1234 5678
                        </a>
                        <p class="text-sm text-zinc-600 dark:text-zinc-400">
                            Mo-Fr 9:00-18:00 Uhr
                        </p>
                    </div>

                    <!-- Address -->
                    <div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
                        <div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            </svg>
                        </div>
                        <h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
                            Adresse
                        </h3>
                        <p class="text-zinc-900 dark:text-zinc-100 font-medium mb-1">
                            Maximilianstraße 35
                        </p>
                        <p class="text-sm text-zinc-600 dark:text-zinc-400">
                            80539 München, Deutschland
                        </p>
                    </div>

                    <!-- Business Hours -->
                    <div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
                        <div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
                            Geschäftszeiten
                        </h3>
                        <p class="text-zinc-900 dark:text-zinc-100 font-medium mb-1">
                            Mo-Fr 9:00-18:00
                        </p>
                        <p class="text-sm text-zinc-600 dark:text-zinc-400">
                            Sa-So geschlossen
                        </p>
                    </div>
                </div>

                <!-- Contact Form & Map -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
                    <!-- Form -->
                    <div>
                        <div class="mb-8">
                            <h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
                                Nachricht senden
                            </h2>
                            <p class="text-zinc-600 dark:text-zinc-400">
                                Haben Sie Fragen oder benötigen Sie Unterstützung? Füllen Sie das Formular aus und wir melden uns schnellstmöglich bei Ihnen.
                            </p>
                        </div>

                        <form class="space-y-6" method="POST" action="/kontakt">
                            @csrf
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div class="space-y-2">
                                    <label for="vorname" class="block text-sm font-medium text-zinc-900 dark:text-zinc-100">
                                        Vorname *
                                    </label>
                                    <input
                                        id="vorname"
                                        name="vorname"
                                        type="text"
                                        placeholder="Max"
                                        required
                                        class="w-full px-4 py-2 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 border border-zinc-300 dark:border-zinc-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
                                    />
                                </div>
                                <div class="space-y-2">
                                    <label for="nachname" class="block text-sm font-medium text-zinc-900 dark:text-zinc-100">
                                        Nachname *
                                    </label>
                                    <input
                                        id="nachname"
                                        name="nachname"
                                        type="text"
                                        placeholder="Mustermann"
                                        required
                                        class="w-full px-4 py-2 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 border border-zinc-300 dark:border-zinc-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
                                    />
                                </div>
                            </div>

                            <div class="space-y-2">
                                <label for="email" class="block text-sm font-medium text-zinc-900 dark:text-zinc-100">
                                    E-Mail-Adresse *
                                </label>
                                <input
                                    id="email"
                                    name="email"
                                    type="email"
                                    placeholder="max.mustermann@beispiel.de"
                                    required
                                    class="w-full px-4 py-2 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 border border-zinc-300 dark:border-zinc-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
                                />
                            </div>

                            <div class="space-y-2">
                                <label for="unternehmen" class="block text-sm font-medium text-zinc-900 dark:text-zinc-100">
                                    Unternehmen
                                </label>
                                <input
                                    id="unternehmen"
                                    name="unternehmen"
                                    type="text"
                                    placeholder="Firma GmbH"
                                    class="w-full px-4 py-2 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 border border-zinc-300 dark:border-zinc-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
                                />
                            </div>

                            <div class="space-y-2">
                                <label for="telefon" class="block text-sm font-medium text-zinc-900 dark:text-zinc-100">
                                    Telefon
                                </label>
                                <input
                                    id="telefon"
                                    name="telefon"
                                    type="tel"
                                    placeholder="+49 123 456789"
                                    class="w-full px-4 py-2 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 border border-zinc-300 dark:border-zinc-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
                                />
                            </div>

                            <div class="space-y-2">
                                <label for="betreff" class="block text-sm font-medium text-zinc-900 dark:text-zinc-100">
                                    Betreff *
                                </label>
                                <input
                                    id="betreff"
                                    name="betreff"
                                    type="text"
                                    placeholder="Wie können wir Ihnen helfen?"
                                    required
                                    class="w-full px-4 py-2 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 border border-zinc-300 dark:border-zinc-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
                                />
                            </div>

                            <div class="space-y-2">
                                <label for="nachricht" class="block text-sm font-medium text-zinc-900 dark:text-zinc-100">
                                    Nachricht *
                                </label>
                                <textarea
                                    id="nachricht"
                                    name="nachricht"
                                    placeholder="Ihre Nachricht an uns..."
                                    rows="6"
                                    required
                                    class="w-full px-4 py-2 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 border border-zinc-300 dark:border-zinc-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200 resize-none"
                                ></textarea>
                            </div>

                            <div class="text-sm text-zinc-600 dark:text-zinc-400">
                                * Pflichtfelder
                            </div>

                            <button
                                type="submit"
                                class="w-full inline-flex items-center justify-center px-6 py-3 text-sm font-medium text-white rounded-lg shadow-md hover:shadow-lg transition-all"
                                style="background: var(--gradient-hero);"
                            >
                                <svg class="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
                                </svg>
                                Nachricht senden
                            </button>
                        </form>
                    </div>

                    <!-- Map & Info -->
                    <div class="space-y-6">
                        <div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-8 transition-colors duration-200">
                            <h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-6">
                                Besuchen Sie uns
                            </h3>

                            <div class="space-y-6">
                                <div>
                                    <h4 class="font-medium text-zinc-900 dark:text-zinc-100 mb-2">Hauptsitz München</h4>
                                    <p class="text-sm text-zinc-600 dark:text-zinc-400">
                                        Maximilianstraße 35<br />
                                        80539 München<br />
                                        Deutschland
                                    </p>
                                </div>

                                <div class="border-t border-zinc-200 dark:border-zinc-800 pt-6">
                                    <h4 class="font-medium text-zinc-900 dark:text-zinc-100 mb-2">Anfahrt</h4>
                                    <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
                                        <strong class="text-zinc-900 dark:text-zinc-100">Öffentliche Verkehrsmittel:</strong><br />
                                        U-Bahn U4/U5 – Haltestelle Lehel<br />
                                        Tram 19 – Haltestelle Maxmonument
                                    </p>
                                    <p class="text-sm text-zinc-600 dark:text-zinc-400">
                                        <strong class="text-zinc-900 dark:text-zinc-100">Parken:</strong><br />
                                        Parkhaus Maximilianstraße (5 Min. Fußweg)
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="h-80 bg-zinc-100 dark:bg-zinc-800 rounded-lg overflow-hidden">
                            <div class="w-full h-full bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 flex items-center justify-center">
                                <div class="text-center">
                                    <svg class="h-12 w-12 text-[var(--color-primary)] mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                    </svg>
                                    <p class="text-sm text-zinc-600 dark:text-zinc-400">
                                        Interaktive Karte
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="bg-zinc-50/50 dark:bg-zinc-900/50 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 transition-colors duration-200">
                            <h4 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
                                Schnelle Hilfe benötigt?
                            </h4>
                            <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
                                Für dringende Anfragen oder technischen Support steht Ihnen unser Chat zur Verfügung.
                            </p>
                            <a href="#" class="inline-flex items-center justify-center w-full px-6 py-3 text-sm font-medium text-zinc-700 dark:text-zinc-300 border border-zinc-300 dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-800 rounded-lg transition-all">
                                Live-Chat starten
                            </a>
                        </div>
                    </div>
                </div>
            </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'] ?? '#cf3628' }};
            --color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#f0834a' }};
        }

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