@extends('layouts.app')
@section('titre', 'Qui sommes-nous ?')

@section('titre', 'Qui sommes-nous ?')
@section('description', "Découvrez HORSE : 23 ans d'expertise, 150+ projets réalisés, une équipe pluridisciplinaire au service de vos infrastructures au Bénin et en Afrique de l'Ouest.")

@section('contenu')

<section class="bg-bleu-fonce py-20">
    <div class="max-w-6xl mx-auto px-6 md:px-8">
        <div class="text-vert text-sm font-bold uppercase tracking-wide mb-4">Qui sommes-nous ?</div>
        <h1 class="text-white text-4xl font-bold max-w-2xl">Un bureau d'ingénieurs-conseils de référence depuis 2003</h1>
        @include('composants.fil-ariane')
    </div>
</section>

<section class="py-20">
    <div class="max-w-6xl mx-auto px-6 md:px-8 grid md:grid-cols-2 gap-14 items-center">

        <div class="relative reveal">
            <img src="{{ asset('images/Horse_1.JPEG') }}" alt=" HORSE"
                 class="w-full aspect-[4/5] object-cover">
            <div class="absolute -bottom-6 -right-6 bg-bleu text-white px-6 py-5 shadow-xl hidden md:block">
                <div class="text-3xl font-bold text-vert">23 ans</div>
                <div class="text-xs uppercase tracking-wide text-white/70 mt-1">d'expertise terrain</div>
            </div>
        </div>

        <div class="reveal">
            <div class="text-vert text-sm font-bold uppercase tracking-wide mb-3">Notre histoire</div>
            <h2 class="text-2xl md:text-3xl font-bold text-bleu-fonce mb-6 leading-snug">
                Depuis 2003, l'excellence technique au service de vos projets d'infrastructure
            </h2>

            <p class="text-gray-600 leading-relaxed mb-5">
                Créé en 2003 en tant que Bureau d'Études d'Ingénieurs-conseils, les activités de HORSE s'étendent aux missions d'Études, de Contrôle et de Surveillance des travaux. Elle est très ouverte aux compétences nationales, sous-régionales et internationales.
            </p>
            <p class="text-gray-600 leading-relaxed mb-8">
                Le Bureau d'Études HORSE Sarl est spécialisé dans les domaines d'Études, d'expertises, de contrôle et de surveillance des travaux de construction de bâtiments, des Travaux Publics, d'assainissement urbain et rural, d'hydraulique villageoise et autres aménagements hydro-agricoles.
            </p>

            <div class="grid grid-cols-2 gap-4">
                <div class="flex items-start gap-3">
                    <div class="w-9 h-9 rounded-full bg-vert/10 flex items-center justify-center shrink-0">
                        <svg class="w-4 h-4 stroke-vert-fonce" viewBox="0 0 24 24" fill="none" stroke-width="2.5">
                            <path d="M20 6L9 17l-5-5"/>
                        </svg>
                    </div>
                    <div class="text-sm text-gray-600 pt-1.5">Bureau d'ingénieurs-conseils depuis 2003</div>
                </div>
                <div class="flex items-start gap-3">
                    <div class="w-9 h-9 rounded-full bg-vert/10 flex items-center justify-center shrink-0">
                        <svg class="w-4 h-4 stroke-vert-fonce" viewBox="0 0 24 24" fill="none" stroke-width="2.5">
                            <path d="M20 6L9 17l-5-5"/>
                        </svg>
                    </div>
                    <div class="text-sm text-gray-600 pt-1.5">Ouvert aux expertises internationales</div>
                </div>
                <div class="flex items-start gap-3">
                    <div class="w-9 h-9 rounded-full bg-vert/10 flex items-center justify-center shrink-0">
                        <svg class="w-4 h-4 stroke-vert-fonce" viewBox="0 0 24 24" fill="none" stroke-width="2.5">
                            <path d="M20 6L9 17l-5-5"/>
                        </svg>
                    </div>
                    <div class="text-sm text-gray-600 pt-1.5">Études, contrôle et surveillance de travaux</div>
                </div>
                <div class="flex items-start gap-3">
                    <div class="w-9 h-9 rounded-full bg-vert/10 flex items-center justify-center shrink-0">
                        <svg class="w-4 h-4 stroke-vert-fonce" viewBox="0 0 24 24" fill="none" stroke-width="2.5">
                            <path d="M20 6L9 17l-5-5"/>
                        </svg>
                    </div>
                    <div class="text-sm text-gray-600 pt-1.5">Bâtiments, TP, hydraulique & environnement</div>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="py-20 bg-[#EDEBE5]">
    <div class="max-w-6xl mx-auto px-6 md:px-8 grid md:grid-cols-3 gap-6">
        <div class="reveal bg-bleu-fonce-2 text-white p-8" style="transition-delay: 0ms">
            <div class="w-10 h-10 rounded-full bg-vert/20 flex items-center justify-center mb-5">
                <svg class="w-5 h-5 stroke-vert" viewBox="0 0 24 24" fill="none" stroke-width="2">
                    <path d="M9 11l3 3L22 4M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/>
                </svg>
            </div>
            <h2 class="text-xl font-bold mb-3">Notre mission</h2>
            <p class="text-white/75 text-sm leading-relaxed">Apporter une expertise technique, environnementale, économique et sociale dans la conception, l'analyse, l'étude et le suivi des projets de construction d'infrastructures de développement.</p>
        </div>

        <div class="reveal bg-bleu text-white p-8" style="transition-delay: 100ms">
            <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mb-5">
                <svg class="w-5 h-5 stroke-white" viewBox="0 0 24 24" fill="none" stroke-width="2">
                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
                </svg>
            </div>
            <h2 class="text-xl font-bold mb-3">Notre vision</h2>
            <p class="text-white/85 text-sm leading-relaxed">Être le bureau d'études et d'ingénieur-conseil de référence grâce à l'excellence de sa performance, la satisfaction de ses clients, la qualité et la fiabilité de ses prestations.</p>
        </div>

        <div class="reveal bg-white border border-gray-200 p-8" style="transition-delay: 200ms">
            <div class="w-10 h-10 rounded-full bg-bleu/10 flex items-center justify-center mb-5">
                <svg class="w-5 h-5 stroke-bleu" viewBox="0 0 24 24" fill="none" stroke-width="2">
                    <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>
            <h2 class="text-xl font-bold text-bleu-fonce mb-3">Nos valeurs</h2>
            <ul class="text-sm text-gray-500 space-y-2">
                <li class="flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-vert"></span>Qualité</li>
                <li class="flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-vert"></span>Professionnalisme</li>
                <li class="flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-vert"></span>Rigueur technique</li>
                <li class="flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-vert"></span>Engagement client</li>
            </ul>
        </div>
    </div>
