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

{% set seo_title = 'Nous contacter — pépinière et paysagiste dans l\'Yonne' %}
{% set seo_description = 'Un projet de jardin, une plante à réserver, une visite à préparer : dites-nous ce qui vous amène, on vous répond.' %}

{% set steps = [
    { number: 1, label: 'Ce qui vous amène' },
    { number: 2, label: 'Votre demande' },
    { number: 3, label: 'Vos coordonnées' }
] %}

{% block body %}
    {% if photo %}
        <div class="relative h-56 overflow-hidden sm:h-72">
            {{ include('_partials/photo.html.twig', { media: photo, filter: 'hero', ratio: '21 / 6', loading: 'eager', sizes: '100vw', class: 'h-full w-full object-cover' }) }}
            <div class="absolute inset-0 bg-gradient-to-t from-surface via-surface/40 to-transparent"></div>
        </div>
    {% endif %}

    <div class="mx-auto max-w-3xl px-4 py-16 sm:px-6 lg:px-8">
        <p class="eyebrow">Contact</p>
        <h1 class="mt-4 font-serif text-[2.4rem] leading-[1.1] text-ink sm:text-[2.9rem]">
            {{ step == 1 ? 'Qu’est-ce qui vous amène ?' : (step == 2 ? 'Racontez-nous' : 'Comment vous répondre ?') }}
        </h1>

        <ol class="mt-10 flex items-center gap-3 font-sans text-[0.78rem]" aria-label="Progression">
            {% for item in steps %}
                <li class="flex items-center gap-3 {{ item.number > step ? 'text-subtle' : 'text-brand-ink' }}">
                    <span class="grid h-7 w-7 place-items-center rounded-full border {{ item.number == step ? 'border-brand bg-brand-cta text-white' : (item.number < step ? 'border-brand text-brand-ink' : 'border-line') }}" aria-hidden="true">{{ item.number }}</span>
                    <span {% if item.number == step %}aria-current="step"{% endif %}>{{ item.label }}</span>
                    {% if not loop.last %}<span class="ml-1 h-px w-6 bg-line" aria-hidden="true"></span>{% endif %}
                </li>
            {% endfor %}
        </ol>

        {% for message in app.flashes('error') %}
            <p class="mt-8 rounded-lg border border-stock-out/40 bg-surface-tint px-5 py-4 font-sans text-[0.9rem] text-stock-out">{{ message }}</p>
        {% endfor %}

        {{ form_start(form, { attr: { class: 'mt-10 space-y-7' } }) }}
            {% if step == 1 %}
                {# Des cartes, pas une liste de boutons ronds. Le bouton radio
                   reste dans le HTML, invisible mais focalisable : c'est lui qui
                   porte le clavier, le lecteur d'écran et la validation, et la
                   carte entière se colore grâce à `peer-checked`. #}
                <fieldset>
                    <legend class="sr-only">Le motif de votre message</legend>
                    <div class="grid gap-4 sm:grid-cols-2">
                        {% for choice in form.subject %}
                            <div class="relative">
                                {{ form_widget(choice, { attr: { class: 'peer sr-only' } }) }}
                                <label for="{{ choice.vars.id }}"
                                       class="flex h-full cursor-pointer flex-col rounded-2xl border border-line bg-surface p-6 transition hover:border-brand hover:shadow-md hover:shadow-ink/5 peer-checked:border-brand peer-checked:bg-surface-sage peer-checked:shadow-md peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-clay">
                                    <span class="grid h-11 w-11 place-items-center rounded-full bg-surface-sage text-brand-ink transition peer-checked:bg-surface">
                                        <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                            <path d="{{ choice.vars.attr['data-icon']|default('') }}"/>
                                        </svg>
                                    </span>
                                    <span class="mt-4 font-serif text-[1.1rem] leading-snug text-ink">{{ choice.vars.label }}</span>
                                    <span class="mt-2 font-sans text-[0.84rem] leading-relaxed text-muted">{{ choice.vars.attr['data-hint']|default('') }}</span>
                                </label>
                            </div>
                        {% endfor %}
                    </div>
                    {{ form_errors(form.subject) }}
                </fieldset>
            {% else %}
                {% if step == 2 and contact.subject %}
                    <p class="rounded-lg bg-surface-tint px-5 py-4 font-sans text-[0.86rem] text-body">
                        {{ contact.subject.label }}
                        <a href="{{ path('contact', { etape: 1 }) }}" class="ml-2 font-semibold text-brand-ink underline underline-offset-4">changer</a>
                    </p>
                {% endif %}
                {{ form_rest(form) }}
            {% endif %}

            <div class="flex flex-wrap items-center gap-4 pt-2">
                <button type="submit" class="inline-flex items-center rounded-full bg-brand-cta px-8 py-3.5 font-sans text-sm font-semibold text-white transition hover:bg-brand-ink">
                    {{ step == 3 ? 'Envoyer' : 'Continuer' }}
                </button>
                {% if step > 1 %}
                    <a href="{{ path('contact', { etape: step - 1 }) }}" class="font-sans text-sm text-muted underline underline-offset-4 hover:text-brand-ink">Revenir</a>
                {% endif %}
            </div>
        {{ form_end(form) }}

        {% if site.profile %}
            <div class="mt-14 grid gap-8 border-t border-line pt-10 sm:grid-cols-2">
                <div>
                    <p class="eyebrow">Le plus rapide</p>
                    {% if site.profile.phone %}
                        <p class="mt-3 font-serif text-2xl text-ink"><a href="tel:{{ site.profile.phoneLink }}" class="hover:text-brand-ink">{{ site.profile.phone }}</a></p>
                    {% endif %}
                    <p class="mt-2 font-sans text-[0.88rem] leading-relaxed text-muted">
                        On décroche entre deux rangs. C'est souvent plus court qu'un échange de courriels.
                    </p>
                </div>
                <div>
                    <p class="eyebrow">Nous trouver</p>
                    <address class="mt-3 not-italic font-sans text-[0.95rem] leading-relaxed text-body">
                        {{ site.profile.street }}<br>{{ site.profile.postalCode }} {{ site.profile.city }}
                    </address>
                    <p class="mt-2 font-sans text-[0.88rem] text-muted">Ouvert {{ site.openingSummary }}.</p>
                    <a href="{{ path('page_show', { slug: 'venir-nous-voir' }) }}" class="mt-3 inline-block font-sans text-sm font-semibold text-brand-ink underline underline-offset-4">Comment venir</a>
                </div>
            </div>
        {% endif %}
    </div>
{% endblock %}