{# templates/home/index.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}Accueil - CSP Chauffage{% endblock %}

{% block body %}
    
    {# 1. Bandeau Hero #}
    <section class="bg-gray-100 py-24 text-center">
        <div class="container mx-auto px-4">
            <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6 uppercase tracking-wider">
                CSP Chauffage
            </h1>
            <p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
            </p>
            {# Petite flèche décorative vers le bas #}
            <div class="mt-12 animate-bounce">
                <svg class="w-8 h-8 mx-auto text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg>
            </div>
        </div>
    </section>

    {# 2. Section Présentation #}
    <section class="py-20 bg-white">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row items-center gap-12 mx-auto">
                {# Image Placeholder (Gris avec icône) #}
                <div class="w-full md:w-1/2">
                    <div class="bg-gray-200 aspect-video rounded shadow-sm flex items-center justify-center text-gray-400">
                        <svg class="w-20 h-20" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"></path></svg>
                    </div>
                </div>
                
                {# Texte et Bouton #}
                <div class="w-full md:w-1/2">
                    <h2 class="text-3xl font-bold text-gray-800 mb-6">Présentation</h2>
                    <p class="text-gray-600 mb-8 leading-relaxed">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    </p>
                    <a href="{{ path('app_presentation') }}" class="inline-block bg-gray-900 text-white font-bold py-3 px-8 rounded hover:bg-gray-700 transition-colors uppercase text-sm tracking-wide">
                        En savoir plus
                    </a>
                </div>
            </div>
        </div>
    </section>

    {# 3. Section Prestations (Fond Foncé) #}
    <section class="py-20 bg-gray-900 text-white">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-16 uppercase tracking-wider">Nos Prestations</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mx-auto">
                
                {# Carte Chauffage #}
                <div class="bg-white text-gray-800 rounded shadow-lg overflow-hidden flex flex-col">
                    <div class="h-48 bg-gray-200 flex items-center justify-center text-gray-400">
                         <svg class="w-16 h-16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z"></path></svg>
                    </div>
                    <div class="p-8 flex-grow text-center">
                        <h3 class="text-2xl font-bold mb-4">Chauffage</h3>
                        <p class="text-gray-600 mb-6">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
                        </p>
                    </div>
                    <a href="{{ path('app_heating_index') }}" class="block bg-gray-700 text-white text-center py-4 font-bold uppercase text-sm hover:bg-gray-600 transition-colors">
                        En savoir plus
                    </a>
                </div>

                {# Carte Sanitaire #}
                <div class="bg-white text-gray-800 rounded shadow-lg overflow-hidden flex flex-col">
                    <div class="h-48 bg-gray-200 flex items-center justify-center text-gray-400">
                        <svg class="w-16 h-16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg>
                    </div>
                    <div class="p-8 flex-grow text-center">
                        <h3 class="text-2xl font-bold mb-4">Sanitaire et Plomberie</h3>
                        <p class="text-gray-600 mb-6">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
                        </p>
                    </div>
                    <a href="{{ path('app_plumbing_index') }}" class="block bg-gray-700 text-white text-center py-4 font-bold uppercase text-sm hover:bg-gray-600 transition-colors">
                        En savoir plus
                    </a>
                </div>

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

    {# 4. Section Station Technique Vaillant #}
    <section class="py-20 bg-white">
        <div class="container mx-auto px-4 flex flex-col md:flex-row items-center gap-12 mx-auto">
            <div class="w-full md:w-2/3">
                <h2 class="text-3xl font-bold text-gray-800 mb-4">Station Technique Vaillant</h2>
                <p class="text-gray-600 leading-relaxed mb-6">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </p>
                <p class="text-gray-600 italic">
                    "Une expertise reconnue pour votre confort thermique."
                </p>
            </div>
            <div class="w-full md:w-1/3 flex justify-center">
                {# Rond gris placeholder pour le logo #}
                <div class="w-48 h-48 bg-gray-200 rounded-full flex items-center justify-center text-gray-400 border-4 border-gray-100 shadow-inner">
                    <span class="font-bold text-lg text-center">Logo<br>Vaillant</span>
                </div>
            </div>
        </div>
    </section>

    {# 5. Section Avis Clients (Carrousel Scroll Snap) #}
    <section class="py-20 bg-gray-50">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12 uppercase tracking-wider text-gray-800">Nos Avis Clients</h2>
            
            <div class="relative max-w-6xl mx-auto">
                {# Bouton Nav Gauche (Visuel) #}
                <div class="absolute top-1/2 left-0 -translate-y-1/2 -ml-4 md:-ml-12 hidden md:block">
                    <button class="bg-white p-3 rounded-full shadow hover:bg-gray-100 text-gray-600">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
                    </button>
                </div>

                {# Container Scrollable #}
                <div class="flex overflow-x-auto space-x-6 pb-8 snap-x px-4 scrollbar-hide">
                    {# Avis 1 #}
                    <div class="snap-center shrink-0 w-80 md:w-96 bg-white p-8 rounded shadow text-center border border-gray-100">
                        <h4 class="font-bold text-gray-800 text-lg mb-2">Jean Dupont</h4>
                        <div class="text-yellow-400 text-xl mb-4">★★★★★</div>
                        <p class="text-gray-600 italic text-sm">
                            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
                        </p>
                    </div>

                    {# Avis 2 #}
                    <div class="snap-center shrink-0 w-80 md:w-96 bg-white p-8 rounded shadow text-center border border-gray-100">
                        <h4 class="font-bold text-gray-800 text-lg mb-2">Marie Martin</h4>
                        <div class="text-yellow-400 text-xl mb-4">★★★★★</div>
                        <p class="text-gray-600 italic text-sm">
                            "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
                        </p>
                    </div>

                    {# Avis 3 #}
                    <div class="snap-center shrink-0 w-80 md:w-96 bg-white p-8 rounded shadow text-center border border-gray-100">
                        <h4 class="font-bold text-gray-800 text-lg mb-2">Pierre Durand</h4>
                        <div class="text-yellow-400 text-xl mb-4">★★★★★</div>
                        <p class="text-gray-600 italic text-sm">
                            "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
                        </p>
                    </div>

                    {# Avis 4 #}
                    <div class="snap-center shrink-0 w-80 md:w-96 bg-white p-8 rounded shadow text-center border border-gray-100">
                        <h4 class="font-bold text-gray-800 text-lg mb-2">Sophie Leroux</h4>
                        <div class="text-yellow-400 text-xl mb-4">★★★★★</div>
                        <p class="text-gray-600 italic text-sm">
                            "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                        </p>
                    </div>
                </div>

                {# Bouton Nav Droite (Visuel) #}
                <div class="absolute top-1/2 right-0 -translate-y-1/2 -mr-4 md:-mr-12 hidden md:block">
                    <button class="bg-gray-800 p-3 rounded-full shadow hover:bg-gray-700 text-white">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                    </button>
                </div>
                
                {# Indicateurs (Dots) #}
                <div class="flex justify-center space-x-2 mt-4">
                    <div class="w-8 h-2 bg-gray-800 rounded-full"></div>
                    <div class="w-2 h-2 bg-gray-300 rounded-full"></div>
                    <div class="w-2 h-2 bg-gray-300 rounded-full"></div>
                </div>
            </div>
        </section>

        {# 6. Section Certifications #}
        <section class="py-20 bg-white">
            <div class="container mx-auto px-4 text-center">
                <h2 class="text-3xl font-bold mb-16 text-gray-800 uppercase tracking-wider">Nos Certifications</h2>
                <div class="flex flex-wrap justify-center gap-12 md:gap-24">
                    
                    {# Logo RGE #}
                    <div class="flex flex-col items-center group">
                        <div class="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center text-gray-400 mb-4 group-hover:bg-gray-200 transition-colors">
                            <span class="font-bold text-sm">RGE</span>
                        </div>
                        <span class="text-gray-600 font-bold text-sm uppercase">RGE</span>
                    </div>

                    {# Logo Qualipac #}
                    <div class="flex flex-col items-center group">
                        <div class="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center text-gray-400 mb-4 group-hover:bg-gray-200 transition-colors">
                            <span class="font-bold text-sm">Qualipac</span>
                        </div>
                        <span class="text-gray-600 font-bold text-sm uppercase">Qualipac</span>
                    </div>

                    {# Logo Qualigaz #}
                    <div class="flex flex-col items-center group">
                        <div class="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center text-gray-400 mb-4 group-hover:bg-gray-200 transition-colors">
                            <span class="font-bold text-sm">Qualigaz</span>
                        </div>
                        <span class="text-gray-600 font-bold text-sm uppercase">Qualigaz</span>
                    </div>

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

{% endblock %}