@extends('layouts.app')

@section('title', $title)

@section('content')
    <main class="page-wrapper pt-5">
        <section class="container pt-5 mt-5 pb-5">
            <h1 class="display-4 mb-4">{{ $title }}</h1>
            <div class="fs-lg">{!! nl2br(e($content)) !!}</div>
        </section>

        @if (request()->routeIs('local.pages.show'))
            @php
                $outgoing = ($meta['outgoing_links'] ?? []);
                $things = ($meta['things_to_do'] ?? []);
                $localityName = $meta['locality_name'] ?? null;
            @endphp

            @if (!empty($outgoing))
            <!-- Internal links: version liste simple -->
            <section class="container pb-2">
                <h2 class="h6 mb-2 text-muted">Retrouvez-nous aussi ici :</h2>
                <ul class="list-unstyled ms-2">
                    @foreach ($outgoing as $link)
                        @php
                            $slug = $link['slug'] ?? null;
                            $label = $link['locality_name'] ?? ($link['title'] ?? $slug);
                            $url = $slug ? route('local.pages.show', ['slug' => $slug]) : '#';
                        @endphp
                        <li class="mb-1">
                            <span class="me-2">•</span>
                            <a href="{{ $url }}" class="link-body-emphasis text-decoration-underline">{{ $label }}</a>
                        </li>
                    @endforeach
                </ul>
            </section>
            @endif

            @if (!empty($things))
            <!-- Things to do: small carousel -->
            <section class="container py-4">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h2 class="h3 mb-0">À faire{{ $localityName ? ' à ' . $localityName : '' }}</h2>
                    <div class="d-none d-sm-flex gap-2">
                    <button type="button" id="things-prev" class="btn btn-sm btn-primary rounded-circle btn-icon" aria-label="Précédent">
                        <i class="bx bx-chevron-left text-white fs-5"></i>
                    </button>
                    <button type="button" id="things-next" class="btn btn-sm btn-primary rounded-circle btn-icon" aria-label="Suivant">
                        <i class="bx bx-chevron-right text-white fs-5"></i>
                    </button>
                </div>
            </div>
                <div class="swiper" data-swiper-options='{
                    "slidesPerView": 1,
                    "spaceBetween": 16,
                    "loop": false,
                    "navigation": { "prevEl": "#things-prev", "nextEl": "#things-next" },
                    "pagination": { "el": ".swiper-pagination", "clickable": true },
                    "breakpoints": { "576": { "slidesPerView": 2 }, "992": { "slidesPerView": 3 } }
                }'>
                    <div class="swiper-wrapper">
                        @foreach ($things as $item)
                            @php
                                $img = $item['image_url'] ?? null;
                                $name = $item['name'] ?? '';
                                $url = $item['url'] ?? '#';
                                $source = $item['source'] ?? null;
                            @endphp
                            <div class="swiper-slide">
                                <a class="card text-decoration-none h-100" href="{{ $url }}" target="_blank" rel="noopener noreferrer">
                                    @if ($img)
                                        <div class="ratio ratio-16x9 bg-light" style="background-image:url('{{ $img }}'); background-size:cover; background-position:center;"></div>
                                    @endif
                                    <div class="card-body">
                                        <h3 class="h6 mb-1 text-body">{{ $name }}</h3>
                                        @if ($source)
                                            <div class="text-muted small">Source: {{ ucfirst($source) }}</div>
                                        @endif
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>
                    <div class="swiper-pagination position-relative bottom-0 mt-3 d-sm-none"></div>
                </div>
            </section>
            @endif
        @endif
        @if (request()->routeIs('local.pages.show'))
        <section class="container py-5">
            <div class="row align-items-center g-4">
                <div class="col-lg-8">
                    <h2 class="h1 mb-3">Automatisez, connectez, amplifiez vos produits</h2>
                    <p class="fs-lg mb-0">E-commerce, SaaS, ERP et conseil IA. Grâce à l’IA, on livre plus vite et beaucoup moins cher, sans compromis.</p>
                </div>
                <div class="col-lg-4 text-lg-end">
                    <a href="{{ route('contact') }}" class="btn btn-lg btn-primary">Parlez-nous de votre projet</a>
                </div>
            </div>
        </section>
        @endif
    </main>
@endsection