@extends('layouts.app')

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

@section('content')
    <!-- FAQ Page Header -->
    <section class="page-header"
        style="padding: 4rem 1rem 2rem 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="page-header-content" style="max-width: 800px; margin: 0 auto;">
                <div class="page-icon" style="margin-bottom: 1.5rem;">
                    <div
                        style="width: 80px; height: 80px; 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);">
                        <i class="fas fa-question-circle" style="font-size: 2rem; color: var(--primary-dark);"></i>
                    </div>
                </div>
                <h1 class="page-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
                        Frequently Asked Questions
                    @endif
                </h1>
                <p class="page-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
                        Comprehensive answers to the most common questions about our luxury car rental services
                    @endif
                </p>
            </div>
        </div>
    </section>

    <!-- FAQ Content -->
    <section class="faq-section" style="padding: 4rem 1rem;">
        <div class="container" style="max-width: 1000px; margin: 0 auto;">
            <div class="faq-container">

                <!-- FAQ Item 1 -->
                <div class="faq-item glass-morphism"
                    style="margin-bottom: 1.5rem; border-radius: 15px; overflow: hidden; 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="faq-question" onclick="toggleFAQ(this)"
                        style="padding: 2rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;">
                        <h3
                            style="color: var(--primary-gold); margin: 0; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 1.2rem; font-weight: 600;">
                            @if(current_locale() === 'ar')
                                ما هي متطلبات تأجير السيارة؟
                            @else
                                What are the requirements for renting a car?
                            @endif
                        </h3>
                        <i class="fas fa-chevron-down faq-icon"
                            style="color: var(--primary-gold); transition: transform 0.3s ease;"></i>
                    </div>
                    <div class="faq-answer"
                        style="max-height: 0; overflow: hidden; transition: all 0.3s ease; background: rgba(255, 255, 255, 0.02);">
                        <div style="padding: 1.5rem 2.5rem 2.5rem 2.5rem;">
                            <p
                                style="color: rgba(255, 255, 255, 0.9); line-height: 1.8; margin: 0; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 1.05rem;">
                                @if(current_locale() === 'ar')
                                    لتأجير السيارة، تحتاج إلى: رخصة قيادة سارية المفعول، بطاقة هوية أو جواز سفر، بطاقة ائتمان
                                    للدفع والتأمين، والحد الأدنى للعمر 21 سنة. للسيارات الفاخرة، قد نطلب خبرة قيادة لا تقل عن
                                    سنتين.
                                @else
                                    To rent a car, you need: a valid driver's license, ID card or passport, credit card for
                                    payment and security deposit, and minimum age of 21 years. For luxury vehicles, we may
                                    require at least 2 years of driving experience.
                                @endif
                            </p>
                        </div>
                    </div>
                </div>

                <!-- FAQ Item 2 -->
                <div class="faq-item glass-morphism"
                    style="margin-bottom: 1.5rem; border-radius: 15px; overflow: hidden; 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="faq-question" onclick="toggleFAQ(this)"
                        style="padding: 2rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;">
                        <h3
                            style="color: var(--primary-gold); margin: 0; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 1.2rem; font-weight: 600;">
                            @if(current_locale() === 'ar')
                                كيف يمكنني إلغاء أو تعديل حجزي؟
                            @else
                                How can I cancel or modify my booking?
                            @endif
                        </h3>
                        <i class="fas fa-chevron-down faq-icon"
                            style="color: var(--primary-gold); transition: transform 0.3s ease;"></i>
                    </div>
                    <div class="faq-answer"
                        style="max-height: 0; overflow: hidden; transition: all 0.3s ease; background: rgba(255, 255, 255, 0.02);">
                        <div style="padding: 1.5rem 2.5rem 2.5rem 2.5rem;">
                            <p
                                style="color: rgba(255, 255, 255, 0.9); line-height: 1.8; margin: 0; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 1.05rem;">
                                @if(current_locale() === 'ar')
                                    يمكنك إلغاء أو تعديل حجزك مجاناً حتى 24 ساعة قبل موعد الاستلام. للإلغاء أو التعديل، اتصل بنا
                                    على +968 9999 0000 أو راسلنا عبر البريد الإلكتروني. الإلغاء المتأخر قد يخضع لرسوم.
                                @else
                                    You can cancel or modify your booking free of charge up to 24 hours before pickup time. To
                                    cancel or modify, call us at +968 9999 0000 or email us. Late cancellations may be subject
                                    to fees.
                                @endif
                            </p>
                        </div>
                    </div>
                </div>

                <!-- FAQ Item 3 -->
                <div class="faq-item glass-morphism"
                    style="margin-bottom: 1.5rem; border-radius: 15px; overflow: hidden; 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="faq-question" onclick="toggleFAQ(this)"
                        style="padding: 2rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;">
                        <h3
                            style="color: var(--primary-gold); margin: 0; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 1.2rem; font-weight: 600;">
                            @if(current_locale() === 'ar')
                                هل التأمين مشمول في السعر؟
                            @else
                                Is insurance included in the price?
                            @endif
                        </h3>
                        <i class="fas fa-chevron-down faq-icon"
                            style="color: var(--primary-gold); transition: transform 0.3s ease;"></i>
                    </div>
                    <div class="faq-answer"
                        style="max-height: 0; overflow: hidden; transition: all 0.3s ease; background: rgba(255, 255, 255, 0.02);">
                        <div style="padding: 1.5rem 2.5rem 2.5rem 2.5rem;">
                            <p
                                style="color: rgba(255, 255, 255, 0.9); line-height: 1.8; margin: 0; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 1.05rem;">
                                @if(current_locale() === 'ar')
                                    نعم، جميع سياراتنا مؤمنة بالكامل ضد الحوادث والسرقة. التأمين الأساسي مشمول في السعر، ويمكنك
                                    اختيار تأمين إضافي شامل لتقليل المسؤولية المالية. التأمين يغطي الأضرار والحوادث وفقاً للشروط
                                    والأحكام.
                                @else
                                    Yes, all our vehicles are fully insured against accidents and theft. Basic insurance is
                                    included in the price, and you can choose comprehensive additional insurance to reduce
                                    financial liability. Insurance covers damages and accidents according to terms and
                                    conditions.
                                @endif
                            </p>
                        </div>
                    </div>
                </div>

                <!-- FAQ Item 4 -->
                <div class="faq-item glass-morphism"
                    style="margin-bottom: 1.5rem; border-radius: 15px; overflow: hidden; 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="faq-question" onclick="toggleFAQ(this)"
                        style="padding: 2rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;">
                        <h3
                            style="color: var(--primary-gold); margin: 0; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 1.2rem; font-weight: 600;">
                            @if(current_locale() === 'ar')
                                هل يمكنني استلام السيارة من المطار؟
                            @else
                                Can I pick up the car from the airport?
                            @endif
                        </h3>
                        <i class="fas fa-chevron-down faq-icon"
                            style="color: var(--primary-gold); transition: transform 0.3s ease;"></i>
                    </div>
                    <div class="faq-answer"
                        style="max-height: 0; overflow: hidden; transition: all 0.3s ease; background: rgba(255, 255, 255, 0.02);">
                        <div style="padding: 1.5rem 2.5rem 2.5rem 2.5rem;">
                            <p
                                style="color: rgba(255, 255, 255, 0.9); line-height: 1.8; margin: 0; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 1.05rem;">
                                @if(current_locale() === 'ar')
                                    نعم، نوفر خدمة الاستلام والتسليم من مطار مسقط الدولي ومطارات أخرى في عُمان. هذه الخدمة متاحة
                                    على مدار 24 ساعة مع رسوم إضافية بسيطة. يرجى إبلاغنا بتفاصيل الرحلة مسبقاً لضمان وصول السيارة
                                    في الوقت المحدد.
                                @else
                                    Yes, we provide pickup and delivery service from Muscat International Airport and other
                                    airports in Oman. This service is available 24/7 with a small additional fee. Please inform
                                    us of your flight details in advance to ensure the car arrives on time.
                                @endif
                            </p>
                        </div>
                    </div>
                </div>

                <!-- FAQ Item 5 -->
                <div class="faq-item glass-morphism"
                    style="margin-bottom: 1.5rem; border-radius: 15px; overflow: hidden; 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="faq-question" onclick="toggleFAQ(this)"
                        style="padding: 2rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;">
                        <h3
                            style="color: var(--primary-gold); margin: 0; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 1.2rem; font-weight: 600;">
                            @if(current_locale() === 'ar')
                                ما هي سياسة الوقود؟
                            @else
                                What is the fuel policy?
                            @endif
                        </h3>
                        <i class="fas fa-chevron-down faq-icon"
                            style="color: var(--primary-gold); transition: transform 0.3s ease;"></i>
                    </div>
                    <div class="faq-answer"
                        style="max-height: 0; overflow: hidden; transition: all 0.3s ease; background: rgba(255, 255, 255, 0.02);">
                        <div style="padding: 1.5rem 2.5rem 2.5rem 2.5rem;">
                            <p
                                style="color: rgba(255, 255, 255, 0.9); line-height: 1.8; margin: 0; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 1.05rem;">
                                @if(current_locale() === 'ar')
                                    نتبع سياسة "ممتلئ إلى ممتلئ" - تستلم السيارة بخزان وقود ممتلئ وتعيدها بنفس المستوى. إذا لم
                                    تملأ الخزان، سنقوم بتعبئته وخصم التكلفة من التأمين مع رسوم خدمة إضافية.
                                @else
                                    We follow a "full-to-full" fuel policy - you receive the car with a full tank and return it
                                    with the same level. If you don't fill the tank, we will refuel it and deduct the cost from
                                    your deposit plus an additional service fee.
                                @endif
                            </p>
                        </div>
                    </div>
                </div>

                <!-- FAQ Item 6 -->
                <div class="faq-item glass-morphism"
                    style="margin-bottom: 1.5rem; border-radius: 15px; overflow: hidden; 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="faq-question" onclick="toggleFAQ(this)"
                        style="padding: 2rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;">
                        <h3
                            style="color: var(--primary-gold); margin: 0; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 1.2rem; font-weight: 600;">
                            @if(current_locale() === 'ar')
                                هل يمكنني قيادة السيارة خارج عُمان؟
                            @else
                                Can I drive the car outside Oman?
                            @endif
                        </h3>
                        <i class="fas fa-chevron-down faq-icon"
                            style="color: var(--primary-gold); transition: transform 0.3s ease;"></i>
                    </div>
                    <div class="faq-answer"
                        style="max-height: 0; overflow: hidden; transition: all 0.3s ease; background: rgba(255, 255, 255, 0.02);">
                        <div style="padding: 1.5rem 2.5rem 2.5rem 2.5rem;">
                            <p
                                style="color: rgba(255, 255, 255, 0.9); line-height: 1.8; margin: 0; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 1.05rem;">
                                @if(current_locale() === 'ar')
                                    يُسمح بالقيادة إلى دول مجلس التعاون الخليجي (الإمارات والسعودية) بإذن مسبق ووثائق إضافية.
                                    يجب إبلاغنا قبل 48 ساعة من السفر وقد تطبق رسوم إضافية. السفر إلى دول أخرى غير مسموح.
                                @else
                                    Driving to GCC countries (UAE and Saudi Arabia) is allowed with prior permission and
                                    additional documentation. You must inform us 48 hours before travel and additional fees may
                                    apply. Travel to other countries is not permitted.
                                @endif
                            </p>
                        </div>
                    </div>
                </div>

                <!-- FAQ Item 7 -->
                <div class="faq-item glass-morphism"
                    style="margin-bottom: 1.5rem; border-radius: 15px; overflow: hidden; 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="faq-question" onclick="toggleFAQ(this)"
                        style="padding: 2rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;">
                        <h3
                            style="color: var(--primary-gold); margin: 0; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 1.2rem; font-weight: 600;">
                            @if(current_locale() === 'ar')
                                ماذا يحدث في حالة تعطل السيارة؟
                            @else
                                What happens if the car breaks down?
                            @endif
                        </h3>
                        <i class="fas fa-chevron-down faq-icon"
                            style="color: var(--primary-gold); transition: transform 0.3s ease;"></i>
                    </div>
                    <div class="faq-answer"
                        style="max-height: 0; overflow: hidden; transition: all 0.3s ease; background: rgba(255, 255, 255, 0.02);">
                        <div style="padding: 1.5rem 2.5rem 2.5rem 2.5rem;">
                            <p
                                style="color: rgba(255, 255, 255, 0.9); line-height: 1.8; margin: 0; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 1.05rem;">
                                @if(current_locale() === 'ar')
                                    نوفر خدمة المساعدة على الطريق 24/7 مجاناً. في حالة التعطل، اتصل بنا فوراً وسنرسل فريق
                                    الصيانة أو سيارة بديلة حسب الحاجة. جميع سياراتنا تخضع لصيانة دورية لتقليل احتمالية الأعطال.
                                @else
                                    We provide 24/7 roadside assistance free of charge. In case of breakdown, call us
                                    immediately and we'll send a maintenance team or replacement vehicle as needed. All our
                                    vehicles undergo regular maintenance to minimize breakdown probability.
                                @endif
                            </p>
                        </div>
                    </div>
                </div>

                <!-- FAQ Item 8 -->
                <div class="faq-item glass-morphism"
                    style="margin-bottom: 1.5rem; border-radius: 15px; overflow: hidden; 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="faq-question" onclick="toggleFAQ(this)"
                        style="padding: 2rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;">
                        <h3
                            style="color: var(--primary-gold); margin: 0; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 1.2rem; font-weight: 600;">
                            @if(current_locale() === 'ar')
                                هل توجد خصومات للإيجار طويل المدى؟
                            @else
                                Are there discounts for long-term rentals?
                            @endif
                        </h3>
                        <i class="fas fa-chevron-down faq-icon"
                            style="color: var(--primary-gold); transition: transform 0.3s ease;"></i>
                    </div>
                    <div class="faq-answer"
                        style="max-height: 0; overflow: hidden; transition: all 0.3s ease; background: rgba(255, 255, 255, 0.02);">
                        <div style="padding: 1.5rem 2.5rem 2.5rem 2.5rem;">
                            <p
                                style="color: rgba(255, 255, 255, 0.9); line-height: 1.8; margin: 0; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 1.05rem;">
                                @if(current_locale() === 'ar')
                                    نعم، نقدم خصومات مجزية للإيجار الأسبوعي والشهري. الإيجار لأسبوع يوفر 15% والإيجار الشهري
                                    يوفر 25% من السعر اليومي. كما نقدم عروض خاصة للعملاء المؤسسيين والحجوزات المتكررة.
                                @else
                                    Yes, we offer attractive discounts for weekly and monthly rentals. Weekly rental saves 15%
                                    and monthly rental saves 25% from the daily rate. We also offer special deals for corporate
                                    clients and repeat bookings.
                                @endif
                            </p>
                        </div>
                    </div>
                </div>

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

    <!-- Contact CTA Section -->
    <section class="contact-cta" style="padding: 3rem 1rem; background: rgba(255, 215, 0, 0.05);">
        <div class="container text-center" style="max-width: 800px; margin: 0 auto;">
            <div class="glass-morphism"
                style="padding: 3rem; 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);">
                <h2
                    style="color: var(--primary-gold); margin-bottom: 1rem; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Playfair Display', serif @endif; font-size: 2rem; font-weight: 600;">
                    @if(current_locale() === 'ar')
                        لم تجد إجابة لسؤالك؟
                    @else
                        Didn't find the answer to your question?
                    @endif
                </h2>
                <p style="color: rgba(255, 255, 255, 0.8); margin-bottom: 2rem; font-size: 1.1rem; line-height: 1.6;">
                    @if(current_locale() === 'ar')
                        فريق خدمة العملاء لدينا متاح على مدار الساعة لمساعدتك والإجابة على جميع استفساراتك
                    @else
                        Our customer service team is available 24/7 to help you and answer all your questions
                    @endif
                </p>
                <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
                    <a href="{{ route('contact') }}" class="btn-primary"
                        style="padding: 15px 30px; font-size: 1.1rem; text-decoration: none; border-radius: 12px; display: flex; align-items: center; gap: 0.5rem;">
                        <i class="fas fa-envelope"></i>
                        @if(current_locale() === 'ar')
                            اتصل بنا
                        @else
                            Contact Us
                        @endif
                    </a>
                    <a href="tel:+96899990000" class="btn-secondary"
                        style="padding: 15px 30px; font-size: 1.1rem; text-decoration: none; border-radius: 12px; display: flex; align-items: center; gap: 0.5rem; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.2);">
                        <i class="fas fa-phone"></i>
                        @if(current_locale() === 'ar')
                            اتصل الآن
                        @else
                            Call Now
                        @endif
                    </a>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        function toggleFAQ(element) {
            const faqItem = element.parentElement;
            const answer = faqItem.querySelector('.faq-answer');
            const icon = element.querySelector('.faq-icon');
            const isOpen = faqItem.classList.contains('active');

            // Close all other FAQ items
            document.querySelectorAll('.faq-item').forEach(item => {
                if (item !== faqItem) {
                    item.classList.remove('active');
                    const otherAnswer = item.querySelector('.faq-answer');
                    const otherIcon = item.querySelector('.faq-icon');
                    otherAnswer.style.maxHeight = '0';
                    otherIcon.style.transform = 'rotate(0deg)';
                    item.querySelector('.faq-question').style.background = 'transparent';
                }
            });

            // Toggle current FAQ item
            if (isOpen) {
                faqItem.classList.remove('active');
                answer.style.maxHeight = '0';
                icon.style.transform = 'rotate(0deg)';
                element.style.background = 'transparent';
            } else {
                faqItem.classList.add('active');
                answer.style.maxHeight = answer.scrollHeight + 'px';
                icon.style.transform = 'rotate(180deg)';
                element.style.background = 'rgba(255, 215, 0, 0.1)';
            }
        }

        // Add smooth animations on page load
        document.addEventListener('DOMContentLoaded', function () {
            const faqItems = document.querySelectorAll('.faq-item');
            faqItems.forEach((item, index) => {
                item.style.opacity = '0';
                item.style.transform = 'translateY(30px)';
                setTimeout(() => {
                    item.style.transition = 'all 0.6s ease';
                    item.style.opacity = '1';
                    item.style.transform = 'translateY(0)';
                }, index * 100);
            });
        });
    </script>
