@extends('layouts.app')

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

@section('content')

    {{-- 12.1 Hero principal --}}
    <section class="relative overflow-hidden bg-brand-surface">
        <div class="map-grid pointer-events-none absolute inset-0 opacity-70"></div>

        <div class="relative mx-auto grid max-w-6xl grid-cols-1 items-center gap-12 px-6 py-16 sm:py-20 lg:grid-cols-2 lg:py-28">
            <div class="flex flex-col gap-6" data-reveal="up">
                <span class="w-fit rounded-full bg-brand-primary/10 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-brand-primary">
                    {{ data_get($pageContent, 'hero.eyebrow', $company['tagline']) }}
                </span>

                <h1 class="text-3xl font-bold leading-tight text-brand-ink sm:text-4xl lg:text-[2.75rem] lg:leading-[1.15]">
                    {{ data_get($pageContent, 'hero.title', 'Votre partenaire de confiance pour vos opérations de transit et de transport') }}
                </h1>

                <p class="max-w-xl text-base leading-relaxed text-brand-muted sm:text-lg">
                    {{ data_get($pageContent, 'hero.subtitle', $company['positioning']) }}
                </p>

                <div class="flex flex-col gap-3 sm:flex-row">
                    <a href="{{ data_get($pageContent, 'hero.primary_button_url', route('services')) }}" class="btn btn-primary">{{ data_get($pageContent, 'hero.primary_button_label', 'Découvrir nos services') }}</a>
                    <a href="{{ data_get($pageContent, 'hero.secondary_button_url', route('contact')) }}" class="btn btn-secondary">{{ data_get($pageContent, 'hero.secondary_button_label', 'Nous contacter') }}</a>
                </div>
            </div>

            <div class="relative" data-reveal="left" aria-hidden="true">
                <svg viewBox="0 0 480 380" class="mx-auto w-full max-w-md" role="presentation">
                    <ellipse cx="240" cy="330" rx="190" ry="18" fill="var(--color-brand-primary)" opacity="0.08" />

                    {{-- route pointillée --}}
                    <path d="M40 300 C 140 260, 200 260, 260 220 S 400 140, 440 90" fill="none" stroke="var(--color-brand-primary)" stroke-width="2.5" stroke-dasharray="2 10" stroke-linecap="round" opacity="0.55" />
                    <circle cx="40" cy="300" r="6" fill="var(--color-brand-primary)" />
                    {{-- petit point de passage : touche jaune-vert très limitée --}}
                    <circle cx="345" cy="152" r="3.5" fill="var(--color-brand-yellow)" opacity="0.9" />
                    {{-- destination : accent or --}}
                    <circle cx="440" cy="90" r="6" fill="var(--color-brand-gold)" />

                    {{-- pile de conteneurs --}}
                    <g>
                        <rect x="70" y="230" width="120" height="52" rx="4" fill="var(--color-brand-primary)" />
                        <rect x="80" y="240" width="100" height="4" fill="white" opacity="0.35" />
                        <rect x="80" y="250" width="100" height="4" fill="white" opacity="0.35" />
                        <rect x="80" y="260" width="100" height="4" fill="white" opacity="0.35" />

                        <rect x="95" y="175" width="120" height="52" rx="4" fill="var(--color-brand-dark)" />
                        <rect x="105" y="185" width="100" height="4" fill="white" opacity="0.3" />
                        <rect x="105" y="195" width="100" height="4" fill="white" opacity="0.3" />
                        <rect x="105" y="205" width="100" height="4" fill="white" opacity="0.3" />

                        <rect x="70" y="120" width="120" height="52" rx="4" fill="var(--color-brand-green)" />
                        <rect x="80" y="130" width="100" height="4" fill="white" opacity="0.4" />
                        <rect x="80" y="140" width="100" height="4" fill="white" opacity="0.4" />
                        <rect x="80" y="150" width="100" height="4" fill="white" opacity="0.4" />
                    </g>

                    {{-- silhouette de navire porte-conteneurs --}}
                    <g transform="translate(240,150)">
                        <path d="M0 90 L220 90 L200 130 L20 130 Z" fill="var(--color-brand-dark)" />
                        <rect x="30" y="55" width="30" height="35" fill="var(--color-brand-primary)" />
                        <rect x="65" y="55" width="30" height="35" fill="var(--color-brand-blue-teal)" />
                        <rect x="100" y="55" width="30" height="35" fill="var(--color-brand-primary)" />
                        <rect x="135" y="45" width="24" height="45" fill="var(--color-brand-dark)" />
                        <rect x="140" y="20" width="14" height="25" fill="var(--color-brand-dark)" />
                        <line x1="0" y1="130" x2="220" y2="130" stroke="var(--color-brand-primary)" stroke-width="2" opacity="0.3" />
                    </g>
                </svg>
            </div>
        </div>
    </section>

    {{-- 12.2 Bloc de confiance --}}
    <section class="mx-auto max-w-6xl px-6 py-16">
        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
            @foreach ($valueProps as $index => $prop)
                @php $accent = $prop['icon'] === 'headset' ? 'gold' : 'blue'; @endphp
                <x-value-card :icon="$prop['icon']" :title="$prop['title']" :description="$prop['description']" :accent="$accent" data-reveal="up" style="transition-delay: {{ $index * 60 }}ms" />
            @endforeach
        </div>
    </section>

    {{-- 12.3 Aperçu des services --}}
    <section class="bg-brand-surface py-16">
        <div class="mx-auto max-w-6xl px-6">
            <x-section-heading
                eyebrow="Nos domaines d'intervention"
                :title="data_get($pageContent, 'services_preview.title', 'Des solutions complètes pour la circulation de vos marchandises')"
                :subtitle="data_get($pageContent, 'services_preview.subtitle', 'De la douane à l’accompagnement logistique, NH TRANS vous accompagne à chaque étape.')"
                data-reveal="up"
            />

            <div class="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($services as $index => $service)
                    @php
                        $accent = match ($service['slug']) {
                            'transport' => 'gold',
                            'entreposage' => 'green',
                            default => 'blue',
                        };
                    @endphp
                    <x-service-card
                        :icon="$service['icon']"
                        :title="$service['title']"
                        :description="$service['short_description']"
                        :href="route('services') . '#' . $service['slug']"
                        :accent="$accent"
                        data-reveal="up"
                        style="transition-delay: {{ ($index % 3) * 60 }}ms"
                    />
                @endforeach
            </div>
        </div>
    </section>

    {{-- 12.4 Présentation de l'entreprise (illustrée) --}}
    <section class="mx-auto max-w-6xl px-6 py-16">
        <div class="grid grid-cols-1 items-center gap-12 lg:grid-cols-2">
            <div class="order-2 lg:order-1" data-reveal="right" aria-hidden="true">
                <svg viewBox="0 0 420 320" class="mx-auto w-full max-w-sm rounded-xl border border-brand-border bg-brand-surface p-6">
                    <circle cx="210" cy="160" r="120" fill="none" stroke="var(--color-brand-primary)" stroke-width="1.5" stroke-dasharray="2 8" opacity="0.4" />
                    <circle cx="210" cy="160" r="80" fill="none" stroke="var(--color-brand-blue-teal)" stroke-width="1.5" stroke-dasharray="2 8" opacity="0.55" />
                    <circle cx="210" cy="160" r="6" fill="var(--color-brand-primary)" />
                    <circle cx="120" cy="110" r="5" fill="var(--color-brand-dark)" />
                    <circle cx="300" cy="90" r="5" fill="var(--color-brand-gold)" />
                    <circle cx="290" cy="220" r="5" fill="var(--color-brand-blue-teal)" />
                    <circle cx="130" cy="230" r="5" fill="var(--color-brand-green)" />
                    <path d="M210 160 L120 110 M210 160 L300 90 M210 160 L290 220 M210 160 L130 230" stroke="var(--color-brand-primary)" stroke-width="1.5" opacity="0.5" />
                </svg>
            </div>

            <div class="order-1 flex flex-col gap-4 lg:order-2" data-reveal="left">
                <span class="text-xs font-semibold uppercase tracking-[0.16em] text-brand-primary">Qui sommes-nous</span>
                <h2 class="text-2xl font-bold text-brand-ink sm:text-3xl">
                    {{ data_get($pageContent, 'company.title', 'Un accompagnement pensé pour la circulation de vos marchandises') }}
                </h2>
                <p class="text-base leading-relaxed text-brand-muted">
                    {{ data_get($pageContent, 'company.text', "NH TRANS accompagne les particuliers et les entreprises dans la gestion et la circulation de leurs marchandises, au Cameroun comme à l'international.") }}
                </p>
                <p class="text-base leading-relaxed text-brand-muted">
                    Chaque opération est traitée avec la même exigence, qu'il s'agisse d'un besoin ponctuel ou d'un
                    accompagnement régulier.
                </p>
                <a href="{{ data_get($pageContent, 'company.button_url', route('about')) }}" class="btn-text w-fit font-semibold">{{ data_get($pageContent, 'company.button_label', 'En savoir plus sur NH TRANS') }}</a>
            </div>
        </div>
    </section>

    {{-- 12.5 Méthode d'accompagnement --}}
    <section class="bg-brand-dark py-16">
        <div class="mx-auto max-w-6xl px-6">
            <x-section-heading
                eyebrow="Notre méthode"
                title="Un accompagnement structuré, étape par étape"
                tone="inverse"
                data-reveal="up"
            />

            <div class="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
                @foreach ($processSteps as $step)
                    <div class="relative flex flex-col gap-3 rounded-xl border border-brand-white/15 bg-brand-white/5 p-6" data-reveal="up" style="transition-delay: {{ ($step['order'] - 1) * 80 }}ms">
                        <span class="flex h-9 w-9 items-center justify-center rounded-full bg-brand-primary text-sm font-bold text-brand-white">
                            {{ $step['order'] }}
                        </span>
                        <h3 class="text-base font-semibold text-brand-white">{{ $step['title'] }}</h3>
                        <p class="text-sm leading-relaxed text-brand-white/70">{{ $step['description'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- 12.6 Partenaires --}}
    <section class="mx-auto max-w-6xl px-6 py-16">
        <x-section-heading eyebrow="Ils nous accompagnent" :title="data_get($pageContent, 'partners_section.title', 'Nos partenaires')" align="center" data-reveal="up" />
        <div class="mt-8">
            <x-logo-cloud :items="$partners" empty-label="Logo partenaire à fournir" />
        </div>
    </section>

    {{-- 12.7 Clients --}}
    <section class="bg-brand-surface py-16">
        <div class="mx-auto max-w-6xl px-6">
            <x-section-heading eyebrow="Leur confiance" :title="data_get($pageContent, 'clients_section.title', 'Ils nous font confiance')" align="center" data-reveal="up" />
            <div class="mt-8">
                <x-logo-cloud :items="$clients" empty-label="Logo client à fournir" />
            </div>
        </div>
    </section>

    {{-- 12.8 Appel à l'action final --}}
    <section class="mx-auto max-w-6xl px-6 py-16">
        <x-call-to-action
            :title="data_get($pageContent, 'cta.title', 'Discutons de votre prochaine opération')"
            :description="data_get($pageContent, 'cta.text', 'Contactez NH TRANS pour échanger sur vos besoins en douane, transit, transport ou import-export.')"
            :primary-label="data_get($pageContent, 'cta.button_label', 'Nous contacter')"
            :primary-href="data_get($pageContent, 'cta.button_url', route('contact'))"
            secondary-label="Voir nos services"
            :secondary-href="route('services')"
        />
    </section>

@endsection
