@extends('layouts.app')

@section('content')
<!-- Hero Section -->
<div class="relative bg-teal-900 text-white overflow-hidden">
    <div class="absolute inset-0 z-0 opacity-40">
        <img src="https://images.unsplash.com/photo-1530124566582-a618bc2615dc?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Équipe de travailleurs DÉCO BAT - Artisans professionnels en rénovation" class="w-full h-full object-cover">
    </div>
    <div class="absolute inset-0 bg-gradient-to-r from-teal-900 via-teal-900/90 to-transparent z-0"></div>
    
    <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32 lg:py-48 flex flex-col justify-center h-full">
        <h1 class="text-7xl sm:text-8xl lg:text-9xl font-black tracking-wide mb-10 leading-none drop-shadow-2xl">
            <span class="text-teal-200 drop-shadow-lg">DÉCO</span> <span class="text-orange-400 drop-shadow-lg">BAT</span>
        </h1>
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6 leading-tight">
            L'Excellence <br>
            <span class="text-transparent bg-clip-text bg-gradient-to-r from-teal-200 to-teal-400">Technique à Votre Service</span>
        </h2>
        <p class="text-xl lg:text-2xl text-teal-100 mb-10 max-w-2xl font-light leading-relaxed">
           Certifiée en TCE (Tous Corps d’État) du bâtiment.
        </p>
        <div class="flex flex-col sm:flex-row gap-4">
            <a href="{{ route('contact') }}" class="inline-flex items-center justify-center px-8 py-4 border border-transparent text-lg font-bold rounded-lg text-teal-900 bg-white hover:bg-teal-50 hover:scale-105 transition-all duration-300 shadow-xl">
                Demander un Devis
                <svg class="w-5 h-5 ml-2 -mr-1" 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"></path></svg>
            </a>
            <a href="{{ route('services.plomberie-cvc') }}" class="inline-flex items-center justify-center px-8 py-4 border-2 border-teal-500 text-lg font-semibold rounded-lg text-teal-100 hover:bg-teal-800/50 hover:border-teal-400 transition-all duration-300 backdrop-blur-sm">
                Découvrir Nos Services
            </a>
        </div>
    </div>
</div>

<!-- Features Strip -->
<div class="bg-white relative z-20 -mt-16 mx-4 sm:mx-auto max-w-7xl rounded-xl shadow-2xl grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-gray-100 overflow-hidden">
    <div class="p-8 flex items-center space-x-4 hover:bg-teal-50 transition-colors duration-300 group">
        <div class="p-3 bg-teal-100 text-teal-600 rounded-lg group-hover:bg-teal-600 group-hover:text-white transition-colors">
            <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"><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>
        </div>
        <div>
            <h3 class="font-bold text-gray-900 text-lg">Intervention Rapide</h3>
            <p class="text-sm text-gray-500">Service d'urgence 7j/7 dans le Val d'Oise</p>
        </div>
    </div>
    <div class="p-8 flex items-center space-x-4 hover:bg-teal-50 transition-colors duration-300 group">
        <div class="p-3 bg-teal-100 text-teal-600 rounded-lg group-hover:bg-teal-600 group-hover:text-white transition-colors">
            <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"><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>
        <div>
            <h3 class="font-bold text-gray-900 text-lg">Artisans Certifiés</h3>
            <p class="text-sm text-gray-500">Expertise RGE et garantie décennale</p>
        </div>
    </div>
    <div class="p-8 flex items-center space-x-4 hover:bg-teal-50 transition-colors duration-300 group">
        <div class="p-3 bg-teal-100 text-teal-600 rounded-lg group-hover:bg-teal-600 group-hover:text-white transition-colors">
            <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3"/></svg>
        </div>
        <div>
            <h3 class="font-bold text-gray-900 text-lg">Tarifs Transparents</h3>
            <p class="text-sm text-gray-500">Devis gratuit et détaillé avant travaux</p>
        </div>
    </div>
</div>

