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

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

{% block schema %}
    <script type="application/ld+json">
        {{ {
            '@context': 'https://schema.org',
            '@type': 'Product',
            'name': plant.name,
            'alternateName': plant.latinName,
            'description': plant.intro,
            'category': category ? category.name : null,
            'brand': { '@type': 'Brand', 'name': 'Jardin de Bohème' },
            'offers': plant.price ? {
                '@type': 'Offer',
                'price': plant.price,
                'priceCurrency': 'EUR',
                'availability': plant.availability.value == 'available' ? 'https://schema.org/InStock' : 'https://schema.org/OutOfStock',
                'availableAtOrFrom': { '@type': 'Place', '@id': url('home') ~ '#pepiniere' },
                'seller': { '@id': url('home') ~ '#pepiniere' },
                'url': url('plant_show', { slug: plant.slug })
            } : null,
            'additionalProperty': [
                plant.matureHeightCm ? { '@type': 'PropertyValue', 'name': 'Hauteur adulte', 'value': plant.matureHeightCm|plant_size } : null,
                plant.exposure ? { '@type': 'PropertyValue', 'name': 'Exposition', 'value': plant.exposure.label } : null,
                plant.hardinessCelsius ? { '@type': 'PropertyValue', 'name': 'Rusticité', 'value': plant.hardinessCelsius ~ ' °C' } : null,
                plant.soil ? { '@type': 'PropertyValue', 'name': 'Sol', 'value': plant.soil } : null,
                plant.pollinators ? { '@type': 'PropertyValue', 'name': 'Pollinisateurs', 'value': plant.pollinators } : null
            ]|filter(v => v is not null)|values
        }|filter(v => v is not null)|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 %}
    <div class="mx-auto max-w-7xl px-4 pt-6 sm:px-6 lg:px-8">
        {{ include('_partials/breadcrumb.html.twig') }}
    </div>

    <article>
        <header class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
            <div class="grid gap-10 lg:grid-cols-[1.05fr_1fr] lg:gap-16">
                <div class="overflow-hidden rounded-2xl border border-line">
                    {{ include('_partials/photo.html.twig', { media: plant.image, filter: 'plant', ratio: '4 / 5', loading: 'eager', sizes: '(min-width: 1024px) 45vw, 100vw' }) }}
                </div>

                <div class="lg:pt-4">
                    {% if category %}<p class="eyebrow">{{ category.name }}</p>{% endif %}
                    <h1 class="mt-4 font-serif text-[2.4rem] leading-[1.1] text-ink sm:text-[2.9rem]">{{ plant.heading }}</h1>
                    {% if plant.latinName %}<p class="mt-2 font-serif text-lg italic text-muted">{{ plant.latinName }}</p>{% endif %}

                    {# La réponse directe : le seul passage de la page qui doit
                       se lire seul, parce que c'est celui qu'un moteur reprend. #}
                    {% if plant.intro %}
                        <p class="mt-6 font-sans text-[1.02rem] leading-relaxed text-body">{{ plant.intro }}</p>
                    {% endif %}

                    <div class="mt-7 flex flex-wrap items-center gap-x-6 gap-y-3 border-y border-line py-4">
                        {{ include('_partials/availability.html.twig') }}
                        {% if plant.price %}
                            <span class="font-serif text-xl text-ink">{{ plant.price|number_format(2, ',', ' ') }} €<span class="ml-1 font-sans text-sm text-muted">{{ plant.priceUnit }}</span></span>
                        {% endif %}
                        {% if plant.organic %}<span class="rounded-full bg-surface-sage px-3 py-1 font-sans text-[0.72rem] font-semibold text-brand-ink">Culture biologique certifiée</span>{% endif %}
                        {% if plant.promotionLabel %}<span class="rounded-full bg-clay px-3 py-1 font-sans text-[0.72rem] font-semibold text-white">{{ plant.promotionLabel }}</span>{% endif %}
                    </div>

                    {% if plant.availabilityNote %}
                        <p class="mt-4 rounded-lg bg-surface-tint px-5 py-4 font-sans text-[0.88rem] leading-relaxed text-body">{{ plant.availabilityNote }}</p>
                    {% endif %}

                    <div class="mt-8 flex flex-wrap gap-3">
                        {# Rien ne se réserve ni ne s'achète en ligne : le bouton
                           mène au comptoir, pas à un panier. #}
                        <a href="{{ path('page_show', { slug: 'venir-nous-voir' }) }}" class="inline-flex items-center rounded-full bg-brand-cta px-7 py-3.5 font-sans text-sm font-semibold text-white transition hover:bg-brand-ink">
                            Venez la voir
                        </a>
                        <a href="{{ path('contact', { plante: plant.slug }) }}" class="inline-flex items-center rounded-full border border-line-strong px-7 py-3.5 font-sans text-sm font-semibold text-ink transition hover:border-brand hover:bg-surface-tint">
                            {{ plant.availability.value == 'available' ? 'Poser une question' : 'Savoir quand elle revient' }}
                        </a>
                    </div>

                    {% if plant.traits|length %}
                        <ul class="mt-8 flex flex-wrap gap-2">
                            {% for trait in plant.traits %}
                                {% if trait.published %}
                                    <li><a href="{{ path('trait_show', { slug: trait.slug }) }}" class="inline-block rounded-full border border-line px-3.5 py-1.5 font-sans text-[0.76rem] text-muted transition hover:border-brand hover:text-brand-ink">{{ trait.name }}</a></li>
                                {% endif %}
                            {% endfor %}
                        </ul>
                    {% endif %}
                </div>
            </div>
        </header>

        {# — La carte d'identité. Des champs, pas de la prose : c'est ce qu'on
             vient vérifier avant d'acheter, et personne ne le lit en phrases. — #}
        {% set facts = [
            { label: 'Hauteur adulte', value: plant.matureHeightCm|plant_size },
            { label: 'Largeur adulte', value: plant.matureWidthCm|plant_size },
            { label: 'Distance de plantation', value: plant.spacingCm|plant_size },
            { label: 'Exposition', value: plant.exposure ? plant.exposure.label : null },
            { label: 'Sol', value: plant.soil },
            { label: 'Rusticité', value: plant.hardinessCelsius ? plant.hardinessCelsius ~ ' °C' : null },
            { label: 'Arrosage', value: plant.watering },
            { label: 'Vigueur', value: plant.vigour },
            { label: 'Plantation', value: plant.plantingSeasons|length ? plant.plantingSeasons|map(s => s.label)|join(', ') : null },
            { label: 'Floraison', value: plant.floweringSeasons|length ? plant.floweringSeasons|map(s => s.label)|join(', ') : null },
            { label: 'Récolte', value: plant.harvestSeasons|length ? plant.harvestSeasons|map(s => s.label)|join(', ') : null },
            { label: 'Conservation', value: plant.conservation },
            { label: 'Pollinisateurs', value: plant.pollinators },
            { label: 'Origine', value: plant.origin }
        ]|filter(fact => fact.value) %}

        {% if facts|length %}
            <section class="border-y border-line bg-surface-tint py-14">
                <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                    <h2 class="font-serif text-2xl text-ink">Sa carte d'identité</h2>
                    <dl class="mt-8 grid gap-x-10 gap-y-px sm:grid-cols-2 lg:grid-cols-3">
                        {% for fact in facts %}
                            <div class="flex justify-between gap-6 border-b border-line py-3.5">
                                <dt class="font-sans text-[0.82rem] text-muted">{{ fact.label }}</dt>
                                <dd class="text-right font-sans text-[0.88rem] font-medium text-ink">{{ fact.value }}</dd>
                            </div>
                        {% endfor %}
                    </dl>
                </div>
            </section>
        {% endif %}

        {# — Le texte. — #}
        <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]">
                {% set chapters = [
                    { id: 'le-fruit', title: 'Le fruit', body: plant.fruitDescription, brut: true },
                    { id: 'ce-que-c-est', title: 'Ce que c’est', body: plant.description },
                    { id: 'la-planter', title: 'La planter', body: plant.plantingAdvice },
                    { id: 'l-entretenir', title: 'L’entretenir', body: plant.careAdvice },
                    { id: 'l-associer', title: 'Avec quoi l’associer', body: plant.companionAdvice },
                    { id: 'en-cuisine', title: 'En cuisine', body: plant.culinaryAdvice }
                ]|filter(chapter => chapter.body) %}

                <div class="max-w-2xl">
                    {# Un sommaire, dès que la fiche a de quoi se perdre dedans.
                       Il tient en liens d'ancre : aucun script, et il fonctionne
                       même quand la page n'a pas fini de charger. #}
                    {% if chapters|length > 2 %}
                        <nav class="mb-14 rounded-xl border border-line bg-surface-tint px-6 py-5" aria-label="Sommaire de la fiche">
                            <p class="eyebrow">Sur cette page</p>
                            <ul class="mt-3 flex flex-wrap gap-x-6 gap-y-2">
                                {% for chapter in chapters %}
                                    <li>
                                        <a href="#{{ chapter.id }}" class="font-sans text-[0.88rem] text-body underline decoration-line-strong underline-offset-4 transition hover:text-brand-ink hover:decoration-brand">{{ chapter.title }}</a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </nav>
                    {% endif %}

                    <div class="space-y-14">
                        {% for chapter in chapters %}
                            <section id="{{ chapter.id }}" class="scroll-mt-28">
                                {% if chapter.brut|default(false) %}
                                    <h2 class="font-serif text-[1.7rem] leading-tight text-ink">{{ chapter.title }}</h2>
                                    <p class="mt-4 font-sans text-[1.02rem] leading-[1.8] text-body">{{ chapter.body }}</p>
                                {% else %}
                                    <div class="prose-jardin [&>h2:first-child]:mt-0">
                                        <h2>{{ chapter.title }}</h2>
                                        {{ chapter.body|rich }}
                                    </div>
                                {% endif %}
                            </section>
                        {% endfor %}
                    </div>
                </div>

                {# La colonne collante : l'appel à venir suit le lecteur jusqu'en
                   bas de page, là où la décision se prend. #}
                <aside class="lg:sticky lg:top-28 lg:self-start">
                    <div class="rounded-2xl border border-line bg-surface-tint p-7">
                        <p class="font-serif text-xl leading-snug text-ink">Une question sur cette plante ?</p>
                        <p class="mt-3 font-sans text-[0.88rem] leading-relaxed text-muted">
                            Le sol, l'exposition, la place dont vous disposez : dites-nous où elle
                            irait, on vous dira si elle s'y plaira.
                        </p>
                        <a href="{{ path('contact', { plante: plant.slug }) }}" class="mt-6 inline-flex w-full items-center justify-center rounded-full bg-clay px-6 py-3 font-sans text-sm font-semibold text-white transition hover:bg-clay-ink">Écrivez-nous</a>
                        {% if site.profile and site.profile.phone %}
                            <p class="mt-4 text-center font-sans text-[0.82rem] text-muted">ou appelez le <a href="tel:{{ site.profile.phoneLink }}" class="font-semibold text-brand-ink">{{ site.profile.phone }}</a></p>
                        {% endif %}
                    </div>

                    {% if advice|length %}
                        <div class="mt-6 rounded-2xl border border-line p-7">
                            <p class="eyebrow">À lire avant de planter</p>
                            <ul class="mt-4 space-y-3">
                                {% for article in advice %}
                                    <li>
                                        <a href="{{ path(article.kind.routeName, { slug: article.slug }) }}" class="font-serif text-[1.02rem] leading-snug text-body hover:text-brand-ink">{{ article.name }}</a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}

                    {% if category and category.plants|length > 1 %}
                        <div class="mt-6 rounded-2xl border border-line p-7">
                            <p class="eyebrow">Dans la même famille</p>
                            <ul class="mt-4 space-y-2.5">
                                {% for sibling in category.plants|filter(p => p.slug != plant.slug and p.published)|slice(0, 6) %}
                                    <li><a href="{{ path('plant_show', { slug: sibling.slug }) }}" class="font-serif text-[1.02rem] text-body hover:text-brand-ink">{{ sibling.name }}</a></li>
                                {% endfor %}
                            </ul>
                            <a href="{{ path('category_show', { slug: category.slug }) }}" class="mt-5 inline-block font-sans text-sm font-semibold text-brand-ink hover:underline underline-offset-4">Voir {{ category.name|lower }} &rarr;</a>
                        </div>
                    {% endif %}
                </aside>
            </div>
        </div>

        {# — Ce qu'on propose à la place, ou en plus. Une fiche épuisée qui ne
             renvoie nulle part renvoie au moteur de recherche. — #}
        {% if alternatives|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">
                    <h2 class="font-serif text-[1.8rem] text-ink">
                        {{ plant.availability.value == 'available' ? 'À planter avec elle' : 'Disponibles en ce moment' }}
                    </h2>
                    <div class="mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
                        {% for other in alternatives %}
                            {{ include('_partials/plant-card.html.twig', { plant: other }) }}
                        {% endfor %}
                    </div>
                </div>
            </section>
        {% endif %}
    </article>

    <div class="py-16">
        {{ include('_partials/cta.html.twig', {
            title: 'Voyez-la de vos yeux',
            text: "Une photo ne dit ni le port, ni le parfum, ni la vigueur d'un plant. Passez, on vous la montre dans l'allée."
        }) }}
    </div>
{% endblock %}