@php
    $centre = config('site.centre');

    $statuses = [
        'available' => ['label' => 'Box disponibles', 'class' => 'bg-available'],
        'limited' => ['label' => 'Derniers box disponibles', 'class' => 'bg-limited'],
        'unavailable' => ['label' => 'Complet', 'class' => 'bg-unavailable'],
    ];
    $status = $statuses[$centre['status']];

    // Photos : utilisées seulement si le fichier existe réellement dans public/
    $exists = fn (?string $path) => $path && file_exists(public_path($path)) ? $path : null;

    $heroImage = $exists(config('site.hero_image'));
    $centreImage = $exists($centre['image'] ?? null);

    $reviews = config('site.reviews');

    // FAQ structurée : Google peut afficher les questions directement dans ses résultats.
    $faqSchema = [
        '@context' => 'https://schema.org',
        '@type' => 'FAQPage',
        'mainEntity' => collect(config('site.faq'))
            ->map(fn (array $item) => [
                '@type' => 'Question',
                'name' => $item['q'],
                'acceptedAnswer' => [
                    '@type' => 'Answer',
                    // Le balisage attend du texte lisible, pas la mise en forme.
                    'text' => trim(preg_replace('/\s+/', ' ', strip_tags($item['a']))),
                ],
            ])
            ->all(),
    ];
@endphp

