@extends('layouts.marketing')

@section('title', 'Fotospiel - Event-Fotos einfach und sicher mit QR-Codes')

@section('content')
    <!-- Hero Section id="hero" -->
    <section id="hero" class="bg-aurora text-white py-20 px-4">
        <div class="container mx-auto flex flex-col md:flex-row items-center gap-8 max-w-6xl">
            <div class="md:w-1/2 text-center md:text-left">
                <h1 class="text-4xl md:text-6xl font-bold mb-4">Fotospiel</h1>
                <p class="text-xl md:text-2xl mb-8">Sammle Gastfotos für Events mit QR-Codes. Unsere sichere PWA-Plattform für Gäste und Organisatoren – einfach, mobil und datenschutzkonform. Besser als Konkurrenz, geliebt von Tausenden.</p>
                <a href="/packages" class="bg-white text-[#FFB6C1] px-8 py-4 rounded-full font-semibold text-lg hover:bg-gray-100 transition">Jetzt starten – Kostenlos</a>
            </div>
            <div class="md:w-1/2">
                <img src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=600&h=400&fit=crop" alt="Event-Fotos mit QR" class="rounded-lg shadow-lg w-full" style="filter: drop-shadow(0 10px 8px rgba(0,0,0,0.1));">
            </div>
        </div>
    </section>

    <!-- How it works Section id="how-it-works" -->
    <section id="how-it-works" class="py-20 px-4 bg-gray-50">
        <div class="container mx-auto">
            <h2 class="text-3xl font-bold text-center mb-12">So funktioniert es – in 4 einfachen Schritten mit QR-Codes</h2>
            <div class="grid md:grid-cols-4 gap-8">
                <div class="text-center">
                    <div class="w-12 h-12 bg-[#FFB6C1] rounded-full flex items-center justify-center mx-auto mb-4 text-white font-bold">1</div>
                    <h3 class="font-semibold mb-2">Event erstellen & QR generieren</h3>
                    <p>Als Organisator: Registrieren, Event anlegen, QR-Code erstellen und drucken/teilen.</p>
                </div>
                <div class="text-center">
                    <div class="w-12 h-12 bg-[#FFD700] rounded-full flex items-center justify-center mx-auto mb-4 text-white font-bold">2</div>
                    <h3 class="font-semibold mb-2">Fotos hochladen via QR</h3>
                    <p>Gäste: QR scannen, PWA öffnen, Fotos via Kamera oder Galerie teilen.</p>
                </div>
                <div class="text-center">
                    <div class="w-12 h-12 bg-[#87CEEB] rounded-full flex items-center justify-center mx-auto mb-4 text-white font-bold">3</div>
                    <h3 class="font-semibold mb-2">Freigaben & Likes</h3>
                    <p>Emotions auswählen, Fotos liken, Galerie browsen – alles anonym.</p>
                </div>
                <div class="text-center">
                    <div class="w-12 h-12 bg-[#FFB6C1] rounded-full flex items-center justify-center mx-auto mb-4 text-white font-bold">4</div>
                    <h3 class="font-semibold mb-2">Download & Teilen</h3>
                    <p>Freigegebene Fotos herunterladen, Event abschließen und QR archivieren.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section id="features" -->
    <section id="features" class="py-20 px-4 bg-white">
        <div class="container mx-auto">
            <h2 class="text-3xl font-bold text-center mb-12">Warum Fotospiel mit QR?</h2>
            <div class="grid md:grid-cols-3 gap-8">
                <div class="text-center p-6">
                    <div class="w-16 h-16 bg-[#FFB6C1] rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Sichere QR-Uploads</h3>
                    <p>GDPR-konform, anonyme Sessions, QR-basierte Zugriffe ohne PII-Speicherung.</p>
                </div>
                <div class="text-center p-6">
                    <div class="w-16 h-16 bg-[#FFD700] rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Mobile PWA & QR</h3>
                    <p>Offline-fähig, App-ähnlich für iOS/Android, QR-Scan für schnellen Einstieg.</p>
                </div>
                <div class="text-center p-6">
                    <div class="w-16 h-16 bg-[#87CEEB] rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Schnell & Einfach mit QR</h3>
                    <p>Automatische Thumbnails, Echtzeit-Updates, QR-Sharing für Gäste.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Packages Teaser Section -->
    <section id="pricing" class="py-20 px-4 bg-gray-50">
        <div class="container mx-auto">
            <h2 class="text-3xl font-bold text-center mb-12">Unsere Packages</h2>
            <p class="text-center text-lg text-gray-600 mb-8">Wählen Sie das passende Paket für Ihr Event – von kostenlos bis premium.</p>
            <div class="text-center">
                <a href="/packages" class="bg-[#FFB6C1] text-white px-8 py-4 rounded-full font-semibold text-lg hover:bg-[#FF69B4] transition">
                    Alle Packages ansehen
                </a>
            </div>
        </div>
    </section>

    <!-- Contact Section id="contact" -->
    <section id="contact" class="py-20 px-4 bg-white">
        <div class="container mx-auto max-w-2xl">
            <h2 class="text-3xl font-bold text-center mb-12">Kontakt</h2>
            <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 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 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 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>
            @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>
    </section>

    <!-- Testimonials Section -->
    <section class="py-20 px-4 bg-gray-50">
        <div class="container mx-auto">
            <h2 class="text-3xl font-bold text-center mb-12">Was unsere Kunden sagen</h2>
            <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
                <div class="bg-white p-6 rounded-lg">
                    <p class="mb-4">"Perfekt für unsere Hochzeit! QR-Sharing war super einfach."</p>
                    <p class="font-semibold">- Anna & Max</p>
                </div>
                <div class="bg-white p-6 rounded-lg">
                    <p class="mb-4">"Großes Firmenevent – alle Fotos zentral via QR."</p>
                    <p class="font-semibold">- Team XYZ GmbH</p>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="py-20 px-4 bg-white">
        <div class="container mx-auto max-w-3xl">
            <h2 class="text-3xl font-bold text-center mb-12">Häufige Fragen</h2>
            <div class="space-y-4">
                <div class="bg-gray-50 p-4 rounded-lg">
                    <h3 class="font-semibold">Ist es kostenlos?</h3>
                    <p>Ja, der Basic-Tarif ist kostenlos für 1 Event mit QR. Upgrades ab 99€.</p>
                </div>
                <div class="bg-gray-50 p-4 rounded-lg">
                    <h3 class="font-semibold">Datenschutz?</h3>
                    <p>100% GDPR-konform. Keine personenbezogenen Daten gespeichert. QR-Zugriffe anonym. Siehe <a href="/datenschutz" class="text-[#FFB6C1]">Datenschutzerklärung</a>.</p>
                </div>
                <div class="bg-gray-50 p-4 rounded-lg">
                    <h3 class="font-semibold">Wie funktioniert QR-Sharing?</h3>
                    <p>Generiere QR im Dashboard, teile es – Gäste scannen, laden Fotos hoch in der PWA.</p>
                </div>
            </div>
        </div>
    </section>
@endsection