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

{#
   Service-page wrapper — refonte visuelle Phase 2.
   Structure riche en sections alternées avec layouts 2-col image+texte,
   4 process cards numérotées, tag clouds, FAQ accordéon, bloc urgence.

   Variables / blocs attendus (child template) :
   ─── Hero ───────────────────────────────────────────────────────────────
   - hero_eyebrow      : ligne uppercase dorée au-dessus du H1
   - hero_title        : H1 unique (sacré per docs/pages.md)
   - hero_subtitle     : paragraphe d'accroche
   - hero_image_src    : path relatif sous /public, used as right-side image
   - hero_image_alt    : alt descriptif

   ─── Intro section (2-col : texte gauche + photo droite) ─────────────
   - intro_eyebrow     (opt)  : eyebrow gold
   - intro_h2          (opt)  : H2 "Pourquoi nous choisir" / "Notre savoir-faire"
   - intro_text               : <p> paragraphes
   - intro_image_src          : path image
   - intro_image_alt          : alt

   ─── Prestations section (2-col reverse : photo gauche + checklist droite) ─
   - prestations_h2           : H2 "Nos prestations"
   - prestations_lead   (opt) : paragraphe d'intro
   - prestations_items        : <li> items (checkmark style automatique via .tca-list-check)
   - prestations_image_src    : path image
   - prestations_image_alt    : alt

   ─── Processus 4 étapes (cards numérotées) ──────────────────────────
   - process_steps (variable, pas block) : Twig array de {title, text}
                                            ex: [{title:'Diagnostic', text:'...'}, ...]

   ─── Marques et types ───────────────────────────────────────────────
   - marques_h2               : H2
   - marques_text             : <p> paragraphe
   - marques_items   (opt)    : Twig array de strings → tag cloud

   ─── Zone d'intervention ────────────────────────────────────────────
   - zone_h2                  : H2
   - zone_text                : <p>
   - zone_tags (array)        : 8 départements

   ─── Pourquoi choisir TCA (2-col : checklist gauche + photo droite) ───
   - pourquoi_h2              : H2
   - pourquoi_lead   (opt)    : paragraphe
   - pourquoi_items           : <li> items checkmark
   - pourquoi_image_src       : path image
   - pourquoi_image_alt       : alt

   ─── FAQ + Schema service ───────────────────────────────────────────
   - service_schema_name      : nom du service pour Service JSON-LD
   - service_schema_description : description Service JSON-LD
   - service_faq              : Twig array [{q, a}] → accordéon + FAQPage JSON-LD

   ─── Autres services ────────────────────────────────────────────────
   - related_services         : Twig array de slugs
   - related_services_title   (opt) : titre de la section autres services

   ─── Backward-compat ────────────────────────────────────────────────
   - service_intro + service_sections (anciens blocs) : si remplis, rendus
     en single-column en bas avant la FAQ. À retirer quand chaque page
     est migrée sur les nouveaux blocs structurés.
#}

{% set service_faq             = service_faq             ?? [] %}
{% set related_services        = related_services        ?? [] %}
{% set related_services_title  = related_services_title  ?? 'Nos autres services' %}
{# Optional per-page override of "Autres services" card images (slug → image path),
   for pages that want a different photo than the shared catalog default. #}
{% set related_services_images = related_services_images ?? {} %}
{% set service_schema_name        = service_schema_name        ?? '' %}
{% set service_schema_description = service_schema_description ?? '' %}
{% set process_steps           = process_steps           ?? [] %}
{% set marques_items           = marques_items           ?? [] %}
{% set pourquoi_features       = pourquoi_features       ?? [] %}
{% set zone_departments        = zone_departments        ?? [
    { code: '63', name: 'Puy-de-Dôme', featured: true },
    { code: '42', name: 'Loire' },
    { code: '03', name: 'Allier' },
    { code: '23', name: 'Creuse' },
    { code: '19', name: 'Corrèze' },
    { code: '48', name: 'Lozère' },
    { code: '15', name: 'Cantal' },
    { code: '43', name: 'Haute-Loire' }
] %}

{# Catalogue centralisé pour les cards "Autres services" (réutilisé entre pages). #}
{% set service_catalog = {
    'reparation-moteur-electrique': {title: 'Réparation moteur électrique', excerpt: 'Diagnostic, réparation et remise en état toutes marques.',                  route: 'app_service_reparation_moteur_electrique', img: 'images/atelier/atelier-moteur-bleu-bornier-ouvert-vue-tca.webp'},
    'bobinage-moteur-electrique':   {title: 'Bobinage moteur électrique',   excerpt: 'Atelier de rebobinage stator : étuvage, vernissage, tests.',              route: 'app_service_bobinage_moteur_electrique',   img: 'images/atelier/atelier-technicien-fil-electrique-bw-tca.webp'},
    'reducteurs-motoreducteurs':    {title: 'Réducteurs et motoréducteurs', excerpt: 'Vente, réparation et maintenance toutes marques et technologies.',         route: 'app_service_reducteurs_motoreducteurs',    img: 'images/atelier/atelier-engrenage-helicoidal-bois-tca.webp'},
    'pompes-industrielles':         {title: 'Pompes industrielles',         excerpt: 'Pompes de relevage, surpresseurs, centrifuges : diagnostic et réparation.', route: 'app_service_pompes_industrielles',         img: 'images/atelier/atelier-moteur-pompe-bleu-vintage-tca.webp'},
    'pompe-piscine-relevage':       {title: 'Pompes piscine et relevage',   excerpt: 'Réparation pour particuliers : piscine, relevage, eaux usées.',                 route: 'app_service_pompe_piscine_relevage',       img: 'images/atelier/atelier-moteur-vert-vintage-detail-tca.webp'},
    'reparation-pompe-immergee':    {title: 'Réparation pompe immergée',    excerpt: 'Forage, vide-cave, eaux chargées : toutes marques.',                       route: 'app_service_reparation_pompe_immergee',    img: 'images/atelier/atelier-moteur-frein-acier-detail-tca.webp'},
    'variateurs-de-vitesse':        {title: 'Variateurs de vitesse',        excerpt: 'Vente et réparation de variateurs pour moteurs triphasés 380V.',           route: 'app_service_variateurs_de_vitesse',        img: 'images/atelier/atelier-armoire-electrique-variateurs-detail-tca.webp'},
    'transmissions-mecaniques':     {title: 'Transmissions mécaniques',     excerpt: 'Roulements, courroies, poulies en stock à Clermont-Ferrand.',             route: 'app_service_transmissions_mecaniques',     img: 'images/products/roulement-bille-6319-perspective-tca.webp'},
    'maintenance-industrielle':     {title: 'Maintenance industrielle',     excerpt: 'Contrats préventifs et curatifs, audit, plan d\'entretien.',              route: 'app_service_maintenance_industrielle',     img: 'images/atelier/atelier-palan-chaines-grises-detail-tca.webp'},
    'fournitures-industrielles':    {title: 'Fournitures industrielles',    excerpt: 'Visserie, abrasifs, étanchéité, outillage, EPI, lubrifiants.',            route: 'app_service_fournitures_industrielles',    img: 'images/showroom/showroom-allee-rayonnage-stock-tca.webp'}
} %}

{# Déclarations vides — chaque page service surcharge ce qu'elle veut.
   Toutes les références dans le body utilisent {{ block('xxx') }} pour
   éviter les doubles déclarations. #}
{% block hero_eyebrow %}{% endblock %}
{% block hero_title %}{% endblock %}
{% block hero_subtitle %}{% endblock %}
{% block hero_image_src %}{% endblock %}
{% block hero_image_alt %}{% endblock %}
{% block intro_eyebrow %}{% endblock %}
{% block intro_h2 %}{% endblock %}
{% block intro_text %}{% endblock %}
{% block intro_image_src %}{% endblock %}
{% block intro_image_alt %}{% endblock %}
{% block prestations_h2 %}Nos prestations{% endblock %}
{% block prestations_lead %}{% endblock %}
{% block prestations_items %}{% endblock %}
{% block prestations_image_src %}{% endblock %}
{% block prestations_image_alt %}{% endblock %}
{% block process_h2 %}Notre processus d'intervention{% endblock %}
{% block process_intro %}{% endblock %}
{% block marques_h2 %}Marques et types traités{% endblock %}
{% block marques_text %}{% endblock %}
{% block zone_h2 %}Zone d'intervention en Auvergne et Massif Central{% endblock %}
{% block zone_text %}{% endblock %}
{% block pourquoi_h2 %}Pourquoi choisir TCA Industries{% endblock %}
{% block pourquoi_lead %}{% endblock %}
{% block pourquoi_items %}{% endblock %}
{% block pourquoi_image_src %}{% endblock %}
{% block pourquoi_image_alt %}{% endblock %}
{% block service_intro %}{% endblock %}
{% block service_sections %}{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {% if service_schema_name %}
        {{ json_ld(schema_service(service_schema_name, service_schema_description, service_schema_name, app.request.uri)) }}
    {% endif %}
    {% if service_faq|length > 0 %}
        {{ json_ld(schema_faq(service_faq)) }}
    {% endif %}
{% endblock %}

{# Précapture des blocs pour pouvoir tester is empty avant d'afficher la section #}
{% set _intro_text       = block('intro_text')|default('')|trim %}
{% set _prestations_items = block('prestations_items')|default('')|trim %}
{% set _marques_text     = block('marques_text')|default('')|trim %}
{% set _pourquoi_items   = block('pourquoi_items')|default('')|trim %}
{% set _legacy_sections  = block('service_sections')|default('')|trim %}
{% set _legacy_intro     = block('service_intro')|default('')|trim %}

{% block body %}
<div class="tca">

    {% include '_components/breadcrumb.html.twig' %}

    {# ─── HERO (dark anthracite + photo latérale) ──────────────────── #}
    <section class="tca-hero" aria-labelledby="hero-h1">
        <div class="tca-container tca-hero__inner">
            <div>
                {% set _eyebrow = block('hero_eyebrow')|default('')|trim %}
                {% if _eyebrow %}<span class="tca-eyebrow">{{ _eyebrow|raw }}</span>{% endif %}
                <h1 id="hero-h1">{{ block('hero_title')|raw }}</h1>
                <p class="tca-hero__subtitle">{{ block('hero_subtitle')|raw }}</p>

                <div class="tca-hero__ctas">
                    {% set phoneRaw = siteParams.phone|default('04 73 28 74 74') %}
                    {% set phoneDigits = phoneRaw|replace({' ': '', '.': '', '-': '', '(': '', ')': ''}) %}
                    <a href="{{ path('app_contact') }}" class="tca-btn tca-btn--gold tca-btn--lg">Demander un devis</a>
                    <a href="tel:+33{{ phoneDigits|slice(1) }}" class="tca-btn tca-btn--ghost-light tca-btn--lg">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                        {{ phoneRaw }}
                    </a>
                </div>
            </div>
            <div class="tca-hero__image">
                <img src="{{ asset(block('hero_image_src')|trim) }}"
                     alt="{{ block('hero_image_alt') }}"
                     width="800" height="600"
                     fetchpriority="high" loading="eager" decoding="async">
            </div>
        </div>
    </section>

    {# ─── CHIFFRES CLÉS — composant unifié sur tout le site ────────── #}
    {% include '_components/chiffres-cles.html.twig' %}

    {# ─── 1. INTRO 2-col (texte + photo) ─────────────────────────── #}
    {% if _intro_text and block('intro_image_src')|default('')|trim %}
    <section class="tca-section tca-reveal">
        <div class="tca-container">
            <div class="tca-split">
                <div class="tca-split__text">
                    {% set _intro_eyebrow = block('intro_eyebrow')|default('')|trim %}
                    {% if _intro_eyebrow %}<span class="tca-eyebrow">{{ _intro_eyebrow|raw }}</span>{% endif %}
                    {% set _intro_h2 = block('intro_h2')|default('')|trim %}
                    {% if _intro_h2 %}<h2 style="color: var(--tca-anthracite);">{{ _intro_h2|raw }}</h2>{% endif %}
                    {{ _intro_text|raw }}
                </div>
                <div class="tca-split__image">
                    <img src="{{ asset(block('intro_image_src')|trim) }}"
                         alt="{{ block('intro_image_alt') }}"
                         width="800" height="600" loading="lazy" decoding="async">
                </div>
            </div>
        </div>
    </section>
    {% endif %}

    {# ─── 2. PRESTATIONS — wrapper gris + 2-col reverse photo gauche + items droite ─ #}
    {% if _prestations_items %}
    <section class="tca-section tca-reveal">
        <div class="tca-section-card">
            <div class="tca-split tca-split--reverse">
                <div class="tca-split__text">
                    <span class="tca-eyebrow">Notre savoir-faire</span>
                    <h2 style="color: var(--tca-anthracite);">{{ block('prestations_h2')|raw }}</h2>
                    {% set _prestations_lead = block('prestations_lead')|default('')|trim %}
                    {% if _prestations_lead %}<p>{{ _prestations_lead|raw }}</p>{% endif %}
                    <ul class="tca-list-check">
                        {{ _prestations_items|raw }}
                    </ul>
                </div>
                <div class="tca-split__image">
                    {% set _prestations_img = block('prestations_image_src')|default('')|trim %}
                    {% if _prestations_img %}
                        <img src="{{ asset(_prestations_img) }}"
                             alt="{{ block('prestations_image_alt') }}"
                             width="800" height="600" loading="lazy" decoding="async">
                    {% endif %}
                </div>
            </div>
        </div>
    </section>
    {% endif %}

    {# ─── 3. PROCESSUS — 4 étapes numérotées ─────────────────────── #}
    {% if process_steps|length > 0 %}
    <section class="tca-section">
        <div class="tca-container">
            <div class="tca-section-head tca-section-head--dark tca-reveal">
                <h2>{{ block('process_h2')|raw }}</h2>
                {% set _process_intro = block('process_intro')|default('')|trim %}
                {% if _process_intro %}<p>{{ _process_intro|raw }}</p>{% endif %}
            </div>
            <div class="tca-process tca-reveal tca-reveal--stagger">
                {% for step in process_steps %}
                    <div class="tca-process__step">
                        <h3>{{ step.title }}</h3>
                        <p>{{ step.text|raw }}</p>
                    </div>
                {% endfor %}
            </div>
        </div>
    </section>
    {% endif %}

    {# ─── 4. MARQUES ET TYPES — composant réutilisable ─────────────── #}
    {% include '_components/marques-distribuees.html.twig' %}

    {# ─── 5. ZONE D'INTERVENTION — grille cards avec code département ─ #}
    <section class="tca-section tca-reveal">
        <div class="tca-container">
            <div class="tca-section-head tca-section-head--dark">
                <h2>{{ block('zone_h2')|raw }}</h2>
                {% set _zone_text = block('zone_text')|default('')|trim %}
                {% if _zone_text %}<p>{{ _zone_text|raw }}</p>{% else %}
                    <p>Basés à Clermont-Ferrand, nous intervenons sur l'ensemble du Massif Central pour le dépannage industriel sur site, avec un délai adapté à l'urgence.</p>
                {% endif %}
            </div>

            <div class="tca-zones-grid" role="list" aria-label="Départements desservis">
                {% for dept in zone_departments %}
                    <div class="tca-zone-card{% if dept.featured|default(false) %} tca-zone-card--featured{% endif %}" role="listitem">
                        <div class="tca-zone-card__code">{{ dept.code }}</div>
                        <div class="tca-zone-card__name">{{ dept.name }}</div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </section>

    {# ─── 6. POURQUOI CHOISIR TCA — 2-col (feature cards 2x2 + photo) ─ #}
    {# Préfère pourquoi_features (array {title, text}) → rendu cards.
       Fallback sur pourquoi_items (block <li>) pour les pages pas migrées. #}
    {% if pourquoi_features|length > 0 or _pourquoi_items %}
    <section class="tca-section tca-section--gray tca-reveal">
        <div class="tca-container">
            <div class="tca-split">
                <div class="tca-split__text">
                    <span class="tca-eyebrow">Nos engagements</span>
                    <h2 style="color: var(--tca-anthracite);">{{ block('pourquoi_h2')|raw }}</h2>
                    {% set _pourquoi_lead = block('pourquoi_lead')|default('')|trim %}
                    {% if _pourquoi_lead %}<p>{{ _pourquoi_lead|raw }}</p>{% endif %}

                    {% if pourquoi_features|length > 0 %}
                        <div class="tca-feature-grid">
                            {% for f in pourquoi_features %}
                                <article class="tca-feature-card">
                                    <h3>{{ f.title }}</h3>
                                    <p>{{ f.text|raw }}</p>
                                </article>
                            {% endfor %}
                        </div>
                    {% else %}
                        <ul class="tca-list-check">
                            {{ _pourquoi_items|raw }}
                        </ul>
                    {% endif %}
                </div>
                <div class="tca-split__image">
                    {% set _pourquoi_img = block('pourquoi_image_src')|default('')|trim %}
                    {% if _pourquoi_img %}
                        <img src="{{ asset(_pourquoi_img) }}"
                             alt="{{ block('pourquoi_image_alt') }}"
                             width="800" height="600" loading="lazy" decoding="async">
                    {% endif %}
                </div>
            </div>
        </div>
    </section>
    {% endif %}

    {# ─── BACKWARD-COMPAT : si l'ancien bloc service_sections est rempli,
       le rendu en single-column (pour les pages pas encore migrées). ─── #}
    {% if _legacy_sections or _legacy_intro %}
    <section class="tca-section">
        <div class="tca-container">
            <div class="tca-content">
                {{ _legacy_intro|raw }}
                {{ _legacy_sections|raw }}
            </div>
        </div>
    </section>
    {% endif %}

    {# ─── 7. FAQ ─────────────────────────────────────────────────── #}
    {% if service_faq|length > 0 %}
    <section class="tca-section tca-reveal" aria-labelledby="faq-title">
        <div class="tca-container">
            <div class="tca-section-head tca-section-head--dark">
                <span class="tca-eyebrow">Questions fréquentes</span>
                <h2 id="faq-title">Ce que nos clients nous demandent le plus</h2>
            </div>
            <div class="tca-content tca-faq" role="list">
                {% for item in service_faq %}
                    <details class="tca-faq__item" role="listitem">
                        <summary class="tca-faq__question">
                            <span>{{ item.q }}</span>
                            <svg class="tca-faq__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                        </summary>
                        <div class="tca-faq__answer">
                            <p>{{ item.a|raw }}</p>
                        </div>
                    </details>
                {% endfor %}
            </div>
        </div>
    </section>
    {% endif %}

    {# ─── 8. BLOC URGENCE (CTA gold banner) ───────────────────────── #}
    <section class="tca-section tca-reveal">
        <div class="tca-container">
            {% include '_components/bloc-urgence.html.twig' %}
        </div>
    </section>

    {# ─── 9. AUTRES SERVICES (3 cards photo + label) ─────────────── #}
    {% if related_services|length > 0 %}
    <section class="tca-section tca-section--gray">
        <div class="tca-container">
            <div class="tca-section-head tca-section-head--dark tca-reveal">
                <h2>{{ related_services_title }}</h2>
            </div>
            <div class="tca-grid tca-grid--3 tca-reveal tca-reveal--stagger">
                {% for relSlug in related_services %}
                    {% if service_catalog[relSlug] is defined %}
                        {% set s = service_catalog[relSlug] %}
                        {% set _cardImg = related_services_images[relSlug]|default(s.img) %}
                        <a href="{{ path(s.route) }}" class="tca-service-card tca-service-card--compact">
                            <div class="tca-service-card__image">
                                <img src="{{ asset(_cardImg) }}" alt="{{ s.title }}" width="600" height="400" loading="lazy" decoding="async">
                            </div>
                            <div class="tca-service-card__body">
                                <h3 class="tca-service-card__title">{{ s.title }}</h3>
                                <p class="tca-service-card__excerpt">{{ s.excerpt }}</p>
                                <span class="tca-service-card__cta">En savoir plus</span>
                            </div>
                        </a>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    </section>
    {% endif %}

</div>
{% endblock %}