<div class="min-h-screen">

    @include('partials.homepage.navbar')

    {{-- ============================================================
         HERO
    ============================================================ --}}
    <section class="relative pt-36 pb-20 overflow-hidden">
        <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[500px] bg-indigo-50 rounded-full blur-3xl opacity-60 pointer-events-none"></div>
        <div class="absolute top-20 right-0 w-80 h-80 bg-purple-100 rounded-full blur-3xl opacity-40 pointer-events-none"></div>

        <div class="relative max-w-5xl mx-auto px-6 text-center space-y-6">
            <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-indigo-50 border border-indigo-100 text-indigo-700 text-xs font-semibold">
                <x-heroicon-o-chat-bubble-left-right class="w-3.5 h-3.5"/>
                Wir freuen uns auf dich
            </div>
            <h1 class="text-5xl md:text-6xl font-bold text-gray-900 leading-[1.1] tracking-tight">
                Schreib uns<br>
                <span class="bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">eine Nachricht</span>
            </h1>
            <p class="text-xl text-gray-500 max-w-2xl mx-auto leading-relaxed">
                Hast du Fragen, Feedback oder möchtest mehr über aziros erfahren? Wir antworten in der Regel innerhalb von 24 Stunden.
            </p>
        </div>
    </section>


    {{-- ============================================================
         CONTACT INFO CARDS
    ============================================================ --}}
    <section class="pb-16">
        <div class="max-w-7xl mx-auto px-6">
            <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
                @foreach([
                    ['icon' => 'envelope', 'bg' => 'bg-indigo-50', 'ic' => 'text-indigo-600', 'border' => 'border-indigo-100', 'title' => 'E-Mail', 'desc' => 'info@aziros.com', 'link' => 'mailto:info@aziros.com', 'sub' => 'Für allgemeine Anfragen'],
                    ['icon' => 'phone', 'bg' => 'bg-teal-50', 'ic' => 'text-teal-600', 'border' => 'border-teal-100', 'title' => 'Telefon', 'desc' => '+43 (0) 1 234567', 'link' => 'tel:+4312345678', 'sub' => 'Mo–Fr, 09:00–18:00'],
                    ['icon' => 'map-pin', 'bg' => 'bg-purple-50', 'ic' => 'text-purple-600', 'border' => 'border-purple-100', 'title' => 'Adresse', 'desc' => 'Musterstraße 1, 1010 Wien', 'link' => null, 'sub' => 'Österreich'],
                    ['icon' => 'clock', 'bg' => 'bg-amber-50', 'ic' => 'text-amber-600', 'border' => 'border-amber-100', 'title' => 'Antwortzeit', 'desc' => 'Unter 24 Stunden', 'link' => null, 'sub' => 'In der Regel schneller'],
                ] as $info)
                    <div class="bg-white border {{ $info['border'] }} rounded-2xl shadow-sm p-6 space-y-4 hover:shadow-md hover:-translate-y-0.5 transition-all duration-200">
                        <div class="w-12 h-12 rounded-2xl {{ $info['bg'] }} flex items-center justify-center">
                            @if($info['icon'] === 'envelope')  <x-heroicon-o-envelope class="w-5 h-5 {{ $info['ic'] }}"/>
                            @elseif($info['icon'] === 'phone') <x-heroicon-o-phone class="w-5 h-5 {{ $info['ic'] }}"/>
                            @elseif($info['icon'] === 'map-pin') <x-heroicon-o-map-pin class="w-5 h-5 {{ $info['ic'] }}"/>
                            @else                              <x-heroicon-o-clock class="w-5 h-5 {{ $info['ic'] }}"/>
                            @endif
                        </div>
                        <div>
                            <p class="text-sm font-bold text-gray-900">{{ $info['title'] }}</p>
                            @if($info['link'])
                                <a href="{{ $info['link'] }}" class="text-sm text-indigo-600 hover:underline font-medium">{{ $info['desc'] }}</a>
                            @else
                                <p class="text-sm font-medium text-gray-800">{{ $info['desc'] }}</p>
                            @endif
                            <p class="text-xs text-gray-400 mt-0.5">{{ $info['sub'] }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>


    {{-- ============================================================
         FORM
    ============================================================ --}}
    <section class="pb-28">
        <div class="max-w-7xl mx-auto px-6">

            <div class="grid lg:grid-cols-2 gap-12 items-start">

                {{-- LEFT: Form --}}
                <div class="bg-white border border-gray-100 rounded-3xl shadow-sm p-8 md:p-10">

                    @if($sent)
                        <div class="text-center py-16 space-y-5">
                            <div class="w-20 h-20 rounded-3xl bg-green-50 flex items-center justify-center mx-auto">
                                <x-heroicon-o-check-circle class="w-10 h-10 text-green-500"/>
                            </div>
                            <h3 class="text-2xl font-bold text-gray-900">Nachricht gesendet!</h3>
                            <p class="text-gray-500 max-w-sm mx-auto leading-relaxed">
                                Vielen Dank für deine Nachricht. Wir melden uns so schnell wie möglich bei dir — in der Regel innerhalb von 24 Stunden.
                            </p>
                            <button wire:click="$set('sent', false)"
                                    class="text-sm text-indigo-600 hover:underline font-semibold">
                                Weitere Nachricht senden
                            </button>
                        </div>
                    @else
                        <div class="space-y-6">
                            <div class="space-y-2">
                                <h2 class="text-2xl font-bold text-gray-900">Nachricht senden</h2>
                                <p class="text-sm text-gray-500">Fülle das Formular aus und wir melden uns bei dir.</p>
                            </div>

                            <form wire:submit="send" class="space-y-5">

                                <div class="grid sm:grid-cols-2 gap-5">
                                    {{-- Name --}}
                                    <div class="space-y-2">
                                        <label for="name" class="text-sm font-medium text-gray-700">Name</label>
                                        <input wire:model="name" type="text" id="name" placeholder="Dein Name"
                                               class="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm text-gray-800 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-300 transition-colors bg-gray-50/50">
                                        @error('name') <p class="text-xs text-red-500">{{ $message }}</p> @enderror
                                    </div>

                                    {{-- Email --}}
                                    <div class="space-y-2">
                                        <label for="email" class="text-sm font-medium text-gray-700">E-Mail</label>
                                        <input wire:model="email" type="email" id="email" placeholder="deine@email.at"
                                               class="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm text-gray-800 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-300 transition-colors bg-gray-50/50">
                                        @error('email') <p class="text-xs text-red-500">{{ $message }}</p> @enderror
                                    </div>
                                </div>

                                {{-- Betreff --}}
                                <div class="space-y-2">
                                    <label for="betreff" class="text-sm font-medium text-gray-700">Betreff</label>
                                    <input wire:model="betreff" type="text" id="betreff" placeholder="Worum geht es?"
                                           class="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm text-gray-800 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-300 transition-colors bg-gray-50/50">
                                    @error('betreff') <p class="text-xs text-red-500">{{ $message }}</p> @enderror
                                </div>

                                {{-- Nachricht --}}
                                <div class="space-y-2">
                                    <label for="nachricht" class="text-sm font-medium text-gray-700">Nachricht</label>
                                    <textarea wire:model="nachricht" id="nachricht" rows="6" placeholder="Deine Nachricht…"
                                              class="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm text-gray-800 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-300 transition-colors resize-none bg-gray-50/50"></textarea>
                                    @error('nachricht') <p class="text-xs text-red-500">{{ $message }}</p> @enderror
                                </div>

                                {{-- Submit --}}
                                <button type="submit"
                                        class="w-full inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-2xl bg-indigo-600 text-white font-semibold hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-200 hover:-translate-y-0.5">
                                    <x-heroicon-o-paper-airplane class="w-4 h-4"/>
                                    Nachricht senden
                                </button>

                            </form>
                        </div>
                    @endif

                </div>

                {{-- RIGHT: Additional info --}}
                <div class="space-y-8">

                    {{-- FAQ teaser --}}
                    <div class="bg-white border border-gray-100 rounded-3xl shadow-sm p-8 space-y-6">
                        <div class="space-y-2">
                            <h3 class="text-xl font-bold text-gray-900">Häufige Fragen</h3>
                            <p class="text-sm text-gray-500">Vielleicht findest du hier schon deine Antwort.</p>
                        </div>

                        <div class="space-y-4" x-data="{ open: null }">
                            @foreach([
                                ['q' => 'Gibt es eine kostenlose Version?', 'a' => 'Ja! Der Free-Plan ist dauerhaft kostenlos — keine Kreditkarte nötig. Du kannst jederzeit upgraden.'],
                                ['q' => 'Wie kann ich mein Abo kündigen?', 'a' => 'Du kannst dein Abo jederzeit in den Einstellungen kündigen. Es gibt keine Mindestlaufzeit oder versteckte Kosten.'],
                                ['q' => 'Sind meine Daten sicher?', 'a' => 'Absolut. Wir hosten in der EU, sind DSGVO-konform und setzen keine Tracking-Cookies ein. Deine Daten gehören dir.'],
                            ] as $i => $faq)
                                <div class="border border-gray-100 rounded-xl overflow-hidden">
                                    <button @click="open = open === {{ $i }} ? null : {{ $i }}"
                                            class="w-full flex items-center justify-between px-5 py-4 text-left">
                                        <span class="text-sm font-semibold text-gray-800">{{ $faq['q'] }}</span>
                                        <x-heroicon-o-chevron-down class="w-4 h-4 text-gray-400 transition-transform duration-200 shrink-0"
                                                                   ::class="open === {{ $i }} && 'rotate-180'"/>
                                    </button>
                                    <div x-show="open === {{ $i }}" x-collapse>
                                        <div class="px-5 pb-4 text-sm text-gray-500 leading-relaxed">
                                            {{ $faq['a'] }}
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <a href="{{ route('homepage.preise') }}"
                           class="inline-flex items-center gap-1.5 text-sm text-indigo-600 font-semibold hover:underline">
                            Alle Pläne ansehen
                            <x-heroicon-o-arrow-right class="w-3.5 h-3.5"/>
                        </a>
                    </div>

                    {{-- Trust --}}
                    <div class="bg-gradient-to-br from-indigo-50 to-purple-50 border border-indigo-100 rounded-3xl p-8 space-y-5">
                        <div class="space-y-2">
                            <h3 class="text-xl font-bold text-gray-900">Warum aziros vertrauen?</h3>
                        </div>
                        <div class="space-y-3">
                            @foreach([
                                'DSGVO-konform — Hosting in der EU',
                                'Keine Tracking-Cookies',
                                'Made in Austria',
                                '500+ Teams vertrauen uns täglich',
                                'Antwort innerhalb von 24h',
                            ] as $point)
                                <div class="flex items-center gap-3">
                                    <div class="w-5 h-5 rounded-full bg-white flex items-center justify-center shrink-0">
                                        <x-heroicon-o-check class="w-3 h-3 text-indigo-600"/>
                                    </div>
                                    <span class="text-sm text-gray-700">{{ $point }}</span>
                                </div>
                            @endforeach
                        </div>
                    </div>

                </div>

            </div>

        </div>
    </section>


    @include('partials.homepage.footer')

</div>
