@extends('layouts.app', ['locale' => $locale])

@section('title', __('messages.about.title') . ' — Victory Tours')

@section('content')
@php
    $waNumber = preg_replace('/[^0-9]/', '', $settings['whatsapp_number'] ?? '21621552906');
@endphp
<section class="bg-gradient-to-br from-[#0F1E45] via-[#152858] to-[#1B3A8C] pt-6 pb-8 md:pt-12 md:pb-12 px-4 md:px-16 overflow-hidden">
    <div class="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_70%_30%,white,transparent_55%)]"></div>
    <div class="max-w-[1400px] mx-auto relative" data-animate>
        <div class="flex items-center gap-3">
            <span class="block w-12 h-px bg-gold"></span>
            <span class="text-gold text-xs tracking-[0.3em] uppercase font-medium">{{ __('messages.about.overline') }}</span>
        </div>
        <h1 class="font-display text-3xl md:text-5xl text-white font-semibold mt-3 leading-tight">{{ __('messages.about.title') }}</h1>
        <p class="text-white/70 mt-4 max-w-2xl leading-relaxed">{{ __('messages.about.intro') }}</p>
    </div>
</section>

<section class="py-6 md:py-12 px-4 md:px-16 bg-white">
    <div class="max-w-[1400px] mx-auto">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 lg:gap-16 items-center">
            <div data-animate>
                <div class="flex items-center gap-3">
                    <span class="block w-12 h-px bg-gold"></span>
                    <span class="text-gold text-xs tracking-[0.3em] uppercase font-medium">{{ __('messages.about.story.title') }}</span>
                </div>
                <p class="text-gray-600 text-sm md:text-base mt-4 md:mt-6 leading-relaxed">{{ __('messages.about.story.body') }}</p>
                <div class="grid grid-cols-2 sm:grid-cols-4 gap-6 mt-10">
                    @foreach(__('messages.about.numbers') as $stat)
                        <div class="text-center">
                            <div class="font-display text-2xl md:text-3xl font-bold text-navy">{{ $stat['num'] }}</div>
                            <div class="text-gray-500 text-xs mt-1 uppercase tracking-wider">{{ $stat['label'] }}</div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div data-animate>
                <img src="/images/djerba.jpg" alt="Victory Tours" class="rounded-2xl shadow-lg w-full h-64 md:h-96 object-cover">
            </div>
        </div>
    </div>
</section>

<section class="py-6 md:py-12 px-4 md:px-16 bg-offwhite">
    <div class="max-w-[1400px] mx-auto">
        <div data-animate class="text-center mb-12">
            <div class="flex items-center justify-center gap-3">
                <span class="block w-12 h-px bg-gold"></span>
                <span class="text-gold text-xs tracking-[0.3em] uppercase font-medium">{{ __('messages.about.values.title') }}</span>
                <span class="block w-12 h-px bg-gold"></span>
            </div>
            <h2 class="font-display text-3xl md:text-4xl text-[#0F1E45] font-semibold mt-3">{{ __('messages.about.values.title') }}</h2>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            @foreach(__('messages.about.values.items') as $item)
                <div data-animate class="bg-white rounded-2xl p-6 sm:p-8 border border-gray-100 hover:shadow-md hover:border-gold/40 transition-all duration-300 text-center">
                    <div class="w-14 h-14 mx-auto rounded-2xl bg-navy/10 flex items-center justify-center text-navy text-xl mb-4">
                        <i class="{{ $item['icon'] }}"></i>
                    </div>
                    <h3 class="font-semibold text-lg text-[#0F1E45] mb-2">{{ $item['title'] }}</h3>
                    <p class="text-gray-500 text-sm leading-relaxed">{{ $item['desc'] }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>

<section class="py-6 md:py-12 px-4 md:px-16 bg-white text-center">
    <div class="max-w-[1400px] mx-auto" data-animate>
        <h2 class="font-display text-2xl md:text-3xl text-[#0F1E45] font-semibold">{{ $locale === 'fr' ? 'Prêt à voyager avec nous ?' : 'Ready to travel with us?' }}</h2>
        <p class="text-gray-500 mt-3 max-w-md mx-auto">{{ $locale === 'fr' ? 'Contactez-nous pour planifier votre prochaine aventure en Tunisie.' : 'Contact us to plan your next adventure in Tunisia.' }}</p>
        <div class="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
            <a href="/{{ $locale }}/contact" class="bg-navy hover:bg-navy-deep text-white rounded-full px-8 py-3.5 font-semibold text-sm transition-colors">{{ __('messages.advantages.contact') }}</a>
            <a href="https://wa.me/{{ $waNumber }}" target="_blank" rel="noopener" class="inline-flex items-center justify-center gap-2 bg-[#25D366] hover:bg-[#20b858] text-white rounded-full px-8 py-3.5 font-semibold text-sm transition-colors"><i class="fa-brands fa-whatsapp"></i> WhatsApp</a>
        </div>
    </div>
</section>
@endsection