{% extends 'base.html' %}

{% block extra_css %}
<link href="{{ url_for('static', filename='css/about.css') }}" rel="stylesheet">
{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="hero">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center hero-content">
                <div class="hero-badge">Notre histoire</div>
                <h1>À propos de <span class="text-accent">GMPL</span></h1>
                <p class="lead">Découvrez notre histoire, notre mission et notre expertise en moteurs industriels</p>
            </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="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>

<!-- About Section -->
<section class="py-5 about-intro-section" id="presentation">
    <div class="container">
        <div class="row mb-5">
            <div class="col-lg-12 mb-4">
                <div class="section-header text-center">
                    <span class="section-subtitle">Qui sommes-nous</span>
                    <h2 class="section-title fw-bold">Notre entreprise</h2>
                    <p class="lead mb-4">Spécialiste en moteurs et pièces détachées pour poids lourds depuis 2008</p>
                </div>
                
                <div class="about-intro-container">
                    <div class="row mb-5 align-items-center">
                        <div class="col-md-6">
                            <div class="about-content">
                                <p>{{ settings.company_description|default('GMPL (General Motors Poids Lourds) est une entreprise spécialisée dans la fourniture de moteurs et pièces détachées pour poids lourds. Basée à Dakar, Sénégal, notre entreprise s\'est imposée comme un acteur majeur dans le secteur de la vente et maintenance de pièces automobiles pour véhicules lourds.') }}</p>
                                <p>Notre expertise et notre engagement envers la qualité nous permettent de fournir des produits et services qui répondent aux normes les plus élevées du marché. Chez GMPL, nous croyons que la réussite de nos clients est notre réussite.</p>
                                
                                <div class="about-features">
                                    <div class="about-feature-item">
                                        <div class="about-feature-icon">
                                            <i class="fas fa-check-circle"></i>
                                        </div>
                                        <div class="about-feature-text">
                                            <h5>Service client exceptionnel</h5>
                                            <p>Une équipe attentive à vos besoins</p>
                                        </div>
                                    </div>
                                    
                                    <div class="about-feature-item">
                                        <div class="about-feature-icon">
                                            <i class="fas fa-check-circle"></i>
                                        </div>
                                        <div class="about-feature-text">
                                            <h5>Conseils techniques avisés</h5>
                                            <p>Par des professionnels qualifiés</p>
                                        </div>
                                    </div>
                                    
                                    <div class="about-feature-item">
                                        <div class="about-feature-icon">
                                            <i class="fas fa-check-circle"></i>
                                        </div>
                                        <div class="about-feature-text">
                                            <h5>Pièces de qualité</h5>
                                            <p>Sélectionnées avec soin</p>
                                        </div>
                                    </div>
                                </div>
                            
                                <div class="mt-4">
                                    <a href="{{ url_for('main.contact') }}" class="btn btn-primary btn-with-icon">
                                        <span>Contactez-nous</span>
                                        <i class="fas fa-arrow-right"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="about-image-main">
                                <img src="{{ url_for('static', filename='uploads/images/about/directeur-gmpl.jpg') }}" alt="Directeur GMPL dans son atelier de moteurs" class="img-fluid rounded shadow">
                                <div class="about-image-badge">
                                    <span>Depuis 2008</span>
                                    <span>à votre service</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Installations Section -->
<section class="py-5 about-installations-section bg-light">
    <div class="container">
        <div class="row mb-5">
            <div class="col-md-12 text-center">
                <div class="section-header">
                    <span class="section-subtitle">Nos installations</span>
                    <h2 class="section-title fw-bold">Notre environnement de travail</h2>
                    <p class="lead">Des infrastructures adaptées pour une qualité optimale</p>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="installation-card">
                    <div class="installation-image">
                        <img src="{{ url_for('static', filename='img/about/team_garage.jpg') }}" alt="Notre équipe de techniciens" class="img-fluid rounded">
                        <div class="installation-overlay">
                            <div class="installation-icon">
                                <i class="fas fa-tools"></i>
                            </div>
                        </div>
                    </div>
                    <div class="installation-content">
                        <h4>Notre garage</h4>
                        <p>Un espace équipé pour tous types d'interventions sur les moteurs de poids lourds, avec des outils spécialisés et un environnement adapté aux travaux complexes.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="installation-card">
                    <div class="installation-image">
                        <img src="{{ url_for('static', filename='img/about/motors_workshop.jpg') }}" alt="Atelier de moteurs" class="img-fluid rounded">
                        <div class="installation-overlay">
                            <div class="installation-icon">
                                <i class="fas fa-cogs"></i>
                            </div>
                        </div>
                    </div>
                    <div class="installation-content">
                        <h4>Notre atelier</h4>
                        <p>Un atelier spécialisé où nos experts reconditionnent des moteurs avec précision et savoir-faire, garantissant performance et fiabilité pour chaque pièce.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="installation-card">
                    <div class="installation-image">
                        <img src="{{ url_for('static', filename='img/about/warehouse.jpg') }}" alt="Notre entrepôt" class="img-fluid rounded">
                        <div class="installation-overlay">
                            <div class="installation-icon">
                                <i class="fas fa-warehouse"></i>
                            </div>
                        </div>
                    </div>
                    <div class="installation-content">
                        <h4>Notre stock</h4>
                        <p>Un vaste entrepôt où nous stockons des milliers de pièces détachées et moteurs disponibles immédiatement pour répondre rapidement à vos besoins.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="shape-divider">
        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
            <path d="M1200 120L0 16.48 0 0 1200 0 1200 120z" class="shape-fill"></path>
        </svg>
    </div>
</section>

<!-- Mission and Vision Section -->
<section class="py-5 mission-vision-section" id="mission">
    <div class="container">
        <div class="row mb-5 text-center">
            <div class="col-md-12">
                <div class="section-header">
                    <span class="section-subtitle">Nos objectifs</span>
                    <h2 class="section-title fw-bold">Notre mission et notre vision</h2>
                    <p class="lead">Ce qui nous guide au quotidien pour vous offrir le meilleur service</p>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-6 mb-4">
                <div class="mission-vision-card h-100">
                    <div class="mission-vision-card-header">
                        <div class="mission-vision-icon-wrapper">
                            <i class="fas fa-bullseye mission-vision-card-icon"></i>
                        </div>
                        <h3 class="mission-vision-card-title">Notre mission</h3>
                    </div>
                    <div class="mission-vision-card-content">
                        <p>Fournir des moteurs et pièces détachées de haute qualité pour poids lourds, accompagnés d'un service client exceptionnel, afin de contribuer à la performance et à la durabilité des flottes de nos clients.</p>
                        <p>Nous nous engageons à:</p>
                        <ul class="mission-vision-card-list">
                            <li>
                                <span class="mission-list-icon"><i class="fas fa-check"></i></span>
                                <span class="mission-list-text">Offrir des produits fiables et durables</span>
                            </li>
                            <li>
                                <span class="mission-list-icon"><i class="fas fa-check"></i></span>
                                <span class="mission-list-text">Assurer un service personnalisé et réactif</span>
                            </li>
                            <li>
                                <span class="mission-list-icon"><i class="fas fa-check"></i></span>
                                <span class="mission-list-text">Partager notre expertise technique</span>
                            </li>
                            <li>
                                <span class="mission-list-icon"><i class="fas fa-check"></i></span>
                                <span class="mission-list-text">Proposer des solutions adaptées aux besoins spécifiques</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-4">
                <div class="mission-vision-card h-100">
                    <div class="mission-vision-card-header">
                        <div class="mission-vision-icon-wrapper">
                            <i class="fas fa-eye mission-vision-card-icon"></i>
                        </div>
                        <h3 class="mission-vision-card-title">Notre vision</h3>
                    </div>
                    <div class="mission-vision-card-content">
                        <p>Devenir le partenaire de référence pour les entreprises et professionnels du transport routier au Sénégal et en Afrique de l'Ouest, reconnu pour notre excellence, notre intégrité et notre engagement envers la satisfaction client.</p>
                        <p>Nous aspirons à:</p>
                        <ul class="mission-vision-card-list">
                            <li>
                                <span class="mission-list-icon"><i class="fas fa-check"></i></span>
                                <span class="mission-list-text">Être le leader dans notre secteur d'activité</span>
                            </li>
                            <li>
                                <span class="mission-list-icon"><i class="fas fa-check"></i></span>
                                <span class="mission-list-text">Innover constamment pour améliorer nos produits et services</span>
                            </li>
                            <li>
                                <span class="mission-list-icon"><i class="fas fa-check"></i></span>
                                <span class="mission-list-text">Contribuer au développement durable du secteur du transport</span>
                            </li>
                            <li>
                                <span class="mission-list-icon"><i class="fas fa-check"></i></span>
                                <span class="mission-list-text">Étendre notre présence dans la région</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="mission-shape-divider">
        <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>

<!-- Notre équipe / Fondateur Section -->
<section class="py-5 team-section" id="equipe">
    <div class="container">
        <div class="row mb-5 text-center">
            <div class="col-md-12">
                <div class="section-header">
                    <span class="section-subtitle">Notre personnel</span>
                    <h2 class="section-title fw-bold">Direction et expertise</h2>
                    <p class="lead">L'expérience qui fait la différence</p>
                </div>
            </div>
        </div>
        
        <div class="row align-items-center">
            <div class="col-lg-5 mb-4 mb-lg-0">
                <div class="team-profile-card">
                    <div class="team-profile-image">
                        <img src="{{ url_for('static', filename='uploads/images/about/expert-atelier.jpg') }}" alt="Directeur GMPL dans son atelier de moteurs" class="img-fluid">
                        <div class="team-profile-experience">
                            <span>15+</span>
                            <span>ans d'expérience</span>
                        </div>
                    </div>
                    <div class="team-profile-content">
                        <div class="team-profile-position">Directeur technique</div>
                        <h3 class="team-profile-name">Expert en moteurs industriels</h3>
                        <p>Fort d'une expérience de plus de 15 ans dans le secteur des moteurs et pièces détachées pour poids lourds, notre directeur technique supervise personnellement la sélection et la qualité de tous nos produits.</p>
                        <div class="team-profile-quote">
                            <i class="fas fa-quote-left quote-icon"></i>
                            <p>Notre engagement est de fournir des pièces de qualité qui prolongent la durée de vie de vos véhicules tout en optimisant leur performance.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-7">
                <div class="team-overview-card">
                    <div class="team-overview-header">
                        <h3>Une équipe de professionnels à votre service</h3>
                        <div class="header-underline"></div>
                    </div>
                    <div class="team-overview-content">
                        <p>Notre équipe est composée de professionnels expérimentés dans le secteur des moteurs et pièces détachées pour poids lourds. Chaque membre apporte son expertise unique, que ce soit en mécanique, en gestion de stock ou en service client.</p>
                        <p>Notre expertise technique et notre connaissance approfondie des besoins du marché africain nous permettent de proposer des solutions parfaitement adaptées aux conditions locales et aux exigences de nos clients.</p>
                        <p>Sous la direction de notre équipe technique, nous assurons un service de conseil personnalisé et un suivi rigoureux pour garantir votre satisfaction.</p>
                        
                        <div class="team-expertise-grid">
                            <div class="team-expertise-item">
                                <div class="expertise-icon">
                                    <i class="fas fa-certificate"></i>
                                </div>
                                <div class="expertise-content">
                                    <h5>Techniciens certifiés</h5>
                                    <p>Formés aux dernières technologies</p>
                                </div>
                            </div>
                            
                            <div class="team-expertise-item">
                                <div class="expertise-icon">
                                    <i class="fas fa-headset"></i>
                                </div>
                                <div class="expertise-content">
                                    <h5>Conseillers dédiés</h5>
                                    <p>Pour un accompagnement sur mesure</p>
                                </div>
                            </div>
                            
                            <div class="team-expertise-item">
                                <div class="expertise-icon">
                                    <i class="fas fa-bolt"></i>
                                </div>
                                <div class="expertise-content">
                                    <h5>Service réactif</h5>
                                    <p>Réponse rapide à vos besoins</p>
                                </div>
                            </div>
                            
                            <div class="team-expertise-item">
                                <div class="expertise-icon">
                                    <i class="fas fa-map-marker-alt"></i>
                                </div>
                                <div class="expertise-content">
                                    <h5>Expertise locale</h5>
                                    <p>Connaissance du marché africain</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="team-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>

<!-- Values Section -->
<section class="py-5 values-section bg-light" id="valeurs">
    <div class="container">
        <div class="row mb-5 text-center">
            <div class="col-md-12">
                <div class="section-header">
                    <span class="section-subtitle">Notre éthique</span>
                    <h2 class="section-title fw-bold">Nos valeurs et engagements</h2>
                    <p class="lead">Les principes qui guident nos actions au quotidien</p>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-3 mb-4">
                <div class="value-item">
                    <div class="value-icon-wrapper">
                        <div class="value-icon">
                            <i class="fas fa-award"></i>
                        </div>
                    </div>
                    <div class="value-content">
                        <h4 class="value-title">Qualité</h4>
                        <p>Nous nous engageons à fournir des produits et services de la plus haute qualité, répondant aux normes internationales et testés rigoureusement.</p>
                        <div class="value-overlay">
                            <div class="value-overlay-content">
                                <ul class="value-details-list">
                                    <li>Sélection minutieuse des pièces</li>
                                    <li>Contrôle qualité systématique</li>
                                    <li>Suivi des normes du secteur</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-4">
                <div class="value-item">
                    <div class="value-icon-wrapper">
                        <div class="value-icon">
                            <i class="fas fa-handshake"></i>
                        </div>
                    </div>
                    <div class="value-content">
                        <h4 class="value-title">Intégrité</h4>
                        <p>Nous agissons avec honnêteté, transparence et éthique dans toutes nos interactions avec clients, fournisseurs et partenaires commerciaux.</p>
                        <div class="value-overlay">
                            <div class="value-overlay-content">
                                <ul class="value-details-list">
                                    <li>Transparence dans nos tarifs</li>
                                    <li>Conseils objectifs et honnêtes</li>
                                    <li>Relations de confiance durable</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-4">
                <div class="value-item">
                    <div class="value-icon-wrapper">
                        <div class="value-icon">
                            <i class="fas fa-users"></i>
                        </div>
                    </div>
                    <div class="value-content">
                        <h4 class="value-title">Respect</h4>
                        <p>Nous valorisons et respectons nos clients, nos employés et tous nos partenaires commerciaux, en étant à l'écoute de leurs besoins spécifiques.</p>
                        <div class="value-overlay">
                            <div class="value-overlay-content">
                                <ul class="value-details-list">
                                    <li>Écoute attentive des besoins</li>
                                    <li>Service personnalisé</li>
                                    <li>Respect des engagements</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-4">
                <div class="value-item">
                    <div class="value-icon-wrapper">
                        <div class="value-icon">
                            <i class="fas fa-leaf"></i>
                        </div>
                    </div>
                    <div class="value-content">
                        <h4 class="value-title">Durabilité</h4>
                        <p>Nous nous engageons à promouvoir des pratiques respectueuses de l'environnement dans toutes nos activités et notre chaîne d'approvisionnement.</p>
                        <div class="value-overlay">
                            <div class="value-overlay-content">
                                <ul class="value-details-list">
                                    <li>Recyclage des matériaux</li>
                                    <li>Optimisation de la consommation</li>
                                    <li>Réduction de l'impact environnemental</li>
                                </ul>
                            </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">Envie d'en savoir plus sur nos produits ?</h2>
                    <p class="lead mb-0">Découvrez notre catalogue complet de moteurs et pièces détachées.</p>
                </div>
                <div class="col-md-4 text-md-end">
                    <a href="{{ url_for('main.products') }}" class="btn btn-light btn-lg btn-with-icon">
                        <span>Voir nos produits</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 %}