{% extends 'base.html.twig' %}

{% block title %}Accueil - Garage Automobile{% endblock %}

{% block body %}
    <div class="container my-5">

        {# SECTION HERO #}
        <div class="row mb-5">
            <div class="col-12 text-center">
                <h1 class="display-4 fw-bold mb-4">Bienvenue chez Garage Automobile</h1>
                <p class="lead text-muted">Votre spécialiste automobile depuis plus de 20 ans</p>
            </div>
        </div>

        {# IMAGE PRINCIPALE #}
        <div class="row mb-5">
            <div class="col-12">
                <img src="https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?w=1200&h=400&fit=crop"
                     alt="Notre garage"
                     class="img-fluid rounded shadow-lg w-100"
                     style="object-fit: cover; height: 400px;">
            </div>
        </div>

        {# TEXTE DE PRÉSENTATION #}
        <div class="row mb-5">
            <div class="col-lg-8 mx-auto">
                <div class="card shadow-sm">
                    <div class="card-body p-4">
                        <h2 class="card-title h3 mb-4">Notre Expertise</h2>

                        <p class="card-text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </p>

                        <p class="card-text">
                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
                            eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                            sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </p>

                        <hr class="my-4">

                        <div class="row text-center">
                            <div class="col-md-4 mb-3">
                                <div class="p-3">
                                    <h3 class="h1 text-primary">500+</h3>
                                    <p class="text-muted">Véhicules vendus</p>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <div class="p-3">
                                    <h3 class="h1 text-primary">20+</h3>
                                    <p class="text-muted">Années d'expérience</p>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <div class="p-3">
                                    <h3 class="h1 text-primary">98%</h3>
                                    <p class="text-muted">Clients satisfaits</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {# NOS SERVICES #}
        <div class="row mb-5">
            <div class="col-12 text-center mb-4">
                <h2 class="h2">Nos Services</h2>
            </div>

            <div class="col-md-4 mb-4">
                <div class="card h-100 shadow-sm">
                    <div class="card-body text-center">
                        <div class="mb-3">
                            <span class="display-4">🚗</span>
                        </div>
                        <h5 class="card-title">Vente de véhicules</h5>
                        <p class="card-text">Large choix de véhicules d'occasion vérifiés et garantis</p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 mb-4">
                <div class="card h-100 shadow-sm">
                    <div class="card-body text-center">
                        <div class="mb-3">
                            <span class="display-4">🔧</span>
                        </div>
                        <h5 class="card-title">Entretien</h5>
                        <p class="card-text">Service d'entretien complet par des professionnels qualifiés</p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 mb-4">
                <div class="card h-100 shadow-sm">
                    <div class="card-body text-center">
                        <div class="mb-3">
                            <span class="display-4">💰</span>
                        </div>
                        <h5 class="card-title">Reprise</h5>
                        <p class="card-text">Reprise de votre ancien véhicule au meilleur prix</p>
                    </div>
                </div>
            </div>
        </div>

        {# CALL TO ACTION #}
        <div class="row">
            <div class="col-12 text-center">
                <div class="bg-primary text-white rounded p-5 shadow">
                    <h2 class="h3 mb-4">Découvrez notre sélection de véhicules</h2>
                    <p class="lead mb-4">Des voitures de qualité à prix compétitifs</p>
                    <a href="{{ path('app_vente') }}" class="btn btn-light btn-lg px-5">
                        Voir les véhicules disponibles
                    </a>
                </div>
            </div>
        </div>

    </div>
{% endblock %}