</section>

<section class="py-20">
    <div class="max-w-6xl mx-auto px-6 md:px-8">
        <div class="text-center max-w-2xl mx-auto mb-14">
            <div class="text-vert text-sm font-bold uppercase tracking-wide mb-3">Notre savoir-faire</div>
            <h2 class="text-3xl font-bold text-bleu-fonce mb-4">Prestations et expertise</h2>
            <p class="text-gray-500">Le Bureau d’Études HORSE regorge des compétences professionnelles variées, lui 
permettant de répondre effi cacement à chaque sollicitation en mettant à la disposition de vos projets des experts et techniciens dont les expériences sont avérées. </p>
<p class="text-gray-500">Son expertise depuis la phase des études de conception jusqu’à leur mise en œuvre,          
garantit des solutions innovantes et durables..</p>
        </div>

        <div class="grid md:grid-cols-2 gap-6">
<div class="reveal bg-white border-t-4 border-bleu p-8 shadow-sm hover:shadow-lg transition" style="transition-delay: 0ms">
                <div class="flex items-center gap-3 mb-6">
                    <div class="w-11 h-11 rounded-full bg-bleu/10 flex items-center justify-center shrink-0">
                        <svg class="w-5 h-5 stroke-bleu" viewBox="0 0 24 24" fill="none" stroke-width="2">
                            <path d="M9 11H5a2 2 0 00-2 2v7a2 2 0 002 2h4M9 11V5a2 2 0 012-2h6a2 2 0 012 2v14a2 2 0 01-2 2H9m0-11v11"/>
                        </svg>
                    </div>
                    <h3 class="text-lg font-bold text-bleu-fonce">Études</h3>
                </div>
                <ul class="space-y-3.5 text-sm text-gray-600">
                    @foreach([
                        'Études de conception amont',
                        'Études préliminaires ou spécialisées',
                        'Études de faisabilité',
                        'Études économiques',
                    ] as $item)
                    <li class="flex items-start gap-2.5">
                        <svg class="w-4 h-4 mt-0.5 shrink-0 stroke-vert" viewBox="0 0 24 24" fill="none" stroke-width="2.5">
                            <path d="M20 6L9 17l-5-5"/>
                        </svg>
                        {{ $item }}
                    </li>
                    @endforeach
                </ul>
            </div>
<div class="reveal bg-white border-t-4 border-vert p-8 shadow-sm hover:shadow-lg transition" style="transition-delay: 150ms">
                <div class="flex items-center gap-3 mb-6">
                    <div class="w-11 h-11 rounded-full bg-vert/10 flex items-center justify-center shrink-0">
                        <svg class="w-5 h-5 stroke-vert-fonce" viewBox="0 0 24 24" fill="none" stroke-width="2">
                            <path d="M3 21h18M5 21V7l8-4v18M19 21V11l-6-4"/>
                        </svg>
                    </div>
                    <h3 class="text-lg font-bold text-bleu-fonce">Maîtrise d'œuvre & assistance</h3>
                </div>
                <ul class="space-y-3.5 text-sm text-gray-600">
                    @foreach([
                        "Maîtrise d'œuvre complète",
                        "Assistance à Maîtrise d'ouvrage (AMO)",
                        "Maîtrise d'Ouvrage Déléguée (MOD)",
                    ] as $item)
                    <li class="flex items-start gap-2.5">
                        <svg class="w-4 h-4 mt-0.5 shrink-0 stroke-vert" viewBox="0 0 24 24" fill="none" stroke-width="2.5">
                            <path d="M20 6L9 17l-5-5"/>
                        </svg>
                        {{ $item }}
                    </li>
                    @endforeach
                </ul>
            </div>

        </div>
    </div>
</section>

@endsection