{% extends 'base.html' %}

{% block content %}
<!-- Hero Section -->
<section class="hero contact-hero">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center hero-content">
                <h1>Contactez-nous</h1>
                <p class="lead">Notre équipe est à votre disposition pour répondre à toutes vos questions</p>
                <div class="hero-badges mt-3">
                    <span class="hero-badge"><i class="fas fa-headset"></i> Support réactif</span>
                    <span class="hero-badge"><i class="fas fa-check-circle"></i> Experts qualifiés</span>
                    <span class="hero-badge"><i class="fas fa-clock"></i> Réponse rapide</span>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Quick Contact Section -->
<section class="quick-contact">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-4 mb-3 mb-md-0">
                <div class="quick-contact-card">
                    <div class="quick-contact-icon">
                        <i class="fas fa-phone-alt"></i>
                    </div>
                    <h4>Téléphone</h4>
                    <p>Appelez-nous directement</p>
                    <a href="tel:+221771252929" class="contact-link">+221 77 125 29 29</a>
                </div>
            </div>
            <div class="col-md-4 mb-3 mb-md-0">
                <div class="quick-contact-card">
                    <div class="quick-contact-icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <h4>Email</h4>
                    <p>Écrivez-nous</p>
                    <a href="mailto:{{ settings.company_email|default('gmplsn6@gmail.com') }}" class="contact-link">{{ settings.company_email|default('gmplsn6@gmail.com') }}</a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="quick-contact-card">
                    <div class="quick-contact-icon">
                        <i class="fas fa-map-marker-alt"></i>
                    </div>
                    <h4>Adresse</h4>
                    <p>Venez nous rencontrer</p>
                    <a href="https://maps.app.goo.gl/ZTJhi3FrtA9FzsUp9" target="_blank" class="contact-link">Km 12, route de Rufisque, Dakar</a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section class="py-5 contact-section">
    <div class="container">
        <div class="contact-wrapper">
            <div class="row g-0">
                <!-- Contact Info Side -->
                <div class="col-lg-5">
                    <div class="contact-info-wrapper">
                        <div class="contact-info-header">
                            <h2>Nos informations</h2>
                            <p>Plusieurs façons de nous joindre</p>
                        </div>
                        <div class="contact-info-content">
                            <div class="contact-info-item">
                                <div class="contact-info-icon">
                                    <i class="fas fa-map-marked-alt"></i>
                                </div>
                                <div class="contact-info-details">
                                    <h4>Notre emplacement</h4>
                                    <p>{{ settings.company_address|default('Km 12, route de Rufisque, Dakar, Sénégal') }}</p>
                                    <a href="https://maps.app.goo.gl/ZTJhi3FrtA9FzsUp9" target="_blank" class="contact-info-link">
                                        <i class="fas fa-directions"></i> Obtenir l'itinéraire
                                    </a>
                                </div>
                            </div>

                            <div class="contact-info-item">
                                <div class="contact-info-icon">
                                    <i class="fas fa-phone-volume"></i>
                                </div>
                                <div class="contact-info-details">
                                    <h4>Contactez-nous par téléphone</h4>
                                    <div class="contact-phone-list">
                                        <a href="tel:+221771252929" class="contact-phone-item">
                                            <span class="phone-label">Commercial</span>
                                            <span class="phone-number">+221 77 125 29 29</span>
                                        </a>
                                        <a href="tel:+221770496217" class="contact-phone-item">
                                            <span class="phone-label">Service technique</span>
                                            <span class="phone-number">+221 77 049 62 17</span>
                                        </a>
                                        <a href="tel:+221760115353" class="contact-phone-item">
                                            <span class="phone-label">SAV</span>
                                            <span class="phone-number">+221 76 011 53 53</span>
                                        </a>
                                        <a href="tel:+221775223636" class="contact-phone-item">
                                            <span class="phone-label">Direction</span>
                                            <span class="phone-number">+221 77 522 36 36</span>
                                        </a>
                                    </div>
                                </div>
                            </div>

                            <div class="contact-info-item">
                                <div class="contact-info-icon">
                                    <i class="fas fa-envelope-open-text"></i>
                                </div>
                                <div class="contact-info-details">
                                    <h4>Email</h4>
                                    <a href="mailto:{{ settings.company_email|default('gmplsn6@gmail.com') }}" class="contact-email">
                                        {{ settings.company_email|default('gmplsn6@gmail.com') }}
                                    </a>
                                </div>
                            </div>

                            <div class="contact-info-item">
                                <div class="contact-info-icon">
                                    <i class="fas fa-business-time"></i>
                                </div>
                                <div class="contact-info-details">
                                    <h4>Heures d'ouverture</h4>
                                    <div class="hours-list">
                                        <div class="hours-item">
                                            <span class="day">Lundi - Vendredi:</span>
                                            <span class="hours">8h00 - 18h00</span>
                                        </div>
                                        <div class="hours-item">
                                            <span class="day">Samedi:</span>
                                            <span class="hours">8h00 - 13h00</span>
                                        </div>
                                        <div class="hours-item">
                                            <span class="day">Dimanche:</span>
                                            <span class="hours closed">Fermé</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="contact-social">
                                <h4>Suivez-nous</h4>
                                <div class="social-icons">
                                    <a href="#" class="social-icon" target="_blank" title="Facebook">
                                        <i class="fab fa-facebook-f"></i>
                                    </a>
                                    <a href="#" class="social-icon" target="_blank" title="Twitter">
                                        <i class="fab fa-twitter"></i>
                                    </a>
                                    <a href="#" class="social-icon" target="_blank" title="LinkedIn">
                                        <i class="fab fa-linkedin-in"></i>
                                    </a>
                                    <a href="#" class="social-icon" target="_blank" title="Instagram">
                                        <i class="fab fa-instagram"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Contact Form Side -->
                <div class="col-lg-7">
                    <div class="contact-form-wrapper">
                        <div class="contact-form-header">
                            <h2>Envoyez-nous un message</h2>
                            <p>Nous vous répondrons dans les plus brefs délais</p>
                        </div>
                        
                        <div class="contact-form-content">
                            <form method="post" action="{{ url_for('main.contact') }}" class="contact-form">
                                {{ form.hidden_tag() }}
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-floating mb-3">
                                            {{ form.name(class="form-control" + (" is-invalid" if form.name.errors else ""), placeholder="Votre nom", id="floatingName") }}
                                            {{ form.name.label(for="floatingName") }}
                                            {% if form.name.errors %}
                                                <div class="invalid-feedback">
                                                    {% for error in form.name.errors %}
                                                        {{ error }}
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-floating mb-3">
                                            {{ form.email(class="form-control" + (" is-invalid" if form.email.errors else ""), placeholder="Votre email", id="floatingEmail") }}
                                            {{ form.email.label(for="floatingEmail") }}
                                            {% if form.email.errors %}
                                                <div class="invalid-feedback">
                                                    {% for error in form.email.errors %}
                                                        {{ error }}
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-floating mb-3">
                                    {{ form.phone(class="form-control" + (" is-invalid" if form.phone.errors else ""), placeholder="Votre téléphone", id="floatingPhone") }}
                                    {{ form.phone.label(for="floatingPhone") }}
                                    {% if form.phone.errors %}
                                        <div class="invalid-feedback">
                                            {% for error in form.phone.errors %}
                                                {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                </div>
                                
                                <div class="form-floating mb-3">
                                    {{ form.message(class="form-control" + (" is-invalid" if form.message.errors else ""), placeholder="Votre message", id="floatingMessage", style="height: 150px") }}
                                    {{ form.message.label(for="floatingMessage") }}
                                    {% if form.message.errors %}
                                        <div class="invalid-feedback">
                                            {% for error in form.message.errors %}
                                                {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                </div>
                                
                                <div class="form-group mb-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="privacyCheck" required>
                                        <label class="form-check-label" for="privacyCheck">
                                            J'accepte que mes données soient utilisées pour être recontacté(e) concernant ma demande.
                                        </label>
                                    </div>
                                </div>
                                
                                <div class="form-submit">
                                    {{ form.submit(class="btn btn-primary btn-lg submit-btn") }}
                                    <div class="form-message">
                                        <i class="fas fa-info-circle"></i>
                                        <span>Nous respectons votre vie privée et ne partagerons jamais vos informations.</span>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Map Section -->
<section class="py-5 map-section">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h2 class="section-title">Où nous trouver</h2>
                <p class="section-subtitle">Venez nous rendre visite à notre atelier</p>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="map-container">
                    <div id="map" class="google-map"></div>
                    <div class="map-info">
                        <div class="map-info-header">
                            <h3>GMPL</h3>
                            <p>General Motors Poids Lourds</p>
                        </div>
                        <div class="map-info-address">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>{{ settings.company_address|default('Km 12, route de Rufisque, Dakar, Sénégal') }}</span>
                        </div>
                        <div class="map-info-phone">
                            <i class="fas fa-phone"></i>
                            <span>+221 77 125 29 29</span>
                        </div>
                        <div class="map-info-link">
                            <a href="https://maps.app.goo.gl/ZTJhi3FrtA9FzsUp9" target="_blank" class="btn btn-primary">
                                <i class="fas fa-directions"></i> Itinéraire
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- FAQ Section -->
<section class="py-5 faq-section">
    <div class="container">
        <div class="row mb-5 text-center">
            <div class="col-12">
                <h2 class="section-title">Questions fréquentes</h2>
                <p class="section-subtitle">Nous sommes là pour vous aider</p>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 mb-4">
                <div class="faq-item" data-bs-toggle="collapse" data-bs-target="#faq1" aria-expanded="false">
                    <div class="faq-question">
                        <span>Comment puis-je obtenir un devis pour un moteur reconditionné ?</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="collapse" id="faq1">
                        <div class="faq-answer">
                            <p>Pour obtenir un devis, vous pouvez nous contacter directement par téléphone, par email ou en utilisant notre formulaire de contact. Précisez autant que possible le modèle de moteur et vos besoins spécifiques pour que nous puissions vous répondre avec précision.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 mb-4">
                <div class="faq-item" data-bs-toggle="collapse" data-bs-target="#faq2" aria-expanded="false">
                    <div class="faq-question">
                        <span>Proposez-vous un service de livraison ?</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="collapse" id="faq2">
                        <div class="faq-answer">
                            <p>Oui, nous proposons un service de livraison pour les pièces et moteurs dans tout le Sénégal et dans certains pays d'Afrique de l'Ouest. Les frais et délais de livraison dépendent de votre localisation et du poids des articles commandés.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 mb-4">
                <div class="faq-item" data-bs-toggle="collapse" data-bs-target="#faq3" aria-expanded="false">
                    <div class="faq-question">
                        <span>Quelle est la garantie sur vos moteurs reconditionnés ?</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="collapse" id="faq3">
                        <div class="faq-answer">
                            <p>Tous nos moteurs reconditionnés sont garantis pendant 6 mois. Cette garantie couvre les défauts de fabrication et les problèmes mécaniques majeurs. Des extensions de garantie sont également disponibles sur demande.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 mb-4">
                <div class="faq-item" data-bs-toggle="collapse" data-bs-target="#faq4" aria-expanded="false">
                    <div class="faq-question">
                        <span>Puis-je venir visiter votre atelier avant de commander ?</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="collapse" id="faq4">
                        <div class="faq-answer">
                            <p>Bien sûr ! Nous vous invitons à visiter notre atelier à Dakar pour découvrir notre équipe, nos installations et nos produits. Nous vous recommandons simplement de prendre rendez-vous à l'avance pour que nous puissions vous accorder toute notre attention.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-12 text-center">
                <p class="faq-more">Vous avez d'autres questions ? <a href="#contact-form" class="scroll-to-contact">Contactez-nous directement</a></p>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="py-5 contact-cta">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8 mb-4 mb-lg-0">
                <h2>Prêt à travailler avec nous ?</h2>
                <p>Faites confiance à notre expertise pour tous vos besoins en moteurs et pièces détachées</p>
            </div>
            <div class="col-lg-4 text-lg-end">
                <a href="{{ url_for('main.products') }}" class="btn btn-light btn-lg cta-btn">
                    <i class="fas fa-box-open me-2"></i> Voir nos produits
                </a>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_js %}
<!-- Google Maps JavaScript API -->
<script src="https://maps.googleapis.com/maps/api/js?key={{ config.GOOGLE_MAPS_API_KEY }}&callback=initMap" async defer></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Accordion functionality for FAQ items
        const faqItems = document.querySelectorAll('.faq-item');
        
        faqItems.forEach(item => {
            item.addEventListener('click', function() {
                // Add/remove active class to style the expanded item
                this.classList.toggle('active');
                
                // Find the icon element to rotate it
                const icon = this.querySelector('.fa-chevron-down');
                if (icon) {
                    if (this.classList.contains('active')) {
                        icon.style.transform = 'rotate(180deg)';
                    } else {
                        icon.style.transform = 'rotate(0)';
                    }
                }
            });
        });
        
        // Smooth scroll to contact form
        const scrollToContact = document.querySelector('.scroll-to-contact');
        if (scrollToContact) {
            scrollToContact.addEventListener('click', function(e) {
                e.preventDefault();
                const contactForm = document.querySelector('.contact-form-wrapper');
                if (contactForm) {
                    contactForm.scrollIntoView({ behavior: 'smooth' });
                }
            });
        }
    });
</script>
{% endblock %}
