@extends('layouts.marketing')

@section('title', 'Kontakt - Fotospiel')

@section('content')
<div class="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-2xl mx-auto">
        <h1 class="text-3xl font-bold text-center mb-8">Kontakt</h1>
        <p class="text-center text-gray-600 mb-8">Haben Sie Fragen? Schreiben Sie uns!</p>
        <div class="grid gap-6 lg:grid-cols-[1fr,1.1fr]">
            <div class="space-y-3 rounded-2xl border border-rose-100 bg-rose-50/60 p-5 text-sm text-gray-700 shadow-inner">
                <p class="text-xs font-semibold uppercase tracking-wide text-rose-600">Schnelle Hilfe</p>
                <p class="text-base font-semibold text-gray-900">Wir melden uns innerhalb von 24h.</p>
                <ul class="space-y-2">
                    <li class="flex items-start gap-2"><span class="mt-1 h-2.5 w-2.5 rounded-full bg-rose-500"></span><span>Keine Weitergabe, kein Tracking.</span></li>
                    <li class="flex items-start gap-2"><span class="mt-1 h-2.5 w-2.5 rounded-full bg-rose-500"></span><span>Antwort per E-Mail mit konkreter Hilfe.</span></li>
                    <li class="flex items-start gap-2"><span class="mt-1 h-2.5 w-2.5 rounded-full bg-rose-500"></span><span>Fotobox-/PWA-Fragen willkommen.</span></li>
                </ul>
            </div>
            <form method="POST" action="{{ route('kontakt.submit') }}" class="space-y-4">
                @csrf
                <input type="text" name="nickname" class="hidden" tabindex="-1" autocomplete="off" aria-hidden>
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Name</label>
                    <input type="text" id="name" name="name" required aria-invalid="@error('name') true @enderror" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]">
                    @error('name')
                        <p class="text-red-500 text-sm mt-1" id="contact-name-error">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700 mb-2">E-Mail</label>
                    <input type="email" id="email" name="email" required aria-invalid="@error('email') true @enderror" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]">
                    @error('email')
                        <p class="text-red-500 text-sm mt-1" id="contact-email-error">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="message" class="block text-sm font-medium text-gray-700 mb-2">Nachricht</label>
                    <textarea id="message" name="message" rows="4" required aria-invalid="@error('message') true @enderror" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]"></textarea>
                    @error('message')
                        <p class="text-red-500 text-sm mt-1" id="contact-message-error">{{ $message }}</p>
                    @enderror
                </div>
                <button type="submit" class="w-full bg-[#FFB6C1] text-white py-3 rounded-md font-semibold hover:bg-[#FF69B4] transition">Senden</button>
            </form>
        </div>
        @if (session('success'))
            <p class="mt-4 text-green-600 text-center">{{ session('success') }}</p>
        @endif
        @if ($errors->any())
            <div class="mt-4 p-4 bg-red-100 border border-red-400 rounded-md">
                <ul class="list-disc list-inside">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
    </div>
</div>
@endsection