<x-layout>

    {{-- ================= HERO ================= --}}
    <section class="relative overflow-hidden bg-ink">
        {{-- Décor : graphite dominant, ponctué de turquoise --}}
        <div class="absolute inset-0" aria-hidden="true">
            <div class="absolute inset-0 bg-[linear-gradient(115deg,#3d3b3b_0%,#555353_55%,#615f5f_100%)]"></div>
            <div class="absolute -top-32 -right-32 h-[540px] w-[540px] rotate-12 bg-brand/25 blur-3xl"></div>
            <div class="absolute inset-x-0 bottom-0 h-1.5 bg-brand"></div>
        </div>

        <div class="container-site relative grid items-center gap-14 py-16 lg:grid-cols-[1.1fr_1fr] lg:py-24">
            <div>
                <p class="mb-5 inline-flex items-center gap-2 border-l-4 border-brand bg-white/10 py-2 pr-4 pl-3 text-xs font-bold tracking-[0.2em] text-white uppercase">
                    Particuliers ou professionnels
                </p>

                <h1 class="text-4xl leading-[1.05] font-black text-white uppercase sm:text-5xl xl:text-6xl">
                    Votre solution<br>
                    de <span class="text-brand-bright">self-stockage</span>
                </h1>

                <p class="mt-6 max-w-xl text-lg leading-relaxed text-white/80">
                    Louez votre box et stockez vos biens en toute sécurité.
                    Accès libre <strong class="font-bold text-white">24h/24 et 7j/7</strong>, sans engagement.
                </p>

                <x-site.google-rating class="mt-7" />

                <div class="mt-9 flex flex-col gap-3 sm:flex-row">
                    <a href="{{ route('box') }}" class="btn-brand">
                        <x-icon name="pin" class="h-5 w-5" />Voir notre centre
                    </a>
                    <a href="{{ route('simulateur') }}" class="btn-outline-white">
                        <x-icon name="calculator" class="h-5 w-5" />Calculer mon volume de stockage
                    </a>
                </div>

            </div>

            <div class="relative hidden lg:block">
                <div class="absolute -top-5 -left-5 h-full w-full bg-brand"></div>
                <div class="relative aspect-4/3 overflow-hidden border-8 border-white/15 shadow-2xl">
                    @if ($heroImage)
                        <img src="{{ asset($heroImage) }}"
                             alt="{{ config('site.hero_image_alt') }}"
                             class="h-full w-full object-cover"
                             loading="eager" fetchpriority="high" decoding="async">
                    @else
                        {{-- Aucune photo déposée dans public/images : repli sur l'illustration --}}
                        <x-site.container-visual tone="ink" />
                    @endif
                </div>
            </div>
        </div>
    </section>

    {{-- ================= SIMULATEUR (bande turquoise) ================= --}}
    <section id="simulateur" class="bg-brand">
        <div class="container-site flex flex-col items-center justify-between gap-6 py-10 text-center md:flex-row md:text-left">
            <div class="flex items-center gap-5">
                <x-icon name="calculator" class="hidden h-14 w-14 shrink-0 text-ink-dark/60 sm:block" stroke-width="1.3" />
                <div>
                    <h2 class="text-2xl leading-tight font-extrabold text-ink-dark uppercase sm:text-3xl">
                        Trouvez le volume de votre box
                    </h2>
                    <p class="mt-1 text-ink-dark/80">Estimez en ligne l’espace dont vous avez besoin, en moins de 2 minutes.</p>
                </div>
            </div>
            <a href="{{ route('simulateur') }}" class="btn-white shrink-0">
                Calculer mon volume de stockage<x-icon name="arrow" class="h-5 w-5" />
            </a>
        </div>
    </section>

    {{-- ================= NOTRE CENTRE ================= --}}
    <section id="centre" class="bg-white py-20">
        <div class="container-site">
            <div class="mb-12 text-center">
                <p class="section-eyebrow">Notre centre et nos tarifs</p>
                <h2 class="section-title section-rule section-rule-center">
                    Votre box de stockage<br class="hidden sm:block"> à {{ $centre['city'] }}
                </h2>
            </div>

            <div class="grid items-stretch gap-px border border-black/10 bg-black/10 lg:grid-cols-2">
                <div class="relative min-h-[320px] overflow-hidden bg-white">
                    @if ($centreImage)
                        <img src="{{ asset($centreImage) }}"
                             alt="{{ $centre['image_alt'] }}"
                             class="absolute inset-0 h-full w-full object-cover"
                             loading="lazy" decoding="async">
                    @else
                        {{-- Aucune photo déposée dans public/images : repli sur l'illustration --}}
                        <x-site.container-visual tone="brand" class="absolute inset-0" />
                    @endif
                    <span class="absolute top-4 left-4 {{ $status['class'] }} px-3 py-1 text-[11px] font-bold tracking-wider text-white uppercase">
                        {{ $status['label'] }}
                    </span>
                </div>

                <div class="flex flex-col justify-center bg-white p-8 lg:p-12">
                    <h3 class="text-2xl font-extrabold text-ink-dark uppercase">{{ $centre['name'] }}</h3>

                    <dl class="mt-7 space-y-5 text-[15px]">
                        <div class="flex gap-4">
                            <x-icon name="pin" class="mt-0.5 h-5 w-5 shrink-0 text-brand-dark" />
                            <div>
                                <dt class="font-bold text-ink-dark">Adresse</dt>
                                <dd class="mt-0.5 text-ink">
                                    {{ $centre['street'] }}<br>
                                    {{ $centre['postal_code'] }} {{ mb_strtoupper($centre['city']) }}
                                    @if (! empty($centre['landmark']))
                                        <span class="mt-1 block text-sm text-ink-light">{{ $centre['landmark'] }}</span>
                                    @endif
                                </dd>
                            </div>
                        </div>

                        <div class="flex gap-4">
                            <x-icon name="clock" class="mt-0.5 h-5 w-5 shrink-0 text-brand-dark" />
                            <div>
                                <dt class="font-bold text-ink-dark">Accès</dt>
                                <dd class="mt-0.5 text-ink">{{ $centre['access'] }}</dd>
                            </div>
                        </div>

                        <div class="flex gap-4">
                            <x-icon name="phone" class="mt-0.5 h-5 w-5 shrink-0 text-brand-dark" />
                            <div>
                                <dt class="font-bold text-ink-dark">Nous joindre</dt>
                                <dd class="mt-0.5 space-y-1 text-ink">
                                    @foreach (config('site.contacts') as $contact)
                                        <span class="block">
                                            {{ $contact['name'] }} —
                                            <a href="tel:{{ $contact['phone_link'] }}" class="font-bold text-brand-dark hover:underline">{{ $contact['phone'] }}</a>
                                        </span>
                                    @endforeach
                                    <span class="block pt-1 text-sm text-ink-light">{{ config('site.visits') }}</span>
                                </dd>
                            </div>
                        </div>
                    </dl>

                    <div class="mt-9">
                        <a href="{{ $centre['map_url'] }}" target="_blank" rel="noopener" class="btn-outline-brand">
                            <x-icon name="pin" class="h-5 w-5" />Plan d’accès
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </section>

    {{-- ================= 3 ÉTAPES ================= --}}
    <section class="bg-ink-tint py-20">
        <div class="container-site">
            <div class="mb-14 text-center">
                <p class="section-eyebrow">En 3 étapes</p>
                <h2 class="section-title section-rule section-rule-center">
                    Réservez, récupérez vos clés<br class="hidden sm:block"> et accédez à votre box
                </h2>
            </div>

            <ol class="grid gap-8 lg:grid-cols-3">
                @foreach (config('site.steps') as $i => $step)
                    <li class="relative border border-black/10 bg-white p-8 pt-12">
                        <span class="absolute -top-6 left-8 flex h-12 w-12 items-center justify-center bg-brand text-xl font-black text-brand-deep">
                            {{ $i + 1 }}
                        </span>
                        <x-icon :name="['box', 'key', 'clock'][$i]" class="mb-4 h-9 w-9 text-brand-dark" stroke-width="1.4" />
                        <h3 class="text-xl font-extrabold text-ink-dark">{{ $step['title'] }}</h3>
                        <p class="mt-3 leading-relaxed text-ink">{!! $step['text'] !!}</p>
                    </li>
                @endforeach
            </ol>
        </div>
    </section>

    {{-- ================= POURQUOI NOUS CHOISIR ================= --}}
    <section id="solutions" class="bg-ink py-20">
        <div class="container-site">
            <div class="mb-14 text-center">
                <p class="mb-2 text-sm font-bold tracking-[0.2em] text-brand-bright uppercase">Professionnels ou particuliers</p>
                <h2 class="text-3xl leading-tight font-extrabold text-white uppercase sm:text-4xl">Pourquoi nous choisir ?</h2>
                <div class="mx-auto mt-5 h-1 w-16 bg-brand"></div>
            </div>

            <div class="grid gap-px border border-white/15 bg-white/15 sm:grid-cols-2 lg:grid-cols-3">
                @foreach (config('site.advantages') as $advantage)
                    @php $tag = empty($advantage['url']) ? 'div' : 'a'; @endphp

                    <{{ $tag }} @if (! empty($advantage['url'])) href="{{ $advantage['url'] }}" target="_blank" rel="noopener" @endif
                        class="group flex flex-col bg-ink p-8 transition-colors duration-200 hover:bg-brand">
                        <x-icon :name="$advantage['icon']"
                            class="mb-5 h-11 w-11 text-brand-bright transition-colors group-hover:text-ink-dark" stroke-width="1.3" />

                        <h3 class="text-lg leading-snug font-extrabold text-white uppercase transition-colors group-hover:text-ink-dark">
                            {{ $advantage['title'] }}
                        </h3>

                        @if (! empty($advantage['note']))
                            <p class="mt-2 text-sm leading-relaxed text-white/70 transition-colors group-hover:text-ink-dark">
                                {{ $advantage['note'] }}
                            </p>
                        @endif
                    </{{ $tag }}>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ================= AVIS GOOGLE ================= --}}
    <section id="avis" class="bg-ink-dark py-20 text-white" data-carousel>
        <div class="container-site">
            <div class="flex flex-col items-start justify-between gap-8 lg:flex-row lg:items-end">
                <div>
                    <p class="mb-2 text-sm font-bold tracking-[0.2em] text-brand-bright uppercase">Ils nous font confiance</p>
                    <h2 class="text-3xl leading-tight font-extrabold uppercase sm:text-4xl">Les 10 derniers avis Google</h2>
                    <div class="mt-5 h-1 w-16 bg-brand"></div>
                </div>

                <div class="flex items-center gap-4">
                    <div class="flex items-center gap-5 border border-white/15 bg-white/5 px-6 py-4">
                        <span class="text-4xl leading-none font-black">{{ number_format($reviews['rating'], 1, ',', ' ') }}</span>
                        <div>
                            <x-site.stars :rating="$reviews['rating']" />
                            <p class="mt-1 text-xs text-white/60">
                                @if ($reviews['count'] > 0)
                                    sur {{ $reviews['count'] }} avis Google
                                @else
                                    Avis Google
                                @endif
                            </p>
                        </div>
                    </div>

                    {{-- Flèches : le rail reste défilable au doigt et à la molette sans elles --}}
                    <div class="hidden gap-2 sm:flex">
                        <button type="button" data-carousel-prev aria-label="Avis précédents"
                                class="flex h-12 w-12 items-center justify-center border border-white/25 text-white transition-colors
                                       hover:border-brand hover:bg-brand hover:text-ink-dark
                                       disabled:pointer-events-none disabled:opacity-25">
                            <x-icon name="chevron" class="h-6 w-6 rotate-90" />
                        </button>
                        <button type="button" data-carousel-next aria-label="Avis suivants"
                                class="flex h-12 w-12 items-center justify-center border border-white/25 text-white transition-colors
                                       hover:border-brand hover:bg-brand hover:text-ink-dark
                                       disabled:pointer-events-none disabled:opacity-25">
                            <x-icon name="chevron" class="h-6 w-6 -rotate-90" />
                        </button>
                    </div>
                </div>
            </div>

            {{-- Rail horizontal : 10 avis sans casser la grille, barre de défilement masquée --}}
            <ul data-carousel-rail
                class="no-scrollbar mt-12 flex snap-x snap-mandatory gap-6 overflow-x-auto scroll-smooth">
                @foreach ($reviews['items'] as $review)
                    <li class="group relative flex w-[290px] shrink-0 snap-start flex-col border border-white/15 bg-white/5 p-7
                               transition-colors duration-200 hover:border-brand/60 hover:bg-white/10 sm:w-[340px]">
                        {{-- Guillemet décoratif --}}
                        <span class="pointer-events-none absolute top-3 right-5 font-serif text-6xl leading-none text-brand/25
                                     transition-colors group-hover:text-brand/40" aria-hidden="true">”</span>

                        <x-site.stars :rating="$review['rating']" />

                        <blockquote class="mt-4 flex-1 leading-relaxed text-white/80">
                            {{ $review['text'] }}
                        </blockquote>

                        <figcaption class="mt-6 flex items-center gap-3 border-t border-white/10 pt-4 text-sm">
                            {{-- Initiale de l'auteur, faute de photo : la saisie manuelle n'en fournit pas --}}
                            <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-brand font-bold text-ink-dark">
                                {{ mb_strtoupper(mb_substr($review['author'], 0, 1)) }}
                            </span>
                            <span>
                                <span class="block font-bold">{{ $review['author'] }}</span>
                                <span class="block text-xs text-white/50">
                                    {{ $review['date'] }}@if (! empty($review['visit'])) · {{ $review['visit'] }}@endif
                                </span>
                            </span>
                        </figcaption>
                    </li>
                @endforeach
            </ul>

            <div class="mt-10 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
                <a href="{{ $reviews['url'] }}" target="_blank" rel="noopener"
                   class="inline-flex items-center gap-2 text-sm font-bold tracking-wider text-brand-bright uppercase hover:underline">
                    Voir tous les avis sur Google<x-icon name="arrow" class="h-4 w-4" />
                </a>
                <p class="text-xs text-white/40 sm:hidden">Faites glisser pour parcourir les avis →</p>
            </div>
        </div>
    </section>

    {{-- ================= FAQ ================= --}}
    <section id="faq" class="bg-white py-20">
        <div class="container-site max-w-4xl">
            <div class="mb-12 text-center">
                <p class="section-eyebrow">Besoin d’aide ?</p>
                <h2 class="section-title section-rule section-rule-center">Questions fréquentes</h2>
            </div>

            <div class="divide-y divide-black/10 border-y border-black/10">
                @foreach (config('site.faq') as $item)
                    <details class="group">
                        <summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-6 text-left">
                            <span class="text-lg font-bold text-ink-dark group-open:text-brand-dark">{{ $item['q'] }}</span>
                            <x-icon name="chevron"
                                class="h-6 w-6 shrink-0 text-brand-dark transition-transform duration-200 group-open:rotate-180" />
                        </summary>
                        <div class="rich pb-7 leading-relaxed text-ink">{!! $item['a'] !!}</div>
                    </details>
                @endforeach
            </div>
        </div>
    </section>


    <script type="application/ld+json">{!! json_encode($faqSchema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}</script>

</x-layout>