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

{# Page 01 — Accueil (T1, P1)
   URL : /
   SEO : docs/pages.md p.01 (title/meta/H1 dans SeoFixtures).
   Design : Figma desktop-1/2 + docs/design.md (charte Luciole).

   Sections obligatoires dans l'ORDRE de docs/pages.md p.01 :
     1. Hero
     2. 3 métiers
     3. Domaines d'expertise
     4. Chiffres clés + 4 valeurs
     5. Marques distribuées
     6. Avis clients (placeholders)
     7. Bloc urgence
     8. 3 derniers articles blog

   Schemas page-spécifiques : Organization + WebSite (LocalBusiness global). #}

{% block javascripts %}
    {{ parent() }}
    {{ json_ld(schema_organization()) }}
    {{ json_ld(schema_website()) }}
{% endblock %}

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

    {# ─── 1. HERO photo immersif (variante A) ─────────────────────── #}
    <section class="tca-hero tca-hero--photo" aria-labelledby="hero-h1">
        <div class="tca-hero__bg" aria-hidden="true">
            <img src="{{ asset('images/hero/hero-cartes-visite-tca-atelier-tca.webp') }}"
                 alt=""
                 width="1920" height="1080"
                 fetchpriority="high" loading="eager" decoding="async">
        </div>
        <div class="tca-container tca-hero__inner">
            <div>
                <span class="tca-eyebrow">Votre partenaire industriel · Clermont-Ferrand</span>
                <h1 id="hero-h1">Moteurs électriques, pompes et équipements industriels à Clermont-Ferrand</h1>
                <p class="tca-hero__subtitle">
                    TCA Industries assure la vente, la réparation et le dépannage de vos équipements industriels en Auvergne. Atelier intégré, intervention sur site, délai adapté à l'urgence.
                </p>

                <div class="tca-hero__ctas">
                    {% set phoneRaw = siteParams.phone|default('04 73 28 74 74') %}
                    {% set phoneDigits = phoneRaw|replace({' ': '', '.': '', '-': '', '(': '', ')': ''}) %}
                    {# Per Figma : devis (gold primary) à gauche, phone (outlined white) à droite. #}
                    <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>
    </section>

    {# ─── Chiffres clés (sous le hero per Figma — homepage uniquement) ── #}
    {% include '_components/chiffres-cles.html.twig' %}

    {# ─── 2. NOS TROIS MÉTIERS ────────────────────────────────────── #}
    <section class="tca-section">
        <div class="tca-container">
            <div class="tca-section-head tca-section-head--dark tca-reveal">
                <h2>Nos 3 métiers principaux</h2>
                <p>Une solution complète pour tous vos besoins industriels.</p>
            </div>

            <div class="tca-grid tca-grid--3 tca-reveal tca-reveal--stagger">
                <article class="tca-value">
                    <div class="tca-value__icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
                    </div>
                    <h3 class="tca-value__title">Vente au comptoir et en ligne</h3>
                    <p class="tca-value__text">
                        Magasin équipé d'un stock complet de roulements, paliers, courroies, poulies, chaînes, pignons, joints, lubrifiants, outillage et EPI, disponibles immédiatement.
                    </p>
                </article>
                {# Central card mise en avant (per Figma : middle card dark anthracite). #}
                <article class="tca-value tca-value--featured">
                    <div class="tca-value__icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
                    </div>
                    <h3 class="tca-value__title">Réparation en atelier</h3>
                    <p class="tca-value__text">
                        Atelier de réparation moteurs électriques, motoréducteurs et pompes industrielles. Rebobinage, étuvage.
                    </p>
                </article>
                <article class="tca-value">
                    <div class="tca-value__icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
                    </div>
                    <h3 class="tca-value__title">Dépannage sur site</h3>
                    <p class="tca-value__text">
                        Intervention avec un délai adapté à l'urgence chez vous, sur production en urgence comme en préventif.
                    </p>
                </article>
            </div>
        </div>
    </section>

    {# ─── 2bis. MARQUES DISTRIBUÉES (marquee logos) — déplacé ici ─────── #}
    {% include '_components/marques-distribuees.html.twig' %}

    {# ─── 3. DOMAINES D'EXPERTISE — grille cliquable des services ──── #}
    <section class="tca-section tca-section--gray">
        <div class="tca-container">
            <div class="tca-section-head tca-reveal">
                <span class="tca-eyebrow">Nos domaines d'expertise</span>
                <h2>Tous les équipements industriels couverts</h2>
                <p class="tca-lead">
                    De la réparation du moteur électrique à la fourniture d'EPI, TCA Industries couvre toute la chaîne mécanique et électromécanique.
                </p>
            </div>

            {% set services = [
                {slug: 'reparation-moteur-electrique', title: 'Réparation moteur électrique', excerpt: 'Diagnostic, réparation et remise en état de moteurs électriques toutes puissances et toutes marques.', img: 'images/atelier/atelier-moteur-bleu-bornier-ouvert-vue-tca.webp'},
                {slug: 'bobinage-moteur-electrique',   title: 'Bobinage de moteur',           excerpt: 'Atelier de rebobinage : dépose des anciennes bobines, étuvage, vernissage, tests.',                  img: 'images/atelier/atelier-technicien-fil-electrique-bw-tca.webp'},
                {slug: 'reducteurs-motoreducteurs',    title: 'Réducteurs et motoréducteurs', excerpt: 'Vente, réparation et maintenance de réducteurs coaxiaux, à engrenages et à roue et vis.',        img: 'images/atelier/atelier-engrenage-helicoidal-bois-tca.webp'},
                {slug: 'pompes-industrielles',         title: 'Pompes industrielles',         excerpt: 'Pompes de relevage, surpresseurs, centrifuges : diagnostic, réparation et maintenance.',          img: 'images/products/groupe-motopompe-centrifuge-tca.webp'},
                {slug: 'pompe-piscine-relevage',       title: 'Pompes pour particuliers',     excerpt: 'Pompes piscine et pompes de relevage pour les habitats individuels.',                img: 'images/atelier/atelier-pompe-piscine-kripsol-tca.webp'},
                {slug: 'variateurs-de-vitesse',        title: 'Variateurs de vitesse',        excerpt: 'Vente et réparation de variateurs pour moteurs triphasés 380V toutes marques.',                     img: 'images/atelier/atelier-armoire-electrique-variateurs-detail-tca.webp'},
                {slug: 'transmissions-mecaniques',     title: 'Transmissions mécaniques',     excerpt: 'Roulements, courroies, poulies, pignons et accouplements en stock à Clermont-Ferrand.',            img: 'images/products/roulement-bille-6319-perspective-tca.webp'},
                {slug: 'maintenance-industrielle',     title: 'Maintenance industrielle',     excerpt: 'Contrats de maintenance préventive et curative, audit et plan d\'entretien sur mesure.',          img: 'images/atelier/atelier-palan-chaines-grises-detail-tca.webp'},
                {slug: 'fournitures-industrielles',    title: 'Fournitures industrielles',    excerpt: 'Visserie, abrasifs, étanchéité, outillage, EPI, lubrifiants : stock immédiat au magasin.',       img: 'images/showroom/showroom-stock-roulements-fag-rayonnage-tca.webp'}
            ] %}

            <div class="tca-grid tca-grid--3 tca-reveal tca-reveal--stagger">
                {% for s in services %}
                    {% set routeName = 'app_service_' ~ s.slug|replace({'-': '_'}) %}
                    <a href="{{ path(routeName) }}" class="tca-service-card">
                        <div class="tca-service-card__image">
                            <img src="{{ asset(s.img) }}"
                                 alt="{{ s.title }} TCA Industries"
                                 width="600" height="375"
                                 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>
                {% endfor %}
            </div>
        </div>
    </section>

    {# ─── 4. CHIFFRES CLÉS + 4 VALEURS (section combinée per docs/pages.md p.01) #}
    <section class="tca-section tca-section--petrol">
        <div class="tca-container">
            <div class="tca-section-head">
                <span class="tca-eyebrow" style="color: var(--tca-gold);">Une PME engagée</span>
                <h2>L'expertise industrielle au service des PME et des particuliers</h2>
                <p class="tca-lead">
                    Depuis 1983, TCA Industries accompagne les industriels du Massif Central avec la même exigence&nbsp;: disponibilité, conseil, proximité, réactivité.
                </p>
            </div>

            {# 4 valeurs cards. Style petrol-section pris en charge par
               .tca-section--petrol .tca-value dans site.css (pas d'inline). #}
            <div class="tca-grid tca-grid--4">
                <article class="tca-value">
                    <div class="tca-value__icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                    </div>
                    <h3 class="tca-value__title">Disponibilité</h3>
                    <p class="tca-value__text">Un stock important, diversifié et renouvelé en permanence.</p>
                </article>
                <article class="tca-value">
                    <div class="tca-value__icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
                    </div>
                    <h3 class="tca-value__title">Conseil</h3>
                    <p class="tca-value__text">L'accompagnement d'experts pour le choix de vos produits.</p>
                </article>
                <article class="tca-value">
                    <div class="tca-value__icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                    </div>
                    <h3 class="tca-value__title">Proximité</h3>
                    <p class="tca-value__text">Une entreprise à taille humaine qui privilégie la relation client.</p>
                </article>
                <article class="tca-value">
                    <div class="tca-value__icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
                    </div>
                    <h3 class="tca-value__title">Réactivité</h3>
                    <p class="tca-value__text">Des interventions rapides et efficaces, sur site ou en atelier.</p>
                </article>
            </div>
        </div>
    </section>

    {# ─── 5. SECTEURS INDUSTRIELS SERVIS — composant réutilisable ──── #}
    {# Anciennement : marques distribuées (déplacé entre 3 métiers et services). #}
    {% include '_components/secteurs-servis.html.twig' %}

    {# ─── 6. AVIS CLIENTS ────────────────────────────────────────── #}
    {# Source : entité Testimonial gérée via le BO (/security/dashboard/avis).
       Fallback : tant qu'aucun avis n'est actif en base (ou table absente),
       placeholders en attendant la validation des 5 avis Google par TCA.
       Wrapper gris englobe titre + carousel. Alternance dark/clair via is odd. #}
    {% set testimonialsList = testimonials()|default([]) %}
    <section class="tca-section">
        <div class="tca-testimonials-wrap" data-testimonials-carousel>
            <div class="tca-testimonials-head">
                <h2>Ils nous font confiance</h2>
                {% if testimonialsList|length > 0 %}
                    <p>TCA Industries a obtenu cinq avis cinq étoiles sur Google.</p>
                {% else %}
                    <p>TCA Industries a obtenu cinq avis cinq étoiles sur Google. Le texte intégral est en cours de collecte par TCA et sera publié ici prochainement.</p>
                {% endif %}
            </div>

            <div class="tca-testimonials-viewport">
                <div class="tca-testimonials-track" data-testimonials-track>
                    {% if testimonialsList|length > 0 %}
                        {% for t in testimonialsList %}
                            <article class="tca-testimonial{% if loop.index is odd %} tca-testimonial--featured{% endif %}">
                                <p class="tca-testimonial__quote">{{ t.quote }}</p>
                                <div class="tca-testimonial__author">
                                    <span class="tca-testimonial__name">{{ t.authorName }}</span>
                                    <span class="tca-testimonial__role">{{ t.authorRole ?: 'Client TCA Industries' }}</span>
                                </div>
                            </article>
                        {% endfor %}
                    {% else %}
                        {% for i in 1..6 %}
                            <article class="tca-testimonial{% if i is odd %} tca-testimonial--featured{% endif %}">
                                <p class="tca-testimonial__quote"><em>Avis client à intégrer après validation par TCA des 5 avis Google existants.</em></p>
                                <div class="tca-testimonial__author">
                                    <span class="tca-testimonial__name">Avis à venir #{{ i }}</span>
                                    <span class="tca-testimonial__role">Client TCA Industries</span>
                                </div>
                            </article>
                        {% endfor %}
                    {% endif %}
                </div>
            </div>

            <div class="tca-testimonials-nav" role="group" aria-label="Navigation des témoignages">
                <button type="button" data-testimonials-prev aria-label="Témoignage précédent">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
                </button>
                <button type="button" data-testimonials-next aria-label="Témoignage suivant">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
                </button>
            </div>
        </div>
    </section>

    <script>
    (function() {
        var carousel = document.querySelector('[data-testimonials-carousel]');
        if (!carousel) return;
        var track = carousel.querySelector('[data-testimonials-track]');
        var prev = carousel.querySelector('[data-testimonials-prev]');
        var next = carousel.querySelector('[data-testimonials-next]');
        var items = track.children;
        var total = items.length;

        function visibleCount() {
            var w = window.innerWidth;
            if (w >= 1024) return 3;
            if (w >= 640) return 2;
            return 1;
        }

        var index = 0;
        function update() {
            var vis = visibleCount();
            var maxIndex = Math.max(0, total - vis);
            if (index > maxIndex) index = 0;
            if (index < 0) index = maxIndex;
            // Pixel-based offset: percentage steps ignore the flex gap and drift.
            var offset = items[index].offsetLeft - items[0].offsetLeft;
            track.style.transform = 'translateX(-' + offset + 'px)';
            prev.disabled = false;
            next.disabled = false;
        }

        prev.addEventListener('click', function() { index--; update(); });
        next.addEventListener('click', function() { index++; update(); });
        window.addEventListener('resize', update);
        update();
    })();
    </script>

    {# ─── 7. BLOC URGENCE ────────────────────────────────────────── #}
    <section class="tca-section tca-reveal">
        <div class="tca-container">
            {% include '_components/bloc-urgence.html.twig' %}
        </div>
    </section>

    {# ─── 8. ACTUALITÉS & CONSEILS (3 derniers articles blog) ──────── #}
    <section class="tca-section tca-section--gray">
        <div class="tca-container">
            <div class="tca-section-head">
                <span class="tca-eyebrow">Actualités &amp; conseils</span>
                <h2>Guides techniques de nos experts</h2>
                <p class="tca-lead">
                    Articles rédigés par notre équipe sur les moteurs électriques, les pompes, les réducteurs, la maintenance et les bonnes pratiques industrielles.
                </p>
            </div>

            {% if latestArticles|default([])|length > 0 %}
                <div class="tca-grid tca-grid--3 tca-reveal tca-reveal--stagger">
                    {% for article in latestArticles %}
                        <a href="{{ path('app_blog_article', {slug: article.slug}) }}" class="tca-article-card">
                            <div class="tca-article-card__image">
                                {% if article.imageUrl %}
                                    <img src="{{ asset(article.imageUrl) }}"
                                         alt="{{ article.imageAlt|default(article.title) }}"
                                         width="600" height="375"
                                         loading="lazy" decoding="async">
                                {% endif %}
                            </div>
                            <div class="tca-article-card__body">
                                <span class="tca-article-card__category">{{ article.category }}</span>
                                <h3 class="tca-article-card__title">{{ article.title }}</h3>
                                {% set _excerpt = article.excerpt|striptags %}
                                <p class="tca-article-card__excerpt">{{ _excerpt|length > 140 ? _excerpt|slice(0, 140)|trim ~ '…' : _excerpt }}</p>
                                <div class="tca-article-card__meta">
                                    <span>{{ article.publishedAt|date('d/m/Y') }}</span>
                                    <span>{{ article.readingMinutes }} min de lecture</span>
                                </div>
                            </div>
                        </a>
                    {% endfor %}
                </div>
            {% else %}
                {# Articles à venir — placeholders visuels. Le calendrier éditorial (seo-strategy.md §4)
                   prévoit 18 articles sur 6 mois. Les 3 derniers s'afficheront automatiquement. #}
                <div class="tca-grid tca-grid--3 tca-reveal tca-reveal--stagger">
                    {% for i in 1..3 %}
                        <article class="tca-article-card" style="cursor: default;">
                            <div class="tca-article-card__image" style="background: linear-gradient(135deg, var(--tca-gray-100), var(--tca-gray-200)); display: flex; align-items: center; justify-content: center;">
                                <svg viewBox="0 0 24 24" fill="none" stroke="var(--tca-gray-400)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width:36px;height:36px;"><rect x="3" y="4" width="18" height="16" rx="2"/><polyline points="3 8 12 13 21 8"/></svg>
                            </div>
                            <div class="tca-article-card__body">
                                <span class="tca-article-card__category">À venir</span>
                                <h3 class="tca-article-card__title">Article en cours de rédaction</h3>
                                <p class="tca-article-card__excerpt"><em>Les articles du blog seront publiés progressivement selon le calendrier éditorial TCA.</em></p>
                                <div class="tca-article-card__meta">
                                    <span>—</span>
                                    <span>—</span>
                                </div>
                            </div>
                        </article>
                    {% endfor %}
                </div>
                <p style="text-align: center; margin-top: var(--tca-space-5);">
                    <a href="{{ path('app_blog_index') }}" class="tca-link">Voir le blog TCA Industries</a>
                </p>
            {% endif %}
        </div>
    </section>

</div>
{% endblock %}