<!-- Services Section -->
<section class="py-24 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-base font-bold text-teal-600 tracking-wide uppercase">Nos Expertises</h2>
            <p class="mt-2 text-4xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-5xl">Solutions Complètes pour l'Habitat</p>
            <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">De l'installation à la maintenance, nous couvrons tous les aspects de votre confort domestique.</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              <!-- Service 3: Aménagement -->
            <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden hover:shadow-2xl transition-shadow duration-300 flex flex-col group">
                <div class="h-48 bg-purple-600 overflow-hidden relative">
                    <img src="https://images.unsplash.com/photo-1562259949-e8e7689d7828?q=80&w=800&auto=format&fit=crop" alt="Aménagement" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                    <div class="absolute inset-0 bg-purple-900/30 group-hover:bg-purple-900/10 transition-colors"></div>
                </div>
                <div class="p-8 flex-1 flex flex-col">
                    <h3 class="text-2xl font-bold text-gray-900 mb-4">Aménagement</h3>
                    <p class="text-gray-600 mb-6 flex-1">Sols, Peinture, Rénovation</p>
                    <a href="{{ route('services.amenagement') }}" class="text-purple-600 font-semibold hover:text-purple-800 inline-flex items-center">
                        En savoir plus <svg class="w-4 h-4 ml-2" 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"></path></svg>
                    </a>
                </div>
            </div>
            <!-- Service 1: Plomberie & CVC -->
            <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden hover:shadow-2xl transition-shadow duration-300 flex flex-col group">
                <div class="h-48 bg-teal-600 overflow-hidden relative">
                    <img src="https://images.unsplash.com/photo-1607472586893-edb57bdc0e39?q=80&w=800&auto=format&fit=crop" alt="Plomberie & CVC" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                    <div class="absolute inset-0 bg-teal-900/30 group-hover:bg-teal-900/10 transition-colors"></div>
                </div>
                <div class="p-8 flex-1 flex flex-col">
                    <h3 class="text-2xl font-bold text-gray-900 mb-4">Plomberie & CVC</h3>
                    <p class="text-gray-600 mb-6 flex-1">Sanitaire, Chauffage, Clim</p>
                    <a href="{{ route('services.plomberie-cvc') }}" class="text-teal-600 font-semibold hover:text-teal-800 inline-flex items-center">
                        En savoir plus <svg class="w-4 h-4 ml-2" 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"></path></svg>
                    </a>
                </div>
            </div>

            <!-- Service 2: Électricité -->
            <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden hover:shadow-2xl transition-shadow duration-300 flex flex-col group">
                <div class="h-48 bg-amber-500 overflow-hidden relative">
                    <img src="https://images.unsplash.com/photo-1621905251189-08b45d6a269e?q=80&w=800&auto=format&fit=crop" alt="Électricité" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                    <div class="absolute inset-0 bg-amber-900/30 group-hover:bg-amber-900/10 transition-colors"></div>
                </div>
                <div class="p-8 flex-1 flex flex-col">
                    <h3 class="text-2xl font-bold text-gray-900 mb-4">Électricité</h3>
                    <p class="text-gray-600 mb-6 flex-1">Installation & Domotique</p>
                    <a href="{{ route('services.electricite') }}" class="text-amber-600 font-semibold hover:text-amber-800 inline-flex items-center">
                        En savoir plus <svg class="w-4 h-4 ml-2" 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"></path></svg>
                    </a>
                </div>
            </div>

          

            <!-- Service 4: Isolation -->
            <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden hover:shadow-2xl transition-shadow duration-300 flex flex-col group">
                <div class="h-48 bg-cyan-600 overflow-hidden relative">
                    <img src="https://images.unsplash.com/photo-1581094794329-c8112a89af12?q=80&w=800&auto=format&fit=crop" alt="Isolation" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                    <div class="absolute inset-0 bg-cyan-900/30 group-hover:bg-cyan-900/10 transition-colors"></div>
                </div>
                <div class="p-8 flex-1 flex flex-col">
                    <h3 class="text-2xl font-bold text-gray-900 mb-4">Isolation</h3>
                    <p class="text-gray-600 mb-6 flex-1">Thermique & Phonique</p>
                    <a href="{{ route('services.isolation') }}" class="text-cyan-600 font-semibold hover:text-cyan-800 inline-flex items-center">
                        En savoir plus <svg class="w-4 h-4 ml-2" 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"></path></svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>


