@extends('layouts.app')

@section('title', 'Nos Services')

@section('content')
@include('components.page-banner', [
    'title' => 'Nos Services',
    'subtitle' => 'Solutions électriques sur mesure pour l\'industrie et le bâtiment',
    'image' => 'https://images.unsplash.com/photo-1621905251189-08b45d6a269e?w=1920&q=80'
])

{{-- Introduction --}}
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-3xl mx-auto text-center">
            <p class="text-slate-600 text-lg leading-relaxed">
                De l'installation à la maintenance, <strong class="text-slate-800">emelec Sarl</strong> accompagne vos projets industriels et bâtiment avec une expertise reconnue. Installation, conception, maintenance et fourniture : nous couvrons l'ensemble de la chaîne pour répondre à tous vos besoins en électricité.
            </p>
        </div>
    </div>
</section>

{{-- Prestations principales --}}
<section class="py-20 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">Nos Prestations</span>
            <h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-6">Un accompagnement complet pour vos projets</h2>
            <p class="text-slate-600 text-lg max-w-2xl mx-auto">Des solutions sur mesure adaptées à chaque secteur d'activité.</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            @php
                $prestations = [
                    ['Maintenance et fourniture de matériel industriel', 'Installation, maintenance préventive et corrective. Fourniture de pièces et matériel.', 'M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z'],
                    ['Éclairage public', 'Conception, installation et maintenance des systèmes d\'éclairage public et urbain.', 'M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z'],
                    ['Ouvrage bâtiment', 'Installations électriques complètes pour bâtiments neufs et rénovations.', 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6'],
                    ['Adduction d\'eau potable', 'Installations électriques pour les systèmes d\'adduction d\'eau potable.', 'M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z'],
                    ['Froid industriel et domestique', 'Installation et maintenance de systèmes de réfrigération et congélation.', 'M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'],
                    ['Mécanique électricité (HTA BTA EP)', 'Expertise en haute et basse tension, électricité de puissance.', 'M13 10V3L4 14h7v7l9-11h-7z'],
                    ['Climatisation', 'Installation et maintenance de systèmes de climatisation.', 'M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z'],
                    ['Prestations diverses', 'Solutions sur mesure pour tous vos besoins électriques.', 'M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z'],
                ];
            @endphp
            @foreach($prestations as $p)
            <article class="group relative bg-white rounded-2xl p-8 border border-slate-100 shadow-sm hover:shadow-xl hover:shadow-amber-500/10 hover:border-amber-200/60 transition-all duration-500 overflow-hidden">
                <div class="absolute top-0 right-0 w-24 h-24 bg-gradient-to-br from-amber-400/10 to-transparent rounded-bl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                <div class="relative">
                    <div class="w-14 h-14 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-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $p[2] }}"/></svg>
                    </div>
                    <h3 class="font-bold text-slate-900 text-lg mb-3 group-hover:text-amber-600 transition-colors">{{ $p[0] }}</h3>
                    <p class="text-slate-600 text-sm leading-relaxed">{{ $p[1] }}</p>
                </div>
            </article>
            @endforeach
        </div>
    </div>
</section>

{{-- Maintenances groupées --}}
<section class="py-24 bg-slate-900 relative">
    <div class="absolute inset-0 z-0 bg-amber-500/5"></div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        {{-- En-tête centré --}}
        <div class="text-center mb-16">
            <span class="inline-block px-4 py-1.5 rounded-full bg-amber-500/20 text-amber-400 text-sm font-semibold mb-6">Maintenances Groupées</span>
            <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Contrats de maintenance dédiés</h2>
            <p class="text-slate-400 text-lg max-w-2xl mx-auto mb-12">Garantissez la performance et la durée de vie de vos équipements critiques avec nos programmes de maintenance personnalisés. Une équipe qualifiée intervient selon vos besoins.</p>
        </div>

        {{-- Cartes des équipements en grille 4 colonnes --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
            @php
                $maintenances = [
                    ['Chaudières', 'Maintenance préventive et corrective des chaudières industrielles', 'M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z'],
                    ['Compresseur d\'air', 'Entretien et dépannage des compresseurs d\'air', 'M13 10V3L4 14h7v7l9-11h-7z'],
                    ['Compresseur froid', 'Maintenance des systèmes de froid et climatisation', 'M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'],
                    ['Groupes électrogènes', 'Installation et maintenance des groupes électrogènes', 'M13 10V3L4 14h7v7l9-11h-7z'],
                ];
            @endphp
            @foreach($maintenances as $m)
            <div class="group bg-white/5 backdrop-blur-sm rounded-2xl p-8 border border-white/10 hover:bg-white/10 hover:border-amber-500/30 transition-all duration-300">
                <div class="w-12 h-12 rounded-xl bg-amber-500 flex items-center justify-center mb-6 group-hover:bg-amber-400 transition-colors">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $m[2] }}"/></svg>
                </div>
                <h3 class="font-bold text-white text-lg mb-2">{{ $m[0] }}</h3>
                <p class="text-slate-400 text-sm leading-relaxed">{{ $m[1] }}</p>
            </div>
            @endforeach
        </div>

        {{-- Avantages en ligne horizontale --}}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 pt-8 border-t border-white/10">
            <div class="flex items-start gap-4 text-center md:text-left">
                <span class="w-12 h-12 rounded-xl bg-amber-500/20 flex items-center justify-center shrink-0 mx-auto md:mx-0"><svg class="w-6 h-6 text-amber-400" 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>
                <div>
                    <h3 class="font-semibold text-white mb-1">Intervention préventive</h3>
                    <p class="text-slate-400 text-sm">Planification et suivi régulier de vos équipements</p>
                </div>
            </div>
            <div class="flex items-start gap-4 text-center md:text-left">
                <span class="w-12 h-12 rounded-xl bg-amber-500/20 flex items-center justify-center shrink-0 mx-auto md:mx-0"><svg class="w-6 h-6 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></span>
                <div>
                    <h3 class="font-semibold text-white mb-1">Maintenance corrective</h3>
                    <p class="text-slate-400 text-sm">Dépannage rapide pour limiter les arrêts</p>
                </div>
            </div>
            <div class="flex items-start gap-4 text-center md:text-left">
                <span class="w-12 h-12 rounded-xl bg-amber-500/20 flex items-center justify-center shrink-0 mx-auto md:mx-0"><svg class="w-6 h-6 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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"/></svg></span>
                <div>
                    <h3 class="font-semibold text-white mb-1">Rapport détaillé</h3>
                    <p class="text-slate-400 text-sm">Compte-rendu complet de chaque intervention</p>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Pourquoi nous choisir --}}
