@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']);

    $hasHero = $type === 'post' && ! empty($item->featured_image);
    $heroImg = $hasHero
        ? (\Illuminate\Support\Str::startsWith($item->featured_image, 'http') ? $item->featured_image : url($item->featured_image))
        : null;

    // Navigation « Les trucs en + » (bas de page)
    $trucs = [
        ['🍴','Restaurants','/quelques-adresse-de-restaurant'],
        ['🛍️','Boutiques','/quelques-boutiques'],
        ['🚴','Balades à vélo','/🚴♂️-les-meilleures-balades-a-velo-autour-du-moulleau'],
        ['📍','Spots sportifs','/quelques-spots-pour-faire-du-sport-autour-du-moulleau'],
        ['🌊','Activités','/quelques-activites'],
        ['⭐','Incontournables','/quelques-lieux-incontournables-a-visiter-autour-du-moulleau'],
        ['🚲','Loueurs de vélos','/quelques-adresse-de-loueurs-de-velos'],
        ['🏙️','Les villes','/les-villes-aux-alentours'],
    ];
@endphp

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

@if($type === 'post')
    @push('jsonld')
    @php
        $ld = array_filter([
            '@context' => 'https://schema.org',
            '@type' => 'BlogPosting',
            'headline' => $item->title,
            '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

@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

@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">{{ $item->title }}</h1>
            <div class="legacy-content">
                {!! str_replace('<img ', '<img loading="lazy" decoding="async" ', $item->content) !!}
            </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">{{ $item->title }}</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">
                    <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">
                        {!! str_replace('<img ', '<img loading="lazy" decoding="async" ', $item->content) !!}
                    </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="text-2xl group-hover:scale-110 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