{{define "explore"}}
<!--==================== EXPLORE ====================-->
<section class="explore section">
    <div class="container explore-content">
        <h1>Location de matériel pour <br> <span class="highlight">Professionnels et Partculiers</span></h1>
        <p>Plus de 1000 références disponibles immédiatement.</p>
        <a href="#" class="btn-primary">Catalogue</a>
    </div>
</section>

<!--==================== CATEGORIES ====================-->
<section class="explore-categories bg-light">
    <div class="container">
        <h2 class="section-title">Les catégories populaires</h2>

        <div class="category-grid">
            <!-- Cat 1 -->
            <div class="cat-card">
                <div class="cat-icon"><i class="ri-building-2-fill"></i></div>
                <h3>Matériels de construction</h3>
            </div>
            <!-- Cat 2 -->
            <div class="cat-card">
                <div class="cat-icon"><i class="ri-tv-fill"></i></div>
                <h3>Électroménagers</h3>
            </div>
            <!-- Cat 3 -->
            <div class="cat-card">
                <div class="cat-icon"><i class="ri-roadster-fill"></i></div>
                <h3>Véhicules</h3>
            </div>
            <!-- Cat 4 -->
            <div class="cat-card">
                <div class="cat-icon"><i class="ri-home-9-fill"></i></div>
                <h3>Salles événementielles</h3>
            </div>
            <!-- Cat 5 -->
            <div class="cat-card">
                <div class="cat-icon"><i class="ri-ship-2-fill"></i></div>
                <h3>Bateaux</h3>
            </div>
        </div>
    </div>
</section>

 <!--==================== PRODUCT SPOTLIGHT ====================-->
