{# templates/plumbing/show.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}
    {{ service.title }} - CSP Chauffage
{% endblock %}

{% block body %}
<div class="container mx-auto px-4 py-8">
    
    {# --- FIL D'ARIANE --- #}
    <div class="mb-6 text-sm text-gray-500">
        <a href="{{ path('app_home') }}" class="hover:underline">Accueil</a> &gt; 
        <a href="{{ path('app_plumbing_index') }}" class="hover:underline">Sanitaires & Plomberie</a> &gt; 
        <span class="text-gray-800 font-bold">{{ service.title }}</span>
    </div>

    {# --- TITRE PRINCIPAL --- #}
    <h1 class="text-4xl font-bold text-gray-800 mb-8">{{ service.title }}</h1>

    {# --- CONTENEUR VERTICAL --- #}
    <div class="space-y-12">
        
        {# 1. DESCRIPTION / INTRO #}
        <section class="prose max-w-none text-gray-600 text-lg leading-relaxed">
            {{ service.description|default('')|raw|nl2br }}
        </section>

        {# 2. MARQUES (Carrousel centré) #}
        {% if service.brandsText or service.brands is not empty %}
            <section class="mb-12">
                <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">Nos marques partenaires</h2>
                
                {% if service.brandsText %}
                    <div class="prose max-w-none text-gray-600 mb-8 mx-auto">
                        {{ service.brandsText|raw|nl2br }}
                    </div>
                {% endif %}

                {% if service.brands is not empty %}
					<div class="mx-auto w-fit max-w-full flex overflow-x-auto space-x-6 pb-6 snap-x px-4">
						{% for brand in service.brands %}
							<div class="snap-center shrink-0 w-48 h-40 bg-white p-4 rounded shadow-sm border border-gray-200 flex flex-col items-center justify-center hover:shadow-md transition-shadow">

								{% if brand.websiteUrl %}
									<a href="{{ brand.websiteUrl }}" target="_blank" class="text-xs text-blue-500 hover:underline mt-1">
									{% endif %}
									{% if brand.logoUrl %}
										<img src="{{ brand.logoUrl }}" alt="{{ brand.name }}" class="max-h-20 max-w-full object-contain mb-3">
									{% else %}
										<div class="h-20 w-20 bg-gray-100 rounded-full flex items-center justify-center text-xs text-gray-500 mb-3">
											Sans logo
										</div>
									{% endif %}
									{% if brand.websiteUrl %}
									</a>
								{% endif %}
							</div>
						{% endfor %}
					</div>
				{% endif %}
            </section>
        {% endif %}

        {# 3. CERTIFICATIONS #}
        {% if service.certificationText or service.hasRge %}
            <section class="text-center">
                <div>
                    <h2 class="text-2xl font-bold text-gray-800 mb-4">Nos Certifications</h2>
                
                    {% if service.certificationText %}
                        <div class="prose max-w-none text-gray-600 mb-6">
                            {{ service.certificationText|raw|nl2br }}
                        </div>
                    {% endif %}
                    <div class="flex flex-wrap justify-center gap-4">
                        {% if service.hasRge %}
                            <div class="w-20 h-20 bg-white rounded border border-gray-300 flex items-center justify-center text-xs font-bold text-blue-600 shadow-sm">RGE</div>
                        {% endif %}
                    </div>
                </div>
            </section>
        {% endif %}

        {# 4. GALERIE PHOTOS #}
        {% if service.photos is not empty %}
            <section>
                <h3 class="text-2xl font-bold text-gray-800 mb-6">Nos chantiers</h3>
                <div class="flex overflow-x-auto space-x-4 pb-4 snap-x">
                    {% for photo in service.photos %}
                        <div
							class="snap-center shrink-0 w-80 h-64 bg-gray-200 rounded overflow-hidden relative shadow">
							{# Image Placeholder (remplacer src par photo.imageUrl plus tard) #}
							<div class="w-full h-full flex items-center justify-center bg-gray-300 text-gray-500">
								<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>
							<p class="absolute bottom-0 bg-black bg-opacity-50 text-white text-xs p-2 w-full truncate">
								{{ photo.altText }}
							</p>
                        </div>
                    {% endfor %}
                </div>
            </section>
	    {% endif %}

        {# 5. CALL TO ACTION #}
        <section class="mt-16 bg-gray-800 text-white rounded p-12 text-center">
            <h2 class="text-2xl font-bold mb-4">Un projet de plomberie ?</h2>
            
            <div class="text-gray-300 mb-8 max-w-2xl mx-auto">
                {% if service.ctaText %}
                    {{ service.ctaText|raw|nl2br }}
                {% else %}
                    De la création de salle de bain au dépannage urgent, nous sommes là pour vous.
                    Contactez-nous pour une intervention rapide.
                {% endif %}
            </div>

            <button type="button" data-action="click->contact-modal#open" class="inline-block bg-white text-gray-800 font-bold py-3 px-8 rounded hover:bg-gray-100 transition-colors">
                Demander mon devis
            </button>
        </section>

    </div>
</div>
{% endblock %}