@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>
        <form method="POST" action="{{ route('kontakt.submit') }}" class="space-y-4">
            @csrf
            <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 class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]">
            </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 class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]">
            </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 class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]"></textarea>
            </div>
            <button type="submit" class="w-full bg-[#FFB6C1] text-white py-3 rounded-md font-semibold hover:bg-[#FF69B4] transition">Senden</button>
        </form>
        @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