{% extends 'base.html' %}

{% block content %}
<!-- Hero Section -->
<section class="hero services-hero">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center hero-content">
                <h1>Nos Services</h1>
                <p class="lead">Solutions complètes pour vos besoins en poids lourds</p>
                <div class="hero-badges mt-3">
                    <span class="hero-badge"><i class="fas fa-tools"></i> Expertise technique</span>
                    <span class="hero-badge"><i class="fas fa-certificate"></i> Qualité garantie</span>
                    <span class="hero-badge"><i class="fas fa-clock"></i> Service rapide</span>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Services Highlights Section -->
<section class="service-highlights py-4">
    <div class="container">
        <div class="row">
            <div class="col-md-3 mb-3 mb-md-0">
                <div class="service-highlight">
                    <div class="highlight-icon">
                        <i class="fas fa-cogs"></i>
                    </div>
                    <div class="highlight-text">
                        <h4>Maintenance</h4>
                        <p>Entretien professionnel</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-3 mb-md-0">
                <div class="service-highlight">
                    <div class="highlight-icon">
                        <i class="fas fa-tools"></i>
                    </div>
                    <div class="highlight-text">
                        <h4>Réparation</h4>
                        <p>Solutions efficaces</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-3 mb-md-0">
                <div class="service-highlight">
                    <div class="highlight-icon">
                        <i class="fas fa-sync-alt"></i>
                    </div>
                    <div class="highlight-text">
                        <h4>Reconditionnement</h4>
                        <p>Nouvelle vie pour moteurs</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="service-highlight">
                    <div class="highlight-icon">
                        <i class="fas fa-truck-loading"></i>
                    </div>
                    <div class="highlight-text">
                        <h4>Installation</h4>
                        <p>Mise en service experte</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Services Intro Section -->
