<?php include 'header.php'; ?>

<style>
/* FAQ Page Styles - RTL */
.faq-page {
    direction: rtl;
    text-align: right;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 80px 0 60px;
}

.faq-header {
    text-align: center;
    margin-bottom: 60px;
    color: #fff;
}

.faq-header h1 {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.faq-header p {
    font-size: 1.2rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

.faq-container {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    overflow: hidden;
}

.faq-section {
    padding: 40px;
}

.faq-category {
    margin-bottom: 40px;
}

.faq-category h2 {
    color: #333;
    font-size: 1.8rem;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 3px solid #667eea;
    position: relative;
}

.faq-category h2::before {
    content: '';
    position: absolute;
    bottom: -3px;
    right: 0;
    width: 50px;
    height: 3px;
    background: #764ba2;
}

.faq-item {
    background: #f8f9fa;
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
}

.faq-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.faq-question {
    background: #fff;
    padding: 20px 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    color: #333;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    border-bottom: 1px solid #e9ecef;
}

.faq-question:hover {
    background: #667eea;
    color: #fff;
}

.faq-question.active {
    background: #667eea;
    color: #fff;
}

.faq-icon {
    width: 24px;
    height: 24px;
    position: relative;
    transition: transform 0.3s ease;
}

.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    background: currentColor;
    transition: all 0.3s ease;
}

.faq-icon::before {
    width: 2px;
    height: 16px;
    top: 4px;
    right: 11px;
}

.faq-icon::after {
    width: 16px;
    height: 2px;
    top: 11px;
    right: 4px;
}

.faq-question.active .faq-icon::before {
    transform: rotate(90deg);
    opacity: 0;
}

.faq-answer {
    padding: 0 25px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.faq-answer.active {
    padding: 20px 25px;
    max-height: 500px;
}

.faq-answer p {
    color: #666;
    line-height: 1.6;
    margin: 0;
    font-size: 1rem;
}

.faq-contact {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 40px;
    text-align: center;
    color: #fff;
}

.faq-contact h3 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.faq-contact p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.contact-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.contact-btn {
    display: flex;
    align-items: center;
    padding: 15px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.contact-btn.whatsapp {
    background: #25d366;
    color: #fff;
}

.contact-btn.whatsapp:hover {
    background: #128c7e;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3);
}

.contact-btn.phone {
    background: #fff;
    color: #667eea;
}

.contact-btn.phone:hover {
    background: #f8f9fa;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.contact-btn i {
    margin-left: 10px;
    font-size: 1.2rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .faq-page {
        padding: 60px 0 40px;
    }
    
    .faq-header h1 {
        font-size: 2.5rem;
    }
    
    .faq-header p {
        font-size: 1rem;
    }
    
    .faq-section {
        padding: 30px 20px;
    }
    
    .faq-question {
        padding: 15px 20px;
        font-size: 1rem;
    }
    
    .faq-answer {
        padding: 0 20px;
    }
    
    .faq-answer.active {
        padding: 15px 20px;
    }
    
    .contact-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .contact-btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .faq-header h1 {
        font-size: 2rem;
    }
    
    .faq-category h2 {
        font-size: 1.5rem;
    }
    
    .faq-question {
        font-size: 0.95rem;
    }
}
</style>

<div class="faq-page">
    <div class="container">
        <!-- FAQ Header -->
        <div class="faq-header">
            <h1>الأسئلة الشائعة</h1>
            <p>إجابات على أكثر الأسئلة شيوعاً حول خدماتنا وطرق الحجز والدفع</p>
        </div>
        
        <!-- FAQ Container -->
        <div class="faq-container">
            <div class="faq-section">
                
                <!-- خدمات الحجز -->
                <div class="faq-category">
                    <h2>خدمات الحجز</h2>
                    
                    <div class="faq-item">
                        <div class="faq-question">
                            <span>كيف يمكنني حجز سيارة؟</span>
                            <div class="faq-icon"></div>
                        </div>
                        <div class="faq-answer">
                            <p>يمكنك الحجز عبر عدة طرق: الاتصال بنا مباشرة على الرقم +966543430573، أو عبر واتساب، أو من خلال موقعنا الإلكتروني. نقدم خدمة حجز سريعة وآمنة على مدار الساعة.</p>
                        </div>
                    </div>
                    
                    <div class="faq-item">
                        <div class="faq-question">
                            <span>هل يمكن الحجز مسبقاً؟</span>
                            <div class="faq-icon"></div>
                        </div>
                        <div class="faq-answer">
                            <p>نعم، يمكنك الحجز مسبقاً حتى قبل أسبوع من موعد الرحلة. ننصح بالحجز المبكر خاصة في المواسم المزدحمة مثل رمضان والحج.</p>
                        </div>
                    </div>
                    
                    <div class="faq-item">
                        <div class="faq-question">
                            <span>ما هي مدة الحجز المطلوبة؟</span>
                            <div class="faq-icon"></div>
                        </div>
                        <div class="faq-answer">
                            <p>يمكن الحجز في نفس اليوم أو قبل ساعات قليلة من الرحلة، لكن ننصح بالحجز مسبقاً لضمان توفر السيارة المناسبة.</p>
                        </div>
                    </div>
                </div>
                
                <!-- الأسعار والدفع -->
                <div class="faq-category">
                    <h2>الأسعار والدفع</h2>
                    
                    <div class="faq-item">
                        <div class="faq-question">
                            <span>ما هي طرق الدفع المتاحة؟</span>
                            <div class="faq-icon"></div>
                        </div>
                        <div class="faq-answer">
                            <p>نقبل الدفع النقدي، التحويل البنكي، والدفع عبر البطاقات الإئتمانية. يمكن أيضاً الدفع عند الوصول أو مسبقاً حسب رغبتك.</p>
                        </div>
                    </div>
                    
                    <div class="faq-item">
                        <div class="faq-question">
                            <span>هل الأسعار ثابتة أم متغيرة؟</span>
                            <div class="faq-icon"></div>
                        </div>
                        <div class="faq-answer">
                            <p>الأسعار ثابتة في معظم الأوقات، لكن قد تتغير قليلاً في المواسم المزدحمة أو الأعياد. سيتم إعلامك بأي تغيير في السعر قبل الحجز.</p>
                        </div>
                    </div>
                    
                    <div class="faq-item">
                        <div class="faq-question">
                            <span>هل هناك عروض خاصة؟</span>
                            <div class="faq-icon"></div>
                        </div>
                        <div class="faq-answer">
                            <p>نعم، نقدم عروضاً خاصة للعائلات والمجموعات، وكذلك خصومات للمسافرين المتكررين. تابع صفحة العروض لدينا للحصول على أحدث العروض.</p>
                        </div>
                    </div>
                </div>
                
                <!-- الخدمات والمسارات -->
                <div class="faq-category">
                    <h2>الخدمات والمسارات</h2>
                    
                    <div class="faq-item">
                        <div class="faq-question">
                            <span>ما هي المسارات المتاحة؟</span>
                            <div class="faq-icon"></div>
                        </div>
                        <div class="faq-answer">
                            <p>نقدم خدمات النقل بين: جدة ومكة، مكة والمدينة، الطائف ومكة، جدة والمدينة، وكذلك خدمات المطار من وإلى جميع المدن الرئيسية.</p>
                        </div>
                    </div>
                    
                    <div class="faq-item">
                        <div class="faq-question">
                            <span>ما هي أنواع السيارات المتاحة؟</span>
                            <div class="faq-icon"></div>
                        </div>
                        <div class="faq-answer">
                            <p>نوفر سيارات عائلية، اقتصادية، فاخرة، سيارات VIP، وباصات للمجموعات الكبيرة. جميع السيارات مكيفة ومريحة ومجهزة بأحدث التقنيات.</p>
                        </div>
                    </div>
                    
                    <div class="faq-item">
                        <div class="faq-question">
                            <span>هل الخدمة متاحة 24/7؟</span>
                            <div class="faq-icon"></div>
                        </div>
                        <div class="faq-answer">
                            <p>نعم، خدماتنا متاحة على مدار الساعة طوال أيام الأسبوع، بما في ذلك العطلات والأعياد.</p>
                        </div>
                    </div>
                </div>
                
                <!-- الأمان والجودة -->
                <div class="faq-category">
                    <h2>الأمان والجودة</h2>
                    
                    <div class="faq-item">
                        <div class="faq-question">
                            <span>هل السائقون مدربون ومؤهلون؟</span>
                            <div class="faq-icon"></div>
                        </div>
                        <div class="faq-answer">
                            <p>نعم، جميع سائقينا مدربون ومؤهلون ومرخصون، ولديهم خبرة طويلة في مجال النقل. نحرص على اختيار أفضل السائقين لضمان رحلة آمنة ومريحة.</p>
                        </div>
                    </div>
                    
                    <div class="faq-item">
                        <div class="faq-question">
                            <span>هل السيارات مؤمنة؟</span>
                            <div class="faq-icon"></div>
                        </div>
                        <div class="faq-answer">
                            <p>نعم، جميع سياراتنا مؤمنة تأميناً شاملاً، ونحرص على صيانتها دورياً لضمان السلامة والأمان.</p>
                        </div>
                    </div>
                    
                    <div class="faq-item">
                        <div class="faq-question">
                            <span>ماذا لو تأخرت الرحلة؟</span>
                            <div class="faq-icon"></div>
                        </div>
                        <div class="faq-answer">
                            <p>نحرص على الالتزام بالمواعيد، وفي حال حدوث تأخير لأسباب خارجة عن إرادتنا، سنقوم بإعلامك فوراً وترتيب بديل مناسب.</p>
                        </div>
                    </div>
                </div>
                
            </div>
            
            <!-- Contact Section -->
            <div class="faq-contact">
                <h3>لم تجد إجابة لسؤالك؟</h3>
                <p>فريقنا متاح لمساعدتك على مدار الساعة</p>
                <div class="contact-buttons">
                    <a href="https://wa.me/+966543430573" class="contact-btn whatsapp">
                        <i class="fab fa-whatsapp"></i>
                        تواصل عبر واتساب
                    </a>
                    <a href="tel:+966543430573" class="contact-btn phone">
                        <i class="fas fa-phone"></i>
                        اتصل بنا الآن
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const faqQuestions = document.querySelectorAll('.faq-question');
    
    faqQuestions.forEach(question => {
        question.addEventListener('click', function() {
            const answer = this.nextElementSibling;
            const isActive = this.classList.contains('active');
            
            // Close all other FAQ items
            faqQuestions.forEach(q => {
                q.classList.remove('active');
                q.nextElementSibling.classList.remove('active');
            });
            
            // Toggle current FAQ item
            if (!isActive) {
                this.classList.add('active');
                answer.classList.add('active');
            }
        });
    });
    
    // Smooth scroll for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
});
</script>

<?php include 'footer.php'; ?>