@extends('layouts.app')

@section('title', $meta['title'])
@section('description', $meta['description'])

@section('content')

    <x-page-hero
        eyebrow="Réalisations"
        :title="data_get($pageContent, 'hero.title', 'Nos réalisations')"
        :subtitle="data_get($pageContent, 'hero.subtitle', 'Découvrez quelques opérations, interventions et projets accompagnés par NH TRANS.')"
        :breadcrumbs="[['label' => 'Galerie']]"
    />

    <section class="mx-auto max-w-6xl px-6 py-16">
        <p class="max-w-2xl text-base leading-relaxed text-brand-muted" data-reveal="up">
            {{ data_get($pageContent, 'intro.text', 'Cet espace présente un aperçu des opérations accompagnées par NH TRANS : douane, transit, transport, manutention, entreposage et accompagnement logistique.') }}
        </p>

        @if (count($items) > 0)
            <div class="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($items as $index => $item)
                    <x-gallery-card :item="$item" data-reveal="up" style="transition-delay: {{ ($index % 3) * 60 }}ms" />
                @endforeach
            </div>
        @else
            {{-- État vide institutionnel --}}
            <div class="mt-10 flex flex-col items-center gap-4 rounded-2xl border border-dashed border-brand-border bg-brand-surface px-6 py-16 text-center" data-reveal="up">
                <span class="flex h-14 w-14 items-center justify-center rounded-full bg-brand-primary/10 text-brand-primary">
                    <x-icon name="image-off" class="h-7 w-7" />
                </span>
                <h2 class="text-lg font-semibold text-brand-ink">{{ data_get($pageContent, 'empty_state.title', 'Réalisations à venir') }}</h2>
                <p class="max-w-md text-sm leading-relaxed text-brand-muted">
                    {{ data_get($pageContent, 'empty_state.text', 'Les réalisations de NH TRANS seront prochainement présentées dans cet espace.') }}
                </p>
            </div>
        @endif
    </section>

    <section class="mx-auto max-w-6xl px-6 pb-16">
        <x-call-to-action
            :title="data_get($pageContent, 'cta.title', 'Un projet similaire à nous confier ?')"
            :description="data_get($pageContent, 'cta.text', 'Contactez NH TRANS pour échanger sur votre prochaine opération.')"
            :primary-label="data_get($pageContent, 'cta.button_label', 'Nous contacter')"
            :primary-href="data_get($pageContent, 'cta.button_url', route('contact'))"
        />
    </section>

@endsection
