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

{% set seo = service %}
{% set seo_title = service.resolveTitle %}
{% set is_area = service.kind.value == 'area' %}
{% set trail = [
    { label: 'Accueil', url: path('home') },
    { label: 'Paysagiste', url: path('service_index') },
    { label: service.name, url: path('service_show', { slug: service.slug }) }
] %}

{% block schema %}
    <script type="application/ld+json">
        {{ {
            '@context': 'https://schema.org',
            '@type': 'Service',
            'name': service.heading,
            'description': service.metaDescription,
            'url': url('service_show', { slug: service.slug }),
            'serviceType': is_area ? 'Paysagiste' : service.name,
            'provider': { '@id': url('home') ~ '#pepiniere' },
            'areaServed': is_area and service.city
                ? { '@type': 'City', 'name': service.city, 'postalCode': service.postalCode }
                : { '@type': 'AdministrativeArea', 'name': 'Yonne' }
        }|filter(v => v)|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>
                <p class="eyebrow">{{ is_area ? 'Secteur d\'intervention' : 'Prestation' }}</p>
                <h1 class="mt-4 font-serif text-[2.4rem] leading-[1.1] text-ink sm:text-[2.9rem]">{{ service.heading }}</h1>
                {% if service.intro %}<p class="mt-6 max-w-2xl font-sans text-[1.02rem] leading-relaxed text-body">{{ service.intro }}</p>{% endif %}
                <a href="{{ path('contact', { prestation: service.slug }) }}" class="mt-8 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">Demander un devis</a>
            </div>
            {% if service.image %}
                <div class="overflow-hidden rounded-2xl border border-line">
                    {{ include('_partials/photo.html.twig', { media: service.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="max-w-2xl">
                {% if service.body %}<div class="prose-jardin">{{ service.body|rich }}</div>{% endif %}

                {% if service.localProof %}
                    <section class="mt-14 rounded-2xl border border-line bg-surface-sage p-8">
                        <h2 class="font-serif text-xl text-ink">Un chantier près de chez vous</h2>
                        <div class="prose-jardin mt-4">{{ service.localProof|rich }}</div>
                    </section>
                {% endif %}

                {% if service.inclusions %}
                    <section class="mt-14">
                        <h2 class="font-serif text-2xl text-ink">Ce que comprend la prestation</h2>
                        <div class="prose-jardin mt-4">{{ service.inclusions|rich }}</div>
                    </section>
                {% endif %}
            </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="font-serif text-xl leading-snug text-ink">Un devis, c'est gratuit</p>
                    <p class="mt-3 font-sans text-[0.88rem] leading-relaxed text-muted">
                        On vient voir, on mesure, on vous dit ce que ça coûte et pourquoi. Le prix
                        annoncé est celui de la facture.
                    </p>
                    <a href="{{ path('contact', { prestation: service.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">Décrire mon projet</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 areas|length %}
                    <div class="rounded-2xl border border-line p-7">
                        <p class="eyebrow">Où nous intervenons</p>
                        <ul class="mt-4 space-y-2.5">
                            {% for area in areas %}
                                <li><a href="{{ path('service_show', { slug: area.slug }) }}" class="font-serif text-[1.02rem] text-body hover:text-brand-ink">{{ area.name }}</a></li>
                            {% endfor %}
                        </ul>
                    </div>
                {% endif %}

                {% if service.categories|length %}
                    <div class="rounded-2xl border border-line p-7">
                        <p class="eyebrow">Les plantes concernées</p>
                        <ul class="mt-4 space-y-2.5">
                            {% for category in service.categories %}
                                <li><a href="{{ path('category_show', { slug: category.slug }) }}" class="font-serif text-[1.02rem] text-body hover:text-brand-ink">{{ category.name }}</a></li>
                            {% endfor %}
                        </ul>
                    </div>
                {% endif %}
            </aside>
        </div>
    </div>

    {# — Ce qu'on plante ici, et pourquoi. Sur une page de secteur, c'est ce qui
         la distingue de sa voisine : le calcaire de plateau et l'argile
         poyaudine ne portent pas les mêmes essences. — #}
    {% if service.recommendedPlants|length %}
        <section class="border-t border-line bg-surface-tint py-16">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="max-w-2xl">
                    <p class="eyebrow">{{ is_area ? 'Sur ce secteur' : 'Ce que nous plantons' }}</p>
                    <h2 class="mt-3 font-serif text-[1.9rem] leading-tight text-ink">
                        {{ is_area ? 'Ce qui tient sur ces terres' : 'Les végétaux que nous installons le plus' }}
                    </h2>
                    {% if service.recommendationNote %}
                        <p class="mt-4 font-sans text-[0.98rem] leading-relaxed text-body">{{ service.recommendationNote }}</p>
                    {% endif %}
                </div>
                <div class="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
                    {% for plant in service.recommendedPlants|filter(p => p.published)|slice(0, 8) %}
                        {{ include('_partials/plant-card.html.twig', { plant: plant }) }}
                    {% endfor %}
                </div>
                <a href="{{ path('plant_index') }}" class="mt-8 inline-flex items-center gap-2 font-sans text-sm font-semibold text-brand-ink hover:underline underline-offset-4">
                    Voir tout le catalogue
                    <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>
                </a>
            </div>
        </section>
    {% endif %}

    {% if siblings|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">{{ is_area ? 'Ce que nous faisons sur ce secteur' : 'Nos autres prestations' }}</h2>
                <div class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                    {% for sibling in siblings %}
                        <a href="{{ path('service_show', { slug: sibling.slug }) }}" class="group flex items-center justify-between gap-4 rounded-xl border border-line bg-surface px-6 py-5 transition hover:border-brand">
                            <span class="font-serif text-[1.05rem] text-ink group-hover:text-brand-ink">{{ sibling.name }}</span>
                            <svg class="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>
            </div>
        </section>
    {% endif %}
{% endblock %}