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

{% block title %}KHEOPSBEAUTY{% endblock %}

{% block body %}
<style>
    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
</style>
<main class="bg-white">

    <div class="d-flex justify-content-center" style="height: 15rem; background-color: #ffe4ec; color: black;">
        <div class="d-flex flex-column align-items-center justify-content-center ">
            <h2>KHEOPSBEAUTY</h2>
            <p>Bienvenue sur notre site. Vous pouvez y voir nos prestations, prendre un rendez-vous et voir les avis des clients !</p>
            <p><a href="https://www.tiktok.com/@kheopsbeauty"><button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">Suivez-nous</button></a></p>
            <p><a href="/appointments"><button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Prendre rendez-vous</button></a></p>
        </div>
    </div>
    
        <div class="container">
        <style>
            .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
            .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
        </style>

        <section id="services" class="mt-5">
                <h2 class="mb-4">Prestations</h2>
                {% if services|length > 0 %}
                    <div class="row">
                        {% for service in services %}
                            <div class="col-md-4 mb-4">
                                <div class="card h-100">
                                    <div class="card-body">
                                        <img width="200px" height="200px" src="{{ asset('build/images/' ~ service.image) }}" alt="{{ service.name }}">
                                        <h5 class="card-title">{{ service.name|upper }}</h5>
                                        <p class="card-text">{{ service.description|slice(0, 100) }}...</p>
                                        <p class="card-text">{{ service.price }}€ de l'heure</p>
                                        <a href="{{ path('app_services_show', { id : service.id }) }}" class="btn btn-primary">Plus d'infos</a>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="alert alert-warning">Aucune prestation à afficher pour le moment. Restez informés sur nos réseaux sociaux.</div>
                {% endif %}
            </section>
        </div>
        <div class="d-flex flex-row-reverse m-4">
                <a href="/services"><button class="btn my-2 my-sm-0" type="submit">Voir toutes les prestations > </button></a>
        </div>


            {# <section id="products" class="mt-5">
                <h2 class="mb-4">Derniers produits</h2>
                {% if products|length > 0 %}
                    <div class="row">
                        {% for product in products %}
                            <div class="col-md-4 mb-4">
                                <div class="card h-100">
                                    <div class="card-body">
                                        <img width="200px" height="200px" src="{{ asset('build/images/' ~ product.image) }}" alt="{{ product.name }}">
                                        <h5 class="card-title">{{ product.name|upper }}</h5>
                                        <p class="card-text">{{ product.description|slice(0, 100) }}...</p>
                                        <a href="{{ path('app_catalog_show', { id : product.id }) }}" class="btn btn-primary">Voir</a>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="alert alert-warning">Aucun produit disponible pour le moment.</div>
                {% endif %}
            </section>
        </div>
        <div class="d-flex flex-row-reverse m-4">
                <a href="/catalog"><button class="btn my-2 my-sm-0" type="submit">Voir tous les produits > </button></a>
        </div> #}

    <section id="reviews" class="mb-5">
      <h2 class="mb-4">Avis des clients</h2>
      <div class="list-group">
        <div class="list-group-item">
          <strong>J. B.</strong> – Jeudi 3 Février 15h<br />
          <span>Très bonne prestation !</span>
        </div>
        <div class="list-group-item">
          <strong>P. Z.</strong> – Mardi 30 Mai 14h<br />
          <span>Génial !</span>
        </div>
        <div class="list-group-item">
          <strong>G. P.</strong> – Lundi 15 Janvier 11h<br />
          <span>Merci ! C’était excellent !</span>
        </div>
      </div>
      <div class="mt-3 text-end">
        <a href="#" class="btn btn-link"><button class="btn my-2 my-sm-0" type="submit">Voir plus de commentaires > </button></a>
      </div>
    </section>
</main>

{% endblock %}