@extends('frontend.layout')

@section('title', 'Inve Security - ' . t('contact_title'))
@section('description', 'Contact Inve Security for premium security solutions and expert consultation in Saudi Arabia.')

@section('content')
    <!-- LUXURY GOLDEN HERO -->
    <section class="relative min-h-[60vh] flex items-center justify-center overflow-hidden bg-gradient-to-br from-gold-50 via-white to-gold-50/30 dark:from-gray-950 dark:via-gray-900 dark:to-gold-900/10">
        <!-- Animated Background Elements -->
        <div class="absolute inset-0 overflow-hidden">
            <!-- Gradient Orbs -->
            <div class="absolute top-1/4 -left-20 w-96 h-96 bg-gradient-to-br from-gold-500/20 to-gold-300/30 dark:from-gold-500/10 dark:to-gold-300/5 rounded-full blur-3xl animate-pulse-gold opacity-60 dark:opacity-30"></div>
            <div class="absolute bottom-1/3 -right-24 w-80 h-80 bg-gradient-to-tr from-gold-500/15 to-transparent dark:from-gold-500/5 dark:to-transparent rounded-full blur-3xl opacity-40 dark:opacity-20 animate-pulse-gold" style="animation-delay: 2s"></div>
            
            <!-- Animated Grid Pattern -->
            <div class="absolute inset-0 opacity-20 dark:opacity-10">
                <div class="absolute inset-0 bg-[linear-gradient(90deg,transparent_95%,rgba(250,204,21,0.1)_100%)] animate-shimmer bg-[length:200%_100%]"></div>
                <div class="absolute inset-0 bg-[linear-gradient(rgba(250,204,21,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(250,204,21,0.03)_1px,transparent_1px)] dark:bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:64px_64px] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_50%,black,transparent)]"></div>
            </div>
        </div>

        <div class="max-w-6xl mx-auto px-6 relative z-10 py-20">
            <div class="text-center animate-slide-up">
                <!-- Premium Badge -->
                <div class="inline-flex items-center gap-3 px-6 py-3 bg-gradient-to-r from-gold-500/10 to-gold-300/10 dark:from-gold-500/20 dark:to-gold-300/5 border border-gold-500/30 dark:border-gold-500/40 rounded-full mb-8 backdrop-blur-sm group hover:border-gold-500 transition-all duration-300">
                    <div class="w-2 h-2 bg-gradient-to-r from-gold-500 to-gold-300 rounded-full animate-pulse"></div>
                    <span class="text-sm font-semibold text-gold-600 dark:text-gold-400 group-hover:scale-105 transition-transform">
                        {{ t('contact_available') }}
                    </span>
                    <svg class="w-4 h-4 text-gold-500 opacity-0 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </div>

                <!-- Main Heading -->
                <h1 class="text-5xl lg:text-6xl xl:text-7xl font-bold leading-tight mb-6">
                    <span class="block text-gray-900 dark:text-white">{{ t('contact_title_line1') }}</span>
                    <span class="block bg-gradient-to-r from-gold-500 via-gold-400 to-gold-500 bg-clip-text text-transparent animate-gradient-x mt-4">
                        {{ t('contact_title_line2') }}
                    </span>
                </h1>

                <!-- Subheading -->
                <p class="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto leading-relaxed">
                    {{ t('contact_description') }}
                </p>
                
                <!-- Contact Stats -->
                <div class="grid grid-cols-3 gap-8 max-w-lg mx-auto animate-fade-in">
                    <div class="text-center group">
                        <div class="text-3xl font-bold text-gray-900 dark:text-white mb-2 group-hover:scale-110 transition-transform duration-300">
                            <span class="bg-gradient-to-b from-gold-500 to-gold-400 bg-clip-text text-transparent">
                                24/7
                            </span>
                        </div>
                        <div class="text-sm text-gray-600 dark:text-gray-400 font-medium tracking-wide">Support</div>
                    </div>
                    <div class="text-center group">
                        <div class="text-3xl font-bold text-gray-900 dark:text-white mb-2 group-hover:scale-110 transition-transform duration-300">
                            <span class="bg-gradient-to-b from-gold-500 to-gold-400 bg-clip-text text-transparent">
                                1h
                            </span>
                        </div>
                        <div class="text-sm text-gray-600 dark:text-gray-400 font-medium tracking-wide">Response Time</div>
                    </div>
                    <div class="text-center group">
                        <div class="text-3xl font-bold text-gray-900 dark:text-white mb-2 group-hover:scale-110 transition-transform duration-300">
                            <span class="bg-gradient-to-b from-gold-500 to-gold-400 bg-clip-text text-transparent">
                                100%
                            </span>
                        </div>
                        <div class="text-sm text-gray-600 dark:text-gray-400 font-medium tracking-wide">Satisfaction</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- PREMIUM CONTACT FORM & INFO -->
    <section class="py-20 bg-gradient-to-b from-transparent via-gold-50/20 to-transparent dark:from-transparent dark:via-gold-900/5 dark:to-transparent">
        <div class="max-w-6xl mx-auto px-6">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
                <!-- Contact Information -->
                <div class="lg:col-span-1">
                    <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-8 animate-slide-up">{{ t('contact_info_title') }}</h2>

                    <!-- Premium Contact Cards -->
                    <div class="space-y-6">
                        <!-- Address Card -->
                        <div class="group p-6 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-2xl border border-gray-100 dark:border-gray-700 hover:border-gold-500/30 dark:hover:border-gold-500/40 transition-all duration-300 hover:-translate-y-1 animate-slide-up animation-delay-100">
                            <div class="flex items-start gap-4">
                                <div class="w-12 h-12 bg-gradient-to-br from-gold-500/20 to-gold-300/30 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                                    <i class="fas fa-map-marker-alt text-gold-500 text-lg"></i>
                                </div>
                                <div>
                                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">{{ t('address_title') }}</h3>
                                    <p class="text-gray-600 dark:text-gray-300">{{ $settings['company_address'] ?? 'Riyadh, Saudi Arabia' }}</p>
                                    <a href="https://maps.google.com" target="_blank" class="text-gold-500 hover:text-gold-600 dark:hover:text-gold-400 text-sm font-medium mt-2 inline-flex items-center gap-1">
                                        <i class="fas fa-directions text-xs"></i>
                                        {{ t('get_directions') }}
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- Phone Card -->
                        <div class="group p-6 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-2xl border border-gray-100 dark:border-gray-700 hover:border-gold-500/30 dark:hover:border-gold-500/40 transition-all duration-300 hover:-translate-y-1 animate-slide-up animation-delay-200">
                            <div class="flex items-start gap-4">
                                <div class="w-12 h-12 bg-gradient-to-br from-gold-500/20 to-gold-300/30 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                                    <i class="fas fa-phone text-gold-500 text-lg"></i>
                                </div>
                                <div>
                                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">{{ t('phone_title') }}</h3>
                                    <a href="tel:+966112345678" class="text-gold-500 dark:text-gold-400 hover:text-gold-600 dark:hover:text-gold-300 text-lg font-medium transition-colors duration-200 block">
                                        {{ $settings['company_phone'] ?? '+966 11 234 5678' }}
                                    </a>
                                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">{{ t('phone_hours') }}</p>
                                </div>
                            </div>
                        </div>

                        <!-- Email Card -->
                        <div class="group p-6 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-2xl border border-gray-100 dark:border-gray-700 hover:border-gold-500/30 dark:hover:border-gold-500/40 transition-all duration-300 hover:-translate-y-1 animate-slide-up animation-delay-300">
                            <div class="flex items-start gap-4">
                                <div class="w-12 h-12 bg-gradient-to-br from-gold-500/20 to-gold-300/30 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                                    <i class="fas fa-envelope text-gold-500 text-lg"></i>
                                </div>
                                <div>
                                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">{{ t('email_title') }}</h3>
                                    <a href="mailto:{{ $settings['company_email'] ?? 'info@inve-security.com' }}" class="text-gold-500 dark:text-gold-400 hover:text-gold-600 dark:hover:text-gold-300 text-lg font-medium transition-colors duration-200 block">
                                        {{ $settings['company_email'] ?? 'info@inve-security.com' }}
                                    </a>
                                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">{{ t('email_response') }}</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Social Links -->
                        <div class="p-6 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-2xl border border-gray-100 dark:border-gray-700 animate-slide-up animation-delay-400">
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">{{ t('follow_us') }}</h3>
                            <div class="flex gap-3">
                                <a href="{{ $settings['linkedin_url'] ?? '#' }}" target="_blank" class="w-10 h-10 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center hover:bg-gold-500 hover:text-white transition-all duration-300 group">
                                    <i class="fab fa-linkedin-in text-gray-600 dark:text-gray-400 group-hover:text-white"></i>
                                </a>
                                <a href="{{ $settings['twitter_url'] ?? '#' }}" target="_blank" class="w-10 h-10 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center hover:bg-gold-500 hover:text-white transition-all duration-300 group">
                                    <i class="fab fa-twitter text-gray-600 dark:text-gray-400 group-hover:text-white"></i>
                                </a>
                                <a href="{{ $settings['instagram_url'] ?? '#' }}" target="_blank" class="w-10 h-10 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center hover:bg-gold-500 hover:text-white transition-all duration-300 group">
                                    <i class="fab fa-instagram text-gray-600 dark:text-gray-400 group-hover:text-white"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Premium Contact Form -->
                <div class="lg:col-span-2">
                    <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-3xl p-8 md:p-12 border border-gray-100 dark:border-gray-700 shadow-xl animate-slide-up animation-delay-200">
                        <!-- Form Header -->
                        <div class="mb-8">
                            <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">{{ t('contact_form_title') }}</h2>
                            <p class="text-gray-600 dark:text-gray-300">{{ t('contact_form_subtitle') }}</p>
                        </div>

                        <!-- Success Message -->
                        @if (session('success'))
                            <div class="mb-6 p-6 bg-gradient-to-r from-green-500/10 to-green-400/10 dark:from-green-500/20 dark:to-green-400/5 border border-green-200 dark:border-green-800 rounded-2xl animate-fade-in">
                                <div class="flex items-center gap-4">
                                    <div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
                                        <i class="fas fa-check-circle text-green-500 text-xl"></i>
                                    </div>
                                    <div>
                                        <h3 class="text-lg font-semibold text-green-600 dark:text-green-400">{{ t('form_success_title') }}</h3>
                                        <p class="text-green-600 dark:text-green-400">{{ session('success') }}</p>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <!-- Error Message -->
                        @if (session('error'))
                            <div class="mb-6 p-6 bg-gradient-to-r from-red-500/10 to-red-400/10 dark:from-red-500/20 dark:to-red-400/5 border border-red-200 dark:border-red-800 rounded-2xl animate-fade-in">
                                <div class="flex items-center gap-4">
                                    <div class="w-12 h-12 bg-red-500/20 rounded-xl flex items-center justify-center">
                                        <i class="fas fa-exclamation-circle text-red-500 text-xl"></i>
                                    </div>
                                    <div>
                                        <h3 class="text-lg font-semibold text-red-600 dark:text-red-400">{{ t('form_error_title') }}</h3>
                                        <p class="text-red-600 dark:text-red-400">{{ session('error') }}</p>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <!-- Validation Errors -->
                        @if ($errors->any())
                            <div class="mb-6 p-6 bg-gradient-to-r from-red-500/10 to-red-400/10 dark:from-red-500/20 dark:to-red-400/5 border border-red-200 dark:border-red-800 rounded-2xl animate-fade-in">
                                <div class="flex items-center gap-4">
                                    <div class="w-12 h-12 bg-red-500/20 rounded-xl flex items-center justify-center">
                                        <i class="fas fa-exclamation-triangle text-red-500 text-xl"></i>
                                    </div>
                                    <div>
                                        <h3 class="text-lg font-semibold text-red-600 dark:text-red-400">{{ t('form_error_title') }}</h3>
                                        <ul class="mt-2 text-sm text-red-600 dark:text-red-400">
                                            @foreach ($errors->all() as $error)
                                                <li class="flex items-center gap-2">
                                                    <i class="fas fa-chevron-right text-xs"></i>
                                                    {{ $error }}
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <form id="contactForm" action="{{ route('contact.submit') }}" method="POST" class="space-y-6">
                            @csrf
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <!-- Name -->
                                <div>
                                    <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        {{ t('form_name') }} <span class="text-gold-500">*</span>
                                    </label>
                                    <input type="text" id="name" name="name" required
                                           value="{{ old('name') }}"
                                           class="w-full px-4 py-3 bg-white/50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-gold-500 focus:border-gold-500 dark:focus:ring-gold-400 dark:focus:border-gold-400 outline-none transition-colors duration-200 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 backdrop-blur-sm @error('name') border-red-500 @enderror"
                                           placeholder="{{ t('form_name_placeholder') }}">
                                    @error('name')
                                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                                    @enderror
                                </div>

                                <!-- Email -->
                                <div>
                                    <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        {{ t('form_email') }} <span class="text-gold-500">*</span>
                                    </label>
                                    <input type="email" id="email" name="email" required
                                           value="{{ old('email') }}"
                                           class="w-full px-4 py-3 bg-white/50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-gold-500 focus:border-gold-500 dark:focus:ring-gold-400 dark:focus:border-gold-400 outline-none transition-colors duration-200 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 backdrop-blur-sm @error('email') border-red-500 @enderror"
                                           placeholder="{{ t('form_email_placeholder') }}">
                                    @error('email')
                                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>

                            <!-- Phone -->
                            <div>
                                <label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    {{ t('form_phone') }}
                                </label>
                                <input type="tel" id="phone" name="phone"
                                       value="{{ old('phone') }}"
                                       class="w-full px-4 py-3 bg-white/50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-gold-500 focus:border-gold-500 dark:focus:ring-gold-400 dark:focus:border-gold-400 outline-none transition-colors duration-200 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 backdrop-blur-sm @error('phone') border-red-500 @enderror"
                                       placeholder="{{ t('form_phone_placeholder') }}">
                                @error('phone')
                                    <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Branch -->
                            <div>
                                <label for="branch" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    {{ t('form_select_branch') }}
                                </label>
                                <select id="branch" name="branch"
                                        class="w-full px-4 py-3 bg-white/50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-gold-500 focus:border-gold-500 dark:focus:ring-gold-400 dark:focus:border-gold-400 outline-none transition-colors duration-200 text-gray-900 dark:text-white appearance-none backdrop-blur-sm @error('branch') border-red-500 @enderror">
                                    <option value="">{{ t('form_select_branch_placeholder') }}</option>
                                    @foreach ($branches as $branch)
                                        <option value="{{ $branch->id }}" {{ old('branch') == $branch->id ? 'selected' : '' }}>
                                            {{ $branch->name }} @if($branch->city) - {{ $branch->city }} @endif
                                        </option>
                                    @endforeach
                                </select>
                                @error('branch')
                                    <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Message -->
                            <div>
                                <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    {{ t('form_message') }} <span class="text-gold-500">*</span>
                                </label>
                                <textarea id="message" name="message" rows="6" required
                                          class="w-full px-4 py-3 bg-white/50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-gold-500 focus:border-gold-500 dark:focus:ring-gold-400 dark:focus:border-gold-400 outline-none transition-colors duration-200 text-gray-900 dark:text-white resize-none placeholder-gray-500 dark:placeholder-gray-400 backdrop-blur-sm @error('message') border-red-500 @enderror"
                                          placeholder="{{ t('form_message_placeholder') }}">{{ old('message') }}</textarea>
                                @error('message')
                                    <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Submit Button -->
                            <div class="pt-4">
                                <button type="submit" id="submitButton"
                                        class="w-full px-8 py-4 bg-gradient-to-r from-gold-500 to-gold-600 text-white font-semibold rounded-xl hover:shadow-lg hover:shadow-gold-500/30 transition-all duration-300 gap-3 flex items-center justify-center disabled:opacity-70 disabled:cursor-not-allowed btn-gold">
                                    <span id="buttonText">{{ t('form_submit') }}</span>
                                    <span id="buttonSpinner" class="hidden">
                                        <i class="fas fa-spinner fa-spin text-lg"></i>
                                    </span>
                                    <i id="buttonIcon" class="fas fa-paper-plane text-lg"></i>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- PREMIUM MAP SECTION -->
    <section class="py-20 bg-gradient-to-b from-white via-gold-50/30 to-white dark:from-gray-900 dark:via-gold-900/10 dark:to-gray-900">
        <div class="max-w-6xl mx-auto px-6">
            <div class="text-center mb-12 animate-slide-up">
                <div class="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-gold-500/10 to-transparent dark:from-gold-500/5 border border-gold-500/20 rounded-full mb-6">
                    <span class="text-sm font-semibold text-gold-600 dark:text-gold-400">Our Location</span>
                </div>
                
                <h2 class="text-4xl lg:text-5xl font-bold mb-6 text-gray-900 dark:text-white">
                    {{ t('find_us_title') }}
                </h2>
                <p class="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
                    {{ t('find_us_subtitle') }}
                </p>
            </div>

            <!-- Premium Map Container -->
            <div class="relative rounded-3xl overflow-hidden border-8 border-transparent bg-gradient-to-br from-gold-500 via-gold-400 to-gold-500 p-1 animate-gradient-x">
                <div class="w-full h-full rounded-2xl overflow-hidden border border-gray-200 dark:border-gray-700 shadow-2xl">
                    <!-- Map Info Card -->
                    <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm">
                        @if(isset($settings['google_map_embed']) && !empty($settings['google_map_embed']))
                            {!! $settings['google_map_embed'] !!}
                        @else
                            <div class="h-96 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 flex items-center justify-center">
                                <div class="text-center p-8">
                                    <div class="w-16 h-16 bg-gradient-to-br from-gold-500/20 to-gold-300/30 rounded-2xl flex items-center justify-center mx-auto mb-4">
                                        <i class="fas fa-map-marker-alt text-gold-500 text-2xl"></i>
                                    </div>
                                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Location Map</h3>
                                    <p class="text-gray-600 dark:text-gray-400 max-w-md mx-auto">
                                        {{ $settings['company_address'] ?? 'Riyadh, Saudi Arabia' }}
                                    </p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Custom Animations -->
    <style>
        @keyframes pulse-gold {
            0%, 100% {
                opacity: 0.7;
            }
            50% {
                opacity: 0.4;
            }
        }

        @keyframes gradient-x {
            0%, 100% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
        }

        .animate-pulse-gold {
            animation: pulse-gold 3s ease-in-out infinite;
        }

        .animate-gradient-x {
            background-size: 200% auto;
            animation: gradient-x 3s ease infinite;
        }

        .animate-slide-up {
            animation: slideUp 0.6s ease-out forwards;
            opacity: 0;
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fade-in {
            animation: fadeIn 0.8s ease-out forwards;
            opacity: 0;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        .animation-delay-100 {
            animation-delay: 100ms;
        }

        .animation-delay-200 {
            animation-delay: 200ms;
        }

        .animation-delay-300 {
            animation-delay: 300ms;
        }

        .animation-delay-400 {
            animation-delay: 400ms;
        }
        
        /* Gold Button Styles */
        .btn-gold {
            background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(250, 204, 21, 0.3);
        }

        .btn-gold:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(250, 204, 21, 0.4);
            background: linear-gradient(135deg, #eab308 0%, #facc15 100%);
        }

        .btn-gold::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transform: translateX(-100%);
        }

        .btn-gold:hover::after {
            animation: shimmer 1.5s infinite;
        }
        
        @keyframes shimmer {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(100%);
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const contactForm = document.getElementById('contactForm');
            const submitButton = document.getElementById('submitButton');
            const buttonText = document.getElementById('buttonText');
            const buttonSpinner = document.getElementById('buttonSpinner');
            const buttonIcon = document.getElementById('buttonIcon');

            contactForm.addEventListener('submit', function() {
                // Only show loading state, don't prevent form submission
                submitButton.disabled = true;
                buttonIcon.classList.add('hidden');
                buttonSpinner.classList.remove('hidden');
                buttonText.textContent = '{{ t('form_submitting') }}';
            });

            // Add focus styles to form inputs
            const formInputs = contactForm.querySelectorAll('input, textarea, select');
            formInputs.forEach(input => {
                input.addEventListener('focus', function() {
                    this.parentElement.classList.add('ring-2', 'ring-gold-500/20', 'rounded-xl');
                });
                
                input.addEventListener('blur', function() {
                    this.parentElement.classList.remove('ring-2', 'ring-gold-500/20', 'rounded-xl');
                });
            });

            // Phone number formatting (optional)
            const phoneInput = document.getElementById('phone');
            if (phoneInput) {
                phoneInput.addEventListener('input', function(e) {
                    let value = e.target.value.replace(/\D/g, '');
                    if (value.startsWith('966')) {
                        value = '+966 ' + value.substring(3);
                    }
                    e.target.value = value;
                });
            }
        });
    </script>
@endsection