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

{% block title %}Nous contacter — Vulcan' Affûtage, Clermont-Ferrand{% endblock %}
{% block metaDesc %}Contactez Vulcan' Affûtage, artisan coutelier et affûteur à Clermont-Ferrand. 26 Rue Saint-Dominique — téléphone, e-mail, horaires et plan d'accès.{% endblock %}
{% block canonical %}contact{% endblock %}

{% block headerContact %}gColor{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('styles/ds-v2.css') }}">
    <link rel="stylesheet" href="{{ asset('styles/ds-v2-pages.css') }}">
{% endblock %}

{% block body %}
<main class="nhp-main">

    {# ============================ HERO ============================ #}
    <section class="v2-phero v2-phero--tall" data-v2-hero>
        <div class="v2-phero-bg"><img src="/assets/photo_boutique.webp" alt="" aria-hidden="true"></div>
        <div class="nhp-wrap">
            <span class="nhp-eyebrow">Nous écrire · Clermont-Ferrand</span>
            <h1 class="v2-phero-title">Parlons de vos <em>lames</em>.</h1>
            <p class="v2-phero-sub">Une question, un devis d'affûtage, une pièce sur mesure ? Écrivez-nous, appelez, ou poussez la porte de l'atelier — 26 rue Saint-Dominique.</p>
            <div class="v2-phero-actions">
                <a href="tel:{{ setting('contact.phone')|replace({' ': ''}) }}" class="nhp-btn nhp-btn--primary">
                    Appeler l'atelier
                    <svg class="nhp-btn-arrow" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </a>
                <a href="https://www.google.com/maps/dir/?api=1&destination=Vulcan+Affutage,Clermont-Ferrand" class="nhp-btn nhp-btn--ghost-dark" target="_blank" rel="noopener">S'y rendre</a>
            </div>
        </div>
    </section>

    {# ========================= COORDONNÉES + CARTE ========================= #}
    <section class="nhp-section nhp-section--light">
        <div class="nhp-wrap">
            <div class="nhp-section-head nhp-reveal" style="margin-bottom:clamp(20px,3vw,34px);">
                <span class="nhp-eyebrow">Nos coordonnées</span>
                <h2 class="nhp-h2">Où nous trouver.</h2>
            </div>

            <div class="nhp-contact-grid">
                <div class="nhp-contact-info nhp-reveal">
                    <a class="nhp-contact-row nhp-contact-link" href="https://www.google.com/maps/dir/?api=1&destination=Vulcan%20Aff%C3%BBtage%2C%2026%20Rue%20Saint-Dominique%2C%2063000%20Clermont-Ferrand" target="_blank" rel="noopener" title="Itinéraire vers la boutique">
                        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z"/></svg>
                        <span><b>Boutique &amp; Atelier</b>{{ setting('shop.address') }}<br>Proche de la place de Jaude</span>
                    </a>
                    <div class="nhp-contact-row">
                        <svg class="nhp-ico-stroke" viewBox="0 0 24 24" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7.5V12l3 2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <span><b>Horaires</b>
                            {%- for line in hours_lines() %}
                                {{ line.label }}{{ line.closed ? ' : fermé' }}{% if not line.closed %}<br><span class="nhp-hr">{{ line.text }}</span>{% endif %}<br>
                            {%- endfor %}
                            {%- for closure in upcoming_closures(2) %}
                                <span class="nhp-hr-exc">Fermeture exceptionnelle le {{ closure.date|date('d/m') }} — {{ closure.label }}</span><br>
                            {%- endfor %}
                        </span>
                    </div>
                    <a class="nhp-contact-row nhp-contact-link" href="tel:{{ setting('contact.phone')|replace({' ': ''}) }}" title="Appeler la boutique">
                        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.62 10.79a15.53 15.53 0 006.59 6.59l2.2-2.2a1 1 0 011.02-.24 11.36 11.36 0 003.56.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.45.57 3.57a1 1 0 01-.25 1.02l-2.2 2.2z"/></svg>
                        <span><b>Téléphone</b>{{ setting('contact.phone') }}</span>
                    </a>
                    <a class="nhp-contact-row nhp-contact-link" href="mailto:{{ setting('contact.email') }}" title="Envoyer un e-mail">
                        <svg class="nhp-ico-stroke" viewBox="0 0 24 24" stroke-width="1.8" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7.5 9 6 9-6" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <span><b>E-mail</b>{{ setting('contact.email') }}</span>
                    </a>
                    <div class="nhp-contact-row">
                        <svg class="nhp-ico-stroke" viewBox="0 0 24 24" stroke-width="1.8" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1.1" fill="currentColor" stroke="none"/></svg>
                        <span><b>Réseaux</b>
                            <a href="https://www.instagram.com/vulcan_affutage/" target="_blank" rel="noopener" class="nhp-contact-social">@vulcan_affutage</a>
                            &middot;
                            <a href="https://www.facebook.com/people/Vulcan-Aff%C3%BBtage/61569242744081/" target="_blank" rel="noopener" class="nhp-contact-social">Facebook</a>
                        </span>
                    </div>
                </div>

                <div class="nhp-reveal d1 nhp-contact-map">
                    {% set mapEmbedSrc = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d264.5094934602022!2d3.080066398326057!3d45.7783977114082!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47f71bdc964b4f6b%3A0xe4f4310113eeb1a8!2sVULCAN'%20AFF%C3%9BTAGE!5e0!3m2!1sfr!2sfr!4v1738073167668!5m2!1sfr!2sfr&layer=0" %}
                    <div class="nhp-map-slot" data-map-embed data-map-src="{{ mapEmbedSrc }}" data-map-title="Carte de localisation de Vulcan' Affûtage">
                        {% if app.request.cookies.get('va_consent') == 'accepted' %}
                            <iframe class="nhp-map-frame" src="{{ mapEmbedSrc }}" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" title="Carte de localisation de Vulcan' Affûtage"></iframe>
                        {% else %}
                            <div class="nhp-map-placeholder">
                                <p>La carte utilise des cookies pour s'afficher.</p>
                                <button type="button" onclick="acceptCookies()" class="nhp-btn nhp-btn--ghost">Accepter et afficher la carte</button>
                            </div>
                        {% endif %}
                    </div>
                    <a href="https://www.google.com/maps/dir/?api=1&destination=Vulcan+Affutage,Clermont-Ferrand" class="nhp-btn nhp-btn--primary nhp-contact-cta" target="_blank" rel="noopener">S'y rendre</a>
                </div>
            </div>
        </div>
    </section>

    {# ============================ CTA ============================ #}
    <section class="nhp-section nhp-section--affutage">
        <div class="nhp-wrap">
            <div class="nhp-cta-band nhp-reveal">
                <div class="nhp-cta-band-body">
                    <span class="nhp-eyebrow">Deux savoir-faire, un atelier</span>
                    <h2 class="nhp-h2" style="margin:14px 0 12px;">Une lame à créer, une lame à raviver ?</h2>
                    <p class="nhp-lead">Découvrez nos couteaux artisanaux ou confiez-nous l'affûtage de vos outils — nous vous répondrons avec plaisir.</p>
                    <div style="margin-top:26px;display:flex;gap:12px;flex-wrap:wrap;">
                        <a href="{{ path('app_produits') }}" class="nhp-btn nhp-btn--primary">Voir les couteaux</a>
                        <a href="{{ path('app_affutage') }}" class="nhp-btn nhp-btn--ghost">Le service d'affûtage</a>
                    </div>
                </div>
                <div class="nhp-cta-band-media">
                    <img src="/assets/couteaux-presentoire-20p.webp" alt="Couteaux artisanaux Vulcan' Affûtage">
                </div>
            </div>
        </div>
    </section>

</main>
{% endblock %}

{% block other_javascripts %}
    <script src="{{ asset('scripts/ds-v2-app.js') }}" defer></script>
{% endblock %}