@props([
    'submitted' => false,
    'themeClasses' => [],
])

<section id="contact"
    class="py-20 md:py-32 {{ $themeClasses['sectionBgAlt'] ?? 'bg-gray-950' }} border-t {{ $themeClasses['divider'] ?? 'border-gray-800' }}">
    <div class="max-w-4xl mx-auto px-6 lg:px-8">
        <h2
            class="text-5xl font-extrabold text-center mb-6 {{ $themeClasses['textNormal'] ?? 'text-white' }} animate-on-scroll">
            Collaborate with Us</h2>
        <p class="text-center {{ $themeClasses['textSecondary'] ?? 'text-gray-400' }} mb-12 max-w-2xl mx-auto text-lg animate-on-scroll"
            style="transition-delay: 0.1s;">
            Tell us about your vision. We'll respond within one business day to discuss how OA MediaKraft can help.
        </p>

        <div class="{{ $themeClasses['cardBg'] ?? 'bg-gray-900' }} p-8 md:p-12 rounded-3xl shadow-2xl shadow-orange-500/10 border border-blue-700/50 animate-on-scroll"
            style="transition-delay: 0.2s;">
            @if ($submitted)
                <div class="text-center p-10" id="contact-success">
                    <div
                        class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-orange-600/20 text-orange-600 mb-4">
                        @include('partials.icon', ['name' => 'Mail', 'size' => 'w-8 h-8'])
                    </div>
                    <h3 class="text-3xl font-bold text-orange-600 mb-4">Thank You!</h3>
                    <p class="{{ $themeClasses['textSecondary'] ?? 'text-gray-400' }} text-lg">Your inquiry has been
                        received. A representative will contact you shortly.</p>
                    <button onclick="window.dispatchEvent(new CustomEvent('resetContactForm'))"
                        class="mt-8 text-sm font-medium {{ $themeClasses['textNormal'] ?? 'text-white' }} {{ $themeClasses['inputBg'] ?? 'bg-gray-800' }} py-2 px-5 rounded-full hover:bg-gray-700 transition">
                        Send another message
                    </button>
                </div>
            @else
                <form id="contact-form" class="space-y-6" onsubmit="handleFormSubmission(event)">
                    @csrf
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="name"
                                class="block text-sm font-medium {{ $themeClasses['textSecondary'] ?? 'text-gray-400' }} mb-2">Full
                                Name</label>
                            <input type="text" id="name" name="name" required
                                class="w-full p-3 {{ $themeClasses['inputBg'] ?? 'bg-gray-800' }} border {{ $themeClasses['inputBorder'] ?? 'border-gray-700' }} rounded-xl focus:ring-orange-500 focus:border-orange-500 {{ $themeClasses['textNormal'] ?? 'text-white' }} placeholder-gray-500 transition duration-300"
                                placeholder="John Doe" />
                        </div>
                        <div>
                            <label for="email"
                                class="block text-sm font-medium {{ $themeClasses['textSecondary'] ?? 'text-gray-400' }} mb-2">Email
                                Address</label>
                            <input type="email" id="email" name="email" required
                                class="w-full p-3 {{ $themeClasses['inputBg'] ?? 'bg-gray-800' }} border {{ $themeClasses['inputBorder'] ?? 'border-gray-700' }} rounded-xl focus:ring-orange-500 focus:border-orange-500 {{ $themeClasses['textNormal'] ?? 'text-white' }} placeholder-gray-500 transition duration-300"
                                placeholder="email@company.com" />
                        </div>
                    </div>
                    <div>
                        <label for="service"
                            class="block text-sm font-medium {{ $themeClasses['textSecondary'] ?? 'text-gray-400' }} mb-2">Primary
                            Service of Interest</label>
                        <select id="service" name="service" required
                            class="w-full p-3 {{ $themeClasses['inputBg'] ?? 'bg-gray-800' }} border {{ $themeClasses['inputBorder'] ?? 'border-gray-700' }} rounded-xl focus:ring-orange-500 focus:border-orange-500 {{ $themeClasses['textNormal'] ?? 'text-white' }} appearance-none transition duration-300">
                            <option value="" disabled selected>Select a Service</option>
                            <option value="video" class="{{ $themeClasses['inputBg'] ?? 'bg-gray-800' }}">Video
                                Production</option>
                            <option value="design" class="{{ $themeClasses['inputBg'] ?? 'bg-gray-800' }}">Brand &
                                Graphic Design</option>
                            <option value="web" class="{{ $themeClasses['inputBg'] ?? 'bg-gray-800' }}">Web
                                Development</option>
                            <option value="photo" class="{{ $themeClasses['inputBg'] ?? 'bg-gray-800' }}">Advanced
                                Photography</option>
                            <option value="academy" class="{{ $themeClasses['inputBg'] ?? 'bg-gray-800' }}">Academy /
                                Training</option>
                            <option value="other" class="{{ $themeClasses['inputBg'] ?? 'bg-gray-800' }}">General
                                Inquiry</option>
                        </select>
                    </div>
                    <div>
                        <label for="details"
                            class="block text-sm font-medium {{ $themeClasses['textSecondary'] ?? 'text-gray-400' }} mb-2">Project
                            Details & Budget (Optional)</label>
                        <textarea id="details" name="details" rows="5"
                            class="w-full p-3 {{ $themeClasses['inputBg'] ?? 'bg-gray-800' }} border {{ $themeClasses['inputBorder'] ?? 'border-gray-700' }} rounded-xl focus:ring-orange-500 focus:border-orange-500 {{ $themeClasses['textNormal'] ?? 'text-white' }} placeholder-gray-500 transition duration-300"
                            placeholder="Describe your project, goals, timeline, and any budget constraints."></textarea>
                    </div>
                    <div class="pt-4">
                        <button type="submit"
                            class="w-full bg-gradient-to-r from-orange-600 to-blue-600 hover:from-orange-700 hover:to-blue-700 text-white font-bold py-3 rounded-xl shadow-lg transform hover:scale-[1.005] transition duration-300 ease-in-out">
                            Send Project Brief
                        </button>
                    </div>
                </form>
            @endif
        </div>
    </div>
</section>

@push('scripts')
    <script>
        function handleFormSubmission(e) {
            e.preventDefault();

            // Simulate form submission
            const form = e.target;
            const submitBtn = form.querySelector('button[type="submit"]');
            submitBtn.disabled = true;
            submitBtn.innerHTML =
                '<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Sending...';

            setTimeout(() => {
                window.dispatchEvent(new CustomEvent('contactSubmitted'));
            }, 1000);
        }
    </script>
@endpush
