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

{# Page 13 — Contact (T4)
   URL : /contact/
   Voir docs/pages.md page 13.
   Formulaire géré par App\Controller\ContactController (honeypot + timing + AJAX).
   Pas de FAQ sur cette page (CLAUDE.md §6.12). #}

{% block stylesheets %}
    {{ parent() }}
    {# The existing contact.js depends on .contact-* selectors — we keep it #}
    {# loaded for the AJAX behaviour but use TCA classes for the styling.  #}
{% endblock %}

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

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

    {# ─── BANDEAU URGENCE ──────────────────────────────────────────── #}
    {% set phoneRaw = siteParams.phone|default('04 73 28 74 74') %}
    {% set phoneDigits = phoneRaw|replace({' ': '', '.': '', '-': '', '(': '', ')': ''}) %}
    <div class="tca-urgent-banner">
        <div class="tca-container tca-urgent-banner__inner">
            <div class="tca-urgent-banner__text">
                <strong>Urgence production&nbsp;?</strong>
                <span>Délai d'intervention adapté à l'urgence en Auvergne &amp; Massif Central.</span>
            </div>
            <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>
        </div>
    </div>

    {# ─── HEADER ───────────────────────────────────────────────────── #}
    <section class="tca-section tca-section--tight">
        <div class="tca-container">
            <div class="tca-section-head">
                <span class="tca-eyebrow">Contact · Clermont-Ferrand</span>
                <h1>Contactez TCA Industries</h1>
                <p class="tca-lead">
                    Une question, une demande de devis, un dépannage à organiser&nbsp;? Décrivez votre besoin par formulaire ou appelez-nous — nous répondons sous 24 heures ouvrées.
                </p>
            </div>
        </div>
    </section>

    {# ─── FORMULAIRE + INFOS ───────────────────────────────────────── #}
    <section class="tca-section tca-section--tight">
        <div class="tca-container">
            <div class="tca-contact-grid">

                {# ── Formulaire ── #}
                <div class="tca-contact-form">
                    {{ form_start(form, {attr: {id: 'contact-form', novalidate: 'novalidate'}}) }}

                    {# Honeypot — hidden from humans, bots fill it #}
                    <div style="position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden" aria-hidden="true">
                        <label for="contact_website">Ne pas remplir</label>
                        <input type="text" name="_website" id="contact_website" tabindex="-1" autocomplete="off">
                    </div>
                    <input type="hidden" name="_form_time" value="{{ "now"|date("U") }}">

                    <div class="tca-contact-form__row">
                        <div class="tca-form-group">
                            <label for="{{ form.firstName.vars.id }}">Prénom <span class="required">*</span></label>
                            <div class="tca-form-errors" data-error="firstName">{{ form_errors(form.firstName) }}</div>
                            {{ form_widget(form.firstName, {attr: {class: 'tca-input'}}) }}
                        </div>
                        <div class="tca-form-group">
                            <label for="{{ form.lastName.vars.id }}">Nom <span class="required">*</span></label>
                            <div class="tca-form-errors" data-error="lastName">{{ form_errors(form.lastName) }}</div>
                            {{ form_widget(form.lastName, {attr: {class: 'tca-input'}}) }}
                        </div>
                    </div>

                    <div class="tca-contact-form__row">
                        <div class="tca-form-group">
                            <label for="{{ form.email.vars.id }}">Email <span class="required">*</span></label>
                            <div class="tca-form-errors" data-error="email">{{ form_errors(form.email) }}</div>
                            {{ form_widget(form.email, {attr: {class: 'tca-input'}}) }}
                        </div>
                        <div class="tca-form-group">
                            <label for="{{ form.phone.vars.id }}">Téléphone</label>
                            <div class="tca-form-errors" data-error="phone">{{ form_errors(form.phone) }}</div>
                            {{ form_widget(form.phone, {attr: {class: 'tca-input'}}) }}
                        </div>
                    </div>

                    <div class="tca-form-group">
                        <label for="{{ form.subject.vars.id }}">Sujet <span class="required">*</span></label>
                        <div class="tca-form-errors" data-error="subject">{{ form_errors(form.subject) }}</div>
                        {{ form_widget(form.subject, {attr: {class: 'tca-select'}}) }}
                    </div>

                    <div class="tca-form-group">
                        <label for="{{ form.message.vars.id }}">Message <span class="required">*</span></label>
                        <div class="tca-form-errors" data-error="message">{{ form_errors(form.message) }}</div>
                        {{ form_widget(form.message, {attr: {class: 'tca-textarea'}}) }}
                    </div>

                    <button type="submit" class="tca-btn tca-btn--primary tca-btn--lg tca-btn--block" id="contact-submit">
                        <svg class="btn-icon-save" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
                        <svg class="btn-icon-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" style="display:none" aria-hidden="true"><circle cx="12" cy="12" r="10" stroke-dasharray="31.4 31.4"/></svg>
                        Envoyer le message
                    </button>

                    <p style="margin-top: var(--tca-space-3); font-size: 0.8125rem; color: var(--tca-gray-500); text-align: center;">
                        En soumettant ce formulaire, vous acceptez que vos données soient utilisées pour traiter votre demande. Voir notre <a href="{{ path('app_legal_privacy') }}" class="tca-link">politique de confidentialité</a>.
                    </p>

                    {{ form_end(form) }}
                </div>

                {# ── Colonne infos ── #}
                <div class="tca-contact-info">
                    <div class="tca-contact-info__block">
                        <h3>
                            <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>
                            Téléphone
                        </h3>
                        <p>
                            <a href="tel:+33{{ phoneDigits|slice(1) }}">{{ phoneRaw }}</a><br>
                            Du lundi au jeudi 8h-17h, le vendredi 8h-12h
                        </p>
                    </div>

                    <div class="tca-contact-info__block">
                        <h3>
                            <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 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                            Adresse
                        </h3>
                        <address>
                            {{ siteParams.address|default('25 Rue Joseph Desaymard') }}<br>
                            {% if siteParams.addressComplement %}{{ siteParams.addressComplement }}<br>{% endif %}
                            {{ siteParams.postalCode|default('63000') }} {{ siteParams.city|default('Clermont-Ferrand') }}
                        </address>
                    </div>

                    <div class="tca-contact-info__block">
                        <h3>
                            <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>
                            Horaires
                        </h3>
                        <p>
                            Lundi – Jeudi&nbsp;: 08h00 – 17h00 en continu<br>
                            Vendredi&nbsp;: 08h00 – 12h00<br>
                            Samedi – Dimanche&nbsp;: fermé
                        </p>
                    </div>

                    {% if siteParams.contactEmail %}
                    <div class="tca-contact-info__block">
                        <h3>
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                            Email
                        </h3>
                        <p>
                            <a href="mailto:{{ siteParams.contactEmail }}">{{ siteParams.contactEmail }}</a>
                        </p>
                    </div>
                    {% endif %}
                </div>

            </div>

            {# ── Google Maps ── #}
            <div class="tca-map">
                <iframe
                    src="https://maps.google.com/maps?q=25+Rue+Joseph+Desaymard+63000+Clermont-Ferrand&output=embed"
                    width="100%" height="360"
                    style="border:0"
                    loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"
                    title="Plan d'accès à TCA Industries, 25 Rue Joseph Desaymard, Clermont-Ferrand"
                    aria-label="Carte Google Maps de l'emplacement de TCA Industries"></iframe>
            </div>

        </div>
    </section>

</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
{# Keep the existing contact.js for AJAX submission behaviour #}
<script src="{{ asset('js/contact.js') }}"></script>
{% endblock %}