@extends('layouts.app')

@section('title', 'Accueil')

@push('styles')
<style>
    .hero-slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }

    .hero-slide.active {
        opacity: 1;
        z-index: 1;
    }

    .hero-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

</style>
@endpush

@section('content')
{{-- Hero Slider --}}
<div class="relative h-[70vh] min-h-[500px] overflow-hidden">
    @php
    $slides = [
    [
    'image' => 'https://images.unsplash.com/photo-1621905251189-08b45d6a269e?w=1920&q=80',
    'title' => 'Solutions Électriques Industrielles',
    'subtitle' => 'Maintenance, installation et fourniture de matériel'
    ],
    [
    'image' => 'https://images.unsplash.com/photo-1473341304170-971dccb5ac1e?w=1920&q=80',
    'title' => 'Éclairage Public & Bâtiment',
    'subtitle' => 'Conception et réalisation de vos projets'
    ],
    [
    'image' => 'https://images.unsplash.com/photo-1581092160562-40aa08e78837?w=1920&q=80',
    'title' => 'Climatisation & Froid',
    'subtitle' => 'Industriel et domestique'
    ],
    [
    'image' => 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1920&q=80',
    'title' => 'HTA BTA - Groupes Électrogènes',
    'subtitle' => 'Expertise en mécanique électricité'
    ],
    ];
    @endphp

    @foreach($slides as $index => $slide)
    <div class="hero-slide {{ $index === 0 ? 'active' : '' }}" data-slide="{{ $index }}">
        <img src="{{ $slide['image'] }}" alt="{{ $slide['title'] }}">
        <div class="absolute inset-0 flex items-center justify-center">
            <div class="text-center text-white px-4 max-w-4xl">
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-4 animate-fade-in">{{ $slide['title'] }}</h1>
                <p class="text-xl md:text-2xl text-amber-200">{{ $slide['subtitle'] }}</p>
                <div class="mt-8 flex gap-4 justify-center flex-wrap">
                    <a href="{{ route('services') }}" class="bg-amber-500 hover:bg-amber-600 text-white px-8 py-4 rounded-lg font-semibold text-lg transition shadow-lg">
                        Nos services
                    </a>
                    <a href="{{ route('devis') }}" class="border-2 border-white hover:bg-white hover:text-slate-900 text-white px-8 py-4 rounded-lg font-semibold text-lg transition">
                        Demander un devis
                    </a>
                </div>
            </div>
        </div>
    </div>
    @endforeach

    {{-- Slider indicators --}}
    <div class="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 flex gap-2">
        @foreach($slides as $index => $slide)
        <button type="button" class="slider-dot w-3 h-3 rounded-full bg-white/50 hover:bg-white/80 transition {{ $index === 0 ? 'bg-amber-500' : '' }}" data-slide="{{ $index }}" aria-label="Slide {{ $index + 1 }}"></button>
        @endforeach
    </div>

    {{-- Prev/Next --}}
    <button type="button" id="slider-prev" class="absolute left-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 rounded-full bg-white/20 hover:bg-white/40 flex items-center justify-center text-white transition">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
    </button>
    <button type="button" id="slider-next" class="absolute right-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 rounded-full bg-white/20 hover:bg-white/40 flex items-center justify-center text-white transition">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
    </button>
</div>

{{-- Services preview --}}
<section class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold text-slate-800 mb-4">Nos Prestations</h2>
            <p class="text-slate-600 max-w-2xl mx-auto">Des solutions complètes pour tous vos besoins en électricité industrielle et bâtiment</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            @php
            $services = [
            ['icon' => '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', 'title' => 'Maintenance industrielle', 'desc' => 'Chaudières, compresseurs, groupes électrogènes'],
            ['icon' => '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', 'title' => 'Éclairage public', 'desc' => 'Conception et installation'],
            ['icon' => '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', 'title' => 'Ouvrage bâtiment', 'desc' => 'Installations électriques complètes'],
            ['icon' => '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', 'title' => 'Climatisation & Froid', 'desc' => 'Industriel et domestique'],
            ];
            @endphp
            @foreach($services as $service)
            <div class="group p-6 rounded-2xl bg-slate-50 hover:bg-amber-50 border border-slate-100 hover:border-amber-200 transition-all duration-300 hover:shadow-xl">
                <div class="w-14 h-14 rounded-xl bg-amber-500/10 group-hover:bg-amber-500/20 flex items-center justify-center mb-4 transition">
                    <svg class="w-7 h-7 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $service['icon'] }}" /></svg>
                </div>
                <h3 class="font-bold text-slate-800 mb-2">{{ $service['title'] }}</h3>
                <p class="text-slate-600 text-sm">{{ $service['desc'] }}</p>
            </div>
            @endforeach
        </div>

        <div class="text-center mt-12">
            <a href="{{ route('services') }}" class="inline-flex items-center gap-2 text-amber-600 font-semibold hover:text-amber-700">
                Voir tous nos services
                <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>
        </div>
    </div>
</section>

{{-- Pourquoi nous choisir --}}
<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 engagement</span>
            <h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-6">Pourquoi nous choisir ?</h2>
            <p class="text-slate-600 text-lg max-w-2xl mx-auto">Les atouts qui font la différence pour vos projets électriques.</p>
        </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-white border border-slate-100 hover:border-amber-200/60 hover:shadow-lg 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 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 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-amber-400/10"></div>
    <div class="max-w-4xl mx-auto px-4 text-center relative z-10">
        <h2 class="text-2xl md:text-3xl font-bold text-white mb-4">Besoin d'un devis ou d'une intervention ?</h2>
        <p class="text-amber-100 mb-6">Notre équipe d'experts est à votre disposition pour étudier votre projet</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-6 py-3 rounded-xl font-semibold transition shadow-lg">
                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-6 py-3 rounded-xl font-semibold transition">
                Nous contacter
            </a>
        </div>
    </div>
</section>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const slides = document.querySelectorAll('.hero-slide');
        const dots = document.querySelectorAll('.slider-dot');
        const prevBtn = document.getElementById('slider-prev');
        const nextBtn = document.getElementById('slider-next');
        let current = 0;
        let interval;

        function goToSlide(index) {
            slides.forEach(s => s.classList.remove('active'));
            dots.forEach(d => d.classList.remove('bg-amber-500'));
            current = (index + slides.length) % slides.length;
            slides[current].classList.add('active');
            dots[current].classList.add('bg-amber-500');
        }

        function next() {
            goToSlide(current + 1);
        }

        function prev() {
            goToSlide(current - 1);
        }

        prevBtn ? .addEventListener('click', () => {
            prev();
            resetInterval();
        });
        nextBtn ? .addEventListener('click', () => {
            next();
            resetInterval();
        });
        dots.forEach((d, i) => d.addEventListener('click', () => {
            goToSlide(i);
            resetInterval();
        }));

        function resetInterval() {
            clearInterval(interval);
            interval = setInterval(next, 5000);
        }
        interval = setInterval(next, 5000);
    });

</script>
@endpush
@endsection
