@extends('layouts.app')

@section('titre', 'Accueil')

@section('titre', 'Accueil')
@section('description', "HORSE, bureau d'études d'ingénieurs conseils au Bénin depuis 2003. Études, contrôle et maîtrise d'œuvre en génie civil, hydraulique et transports.")

@section('contenu')

<section class="relative bg-bleu-fonce min-h-[560px] flex items-center overflow-hidden" id="hero-carrousel">

    <img src="{{ asset('images/image-principal1.JPG') }}" alt="Chantier HORSE"
         class="diapo absolute inset-0 w-full h-full object-cover opacity-100 transition-opacity duration-[1500ms] ease-in-out">
    <img src="{{ asset('images/image-principal2.JPG') }}" alt="Chantier HORSE"
         class="diapo absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-[1500ms] ease-in-out">
    <img src="{{ asset('images/image-principal3.PNG') }}" alt="Chantier HORSE"
         class="diapo absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-[1500ms] ease-in-out">

    <div class="absolute inset-0 bg-bleu/60"></div>

    <div class="relative z-10 max-w-6xl mx-auto px-8 py-24">
        <div class="inline-flex items-center gap-2 text-vert text-sm font-bold uppercase tracking-wide mb-5">
            <span class="w-6 h-px bg-vert"></span> Bureau d'ingénieurs-conseils · Depuis 2003
        </div>
        <h1 class="text-white text-5xl font-bold leading-tight max-w-2xl mb-5">
            La différence par la <span class="text-vert">qualité</span> et le <span class="text-vert">professionnalisme</span> au service de vos projets.
        </h1>
        <p class="text-white/80 text-lg max-w-lg mb-9">
            Études, contrôle, surveillance des travaux et maîtrise d'œuvre en génie civil, hydraulique et transports.
        </p>

        
<a href="{{ route('quisommesnous') }}" class="inline-block bg-rouge hover:bg-rouge-fonce text-white font-bold px-8 py-4 rounded">En savoir plus →</a>
        
    </div>
</section>

<section class="bg-bleu-fonce-2" id="section-chiffres">
    <div class="reveal max-w-6xl mx-auto grid grid-cols-2 md:grid-cols-5">

        <div class="p-8 border-white/10 border-r last:border-r-0">
            <svg class="w-7 h-7 stroke-vert mb-3" viewBox="0 0 24 24" fill="none" stroke-width="1.8">
                <circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>
            </svg>
            <div class="text-vert text-3xl font-bold"><span class="chiffre-anime" data-cible="23" data-suffixe=" ans">0</span></div>
            <div class="text-white/60 text-xs uppercase mt-1">D'expertise terrain</div>
        </div>

        <div class="p-8 border-white/10 border-r last:border-r-0">
            <svg class="w-7 h-7 stroke-vert mb-3" viewBox="0 0 24 24" fill="none" stroke-width="1.8">
                <path d="M9 12l2 2 4-4M7.8 3h8.4a1 1 0 011 1v16l-5.2-3-5.2 3V4a1 1 0 011-1z"/>
            </svg>
            <div class="text-vert text-3xl font-bold"><span class="chiffre-anime" data-cible="150" data-suffixe="+">0</span></div>
            <div class="text-white/60 text-xs uppercase mt-1">Projets réalisés</div>
        </div>

        <div class="p-8 border-white/10 border-r last:border-r-0">
            <svg class="w-7 h-7 stroke-vert mb-3" viewBox="0 0 24 24" fill="none" stroke-width="1.8">
                <path d="M12 2l2.9 6.6L22 9.3l-5 5 1.2 7.2L12 18l-6.2 3.5L7 14.3l-5-5 7.1-.7z"/>
            </svg>
            <div class="text-vert text-3xl font-bold"><span class="chiffre-anime" data-cible="6" data-suffixe="" data-pad="2">0</span></div>
            <div class="text-white/60 text-xs uppercase mt-1">Pôles d'excellence</div>
        </div>

        <div class="p-8 border-white/10 border-r last:border-r-0">
            <svg class="w-7 h-7 stroke-vert mb-3" viewBox="0 0 24 24" fill="none" stroke-width="1.8">
                <circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 010 20 15 15 0 010-20z"/>
            </svg>
            <div class="text-vert text-3xl font-bold"><span class="chiffre-anime" data-cible="4" data-suffixe="+">0</span></div>
            <div class="text-white/60 text-xs uppercase mt-1">Pays d'intervention</div>
        </div>

        <div class="p-8 border-white/10 border-r last:border-r-0">
            <svg class="w-7 h-7 stroke-vert mb-3" viewBox="0 0 24 24" fill="none" stroke-width="1.8">
                <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2M9 11a4 4 0 100-8 4 4 0 000 8zM23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/>
            </svg>
            <div class="text-vert text-3xl font-bold"><span class="chiffre-anime" data-cible="100" data-suffixe="+">0</span></div>
            <div class="text-white/60 text-xs uppercase mt-1">Collaborateurs</div>
        </div>

    </div>
</section>

