@extends('index')
@section('title', 'Contact')
@section('content')
    @component('components.breadcrumb')
        <div data-aos="fade-right">
            <h1 class="display-4 fw-bold text-white mb-4">Contactez-nous</h1>
            <p class="lead text-white mb-0">Nous sommes là pour vous aider et répondre à toutes vos questions</p>
        </div>
    @endcomponent

    <!-- Contact Information -->
    <section class="py-5">
        <div class="container">
            <div class="row g-4">
                <div class="col-lg-4" data-aos="fade-up" data-aos-delay="100">
                    <div class="card h-100 text-center border-0 shadow-sm">
                        <div class="card-body p-4">
                            <div class="contact-icon mx-auto mb-4">
                                <i class="bi bi-geo-alt"></i>
                            </div>
                            <h5 class="card-title">Notre adresse</h5>
                            <p class="card-text">123 Avenue de la République<br>Dakar, Sénégal</p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4" data-aos="fade-up" data-aos-delay="200">
                    <div class="card h-100 text-center border-0 shadow-sm">
                        <div class="card-body p-4">
                            <div class="contact-icon mx-auto mb-4">
                                <i class="bi bi-telephone"></i>
                            </div>
                            <h5 class="card-title">Téléphone</h5>
                            <p class="card-text">+221 78 123 45 67<br>+221 33 123 45 67</p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4" data-aos="fade-up" data-aos-delay="300">
                    <div class="card h-100 text-center border-0 shadow-sm">
                        <div class="card-body p-4">
                            <div class="contact-icon mx-auto mb-4">
                                <i class="bi bi-envelope"></i>
                            </div>
                            <h5 class="card-title">Email</h5>
                            <p class="card-text">contact@sonkoiennes.org<br>support@sonkoiennes.org</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Form & Map -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="row gx-5">
                <!-- Contact Form -->
                <div class="col-lg-6" data-aos="fade-right">
                    @include('pages.contact.form')
                </div>

                <!-- Map & Info -->
                <div class="col-lg-6" data-aos="fade-left">
                    <div class="card shadow-sm border-0 h-100">
                        <div class="card-body p-0">
                            <!-- Map Placeholder -->
                            <div class="map-container"
                                style="height: 300px; background: linear-gradient(135deg, #006847, #ff0000); position: relative;">
                                <div class="d-flex align-items-center justify-content-center h-100">
                                    <div class="text-center text-white">
                                        <i class="bi bi-geo-alt display-1 mb-3"></i>
                                        <h5>Carte interactive</h5>
                                        <p>123 Avenue de la République, Dakar</p>
                                    </div>
                                </div>
                            </div>

                            <div class="p-4">
                                <h5 class="mb-3">Heures d'ouverture</h5>
                                <div class="row">
                                    <div class="col-6">
                                        <p class="mb-2"><strong>Lundi - Vendredi</strong></p>
                                        <p class="text-muted">9h00 - 18h00</p>
                                    </div>
                                    <div class="col-6">
                                        <p class="mb-2"><strong>Samedi</strong></p>
                                        <p class="text-muted">9h00 - 14h00</p>
                                    </div>
                                    <div class="col-6">
                                        <p class="mb-2"><strong>Dimanche</strong></p>
                                        <p class="text-muted">Fermé</p>
                                    </div>
                                </div>

                                <hr>

                                <h6 class="mb-3">Suivez-nous</h6>
                                <div class="social-links">
                                    @foreach ($socials as $key => $value)
                                        <a href="{{ settings($key) }}" class="social-link me-2" target="_blank">
                                            <i class="bi bi-{{ $key }}"></i>
                                        </a>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="py-5">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center mb-5" data-aos="fade-up">
                    <h2 class="section-heading">Questions fréquentes</h2>
                    <hr class="divider">
                    <p class="section-subheading text-muted">Trouvez rapidement des réponses à vos questions</p>
                </div>
            </div>

            <div class="row justify-content-center">
                <div class="col-lg-8" data-aos="fade-up">
                    <div class="accordion" id="faqAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#faq1">
                                    Comment puis-je passer une commande ?
                                </button>
                            </h2>
                            <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Vous pouvez passer une commande directement sur notre site web en ajoutant les
                                    produits à votre panier et en suivant le processus de commande. Vous pouvez
                                    également nous contacter par téléphone.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#faq2">
                                    Quels sont les délais de livraison ?
                                </button>
                            </h2>
                            <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Les délais de livraison varient selon votre localisation. En général, comptez 3-5
                                    jours ouvrés pour Dakar et 5-7 jours pour les autres régions du Sénégal.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#faq3">
                                    Puis-je retourner un produit ?
                                </button>
                            </h2>
                            <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Oui, vous avez 30 jours pour retourner un produit en parfait état. Les frais de
                                    retour sont à votre charge sauf en cas de défaut du produit.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#faq4">
                                    Quels modes de paiement acceptez-vous ?
                                </button>
                            </h2>
                            <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Nous acceptons les cartes bancaires, Orange Money, Wave, et le paiement à la
                                    livraison pour certaines zones.
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="text-center mt-4">
                        <a href="{{ route('faq') }}" class="btn btn-outline-success">Voir toutes les FAQ</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection