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

{% set is_advice = kind.value == 'advice' %}
{% set articles = pagination.items %}
{% set page = pagination.page %}
{% set seo_title = is_advice
    ? 'Conseils de jardinage dans l\'Yonne — plantation, taille, saisons'
    : 'Actualités de la pépinière — arrivages, portes ouvertes, saison' %}
{% set seo_description = is_advice
    ? 'Ce qu\'il y a à faire au jardin, mois après mois, sous le climat de la Puisaye : plantation à racines nues, gelées tardives, sols argilo-calcaires.'
    : 'Les arrivages, les journées portes ouvertes et la vie de la pépinière au fil des saisons.' %}

{% if page > 1 %}
    {% set seo_title = seo_title ~ ' — page ' ~ page %}
    {% set canonical = url(is_advice ? 'advice_index' : 'news_index', { page: page }) %}
{% endif %}

{% block schema %}
    <script type="application/ld+json">
        {{ {
            '@context': 'https://schema.org',
            '@type': 'Blog',
            'name': is_advice ? 'Conseils du Jardin de Bohème' : 'Actualités du Jardin de Bohème',
            'url': url(is_advice ? 'advice_index' : 'news_index'),
            'publisher': { '@id': url('home') ~ '#pepiniere' },
            'blogPost': articles|map(article => {
                '@type': 'BlogPosting',
                'headline': article.name,
                'url': url(article.kind.routeName, { slug: article.slug }),
                'datePublished': article.kind.dated and article.publishedAt ? article.publishedAt|date('Y-m-d') : null
            })|values
        }|json_encode(constant('JSON_HEX_TAG') b-or constant('JSON_HEX_AMP') b-or constant('JSON_HEX_APOS') b-or constant('JSON_HEX_QUOT') b-or constant('JSON_UNESCAPED_UNICODE') b-or constant('JSON_UNESCAPED_SLASHES'))|raw }}
    </script>
{% endblock %}

{% block body %}
    <header class="border-b border-line bg-surface-tint py-16">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <p class="eyebrow">{{ is_advice ? 'Conseils' : 'Actualités' }}</p>
            <h1 class="mt-4 max-w-3xl font-serif text-[2.6rem] leading-[1.08] text-ink sm:text-5xl">
                {{ is_advice ? 'Ce qu’il y a à faire, saison après saison' : 'Ce qui se passe à la pépinière' }}
            </h1>
            <p class="mt-6 max-w-2xl font-sans text-[1.02rem] leading-relaxed text-body">
                {{ is_advice
                    ? 'Écrit pour nos terres : sols lourds, gelées de printemps, hivers francs. Ce qui marche ici ne marche pas partout.'
                    : 'Les arrivages, les journées portes ouvertes, et le moment où telle ou telle plante revient au comptoir.' }}
            </p>
        </div>
    </header>

    {% if articles|length %}
        {# Le premier prend toute la largeur, sur la première page seulement :
           passée celle-ci, il n'y a plus de « à la une », seulement la suite. #}
        {% if page == 1 %}
        {% set headline = articles|first %}
        <section class="mx-auto max-w-7xl px-4 pt-14 sm:px-6 lg:px-8">
            <article class="group relative grid overflow-hidden rounded-2xl border border-line bg-surface-tint lg:grid-cols-[1.25fr_1fr]">
                <div class="order-2 flex flex-col justify-center p-8 sm:p-12 lg:order-1">
                    <p class="eyebrow">
                        {% if headline.season %}{{ headline.season.label }}{% elseif headline.kind.dated and headline.publishedAt %}{{ headline.publishedAt|format_date(locale='fr', dateFormat='long') }}{% else %}À la une{% endif %}
                    </p>
                    <h2 class="mt-4 font-serif text-[2rem] leading-tight text-ink">
                        <a href="{{ path(headline.kind.routeName, { slug: headline.slug }) }}" class="after:absolute after:inset-0">{{ headline.name }}</a>
                    </h2>
                    {% if headline.intro %}<p class="mt-4 max-w-lg font-sans text-[0.98rem] leading-relaxed text-body">{{ headline.intro|u.truncate(260, '…', false) }}</p>{% endif %}
                    <span class="mt-7 inline-flex items-center gap-2 font-sans text-sm font-semibold text-brand-ink">
                        Lire
                        <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>
                    </span>
                </div>
                <div class="order-1 lg:order-2">
                    {{ include('_partials/photo.html.twig', { media: headline.image, filter: 'hero', ratio: '16 / 10', loading: 'eager', sizes: '(min-width: 1024px) 45vw, 100vw', class: 'h-full w-full object-cover transition duration-700 group-hover:scale-[1.03]' }) }}
                </div>
            </article>
        </section>
        {% endif %}

        <section class="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8">
            <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
                {% for article in (page == 1 ? articles|slice(1) : articles) %}
                    {{ include('_partials/article-card.html.twig', { article: article, level: 2 }) }}
                {% endfor %}
            </div>

            {{ include('_partials/pagination.html.twig', {
                route: is_advice ? 'advice_index' : 'news_index',
                params: {}
            }) }}
        </section>
    {% else %}
        <section class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
            <p class="rounded-xl border border-line bg-surface-tint px-7 py-8 font-sans text-body">Les premiers textes arrivent.</p>
        </section>
    {% endif %}

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