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

{% block title %}H TRANSPORT — Société de transport et logistique à Lyon{% endblock %}

{% block body %}
    <!-- HERO -->
    <section class="hero d-flex align-items-center justify-content-center text-center text-white" style="background: linear-gradient(rgba(31,41,55,0.7), rgba(31,41,55,0.7)), url('{{ asset('images/hero-camion.jpg') }}') center/cover no-repeat; height: 100vh;">
        <div>
            <img src="{{ asset('images/Logo H transport.jpg') }}" alt="Logo H TRANSPORT" height="100" class="mb-4 rounded shadow">
            <h1 class="fw-bold display-4 text-uppercase">H TRANSPORT</h1>
            <p class="lead mb-4">Transport, logistique et livraison du dernier kilomètre — rapide, fiable, responsable.</p>
            <a href="#about" class="btn btn-lg px-4 py-2" style="background-color:#f97316; color:#fff; border:none;">Découvrir</a>
        </div>
    </section>

    <!-- À propos -->
    <section id="about" class="py-5">
        <div class="container text-center">
            <h2 class="fw-bold mb-4" style="color:#f97316;">Notre mission</h2>
            <div class="row align-items-center">
                <div class="col-md-6">
                    <img src="{{ asset('images/equipe-chauffeurs.jpg') }}" alt="Équipe H TRANSPORT" class="img-fluid rounded shadow">
                </div>
                <div class="col-md-6 mt-4 mt-md-0">
                    <p class="fs-5 text-secondary">
                        Basée à <strong>Lyon</strong>, H TRANSPORT accompagne ses partenaires dans le transport de marchandises
                        et la logistique urbaine. Nous collaborons avec des acteurs majeurs tels qu’<strong>Amazon</strong>,
                        <strong>Vinted</strong>, <strong>Carrefour LAD</strong>, <strong>Paack</strong> et <strong>Colis Privé</strong>.
                    </p>
                    <p class="fs-5 text-secondary">
                        Notre mission : fournir un service <strong>rapide, ponctuel et sécurisé</strong> grâce à une flotte moderne
                        et une équipe expérimentée.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Services -->
    <section id="services" class="py-5" style="background-color:#fafafa;">
        <div class="container">
            <h2 class="fw-bold text-center mb-5" style="color:#f97316;">Nos services</h2>
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="card border-0 shadow-sm h-100">
                        <img src="{{ asset('images/livraison-urbaine.jpg') }}" class="card-img-top" alt="Livraison du dernier kilomètre">
                        <div class="card-body text-center">
                            <h5 class="fw-bold mb-2 mt-2">🚚 Livraison du dernier kilomètre</h5>
                            <p class="text-muted">Livraison urbaine rapide et optimisée, avec suivi en temps réel et reporting transparent.</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card border-0 shadow-sm h-100">
                        <img src="{{ asset('images/logistique-entrepot.jpg') }}" class="card-img-top" alt="Logistique sur mesure">
                        <div class="card-body text-center">
                            <h5 class="fw-bold mb-2 mt-2">⚙️ Logistique sur mesure</h5>
                            <p class="text-muted">Tournées planifiées, stockage temporaire, préparation de commandes et solutions sur mesure.</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card border-0 shadow-sm h-100">
                        <img src="{{ asset('images/camion-electrique.jpg') }}" class="card-img-top" alt="Transport éco-responsable">
                        <div class="card-body text-center">
                            <h5 class="fw-bold mb-2 mt-2">🌱 Transport éco-responsable</h5>
                            <p class="text-muted">Transition énergétique : intégration de véhicules électriques et formation à l’éco-conduite.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Engagements -->
    <section id="values" class="py-5 text-center">
        <div class="container">
            <h2 class="fw-bold mb-4" style="color:#f97316;">Nos engagements</h2>
            <div class="row justify-content-center mb-4">
                <div class="col-md-3"><p class="fs-5">✔️ Ponctualité</p></div>
                <div class="col-md-3"><p class="fs-5">✔️ Sécurité</p></div>
                <div class="col-md-3"><p class="fs-5">✔️ Réactivité</p></div>
                <div class="col-md-3"><p class="fs-5">✔️ Transparence</p></div>
            </div>
            <img src="{{ asset('images/flotte-camions.jpg') }}" alt="Flotte de camions H TRANSPORT" class="img-fluid rounded shadow" style="max-height:400px; object-fit:cover;">
        </div>
    </section>

    <!-- Contact -->
    <section id="contact" class="py-5" style="background-color:#fafafa;">
        <div class="container text-center">
            <h2 class="fw-bold mb-4" style="color:#f97316;">Contactez-nous</h2>
            <p class="fs-5 text-secondary mb-4">Une question, un partenariat ou une candidature ?
                Notre équipe vous répond sous 24h.
            </p>
            <a href="mailto:contact@htrans.fr" class="btn btn-lg shadow-sm px-4 py-3" style="background-color:#f97316; color:#fff; border:none;">
                ✉️ contact@htrans.fr
            </a>
        </div>
    </section>

    <footer class="text-white text-center py-4 mt-5" style="background-color:#1f2937;">
        <small>
            © {{ "now"|date("Y") }} H TRANSPORT — Société de transport et logistique à Lyon.
            <br>
            <a href="mailto:contact@htrans.fr" class="text-white-50 text-decoration-none">contact@htrans.fr</a>
        </small>
    </footer>

    <style>
        html {
            scroll-behavior: smooth;
        }
        section { animation: fadeIn 0.8s ease-in-out; }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(15px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .card:hover {
            transform: translateY(-5px);
            transition: all 0.25s ease-in-out;
        }
    </style>
{% endblock %}