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

{% block title %}
	SS BODY MIND
{% endblock %}
{% block stylesheets %}

	{{parent()}}

	<style>
	    .custom-card {
    border: none;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.header-logo {
    visibility: visible !important;
}
.custom-card:hover {
    transform: translateY(-6px);
}

.card-header {
    background: linear-gradient(135deg, #41553d, #6f8f5f);
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 15px;
    letter-spacing: 1px;
}

.card-body {
    flex: 1;
    display: flex;
    padding: 6px;
    flex-direction: column;
    justify-content: space-between;
}

.card-body ul {
    padding-left: 18px;
}

.card-body ul li {
    margin-bottom: 6px;
    font-size:13px;
}

.price {
    float: right;
    font-weight: 500;
     font-size:12px;
    
}

/* TABS */
.nav-pills .nav-link {
    border-radius: 50px;
    padding: 10px 25px;
    margin: 0 5px;
    color: #41553d;
    border: 1px solid #41553d;
    transition: 0.3s;
}

.nav-pills .nav-link.active {
    background: #41553d;
    color: #fff;
}

/* SMALL DESCRIPTION */
.small-desc {
    font-size: 14px;
    color: #777;
}

.spa-banner {
 min-height: 50vh; 
      background: linear-gradient(180deg, rgba(66, 86, 62, 0.3) 0%, rgba(90, 120, 80, 0.75) 50%, rgba(66, 86, 62, 0.3) 100%);
    color: white;
  padding: 75px 0 40px 0px;
}

.spa-banner h1 {
    font-size: 48px;
    letter-spacing: 1px;
}

.spa-banner p {
    opacity: 0.9;
}

/* BUTTON */
.btn-spa {
    background: white;
    color: #41553d;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: bold;
    transition: 0.3s;
}

.btn-spa:hover {
    background: #6f8f5f;
    color: white;
}
.pic-cures-labs{
    width: 50%;
}
	 #filterTabs {
   
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(8px);
    border-radius: 50px;
    padding: 10px 20px;
    width: fit-content;
    margin: 0 auto 40px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
 
	    @media (max-width: 768px) {
	        
            .title-banner-cures-labs{
                font-size: 30px !important;
        	 }
        	 .col-lg-4.col-md-6.col-6.filter-item.packs {
    padding: 5px;
}
        	 .card-header {
        font-size: 10px;
        padding: 10px;
    }

.pic-cures-labs {
    width: 70%;
}

.small-content-cures {
    line-height: 18px !important;
}

    .card-body {
        font-size: 12px;
    }
    .bilan-suiv-soin{
        font-size: 12px !important;
    } 
    .price{
         font-size: 10px;
    }

    .col-lg-3.col-md-6.col-6.filter-item.slimlab,.col-lg-3.col-md-6.col-6.filter-item.packs { 
        padding: 0px 4px;
    }
    #filterTabs{
        margin-bottom: 20px !important;
}

        }
        
        .bilan-suiv-soin {
    font-size: 15px;
    font-weight: 700;
    color: #465b41;
}
        
   .table-header-gradient th {
    color:white;
    background: linear-gradient(135deg, #41553d, #6f8f5f);
	    
   }

#filterTabs{
        margin-bottom: 40px;
}
.custom-card .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.custom-card .card-body > div:first-child {
    flex-grow: 1;
}

.custom-card .card-body {
    display: flex;
    flex-direction: column;
}

.bottom-content {
    margin-top: auto;
}
.small-content-cures{
   line-height: 35px; 
}    

.custom-card ul li {
  
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px dashed #eee;
   
}

	</style>
	
{% endblock %}

{% block body %}

<section class="spa-banner d-flex align-items-center text-center text-lg-start">
    <div class="container">
        <div class="row align-items-center">
            
            <!-- TEXT -->
            <div class="col-lg-6">
                <h1 class="fw-bold mb-3 title-banner-cures-labs">Renforcement LAB</h1>
                <p class="lead mb-4">
                    Organisez vos séances bien-être et atteignez vos objectifs<br> corps & esprit
                </p>
                <a href="{{path('home')}}" class="btn btn-spa">Réserver maintenant</a>
            </div>

            <!-- IMAGE -->
            <div class="col-lg-6 text-center mt-4 mt-lg-0">
                <img src="{{asset('images/pic1-card.png')}}" 
                     class="img-fluid rounded-4 shadow pic-cures-labs" 
                     alt="Spa">
            </div>

        </div>
    </div>
</section>

<div class="container py-5 mb-5">


    <!-- CARDS -->
    <div class="row g-4">

       
       
     
            

           
        
             <!-- Renforcement LAB -->
            <div class="col-lg-4 col-md-6 col-6 filter-item ">
                <div class="card custom-card">
                    <div class="card-header">Renforcement LAB</div>
                    <div class="card-body">
                        <ul class="pt-3">
                            <li>1 cours personal training<span class="price">350 DH</span></li> 
                            <li>10 cours <span class="price">3500 DH</span></li>
                            <li>20 cours <span class="price">5000 DH</span></li>
                            <li>30 cours <span class="price">6500 DH</span></li>
                            <li>50 cours <span class="price">7500 DH</span></li>
                            <li>Illimité <span class="price">12 500 DH</span></li>
                        </ul>
                    </div>
                </div>
                 <div class="text-center mt-4">
                            <a href="{{path('achetez_pack')}}" class="program-btn btnCuresMore" style="    padding: 10px 50px;">
                             {{ 'Buy Pack'|trans }}
                            </a>
                        </div>
            </div>
              <div class="col-lg-4 col-md-6 col-12 filter-item">
                <div class="card custom-card">
                    <div class="card-header" style="white-space: nowrap;">Mix Pilates & Renforcement</div>
                    <div class="card-body">
                        <ul class="pt-3">
                            <li>Yes You Can (10 cours) <span class="price">3500 DH</span></li>
                            <li>Work Hard, Play Hard (20 cours) <span class="price">5000 DH</span></li>
                            <li>Work Harder (30 cours) <span class="price">7500 DH</span></li>
                            <li>Illimité <span class="price">12 500 DH</span></li>
                        </ul>
                    </div>
                </div>
                 <div class="text-center mt-4">
                            <a href="{{path('achetez_pack')}}" class="program-btn btnCuresMore" style="    padding: 10px 50px;">
                             {{ 'Buy Pack'|trans }}
                            </a>
                        </div>
            </div>
          
        

    </div>
</div>


{% endblock %}


{% block javascripts %}

	{{parent()}}

<script>
document.querySelectorAll('#filterTabs button').forEach(btn => {
    btn.addEventListener('click', function () {

        document.querySelectorAll('#filterTabs button').forEach(b => b.classList.remove('active'));
        this.classList.add('active');

        let filter = this.getAttribute('data-filter');

        document.querySelectorAll('.filter-item').forEach(item => {
            if (item.classList.contains(filter)) {
                item.classList.remove('d-none');
            } else {
                item.classList.add('d-none');
            }
        });

    });
});
</script>
{% endblock %}
