@extends('layouts.app')

@section('title', 'اتصل بنا - ايوان')

@section('styles')
<style>
    .contact-hero {
        background: linear-gradient(rgba(30, 58, 95, 0.9), rgba(44, 95, 65, 0.9)), 
                    url('/images/design/geometric-1.jpg') center/cover;
        padding: 6rem 0 4rem;
        position: relative;
        overflow: hidden;
    }

    .contact-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="contact-pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><rect x="8" y="8" width="4" height="4" fill="%23d4af37" opacity="0.2"/></pattern></defs><rect width="100" height="100" fill="url(%23contact-pattern)"/></svg>');
    }

    .contact-card {
        background: white;
        border-radius: 20px;
        padding: 3rem;
        box-shadow: 0 15px 40px rgba(0,0,0,0.1);
        margin-bottom: 2rem;
        transition: all 0.3s ease;
    }

    .contact-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    }

    .contact-form {
        background: white;
        border-radius: 20px;
        padding: 3rem;
        box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    }

    .form-group {
        margin-bottom: 2rem;
    }

    .form-label {
        color: var(--primary-color);
        font-weight: 600;
        margin-bottom: 0.75rem;
        display: block;
    }

    .form-control {
        border: 2px solid #e0e0e0;
        border-radius: 12px;
        padding: 1rem 1.25rem;
        font-size: 1rem;
        transition: all 0.3s ease;
        background: #f8f9fa;
    }

    .form-control:focus {
        border-color: var(--secondary-color);
        box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
        background: white;
    }

    .form-select {
        border: 2px solid #e0e0e0;
        border-radius: 12px;
        padding: 1rem 1.25rem;
        font-size: 1rem;
        transition: all 0.3s ease;
        background: #f8f9fa;
    }

    .form-select:focus {
        border-color: var(--secondary-color);
        box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
        background: white;
    }

    .btn-submit {
        background: linear-gradient(135deg, var(--secondary-color) 0%, #b8941f 100%);
        border: none;
        color: var(--primary-color);
        padding: 1rem 2.5rem;
        border-radius: 25px;
        font-weight: 700;
        font-size: 1.1rem;
        transition: all 0.3s ease;
        box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
    }

    .btn-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
        color: var(--primary-color);
    }

    .contact-info-item {
        display: flex;
        align-items: center;
        margin-bottom: 2rem;
        padding: 1.5rem;
        background: #f8f9fa;
        border-radius: 15px;
        transition: all 0.3s ease;
    }

    .contact-info-item:hover {
        background: var(--light-gold);
        transform: translateX(-5px);
    }

    .contact-icon {
        width: 60px;
        height: 60px;
        background: var(--secondary-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 1.5rem;
        color: var(--primary-color);
        font-size: 1.5rem;
        flex-shrink: 0;
    }

    .contact-details h5 {
        color: var(--primary-color);
        margin-bottom: 0.5rem;
        font-weight: 700;
    }

    .contact-details p {
        margin: 0;
        color: #666;
        line-height: 1.6;
    }

    .map-container {
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 15px 40px rgba(0,0,0,0.1);
        height: 400px;
        background: #f8f9fa;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666;
        font-size: 1.2rem;
    }

    .social-links {
        display: flex;
        gap: 1rem;
        justify-content: center;
        margin-top: 2rem;
    }

    .social-link {
        width: 50px;
        height: 50px;
        background: var(--secondary-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-color);
        text-decoration: none;
        font-size: 1.2rem;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
    }

    .social-link:hover {
        background: #b8941f;
        color: var(--primary-color);
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
        text-decoration: none;
    }

    .office-hours {
        background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
        border-radius: 15px;
        padding: 2rem;
        margin-top: 2rem;
        border-right: 5px solid #2196f3;
    }

    .office-hours h5 {
        color: #1976d2;
        margin-bottom: 1.5rem;
        font-weight: 700;
    }

    .hours-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 0;
        border-bottom: 1px solid rgba(25, 118, 210, 0.1);
    }

    .hours-item:last-child {
        border-bottom: none;
    }

    .day {
        font-weight: 600;
        color: #1565c0;
    }

    .time {
        color: #1976d2;
    }

    .quick-contact {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--dark-blue) 100%);
        color: white;
        padding: 3rem;
        border-radius: 20px;
        text-align: center;
        margin: 3rem 0;
        position: relative;
        overflow: hidden;
    }

    .quick-contact::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="quick-pattern" x="0" y="0" width="25" height="25" patternUnits="userSpaceOnUse"><circle cx="12.5" cy="12.5" r="1.5" fill="%23d4af37" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23quick-pattern)"/></svg>');
    }

    .quick-contact-content {
        position: relative;
        z-index: 2;
    }

    .quick-contact h3 {
        font-family: 'Amiri', serif;
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .quick-contact-buttons {
        display: flex;
        gap: 1rem;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 2rem;
    }

    .quick-btn {
        background: var(--secondary-color);
        color: var(--primary-color);
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: 25px;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .quick-btn:hover {
        background: #b8941f;
        color: var(--primary-color);
        transform: translateY(-2px);
        text-decoration: none;
    }

    @media (max-width: 768px) {
        .contact-hero {
            padding: 4rem 0 2rem;
        }
        
        .contact-card,
        .contact-form {
            padding: 2rem;
        }
        
        .contact-info-item {
            flex-direction: column;
            text-align: center;
        }
        
        .contact-icon {
            margin-left: 0;
            margin-bottom: 1rem;
        }
        
        .quick-contact-buttons {
            flex-direction: column;
            align-items: center;
        }
        
        .quick-btn {
            width: 100%;
            max-width: 250px;
            justify-content: center;
        }
    }
</style>
@endsection

@section('content')
<!-- Contact Hero -->
<section class="contact-hero">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8 mx-auto text-center text-white">
                <h1 class="display-3 fw-bold mb-4 fade-in">اتصل بنا</h1>
                <p class="lead mb-4 fade-in">نحن هنا للإجابة على استفساراتكم ومساعدتكم في كل ما يتعلق بالمعرض</p>
            </div>
        </div>
    </div>
</section>

<!-- Contact Form and Info -->
<section class="py-5">
    <div class="container">
        <div class="row g-5">
            <!-- Contact Form -->
            <div class="col-lg-8">
                <div class="contact-form">
                    <h2 class="section-title mb-4">أرسل لنا رسالة</h2>
                    <form action="#" method="POST">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">الاسم الأول *</label>
                                    <input type="text" class="form-control" name="first_name" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">الاسم الأخير *</label>
                                    <input type="text" class="form-control" name="last_name" required>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">البريد الإلكتروني *</label>
                                    <input type="email" class="form-control" name="email" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">رقم الهاتف</label>
                                    <input type="tel" class="form-control" name="phone">
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">الشركة / المؤسسة</label>
                            <input type="text" class="form-control" name="company">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">نوع الاستفسار *</label>
                            <select class="form-select" name="inquiry_type" required>
                                <option value="">اختر نوع الاستفسار</option>
                                <option value="registration">التسجيل في المعرض</option>
                                <option value="exhibition">المشاركة كعارض</option>
                                <option value="partnership">الشراكة والرعاية</option>
                                <option value="workshops">الورش التدريبية</option>
                                <option value="media">الإعلام والصحافة</option>
                                <option value="general">استفسار عام</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">الموضوع *</label>
                            <input type="text" class="form-control" name="subject" required>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">الرسالة *</label>
                            <textarea class="form-control" name="message" rows="6" required placeholder="اكتب رسالتك هنا..."></textarea>
                        </div>
                        
                        <div class="text-center">
                            <button type="submit" class="btn-submit">
                                <i class="fas fa-paper-plane me-2"></i>
                                إرسال الرسالة
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- Contact Info -->
            <div class="col-lg-4">
                <div class="contact-card">
                    <h3 class="section-title mb-4">معلومات التواصل</h3>
                    
                    <div class="contact-info-item">
                        <div class="contact-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div class="contact-details">
                            <h5>العنوان</h5>
                            <p>مركز الرياض الدولي للمؤتمرات والمعارض<br>
                            طريق الملك فهد، الرياض 12271<br>
                            المملكة العربية السعودية</p>
                        </div>
                    </div>
                    
                    <div class="contact-info-item">
                        <div class="contact-icon">
                            <i class="fas fa-phone"></i>
                        </div>
                        <div class="contact-details">
                            <h5>الهاتف</h5>
                            <p>+966 11 123 4567<br>
                            +966 11 123 4568 (فاكس)</p>
                        </div>
                    </div>
                    
                    <div class="contact-info-item">
                        <div class="contact-icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div class="contact-details">
                            <h5>البريد الإلكتروني</h5>
                            <p>info@mosque-exhibition.sa<br>
                            media@mosque-exhibition.sa</p>
                        </div>
                    </div>
                    
                    <div class="contact-info-item">
                        <div class="contact-icon">
                            <i class="fas fa-globe"></i>
                        </div>
                        <div class="contact-details">
                            <h5>الموقع الإلكتروني</h5>
                            <p>www.mosque-exhibition.sa</p>
                        </div>
                    </div>
                    
                    <!-- Office Hours -->
                    <div class="office-hours">
                        <h5><i class="fas fa-clock me-2"></i>ساعات العمل</h5>
                        <div class="hours-item">
                            <span class="day">الأحد - الخميس</span>
                            <span class="time">8:00 ص - 5:00 م</span>
                        </div>
                        <div class="hours-item">
                            <span class="day">الجمعة</span>
                            <span class="time">مغلق</span>
                        </div>
                        <div class="hours-item">
                            <span class="day">السبت</span>
                            <span class="time">9:00 ص - 2:00 م</span>
                        </div>
                    </div>
                    
                    <!-- Social Links -->
                    <div class="social-links">
                        <a href="#" class="social-link" title="تويتر">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="social-link" title="لينكد إن">
                            <i class="fab fa-linkedin"></i>
                        </a>
                        <a href="#" class="social-link" title="إنستغرام">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="#" class="social-link" title="يوتيوب">
                            <i class="fab fa-youtube"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Map Section -->
<section class="py-5 bg-light">
    <div class="container">
        <h2 class="section-title text-center mb-5">موقع المعرض</h2>
        <div class="row">
            <div class="col-12">
                <div class="map-container">
                    <div class="text-center">
                        <i class="fas fa-map-marked-alt fa-3x mb-3 text-muted"></i>
                        <h4 class="text-muted">خريطة الموقع</h4>
                        <p class="text-muted">مركز الرياض الدولي للمؤتمرات والمعارض</p>
                        <a href="https://maps.google.com" target="_blank" class="btn btn-outline-primary">
                            <i class="fas fa-external-link-alt me-2"></i>
                            عرض في خرائط جوجل
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Quick Contact -->
<section class="quick-contact">
    <div class="quick-contact-content">
        <div class="container">
            <h3>تحتاج مساعدة فورية؟</h3>
            <p class="lead">تواصل معنا مباشرة عبر القنوات السريعة</p>
            <div class="quick-contact-buttons">
                <a href="tel:+966111234567" class="quick-btn">
                    <i class="fas fa-phone"></i>
                    اتصل الآن
                </a>
                <a href="https://wa.me/966111234567" class="quick-btn" target="_blank">
                    <i class="fab fa-whatsapp"></i>
                    واتساب
                </a>
                <a href="mailto:info@mosque-exhibition.sa" class="quick-btn">
                    <i class="fas fa-envelope"></i>
                    بريد إلكتروني
                </a>
                <a href="#" class="quick-btn">
                    <i class="fas fa-comments"></i>
                    دردشة مباشرة
                </a>
            </div>
        </div>
    </div>
</section>

<!-- FAQ Section -->
<section class="py-5">
    <div class="container">
        <h2 class="section-title text-center mb-5">الأسئلة الشائعة</h2>
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <div class="accordion" id="faqAccordion">
                    <div class="accordion-item mb-3" style="border: none; border-radius: 15px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
                        <h2 class="accordion-header">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1" style="background: var(--light-gold); color: var(--primary-color); font-weight: 600;">
                                كيف يمكنني التسجيل في المعرض؟
                            </button>
                        </h2>
                        <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                يمكنك التسجيل في المعرض من خلال ملء نموذج التسجيل الإلكتروني على موقعنا. التسجيل مجاني ومفتوح لجميع المهتمين في مجال تجهيز المساجد.
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item mb-3" style="border: none; border-radius: 15px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2" style="background: var(--light-gold); color: var(--primary-color); font-weight: 600;">
                                هل يمكنني المشاركة كعارض؟
                            </button>
                        </h2>
                        <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                نعم، نرحب بمشاركة الشركات والمؤسسات المتخصصة في تجهيز المساجد. يرجى التواصل معنا عبر البريد الإلكتروني أو الهاتف للحصول على معلومات المشاركة.
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item mb-3" style="border: none; border-radius: 15px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3" style="background: var(--light-gold); color: var(--primary-color); font-weight: 600;">
                                هل الورش التدريبية مجانية؟
                            </button>
                        </h2>
                        <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                نعم، جميع الورش التدريبية مجانية للمسجلين في المعرض. يمكنك اختيار ورشة واحدة عند التسجيل وستحصل على شهادة حضور معتمدة.
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item mb-3" style="border: none; border-radius: 15px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4" style="background: var(--light-gold); color: var(--primary-color); font-weight: 600;">
                                أين يقام المعرض؟
                            </button>
                        </h2>
                        <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                يقام المعرض في مركز الرياض الدولي للمؤتمرات والمعارض، طريق الملك فهد، الرياض، المملكة العربية السعودية.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection