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

{% set seo = category %}
{% set seo_title = category.resolveTitle %}
{% set trail = [{ label: 'Accueil', url: path('home') }, { label: 'Nos plantes', url: path('plant_index') }] %}
{% for ancestor in category.ancestry %}
    {% set trail = trail|merge([{ label: ancestor.name, url: path('category_show', { slug: ancestor.slug }) }]) %}
{% endfor %}

{% block schema %}
    <script type="application/ld+json">
        {{ {
            '@context': 'https://schema.org',
            '@type': 'CollectionPage',
            'name': category.heading,
            'description': category.metaDescription,
            'url': url('category_show', { slug: category.slug }),
            'mainEntity': {
                '@type': 'ItemList',
                'numberOfItems': plants|length,
                'itemListElement': plants|map((plant, index) => {
                    '@type': 'ListItem',
                    'position': index + 1,
                    'name': plant.name,
                    'url': url('plant_show', { slug: plant.slug })
                })|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">
        <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 category.parent %}<p class="eyebrow">{{ category.parent.name }}</p>{% endif %}
                <h1 class="mt-4 font-serif text-[2.5rem] leading-[1.1] text-ink sm:text-[3rem]">{{ category.heading }}</h1>
                {% if category.intro %}
                    <p class="mt-6 max-w-2xl font-sans text-[1.02rem] leading-relaxed text-body">{{ category.intro }}</p>
                {% endif %}
            </div>
            {% if category.image %}
                <div class="overflow-hidden rounded-2xl border border-line">
                    {{ include('_partials/photo.html.twig', { media: category.image, filter: 'hero', ratio: '3 / 2', loading: 'eager', sizes: '(min-width: 1024px) 40vw, 100vw' }) }}
                </div>
            {% endif %}
        </div>
    </header>

    {# — Les sous-familles, quand il y en a. Elles passent avant les fiches :
         quelqu'un qui arrive sur « comestibles » cherche d'abord un rayon. — #}
    {% set children = category.children|filter(c => c.published) %}
    {% if children|length %}
        <section class="mx-auto max-w-7xl px-4 pt-14 sm:px-6 lg:px-8">
            <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                {% for child in children %}
                    <a href="{{ path('category_show', { slug: child.slug }) }}" class="group flex items-start gap-4 rounded-xl border border-line p-6 transition hover:border-brand hover:bg-surface-tint">
                        <div class="flex-1">
                            <h2 class="font-serif text-lg text-ink group-hover:text-brand-ink">{{ child.name }}</h2>
                            {% if child.intro %}<p class="mt-2 font-sans text-[0.83rem] leading-relaxed text-muted">{{ child.intro|u.truncate(110, '…', false) }}</p>{% endif %}
                        </div>
                        <svg class="mt-1 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>
        </section>
    {% endif %}

    <section class="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8">
        {% if plants|length %}
            <h2 class="font-serif text-[1.8rem] text-ink">Ce que nous cultivons</h2>
            <div class="mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
                {% for plant in plants %}
                    {{ include('_partials/plant-card.html.twig') }}
                {% endfor %}
            </div>
        {% else %}
            <p class="rounded-xl border border-line bg-surface-tint px-7 py-8 font-sans text-[0.95rem] leading-relaxed text-body">
                Les fiches de cette famille arrivent. En attendant, passez à la pépinière ou
                appelez-nous : ce qui pousse ici n'est pas encore tout entier sur ce site.
            </p>
        {% endif %}

        {% if category.body %}
            <div class="prose-jardin mt-20 max-w-2xl">{{ category.body|rich }}</div>
        {% endif %}
    </section>

    {# — Les conseils qui parlent de cette famille. Une liste de plantes sans le
         texte qui explique comment les planter laisse le visiteur repartir
         chercher ailleurs. — #}
    {% if advice|length %}
        <section class="border-t border-line bg-surface-sage py-16">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <p class="eyebrow">À lire avant de planter</p>
                <h2 class="mt-3 font-serif text-[1.8rem] text-ink">Nos conseils sur le sujet</h2>
                <div class="mt-8 grid gap-6 md:grid-cols-3">
                    {% for article in advice %}
                        {{ include('_partials/article-card.html.twig', { article: article, sizes: '(min-width: 768px) 33vw, 100vw' }) }}
                    {% endfor %}
                </div>
            </div>
        </section>
    {% endif %}

    <div class="pb-16">
        {{ include('_partials/cta.html.twig', {
            title: 'Choisir se fait mieux à deux',
            text: "Décrivez-nous votre terrain, sa terre et son exposition. On vous dira lesquelles y tiendront."
        }) }}
    </div>
{% endblock %}