@extends('layouts.app')

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

@section('content')

    <x-page-hero
        eyebrow="À propos"
        :title="data_get($pageContent, 'hero.title', 'NH TRANS, un accompagnement rigoureux pour vos opérations')"
        :subtitle="data_get($pageContent, 'hero.subtitle', 'Découvrez la mission, la vision et les valeurs qui guident notre accompagnement au quotidien.')"
        :breadcrumbs="[['label' => 'À propos']]"
    />

    {{-- Présentation institutionnelle 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="flex flex-col gap-4" data-reveal="right">
                <span class="text-xs font-semibold uppercase tracking-[0.16em] text-brand-primary">Notre mission</span>
                <h2 class="text-2xl font-bold text-brand-ink sm:text-3xl">{{ $about['mission'] }}</h2>
                <p class="text-base leading-relaxed text-brand-muted">
                    {{ $company['positioning'] }}
                </p>
            </div>

            <div data-reveal="left" 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">
                    <rect x="60" y="200" width="90" height="46" rx="4" fill="var(--color-brand-primary)" />
                    <rect x="160" y="170" width="90" height="76" rx="4" fill="var(--color-brand-dark)" />
                    <rect x="260" y="140" width="90" height="106" rx="4" fill="var(--color-brand-gold)" />
                    <path d="M40 260 H360" stroke="var(--color-brand-primary)" stroke-width="2" opacity="0.3" />
                    <path d="M60 130 C 140 90, 260 90, 340 60" fill="none" stroke="var(--color-brand-primary)" stroke-width="2" stroke-dasharray="2 8" opacity="0.5" />
                    <circle cx="60" cy="130" r="5" fill="var(--color-brand-primary)" />
                    <circle cx="340" cy="60" r="5" fill="var(--color-brand-green)" />
                </svg>
            </div>
        </div>
    </section>

    {{-- Vision --}}
    <section class="bg-brand-surface py-16">
        <div class="mx-auto max-w-3xl px-6 text-center" data-reveal="up">
            <span class="text-xs font-semibold uppercase tracking-[0.16em] text-brand-primary">Notre vision</span>
            <p class="mt-4 text-2xl font-bold leading-snug text-brand-ink sm:text-3xl">
                {{ $about['vision'] }}
            </p>
        </div>
    </section>

    {{-- Valeurs --}}
    <section class="mx-auto max-w-6xl px-6 py-16">
        <x-section-heading eyebrow="Nos valeurs" title="Ce qui guide notre accompagnement" align="center" data-reveal="up" />

        <div class="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-5">
            @foreach ($values as $index => $value)
                @php $accent = $value['title'] === 'Sécurité' ? 'green' : 'blue'; @endphp
                <x-value-card icon="check" :title="$value['title']" :description="$value['description']" :accent="$accent" data-reveal="up" style="transition-delay: {{ $index * 60 }}ms" />
            @endforeach
        </div>
    </section>

    {{-- Domaines d'intervention --}}
    <section class="bg-brand-surface py-16">
        <div class="mx-auto max-w-6xl px-6">
            <x-section-heading eyebrow="Domaines d'intervention" title="Nos domaines d'accompagnement" align="center" data-reveal="up" />

            <div class="mt-10 flex flex-wrap justify-center gap-3">
                @foreach ($services as $service)
                    @php
                        $accent = match ($service['slug']) {
                            'transport' => 'gold',
                            'entreposage' => 'green',
                            default => 'blue',
                        };
                        $accentIconClass = match ($accent) {
                            'gold' => 'text-brand-gold-dark',
                            'green' => 'text-brand-green',
                            default => 'text-brand-primary',
                        };
                    @endphp
                    <a
                        href="{{ route('services') }}#{{ $service['slug'] }}"
                        class="inline-flex items-center gap-2 rounded-full border border-brand-border bg-brand-white px-4 py-2 text-sm font-medium text-brand-ink transition-colors hover:border-brand-primary hover:text-brand-primary"
                    >
                        <x-icon :name="$service['icon']" class="h-4 w-4 {{ $accentIconClass }}" />
                        {{ $service['title'] }}
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    {{-- Engagements envers les clients --}}
    <section class="mx-auto max-w-6xl px-6 py-16">
        <x-section-heading eyebrow="Nos engagements" title="Ce que nous nous engageons à vous offrir" align="center" data-reveal="up" />

        <div class="mx-auto mt-10 grid max-w-3xl grid-cols-1 gap-4">
            @foreach ($about['commitments'] as $commitment)
                <div class="flex items-start gap-3 rounded-xl border border-brand-border bg-brand-white p-5" data-reveal="up">
                    <x-icon name="check" class="mt-0.5 h-5 w-5 shrink-0 text-brand-primary" />
                    <span class="text-sm leading-relaxed text-brand-ink">{{ $commitment }}</span>
                </div>
            @endforeach
        </div>
    </section>

    {{-- CTA --}}
    <section class="mx-auto max-w-6xl px-6 pb-16">
        <x-call-to-action
            title="Un projet à nous confier ?"
            description="Parlons de votre opération de douane, transit, transport ou import-export."
            primary-label="Nous contacter"
            :primary-href="route('contact')"
            secondary-label="Voir nos services"
            :secondary-href="route('services')"
        />
    </section>

@endsection
