{% 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') }] %}

{% 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>
                <p class="eyebrow">{{ page.eyebrow|default('La pépinière') }}</p>
                <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-[minmax(0,1.6fr)_minmax(0,1fr)]">
            <div class="prose-jardin reveal">{{ page.body|rich }}</div>

            {# La colonne d'appui : ce qu'on cherche quand on lit une page « qui
               sommes-nous », et qui n'a rien à faire au milieu du récit. #}
            <aside class="space-y-6 lg:sticky lg:top-28 lg:self-start">
                {% if photos|length %}
                    <div class="overflow-hidden rounded-2xl border border-line">
                        {{ include('_partials/photo.html.twig', { media: photos|first, filter: 'card', ratio: '16 / 10', sizes: '(min-width: 1024px) 30vw, 100vw' }) }}
                    </div>
                {% endif %}

                <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>
                        {% if site.profile.organicCertifier %}
                            <p class="mt-4 font-sans text-[0.8rem] leading-relaxed text-muted">
                                Plantes comestibles certifiées {{ site.profile.organicCertifier }}
                                {%- if site.profile.organicCertificateNumber %} sous le n° {{ site.profile.organicCertificateNumber }}{% endif %}.
                            </p>
                        {% endif %}
                    {% endif %}
                    <a href="{{ path('page_show', { slug: 'venir-nous-voir' }) }}" 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">Comment venir</a>
                </div>

                {% if photos|length > 1 %}
                    <div class="overflow-hidden rounded-2xl border border-line">
                        {{ include('_partials/photo.html.twig', { media: photos[1], filter: 'card', ratio: '16 / 10', sizes: '(min-width: 1024px) 30vw, 100vw' }) }}
                    </div>
                {% endif %}
            </aside>
        </div>
    </div>

    {% set others = pages|filter(p => p.slug != page.slug) %}
    {% if others|length %}
        <section class="reveal border-y border-line bg-surface-sage py-16">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <h2 class="font-serif text-[1.9rem] text-ink">Aller plus loin</h2>
                <div class="mt-8 grid gap-5 md:grid-cols-2 lg:grid-cols-3">
                    {% for other in others %}
                        <a href="{{ path('page_show', { slug: other.slug }) }}" class="group flex h-full flex-col rounded-xl border border-line bg-surface p-7 transition hover:border-brand">
                            <h3 class="line-clamp-2 font-serif text-xl text-ink group-hover:text-brand-ink">{{ other.name }}</h3>
                            {% if other.intro %}<p class="mt-3 line-clamp-3 font-sans text-[0.86rem] leading-relaxed text-muted">{{ other.intro }}</p>{% endif %}
                        </a>
                    {% endfor %}
                </div>
            </div>
        </section>
    {% endif %}

    {% if testimonials|length %}
        <section class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
            <p class="eyebrow">Ce qu'on nous dit</p>
            <div class="mt-8 grid gap-6 md:grid-cols-2">
                {% for testimonial in testimonials %}
                    <figure class="flex h-full flex-col rounded-xl border border-line bg-surface-tint p-7">
                        <blockquote class="flex-1 font-serif text-[1.05rem] leading-relaxed text-ink">« {{ testimonial.quote }} »</blockquote>
                        <figcaption class="mt-5 font-sans text-[0.78rem] text-muted">{{ testimonial.author }}{% if testimonial.city %}, {{ testimonial.city }}{% endif %} — {{ testimonial.source }}</figcaption>
                    </figure>
                {% endfor %}
            </div>
        </section>
    {% endif %}

    <div class="pb-16">{{ include('_partials/cta.html.twig') }}</div>
{% endblock %}