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

{% set seo_title = 'Paysagiste dans l\'Yonne — création, plantation, entretien de jardin' %}
{% set seo_description = 'Un paysagiste qui produit lui-même ses végétaux, en Puisaye et dans la vallée de l\'Yonne. Création de jardin, verger, haie champêtre, entretien et taille.' %}

{% block schema %}
    <script type="application/ld+json">
        {{ {
            '@context': 'https://schema.org',
            '@type': 'Service',
            'name': 'Création et entretien de jardin',
            'serviceType': 'Paysagiste',
            'provider': { '@id': url('home') ~ '#pepiniere' },
            'areaServed': areas|map(area => { '@type': 'Place', 'name': area.city ?: area.name })|values,
            'hasOfferCatalog': {
                '@type': 'OfferCatalog',
                'name': 'Nos prestations',
                'itemListElement': prestations|map(service => {
                    '@type': 'Offer',
                    'itemOffered': { '@type': 'Service', 'name': service.name, 'url': url('service_show', { slug: service.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 py-16">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <p class="eyebrow">Paysagiste</p>
            <h1 class="mt-4 max-w-3xl font-serif text-[2.6rem] leading-[1.08] text-ink sm:text-5xl">Nous plantons ce que nous produisons</h1>
            <p class="mt-6 max-w-2xl font-sans text-[1.02rem] leading-relaxed text-body">
                Un paysagiste commande ses végétaux chez un grossiste. Les nôtres sortent de nos
                rangs. Quand nous plantons chez vous, nous savons d'où vient chaque sujet, sous
                quel climat il a poussé et ce qu'il donnera dans dix ans.
            </p>
            <a href="{{ path('contact') }}" 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>
    </header>

    <section class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
        <h2 class="font-serif text-[1.9rem] text-ink">Ce que nous faisons</h2>
        <div class="mt-8 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {% for service in prestations %}
                <article class="group relative flex h-full flex-col overflow-hidden rounded-xl border border-line bg-surface transition hover:border-brand/40 hover:shadow-lg hover:shadow-ink/5">
                    {{ include('_partials/photo.html.twig', { media: service.image, filter: 'card', ratio: '16 / 10', sizes: '(min-width: 1024px) 33vw, 100vw' }) }}
                    <div class="flex flex-1 flex-col p-6">
                        <h3 class="line-clamp-2 font-serif text-xl leading-snug text-ink">
                            <a href="{{ path('service_show', { slug: service.slug }) }}" class="after:absolute after:inset-0">{{ service.name }}</a>
                        </h3>
                        {% if service.intro %}<p class="mt-3 line-clamp-3 font-sans text-[0.88rem] leading-relaxed text-muted">{{ service.intro }}</p>{% endif %}
                    </div>
                </article>
            {% endfor %}
        </div>
    </section>

    {% if areas|length %}
        <section class="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">Où nous intervenons</h2>
                <p class="mt-4 max-w-2xl font-sans text-[0.95rem] leading-relaxed text-body">
                    Nous nous déplaçons dans un rayon d'environ une heure autour de La
                    Ferté-Loupière. Au-delà, cela dépend du chantier : demandez.
                </p>
                <div class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                    {% for area in areas %}
                        <a href="{{ path('service_show', { slug: area.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-lg text-ink group-hover:text-brand-ink">{{ area.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 %}

    {% if testimonials|length %}
        <section class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
            <div class="grid gap-6 md:grid-cols-3">
                {% 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.02rem] 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', {
            title: 'Parlons de votre terrain',
            text: "Une visite sur place, quelques mesures, et une idée précise de ce qui est possible chez vous.",
            primary: { label: 'Demander un devis', route: 'contact', params: {} },
            secondary: { label: 'Voir nos plantes', route: 'plant_index', params: {} }
        }) }}
    </div>
{% endblock %}