<!-- Certifications Section -->
<section class="py-16 bg-white border-t border-gray-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <!-- Badge depuis 2019 -->
            <div class="flex justify-center mb-1">
                <img src="{{ asset('storage/depuis_2019.png') }}" alt="À votre Service depuis 2019" class="w-40 h-40 object-contain">
            </div>
            
            <!-- Capital text -->
            <p class="text-lg font-semibold text-gray-700 mb-8">Capital de 50K€</p>
            
            <h2 class="text-3xl font-bold text-gray-900">Nos Certifications & Garanties</h2>
            <p class="mt-4 text-lg text-gray-500">Gages de qualité, de sérieux et de professionnalisme</p>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 items-center justify-items-center">
            <!-- RGE -->
            <div class="flex flex-col items-center group">
                <div class="h-24 w-auto flex items-center justify-center mb-3">
                    <img src="{{ asset('storage/certification-rge.png') }}" alt="Certification RGE" class="h-full w-auto object-contain">
                </div>
            </div>
            <!-- CAPEB -->
            <div class="flex flex-col items-center group">
                <div class="h-24 w-auto flex items-center justify-center mb-3">
                    <img src="{{ asset('storage/capeb-logo-png_seeklogo-25882.png') }}" alt="CAPEB" class="h-full w-auto object-contain">
                </div>
            </div>
            <!-- FFB -->
            <div class="flex flex-col items-center group">
                <div class="h-24 w-auto flex items-center justify-center mb-3">
                    <img src="{{ asset('storage/Logo-fede-francaise-batiment.png') }}" alt="FFB" class="h-full w-auto object-contain">
                </div>
            </div>
            <!-- AXA -->
            <div class="flex flex-col items-center group">
                <div class="h-24 w-auto flex items-center justify-center mb-3">
                     <img src="{{ asset('storage/AXA_Logo.svg.png') }}" alt="Assurance AXA" class="h-full w-auto object-contain">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- About / CTA Section -->
<section class="py-24 bg-teal-900 text-white relative overflow-hidden" id="qui-sommes-nous">
    <!-- Decorative blobs -->
    <div class="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 rounded-full bg-teal-800 blur-3xl opacity-50"></div>
    <div class="absolute bottom-0 left-0 -ml-20 -mb-20 w-96 h-96 rounded-full bg-teal-600 blur-3xl opacity-30"></div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="lg:grid lg:grid-cols-2 lg:gap-16 items-center">
             <div>
              
                
                <h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl mb-6">DÉCO BAT : Une Référence de Confiance</h2>
                <div class="space-y-6 text-lg text-teal-100">
                    <p>
                        <strong>DÉCO BAT</strong>, Société par actions simplifiée à associé unique (SASU) au capital de <strong>50K€</strong>, est votre expert local certifié.
                    </p>
                    <p>
                        Avec une équipe à taille humaine de <strong>5 à 10 collaborateurs</strong> qualifiés, nous intervenons avec réactivité et professionnalisme pour tous vos projets dans le Val d'Oise (95) et ses environs.
                    </p>
                    <p class="text-sm opacity-80">
                        SIRET : 853 030 294 00047 R.C.S. Pontoise
                    </p>
                    
                    <h3 class="text-2xl font-bold text-white mt-8 mb-6">Nos engagements pour tous vos projets</h3>
                    
                    <ul class="space-y-6">
                        <li class="flex items-start">
                            <span class="flex-shrink-0 h-10 w-10 rounded-full bg-teal-400 flex items-center justify-center mr-4 mt-1">
                                <svg class="w-6 h-6 text-teal-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                                </svg>
                            </span>
                            <div>
                                <h4 class="font-bold text-white text-lg mb-1">Accompagnement personnalisé</h4>
                                <p class="text-teal-100 text-base">Un interlocuteur unique vous accompagne à chaque étape du projet.</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <span class="flex-shrink-0 h-10 w-10 rounded-full bg-teal-400 flex items-center justify-center mr-4 mt-1">
                                <svg class="w-6 h-6 text-teal-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                                </svg>
                            </span>
                            <div>
                                <h4 class="font-bold text-white text-lg mb-1">Devis clair et sans surprise</h4>
                                <p class="text-teal-100 text-base">Un chiffrage détaillé pour garantir transparence et sérénité.</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <span class="flex-shrink-0 h-10 w-10 rounded-full bg-teal-400 flex items-center justify-center mr-4 mt-1">
                                <svg class="w-6 h-6 text-teal-900" 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>
                            </span>
                            <div>
                                <h4 class="font-bold text-white text-lg mb-1">Le soin du travail bien fait</h4>
                                <p class="text-teal-100 text-base">On prend le temps de bien faire, du début à la fin du chantier.</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <span class="flex-shrink-0 h-10 w-10 rounded-full bg-teal-400 flex items-center justify-center mr-4 mt-1">
                                <svg class="w-6 h-6 text-teal-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                </svg>
                            </span>
                            <div>
                                <h4 class="font-bold text-white text-lg mb-1">Respect des délais convenus</h4>
                                <p class="text-teal-100 text-base">Un planning défini à l'avance pour des travaux livrés dans les temps.</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="mt-10">
                    <a href="{{ route('contact') }}" class="inline-block bg-white py-4 px-10 border border-transparent rounded-lg font-bold text-teal-900 hover:bg-teal-50 hover:shadow-lg transition-all transform hover:-translate-y-1">
                        Contactez-nous aujourd'hui
                    </a>
                </div>
            </div>
            <div class="mt-12 lg:mt-0 relative h-full">
                <!-- Card Container with Thematic Background -->
                <div class="rounded-2xl overflow-hidden shadow-2xl h-full min-h-[400px] relative group flex items-center justify-center p-10">
                    
                    <!-- Background Image (Architectural/Construction Theme) -->
                    <div class="absolute inset-0 z-0">
                        <img src="https://images.unsplash.com/photo-1503387762-592deb58ef4e?q=80&w=1600&auto=format&fit=crop" 
                             alt="Background Architecture" 
                             class="w-full h-full object-cover opacity-20 filter blur-[2px] scale-110">
                    </div>

                    <!-- Gradient Overlay for Legibility -->
                    <div class="absolute inset-0 z-0 bg-gradient-to-br from-white/95 via-white/80 to-teal-50/50"></div>
                    
                    <!-- Decorative Circle (Brand Colors) -->
                    <div class="absolute w-80 h-80 bg-gradient-to-tr from-teal-100/40 to-orange-100/40 rounded-full blur-3xl opacity-60 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 animate-pulse mb-8"></div>
                    
                    <!-- Logo -->
                    <img class="relative z-10 object-contain w-full max-w-sm transform group-hover:scale-105 transition-transform duration-500 drop-shadow-xl" 
                         src="{{ asset('storage/logo_decobat1.png') }}" 
                         alt="Logo DÉCO BAT">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Partners Section -->
