{% extends 'base.html' %}

{% block content %}
<!-- Hero Section -->
<section class="hero">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 hero-content">
                <div class="hero-badge">Expertise depuis 2008</div>
                <h1>Bienvenue chez <span class="text-accent">GMPL</span></h1>
                <p class="lead">Votre partenaire spécialiste des moteurs et pièces détachées pour poids lourds à Dakar, Sénégal. Qualité et fiabilité depuis plus de 10 ans.</p>
                <div class="hero-buttons">
                    <a href="{{ url_for('main.products') }}" class="btn btn-light btn-md">
                        <span class="icon-box"><i class="fas fa-box-open"></i></span>
                        Découvrir nos produits
                    </a>
                    <a href="{{ url_for('main.contact') }}" class="btn btn-outline-light btn-md">
                        <span class="icon-box"><i class="fas fa-envelope"></i></span>
                        Nous contacter
                    </a>
                </div>
                <div class="hero-stats">
                    <div class="hero-stat-item">
                        <span class="hero-stat-value">15+</span>
                        <span class="hero-stat-label">Années d'expérience</span>
                    </div>
                    <div class="hero-stat-item">
                        <span class="hero-stat-value">1000+</span>
                        <span class="hero-stat-label">Clients satisfaits</span>
                    </div>
                    <div class="hero-stat-item">
                        <span class="hero-stat-value">5000+</span>
                        <span class="hero-stat-label">Produits disponibles</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="hero-image">
                    <div class="hero-image-overlay"></div>
                    <img src="{{ url_for('static', filename='img/man_engine_hero.jpeg') }}" alt="Moteur industriel MAN E0834 E302" class="img-fluid rounded shadow" />
                    <div class="hero-image-badge">
                        <span>Qualité</span>
                        <span>Fiabilité</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="hero-shape">
        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
            <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" class="shape-fill"></path>
        </svg>
    </div>
</section>

<!-- Features Section -->
<section class="features py-5">
    <div class="container">
        <div class="row text-center mb-5">
            <div class="col-md-12">
                <h2 class="section-title fw-bold text-center">Pourquoi choisir <span class="text-primary">GMPL</span> ?</h2>
                <p class="lead">Des avantages qui font la différence pour votre flotte</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="text-center feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <h4>Qualité garantie</h4>
                    <p>Tous nos produits sont sélectionnés avec soin pour vous garantir performance et durabilité exceptionnelles.</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="text-center feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-tools"></i>
                    </div>
                    <h4>Expertise technique</h4>
                    <p>Notre équipe d'experts vous accompagne dans le choix des pièces parfaitement adaptées à vos besoins spécifiques.</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="text-center feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-truck"></i>
                    </div>
                    <h4>Livraison rapide</h4>
                    <p>Service de livraison efficace pour vous fournir les pièces nécessaires dans les meilleurs délais partout au Sénégal.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Products Section -->
<section class="py-5 products-section">
    <div class="container">
        <div class="row mb-5">
            <div class="col-md-8">
                <div class="section-header">
                    <span class="section-subtitle">Notre catalogue</span>
                    <h2 class="section-title fw-bold">Nos produits phares</h2>
                    <p class="lead">Découvrez notre sélection de produits de qualité supérieure</p>
                </div>
            </div>
            <div class="col-md-4 text-md-end d-flex align-items-center justify-content-md-end">
                <a href="{{ url_for('main.products') }}" class="btn btn-primary btn-with-icon">
                    <span>Voir tous les produits</span>
                    <i class="fas fa-arrow-right"></i>
                </a>
            </div>
        </div>
        
        <div class="row">
            {% if featured_products %}
                {% for product in featured_products %}
                    <div class="col-md-4 mb-4">
                        <div class="card h-100 product-card">
                            <div class="product-badge">
                                <span class="badge-label {% if product.condition == 'new' %}bg-success{% elif product.condition == 'reconditioned' %}bg-primary{% else %}bg-secondary{% endif %}">
                                    {{ {'new': 'Neuf', 'reconditioned': 'Reconditionné', 'used': 'Occasion'}.get(product.condition, '') }}
                                </span>
                            </div>
                            {% if product.image_url %}
                                <div class="product-img-wrapper">
                                    <img src="{{ url_for('static', filename=product.image_url) }}" alt="{{ product.name }}" class="card-img-top product-img">
                                </div>
                            {% else %}
                                <div class="card-img-top product-img d-flex align-items-center justify-content-center bg-light">
                                    <i class="fas fa-cog fa-4x text-secondary"></i>
                                </div>
                            {% endif %}
                            <div class="card-body">
                                <h5 class="card-title">{{ product.name }}</h5>
                                <p class="card-text">{{ product.description|truncate(100) }}</p>
                                {% if product.price %}
                                    <p class="product-price">{{ product.price }} FCFA</p>
                                {% endif %}
                                <div class="product-action">
                                    <a href="{{ url_for('main.product_detail', product_id=product.id) }}" class="btn btn-outline-primary btn-with-icon">
                                        <span>Détails</span>
                                        <i class="fas fa-info-circle"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            {% else %}
                <div class="col-12">
                    <div class="alert alert-info">
                        Aucun produit à afficher pour le moment.
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
    
    <div class="product-section-shape">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
            <path fill="#f5f8fb" fill-opacity="1" d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
        </svg>
    </div>
</section>

