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

{% set seo_title = 'Page introuvable — Jardin de Bohème' %}

{% block meta %}<meta name="robots" content="noindex, follow">{% endblock %}

{% block body %}
    <div class="mx-auto max-w-3xl px-4 py-24 sm:px-6">
        <p class="eyebrow">Page introuvable</p>
        <h1 class="mt-4 font-serif text-[2.4rem] leading-tight text-ink sm:text-[3rem]">
            Cette adresse ne mène plus nulle part
        </h1>
        <p class="mt-5 max-w-xl font-sans text-[1rem] leading-relaxed text-body">
            Une page mise en signet a pu être renommée, ou une plante quitter le catalogue.
            Voici par où reprendre.
        </p>

        {# Un 404 qui ne propose rien renvoie au moteur de recherche. Celui-ci
           rouvre les quatre portes d'entrée du site. #}
        <div class="mt-12 grid gap-4 sm:grid-cols-2">
            {% set doors = [
                { route: 'plant_index', params: {}, title: 'Le catalogue', text: 'Fruitiers, comestibles, haies, vivaces, famille par famille.' },
                { route: 'service_index', params: {}, title: 'Le paysagiste', text: 'Création, plantation, entretien, et le devis qui va avec.' },
                { route: 'advice_index', params: {}, title: 'Les conseils', text: 'Ce qu’il y a à faire au jardin, saison après saison.' },
                { route: 'page_show', params: { slug: 'venir-nous-voir' }, title: 'Venir nous voir', text: 'L’adresse, les horaires, et la route depuis Joigny ou Auxerre.' }
            ] %}
            {% for door in doors %}
                <a href="{{ path(door.route, door.params) }}" class="group flex items-start justify-between gap-4 rounded-xl border border-line bg-surface-tint p-6 transition hover:border-brand hover:bg-surface-sage">
                    <span>
                        <span class="block font-serif text-lg text-ink group-hover:text-brand-ink">{{ door.title }}</span>
                        <span class="mt-1 block font-sans text-[0.85rem] leading-relaxed text-muted">{{ door.text }}</span>
                    </span>
                    <svg class="mt-1.5 h-3.5 w-3.5 shrink-0 text-brand" 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>
            {% endfor %}
        </div>

        {% if site.profile and site.profile.phone %}
            <p class="mt-10 font-sans text-[0.92rem] text-muted">
                Vous cherchiez une plante en particulier ? Appelez-nous, c'est plus rapide :
                <a href="tel:{{ site.profile.phoneLink }}" class="font-semibold text-brand-ink">{{ site.profile.phone }}</a>.
            </p>
        {% endif %}
    </div>
{% endblock %}