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

{% set profile = site.profile %}
{% set seo_title = 'Pépinière bio dans l\'Yonne — fruitiers anciens et comestibles' %}
{% set seo_description = 'Pépinière naturelle et comestible à La Ferté-Loupière, entre Auxerre et Sens. Fruitiers anciens, aromatiques et plants potagers cultivés sur place, et un paysagiste qui plante ce qu\'il produit.' %}
{% set seo_social_title = 'Jardin de Bohème, pépinière naturelle et comestible' %}

{# Les avis déclarés ici sont recopiés de Google, avec leur auteur : ce sont des
   témoignages vérifiables, jamais une note que le site s'attribuerait lui-même. #}
{% block schema %}
    {% if profile %}
        <script type="application/ld+json">
            {{ {
                '@context': 'https://schema.org',
                '@type': ['GardenStore', 'LocalBusiness'],
                '@id': url('home') ~ '#pepiniere',
                'name': profile.name,
                'description': seo_description,
                'url': url('home'),
                'telephone': profile.phone,
                'email': profile.email,
                'image': heroImage and heroImage.path ? absolute_url(asset(heroImage.path)) : null,
                'priceRange': '€€',
                'currenciesAccepted': 'EUR',
                'address': {
                    '@type': 'PostalAddress',
                    'streetAddress': profile.street,
                    'postalCode': profile.postalCode,
                    'addressLocality': profile.city,
                    'addressRegion': 'Yonne',
                    'addressCountry': 'FR'
                },
                'geo': profile.latitude ? {
                    '@type': 'GeoCoordinates',
                    'latitude': profile.latitude,
                    'longitude': profile.longitude
                } : null,
                'openingHoursSpecification': site.openingSpecification,
                'sameAs': [profile.instagramUrl, profile.facebookUrl, profile.googleBusinessUrl]|filter(v => v)|values,
                'review': testimonials|filter(t => t.rating)|map(t => {
                    '@type': 'Review',
                    'author': { '@type': 'Person', 'name': t.author },
                    'reviewRating': { '@type': 'Rating', 'ratingValue': t.rating, 'bestRating': 5 },
                    'reviewBody': t.quote,
                    'publisher': { '@type': 'Organization', 'name': t.source }
                })|values,
                'founder': profile.ownerName ? { '@type': 'Person', 'name': profile.ownerName } : null,
                'foundingDate': '2021-12',
                'slogan': profile.tagline,
                'logo': absolute_url(asset('images/logo.png')),
                'paymentAccepted': 'Espèces, carte bancaire, chèque',
                'knowsAbout': [
                    'Fruitiers de variétés anciennes',
                    'Greffe et élevage de scions',
                    'Plantation à racines nues',
                    'Haies champêtres et bocagères',
                    'Plantes aromatiques et comestibles certifiées en agriculture biologique',
                    'Création et entretien de jardins dans l\'Yonne'
                ],
                'hasCredential': profile.organicCertifier ? {
                    '@type': 'EducationalOccupationalCredential',
                    'credentialCategory': 'Certification en agriculture biologique',
                    'recognizedBy': { '@type': 'Organization', 'name': profile.organicCertifier },
                    'identifier': profile.organicCertificateNumber
                } : null,
                'hasOfferCatalog': {
                    '@type': 'OfferCatalog',
                    'name': 'Ce que nous cultivons',
                    'itemListElement': allCategories|map(category => {
                        '@type': 'OfferCatalog',
                        'name': category.name,
                        'url': url('category_show', { slug: category.slug })
                    })|values
                },
                'areaServed': [
                    { '@type': 'AdministrativeArea', 'name': 'Yonne' },
                    { '@type': 'Place', 'name': 'Puisaye' },
                    { '@type': 'City', 'name': 'Auxerre' },
                    { '@type': 'City', 'name': 'Joigny' },
                    { '@type': 'City', 'name': 'Sens' }
                ]
            }|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>
    {% endif %}
{% endblock %}

{% block body %}
    {# — L'ouverture. Texte à gauche sur le crème, photo à droite qui file
         jusqu'au bord de l'écran, comme dans la maquette. — #}
    <section class="relative overflow-hidden border-b border-line">
        <div class="mx-auto grid max-w-[1600px] lg:grid-cols-[minmax(0,44%)_minmax(0,56%)]">
            <div class="relative flex flex-col justify-center px-6 py-16 sm:px-12 lg:py-28 lg:pl-[max(2rem,calc((100vw-1536px)/2+3rem))]">
                <svg class="pointer-events-none absolute -left-10 bottom-0 h-96 w-72 text-brand/10" viewBox="0 0 120 300" fill="none" stroke="currentColor" stroke-width="1" aria-hidden="true">
                    <path d="M60 300V40"/>
                    <path d="M60 210c-26 0-42-14-42-38 24 0 42 12 42 38ZM60 210c26 0 42-14 42-38-24 0-42 12-42 38Z"/>
                    <path d="M60 150c-22 0-36-12-36-32 20 0 36 10 36 32ZM60 150c22 0 36-12 36-32-20 0-36 10-36 32Z"/>
                    <path d="M60 96c-18 0-30-10-30-27 17 0 30 8 30 27ZM60 96c18 0 30-10 30-27-17 0-30 8-30 27Z"/>
                </svg>

                <p class="eyebrow relative">Pépinière naturelle &amp; comestible</p>
                <h1 class="relative mt-5 font-serif text-[2.75rem] leading-[1.06] tracking-[-0.015em] text-ink sm:text-6xl">
                    Cultivons<br>la beauté du vivant
                </h1>
                <p class="relative mt-6 max-w-md font-sans text-[1.02rem] leading-relaxed text-body">
                    Fruitiers anciens, aromatiques, plants potagers et arbustes de haie,
                    semés et élevés ici, aux portes de la Puisaye.
                </p>
                <div class="relative mt-9 flex flex-wrap gap-3">
                    <a href="{{ path('plant_index') }}" 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">Découvrir nos plantes</a>
                    <a href="{{ path('page_show', { slug: 'venir-nous-voir' }) }}" 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">Visiter la pépinière</a>
                </div>
                {% if site.openingSummary %}
                    <p class="relative mt-8 font-sans text-[0.82rem] text-muted">Ouvert {{ site.openingSummary }}.</p>
                {% endif %}
            </div>

            <div class="relative min-h-[22rem] lg:min-h-[36rem]">
                {{ include('_partials/photo.html.twig', {
                    media: heroImage,
                    filter: 'hero',
                    ratio: '3 / 2',
                    loading: 'eager',
                    sizes: '(min-width: 1024px) 56vw, 100vw',
                    class: 'absolute inset-0 h-full w-full object-cover'
                }) }}
                <div class="absolute inset-y-0 left-0 w-24 bg-gradient-to-r from-surface to-transparent" aria-hidden="true"></div>

                <div class="absolute bottom-8 right-6 hidden max-w-[17rem] rounded-xl border border-line bg-surface/95 p-6 text-center shadow-xl shadow-ink/10 backdrop-blur sm:block lg:right-10">
                    <svg class="mx-auto h-7 w-7 text-brand" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3" aria-hidden="true"><path d="M12 21c0-6 3-9 8-9 0 5-3 9-8 9Z"/><path d="M12 21c0-4-2-6-5-6 0 3.5 2 6 5 6Z"/><path d="M12 21v-6"/></svg>
                    <p class="mt-3 font-serif text-[1.05rem] leading-snug text-ink">Culture sans produits de synthèse</p>
                    <p class="mt-2 font-sans text-[0.8rem] leading-relaxed text-muted">
                        {% if profile and profile.organicCertifier %}
                            Nos plantes comestibles sont certifiées {{ profile.organicCertifier }}.
                        {% else %}
                            Semés et greffés dans nos rangs.
                        {% endif %}
                    </p>
                </div>
            </div>
        </div>
    </section>

    {# — La bande des engagements. Quatre colonnes séparées d'un filet, comme
         dans la maquette. — #}
    <section class="reveal border-b border-line bg-surface" aria-label="Nos engagements">
        <div class="mx-auto grid max-w-7xl divide-y divide-line px-4 sm:px-6 md:grid-cols-2 md:divide-x md:divide-y-0 lg:grid-cols-4 lg:px-8">
            {% set pledges = [
                { title: 'Plants élevés sur place', note: 'Semés et greffés ici', path: 'M4 20h16M12 20V8M12 12c-4 0-6.5-2.2-6.5-6 3.6 0 6.5 2 6.5 6ZM12 12c4 0 6.5-2.2 6.5-6-3.6 0-6.5 2-6.5 6Z' },
                { title: 'Culture sans produits de synthèse', note: 'Comestibles certifiés bio', path: 'M3 13c4-6 10-8 18-8-1 9-7 13-13 12M3 20c1-4 3-6 6-7.5' },
                { title: 'Le conseil avant la vente', note: 'On demande où ça ira', path: 'M12 21s-7-4.4-7-9.5A4.5 4.5 0 0 1 12 8a4.5 4.5 0 0 1 7 3.5C19 16.6 12 21 12 21Z' },
                { title: 'Des variétés qui tiennent ici', note: 'Éprouvées sous notre climat', path: 'M12 21V9M12 9c-3.5 0-5.5-2-5.5-5.2 3.2 0 5.5 1.8 5.5 5.2ZM12 9c3.5 0 5.5-2 5.5-5.2-3.2 0-5.5 1.8-5.5 5.2ZM7 21h10' }
            ] %}
            {% for pledge in pledges %}
                <div class="flex items-start gap-4 px-2 py-7 md:px-7">
                    <svg class="mt-0.5 h-7 w-7 shrink-0 text-brand" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" aria-hidden="true"><path d="{{ pledge.path }}"/></svg>
                    <div>
                        <p class="font-serif text-[1.02rem] leading-snug text-ink">{{ pledge.title }}</p>
                        <p class="mt-1 font-sans text-[0.78rem] text-clay-ink">{{ pledge.note }}</p>
                    </div>
                </div>
            {% endfor %}
        </div>
    </section>

    {# — Les familles, et le mot sur la pépinière, côte à côte. — #}
    <section class="reveal mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8">
        <div class="grid gap-12 lg:grid-cols-[0.8fr_2.1fr_0.85fr] lg:gap-10">
            <div class="lg:pt-6">
                <p class="eyebrow">Notre sélection</p>
                <h2 class="mt-4 font-serif text-[2rem] leading-tight text-ink">Des plantes pour tous les jardins</h2>
                <a href="{{ path('plant_index') }}" class="mt-6 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>

            <div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
                {% for category in featuredCategories %}
                    <article class="group relative flex h-full flex-col overflow-hidden rounded-lg border border-line bg-surface-tint">
                        {{ include('_partials/photo.html.twig', { media: category.image, filter: 'card', ratio: '16 / 10', sizes: '(min-width: 1024px) 18vw, 45vw', class: 'h-full w-full object-cover transition duration-500 group-hover:scale-[1.03]' }) }}
                        <div class="flex flex-1 flex-col p-4">
                            <h3 class="line-clamp-2 font-serif text-[1.02rem] leading-tight text-ink">
                                <a href="{{ path('category_show', { slug: category.slug }) }}" class="after:absolute after:inset-0">{{ category.name }}</a>
                            </h3>
                            <span class="mt-auto inline-flex items-center gap-1.5 pt-3 font-sans text-[0.72rem] text-muted">
                                Voir la sélection
                                <svg class="h-3 w-3" 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>
                    </article>
                {% endfor %}
            </div>

            <div class="lg:pt-6">
                <p class="eyebrow">Notre pépinière</p>
                <h2 class="mt-4 font-serif text-[1.9rem] leading-tight text-ink">Une conversation avant une vente</h2>
                <p class="mt-5 font-sans text-[0.92rem] leading-relaxed text-body">
                    Les plants sont semés et greffés ici, élevés en pleine terre et sous serre
                    froide. On vous demande d'abord où vous habitez et ce que donne votre terre
                    après trois jours de pluie. Les variétés viennent après.
                </p>
                <a href="{{ path('nursery_index') }}" class="mt-6 inline-flex items-center gap-2 font-sans text-sm font-semibold text-brand-ink hover:underline underline-offset-4">
                    En savoir plus sur notre histoire
                    <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>
        </div>
    </section>

    {# — Ce qui se plante en ce moment. La section change quatre fois par an
         sans que personne y touche. — #}
    {% if seasonalPlants|length %}
        <section class="reveal border-y border-line bg-surface-tint py-20">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="flex flex-wrap items-end justify-between gap-6">
                    <div>
                        <p class="eyebrow">{{ season.preposition|capitalize }}</p>
                        <h2 class="mt-3 font-serif text-[2rem] leading-tight text-ink">Ce qui se plante en ce moment</h2>
                    </div>
                    <a href="{{ path('plant_index') }}" class="font-sans text-sm font-semibold text-brand-ink hover:underline underline-offset-4">Tout le catalogue &rarr;</a>
                </div>
                <div class="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
                    {% for plant in seasonalPlants|slice(0, 4) %}
                        {{ include('_partials/plant-card.html.twig') }}
                    {% endfor %}
                </div>
            </div>
        </section>
    {% endif %}

    {# — Le paysage. Deux activités, et c'est la seconde qu'on oublie de vendre. — #}
    {% if services|length %}
        <section class="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8">
            <div class="grid gap-12 lg:grid-cols-[0.9fr_1.1fr]">
                <div>
                    <p class="eyebrow">Paysagiste</p>
                    <h2 class="mt-4 font-serif text-[2rem] leading-tight text-ink">Nous plantons aussi ce que nous produisons</h2>
                    <p class="mt-5 max-w-md font-sans text-[0.95rem] leading-relaxed text-body">
                        Un paysagiste achète ses végétaux à un grossiste. Nous les élevons. Quand nous
                        proposons une essence pour votre terrain, nous l'avons déjà vue passer
                        cinq hivers dans nos rangs.
                    </p>
                    <a href="{{ path('service_index') }}" class="mt-7 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">Nos prestations</a>
                </div>
                <ul class="grid gap-x-8 gap-y-px sm:grid-cols-2">
                    {% for service in services|slice(0, 8) %}
                        <li class="border-b border-line">
                            <a href="{{ path('service_show', { slug: service.slug }) }}" class="flex items-center justify-between gap-4 py-4 font-serif text-[1.05rem] text-ink transition hover:text-brand-ink">
                                {{ service.name }}
                                <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>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </section>
    {% endif %}

    {# — Les conseils de la saison. — #}
    {% if advice|length %}
        <section class="reveal border-t border-line bg-surface-sage py-20">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="flex flex-wrap items-end justify-between gap-6">
                    <div>
                        <p class="eyebrow">Conseils</p>
                        <h2 class="mt-3 font-serif text-[2rem] leading-tight text-ink">Ce qu'il y a à faire {{ season.preposition }}</h2>
                    </div>
                    <a href="{{ path('advice_index') }}" class="font-sans text-sm font-semibold text-brand-ink hover:underline underline-offset-4">Tous nos conseils &rarr;</a>
                </div>
                <div class="mt-10 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 %}

    {# — La vie de la pépinière. La première actualité prend toute la place :
         une grille de vignettes égales ne donne envie de cliquer sur aucune. — #}
    {% if news|length %}
        <section class="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8">
            <div class="flex flex-wrap items-end justify-between gap-6">
                <div>
                    <p class="eyebrow">La vie de la pépinière</p>
                    <h2 class="mt-3 font-serif text-[2rem] leading-tight text-ink">Ce qui se passe en ce moment</h2>
                </div>
                <a href="{{ path('news_index') }}" class="font-sans text-sm font-semibold text-brand-ink hover:underline underline-offset-4">Toutes les actualités &rarr;</a>
            </div>

            <div class="mt-10 grid gap-6 lg:grid-cols-[1.4fr_1fr]">
                {% set headline = news|first %}
                <article class="group relative overflow-hidden rounded-2xl border border-line">
                    <div class="absolute inset-0">
                        {{ include('_partials/photo.html.twig', { media: headline.image, filter: 'hero', ratio: '16 / 10', sizes: '(min-width: 1024px) 55vw, 100vw', class: 'h-full w-full object-cover transition duration-700 group-hover:scale-[1.03]' }) }}
                        <div class="absolute inset-0 bg-gradient-to-t from-ink/85 via-ink/40 to-transparent"></div>
                    </div>
                    <div class="relative flex min-h-[22rem] flex-col justify-end p-8">
                        {% if headline.publishedAt %}<p class="font-sans text-[0.75rem] font-semibold uppercase tracking-[0.18em] text-clay-soft">{{ headline.publishedAt|format_date(locale='fr', dateFormat='long') }}</p>{% endif %}
                        <h3 class="mt-3 max-w-lg font-serif text-[1.8rem] leading-tight text-white">
                            <a href="{{ path('news_show', { slug: headline.slug }) }}" class="after:absolute after:inset-0">{{ headline.name }}</a>
                        </h3>
                        {% if headline.intro %}<p class="mt-3 max-w-md font-sans text-[0.92rem] leading-relaxed text-white/85">{{ headline.intro|u.truncate(160, '…', false) }}</p>{% endif %}
                    </div>
                </article>

                <div class="flex flex-col gap-6">
                    {% for article in news|slice(1, 3) %}
                        <article class="group relative flex flex-1 gap-5 overflow-hidden rounded-xl border border-line bg-surface-tint p-5">
                            <div class="w-28 shrink-0 overflow-hidden rounded-lg">
                                {{ include('_partials/photo.html.twig', { media: article.image, filter: 'card', ratio: '1 / 1', sizes: '120px' }) }}
                            </div>
                            <div class="flex flex-1 flex-col justify-center">
                                {% if article.publishedAt %}<p class="font-sans text-[0.72rem] text-subtle">{{ article.publishedAt|format_date(locale='fr', dateFormat='long') }}</p>{% endif %}
                                <h3 class="mt-1 font-serif text-[1.05rem] leading-snug text-ink">
                                    <a href="{{ path('news_show', { slug: article.slug }) }}" class="after:absolute after:inset-0">{{ article.name }}</a>
                                </h3>
                            </div>
                        </article>
                    {% endfor %}
                </div>
            </div>
        </section>
    {% endif %}

    {# — Les avis, recopiés de là où ils ont été laissés. — #}
    {% if testimonials|length %}
        <section class="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8">
            <p class="eyebrow text-center">Ce qu'on nous dit</p>
            <div class="mt-10 grid gap-6 md:grid-cols-3">
                {% for testimonial in testimonials %}
                    <figure class="flex flex-col rounded-xl border border-line bg-surface-tint p-7">
                        <blockquote class="flex-1 font-serif text-[1.05rem] 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 %}
                            <span class="text-subtle"> — {{ testimonial.source }}</span>
                        </figcaption>
                    </figure>
                {% endfor %}
            </div>
        </section>
    {% endif %}

    {{ include('_partials/cta.html.twig', {
        title: 'Le meilleur conseil se donne sur place',
        text: "Venez avec la photo de votre terrain, une mesure et une idée. On s'occupe du reste, allée par allée."
    }) }}
{% endblock %}