@extends('layouts.app')

@section('title', 'À propos')

@section('content')
@include('components.page-banner', [
'title' => 'À propos de nous',
// 'subtitle' => 'Votre partenaire de confiance en solutions électriques',
'image' => asset('img/test_1.jpeg')
])

<section class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <div>
                <h2 class="text-3xl font-bold text-slate-800 mb-6">emelec Sarl</h2>
                <p class="text-slate-600 leading-relaxed mb-6">
                    Spécialisée dans le domaine de l'électricité industrielle et du bâtiment, <strong>emelec Sarl</strong> met son expertise à votre service pour tous vos projets d'installation, de maintenance et de fourniture de matériel électrique.
                </p>
                <p class="text-slate-600 leading-relaxed mb-6">
                    De l'éclairage public à la climatisation, en passant par les ouvrages bâtiment, l'adduction d'eau potable, le froid industriel et domestique, nous couvrons un large spectre de prestations pour répondre à vos besoins.
                </p>
                <p class="text-slate-600 leading-relaxed">
                    Notre équipe qualifiée assure des maintenances groupées sur chaudières, compresseurs d'air, compresseurs froid et groupes électrogènes, garantissant la pérennité de vos installations.
                </p>
            </div>
            <div class="relative">
                <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&q=80" alt="Électricité industrielle" class="rounded-2xl shadow-2xl">
                <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-amber-500 rounded-2xl -z-10"></div>
            </div>
        </div>

        <div class="mt-24 grid grid-cols-2 md:grid-cols-4 gap-8">
            <div class="text-center">
                <div class="text-4xl font-bold text-amber-500 mb-2">+15</div>
                <p class="text-slate-600 text-sm">Années d'expérience</p>
            </div>
            <div class="text-center">
                <div class="text-4xl font-bold text-amber-500 mb-2">100+</div>
                <p class="text-slate-600 text-sm">Projets réalisés</p>
            </div>
            <div class="text-center">
                <div class="text-4xl font-bold text-amber-500 mb-2">24/7</div>
                <p class="text-slate-600 text-sm">Disponibilité</p>
            </div>
            <div class="text-center">
                <div class="text-4xl font-bold text-amber-500 mb-2">100%</div>
                <p class="text-slate-600 text-sm">Satisfaction client</p>
            </div>
        </div>
    </div>
</section>

{{-- Vision, Mission, Valeurs --}}
<section class="py-24 bg-slate-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <span class="inline-block px-4 py-1.5 rounded-full bg-amber-100 text-amber-700 text-sm font-semibold mb-6">Notre ADN</span>
            <h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-6">Vision, Mission & Valeurs</h2>
            <p class="text-slate-600 text-lg max-w-2xl mx-auto">Les principes qui guident notre engagement au quotidien.</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="group bg-white rounded-2xl p-8 border border-slate-100 shadow-sm hover:shadow-xl hover:border-amber-200/60 transition-all duration-300">
                <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-amber-400 to-amber-600 flex items-center justify-center mb-6 shadow-lg shadow-amber-500/25 group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>
                </div>
                <h3 class="font-bold text-slate-900 text-xl mb-4">Notre Vision</h3>
                <p class="text-slate-600 leading-relaxed">Devenir le partenaire de référence en solutions électriques industrielles et bâtiment, reconnu pour notre excellence technique et notre capacité à accompagner la croissance de nos clients dans un monde en constante évolution.</p>
            </div>

            <div class="group bg-white rounded-2xl p-8 border border-slate-100 shadow-sm hover:shadow-xl hover:border-amber-200/60 transition-all duration-300">
                <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-amber-400 to-amber-600 flex items-center justify-center mb-6 shadow-lg shadow-amber-500/25 group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" /></svg>
                </div>
                <h3 class="font-bold text-slate-900 text-xl mb-4">Notre Mission</h3>
                <p class="text-slate-600 leading-relaxed">Proposer des solutions électriques complètes, fiables et innovantes qui garantissent la performance, la sécurité et la durabilité des installations de nos clients. Nous nous engageons à livrer des prestations de qualité dans les délais convenus.</p>
            </div>

            <div class="group bg-white rounded-2xl p-8 border border-slate-100 shadow-sm hover:shadow-xl hover:border-amber-200/60 transition-all duration-300">
                <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-amber-400 to-amber-600 flex items-center justify-center mb-6 shadow-lg shadow-amber-500/25 group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
                </div>
                <h3 class="font-bold text-slate-900 text-xl mb-4">Nos Valeurs</h3>
                <ul class="space-y-3 text-slate-600">
                    <li class="flex items-start gap-3">
                        <span class="w-6 h-6 rounded-lg bg-amber-500/20 flex items-center justify-center shrink-0 mt-0.5"><svg class="w-3.5 h-3.5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg></span>
                        <span><strong class="text-slate-800">Excellence</strong> — Qualité et rigueur dans chaque intervention</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <span class="w-6 h-6 rounded-lg bg-amber-500/20 flex items-center justify-center shrink-0 mt-0.5"><svg class="w-3.5 h-3.5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg></span>
                        <span><strong class="text-slate-800">Intégrité</strong> — Honnêteté et transparence avec nos clients</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <span class="w-6 h-6 rounded-lg bg-amber-500/20 flex items-center justify-center shrink-0 mt-0.5"><svg class="w-3.5 h-3.5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg></span>
                        <span><strong class="text-slate-800">Réactivité</strong> — Disponibilité et rapidité d'intervention</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <span class="w-6 h-6 rounded-lg bg-amber-500/20 flex items-center justify-center shrink-0 mt-0.5"><svg class="w-3.5 h-3.5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg></span>
                        <span><strong class="text-slate-800">Innovation</strong> — Adaptation aux nouvelles technologies</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>