<section class="py-5 services-intro">
    <div class="container">
        <div class="row mb-5 align-items-center">
            <div class="col-lg-6 mb-4 mb-lg-0">
                <div class="services-intro-content">
                    <h2 class="section-title">Des services adaptés à vos besoins</h2>
                    <p class="lead mb-4">Un accompagnement professionnel pour la performance de votre flotte</p>
                    <p>Chez GMPL, nous ne nous contentons pas de vous fournir des moteurs et pièces détachées de qualité. Nous vous proposons également une gamme complète de services pour garantir le bon fonctionnement de vos équipements.</p>
                    <p>Notre équipe de professionnels qualifiés est à votre disposition pour vous offrir :</p>
                    <ul class="services-list">
                        <li><i class="fas fa-check-circle"></i> Des conseils techniques personnalisés</li>
                        <li><i class="fas fa-check-circle"></i> Une livraison rapide et fiable</li>
                        <li><i class="fas fa-check-circle"></i> L'installation professionnelle de vos équipements</li>
                        <li><i class="fas fa-check-circle"></i> Un service de maintenance de qualité</li>
                    </ul>
                    <div class="mt-4">
                        <a href="{{ url_for('main.contact') }}" class="btn btn-primary">Demander un devis</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="services-intro-image">
                    <img src="{{ url_for('static', filename='img/services/maintenance.jpg') }}" alt="Service de maintenance GMPL" class="img-fluid">
                    <div class="services-intro-card">
                        <div class="card-icon">
                            <i class="fas fa-tools"></i>
                        </div>
                        <div class="card-content">
                            <h3>Notre engagement</h3>
                            <p>GMPL s'engage à vous offrir un service d'excellence, adapté à vos besoins spécifiques. Notre objectif est de vous aider à maintenir vos équipements en parfait état de fonctionnement, minimisant ainsi les temps d'arrêt et optimisant la performance de votre flotte.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Services List -->
        <div class="services-grid">
            {% if services %}
                {% for service in services %}
                    <div class="service-item" id="service-{{ service.id }}">
                        <div class="service-card">
                            <div class="service-image">
                                {% if service.image_url %}
                                    <img src="{{ url_for('static', filename=service.image_url) }}" alt="{{ service.name }}" onerror="this.src='{{ url_for('static', filename='uploads/services/demo_service1.jpg') }}'">
                                {% else %}
                                    <img src="{{ url_for('static', filename='uploads/services/demo_service1.jpg') }}" alt="{{ service.name }}">
                                {% endif %}
                                {% else %}
                                    <div class="no-image">
                                        <i class="fas fa-wrench"></i>
                                    </div>
                                {% endif %}
                                <div class="service-overlay">
                                    <button class="btn btn-light" data-bs-toggle="modal" data-bs-target="#serviceModal{{ service.id }}">
                                        En savoir plus
                                    </button>
                                </div>
                            </div>
                            <div class="service-info">
                                <h3 class="service-name">{{ service.name }}</h3>
                                <p class="service-description">{{ service.description|truncate(100) }}</p>
                                <div class="service-actions">
                                    <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#serviceModal{{ service.id }}">
                                        <i class="fas fa-info-circle"></i> Détails
                                    </button>
                                    <a href="{{ url_for('main.contact') }}?service={{ service.id }}" class="btn btn-accent">
                                        <i class="fas fa-envelope"></i> Devis
                                    </a>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Service Modal -->
                        <div class="modal fade" id="serviceModal{{ service.id }}" tabindex="-1" aria-labelledby="serviceModalLabel{{ service.id }}" aria-hidden="true">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="serviceModalLabel{{ service.id }}">{{ service.name }}</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="service-modal-image">
                                            {% if service.image_url %}
                                                <img src="{{ url_for('static', filename=service.image_url) }}" alt="{{ service.name }}" class="img-fluid" onerror="this.src='{{ url_for('static', filename='uploads/services/demo_service1.jpg') }}'">
                                            {% else %}
                                                <img src="{{ url_for('static', filename='uploads/services/demo_service1.jpg') }}" alt="{{ service.name }}" class="img-fluid">
                                            {% endif %}
                                        </div>
                                        <div class="service-modal-content">
                                            <h5>Description du service</h5>
                                            <p>{{ service.description }}</p>
                                            
                                            <div class="service-benefits">
                                                <h5>Avantages</h5>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <ul class="benefits-list">
                                                            <li><i class="fas fa-check-circle"></i> Service personnalisé selon vos besoins spécifiques</li>
                                                            <li><i class="fas fa-check-circle"></i> Équipe de professionnels qualifiés et expérimentés</li>
                                                            <li><i class="fas fa-check-circle"></i> Utilisation d'outils et d'équipements de pointe</li>
                                                        </ul>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <ul class="benefits-list">
                                                            <li><i class="fas fa-check-circle"></i> Respect des délais et des engagements</li>
                                                            <li><i class="fas fa-check-circle"></i> Suivi rigoureux de chaque intervention</li>
                                                            <li><i class="fas fa-check-circle"></i> Garantie sur les travaux effectués</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="service-process">
                                                <h5>Comment ça marche ?</h5>
                                                <div class="process-steps">
                                                    <div class="process-step">
                                                        <div class="step-number">1</div>
                                                        <div class="step-content">
                                                            <h6>Prise de contact</h6>
                                                            <p>Contactez-nous pour exprimer vos besoins</p>
                                                        </div>
                                                    </div>
                                                    <div class="process-step">
                                                        <div class="step-number">2</div>
                                                        <div class="step-content">
                                                            <h6>Évaluation</h6>
                                                            <p>Nous évaluons votre demande et proposons une solution adaptée</p>
                                                        </div>
                                                    </div>
                                                    <div class="process-step">
                                                        <div class="step-number">3</div>
                                                        <div class="step-content">
                                                            <h6>Devis</h6>
                                                            <p>Nous établissons un devis détaillé</p>
                                                        </div>
                                                    </div>
                                                    <div class="process-step">
                                                        <div class="step-number">4</div>
                                                        <div class="step-content">
                                                            <h6>Planification</h6>
                                                            <p>Après validation, nous planifions l'intervention</p>
                                                        </div>
                                                    </div>
                                                    <div class="process-step">
                                                        <div class="step-number">5</div>
                                                        <div class="step-content">
                                                            <h6>Réalisation</h6>
                                                            <p>Nous réalisons le service dans les délais convenus</p>
                                                        </div>
                                                    </div>
                                                    <div class="process-step">
                                                        <div class="step-number">6</div>
                                                        <div class="step-content">
                                                            <h6>Suivi</h6>
                                                            <p>Nous effectuons un suivi post-service pour garantir votre satisfaction</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                                        <a href="{{ url_for('main.contact') }}?service={{ service.id }}" class="btn btn-primary">Demander un devis</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            {% else %}
                <div class="empty-services">
                    <div class="empty-icon">
                        <i class="fas fa-tools"></i>
                    </div>
                    <h3>Aucun service disponible pour le moment</h3>
                    <p>Nous sommes en train de mettre à jour notre catalogue de services. Veuillez revenir plus tard ou nous contacter directement pour plus d'informations.</p>
                    <div class="empty-actions">
                        <a href="{{ url_for('main.contact') }}" class="btn btn-primary">
                            <i class="fas fa-envelope"></i> Nous contacter
                        </a>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</section>

