@extends('layouts.app')

@section('title', __('general.contact') . ' - ' . __('general.company_name'))

@section('content')
    <!-- Hero Section -->
    <section class="contact-hero"
        style="padding: 4rem 1rem; background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(255, 215, 0, 0.03)); position: relative; overflow: hidden;">
        <div class="hero-bg"
            style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.1) 0%, transparent 70%); opacity: 0.3; pointer-events: none;">
        </div>

        <div class="container text-center" style="position: relative; z-index: 1; max-width: 1200px; margin: 0 auto;">
            <div class="hero-icon" style="margin-bottom: 2rem;">
                <div
                    style="width: 100px; height: 100px; background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; box-shadow: 0 8px 30px rgba(255, 215, 0, 0.3); animation: pulse 2s infinite;">
                    <i class="fas fa-envelope" style="font-size: 2.5rem; color: var(--primary-dark);"></i>
                </div>
            </div>

            <h1 class="contact-title"
                style="font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Playfair Display', serif @endif; font-size: 2.8rem; color: var(--primary-gold); margin-bottom: 1.5rem; font-weight: 700; text-shadow: 0 2px 10px rgba(255, 215, 0, 0.3); line-height: 1.2;">
                @if(current_locale() === 'ar')
                    اتصل بنا
                @else
                    Contact Us
                @endif
            </h1>

            <p class="contact-subtitle"
                style="font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 1.3rem; color: rgba(255, 255, 255, 0.9); max-width: 700px; margin: 0 auto; line-height: 1.6; font-weight: 400;">
                @if(current_locale() === 'ar')
                    تواصل مع فريقنا المتخصص للحجوزات والاستفسارات أو الحصول على الدعم الفني
                @else
                    Get in touch with our specialized team for bookings, inquiries, or technical support
                @endif
            </p>

            <div class="hero-stats"
                style="display: flex; justify-content: center; gap: 3rem; margin-top: 3rem; flex-wrap: wrap;">
                <div class="stat-item" style="text-align: center;">
                    <div style="font-size: 2rem; color: var(--primary-gold); font-weight: 700; margin-bottom: 0.5rem;">24/7
                    </div>
                    <div
                        style="font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; color: rgba(255, 255, 255, 0.8); font-size: 0.9rem;">
                        @if(current_locale() === 'ar')
                            دعم متواصل
                        @else
                            Support Available
                        @endif
                    </div>
                </div>
                <div class="stat-item" style="text-align: center;">
                    <div style="font-size: 2rem; color: var(--primary-gold); font-weight: 700; margin-bottom: 0.5rem;">
                        &lt;1h</div>
                    <div
                        style="font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; color: rgba(255, 255, 255, 0.8); font-size: 0.9rem;">
                        @if(current_locale() === 'ar')
                            وقت الاستجابة
                        @else
                            Response Time
                        @endif
                    </div>
                </div>
                <div class="stat-item" style="text-align: center;">
                    <div style="font-size: 2rem; color: var(--primary-gold); font-weight: 700; margin-bottom: 0.5rem;">100%
                    </div>
                    <div
                        style="font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; color: rgba(255, 255, 255, 0.8); font-size: 0.9rem;">
                        @if(current_locale() === 'ar')
                            رضا العملاء
                        @else
                            Customer Satisfaction
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Information -->
    <section class="contact-section" style="padding: 5rem 1rem;">
        <div class="container" style="max-width: 1200px; margin: 0 auto;">
            <div class="contact-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;">
                <!-- Contact Form -->
                <div class="contact-form-container glass-morphism"
                    style="padding: 2.5rem; border-radius: 20px; backdrop-filter: blur(20px); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);">
                    <div class="form-header" style="margin-bottom: 2rem; text-align: center;">
                        <div class="form-icon" style="margin-bottom: 1rem;">
                            <div
                                style="width: 60px; height: 60px; background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);">
                                <i class="fas fa-envelope" style="font-size: 1.5rem; color: var(--primary-dark);"></i>
                            </div>
                        </div>
                        <h2 class="form-title"
                            style="font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Playfair Display', serif @endif; font-size: 1.8rem; color: var(--primary-gold); margin: 0; font-weight: 600;">
                            @if(current_locale() === 'ar')
                                أرسل لنا رسالة
                            @else
                                {{ __('Send us a Message') }}
                            @endif
                        </h2>
                        <p style="color: rgba(255, 255, 255, 0.8); margin: 0.5rem 0 0 0; font-size: 0.95rem;">
                            @if(current_locale() === 'ar')
                                سنرد عليك في أقرب وقت ممكن
                            @else
                                We'll get back to you as soon as possible
                            @endif
                        </p>
                    </div>

                    <form class="contact-form" action="#" method="POST">
                        @csrf
                        <div class="form-row"
                            style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem;">
                            <div class="form-group">
                                <label for="first_name" class="form-label"
                                    style="display: block; margin-bottom: 0.75rem; color: var(--primary-gold); font-weight: 600; font-size: 0.95rem; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                                    <i class="fas fa-user"
                                        style="margin-{{ current_locale() === 'ar' ? 'right' : 'left' }}: 0.5rem; font-size: 0.9rem;"></i>
                                    @if(current_locale() === 'ar')
                                        الاسم الأول
                                    @else
                                        {{ __('general.first_name') }}
                                    @endif
                                </label>
                                <input type="text" id="first_name" name="first_name" required class="form-input"
                                    style="width: 100%; padding: 15px 20px; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.15); border-radius: 12px; color: white; font-size: 1rem; transition: all 0.3s ease; backdrop-filter: blur(10px); direction: {{ current_locale() === 'ar' ? 'rtl' : 'ltr' }}; text-align: {{ current_locale() === 'ar' ? 'right' : 'left' }}; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;"
                                    placeholder="{{ current_locale() === 'ar' ? 'الاسم الأول' : __('general.first_name') }}"
                                    onfocus="this.style.borderColor='var(--primary-gold)'; this.style.boxShadow='0 0 0 3px rgba(255, 215, 0, 0.1)'; this.style.background='rgba(255, 255, 255, 0.12)'"
                                    onblur="this.style.borderColor='rgba(255, 255, 255, 0.15)'; this.style.boxShadow='none'; this.style.background='rgba(255, 255, 255, 0.08)'">
                            </div>
                            <div class="form-group">
                                <label for="last_name" class="form-label"
                                    style="display: block; margin-bottom: 0.75rem; color: var(--primary-gold); font-weight: 600; font-size: 0.95rem; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                                    <i class="fas fa-user"
                                        style="margin-{{ current_locale() === 'ar' ? 'right' : 'left' }}: 0.5rem; font-size: 0.9rem;"></i>
                                    @if(current_locale() === 'ar')
                                        اسم العائلة
                                    @else
                                        {{ __('general.last_name') }}
                                    @endif
                                </label>
                                <input type="text" id="last_name" name="last_name" required class="form-input"
                                    style="width: 100%; padding: 15px 20px; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.15); border-radius: 12px; color: white; font-size: 1rem; transition: all 0.3s ease; backdrop-filter: blur(10px); direction: {{ current_locale() === 'ar' ? 'rtl' : 'ltr' }}; text-align: {{ current_locale() === 'ar' ? 'right' : 'left' }}; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;"
                                    placeholder="{{ current_locale() === 'ar' ? 'اسم العائلة' : __('general.last_name') }}"
                                    onfocus="this.style.borderColor='var(--primary-gold)'; this.style.boxShadow='0 0 0 3px rgba(255, 215, 0, 0.1)'; this.style.background='rgba(255, 255, 255, 0.12)'"
                                    onblur="this.style.borderColor='rgba(255, 255, 255, 0.15)'; this.style.boxShadow='none'; this.style.background='rgba(255, 255, 255, 0.08)'">
                            </div>
                        </div>

                        <div class="form-group" style="margin-bottom: 1.5rem;">
                            <label for="email" class="form-label"
                                style="display: block; margin-bottom: 0.75rem; color: var(--primary-gold); font-weight: 600; font-size: 0.95rem; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                                <i class="fas fa-envelope"
                                    style="margin-{{ current_locale() === 'ar' ? 'right' : 'left' }}: 0.5rem; font-size: 0.9rem;"></i>
                                @if(current_locale() === 'ar')
                                    البريد الإلكتروني
                                @else
                                    {{ __('general.email') }}
                                @endif
                            </label>
                            <input type="email" id="email" name="email" required class="form-input"
                                style="width: 100%; padding: 15px 20px; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.15); border-radius: 12px; color: white; font-size: 1rem; transition: all 0.3s ease; backdrop-filter: blur(10px); direction: ltr; text-align: left; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;"
                                placeholder="{{ current_locale() === 'ar' ? 'example@email.com' : __('general.email') }}"
                                onfocus="this.style.borderColor='var(--primary-gold)'; this.style.boxShadow='0 0 0 3px rgba(255, 215, 0, 0.1)'; this.style.background='rgba(255, 255, 255, 0.12)'"
                                onblur="this.style.borderColor='rgba(255, 255, 255, 0.15)'; this.style.boxShadow='none'; this.style.background='rgba(255, 255, 255, 0.08)'">
                        </div>

                        <div class="form-group" style="margin-bottom: 1.5rem;">
                            <label for="phone" class="form-label"
                                style="display: block; margin-bottom: 0.75rem; color: var(--primary-gold); font-weight: 600; font-size: 0.95rem; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                                <i class="fas fa-phone"
                                    style="margin-{{ current_locale() === 'ar' ? 'right' : 'left' }}: 0.5rem; font-size: 0.9rem;"></i>
                                @if(current_locale() === 'ar')
                                    رقم الهاتف
                                @else
                                    {{ __('general.phone') }}
                                @endif
                            </label>
                            <input type="tel" id="phone" name="phone" class="form-input"
                                style="width: 100%; padding: 15px 20px; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.15); border-radius: 12px; color: white; font-size: 1rem; transition: all 0.3s ease; backdrop-filter: blur(10px); direction: ltr; text-align: left; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;"
                                placeholder="{{ current_locale() === 'ar' ? '+968 12345678' : __('general.phone') }}"
                                onfocus="this.style.borderColor='var(--primary-gold)'; this.style.boxShadow='0 0 0 3px rgba(255, 215, 0, 0.1)'; this.style.background='rgba(255, 255, 255, 0.12)'"
                                onblur="this.style.borderColor='rgba(255, 255, 255, 0.15)'; this.style.boxShadow='none'; this.style.background='rgba(255, 255, 255, 0.08)'">
                        </div>

                        <div class="form-group" style="margin-bottom: 1.5rem;">
                            <label for="subject" class="form-label"
                                style="display: block; margin-bottom: 0.75rem; color: var(--primary-gold); font-weight: 600; font-size: 0.95rem; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                                <i class="fas fa-tag"
                                    style="margin-{{ current_locale() === 'ar' ? 'right' : 'left' }}: 0.5rem; font-size: 0.9rem;"></i>
                                @if(current_locale() === 'ar')
                                    الموضوع
                                @else
                                    {{ __('Subject') }}
                                @endif
                            </label>
                            <select id="subject" name="subject" required class="form-input"
                                style="width: 100%; padding: 15px 20px; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.15); border-radius: 12px; color: white; font-size: 1rem; transition: all 0.3s ease; backdrop-filter: blur(10px); direction: {{ current_locale() === 'ar' ? 'rtl' : 'ltr' }}; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;"
                                onfocus="this.style.borderColor='var(--primary-gold)'; this.style.boxShadow='0 0 0 3px rgba(255, 215, 0, 0.1)'; this.style.background='rgba(255, 255, 255, 0.12)'"
                                onblur="this.style.borderColor='rgba(255, 255, 255, 0.15)'; this.style.boxShadow='none'; this.style.background='rgba(255, 255, 255, 0.08)'">
                                <option value="" style="background: var(--primary-dark); color: white;">
                                    @if(current_locale() === 'ar')
                                        اختر الموضوع
                                    @else
                                        {{ __('Select a subject') }}
                                    @endif
                                </option>
                                <option value="booking" style="background: var(--primary-dark); color: white;">
                                    @if(current_locale() === 'ar')
                                        استفسار حجز
                                    @else
                                        {{ __('Booking Inquiry') }}
                                    @endif
                                </option>
                                <option value="support" style="background: var(--primary-dark); color: white;">
                                    @if(current_locale() === 'ar')
                                        دعم العملاء
                                    @else
                                        {{ __('Customer Support') }}
                                    @endif
                                </option>
                                <option value="fleet" style="background: var(--primary-dark); color: white;">
                                    @if(current_locale() === 'ar')
                                        معلومات الأسطول
                                    @else
                                        {{ __('Fleet Information') }}
                                    @endif
                                </option>
                                <option value="partnership" style="background: var(--primary-dark); color: white;">
                                    @if(current_locale() === 'ar')
                                        شراكة
                                    @else
                                        {{ __('Partnership') }}
                                    @endif
                                </option>
                                <option value="other" style="background: var(--primary-dark); color: white;">
                                    @if(current_locale() === 'ar')
                                        أخرى
                                    @else
                                        {{ __('Other') }}
                                    @endif
                                </option>
                            </select>
                        </div>

                        <div class="form-group" style="margin-bottom: 2rem;">
                            <label for="message" class="form-label"
                                style="display: block; margin-bottom: 0.75rem; color: var(--primary-gold); font-weight: 600; font-size: 0.95rem; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                                <i class="fas fa-comment"
                                    style="margin-{{ current_locale() === 'ar' ? 'right' : 'left' }}: 0.5rem; font-size: 0.9rem;"></i>
                                @if(current_locale() === 'ar')
                                    الرسالة
                                @else
                                    Message
                                @endif
                            </label>
                            <textarea id="message" name="message" rows="5" required class="form-input"
                                style="width: 100%; padding: 15px 20px; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.15); border-radius: 12px; color: white; font-size: 1rem; transition: all 0.3s ease; backdrop-filter: blur(10px); resize: vertical; min-height: 120px; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; direction: {{ current_locale() === 'ar' ? 'rtl' : 'ltr' }}; text-align: {{ current_locale() === 'ar' ? 'right' : 'left' }};"
                                placeholder="{{ current_locale() === 'ar' ? 'أخبرنا كيف يمكننا مساعدتك...' : 'Tell us how we can help you...' }}"
                                onfocus="this.style.borderColor='var(--primary-gold)'; this.style.boxShadow='0 0 0 3px rgba(255, 215, 0, 0.1)'; this.style.background='rgba(255, 255, 255, 0.12)'"
                                onblur="this.style.borderColor='rgba(255, 255, 255, 0.15)'; this.style.boxShadow='none'; this.style.background='rgba(255, 255, 255, 0.08)'"></textarea>
                        </div>

                        <button type="submit" class="contact-submit-btn"
                            style="width: 100%; padding: 16px 24px; background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); color: var(--primary-dark); border: none; border-radius: 12px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3); font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;"
                            onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 20px rgba(255, 215, 0, 0.4)'"
                            onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 15px rgba(255, 215, 0, 0.3)'">
                            <i class="fas fa-paper-plane"
                                style="margin-{{ current_locale() === 'ar' ? 'right' : 'left' }}: 0.5rem;"></i>
                            @if(current_locale() === 'ar')
                                إرسال الرسالة
                            @else
                                Send Message
                            @endif
                        </button>
                    </form>
                </div>

                <!-- Contact Information -->
                <div>
                    <div class="glass-card" style="margin-bottom: 2rem;">
                        <div class="contact-info-header" style="text-align: center; margin-bottom: 2rem;">
                            <div
                                style="width: 60px; height: 60px; background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);">
                                <i class="fas fa-info-circle" style="font-size: 1.5rem; color: var(--primary-dark);"></i>
                            </div>
                            <h3
                                style="color: var(--primary-gold); margin: 0; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Playfair Display', serif @endif; font-size: 1.6rem; font-weight: 600;">
                                @if(current_locale() === 'ar')
                                    معلومات التواصل
                                @else
                                    Contact Information
                                @endif
                            </h3>
                        </div>

                        <div style="display: flex; flex-direction: column; gap: 1.5rem;">
                            <div class="contact-info-item"
                                style="display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem; background: rgba(255, 255, 255, 0.03); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease;"
                                onmouseover="this.style.background='rgba(255, 215, 0, 0.05)'; this.style.borderColor='rgba(255, 215, 0, 0.2)'; this.style.transform='translateY(-2px)'"
                                onmouseout="this.style.background='rgba(255, 255, 255, 0.03)'; this.style.borderColor='rgba(255, 255, 255, 0.1)'; this.style.transform='translateY(0)'">
                                <div class="contact-icon"
                                    style="background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); color: var(--primary-dark); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3); flex-shrink: 0;">
                                    <i class="fas fa-phone" style="font-size: 1.2rem;"></i>
                                </div>
                                <div class="contact-details">
                                    <h4
                                        style="color: var(--primary-gold); margin-bottom: 0.5rem; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 1.1rem; font-weight: 600;">
                                        @if(current_locale() === 'ar')
                                            الهاتف
                                        @else
                                            Phone
                                        @endif
                                    </h4>
                                    <p
                                        style="color: rgba(255, 255, 255, 0.9); margin: 0; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 1rem; direction: ltr;">
                                        +968 2451 9223</p>
                                    <p
                                        style="color: rgba(255, 255, 255, 0.6); margin: 0.25rem 0 0 0; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 0.85rem;">
                                        @if(current_locale() === 'ar')
                                            دعم العملاء 24/7
                                        @else
                                            24/7 Customer Support
                                        @endif
                                    </p>
                                </div>
                            </div>

                            <div class="contact-info-item"
                                style="display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem; background: rgba(255, 255, 255, 0.03); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease;"
                                onmouseover="this.style.background='rgba(255, 215, 0, 0.05)'; this.style.borderColor='rgba(255, 215, 0, 0.2)'; this.style.transform='translateY(-2px)'"
                                onmouseout="this.style.background='rgba(255, 255, 255, 0.03)'; this.style.borderColor='rgba(255, 255, 255, 0.1)'; this.style.transform='translateY(0)'">
                                <div class="contact-icon"
                                    style="background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); color: var(--primary-dark); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3); flex-shrink: 0;">
                                    <i class="fas fa-envelope" style="font-size: 1.2rem;"></i>
                                </div>
                                <div class="contact-details">
                                    <h4
                                        style="color: var(--primary-gold); margin-bottom: 0.5rem; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 1.1rem; font-weight: 600;">
                                        @if(current_locale() === 'ar')
                                            البريد الإلكتروني
                                        @else
                                            Email
                                        @endif
                                    </h4>
                                    <p
                                        style="color: rgba(255, 255, 255, 0.9); margin: 0; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 1rem; direction: ltr;">
                                        info@qrover.om</p>
                                    <p
                                        style="color: rgba(255, 255, 255, 0.6); margin: 0.25rem 0 0 0; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 0.85rem;">
                                        @if(current_locale() === 'ar')
                                            الاستفسارات العامة
                                        @else
                                            General Inquiries
                                        @endif
                                    </p>
                                </div>
                            </div>

                            <div class="contact-info-item"
                                style="display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem; background: rgba(255, 255, 255, 0.03); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease;"
                                onmouseover="this.style.background='rgba(255, 215, 0, 0.05)'; this.style.borderColor='rgba(255, 215, 0, 0.2)'; this.style.transform='translateY(-2px)'"
                                onmouseout="this.style.background='rgba(255, 255, 255, 0.03)'; this.style.borderColor='rgba(255, 255, 255, 0.1)'; this.style.transform='translateY(0)'">
                                <div class="contact-icon"
                                    style="background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); color: var(--primary-dark); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3); flex-shrink: 0;">
                                    <i class="fas fa-headset" style="font-size: 1.2rem;"></i>
                                </div>
                                <div class="contact-details">
                                    <h4
                                        style="color: var(--primary-gold); margin-bottom: 0.5rem; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 1.1rem; font-weight: 600;">
                                        @if(current_locale() === 'ar')
                                            الدعم الطارئ
                                        @else
                                            Emergency Support
                                        @endif
                                    </h4>
                                    <p
                                        style="color: rgba(255, 255, 255, 0.9); margin: 0; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 1rem; direction: ltr;">
                                        +968 9999 0000</p>
                                    <p
                                        style="color: rgba(255, 255, 255, 0.6); margin: 0.25rem 0 0 0; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 0.85rem;">
                                        @if(current_locale() === 'ar')
                                            خط الطوارئ 24/7
                                        @else
                                            24/7 Emergency Line
                                        @endif
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="working-hours-card glass-morphism"
                        style="padding: 2.5rem; border-radius: 20px; backdrop-filter: blur(20px); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); margin-bottom: 2rem;">
                        <div class="working-hours-header" style="text-align: center; margin-bottom: 2rem;">
                            <div
                                style="width: 60px; height: 60px; background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);">
                                <i class="fas fa-clock" style="font-size: 1.5rem; color: var(--primary-dark);"></i>
                            </div>
                            <h3
                                style="color: var(--primary-gold); margin: 0; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Playfair Display', serif @endif; font-size: 1.6rem; font-weight: 600;">
                                @if(current_locale() === 'ar')
                                    ساعات العمل
                                @else
                                    Working Hours
                                @endif
                            </h3>
                        </div>

                        <div class="working-hours-list" style="display: flex; flex-direction: column; gap: 1.5rem;">
                            <div class="working-hours-item"
                                style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: rgba(255, 255, 255, 0.03); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease;"
                                onmouseover="this.style.background='rgba(255, 215, 0, 0.05)'; this.style.borderColor='rgba(255, 215, 0, 0.2)'"
                                onmouseout="this.style.background='rgba(255, 255, 255, 0.03)'; this.style.borderColor='rgba(255, 255, 255, 0.1)'">
                                <span
                                    style="font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; color: rgba(255, 255, 255, 0.9); font-weight: 500;">
                                    @if(current_locale() === 'ar')
                                        السبت - الخميس
                                    @else
                                        Saturday - Thursday
                                    @endif
                                </span>
                                <span
                                    style="color: var(--primary-gold); font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-weight: 600; direction: ltr;">8:00
                                    AM - 10:00 PM</span>
                            </div>
                            <div class="working-hours-item"
                                style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: rgba(255, 255, 255, 0.03); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease;"
                                onmouseover="this.style.background='rgba(255, 215, 0, 0.05)'; this.style.borderColor='rgba(255, 215, 0, 0.2)'"
                                onmouseout="this.style.background='rgba(255, 255, 255, 0.03)'; this.style.borderColor='rgba(255, 255, 255, 0.1)'">
                                <span
                                    style="font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; color: rgba(255, 255, 255, 0.9); font-weight: 500;">
                                    @if(current_locale() === 'ar')
                                        الجمعة
                                    @else
                                        Friday
                                    @endif
                                </span>
                                <span
                                    style="color: var(--primary-gold); font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-weight: 600; direction: ltr;">2:00
                                    PM - 10:00 PM</span>
                            </div>
                            <div class="working-hours-item"
                                style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: rgba(255, 255, 255, 0.03); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease;"
                                onmouseover="this.style.background='rgba(255, 215, 0, 0.05)'; this.style.borderColor='rgba(255, 215, 0, 0.2)'"
                                onmouseout="this.style.background='rgba(255, 255, 255, 0.03)'; this.style.borderColor='rgba(255, 255, 255, 0.1)'">
                                <span
                                    style="font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; color: rgba(255, 255, 255, 0.9); font-weight: 500;">
                                    @if(current_locale() === 'ar')
                                        الدعم الطارئ
                                    @else
                                        Emergency Support
                                    @endif
                                </span>
                                <span
                                    style="color: var(--primary-gold); font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-weight: 600;">24/7</span>
                            </div>
                        </div>
                    </div>

                    <div class="social-media-card glass-morphism"
                        style="padding: 2.5rem; border-radius: 20px; backdrop-filter: blur(20px); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);">
                        <div class="social-media-header" style="text-align: center; margin-bottom: 2rem;">
                            <div
                                style="width: 60px; height: 60px; background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);">
                                <i class="fas fa-share-alt" style="font-size: 1.5rem; color: var(--primary-dark);"></i>
                            </div>
                            <h3
                                style="color: var(--primary-gold); margin: 0; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Playfair Display', serif @endif; font-size: 1.6rem; font-weight: 600;">
                                @if(current_locale() === 'ar')
                                    تابعنا على
                                @else
                                    Follow Us
                                @endif
                            </h3>
                            <p
                                style="color: rgba(255, 255, 255, 0.7); margin: 0.5rem 0 0 0; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 0.9rem;">
                                @if(current_locale() === 'ar')
                                    ابق على اطلاع بآخر العروض والأخبار
                                @else
                                    Stay updated with our latest offers and news
                                @endif
                            </p>
                        </div>

                        <div class="social-media-links"
                            style="display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap;">
                            <a href="https://www.facebook.com/people/Q-ROVER/61578337241820/" class="social-link"
                                style="width: 65px; height: 65px; background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 165, 0, 0.1) 100%); backdrop-filter: blur(20px); border: 2px solid rgba(255, 215, 0, 0.4); border-radius: 20px; display: flex; align-items: center; justify-content: center; color: var(--primary-gold); text-decoration: none; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; box-shadow: 0 8px 25px rgba(255, 215, 0, 0.15);"
                                onmouseover="this.style.transform='translateY(-5px) scale(1.05)'; this.style.boxShadow='0 12px 35px rgba(255, 215, 0, 0.25)'; this.style.borderColor='rgba(255, 215, 0, 0.6)'"
                                onmouseout="this.style.transform='translateY(0) scale(1)'; this.style.boxShadow='0 8px 25px rgba(255, 215, 0, 0.15)'; this.style.borderColor='rgba(255, 215, 0, 0.4)'">
                               <i class="fab fa-facebook-f"
                                    style="font-size: 1.3rem; filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3));"></i>
                            </a>
                            <a href="https://www.instagram.com/qrover.om" class="social-link"
                                style="width: 65px; height: 65px; background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 165, 0, 0.1) 100%); backdrop-filter: blur(20px); border: 2px solid rgba(255, 215, 0, 0.4); border-radius: 20px; display: flex; align-items: center; justify-content: center; color: var(--primary-gold); text-decoration: none; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; box-shadow: 0 8px 25px rgba(255, 215, 0, 0.15);"
                                onmouseover="this.style.transform='translateY(-5px) scale(1.05)'; this.style.boxShadow='0 12px 35px rgba(255, 215, 0, 0.25)'; this.style.borderColor='rgba(255, 215, 0, 0.6)'"
                                onmouseout="this.style.transform='translateY(0) scale(1)'; this.style.boxShadow='0 8px 25px rgba(255, 215, 0, 0.15)'; this.style.borderColor='rgba(255, 215, 0, 0.4)'">
                                <i class="fab fa-instagram"
                                    style="font-size: 1.3rem; filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3));"></i>
                            </a>
                            <a href="#" class="social-link"
                                style="width: 65px; height: 65px; background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 165, 0, 0.1) 100%); backdrop-filter: blur(20px); border: 2px solid rgba(255, 215, 0, 0.4); border-radius: 20px; display: flex; align-items: center; justify-content: center; color: var(--primary-gold); text-decoration: none; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; box-shadow: 0 8px 25px rgba(255, 215, 0, 0.15);"
                                onmouseover="this.style.transform='translateY(-5px) scale(1.05)'; this.style.boxShadow='0 12px 35px rgba(255, 215, 0, 0.25)'; this.style.borderColor='rgba(255, 215, 0, 0.6)'"
                                onmouseout="this.style.transform='translateY(0) scale(1)'; this.style.boxShadow='0 8px 25px rgba(255, 215, 0, 0.15)'; this.style.borderColor='rgba(255, 215, 0, 0.4)'">
                                <i class="fab fa-x-twitter"
                                    style="font-size: 1.3rem; filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3));"></i>
                            </a>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Locations -->
    <section style="padding: 5rem 0; background: rgba(255, 255, 255, 0.02);">
        <div class="container">
            <h2
                style="font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Playfair Display', serif @endif; font-size: 2.5rem; color: var(--primary-gold); margin-bottom: 3rem; text-align: center; font-weight: 600;">
                @if(current_locale() === 'ar')
                    مواقعنا
                @else
                    {{ __('Our Locations') }}
                @endif
            </h2>

            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;">
                <!-- Muscat -->
                <div class="glass-card animate-on-scroll">
                    <h4 style="color: var(--primary-gold); margin-bottom: 1rem; display: flex; align-items: center;">
                        <i class="fas fa-map-marker-alt" style="margin-right: 0.5rem;"></i>
                        {{ __('general.muscat') }}
                    </h4>
                    <div style="margin-bottom: 1rem;">
                        <strong>{{ __('Headquarters') }}</strong>
                        <p style="opacity: 0.9; margin-top: 0.5rem;">Al Khuwair, Muscat 112</p>
                        <p style="opacity: 0.9;">{{ __('general.phone') }}: +968 79077702</p>
                        <p style="opacity: 0.9;">{{ __('general.email') }}: info@qrover.co</p>
                        <p style="opacity: 0.9;">{{ __('general.website') }}: www.qrover.co</p>
                    </div>
                    <div style="margin-bottom: 1rem;">
                        <strong>{{ __('general.airport') }}</strong>
                        <p style="opacity: 0.9; margin-top: 0.5rem;">Muscat International Airport</p>
                        <p style="opacity: 0.9;">{{ __('general.phone') }}: +968 79077702</p>
                    </div>
                </div>

                <!-- Salalah -->
                <div class="glass-card animate-on-scroll">
                    <h4 style="color: var(--primary-gold); margin-bottom: 1rem; display: flex; align-items: center;">
                        <i class="fas fa-map-marker-alt" style="margin-right: 0.5rem;"></i>
                        {{ __('general.salalah') }}
                    </h4>
                    <div style="margin-bottom: 1rem;">
                        <strong>{{ __('City Center') }}</strong>
                        <p style="opacity: 0.9; margin-top: 0.5rem;">Al Hafa, Salalah 211</p>
                        <p style="opacity: 0.9;">{{ __('general.phone') }}: +968 2329 5000</p>
                    </div>
                    <div>
                        <strong>{{ __('general.airport') }}</strong>
                        <p style="opacity: 0.9; margin-top: 0.5rem;">Salalah Airport</p>
                        <p style="opacity: 0.9;">{{ __('general.phone') }}: +968 2329 5001</p>
                    </div>
                </div>

                <!-- Nizwa -->
                <div class="glass-card animate-on-scroll">
                    <h4 style="color: var(--primary-gold); margin-bottom: 1rem; display: flex; align-items: center;">
                        <i class="fas fa-map-marker-alt" style="margin-right: 0.5rem;"></i>
                        {{ __('general.nizwa') }}
                    </h4>
                    <div>
                        <strong>{{ __('Heritage Center') }}</strong>
                        <p style="opacity: 0.9; margin-top: 0.5rem;">Nizwa Souq Area</p>
                        <p style="opacity: 0.9;">{{ __('general.phone') }}: +968 2541 6789</p>
                        <p style="opacity: 0.7; font-size: 0.9rem; margin-top: 0.5rem;">
                            {{ __('Perfect for exploring Oman\'s interior') }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>



    @push('styles')
        <style>
            select option {
                background: var(--primary-dark);
                color: var(--text-light);
            }

            input:focus,
            select:focus,
            textarea:focus {
                outline: none;
                border-color: var(--primary-gold) !important;
                box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
            }

            input::placeholder,
            textarea::placeholder {
                color: rgba(255, 255, 255, 0.5);
            }

            .social-link:hover {
                transform: translateY(-2px);
            }

            /* Enhanced Responsive Design */
            @media (max-width: 768px) {
                .contact-section {
                    padding: 3rem 0.5rem !important;
                }

                .contact-grid {
                    grid-template-columns: 1fr !important;
                    gap: 2rem !important;
                }

                .contact-form-container {
                    padding: 2rem 1.5rem !important;
                    border-radius: 15px !important;
                }

                .form-title {
                    font-size: 1.5rem !important;
                }

                .form-icon>div {
                    width: 50px !important;
                    height: 50px !important;
                }

                .form-icon i {
                    font-size: 1.2rem !important;
                }

                .form-row {
                    grid-template-columns: 1fr !important;
                    gap: 1rem !important;
                }

                .form-input {
                    padding: 12px 16px !important;
                    font-size: 16px !important;
                    /* Prevents zoom on iOS */
                }

                .contact-submit-btn {
                    padding: 14px 20px !important;
                    font-size: 1rem !important;
                }

                .name-grid {
                    grid-template-columns: 1fr !important;
                }

                .locations-grid {
                    grid-template-columns: 1fr !important;
                }
            }

            @media (max-width: 576px) {
                .contact-grid {
                    grid-template-columns: 1fr !important;
                    gap: 2.5rem !important;
                }

                .contact-form-container {
                    padding: 2rem 1.5rem !important;
                }

                .form-row {
                    grid-template-columns: 1fr !important;
                    gap: 1rem !important;
                }

                .locations-grid {
                    grid-template-columns: 1fr !important;
                    gap: 1.5rem !important;
                }

                .social-media-links {
                    gap: 1.2rem !important;
                }

                .hero-stats {
                    gap: 2rem !important;
                }
            }

            @media (max-width: 480px) {
                .contact-section {
                    padding: 2rem 0.5rem !important;
                }

                .contact-form-container {
                    padding: 1.5rem 1rem !important;
                }

                .form-title {
                    font-size: 1.3rem !important;
                }

                .form-group {
                    margin-bottom: 1.25rem !important;
                }

                .form-label {
                    font-size: 0.9rem !important;
                    margin-bottom: 0.5rem !important;
                }

                .form-input {
                    padding: 10px 14px !important;
                }

                textarea.form-input {
                    min-height: 100px !important;
                }
            }

            /* Enhanced Animations */
            @keyframes pulse {

                0%,
                100% {
                    transform: scale(1);
                }

                50% {
                    transform: scale(1.05);
                }
            }

            @keyframes slideInUp {
                from {
                    opacity: 0;
                    transform: translateY(30px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            @keyframes fadeInScale {
                from {
                    opacity: 0;
                    transform: scale(0.9);
                }

                to {
                    opacity: 1;
                    transform: scale(1);
                }
            }

            /* Animation for form elements */
            .form-group {
                animation: slideInUp 0.6s ease-out;
            }

            .form-group:nth-child(1) {
                animation-delay: 0.1s;
            }

            .form-group:nth-child(2) {
                animation-delay: 0.2s;
            }

            .form-group:nth-child(3) {
                animation-delay: 0.3s;
            }

            .form-group:nth-child(4) {
                animation-delay: 0.4s;
            }

            .form-group:nth-child(5) {
                animation-delay: 0.5s;
            }

            .contact-submit-btn {
                animation-delay: 0.6s;
            }

            /* Animation for contact info elements */
            .contact-info-item {
                animation: fadeInScale 0.6s ease-out;
            }

            .contact-info-item:nth-child(1) {
                animation-delay: 0.2s;
            }

            .contact-info-item:nth-child(2) {
                animation-delay: 0.4s;
            }

            .contact-info-item:nth-child(3) {
                animation-delay: 0.6s;
            }

            .working-hours-item {
                animation: slideInUp 0.5s ease-out;
            }

            .working-hours-item:nth-child(1) {
                animation-delay: 0.1s;
            }

            .working-hours-item:nth-child(2) {
                animation-delay: 0.2s;
            }

            .working-hours-item:nth-child(3) {
                animation-delay: 0.3s;
            }

            .social-link {
                animation: fadeInScale 0.5s ease-out;
            }

            .social-link:nth-child(1) {
                animation-delay: 0.1s;
            }

            .social-link:nth-child(2) {
                animation-delay: 0.2s;
            }

            .social-link:nth-child(3) {
                animation-delay: 0.3s;
            }

            .social-link:nth-child(4) {
                animation-delay: 0.4s;
            }

            /* Hero stats animation */
            .stat-item {
                animation: fadeInScale 0.6s ease-out;
            }

            .stat-item:nth-child(1) {
                animation-delay: 0.5s;
            }

            .stat-item:nth-child(2) {
                animation-delay: 0.7s;
            }

            .stat-item:nth-child(3) {
                animation-delay: 0.9s;
            }

            /* Additional responsive improvements */
            @media (max-width: 768px) {
                .hero-stats {
                    gap: 2rem !important;
                }

                .contact-info-item {
                    flex-direction: column !important;
                    text-align: center !important;
                    gap: 1rem !important;
                }

                .working-hours-item {
                    flex-direction: column !important;
                    text-align: center !important;
                    gap: 0.5rem !important;
                }

                .social-media-links {
                    gap: 1rem !important;
                }
            }

            @media (max-width: 480px) {
                .hero-stats {
                    gap: 1.5rem !important;
                }

                .stat-item {
                    min-width: 80px;
                }

                .contact-icon {
                    width: 50px !important;
                    height: 50px !important;
                }

                .social-link {
                    width: 50px !important;
                    height: 50px !important;
                }
            }
        </style>
    @endpush

    @push('scripts')
        <script>
            // Form submission with loading state
            document.addEventListener('DOMContentLoaded', function () {
                const form = document.querySelector('.contact-form');
                const submitBtn = document.querySelector('.contact-submit-btn');

                if (form && submitBtn) {
                    form.addEventListener('submit', function (e) {
                        e.preventDefault(); // Prevent actual submission for demo

                        submitBtn.disabled = true;
                        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin" style="margin-{{ current_locale() === "ar" ? "right" : "left" }}: 0.5rem;"></i>{{ current_locale() === "ar" ? "جاري الإرسال..." : "Sending..." }}';

                        // Simulate form submission
                        setTimeout(() => {
                            Swal.fire({
                                title: '{{ current_locale() === "ar" ? "تم الإرسال!" : "Message Sent!" }}',
                                text: '{{ current_locale() === "ar" ? "شكراً لك! سنتواصل معك قريباً" : "Thank you! We will get back to you soon." }}',
                                icon: 'success',
                                confirmButtonColor: '#FFD700',
                                background: 'rgba(20, 25, 40, 0.95)',
                                color: 'white'
                            }).then(() => {
                                form.reset();
                                submitBtn.disabled = false;
                                submitBtn.innerHTML = '<i class="fas fa-paper-plane" style="margin-{{ current_locale() === "ar" ? "right" : "left" }}: 0.5rem;"></i>{{ current_locale() === "ar" ? "إرسال الرسالة" : "Send Message" }}';
                            });
                        }, 2000);
                    });
                }

                // Add focus effects to form inputs
                const inputs = document.querySelectorAll('.form-input');
                inputs.forEach(input => {
                    input.addEventListener('focus', function () {
                        this.style.transform = 'scale(1.02)';
                    });

                    input.addEventListener('blur', function () {
                        this.style.transform = 'scale(1)';
                    });
                });

                // Character counter for textarea
                const messageTextarea = document.getElementById('message');
                if (messageTextarea) {
                    const maxLength = 500;

                    // Create character counter
                    const counter = document.createElement('div');
                    counter.style.cssText = 'text-align: {{ current_locale() === "ar" ? "right" : "left" }}; margin-top: 0.5rem; font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); font-family: {{ current_locale() === "ar" ? "\'Cairo\', \'Noto Sans Arabic\', sans-serif" : "\'Inter\', sans-serif" }};';
                    counter.innerHTML = `0 / ${maxLength} {{ current_locale() === "ar" ? "حرف" : "characters" }}`;
                    messageTextarea.parentNode.appendChild(counter);

                    messageTextarea.addEventListener('input', function () {
                        const length = this.value.length;
                        counter.innerHTML = `${length} / ${maxLength} {{ current_locale() === "ar" ? "حرف" : "characters" }}`;

                        if (length > maxLength * 0.9) {
                            counter.style.color = '#ffc107';
                        } else if (length > maxLength * 0.8) {
                            counter.style.color = '#fd7e14';
                        } else {
                            counter.style.color = 'rgba(255, 255, 255, 0.6)';
                        }

                        if (length > maxLength) {
                            this.value = this.value.substring(0, maxLength);
                            counter.innerHTML = `${maxLength} / ${maxLength} {{ current_locale() === "ar" ? "حرف (الحد الأقصى)" : "characters (max)" }}`;
                            counter.style.color = '#dc3545';
                        }
                    });
                }

                // Form validation
                const requiredFields = document.querySelectorAll('[required]');
                requiredFields.forEach(field => {
                    field.addEventListener('blur', function () {
                        if (!this.value.trim()) {
                            this.style.borderColor = '#dc3545';
                        } else {
                            this.style.borderColor = '#28a745';
                        }
                    });
                });

                // Email validation
                const emailField = document.getElementById('email');
                if (emailField) {
                    emailField.addEventListener('blur', function () {
                        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                        if (this.value && !emailRegex.test(this.value)) {
                            this.style.borderColor = '#dc3545';
                        } else if (this.value) {
                            this.style.borderColor = '#28a745';
                        }
                    });
                }
            });
        </script>
    @endpush
@endsection