{{-- Nos engagements --}}
<section class="py-24 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <span class="inline-block px-4 py-1.5 rounded-full bg-amber-100 text-amber-700 text-sm font-semibold mb-6">Nos promesses</span>
            <h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-6">Nos engagements</h2>
            <p class="text-slate-600 text-lg max-w-2xl mx-auto">Des engagements concrets qui fondent notre relation de confiance avec nos clients.</p>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            @php
            $engagements = [
            ['Normes & certifications', 'Respect strict des normes en vigueur et des réglementations électriques pour des installations conformes et sécurisées.', 'M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z'],
            ['Délais respectés', 'Planification rigoureuse et organisation pour livrer vos projets dans les délais convenus.', 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z'],
            ['Sécurité des interventions', 'Protocoles de sécurité stricts et équipements de protection pour chaque intervention sur site.', 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z'],
            ['Formation continue', 'Équipe en veille permanente sur les nouvelles technologies et normes du secteur.', 'M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253'],
            ['Traçabilité des travaux', 'Documentation complète et rapports détaillés pour un suivi transparent de chaque intervention.', 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'],
            ['Écoute client', 'Disponibilité et réactivité pour répondre à vos besoins et vous accompagner tout au long du projet.', 'M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z'],
            ];
            @endphp
            @foreach($engagements as $e)
            <div class="flex gap-4 p-6 rounded-2xl bg-slate-50 border border-slate-100 hover:border-amber-200/60 hover:bg-amber-50/30 transition-all duration-300">
                <div class="w-12 h-12 rounded-xl bg-amber-500/20 flex items-center justify-center shrink-0">
                    <svg class="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $e[2] }}" /></svg>
                </div>
                <div>
                    <h3 class="font-bold text-slate-900 mb-2">{{ $e[0] }}</h3>
                    <p class="text-slate-600 text-sm leading-relaxed">{{ $e[1] }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

{{-- Notre équipe --}}
<section class="py-24 bg-slate-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <span class="inline-block px-4 py-1.5 rounded-full bg-amber-100 text-amber-700 text-sm font-semibold mb-6">Qui sommes-nous</span>
            <h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-6">Notre équipe</h2>
            <p class="text-slate-600 text-lg max-w-2xl mx-auto">Une équipe qualifiée et passionnée, unie autour d'un même objectif : votre satisfaction.</p>
        </div>

        <div class="max-w-4xl mx-auto">
            <div class="relative rounded-2xl overflow-hidden shadow-2xl">
                {{-- Remplacez l'URL par la photo de votre équipe --}}
                <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1200&q=80" alt="L'équipe emelec Sarl" class="w-full h-[400px] md:h-[500px] object-cover">
                <div class="absolute inset-0 bg-gradient-to-t from-slate-900/70 via-transparent to-transparent"></div>
                <div class="absolute bottom-0 left-0 right-0 p-8 md:p-12">
                    <p class="text-white text-lg md:text-xl font-medium">L'équipe emelec Sarl — Experts en solutions électriques industrielles</p>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
