{{--
    Kontakt-Modal der Hub-Landing: einfaches Formular statt sichtbarer
    E-Mail-Adresse (Spam-Schutz). Öffnet auf das Window-Event
    `open-contact-modal` (Trigger: `<button x-data @click="$dispatch('open-contact-modal')">`)
    und automatisch nach Absenden (Erfolgs-Flash bzw. Validierungsfehler).
    Versand über den host-agnostischen POST-Endpunkt des Kontaktformulars.
--}}
<div
    x-data="{ open: @js(session()->has('contact-status') || $errors->any()) }"
    @open-contact-modal.window="open = true"
    @keydown.escape.window="open = false"
>
    <div x-show="open" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4">
        <div class="absolute inset-0 bg-black/50" @click="open = false" aria-hidden="true"></div>

        <div class="relative bg-white border border-bg-rule rounded-[4px] w-full max-w-[520px] max-h-[90vh] overflow-y-auto p-7"
            role="dialog" aria-modal="true" aria-label="Kontaktanfrage">

            <button type="button" @click="open = false" aria-label="Schließen"
                class="absolute top-4 right-4 w-8 h-8 flex items-center justify-center text-ink-3 hover:text-ink transition-colors cursor-pointer">
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                    <path d="M3 3l10 10M13 3L3 13" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
                </svg>
            </button>

            @if (session('contact-status'))
                <div class="section-eyebrow mb-4">Kontakt</div>
                <h3 class="text-[20px] font-bold text-ink tracking-[-0.4px] m-0 mb-3">Nachricht gesendet</h3>
                <p class="text-[13.5px] text-ink-2 leading-[1.6] m-0" role="status">
                    {{ session('contact-status') }}
                </p>
                <button type="button" @click="open = false"
                    class="mt-6 inline-flex items-center justify-center px-5 py-2.5 text-[13px] font-semibold text-white bg-hub hover:bg-hub-2 rounded-[4px] transition-colors cursor-pointer">
                    Schließen
                </button>
            @else
                <div class="section-eyebrow mb-4">Kontakt</div>
                <h3 class="text-[20px] font-bold text-ink tracking-[-0.4px] m-0 mb-2">Schreiben Sie uns</h3>
                <p class="text-[12.5px] text-ink-3 leading-[1.55] m-0 mb-6">
                    Ob Enterprise-Anfrage, Support oder Fragen zu Ihren Daten — wir melden uns werktags
                    schnellstmöglich zurück.
                </p>

                <form method="POST" action="{{ route('kontakt.store', ['edition' => 'de']) }}" class="space-y-4" novalidate>
                    @csrf

                    <div>
                        <label for="hub-contact-name" class="block text-[12px] font-semibold text-ink mb-1.5">Ihr Name</label>
                        <input id="hub-contact-name" type="text" name="name" value="{{ old('name') }}" required
                               autocomplete="name"
                               class="w-full border border-bg-rule px-3 py-2.5 text-[13px] bg-white text-ink focus:outline-none focus:border-hub" />
                        @error('name')
                            <p class="mt-1 text-[12px] text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="hub-contact-email" class="block text-[12px] font-semibold text-ink mb-1.5">E-Mail-Adresse</label>
                        <input id="hub-contact-email" type="email" name="email" value="{{ old('email') }}" required
                               autocomplete="email"
                               class="w-full border border-bg-rule px-3 py-2.5 text-[13px] bg-white text-ink focus:outline-none focus:border-hub" />
                        @error('email')
                            <p class="mt-1 text-[12px] text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="hub-contact-message" class="block text-[12px] font-semibold text-ink mb-1.5">Ihre Nachricht</label>
                        <textarea id="hub-contact-message" name="message" rows="5" required
                                  class="w-full border border-bg-rule px-3 py-2.5 text-[13px] bg-white text-ink focus:outline-none focus:border-hub"
                                  placeholder="Wie können wir Ihnen helfen?">{{ old('message') }}</textarea>
                        @error('message')
                            <p class="mt-1 text-[12px] text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Bot-Schutz: versteckte Honeypot-Felder (siehe ContactController). --}}
                    <div class="hidden" aria-hidden="true">
                        <label for="hub-contact-website">Website</label>
                        <input id="hub-contact-website" type="text" name="website" tabindex="-1" autocomplete="off" value="{{ old('website') }}" />
                        <label for="hub-contact-homepage">Homepage</label>
                        <input id="hub-contact-homepage" type="text" name="homepage" tabindex="-1" autocomplete="off" value="{{ old('homepage') }}" />
                    </div>

                    <div class="flex items-center justify-between gap-4 pt-1">
                        <p class="text-[11px] text-ink-3 leading-[1.5] m-0">
                            Ihre Angaben werden nur zur Bearbeitung der Anfrage verarbeitet
                            (<a href="{{ route('datenschutz', ['edition' => 'de']) }}" class="underline hover:text-ink">Datenschutz</a>).
                        </p>
                        <button type="submit"
                                class="inline-flex items-center justify-center px-5 py-2.5 text-[13px] font-semibold text-white bg-hub hover:bg-hub-2 rounded-[4px] whitespace-nowrap transition-colors cursor-pointer">
                            Nachricht senden
                        </button>
                    </div>
                </form>
            @endif
        </div>
    </div>
</div>