<!-- Expertise Section -->
<section class="py-5 expertise-section">
    <div class="container">
        <div class="row mb-4 text-center">
            <div class="col-md-12">
                <h2 class="section-title">Nos domaines d'expertise</h2>
                <p class="section-subtitle">Des solutions complètes pour tous vos besoins</p>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="expertise-card">
                    <div class="expertise-icon">
                        <i class="fas fa-truck-moving"></i>
                    </div>
                    <div class="expertise-content">
                        <h4>Diagnostic</h4>
                        <p>Identification précise des problèmes de vos moteurs et systèmes mécaniques grâce à des outils de diagnostic avancés.</p>
                        <div class="expertise-features">
                            <span class="feature-tag">Analyse complète</span>
                            <span class="feature-tag">Détection rapide</span>
                            <span class="feature-tag">Rapport détaillé</span>
                        </div>
                        <a href="{{ url_for('main.contact') }}?service=diagnostic" class="btn btn-outline-primary mt-3">
                            <i class="fas fa-chevron-right"></i> En savoir plus
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="expertise-card">
                    <div class="expertise-icon">
                        <i class="fas fa-cogs"></i>
                    </div>
                    <div class="expertise-content">
                        <h4>Reconditionnement</h4>
                        <p>Remise à neuf de moteurs et composants mécaniques avec des pièces de qualité pour prolonger leur durée de vie.</p>
                        <div class="expertise-features">
                            <span class="feature-tag">Qualité d'origine</span>
                            <span class="feature-tag">Garantie 12 mois</span>
                            <span class="feature-tag">Performance optimisée</span>
                        </div>
                        <a href="{{ url_for('main.contact') }}?service=reconditionnement" class="btn btn-outline-primary mt-3">
                            <i class="fas fa-chevron-right"></i> En savoir plus
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="expertise-card">
                    <div class="expertise-icon">
                        <i class="fas fa-clipboard-check"></i>
                    </div>
                    <div class="expertise-content">
                        <h4>Maintenance préventive</h4>
                        <p>Programmes d'entretien régulier pour prévenir les pannes et optimiser la performance de vos équipements.</p>
                        <div class="expertise-features">
                            <span class="feature-tag">Suivi régulier</span>
                            <span class="feature-tag">Prévention</span>
                            <span class="feature-tag">Économies</span>
                        </div>
                        <a href="{{ url_for('main.contact') }}?service=maintenance" class="btn btn-outline-primary mt-3">
                            <i class="fas fa-chevron-right"></i> En savoir plus
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Testimonial Section -->
<section class="py-5 testimonial-section">
    <div class="container">
        <div class="row mb-4 text-center">
            <div class="col-md-12">
                <h2 class="section-title">Ce que disent nos clients</h2>
                <p class="section-subtitle">La satisfaction client est notre priorité</p>
            </div>
        </div>
        
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="testimonials-container">
                    <div id="testimonialCarousel" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <div class="testimonial">
                                    <div class="testimonial-content">
                                        <div class="testimonial-icon">
                                            <i class="fas fa-quote-left"></i>
                                        </div>
                                        <p>Le service de livraison de GMPL est exceptionnel. J'ai reçu les pièces dont j'avais besoin en un temps record, ce qui a permis de remettre rapidement mon camion en service.</p>
                                    </div>
                                    <div class="testimonial-author">
                                        <div class="author-avatar">
                                            <span>MD</span>
                                        </div>
                                        <div class="author-info">
                                            <h5>Mamadou D.</h5>
                                            <span>Société de transport</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="testimonial">
                                    <div class="testimonial-content">
                                        <div class="testimonial-icon">
                                            <i class="fas fa-quote-left"></i>
                                        </div>
                                        <p>L'installation de mon nouveau moteur a été réalisée avec professionnalisme et dans les délais annoncés. Je recommande vivement le service d'installation de GMPL.</p>
                                    </div>
                                    <div class="testimonial-author">
                                        <div class="author-avatar">
                                            <span>FS</span>
                                        </div>
                                        <div class="author-info">
                                            <h5>Fatou S.</h5>
                                            <span>Entreprise de BTP</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="testimonial">
                                    <div class="testimonial-content">
                                        <div class="testimonial-icon">
                                            <i class="fas fa-quote-left"></i>
                                        </div>
                                        <p>Le service de maintenance préventive de GMPL m'a permis d'éviter plusieurs pannes majeures. Un investissement qui en vaut vraiment la peine !</p>
                                    </div>
                                    <div class="testimonial-author">
                                        <div class="author-avatar">
                                            <span>ON</span>
                                        </div>
                                        <div class="author-info">
                                            <h5>Ousmane N.</h5>
                                            <span>Transporteur indépendant</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="testimonial-controls">
                            <button class="control-prev" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="prev">
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <div class="carousel-indicators">
                                <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="0" class="active" aria-current="true"></button>
                                <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="1"></button>
                                <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="2"></button>
                            </div>
                            <button class="control-next" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="next">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="py-5 services-cta">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 offset-lg-2">
                <div class="cta-card">
                    <div class="cta-content">
                        <h2>Prêt à bénéficier de nos services ?</h2>
                        <p>Contactez-nous dès aujourd'hui pour discuter de vos besoins spécifiques et découvrez comment nous pouvons vous aider à optimiser la performance de vos équipements.</p>
                        <div class="cta-features">
                            <div class="feature">
                                <i class="fas fa-headset"></i>
                                <span>Support 24/7</span>
                            </div>
                            <div class="feature">
                                <i class="fas fa-star"></i>
                                <span>Service premium</span>
                            </div>
                            <div class="feature">
                                <i class="fas fa-handshake"></i>
                                <span>Satisfaction garantie</span>
                            </div>
                        </div>
                        <div class="cta-button">
                            <a href="{{ url_for('main.contact') }}" class="btn btn-light btn-lg">
                                <i class="fas fa-envelope me-2"></i> Nous contacter
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Animate service cards on scroll
        const serviceCards = document.querySelectorAll('.service-card');
        const expertiseCards = document.querySelectorAll('.expertise-card');
        
        const animateOnScroll = (elements) => {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach((entry, index) => {
                    if (entry.isIntersecting) {
                        setTimeout(() => {
                            entry.target.classList.add('animate-in');
                        }, index * 100);
                        observer.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.2 });
            
            elements.forEach(element => {
                observer.observe(element);
            });
        };
        
        // Animate service cards
        animateOnScroll(serviceCards);
        animateOnScroll(expertiseCards);
        
        // Add hover effect on service cards
        serviceCards.forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.classList.add('hover');
            });
            
            card.addEventListener('mouseleave', function() {
                this.classList.remove('hover');
            });
        });
    });
</script>
{% endblock %}
