@extends('layouts.site')

@php
    // Une page « builder » contient les classes de grille du thème WordPress d'origine.
    $isBuilder = $type === 'page' && \Illuminate\Support\Str::contains($item->content, ['content-section', 'col-sm-', 'gridContainer']);

    // Tous les articles ont un visuel (à la une, sinon image de marque via display_image).
    // Articles dont le corps embarquait une image externe morte -> illustration promo locale.
    $hasHero = $type === 'post';
    $usesPromo = $type === 'post' && \App\Support\BlogImages::hasExternalImage($item->content);
    $rawHero = $type === 'post'
        ? ($usesPromo ? \App\Support\BlogImages::forSlug($item->slug.'-hero') : $item->display_image)
        : null;
    $heroImg = $rawHero
        ? (\Illuminate\Support\Str::startsWith($rawHero, 'http') ? $rawHero : url($rawHero))
        : null;

    // Titre nettoyé : retire l'emoji de tête (🏙️, etc.) et les espaces - titres modernes, sans pictos démodés.
    $displayTitle = trim(preg_replace('/^[\x{1F000}-\x{1FAFF}\x{2190}-\x{27BF}\x{2B00}-\x{2BFF}\x{FE00}-\x{FE0F}\x{200D}\s]+/u', '', $item->title)) ?: $item->title;

    // Icônes Lucide (trait fin) pour la navigation « Les trucs en + ».
    $tIco = fn($p) => '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">'.$p.'</svg>';
    // Navigation « Les trucs en + » (bas de page) - [icône Lucide, libellé, url]
    $trucs = [
        [$tIco('<path d="M22 12a10 10 0 0 0-20 0Z"/><path d="M12 12v8a2 2 0 0 0 4 0"/><path d="M12 2v1"/>'),'La plage','/plage-du-moulleau'],
        [$tIco('<path d="M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/><path d="M19.38 20A11.6 11.6 0 0 0 21 14l-9-4-9 4c0 2.9.94 5.34 2.81 7.76"/><path d="M19 13V7a2 2 0 0 0-2-2H8.5L10 2"/><path d="M12 10v4"/><path d="M12 2v3"/>'),'La jetée','/jetee-du-moulleau-navette-cap-ferret'],
        [$tIco('<path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"/><path d="M7 2v20"/><path d="M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7"/>'),'Restaurants','/quelques-adresse-de-restaurant'],
        [$tIco('<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/>'),'Boutiques','/quelques-boutiques'],
        [$tIco('<circle cx="18.5" cy="17.5" r="3.5"/><circle cx="5.5" cy="17.5" r="3.5"/><circle cx="15" cy="5" r="1"/><path d="M12 17.5V14l-3-3 4-3 2 3h2"/>'),'Balades à vélo','/les-meilleures-balades-a-velo-autour-du-moulleau'],
        [$tIco('<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>'),'Spots sportifs','/quelques-spots-pour-faire-du-sport-autour-du-moulleau'],
        [$tIco('<path d="M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/><path d="M2 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/><path d="M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/>'),'Activités','/quelques-activites'],
        [$tIco('<path d="M11.5 2.3a.7.7 0 0 1 1 0l2.4 5 5.4.8a.7.7 0 0 1 .4 1.2l-3.9 3.8.9 5.4a.7.7 0 0 1-1 .7L12 17l-4.9 2.6a.7.7 0 0 1-1-.7l.9-5.4-3.9-3.8a.7.7 0 0 1 .4-1.2l5.4-.8z"/>'),'Incontournables','/quelques-lieux-incontournables-a-visiter-autour-du-moulleau'],
        [$tIco('<circle cx="18.5" cy="17.5" r="3.5"/><circle cx="5.5" cy="17.5" r="3.5"/><circle cx="15" cy="5" r="1"/><path d="M12 17.5V14l-3-3 4-3 2 3h2"/>'),'Loueurs de vélos','/quelques-adresse-de-loueurs-de-velos'],
        [$tIco('<path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/>'),'Les villes','/les-villes-aux-alentours'],
    ];
@endphp

@section('title', ($item->seo_title ?: $displayTitle).' - JavaPax')
@section('meta_description', $item->seo_description ?: \Illuminate\Support\Str::limit(trim(strip_tags($item->content)), 155))