<section class="py-16 bg-white" id="partenaires">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-gray-900">Nos Partenaires Stratégiques</h2>
            <div class="w-20 h-1 bg-teal-600 mx-auto rounded-full mt-4"></div>
            <p class="mt-4 text-xl text-gray-500">Une collaboration d'experts pour la réussite de vos projets.</p>
        </div>

        <div class="bg-gray-50 rounded-2xl p-12 text-center border border-gray-100 shadow-sm hover:shadow-md transition-shadow max-w-4xl mx-auto">
            <div class="mb-8 flex flex-col md:flex-row justify-center items-center gap-8">
                 <!-- Main Partner Logo -->
                 <a href="https://www.energie-pro-consult.fr/" target="_blank" rel="noopener noreferrer" class="group block cursor-pointer transition-transform hover:scale-105 duration-300">
                    <img src="https://primary.jwwb.nl/public/w/i/n/temp-sqqqcrqbebyieqiylsax/image5-high-6kpe3b.png?enable-io=true&width=238" alt="Energie Pro-Consult" class="h-32 w-auto object-contain">
                 </a>
                  <div class="group block transition-transform hover:scale-105 duration-300">
                    <img src="{{ asset('storage/certification-rge.png') }}" alt="Certification RGE" class="h-24 w-auto object-contain opacity-90 hover:opacity-100">
                 </div>
                 <!-- Secondary Logo -->
                 <div class="group block transition-transform hover:scale-105 duration-300">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYXlPao0x1uXknHQIA4fHrCxFr5LWP-Kp4WSgaMdDHYA&s=10" alt="Qualibat RGE" class="h-24 w-auto object-contain opacity-90 hover:opacity-100">
                 </div>
                 
                 <!-- RGE Logo -->
                
            </div>
            
            <h3 class="text-2xl font-bold text-gray-900 mb-6">Etude & Conception</h3>
            
            <div class="flex flex-wrap justify-center gap-4 text-lg font-medium text-gray-700">
                                <span class="px-6 py-3 bg-white rounded-full border border-gray-200 shadow-sm hover:border-teal-400 hover:text-teal-600 transition-colors">AMO (Assistance à Maîtrise d'Ouvrage)</span>

                <span class="px-6 py-3 bg-white rounded-full border border-gray-200 shadow-sm hover:border-teal-400 hover:text-teal-600 transition-colors">AE (Audit Énergétique)</span>
                                <span class="px-6 py-3 bg-white rounded-full border border-gray-200 shadow-sm hover:border-teal-400 hover:text-teal-600 transition-colors">DPE (Diagnostic Performance Énergétique)</span>

            </div>
        </div>
    </div>
</section>
@endsection