<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">Notre engagement</span>
            <h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-6">Pourquoi faire confiance à emelec</h2>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            @php
                $avantages = [
                    ['Expertise reconnue', 'Plus de 15 ans d\'expérience dans l\'électricité industrielle et du bâtiment, avec une équipe qualifiée et certifiée.'],
                    ['Réactivité', 'Intervention rapide et disponibilité pour répondre à vos urgences et maintenir la continuité de vos activités.'],
                    ['Solutions sur mesure', 'Étude personnalisée de chaque projet et proposition adaptée à vos contraintes et objectifs.'],
                    ['Qualité garantie', 'Travaux réalisés selon les normes en vigueur, avec garantie et suivi de vos installations.'],
                ];
            @endphp
            @foreach($avantages as $av)
            <div class="text-center p-6 rounded-2xl bg-slate-50 border border-slate-100 hover:border-amber-200/60 transition-colors">
                <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-amber-400 to-amber-600 flex items-center justify-center mx-auto mb-4 shadow-lg shadow-amber-500/20">
                    <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-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
                <h3 class="font-bold text-slate-900 text-lg mb-3">{{ $av[0] }}</h3>
                <p class="text-slate-600 text-sm leading-relaxed">{{ $av[1] }}</p>
            </div>
            @endforeach
        </div>
    </div>
</section>

{{-- CTA Section --}}
<section class="py-12 md:py-16 bg-gradient-to-br from-amber-500 to-amber-600 relative overflow-hidden">
    <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width=\'100\' height=\'100\' viewBox=\'0 0 100 100\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z\' fill=\'%23ffffff\' fill-opacity=\'0.08\' fill-rule=\'evenodd\'/%3E%3C/svg%3E')]"></div>
    <div class="max-w-4xl mx-auto px-4 text-center relative">
        <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Prêt à concrétiser votre projet ?</h2>
        <p class="text-amber-100 text-lg mb-10">Notre équipe d'experts étudie votre demande et vous propose une solution adaptée à vos besoins.</p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="{{ route('devis') }}" class="inline-flex items-center justify-center gap-2 bg-white text-amber-600 hover:bg-slate-50 px-8 py-4 rounded-xl font-semibold text-lg transition shadow-xl">
                Demander un devis
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
            </a>
            <a href="{{ route('contact') }}" class="inline-flex items-center justify-center gap-2 border-2 border-white text-white hover:bg-white hover:text-amber-600 px-8 py-4 rounded-xl font-semibold text-lg transition">
                Nous contacter
            </a>
        </div>
    </div>
</section>
@endsection