<section class="product-spotlight">
    <div class="container">
        <div class="flex-row-between mb-2">
            <h2 class="section-title">Les locations de la semaine</h2>
            <a href="#" class="see-all">Tous les produits<i class="ri-arrow-right-line"></i></a>
        </div>

        <div class="product-grid">
            <!-- Product 1 -->
            <article class="product-card">
                <div class="tag">Top</div>
                <div class="prod-image">
                    <img src="/public/assets/img/chaise.jpg" alt="chair">
                </div>
                <div class="prod-details">
                    <span class="category">Chaise</span>
                    <h4>Chaise événementielle</h4>
                    <div class="price-block">
                        <span class="label">À partir de</span>
                        <span class="price">20.00€</span>
                        <span class="per">/ jour</span>
                    </div>
                    <button class="btn-add" onclick="spotlightChaisePhone()">Contacter l'agence</button>
                </div>
            </article>

            <!-- Product 2 -->
            <article class="product-card">
                <div class="prod-image">
                    <img src="/public/assets/img/bateau.jpg" alt="boat">
                </div>
                <div class="prod-details">
                    <span class="category">Bateau</span>
                    <h4>Bateau de plaisance</h4>
                    <div class="price-block">
                        <span class="label">À partir de</span>
                        <span class="price">185.00€</span>
                        <span class="per">/ jour</span>
                    </div>
                    <button class="btn-add" onclick="spotlightBateauPhone()">Contacter l'agence</button>
                </div>
            </article>

            <!-- Product 3 -->
            <article class="product-card">
                <div class="tag promo">-15%</div>
                <div class="prod-image">
                    <img src="/public/assets/img/vaisselle.jpg" alt="dishes">
                </div>
                <div class="prod-details">
                    <span class="category">Vaisselle</span>
                    <h4>Vaisselle haut de gamme</h4>
                    <div class="price-block">
                        <span class="label">À partir de</span>
                        <span class="price">35.00€</span>
                        <span class="per">/ jour</span>
                    </div>
                    <button class="btn-add" onclick="spotlightVaissellePhone()">Contacter l'agence</button>
                </div>
            </article>
            <!-- Product 4 -->
            <article class="product-card">
                <div class="prod-image">
                    <img src="/public/assets/img/bache-structure-evenement-2.png" alt="tarp">
                </div>
                <div class="prod-details">
                    <span class="category">Bâche</span>
                    <h4>Bâche événementielle</h4>
                    <div class="price-block">
                        <span class="label">À partir</span>
                        <span class="price">70.00€</span>
                        <span class="per">/ jour</span>
                    </div>
                    <button class="btn-add" onclick="spotlightBachePhone()">Contacter l'agence</button>
                </div>
            </article>

            <!-- Product 5 -->
            <article class="product-card">
                <div class="prod-image">
                    <img src="/public/assets/img/farmlands/terrain-attecoube.jpg" alt="tarp">
                </div>
                <div class="prod-details">
                    <span class="category">Terre agricole</span>
                    <h4>Terrain Attecoubé</h4>
                    <div class="price-block">
                        <span class="label">À partir</span>
                        <span class="price">180.00€</span>
                        <span class="per">/ hectare</span>
                    </div>
                    <button class="btn-add" onclick="spotlightTerrainAttecoubePhone()">Contacter l'agence</button>
                </div>
            </article>

            <!-- Product 6 -->
            <article class="product-card">
                <div class="prod-image">
                    <img src="/public/assets/img/farmlands/terrain-treichville.jpeg" alt="tarp">
                </div>
                <div class="prod-details">
                    <span class="category">Terre agricole</span>
                    <h4>Terrain Treichville</h4>
                    <div class="price-block">
                        <span class="label">À partir</span>
                        <span class="price">180.00€</span>
                        <span class="per">/ hectare</span>
                    </div>
                    <button class="btn-add" onclick="spotlightTerrainTreichvillePhone()">Contacter l'agence</button>
                </div>
            </article>

            <!-- Product 7 -->
            <article class="product-card">
                <div class="prod-image">
                    <img src="/public/assets/img/farmlands/terrain-marcory.jpg" alt="tarp">
                </div>
                <div class="prod-details">
                    <span class="category">Terre agricole</span>
                    <h4>Terrain Marcory</h4>
                    <div class="price-block">
                        <span class="label">À partir</span>
                        <span class="price">180.00€</span>
                        <span class="per">/ hectare</span>
                    </div>
                    <button class="btn-add" onclick="spotlightTerrainMarcoryPhone()">Contacter l'agence</button>
                </div>
            </article>

            <!-- Product 8 -->
            <article class="product-card">
                <div class="prod-image">
                    <img src="/public/assets/img/farmlands/terrain-bracodi.avif" alt="tarp">
                </div>
                <div class="prod-details">
                    <span class="category">Terre agricole</span>
                    <h4>Terrain Bracodi</h4>
                    <div class="price-block">
                        <span class="label">À partir</span>
                        <span class="price">180.00€</span>
                        <span class="per">/ hectare</span>
                    </div>
                    <button class="btn-add" onclick="spotlightTerrainBracodiPhone()">Contacter l'agence</button>
                </div>
            </article>

            <!-- Product 9 -->
            <article class="product-card">
                <div class="prod-image">
                    <img src="/public/assets/img/tools/car-product-1.jpg" alt="tarp">
                </div>
                <div class="prod-details">
                    <span class="category">Véhicule</span>
                    <h4>Renault megane</h4>
                    <div class="price-block">
                        <span class="label">À partir</span>
                        <span class="price">78.43€</span>
                        <span class="per">/ jour</span>
                    </div>
                    <button class="btn-add" onclick="spotlightRenaultPhone()">Contacter l'agence</button>
                </div>
            </article>

            <!-- Product 10 -->
            <article class="product-card">
                <div class="prod-image">
                    <img src="/public/assets/img/tools/car-product-2.jpeg" alt="tarp">
                </div>
                <div class="prod-details">
                    <span class="category">Véhicule</span>
                    <h4>Mazda</h4>
                    <div class="price-block">
                        <span class="label">À partir</span>
                        <span class="price">78.43€</span>
                        <span class="per">/ jour</span>
                    </div>
                    <button class="btn-add" onclick="spotlightMazdaPhone()">Contacter l'agence</button>
                </div>
            </article>

            <!-- Product 11 -->
            <article class="product-card">
                <div class="prod-image">
                    <img src="/public/assets/img/tools/car-product-3.avif" alt="tarp">
                </div>
                <div class="prod-details">
                    <span class="category">Véhicule</span>
                    <h4>Audi</h4>
                    <div class="price-block">
                        <span class="label">À partir</span>
                        <span class="price">78.43€</span>
                        <span class="per">/ jour</span>
                    </div>
                    <button class="btn-add" onclick="spotlightAudiPhone()">Contacter l'agence</button>
                </div>
            </article>

            <!-- Product 12 -->
            <article class="product-card">
                <div class="prod-image">
                    <img src="/public/assets/img/tools/car-product-1.jpg" alt="tarp">
                </div>
                <div class="prod-details">
                    <span class="category">Véhicule</span>
                    <h4>Renault megane</h4>
                    <div class="price-block">
                        <span class="label">À partir</span>
                        <span class="price">78.43€</span>
                        <span class="per">/ jour</span>
                    </div>
                    <button class="btn-add" onclick="spotlightRenaultPhone()">Contacter l'agence</button>
                </div>
            </article>
        </div>
    </div>
</section>
{{ end }}