{% set profile = site.profile %}

<footer class="mt-24 bg-surface-olive text-white">
    <div class="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8">
        <div class="grid gap-12 lg:grid-cols-[1.15fr_1fr_1fr_1fr]">
            <div>
                <p class="font-serif text-2xl leading-snug">Passez nous voir.<br>Le conseil est compris.</p>
                <p class="mt-4 max-w-xs font-sans text-sm leading-relaxed text-brand-soft">
                    La vente se fait sur place, du mercredi au samedi. On regarde ensemble ce qui convient à votre terrain.
                </p>
                <a href="{{ path('contact') }}" class="mt-6 inline-flex items-center gap-2 rounded-full bg-clay px-6 py-3 font-sans text-sm font-semibold text-white transition hover:bg-clay-ink">
                    Nous écrire
                    <svg class="h-3.5 w-3.5" viewBox="0 0 16 12" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M1 6h13M9.5 1.5 14 6l-4.5 4.5"/></svg>
                </a>
            </div>

            <div>
                <h2 class="font-sans text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-clay-soft">Horaires d'ouverture</h2>
                <dl class="mt-4 space-y-1.5 font-sans text-sm text-brand-soft">
                    {% for day, ranges in site.openingHours %}
                        <div class="flex justify-between gap-4">
                            <dt class="capitalize">{{ day }}</dt>
                            <dd class="text-right text-white">{{ ranges|join(' · ') }}</dd>
                        </div>
                    {% else %}
                        <div>Horaires à venir.</div>
                    {% endfor %}
                </dl>
            </div>

            <div>
                <h2 class="font-sans text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-clay-soft">Nous trouver</h2>
                {% if profile %}
                    <address class="mt-4 not-italic font-sans text-sm leading-relaxed text-brand-soft">
                        {{ profile.street }}<br>
                        {{ profile.postalCode }} {{ profile.city }}<br>
                        <span class="text-white">Aux portes de la Puisaye, entre Auxerre et Sens</span>
                    </address>
                    <a href="{{ path('page_show', { slug: 'venir-nous-voir' }) }}" class="mt-3 inline-block font-sans text-sm text-white underline decoration-clay-soft underline-offset-4">Comment venir</a>
                {% endif %}
            </div>

            <div>
                <h2 class="font-sans text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-clay-soft">Nous contacter</h2>
                {% if profile %}
                    <ul class="mt-4 space-y-2 font-sans text-sm text-brand-soft">
                        {% if profile.phone %}<li><a class="hover:text-white" href="tel:{{ profile.phoneLink }}">{{ profile.phone }}</a></li>{% endif %}
                        {% if profile.email %}<li><a class="hover:text-white" href="mailto:{{ profile.email }}">{{ profile.email }}</a></li>{% endif %}
                        {% if profile.instagramUrl %}<li><a class="hover:text-white" href="{{ profile.instagramUrl }}" rel="noopener noreferrer nofollow" target="_blank">Instagram</a></li>{% endif %}
                    </ul>
                    {% if profile.organicCertifier %}
                        <p class="mt-6 font-sans text-xs leading-relaxed text-brand-soft">
                            Production biologique certifiée {{ profile.organicCertifier }}
                            {%- if profile.organicCertificateNumber %} (n° {{ profile.organicCertificateNumber }}){% endif %},
                            sur les plantes comestibles.
                        </p>
                    {% endif %}
                {% endif %}
            </div>
        </div>

        {# L'inscription à la lettre. Le formulaire poste, la route renvoie ici,
           et le message s'affiche à la place des champs : on ne quitte jamais
           la page qu'on lisait. #}
        <div id="lettre" class="mt-12 border-t border-white/15 pt-10">
            <div class="grid gap-6 lg:grid-cols-[1fr_1.1fr] lg:items-start">
                <div>
                    <h2 class="font-serif text-xl leading-snug text-white">Des nouvelles de la pépinière</h2>
                    <p class="mt-2 max-w-md font-sans text-sm leading-relaxed text-brand-soft">
                        Ce qui entre en production, les dates d'ouverture, les plants prêts à partir.
                        Vous vous désinscrivez en un clic.
                    </p>
                </div>

                <div>
                    {# Le sac de messages n'est lu que si une session existe déjà : le
                       consulter en ouvre une, ce qui ferait passer en privé des pages
                       déclarées publiques. `hasPreviousSession` regarde le cookie, pas le sac. #}
                    {% if app.request.hasPreviousSession %}
                        {% for message in app.flashes('newsletter_ok') %}
                            <p class="rounded-2xl bg-white/10 px-5 py-4 font-sans text-sm text-white">{{ message }}</p>
                        {% endfor %}

                        {% for message in app.flashes('newsletter_error') %}
                            <p class="rounded-2xl border border-clay-soft px-5 py-4 font-sans text-sm text-white" role="alert">{{ message }}</p>
                        {% endfor %}
                    {% endif %}

                    <form method="post" action="{{ path('newsletter') }}" class="mt-4 flex flex-col gap-3 sm:flex-row">
                        <input type="hidden" name="_token" value="{{ csrf_token('newsletter') }}">
                        <input type="hidden" name="back" value="{{ app.request.pathinfo }}">

                        {# Leurre anti-robots : `tabindex` et `aria-hidden` le retirent du
                           parcours au clavier et du lecteur d'écran. #}
                        <div class="absolute left-[-9999px]" aria-hidden="true">
                            <label for="lettre-site">Site</label>
                            <input type="text" id="lettre-site" name="site" tabindex="-1" autocomplete="off">
                        </div>

                        <label for="lettre-email" class="sr-only">Votre adresse électronique</label>
                        <input type="email" id="lettre-email" name="email" required
                               autocomplete="email" placeholder="vous@exemple.fr"
                               class="w-full rounded-full bg-white px-5 py-3 font-sans text-sm text-brand-ink outline-none placeholder:text-brand-ink/50 sm:flex-1">

                        <button type="submit" class="inline-flex shrink-0 items-center justify-center gap-2 rounded-full bg-clay px-6 py-3 font-sans text-sm font-semibold text-white transition hover:bg-clay-ink">
                            M'inscrire
                            <svg class="h-3.5 w-3.5" viewBox="0 0 16 12" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M1 6h13M9.5 1.5 14 6l-4.5 4.5"/></svg>
                        </button>
                    </form>

                    <p class="mt-3 font-sans text-xs leading-relaxed text-brand-soft">
                        Votre adresse ne sert qu'à cet envoi et n'est transmise à personne.
                    </p>
                </div>
            </div>
        </div>

        <div class="mt-12 flex flex-col gap-4 border-t border-white/15 pt-6 font-sans text-xs text-brand-soft sm:flex-row sm:items-center sm:justify-between">
            <p>Jardin de Bohème{% if profile and profile.ownerName %}, {{ profile.ownerName }}{% endif %}</p>
            <nav class="flex flex-wrap gap-x-6 gap-y-2" aria-label="Liens de bas de page">
                {% for page in site.legalPages %}
                    <a class="hover:text-white" href="{{ path('page_show', { slug: page.slug }) }}">{{ page.name }}</a>
                {% endfor %}
                <a class="hover:text-white" href="{{ path('sitemap_page') }}">Plan du site</a>
            </nav>
        </div>
    </div>
</footer>