<section class="py-24">
    <div class="max-w-6xl mx-auto px-8">
        <div class="text-center mb-14">
            <h2 class="text-3xl font-bold text-bleu-fonce mb-4">Nos domaines d'expertise</h2>
            <p class="text-gray-500 max-w-xl mx-auto">Six pôles de compétences pour accompagner un projet de sa conception jusqu'à sa réception.</p>
        </div>

        <div class="grid md:grid-cols-3 gap-6 mb-10">
<div class="reveal bg-white border-t-4 border-bleu p-8 hover:-translate-y-1 hover:shadow-xl transition" style="transition-delay: 0ms">
        <div class="text-vert-fonce text-xs font-bold mb-3">01</div>
                <h3 class="text-lg font-bold text-bleu-fonce mb-3">Maîtrise d'ouvrage</h3>
                <p class="text-sm text-gray-500">Élaboration des dossiers de base, mission de maîtrise d'œuvre, assistance et gestion de projet.</p>
            </div>
            <div class="reveal bg-white border-t-4 border-bleu p-8 hover:-translate-y-1 hover:shadow-xl transition" style="transition-delay: 100ms">
                <div class="text-vert-fonce text-xs font-bold mb-3">02</div>
                <h3 class="text-lg font-bold text-bleu-fonce mb-3">Bâtiments & travaux publics</h3>
                <p class="text-sm text-gray-500">Routes et ouvrages d'art, pistes, bâtiments, construction rurale.</p>
            </div>
            <div class="reveal bg-white border-t-4 border-bleu p-8 hover:-translate-y-1 hover:shadow-xl transition" style="transition-delay: 200ms">
                <div class="text-vert-fonce text-xs font-bold mb-3">03</div>
                <h3 class="text-lg font-bold text-bleu-fonce mb-3">Hydraulique & environnement</h3>
                <p class="text-sm text-gray-500">Aménagements hydro-agricoles, assainissement, études d'impact environnemental.</p>
            </div>
        </div>

        <div class="text-center">
            <a href="{{ route('services') }}" class="text-bleu font-bold">Découvrir tous nos services →</a>
        </div>
    </div>
</section>

<section class="py-24 bg-[#EDEBE5]">
    <div class="max-w-6xl mx-auto px-8">
        <div class="text-center mb-14">
            <h2 class="text-3xl font-bold text-bleu-fonce mb-4">Réalisations récentes</h2>
            <p class="text-gray-500 max-w-xl mx-auto">Un aperçu des projets d'infrastructure menés par nos équipes.</p>
        </div>

        @if ($realisationsRecentes->count())
        <div class="grid md:grid-cols-3 gap-6 mb-10">
            @foreach ($realisationsRecentes as $item)
<a href="{{ route('realisations.show', $item) }}" class="reveal bg-bleu-fonce h-64 relative overflow-hidden group block" style="transition-delay: {{ $loop->index * 120 }}ms">
            @if ($item->image)
                    <img src="{{ asset('storage/' . $item->image) }}" alt="{{ $item->titre }}" loading="lazy"
                         class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition duration-500">
                @endif
                <div class="absolute inset-0 bg-gradient-to-t from-bleu-fonce/95 via-bleu-fonce/20 to-transparent flex items-end p-5">
                    <div class="text-white">
                        <span class="text-vert text-xs font-bold uppercase">{{ $item->categorie }}</span>
                        <div class="font-bold text-sm mt-1">{{ $item->titre }}</div>
                    </div>
                </div>
            </a>
            @endforeach
        </div>
        @else
        <p class="text-center text-gray-400">Aucune réalisation publiée pour le moment.</p>
        @endif

        <div class="text-center">
            <a href="{{ route('realisations') }}" class="text-bleu font-bold">Voir toutes nos réalisations →</a>
        </div>
    </div>
</section>

@if ($actualitesRecentes->count())
<section class="py-24">
    <div class="max-w-6xl mx-auto px-8">
        <div class="text-center mb-14">
            <div class="text-vert text-sm font-bold uppercase tracking-wide mb-3">Actualités</div>
            <h2 class="text-3xl font-bold text-bleu-fonce">Dernières nouvelles</h2>
        </div>

        <div class="grid md:grid-cols-3 gap-6 mb-10">
            @foreach ($actualitesRecentes as $item)
<a href="{{ route('actualites.show', $item) }}" class="reveal bg-white border border-gray-200 block hover:shadow-lg transition" style="transition-delay: {{ $loop->index * 120 }}ms">
            <div class="h-40 bg-bleu overflow-hidden">
                    @if ($item->image)
                        <img src="{{ asset('storage/' . $item->image) }}" alt="{{ $item->titre }}" loading="lazy" class="w-full h-full object-cover">
                    @endif
                </div>
                <div class="p-5">
                    <span class="text-vert-fonce text-xs font-bold uppercase">{{ $item->categorie }}</span>
                    <h3 class="font-bold text-bleu-fonce mt-2">{{ $item->titre }}</h3>
                    @if ($item->extrait)
                        <p class="text-sm text-gray-500 mt-2 line-clamp-2">{{ $item->extrait }}</p>
                    @endif
                </div>
            </a>
            @endforeach
        </div>

        <div class="text-center">
            <a href="{{ route('actualites') }}" class="text-bleu font-bold">Voir toutes les actualités →</a>
        </div>
    </div>
</section>
@endif

@endsection