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

{% set seo = page %}
{% set seo_title = page.resolveTitle %}
{% set trail = [
    { label: 'Accueil', url: path('home') },
    { label: 'La pépinière', url: path('nursery_index') },
    { label: page.name, url: path('page_show', { slug: page.slug }) }
] %}

{% block body %}
    <header class="border-b border-line bg-surface-tint">
        <div class="mx-auto max-w-7xl px-4 pt-6 sm:px-6 lg:px-8">
            {{ include('_partials/breadcrumb.html.twig') }}
        </div>
        <div class="mx-auto grid max-w-7xl gap-10 px-4 py-12 sm:px-6 lg:grid-cols-[1.3fr_1fr] lg:items-center lg:px-8">
            <div>
                {% if page.eyebrow %}<p class="eyebrow">{{ page.eyebrow }}</p>{% endif %}
                <h1 class="mt-4 font-serif text-[2.5rem] leading-[1.1] text-ink sm:text-[3rem]">{{ page.heading }}</h1>
                {% if page.intro %}<p class="mt-6 max-w-2xl font-sans text-[1.02rem] leading-relaxed text-body">{{ page.intro }}</p>{% endif %}
            </div>
            {% if page.image %}
                <div class="overflow-hidden rounded-2xl border border-line">
                    {{ include('_partials/photo.html.twig', { media: page.image, filter: 'hero', ratio: '3 / 2', loading: 'eager', sizes: '(min-width: 1024px) 40vw, 100vw' }) }}
                </div>
            {% endif %}
        </div>
    </header>

    <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
        <div class="grid gap-14 lg:grid-cols-[1.7fr_1fr]">
            <div class="prose-jardin max-w-2xl">{{ page.body|rich }}</div>

            <aside class="space-y-6 lg:sticky lg:top-28 lg:self-start">
                <div class="rounded-2xl border border-line bg-surface-tint p-7">
                    <p class="eyebrow">Nous rendre visite</p>
                    <dl class="mt-4 space-y-2 font-sans text-[0.86rem] text-body">
                        {% for day, ranges in site.openingHours %}
                            <div class="flex justify-between gap-4 border-b border-line/70 pb-1.5">
                                <dt class="capitalize text-muted">{{ day }}</dt>
                                <dd class="text-right">{{ ranges|join(' · ') }}</dd>
                            </div>
                        {% endfor %}
                    </dl>
                    {% if site.profile %}
                        <address class="mt-5 not-italic font-sans text-[0.86rem] leading-relaxed text-body">
                            {{ site.profile.street }}<br>{{ site.profile.postalCode }} {{ site.profile.city }}
                        </address>
                    {% endif %}
                    <a href="{{ path('contact') }}" class="mt-6 inline-flex w-full items-center justify-center rounded-full bg-brand-cta px-6 py-3 font-sans text-sm font-semibold text-white transition hover:bg-brand-ink">Nous écrire</a>
                </div>

                {% if siblings|length %}
                    <div class="rounded-2xl border border-line p-7">
                        <p class="eyebrow">La pépinière</p>
                        <ul class="mt-4 space-y-2.5">
                            <li><a href="{{ path('nursery_index') }}" class="font-serif text-[1.02rem] text-body hover:text-brand-ink">Qui nous sommes</a></li>
                            {% for other in siblings %}
                                <li><a href="{{ path('page_show', { slug: other.slug }) }}" class="font-serif text-[1.02rem] text-body hover:text-brand-ink">{{ other.name }}</a></li>
                            {% endfor %}
                        </ul>
                    </div>
                {% endif %}
            </aside>
        </div>
    </div>
{% endblock %}