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

{# Page 12 — À propos (T3, P3)
   URL : /a-propos/
   PAS de FAQ (CLAUDE.md §6.12).
   Schemas : Organization (en plus du LocalBusiness global).
   Voir docs/pages.md page 12. #}

{% block javascripts %}
    {{ parent() }}
    {# Organization JSON-LD (LocalBusiness est déjà injecté globalement). #}
    {{ json_ld(schema_organization()) }}
{% endblock %}

{% block body %}
{% set phoneRaw = siteParams.phone|default('04 73 28 74 74') %}
{% set phoneDigits = phoneRaw|replace({' ': '', '.': '', '-': '', '(': '', ')': ''}) %}
<div class="tca">

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

    {# ─── HERO ────────────────────────────────────────────────────── #}
    <section class="tca-hero" aria-labelledby="hero-h1">
        <div class="tca-container tca-hero__inner">
            <div>
                <span class="tca-eyebrow">À propos · TCA Industries</span>
                <h1 id="hero-h1">Depuis 1995, l'expertise industrielle à Clermont-Ferrand</h1>
                <p class="tca-hero__subtitle">
                    Notre métier depuis plus de trente ans&nbsp;: réparer, fournir et accompagner. Une PME à taille humaine, ancrée à Clermont-Ferrand, au service des industriels d'Auvergne et des particuliers exigeants.
                </p>
                <div class="tca-hero__ctas">
                    <a href="tel:+33{{ phoneDigits|slice(1) }}" class="tca-btn tca-btn--gold 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>
                        Appeler le {{ phoneRaw }}
                    </a>
                    <a href="{{ path('app_contact') }}" class="tca-btn tca-btn--ghost-light tca-btn--lg">
                        Venir nous rencontrer
                    </a>
                </div>
            </div>
            <div class="tca-hero__image">
                <img src="{{ asset('images/atelier/atelier-technicien-portrait-reparation-moteur-bw-tca.webp') }}"
                     alt="Technicien TCA Industries en réparation dans l'atelier de Clermont-Ferrand"
                     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' %}

    {# ─── HISTOIRE — split (texte + photo, frame en quinconce) ─────── #}
    <section class="tca-section tca-reveal">
        <div class="tca-container">
            <div class="tca-split">
                <div class="tca-split__text">
                    <span class="tca-eyebrow">Notre histoire</span>
                    <h2 style="color: var(--tca-anthracite);">Une PME familiale, quatre décennies d'expertise</h2>
                    <p>TCA (<strong>Techniques Commercialisées d'Auvergne</strong>) a été créée en 1995 à Clermont-Ferrand. Vincent Marques a repris l'entreprise en 2021 et perpétue la promesse d'origine&nbsp;: fournir les équipements industriels les plus utiles localement et réparer ce qui peut l'être plutôt que de pousser au remplacement.</p>
                    <p>Le métier a évolué&nbsp;: l'électromécanique d'aujourd'hui n'est plus celle d'il y a trente ans, mais l'esprit reste le même. Une entreprise à taille humaine où chaque client est connu, où chaque réparation est traitée comme si la machine appartenait à l'équipe.</p>
                    <p>Nous travaillons avec des PME industrielles d'Auvergne et du Massif Central, mais aussi avec des particuliers qui apprécient le conseil et la transparence. Vente, réparation atelier, dépannage sur site&nbsp;: les trois métiers historiques cohabitent dans le même lieu, ce qui simplifie la vie de nos clients et accélère leurs dépannages.</p>
                </div>
                <div class="tca-split__image">
                    <img src="{{ asset('images/atelier/atelier-tournevis-mur-rangement-tca.webp') }}"
                         alt="Atelier organisé TCA Industries à Clermont-Ferrand, expertise depuis 1995"
                         width="800" height="600" loading="lazy" decoding="async">
                </div>
            </div>
        </div>
    </section>

    {# ─── VALEURS — feature-grid 2x2 dans section grise ───────────── #}
    <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);">Quatre engagements, vérifiables sur chaque intervention</h2>
                    <p>Ces quatre mots ne sont pas une affichette dans le hall d'accueil. Ils décrivent notre manière de travailler depuis plus de trente ans.</p>

                    <div class="tca-feature-grid">
                        <article class="tca-feature-card">
                            <h3>Disponibilité</h3>
                            <p>Un stock important, diversifié et renouvelé en permanence. Le bon produit, présent quand vous en avez besoin.</p>
                        </article>
                        <article class="tca-feature-card">
                            <h3>Conseil</h3>
                            <p>L'accompagnement d'experts pour le choix de vos produits. Pas de vente forcée, juste la bonne réponse à votre besoin.</p>
                        </article>
                        <article class="tca-feature-card">
                            <h3>Proximité</h3>
                            <p>Une entreprise à taille humaine qui privilégie la relation client. Vos interlocuteurs vous reconnaissent.</p>
                        </article>
                        <article class="tca-feature-card">
                            <h3>Réactivité</h3>
                            <p>Des interventions efficaces, sur site ou en atelier. Réponse aux devis sous 24 heures, délai d'intervention adapté à l'urgence.</p>
                        </article>
                    </div>
                </div>
                <div class="tca-split__image">
                    <img src="{{ asset('images/atelier/atelier-technicien-gants-noirs-moteur-tca.webp') }}"
                         alt="Technicien TCA Industries au travail dans l'atelier de Clermont-Ferrand"
                         width="800" height="600" loading="lazy" decoding="async">
                </div>
            </div>
        </div>
    </section>

    {# ─── ÉQUIPE — cartes membres + intro ─────────────────────────── #}
    <section class="tca-section tca-reveal">
        <div class="tca-container">
            <div class="tca-section-head">
                <span class="tca-eyebrow">Notre équipe</span>
                <h2>Quatre experts à votre service</h2>
                <p class="tca-lead">Une équipe de quatre personnes qui pratiquent leur métier depuis longtemps. Chacun connaît son sujet et reconnaît ses limites, c'est ce qui permet de bien orienter le client.</p>
            </div>

            <div class="tca-team-grid tca-reveal tca-reveal--stagger">
                <article class="tca-team-card">
                    <div class="tca-team-card__avatar" data-initials="VM" aria-hidden="true">VM</div>
                    <p class="tca-team-card__name">Vincent Marques</p>
                    <p class="tca-team-card__role">Gérant</p>
                </article>
                <article class="tca-team-card">
                    <div class="tca-team-card__avatar" data-initials="AT" aria-hidden="true">AT</div>
                    <p class="tca-team-card__name">Albin Tixier</p>
                    <p class="tca-team-card__role">Responsable Maintenance</p>
                </article>
                <article class="tca-team-card">
                    <div class="tca-team-card__avatar" data-initials="ND" aria-hidden="true">ND</div>
                    <p class="tca-team-card__name">Nolhan Drault</p>
                    <p class="tca-team-card__role">Technicien de maintenance</p>
                </article>
                <article class="tca-team-card">
                    <div class="tca-team-card__avatar" data-initials="JD" aria-hidden="true">JD</div>
                    <p class="tca-team-card__name">Joris Dalmas</p>
                    <p class="tca-team-card__role">Technico-commercial</p>
                </article>
            </div>
        </div>
    </section>

    {# ─── ATELIER ET MAGASIN — intro split puis grille équipement 5 cards ─ #}
    <section class="tca-section tca-reveal">
        <div class="tca-section-card">
            <div class="tca-split tca-split--reverse" style="margin-bottom: var(--tca-space-7);">
                <div class="tca-split__text">
                    <span class="tca-eyebrow">Notre lieu</span>
                    <h2 style="color: var(--tca-anthracite);">Tout sous le même toit, à La Pardieu</h2>
                    <p>Nos locaux de la zone d'activités de La Pardieu réunissent sous le même toit les cinq métiers de l'électromécanique industrielle. Magasin, atelier, bobinage, essais, équilibrage&nbsp;: chaque étape du cycle de vie de votre équipement est traitée au même endroit.</p>
                    <p>Cette intégration est notre particularité&nbsp;: vous parlez à un seul interlocuteur pour la vente, la réparation et le dépannage, ce qui simplifie la coordination et accélère vos remises en marche.</p>
                </div>
                <div class="tca-split__image">
                    <img src="{{ asset('images/showroom/atelier-stock-pieces-detachees-bacs-tca.webp') }}"
                         alt="Magasin TCA Industries à La Pardieu avec stock de fournitures industrielles"
                         width="800" height="600" loading="lazy" decoding="async">
                </div>
            </div>

            <div class="tca-equipment-grid tca-reveal tca-reveal--stagger">
                <article class="tca-equipment-card">
                    <span class="tca-equipment-card__num" aria-hidden="true">01</span>
                    <h3>Magasin de vente</h3>
                    <p>Stock de fournitures industrielles et conseil technique au comptoir, ouvert aux professionnels et aux particuliers.</p>
                </article>
                <article class="tca-equipment-card">
                    <span class="tca-equipment-card__num" aria-hidden="true">02</span>
                    <h3>Atelier de réparation</h3>
                    <p>Équipé pour les moteurs électriques, les motoréducteurs et les pompes industrielles toutes marques.</p>
                </article>
                <article class="tca-equipment-card">
                    <span class="tca-equipment-card__num" aria-hidden="true">03</span>
                    <h3>Banc d'essai électrique</h3>
                    <p>Tests électriques de conformité et essai à vide sur chaque réparation avant livraison au client.</p>
                </article>
            </div>
        </div>
    </section>

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

    {# ─── SECTEURS SERVIS — composant réutilisable (homepage + about) ── #}
    {% include '_components/secteurs-servis.html.twig' %}

    {# ─── ZONE D'INTERVENTION — scattered floating cards ──────────── #}
    <section id="zone-intervention" class="tca-section tca-reveal" style="scroll-margin-top: 140px;">
        <div class="tca-container">
            <div class="tca-section-head tca-section-head--dark">
                <h2>Notre zone d'intervention</h2>
                <p>Basés à Clermont-Ferrand, nous intervenons sur l'ensemble du Massif Central pour le dépannage sur site et la maintenance industrielle.</p>
            </div>

            <div class="tca-zones-grid" role="list" aria-label="Départements desservis">
                <div class="tca-zone-card tca-zone-card--featured" role="listitem">
                    <div class="tca-zone-card__code">63</div>
                    <div class="tca-zone-card__name">Puy-de-Dôme</div>
                </div>
                <div class="tca-zone-card" role="listitem">
                    <div class="tca-zone-card__code">42</div>
                    <div class="tca-zone-card__name">Loire</div>
                </div>
                <div class="tca-zone-card" role="listitem">
                    <div class="tca-zone-card__code">03</div>
                    <div class="tca-zone-card__name">Allier</div>
                </div>
                <div class="tca-zone-card" role="listitem">
                    <div class="tca-zone-card__code">43</div>
                    <div class="tca-zone-card__name">Haute-Loire</div>
                </div>
                <div class="tca-zone-card" role="listitem">
                    <div class="tca-zone-card__code">15</div>
                    <div class="tca-zone-card__name">Cantal</div>
                </div>
                <div class="tca-zone-card" role="listitem">
                    <div class="tca-zone-card__code">23</div>
                    <div class="tca-zone-card__name">Creuse</div>
                </div>
                <div class="tca-zone-card" role="listitem">
                    <div class="tca-zone-card__code">19</div>
                    <div class="tca-zone-card__name">Corrèze</div>
                </div>
                <div class="tca-zone-card" role="listitem">
                    <div class="tca-zone-card__code">48</div>
                    <div class="tca-zone-card__name">Lozère</div>
                </div>
            </div>

            <p class="tca-content tca-content--wide" style="margin-top: var(--tca-space-6); text-align: center; color: var(--tca-gray-600);">
                Pour les apports atelier, le magasin de La Pardieu accueille les clients du lundi au jeudi, 8h-17h en continu, et le vendredi, 8h-12h.
            </p>
        </div>
    </section>

    {# ─── CTA FINAL ────────────────────────────────────────────────── #}
    <section class="tca-section">
        <div class="tca-container">
            <div class="tca-cta-block">
                <span class="tca-eyebrow tca-text-gold">Une question, un projet&nbsp;?</span>
                <h2>Venez nous rencontrer ou appelez-nous</h2>
                <p>
                    Pour un dépannage, un devis, un conseil technique ou une simple visite&nbsp;: nous sommes à Clermont-Ferrand, du lundi au vendredi.
                </p>
                <div class="tca-cta-block__actions">
                    <a href="tel:+33{{ phoneDigits|slice(1) }}" class="tca-btn tca-btn--gold tca-btn--lg">
                        Appeler le {{ phoneRaw }}
                    </a>
                    <a href="{{ path('app_contact') }}" class="tca-btn tca-btn--ghost-light tca-btn--lg">
                        Nous envoyer un message
                    </a>
                </div>
            </div>
        </div>
    </section>

</div>
{% endblock %}