<!-- Services Section -->
<section class="py-5 services-section">
    <div class="container">
        <div class="row mb-5">
            <div class="col-md-8">
                <div class="section-header">
                    <span class="section-subtitle">Nos prestations</span>
                    <h2 class="section-title fw-bold">Nos services</h2>
                    <p class="lead">Nous vous offrons des services complets et personnalisés pour répondre à tous vos besoins</p>
                </div>
            </div>
            <div class="col-md-4 text-md-end d-flex align-items-center justify-content-md-end">
                <a href="{{ url_for('main.services') }}" class="btn btn-primary btn-with-icon">
                    <span>Tous nos services</span>
                    <i class="fas fa-arrow-right"></i>
                </a>
            </div>
        </div>
        
        <div class="row">
            {% if services %}
                {% for service in services[:3] %}
                    <div class="col-md-4 mb-4">
                        <div class="service-card h-100">
                            <div class="service-icon">
                                <i class="fas fa-{% if loop.index == 1 %}cogs{% elif loop.index == 2 %}wrench{% else %}tools{% endif %}"></i>
                            </div>
                            <div class="service-image">
                                {% if service.image_url %}
                                    <img src="{{ url_for('static', filename=service.image_url) }}" alt="{{ service.name }}" class="img-fluid rounded">
                                {% else %}
                                    <div class="service-img-placeholder d-flex align-items-center justify-content-center py-4">
                                        <i class="fas fa-wrench fa-4x"></i>
                                    </div>
                                {% endif %}
                            </div>
                            <div class="service-content">
                                <h4 class="service-title">{{ service.name }}</h4>
                                <p class="service-description">{{ service.description|truncate(150) }}</p>
                                <a href="{{ url_for('main.services') }}#service-{{ service.id }}" class="service-link">
                                    <span>En savoir plus</span>
                                    <i class="fas fa-long-arrow-alt-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            {% else %}
                <div class="col-12">
                    <div class="alert alert-info">
                        Aucun service à afficher pour le moment.
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
    
    <div class="services-section-shape">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
            <path fill="#f5f8fb" fill-opacity="1" d="M0,224L80,224C160,224,320,224,480,208C640,192,800,160,960,165.3C1120,171,1280,213,1360,234.7L1440,256L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
        </svg>
    </div>
</section>

<!-- Testimonials Section -->
<section class="py-5 testimonials-section">
    <div class="container">
        <div class="row mb-5 text-center">
            <div class="col-md-12">
                <div class="section-header text-center">
                    <span class="section-subtitle">Témoignages</span>
                    <h2 class="section-title fw-bold">Ce que disent nos clients</h2>
                    <p class="lead">Découvrez les témoignages de nos clients satisfaits de notre expertise</p>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="testimonial-card h-100">
                    <div class="testimonial-quote">
                        <i class="fas fa-quote-left"></i>
                    </div>
                    <div class="testimonial-content">
                        <p>Grâce à GMPL, j'ai pu trouver les pièces dont j'avais besoin pour mon camion. Service rapide et professionnel, je recommande vivement !</p>
                    </div>
                    <div class="testimonial-author">
                        <div class="testimonial-avatar">
                            <div class="avatar-placeholder">
                                <span>M</span>
                            </div>
                        </div>
                        <div class="testimonial-info">
                            <p class="author-name">Moussa D.</p>
                            <p class="author-title">Entreprise de transport</p>
                            <div class="testimonial-rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="testimonial-card h-100">
                    <div class="testimonial-quote">
                        <i class="fas fa-quote-left"></i>
                    </div>
                    <div class="testimonial-content">
                        <p>Je suis très satisfait de la qualité des moteurs reconditionnés de GMPL. L'équipe technique est compétente et disponible pour répondre à toutes mes questions.</p>
                    </div>
                    <div class="testimonial-author">
                        <div class="testimonial-avatar">
                            <div class="avatar-placeholder">
                                <span>I</span>
                            </div>
                        </div>
                        <div class="testimonial-info">
                            <p class="author-name">Ibrahim S.</p>
                            <p class="author-title">Garagiste</p>
                            <div class="testimonial-rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="testimonial-card h-100">
                    <div class="testimonial-quote">
                        <i class="fas fa-quote-left"></i>
                    </div>
                    <div class="testimonial-content">
                        <p>GMPL est mon fournisseur de confiance depuis plusieurs années. Des produits de qualité et un service client exemplaire. Je ne peux que les recommander.</p>
                    </div>
                    <div class="testimonial-author">
                        <div class="testimonial-avatar">
                            <div class="avatar-placeholder">
                                <span>A</span>
                            </div>
                        </div>
                        <div class="testimonial-info">
                            <p class="author-name">Aminata F.</p>
                            <p class="author-title">Société de BTP</p>
                            <div class="testimonial-rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="py-5 cta-section position-relative">
    <div class="container">
        <div class="cta-container">
            <div class="row align-items-center">
                <div class="col-md-8 mb-3 mb-md-0">
                    <h2 class="fw-bold">Besoin d'informations supplémentaires ?</h2>
                    <p class="lead mb-0">Contactez-nous dès aujourd'hui pour discuter de vos besoins spécifiques.</p>
                </div>
                <div class="col-md-4 text-md-end">
                    <a href="{{ url_for('main.contact') }}" class="btn btn-light btn-lg btn-with-icon">
                        <span>Nous contacter</span>
                        <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-wave">
        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
            <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
        </svg>
    </div>
</section>
{% endblock %}