{{-- Consolidation du contenu dupliqué : si canonical_url est défini, on pointe
     le canonical vers la page de référence et on passe la page en noindex. --}}
@if(!empty($item->canonical_url))
    @section('canonical', url($item->canonical_url))
    @section('robots', 'noindex, follow')
@endif

@if($type === 'post')
    @push('jsonld')
    @php
        $ld = array_filter([
            '@context' => 'https://schema.org',
            '@type' => 'BlogPosting',
            'headline' => $displayTitle,
            'datePublished' => optional($item->published_at)->toAtomString(),
            'dateModified' => optional($item->updated_at)->toAtomString(),
            'image' => $heroImg,
            'author' => ['@type' => 'Organization', 'name' => 'JavaPax'],
            'publisher' => ['@type' => 'Organization', 'name' => 'JavaPax'],
            'mainEntityOfPage' => url('/'.$item->slug),
        ]);
    @endphp
    <script type="application/ld+json">{!! json_encode($ld, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}</script>
    @endpush
@endif

{{-- Fil d'Ariane structuré (BreadcrumbList) --}}
@push('jsonld')
@php
    $crumbs = [['name' => 'Accueil', 'url' => url('/')]];
    if ($type === 'post') {
        $crumbs[] = ['name' => 'Les trucs en +', 'url' => url('/faq-2')];
    }
    $crumbs[] = ['name' => $displayTitle, 'url' => url('/'.$item->slug)];
    $breadcrumbLd = [
        '@context' => 'https://schema.org',
        '@type' => 'BreadcrumbList',
        'itemListElement' => array_map(fn ($c, $i) => [
            '@type' => 'ListItem',
            'position' => $i + 1,
            'name' => $c['name'],
            'item' => $c['url'],
        ], $crumbs, array_keys($crumbs)),
    ];
@endphp
<script type="application/ld+json">{!! json_encode($breadcrumbLd, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}</script>
@endpush

@if($isBuilder)
    @push('head')
        <link rel="stylesheet" href="{{ asset('css/legacy-theme.css') }}">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    @endpush
@endif

@push('head')
<style>
    /* Guide - icônes Lucide en pastilles colorées (remplacent les emojis) */
    .jvpx-gi{display:inline-flex;align-items:center;justify-content:center;width:1.65em;height:1.65em;border-radius:.55rem;vertical-align:-.42em;margin-right:.2em;flex:none;box-shadow:0 1px 2px rgba(20,56,74,.08);transition:transform .15s ease}
    .jvpx-gi svg{width:1em;height:1em}
    .jvpx-guide .jvpx-gi:hover{transform:translateY(-1px) scale(1.12)}
    .jvpx-gi-rose{background:#ffe4e6;color:#e11d48}
    .jvpx-gi-slate{background:#eef2f3;color:#475569}
    .jvpx-gi-emerald{background:#d1fae5;color:#059669}
    .jvpx-gi-amber{background:#fef3c7;color:#d97706}
    .jvpx-gi-sea{background:#e0f3f8;color:#1f9bbd}
    .jvpx-gi-leaf{background:#dcf3e3;color:#3f8f5b}
    /* Les titres d'adresses (🍴 1. …) ressortent ; séparateur léger entre fiches */
    .jvpx-guide :is(h2,h3,h4){scroll-margin-top:90px;display:flex;align-items:center;gap:.4rem;margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid #eef2f3}
    .jvpx-guide :is(h2,h3,h4):first-of-type{border-top:0;padding-top:0;margin-top:0}
    .jvpx-guide .jvpx-gi-fork,.jvpx-guide h3 .jvpx-gi{width:1.9em;height:1.9em}
    @keyframes jvpxGiPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
    .jvpx-guide .jvpx-gi{animation:jvpxGiPop .4s ease both}
</style>
@endpush

@section('full')
    @if($isBuilder)
        {{-- Page vitrine (page-builder) : on laisse la grille d'origine s'exprimer --}}
        <div class="legacy-page py-6">
            <h1 class="max-w-5xl mx-auto px-4 text-3xl md:text-4xl font-bold mb-4 text-navy">{{ $displayTitle }}</h1>
            <div class="legacy-content">
                @php
                    $builderHtml = str_replace('<img ', '<img loading="lazy" decoding="async" ', $item->content);
                    // Sert du WebP via <picture> quand le fichier .webp existe localement (fallback JPG/PNG sinon).
                    $builderHtml = preg_replace_callback('/<img\b[^>]*\bsrc="([^"]+\.(?:jpe?g|png))"[^>]*>/i', function ($m) {
                        $webp = preg_replace('/\.(jpe?g|png)$/i', '.webp', $m[1]);
                        $path = parse_url($webp, PHP_URL_PATH);
                        if ($path && file_exists(public_path($path))) {
                            // Variante 800 px quand elle existe : ces photos font 1500 px
                            // de large pour un ecran mobile de 412 px, soit trois fois le
                            // poids necessaire. Le navigateur choisit selon la largeur
                            // reelle d'affichage, sans qu'on ait a la deviner.
                            $petit = preg_replace('/\.webp$/i', '-800.webp', $webp);
                            $srcset = (parse_url($petit, PHP_URL_PATH) && file_exists(public_path(parse_url($petit, PHP_URL_PATH))))
                                ? $petit.' 800w, '.$webp.' 1500w'
                                : $webp;
                            $sizes = ' sizes="(max-width: 900px) 100vw, 900px"';

                            return '<picture><source srcset="'.$srcset.'" type="image/webp"'.($srcset === $webp ? '' : $sizes).'>'.$m[0].'</picture>';
                        }
                        return $m[0];
                    }, $builderHtml);
                @endphp
                {!! $builderHtml !!}
            </div>
        </div>
    @else
        {{-- ===== HERO ===== --}}
        <section data-no-reveal class="relative overflow-hidden {{ $hasHero ? 'py-32 md:py-44' : 'py-20 md:py-28' }}">
            @if($hasHero)
                <div class="absolute inset-0 bg-cover bg-center scale-105" style="background-image:url('{{ $heroImg }}')"></div>
                <div class="absolute inset-0 bg-gradient-to-b from-navy/55 via-navy/45 to-navy/85"></div>
            @else
                <div class="absolute inset-0 bg-gradient-to-br from-navy via-sea to-navy"></div>
            @endif

            <div class="relative max-w-4xl mx-auto px-4 text-center text-white">
                {{-- Fil d'Ariane --}}
                <nav class="flex items-center justify-center gap-2 text-xs text-white/80 mb-4">
                    <a href="{{ url('/') }}" class="hover:text-white">Accueil</a>
                    <span>›</span>
                    <a href="{{ url('/faq-2') }}" class="hover:text-white">Les trucs en +</a>
                </nav>
                <h1 class="text-3xl md:text-5xl font-bold drop-shadow-lg leading-tight">{{ $displayTitle }}</h1>
                @if($type === 'post' && $item->published_at)
                    <p class="mt-4 text-sm text-white/75">Mis à jour le {{ $item->published_at->translatedFormat('d F Y') }}</p>
                @endif
            </div>
        </section>

        {{-- ===== CONTENU ===== --}}
        <main class="relative">
            <article class="max-w-3xl mx-auto px-4 -mt-10 md:-mt-14">
                <div class="bg-white rounded-3xl shadow-xl border border-stone-100 p-6 md:p-12">
                    @php
                        $isGuide = $type === 'post' && (
                            \App\Support\GuideFormatter::applies($item->slug)
                            || \Illuminate\Support\Str::startsWith(ltrim($item->title), ['🏙', '🍴', '🛍', '🚴', '🌊', '⭐', '🏖'])
                        );
                        // Remplace les images externes mortes par des illustrations locales (anti « image cassée »).
                        $rendered = \App\Support\BlogImages::rewriteContent($item->content, $item->slug);
                        $rendered = str_replace('<img ', '<img loading="lazy" decoding="async" ', $rendered);
                        if ($isGuide) {
                            $rendered = \App\Support\GuideFormatter::format($rendered);
                        }
                        // Sert du WebP via <picture> quand le .webp existe localement (fallback JPG/PNG sinon).
                        $rendered = preg_replace_callback('/<img\b[^>]*\bsrc="([^"]+\.(?:jpe?g|png))"[^>]*>/i', function ($m) {
                            $webp = preg_replace('/\.(jpe?g|png)$/i', '.webp', $m[1]);
                            $path = parse_url($webp, PHP_URL_PATH);
                            if ($path && file_exists(public_path($path))) {
                                return '<picture><source srcset="'.$webp.'" type="image/webp">'.$m[0].'</picture>';
                            }
                            return $m[0];
                        }, $rendered);

                        // Illustration de la ville (article « 🏙 N. … ») affichée en tête du contenu.
                        // PRIORITÉ : fichier déposé public/img/villes/{slug}.{ext} (convention unique).
                        $villeImg = null;
                        if ($type === 'post' && \Illuminate\Support\Str::startsWith(ltrim($item->title), '🏙')) {
                            foreach (['webp', 'png', 'jpg', 'jpeg'] as $ext) {
                                if (file_exists(public_path("img/villes/{$item->slug}.{$ext}"))) { $villeImg = "/img/villes/{$item->slug}.{$ext}"; break; }
                            }
                            // Sinon : override config (uniquement si vraie illustration raster).
                            if (! $villeImg && preg_match('/(\d+)\s*\./u', $item->title, $mm)) {
                                $vi = config('villes.villes.'.((int) $mm[1]).'.image');
                                if ($vi && preg_match('#/img/villes/([a-z0-9-]+)\.svg$#', $vi, $r)) {
                                    foreach (['webp', 'png', 'jpg', 'jpeg'] as $ext) {
                                        if (file_exists(public_path("img/villes/{$r[1]}.{$ext}"))) { $vi = "/img/villes/{$r[1]}.{$ext}"; break; }
                                    }
                                }
                                if ($vi && ! \Illuminate\Support\Str::endsWith($vi, '.svg') && file_exists(public_path(ltrim($vi, '/')))) {
                                    $villeImg = $vi;
                                }
                            }
                        }
                    @endphp
                    @if($villeImg)
                        <img src="{{ url($villeImg) }}" alt="{{ $item->title }}" loading="lazy"
                             class="block w-full max-w-md mx-auto rounded-2xl shadow-md ring-1 ring-stone-100 mb-8">
                    @endif
                    <div class="prose prose-stone max-w-none
                                prose-headings:text-navy prose-headings:font-bold
                                prose-a:text-sea prose-a:no-underline hover:prose-a:underline
                                prose-img:rounded-2xl prose-img:shadow-md prose-img:mx-auto
                                prose-strong:text-navy prose-li:marker:text-sea
                                {{ $isGuide ? 'jvpx-guide' : '' }}">
                        {!! $rendered !!}
                    </div>
                </div>
            </article>

            {{-- ===== CONTINUER L'EXPLORATION ===== --}}
            <section class="max-w-5xl mx-auto px-4 mt-16">
                <h2 class="text-2xl font-bold text-navy text-center mb-2">Continuez l'exploration</h2>
                <p class="text-center text-stone-500 mb-8">Toutes nos pépites pour profiter du Bassin.</p>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                    @foreach($trucs as [$ico,$lbl,$href])
                        @continue('/'.$item->slug === $href)
                        <a href="{{ url($href) }}"
                           class="group flex items-center gap-3 bg-white rounded-2xl border border-stone-100 shadow-sm hover:shadow-md hover:border-sea/30 px-4 py-3 transition">
                            <span class="shrink-0 w-9 h-9 rounded-xl bg-sea/10 text-sea flex items-center justify-center group-hover:bg-sea group-hover:text-white transition">{!! $ico !!}</span>
                            <span class="font-semibold text-navy text-sm">{{ $lbl }}</span>
                        </a>
                    @endforeach
                </div>
            </section>

            {{-- ===== CTA ===== --}}
            <section class="bg-gradient-to-r from-navy to-sea text-white mt-16">
                <div class="max-w-4xl mx-auto px-4 py-14 text-center">
                    <h2 class="text-2xl md:text-3xl font-bold">Envie de vivre tout ça ?</h2>
                    <p class="mt-3 text-white/90">Réservez votre séjour au Moulleau, le camp de base idéal pour explorer le Bassin.</p>
                    <a href="{{ route('reservation') }}" class="inline-block mt-7 bg-leaf hover:bg-white hover:text-navy px-8 py-3.5 rounded-full font-semibold transition">Réserver mon séjour</a>
                </div>
            </section>
        </main>
    @endif
@endsection