@extends('photography.layouts.photography')

@section('title', 'Book a Session - Photography')

@php
    $theme = [
        'sectionBg' => 'bg-gray-900',
        'sectionBgAlt' => 'bg-gray-950',
        'cardBg' => 'bg-gray-900',
        'cardBorder' => 'border-gray-800',
        'textNormal' => 'text-white',
        'textSecondary' => 'text-gray-400',
        'accent' => 'text-amber-400',
        'accentBg' => 'bg-amber-500',
        'inputBg' => 'bg-gray-800',
        'inputBorder' => 'border-gray-700',
    ];
@endphp

@section('content')
    <!-- Hero -->
    <section class="relative py-20 md:py-32 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
        <div class="max-w-7xl mx-auto px-6 lg:px-8 text-center">
            <span
                class="inline-block px-4 py-2 rounded-full bg-amber-500/10 text-amber-400 text-sm font-medium mb-6 border border-amber-500/20 animate-on-scroll">
                ✦ Book Your Session
            </span>
            <h1 class="font-display text-4xl md:text-6xl font-bold text-white mb-6 animate-on-scroll"
                style="transition-delay: 0.1s;">
                Schedule Your <span
                    class="text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-orange-500">Photoshoot</span>
            </h1>
            <p class="text-xl text-gray-400 max-w-3xl mx-auto animate-on-scroll" style="transition-delay: 0.2s;">
                Fill out the form below and we'll confirm your booking within 24 hours
            </p>
        </div>
    </section>

    <!-- Booking Form -->
    <section class="py-20 {{ $theme['sectionBgAlt'] }}">
        <div class="max-w-3xl mx-auto px-6 lg:px-8">
            <div class="{{ $theme['cardBg'] }} rounded-2xl border {{ $theme['cardBorder'] }} p-8 animate-on-scroll">
                <form id="booking-form" class="space-y-6">
                    <!-- Personal Info -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-300 mb-2">Full Name *</label>
                            <input type="text" name="name" required
                                class="w-full p-3 {{ $theme['inputBg'] }} border {{ $theme['inputBorder'] }} rounded-xl text-white focus:ring-amber-500 focus:border-amber-500 transition"
                                placeholder="John Doe">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-300 mb-2">Email Address *</label>
                            <input type="email" name="email" required
                                class="w-full p-3 {{ $theme['inputBg'] }} border {{ $theme['inputBorder'] }} rounded-xl text-white focus:ring-amber-500 focus:border-amber-500 transition"
                                placeholder="john@example.com">
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-300 mb-2">Phone Number *</label>
                            <input type="tel" name="phone" required
                                class="w-full p-3 {{ $theme['inputBg'] }} border {{ $theme['inputBorder'] }} rounded-xl text-white focus:ring-amber-500 focus:border-amber-500 transition"
                                placeholder="+1 (555) 000-0000">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-300 mb-2">Preferred Date *</label>
                            <input type="date" name="date" required
                                class="w-full p-3 {{ $theme['inputBg'] }} border {{ $theme['inputBorder'] }} rounded-xl text-white focus:ring-amber-500 focus:border-amber-500 transition"
                                min="{{ date('Y-m-d', strtotime('+1 day')) }}">
                        </div>
                    </div>

                    <!-- Session Type -->
                    <div>
                        <label class="block text-sm font-medium text-gray-300 mb-2">Session Type *</label>
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                            @php
                                $types = ['Portrait', 'Product', 'Event', 'Aerial'];
                            @endphp
                            @foreach ($types as $index => $type)
                                <label class="cursor-pointer">
                                    <input type="radio" name="session_type" value="{{ $type }}"
                                        class="sr-only peer">
                                    <div
                                        class="p-3 text-center rounded-xl border {{ $theme['cardBorder'] }} peer-checked:border-amber-500 peer-checked:bg-amber-500/10 text-gray-300 peer-checked:text-amber-400 transition hover:border-gray-600">
                                        <span class="text-sm font-medium">{{ $type }}</span>
                                    </div>
                                </label>
                            @endforeach
                        </div>
                    </div>

                    <!-- Package Selection -->
                    <div>
                        <label class="block text-sm font-medium text-gray-300 mb-2">Package</label>
                        <select name="package"
                            class="w-full p-3 {{ $theme['inputBg'] }} border {{ $theme['inputBorder'] }} rounded-xl text-white focus:ring-amber-500 focus:border-amber-500 transition">
                            <option value="">Select a package</option>
                            <option value="essential">Essential - $299</option>
                            <option value="professional">Professional - $599</option>
                            <option value="premium">Premium - $999</option>
                            <option value="custom">Custom Package</option>
                        </select>
                    </div>

                    <!-- Time Preference -->
                    <div>
                        <label class="block text-sm font-medium text-gray-300 mb-2">Preferred Time</label>
                        <div class="flex flex-wrap gap-3">
                            @foreach (['Morning (9-12)', 'Afternoon (12-5)', 'Evening (5-8)'] as $time)
                                <label class="cursor-pointer">
                                    <input type="radio" name="time_preference" value="{{ $time }}"
                                        class="sr-only peer">
                                    <div
                                        class="px-4 py-2 rounded-lg border {{ $theme['cardBorder'] }} peer-checked:border-amber-500 peer-checked:bg-amber-500/10 text-gray-300 peer-checked:text-amber-400 text-sm transition">
                                        {{ $time }}
                                    </div>
                                </label>
                            @endforeach
                        </div>
                    </div>

                    <!-- Additional Details -->
                    <div>
                        <label class="block text-sm font-medium text-gray-300 mb-2">Additional Details</label>
                        <textarea name="details" rows="4"
                            class="w-full p-3 {{ $theme['inputBg'] }} border {{ $theme['inputBorder'] }} rounded-xl text-white focus:ring-amber-500 focus:border-amber-500 transition"
                            placeholder="Tell us about your vision, specific shots you need, or any special requirements..."></textarea>
                    </div>

                    <!-- Submit -->
                    <button type="submit"
                        class="w-full py-4 bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-white font-semibold rounded-xl shadow-lg shadow-amber-500/25 transition duration-300">
                        Submit Booking Request
                    </button>

                    <p class="text-center text-gray-500 text-sm">We'll respond within 24 hours to confirm your session</p>
                </form>

                <!-- Success Message (hidden by default) -->
                <div id="booking-success" class="hidden text-center py-12">
                    <div class="w-20 h-20 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
                        <svg class="w-10 h-10 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-white mb-4">Booking Request Received!</h3>
                    <p class="text-gray-400 mb-6">We'll review your request and get back to you within 24 hours to confirm
                        your session details.</p>
                    <a href="/photography"
                        class="inline-flex items-center px-6 py-3 bg-gray-800 hover:bg-gray-700 text-white rounded-lg transition">
                        Back to Home
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Info -->
    <section class="py-16 {{ $theme['sectionBg'] }} border-t border-gray-800">
        <div class="max-w-4xl mx-auto px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
                <div class="animate-on-scroll">
                    <div class="w-12 h-12 bg-amber-500/10 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-6 h-6 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                        </svg>
                    </div>
                    <h3 class="text-white font-medium mb-1">Email Us</h3>
                    <p class="text-gray-400 text-sm">photo@oamediakraft.co.uk</p>
                </div>
                <div class="animate-on-scroll" style="transition-delay: 0.1s;">
                    <div class="w-12 h-12 bg-amber-500/10 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-6 h-6 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                        </svg>
                    </div>
                    <h3 class="text-white font-medium mb-1">Call Us</h3>
                    <p class="text-gray-400 text-sm">+1 (555) 123-4567</p>
                </div>
                <div class="animate-on-scroll" style="transition-delay: 0.2s;">
                    <div class="w-12 h-12 bg-amber-500/10 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-6 h-6 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                        </svg>
                    </div>
                    <h3 class="text-white font-medium mb-1">Studio Location</h3>
                    <p class="text-gray-400 text-sm">Downtown Metro Area</p>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        document.getElementById('booking-form')?.addEventListener('submit', function(e) {
            e.preventDefault();

            // Simulate form submission
            const btn = this.querySelector('button[type="submit"]');
            const originalText = btn.innerHTML;
            btn.innerHTML = 'Sending...';
            btn.disabled = true;

            setTimeout(() => {
                this.classList.add('hidden');
                document.getElementById('booking-success').classList.remove('hidden');
                document.getElementById('booking-success').classList.add('animate-on-scroll', 'is-visible');
            }, 1500);
        });
    </script>
@endpush
