{% extends "base_website.html" %}

{% block content %}

  <div class="container py-5">
    <div class="row g-4">

      <!-- Colonne gauche : image + infos produit -->
      <div class="col-md-4">
        <div class="card shadow-sm">
          <img src="images/facade-main.jpg" class="card-img-top" alt="Peinture Façade CLASSIC">
          <div class="card-body">
            <h4 class="card-title">Peinture Façade CLASSIC</h4>
            <p class="text-muted mb-2">À partir de <strong>25 €</strong></p>
            <button class="btn btn-primary w-100 mb-3" data-bs-toggle="modal" data-bs-target="#colorModal">
              Choisir une couleur
            </button>
            <p><strong>Conditionnement :</strong></p>
            <ul>
              <li>Boîte de 4kg - 25 €</li>
              <li>Boîte de 12kg - 65 €</li>
              <li>Boîte de 15kg - 79 €</li>
              <li>Boîte de 25kg - 120 €</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- Colonne droite : description complète -->
      <div class="col-md-8">
        <h2 class="mb-3">Présentation</h2>
        <p>Les peintures pour façade sont spécialement formulées pour résister aux conditions extérieures et protéger les murs des bâtiments.</p>
        <ul>
          <li><strong>Résistance aux intempéries :</strong> pluie, gel, températures extrêmes.</li>
          <li><strong>Durabilité :</strong> longue tenue sans dégradation.</li>
          <li><strong>Résistance aux UV :</strong> évite jaunissement/décoloration.</li>
          <li><strong>Perméabilité :</strong> laisse échapper l’humidité, préserve les murs.</li>
          <li><strong>Adhérence :</strong> excellente accroche sur béton, pierre, brique.</li>
          <li><strong>Élasticité :</strong> suit les mouvements sans fissure.</li>
          <li><strong>Résistance aux salissures :</strong> additifs anti-poussière.</li>
        </ul>

        <hr>

        <h2>Conseils d'utilisation</h2>
        <h5>1. Préparer la surface</h5>
        <ul>
          <li>Nettoyer, dégraisser, réparer et poncer si nécessaire.</li>
        </ul>

        <h5>2. Matériel recommandé</h5>
        <ul>
          <li>Rouleau à poils moyens pour les murs</li>
          <li>Pinceau pour les finitions</li>
        </ul>

        <h5>3. Application</h5>
        <ul>
          <li>Température idéale : 10°C à 25°C</li>
          <li>Appliquer 2 couches minimum</li>
          <li>Sous-couche recommandée si surface poreuse</li>
        </ul>

        <h5>4. Entretien</h5>
        <ul>
          <li>Ne pas exposer à la pluie dans les 48h</li>
          <li>Nettoyage doux pour préserver la couleur</li>
        </ul>

        <hr>

        <h2>Fiche commerciale</h2>
        <ul>
          <li><strong>Propriété :</strong> Lavable</li>
          <li><strong>Rendement :</strong> 3m²/kg en deux couches</li>
          <li><strong>Aspect :</strong> Mat</li>
          <li><strong>Dilution :</strong> Ne pas diluer</li>
          <li><strong>Conditionnement :</strong> 4kg, 12kg, 15kg, 25kg ou vrac</li>
        </ul>
      </div>
    </div>
  </div>

  <!-- Modal couleur -->
  <div class="modal fade" id="colorModal" tabindex="-1" aria-labelledby="colorModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="colorModalLabel">Choisir une couleur</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
        </div>
        <div class="modal-body">
          <div class="d-flex flex-wrap gap-3">
            <div class="color-swatch" style="background:#f4f1ee;width:50px;height:50px;border:1px solid #ccc;"></div>
            <div class="color-swatch" style="background:#d3c6ba;width:50px;height:50px;border:1px solid #ccc;"></div>
            <div class="color-swatch" style="background:#a69b8d;width:50px;height:50px;border:1px solid #ccc;"></div>
            <div class="color-swatch" style="background:#7b6d61;width:50px;height:50px;border:1px solid #ccc;"></div>
            <div class="color-swatch" style="background:#4a4138;width:50px;height:50px;border:1px solid #ccc;"></div>
            <!-- Ajoute autant de couleurs que nécessaire -->
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
        </div>
      </div>
    </div>
  </div>

{% endblock %}