@extends('layouts.app')

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

@section('content')

    <x-page-hero
        eyebrow="Nos services"
        :title="data_get($pageContent, 'hero.title', 'Des solutions complètes pour vos opérations logistiques')"
        :subtitle="data_get($pageContent, 'hero.subtitle', 'Douane, transit, transport, import-export, manutention, entreposage et accompagnement logistique : découvrez comment NH TRANS vous accompagne.')"
        :breadcrumbs="[['label' => 'Services']]"
    />

    <div class="mx-auto flex max-w-6xl flex-col gap-20 px-6 py-16">
        @foreach ($services as $index => $service)
            @php
                $imageOnRight = ($service['image_position'] ?? 'left') === 'right';
                $accent = match ($service['slug']) {
                    'transport' => 'gold',
                    'entreposage' => 'green',
                    default => 'blue',
                };
                $accentBadgeClasses = match ($accent) {
                    'gold' => 'bg-brand-gold/15 text-brand-gold-dark',
                    'green' => 'bg-brand-green/15 text-brand-green',
                    default => 'bg-brand-primary/10 text-brand-primary',
                };
                $accentTextClass = match ($accent) {
                    'gold' => 'text-brand-gold-dark',
                    'green' => 'text-brand-green',
                    default => 'text-brand-primary',
                };
            @endphp

            <section id="{{ $service['slug'] }}" class="scroll-mt-24">
                <div class="grid grid-cols-1 items-center gap-10 lg:grid-cols-2">
                    <div class="{{ $imageOnRight ? 'lg:order-2' : 'lg:order-1' }}" data-reveal="{{ $imageOnRight ? 'left' : 'right' }}">
                        <x-responsive-image
                            :src="$service['image']"
                            :alt="$service['image_alt']"
                            :caption="$service['image_caption'] ?? null"
                            class="aspect-[4/3] w-full"
                        />
                    </div>

                    <div class="flex flex-col gap-4 {{ $imageOnRight ? 'lg:order-1' : 'lg:order-2' }}" data-reveal="{{ $imageOnRight ? 'right' : 'left' }}">
                        <span class="flex h-12 w-12 items-center justify-center rounded-lg {{ $accentBadgeClasses }}">
                            <x-icon :name="$service['icon']" class="h-6 w-6" />
                        </span>

                        <h2 class="text-2xl font-bold text-brand-ink sm:text-3xl">{{ $service['title'] }}</h2>

                        <p class="text-base leading-relaxed text-brand-muted">{{ $service['intro'] }}</p>
                        <p class="text-base leading-relaxed text-brand-muted">{{ $service['description'] }}</p>

                        <ul class="mt-2 flex flex-col gap-2">
                            @foreach ($service['focus_areas'] as $area)
                                <li class="flex items-start gap-2.5 text-sm text-brand-ink">
                                    <x-icon name="check" class="mt-0.5 h-4 w-4 shrink-0 {{ $accentTextClass }}" />
                                    {{ $area }}
                                </li>
                            @endforeach
                        </ul>

                        <a href="{{ route('contact') }}" class="btn btn-secondary mt-2 w-fit">
                            Nous contacter à propos de ce service
                        </a>
                    </div>
                </div>

                @if (!$loop->last)
                    <div class="route-divider mt-20"></div>
                @endif
            </section>
        @endforeach
    </div>

    {{-- Solutions sur mesure --}}
    <section class="bg-brand-surface py-16">
        <div class="mx-auto max-w-6xl px-6">
            <x-section-heading
                eyebrow="Sur mesure"
                :title="data_get($pageContent, 'tailored.title', 'Des solutions adaptées, pour les particuliers comme pour les entreprises')"
                :subtitle="data_get($pageContent, 'tailored.subtitle', 'Chaque opération est différente : NH TRANS adapte son accompagnement à la nature de vos marchandises et à vos contraintes.')"
                align="center"
                data-reveal="up"
            />

            <div class="mx-auto mt-10 grid max-w-3xl grid-cols-1 gap-5 sm:grid-cols-2">
                <div class="flex flex-col gap-3 rounded-xl border border-brand-border bg-brand-white p-6" data-reveal="up">
                    <span class="flex h-11 w-11 items-center justify-center rounded-full bg-brand-primary/10 text-brand-primary">
                        <x-icon name="headset" class="h-5 w-5" />
                    </span>
                    <h3 class="text-base font-semibold text-brand-ink">Pour les particuliers</h3>
                    <p class="text-sm leading-relaxed text-brand-muted">
                        Un accompagnement personnalisé pour vos opérations ponctuelles de douane, transit ou transport.
                    </p>
                </div>

                <div class="flex flex-col gap-3 rounded-xl border border-brand-border bg-brand-white p-6" data-reveal="up" style="transition-delay: 80ms">
                    <span class="flex h-11 w-11 items-center justify-center rounded-full bg-brand-gold/15 text-brand-gold-dark">
                        <x-icon name="handshake" class="h-5 w-5" />
                    </span>
                    <h3 class="text-base font-semibold text-brand-ink">Pour les entreprises</h3>
                    <p class="text-sm leading-relaxed text-brand-muted">
                        Une coordination rigoureuse pour vos opérations régulières d'import-export et de logistique.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <section class="mx-auto max-w-6xl px-6 py-16">
        <x-call-to-action
            :title="data_get($pageContent, 'cta.title', 'Une opération à nous confier ?')"
            :description="data_get($pageContent, 'cta.text', 'Contactez notre équipe pour échanger sur vos besoins spécifiques.')"
            :primary-label="data_get($pageContent, 'cta.button_label', 'Nous contacter')"
            :primary-href="data_get($pageContent, 'cta.button_url', route('contact'))"
        />
    </section>

@endsection