@endpush

@push('styles')
    <style>
        /* FAQ Page Styles */
        .faq-item {
            transition: all 0.3s ease;
        }

        .faq-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
        }

        .faq-question:hover {
            background: rgba(255, 215, 0, 0.05) !important;
        }

        .faq-answer {
            transition: max-height 0.4s ease, padding 0.3s ease;
        }

        .faq-icon {
            font-size: 1.2rem;
            transition: transform 0.3s ease;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .faq-question {
                padding: 1.5rem !important;
                flex-direction: column;
                align-items: flex-start !important;
                gap: 1rem;
            }

            .faq-question h3 {
                font-size: 1.1rem !important;
                line-height: 1.4;
            }

            .faq-answer>div {
                padding: 1.2rem 2rem 2rem 2rem !important;
            }

            .contact-cta .glass-morphism {
                padding: 2rem !important;
            }

            .contact-cta h2 {
                font-size: 1.6rem !important;
            }

            .contact-cta div[style*="display: flex"] {
                flex-direction: column !important;
                align-items: center;
            }

            .contact-cta a {
                width: 100%;
                justify-content: center !important;
                max-width: 250px;
            }
        }

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

            .faq-question {
                padding: 1.25rem !important;
            }

            .faq-question h3 {
                font-size: 1rem !important;
            }

            .faq-answer>div {
                padding: 1rem 1.8rem 1.8rem 1.8rem !important;
            }

            .contact-cta .glass-morphism {
                padding: 1.5rem !important;
            }

            .contact-cta h2 {
                font-size: 1.4rem !important;
            }

            .contact-cta p {
                font-size: 1rem !important;
            }

            .contact-cta a {
                padding: 12px 20px !important;
                font-size: 1rem !important;
            }
        }

        /* Animation for FAQ items */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        .faq-item {
            animation: fadeInUp 0.6s ease forwards;
        }

        /* RTL Support */
        [dir="rtl"] .faq-question {
            text-align: right;
        }

        [dir="rtl"] .faq-icon {
            transform: scaleX(-1);
        }

        [dir="rtl"] .faq-item.active .faq-icon {
            transform: scaleX(-1) rotate(180deg);
        }
    </style>
@endpush