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

{% block title %}{{ a.titre }} — Atelier de coutellerie à Clermont-Ferrand | Vulcan' Affûtage{% endblock %}
{% block metaDesc %}Atelier de création de couteau guidé par l'artisan à Clermont-Ferrand : {{ a.duree }} à l'établi, vous choisissez le manche et repartez avec votre couteau. {{ a.prix }}, idéal à offrir.{% endblock %}
{% block canonical %}ateliers{% endblock %}

{% block headerAteliers %}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 %}
{% set contactEmail = setting('contact.email') ?: 'vulcanaffutage@gmail.com' %}
{% set contactPhone = setting('contact.phone') ?: '04 73 37 29 05' %}
{% set matieres = [
    { nom: 'Olivier',                     img: 'olivier.png',           desc: 'Veines contrastées, odeur légère. Bois stable et chaleureux.' },
    { nom: 'Bois de rose',                img: 'bois-de-rose.png',      desc: 'Couleurs profondes, parfois violacées. Finition haut de gamme.' },
    { nom: 'Corne de vache',              img: 'corne-vache.png',       desc: 'Variations naturelles, aspect organique. Polissage miroir.' },
    { nom: 'Buis',                        img: 'buis.png',              desc: 'Grain très fin, densité élevée. Rendu lisse, durable.' },
    { nom: 'Loupe stabilisée (option)',   img: 'loupe-stabilise.png',   desc: 'Dessins tourbillonnants, résine stabilisée. Pièces spectaculaires.' },
    { nom: 'Skateboard recyclé (option)', img: 'skate.png',             desc: 'Couches colorées recyclées. Look graphique unique.' },
] %}
<main class="nhp-main" data-contact-email="{{ contactEmail }}" data-contact-phone="{{ contactPhone|replace({' ': ''}) }}">

    {# ============================ HERO ============================ #}
    <section class="v2-phero v2-phero--tall atl-hero" data-v2-hero>
        <div class="v2-phero-bg"><img src="/assets/home_affutage.webp" alt="" aria-hidden="true"></div>
        <div class="nhp-wrap">
            <span class="nhp-eyebrow">Atelier & stage · Clermont-Ferrand</span>
            <h1 class="v2-phero-title">Créez votre propre couteau. Vivez l'expérience <em>Vulcan'</em>.</h1>
            <p class="v2-phero-sub">{{ a.duree }} avec l'artisan, à l'atelier. Vous assemblez, façonnez, polissez votre couteau — et vous repartez avec votre création.</p>
            <div class="atl-hero-actions">
                <a href="#reservation" class="nhp-btn nhp-btn--primary">Réserver votre stage ({{ a.prix }})</a>
                <a href="#programme" class="nhp-btn nhp-btn--ghost-dark">Découvrir l'atelier</a>
            </div>
        </div>
    </section>

    {# ======================= STRIP VALEURS ======================= #}
    <section class="nhp-section nhp-section--light" style="padding-bottom:0;">
        <div class="nhp-wrap">
            <div class="atl-vcards nhp-reveal" role="list">
                <div class="atl-vcard" role="listitem">
                    <span class="atl-vcard-t">{{ a.duree }} en immersion</span>
                    <span class="atl-vcard-s">Accompagnement de A à Z</span>
                </div>
                <div class="atl-vcard" role="listitem">
                    <span class="atl-vcard-t">Couteau « rosace »</span>
                    <span class="atl-vcard-s">Création Vulcan', lame 12C27</span>
                </div>
                <div class="atl-vcard" role="listitem">
                    <span class="atl-vcard-t">En petit comité</span>
                    <span class="atl-vcard-s">Accompagnement personnalisé</span>
                </div>
                <div class="atl-vcard" role="listitem">
                    <span class="atl-vcard-t">{{ a.prix }}</span>
                    <span class="atl-vcard-s">Stage et couteau inclus</span>
                </div>
            </div>
        </div>
    </section>

    {# ========================= PROGRAMME ========================= #}
    <section class="nhp-section nhp-section--light" id="programme" data-atl-atelier>
        <div class="nhp-wrap" style="max-width:880px;">
            <div class="nhp-section-head nhp-reveal" style="margin-bottom:clamp(22px,3vw,36px);">
                <span class="nhp-eyebrow">L'atelier, c'est quoi ?</span>
                <h2 class="nhp-h2">{{ a.titre }}, pas à pas.</h2>
                {% if a.description %}
                <div class="v2-prose" style="margin-top:14px;"><p>{{ a.description|nl2br }}</p></div>
                {% endif %}
            </div>
            <ol class="atl-steps atl-steps--page nhp-reveal">
                {% for etape in a.etapes %}
                <li class="atl-step" data-atl-etape>
                    <span class="atl-step-node" aria-hidden="true">{{ loop.index }}</span>
                    <div class="atl-step-card">
                        <h4>{{ etape.titre }}</h4>
                        {% if etape.texte %}<p>{{ etape.texte }}</p>{% endif %}
                    </div>
                </li>
                {% endfor %}
            </ol>
        </div>
    </section>

    {# ================== MATIÈRES — full-bleed ================== #}
    <section class="atl-mats-wrap" id="matieres">
        <div class="nhp-wrap" style="padding-bottom:clamp(18px,2.5vw,28px);">
            <div class="nhp-section-head nhp-reveal">
                <span class="nhp-eyebrow">Le manche, votre signature</span>
                <h2 class="nhp-h2">Quelle matière vous ressemble ?</h2>
            </div>
        </div>
        <div class="atl-mats" role="list" data-atl-mats>
            {% for m in matieres %}
            <article role="listitem" class="atl-mat" data-atl-mat>
                <button class="atl-mat-btn" type="button" aria-expanded="false" aria-label="Voir {{ m.nom }}">
                    <img class="atl-mat-img" src="/assets/{{ m.img }}" alt="" loading="lazy" decoding="async">
                    <span class="atl-mat-veil" aria-hidden="true"></span>
                    <span class="atl-mat-content">
                        <span class="atl-mat-title">{{ m.nom }}</span>
                        <span class="atl-mat-desc">{{ m.desc }}</span>
                    </span>
                </button>
            </article>
            {% endfor %}
        </div>
    </section>

    {# ================== INFOS UTILES + OFFRIR ================== #}
    <section class="nhp-section nhp-section--paper" id="infos">
        <div class="nhp-wrap">
            <div class="nhp-section-head nhp-reveal" style="margin-bottom:clamp(20px,3vw,30px);">
                <span class="nhp-eyebrow">Les infos utiles</span>
                <h2 class="nhp-h2">Avant de réserver.</h2>
            </div>
            <div class="atl-infos nhp-reveal">
                <div class="atl-info">
                    <h3>Pour qui ?</h3>
                    <p>Dès <strong>12 ans</strong>. Mineur accompagné d'un <strong>adulte stagiaire</strong>.</p>
                </div>
                <div class="atl-info">
                    <h3>Quand ?</h3>
                    <p>Prochaines dates disponibles ci-dessous. <strong>Les places sont limitées</strong> — réservez tôt.</p>
                </div>
                <div class="atl-info">
                    <h3>Tenue</h3>
                    <p>Pantalon et chaussures fermées. <strong>Tablier fourni</strong>.</p>
                </div>
            </div>
            <div class="atl-offer nhp-reveal" id="carte-cadeau">
                <div class="atl-offer-body">
                    <h3>Offrir l'atelier</h3>
                    <p>Un cadeau inoubliable : {{ a.duree }} de découverte d'un savoir-faire artisanal, et une lame que l'on garde toute une vie. Le bénéficiaire choisit sa date plus tard, quand il le souhaite — le bon est valable 12 mois.</p>
                    <div class="atl-offer-actions">
                        <a class="nhp-btn nhp-btn--primary" href="{{ path('app_carte_cadeau', {switch: 'atelier'}) }}">
                            Offrir ce stage
                            <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>
                    </div>
                </div>
                <div class="atl-offer-media">
                    <img src="/assets/bon-cadeau-date.webp" alt="Bon cadeau pour l'atelier" loading="lazy">
                </div>
            </div>
        </div>
    </section>

    {# ==================== RÉSERVATION — focal ==================== #}
    <section class="nhp-section nhp-section--light" id="reservation">
        <div class="nhp-wrap">
            <div class="atl-resa nhp-reveal">
                <div class="atl-resa-head">
                    <div>
                        <span class="atl-resa-eyebrow">Réservation</span>
                        <h2 class="atl-resa-title">Réserver votre atelier</h2>
                        <p class="atl-resa-sub">{{ a.prix }} par participant, stage et couteau inclus. Place confirmée par email ou téléphone, en quelques minutes.</p>
                    </div>
                    <span class="atl-stamp" aria-label="Prix : {{ a.prix }} par personne">
                        <span class="atl-stamp-prix">{{ a.prix }}</span>
                        <span class="atl-stamp-sub">/ pers.</span>
                    </span>
                </div>

                {% if a.creneaux is not empty %}
                    <p class="atl-resa-lead">Choisissez votre date :</p>

                    {# Navigation par lots de dates + recherche (ateliers.js) #}
                    <div class="atl-week-nav" data-atl-batch-nav hidden>
                        <button type="button" class="atl-week-btn" data-atl-batch-prev aria-label="Dates précédentes">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
                        </button>
                        <div class="atl-datepick" data-atl-datepick>
                            <button type="button" class="atl-datepick-btn" data-atl-datepick-toggle aria-expanded="false">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
                                <span data-atl-datepick-label>Choisir une date</span>
                            </button>
                            <div class="atl-datepick-pop" data-atl-datepick-pop hidden>
                                <label class="atl-datepick-field">
                                    <span>Une date précise</span>
                                    <input type="date" data-atl-date-exacte>
                                </label>
                                <div class="atl-datepick-sep">ou une période</div>
                                <div class="atl-datepick-range">
                                    <label class="atl-datepick-field"><span>Du</span><input type="date" data-atl-date-du></label>
                                    <label class="atl-datepick-field"><span>Au</span><input type="date" data-atl-date-au></label>
                                </div>
                                <button type="button" class="atl-datepick-reset" data-atl-date-reset>Réinitialiser</button>
                            </div>
                        </div>
                        <button type="button" class="atl-week-btn" data-atl-batch-next aria-label="Dates suivantes">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>
                        </button>
                    </div>

                    <div class="atl-slots" data-atl-slots>
                        {% for c in a.creneaux %}
                        <button type="button"
                                class="atl-slot {{ c.placesRestantes == 0 ? 'atl-slot--full' }}"
                                data-atl-slot
                                data-date="{{ c.date }}"
                                {{ c.placesRestantes == 0 ? 'disabled' }}
                                data-creneau-id="{{ c.id }}"
                                data-max="{{ c.placesRestantes }}"
                                data-date-longue="{{ c.dateLongue }}"
                                data-atelier-titre="{{ a.titre }}">
                            <span class="atl-slot-day">{{ c.jour }}</span>
                            <span class="atl-slot-month">{{ c.mois }}</span>
                            <span class="atl-slot-hour">{{ c.heure }}</span>
                            <span class="atl-slot-places {{ c.placesRestantes == 0 ? 'atl-slot-places--full' }}" data-atl-places>
                                {%- if c.placesRestantes == 0 -%}
                                    Complet
                                {%- else -%}
                                    {{ c.placesRestantes }} place{{ c.placesRestantes > 1 ? 's' }}
                                {%- endif -%}
                            </span>
                        </button>
                        {% endfor %}
                    </div>
                    <p class="atl-week-empty" data-atl-batch-empty hidden>
                        Rien de disponible sur cette période — essayez d'autres dates pour voir les disponibilités restantes.
                    </p>

                    <div class="atl-confirm" hidden data-atl-confirm>
                        <p class="atl-confirm-date">Votre créneau : <strong data-atl-confirm-date></strong></p>
                        {% if app.session.get('client_id') %}
                        <form method="post" action="{{ path('app_panier_add_atelier') }}" class="atl-resa-form" data-atl-resa-form data-prix="{{ a.prixNum }}">
                            <input type="hidden" name="_token" value="{{ csrf_token('resa') }}">
                            <input type="hidden" name="creneau" value="" data-atl-input-creneau>
                            <div class="atl-resa-fields">
                                <label class="atl-resa-field">
                                    <span>Participants</span>
                                    <select name="places" data-atl-input-places></select>
                                </label>
                                <label class="atl-resa-field">
                                    <span>Téléphone</span>
                                    <input type="tel" name="telephone" required placeholder="06 12 34 56 78" pattern="[0-9 +.()\-]{6,20}" value="{{ app.session.get('client_tel') ?: '' }}">
                                </label>
                            </div>
                            <p class="atl-confirm-note">Paiement sécurisé en ligne à l'étape suivante — place confirmée immédiatement.</p>
                            <div class="atl-confirm-actions">
                                <button type="submit" class="nhp-btn nhp-btn--primary">
                                    Ajouter au panier
                                    <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>
                                </button>
                            </div>
                        </form>
                        {% else %}
                        <p class="atl-confirm-note">Connectez-vous pour réserver ce créneau en ligne — c'est l'affaire d'une minute.</p>
                        <div class="atl-confirm-actions" data-atl-login-cta>
                            <a class="nhp-btn nhp-btn--primary" href="{{ path('app_client_login', {route: 'ateliers'}) }}">Se connecter pour réserver</a>
                        </div>
                        {% endif %}
                    </div>
                {% else %}
                    <p class="atl-nodates" data-atl-nodates>Prochaines dates en préparation — appelez l'atelier ou écrivez-nous pour être prévenu dès leur ouverture.</p>
                    <div class="atl-nodates-actions">
                        <a class="nhp-btn nhp-btn--primary" href="tel:{{ contactPhone|replace({' ': ''}) }}">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z"/></svg>
                            {{ contactPhone }}
                        </a>
                        <a class="nhp-btn nhp-btn--ghost" href="{{ path('app_contact') }}">
                            Nous contacter
                            <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>
                    </div>
                {% endif %}
            </div>
        </div>
    </section>

    {# ============================ FAQ ============================ #}
    <section class="nhp-section nhp-section--paper">
        <div class="nhp-wrap" style="max-width:820px;">
            <div class="nhp-section-head nhp-reveal" style="margin-bottom:clamp(20px,3vw,30px);">
                <span class="nhp-eyebrow">Questions fréquentes</span>
                <h2 class="nhp-h2">Avant de venir.</h2>
            </div>
            <div class="atl-faq nhp-reveal">
                <details class="atl-faq-item">
                    <summary>Faut-il une expérience ?</summary>
                    <p>Non. L'atelier est guidé pas à pas par l'artisan — aucune expérience n'est requise.</p>
                </details>
                <details class="atl-faq-item">
                    <summary>Puis-je venir avec un mineur ?</summary>
                    <p>Oui, dès 12 ans révolus, accompagné d'un adulte participant.</p>
                </details>
                <details class="atl-faq-item">
                    <summary>Comment s'habiller ?</summary>
                    <p>Pantalon et chaussures fermées. Le tablier est fourni.</p>
                </details>
                <details class="atl-faq-item">
                    <summary>Et si je dois annuler ?</summary>
                    <p>Prévenez-nous au plus tôt par téléphone : un report vous sera proposé selon le délai.</p>
                </details>
                <details class="atl-faq-item">
                    <summary>Peut-on offrir un atelier ?</summary>
                    <p>Oui — directement en ligne sur la <a href="{{ path('app_carte_cadeau', {switch: 'atelier'}) }}">page carte cadeau</a> : le stage complet, ou un montant libre. Le bénéficiaire reçoit un code valable 12 mois et choisit sa date quand il le souhaite.</p>
                </details>
            </div>

            <div class="atl-brand nhp-reveal">
                <h2 class="atl-brand-t">Vulcan' Affûtage</h2>
                <p>Coutellerie et affûtage à Clermont-Ferrand. Savoir-faire transmis depuis 1981.</p>
            </div>
        </div>
    </section>

    {# ========================= STICKY CTA ========================= #}
    <div class="atl-sticky" data-atl-sticky hidden>
        <span class="atl-sticky-txt">Atelier création couteau</span>
        <a href="#reservation" class="nhp-btn nhp-btn--primary atl-sticky-btn">Réserver ({{ a.prix }})</a>
    </div>

</main>

{# JSON-LD — Course #}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Course",
  "name": {{ a.titre|json_encode|raw }},
  "description": {{ (a.description ?: "Stage de coutellerie guidé par l'artisan à Clermont-Ferrand : montez, façonnez et affûtez votre couteau, et repartez avec votre création.")|json_encode|raw }},
  "provider": {
    "@type": "LocalBusiness",
    "name": "Vulcan' Affûtage",
    "address": {"@type": "PostalAddress", "addressLocality": "Clermont-Ferrand", "addressCountry": "FR"}
  },
  "hasCourseInstance": {
    "@type": "CourseInstance",
    "courseMode": "OnSite",
    "location": {"@type": "Place", "name": "Atelier Vulcan' Affûtage", "address": {"@type": "PostalAddress", "addressLocality": "Clermont-Ferrand", "addressCountry": "FR"}}
  },
  "offers": {"@type": "Offer", "price": {{ a.prix|replace({' €': '', ',': '.', ' ': ''})|json_encode|raw }}, "priceCurrency": "EUR"}
}
</script>
{% endblock %}

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