@extends('layouts.app')

@section('title', 'Aménagement & Décoration Intérieure | DÉCO BAT')
@section('description', 'Rénovation intérieure : Parquets, carrelage, peinture, plâtrerie et cloisons. Donnez vie à vos projets de décoration.')

@section('content')
<!-- Header -->
<div class="relative bg-purple-900 py-24 sm:py-32">
    <div class="absolute inset-0 overflow-hidden">
        <img src="https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?q=80&w=2000&auto=format&fit=crop" alt="Intérieur Design" class="w-full h-full object-cover opacity-20">
        <div class="absolute inset-0 bg-gradient-to-r from-purple-950 to-purple-900/90 mix-blend-multiply"></div>
    </div>
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center sm:text-left">
        <h1 class="text-4xl font-extrabold text-white sm:text-5xl sm:tracking-tight lg:text-6xl">Aménagement & Décoration</h1>
        <p class="mt-6 text-xl text-purple-100 max-w-3xl">L'art de sublimer votre intérieur. Une expertise artisanale pour des finitions d'exception, du sol au plafond.</p>
    </div>
</div>

<!-- Main Content -->
<div class="bg-white py-16 sm:py-24">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-12 mb-24">
            
            <!-- Service 1: Sols -->
            <div class="bg-gray-50 rounded-2xl p-8 border border-gray-100 transition-all hover:shadow-lg duration-300 group">
                <div class="h-14 w-14 bg-purple-100 rounded-xl flex items-center justify-center mb-6 text-purple-600 group-hover:bg-purple-600 group-hover:text-white transition-colors">
                    <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>
                </div>
                <h3 class="text-2xl font-bold text-gray-900 mb-4">Sols & Parquets</h3>
                <p class="text-gray-600 mb-6 leading-relaxed">
                    Le sol est la fondation esthétique de votre pièce. Nous posons et restaurons vos revêtements avec une précision minutieuse.
                </p>
                <ul class="space-y-4 text-gray-600">
                    <li class="flex items-start">
                        <span class="flex-shrink-0 h-6 w-6 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center mr-3 text-xs font-bold">✓</span>
                        <span><strong>Parquets Massifs & Contrecollés :</strong> Pose traditionnelle, bâton rompu ou point de hongrie. Ponçage et vitrification.</span>
                    </li>
                    <li class="flex items-start">
                        <span class="flex-shrink-0 h-6 w-6 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center mr-3 text-xs font-bold">✓</span>
                        <span><strong>Carrelage & Faïence :</strong> Grands formats, effets marbre ou béton ciré pour cuisine et salle de bain.</span>
                    </li>
                    <li class="flex items-start">
                         <span class="flex-shrink-0 h-6 w-6 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center mr-3 text-xs font-bold">✓</span>
                        <span><strong>Sols Souples :</strong> Vinyles haute qualité et moquettes pour un confort acoustique optimal.</span>
                    </li>
                </ul>
            </div>

            <!-- Service 2: Murs & Plafonds -->
            <div class="bg-gray-50 rounded-2xl p-8 border border-gray-100 transition-all hover:shadow-lg duration-300 group">
                <div class="h-14 w-14 bg-pink-100 rounded-xl flex items-center justify-center mb-6 text-pink-600 group-hover:bg-pink-600 group-hover:text-white transition-colors">
                   <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" /></svg>
                </div>
                <h3 class="text-2xl font-bold text-gray-900 mb-4">Peinture & Plâtrerie</h3>
                <p class="text-gray-600 mb-6 leading-relaxed">
                    Structurez vos espaces et jouez avec la lumière. Nos artisans peintres et plaquistes transforment vos volumes.
                </p>
                <ul class="space-y-4 text-gray-600">
                    <li class="flex items-start">
                        <span class="flex-shrink-0 h-6 w-6 rounded-full bg-pink-100 text-pink-600 flex items-center justify-center mr-3 text-xs font-bold">✓</span>
                        <span><strong>Peinture Haute Décoration :</strong> Finitions mates profondes, velours soyeux ou laques tendues. Application au pistolet Airless.</span>
                    </li>
                    <li class="flex items-start">
                        <span class="flex-shrink-0 h-6 w-6 rounded-full bg-pink-100 text-pink-600 flex items-center justify-center mr-3 text-xs font-bold">✓</span>
                        <span><strong>Agencement sur Mesure :</strong> Création de cloisons verrière, faux-plafonds avec éclairage intégré, bibliothèques en placo.</span>
                    </li>
                    <li class="flex items-start">
                        <span class="flex-shrink-0 h-6 w-6 rounded-full bg-pink-100 text-pink-600 flex items-center justify-center mr-3 text-xs font-bold">✓</span>
                        <span><strong>Enduits Décoratifs :</strong> Stucco, chaux, béton ciré mural pour une touche d'authenticité.</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- UNIFIED GALLERY SECTION -->
<div class="py-20 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-16">
            <h2 class="text-3xl font-bold text-gray-900 mb-4">Nos Services</h2>
            <div class="w-20 h-1 bg-purple-500 mx-auto rounded-full"></div>
            <p class="mt-4 text-xl text-gray-500">Aménagement & Décoration : L'Harmonie des Matières et des Couleurs.</p>
        </div>

        <div class="relative max-w-6xl mx-auto group user-select-none">
            <div class="overflow-hidden rounded-2xl shadow-2xl bg-black aspect-video relative ring-2 ring-gray-100">
                <div id="carousel-track-deco" class="flex transition-transform duration-700 ease-in-out h-full">
                    
                    <!-- Slide 1: Living Room -->
                    <div class="w-full h-full flex-shrink-0 relative">
                        <figure class="h-full w-full relative m-0">
                            <img src="https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?q=80&w=1600&auto=format&fit=crop" class="w-full h-full object-cover" alt="Salon Moderne" loading="lazy">
                            <figcaption class="absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-10 pt-20">
                                <h3 class="text-white font-bold text-3xl font-heading mb-2">Rénovation Complète</h3>
                                <p class="text-purple-300 text-lg">Salon contemporain & Peinture</p>
                            </figcaption>
                        </figure>
                    </div>

                    <!-- Slide 2: Parquet -->
                    <div class="w-full h-full flex-shrink-0 relative">
                        <figure class="h-full w-full relative m-0">
                            <img src="https://images.unsplash.com/photo-1516455590571-18256e5bb9ff?q=80&w=1600&auto=format&fit=crop" class="w-full h-full object-cover" alt="Parquet Chêne" loading="lazy">
                            <figcaption class="absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-10 pt-20">
                                <h3 class="text-white font-bold text-3xl font-heading mb-2">Pose de Parquet</h3>
                                <p class="text-purple-300 text-lg">Chêne massif bâton rompu</p>
                            </figcaption>
                        </figure>
                    </div>

                    <!-- Slide 3: Kitchen / Tiles -->
                    <div class="w-full h-full flex-shrink-0 relative">
                        <figure class="h-full w-full relative m-0">
                            <img src="https://images.unsplash.com/photo-1556911220-e15b29be8c8f?q=80&w=1600&auto=format&fit=crop" class="w-full h-full object-cover" alt="Cuisine Carrelage" loading="lazy">
                            <figcaption class="absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-10 pt-20">
                                <h3 class="text-white font-bold text-3xl font-heading mb-2">Carrelage & Cuisine</h3>
                                <p class="text-purple-300 text-lg">Pose grand format</p>
                            </figcaption>
                        </figure>
                    </div>
                    
                     <!-- Slide 4: Bedroom Painting -->
                    <div class="w-full h-full flex-shrink-0 relative">
                        <figure class="h-full w-full relative m-0">
                            <img src="https://images.unsplash.com/photo-1560448204-603b3fc33ddc?q=80&w=1600&auto=format&fit=crop" class="w-full h-full object-cover" alt="Chambre Peinture" loading="lazy">
                            <figcaption class="absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-10 pt-20">
                                <h3 class="text-white font-bold text-3xl font-heading mb-2">Peinture Décorative</h3>
                                <p class="text-purple-300 text-lg">Finition velours apaisante</p>
                            </figcaption>
                        </figure>
                    </div>

                </div>
            </div>
            <!-- Controls -->
            <button id="prevBtnDeco" class="absolute top-1/2 left-6 -translate-y-1/2 bg-black/50 hover:bg-purple-600 text-white rounded-full p-4 backdrop-blur-md transition-all hover:scale-110 focus:outline-none shadow-lg opacity-0 group-hover:opacity-100 duration-300">
                <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.5" d="M15 19l-7-7 7-7"></path></svg>
            </button>
            <button id="nextBtnDeco" class="absolute top-1/2 right-6 -translate-y-1/2 bg-black/50 hover:bg-purple-600 text-white rounded-full p-4 backdrop-blur-md transition-all hover:scale-110 focus:outline-none shadow-lg opacity-0 group-hover:opacity-100 duration-300">
                <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.5" d="M9 5l7 7-7 7"></path></svg>
            </button>
             <div class="absolute bottom-6 left-1/2 -translate-x-1/2 flex space-x-3">
                <!-- 4 dots -->
                <button class="w-2 h-2 rounded-full bg-white transition-all duration-300 indicator-deco" onclick="goToSlideDeco(0)"></button>
                <button class="w-2 h-2 rounded-full bg-white/50 hover:bg-white transition-all duration-300 indicator-deco" onclick="goToSlideDeco(1)"></button>
                <button class="w-2 h-2 rounded-full bg-white/50 hover:bg-white transition-all duration-300 indicator-deco" onclick="goToSlideDeco(2)"></button>
                <button class="w-2 h-2 rounded-full bg-white/50 hover:bg-white transition-all duration-300 indicator-deco" onclick="goToSlideDeco(3)"></button>
            </div>
        </div>
    </div>
</div>

<div class="mt-16 text-center pb-24">
    <h2 class="text-3xl font-bold text-gray-900 mb-6">Un Projet de Rénovation ?</h2>
    <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">Confiez-nous l'embellissement de votre intérieur. Finitions soignées garanties.</p>
    <a href="{{ route('contact') }}" class="inline-flex items-center justify-center px-8 py-4 border border-transparent rounded-full shadow-lg text-lg font-bold text-white bg-purple-700 hover:bg-purple-800 transition-all transform hover:scale-105">
        Demander un devis Décoration
    </a>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        setupCarousel('carousel-track-deco', 'prevBtnDeco', 'nextBtnDeco', 'indicator-deco', 'goToSlideDeco');
    });

    function setupCarousel(trackId, prevId, nextId, indicatorClass, globalFunc) {
        const track = document.getElementById(trackId);
        if(!track) return;
        const slides = track.children;
        const nextBtn = document.getElementById(nextId);
        const prevBtn = document.getElementById(prevId);
        const indicators = document.querySelectorAll('.' + indicatorClass);
        let currentIndex = 0;
        let startX = 0, currentX = 0, isDragging = false, startTime = 0;

        function updateSlide() {
            track.style.transform = `translateX(-${currentIndex * 100}%)`;
            indicators.forEach((ind, i) => {
                 ind.style.backgroundColor = i === currentIndex ? '#fff' : 'rgba(255,255,255,0.5)';
                 ind.style.transform = i === currentIndex ? 'scale(1.2)' : 'scale(1)';
            });
        }

        function nextSlide() { currentIndex = (currentIndex + 1) % slides.length; updateSlide(); }
        function prevSlide() { currentIndex = (currentIndex - 1 + slides.length) % slides.length; updateSlide(); }

        nextBtn.addEventListener('click', nextSlide);
        prevBtn.addEventListener('click', prevSlide);
        window[globalFunc] = (index) => { currentIndex = index; updateSlide(); };

        function handleStart(e) { isDragging = true; startTime = Date.now(); startX = e.type.includes('mouse') ? e.pageX : e.touches[0].pageX; currentX = startX; track.style.transition = 'none'; }
        function handleMove(e) { if (!isDragging) return; e.preventDefault(); currentX = e.type.includes('mouse') ? e.pageX : e.touches[0].pageX; const diff = currentX - startX; track.style.transform = `translateX(${-currentIndex * 100 + (diff / track.offsetWidth) * 100}%)`; }
        function handleEnd(e) { if (!isDragging) return; isDragging = false; track.style.transition = 'transform 0.7s ease-in-out'; const diff = currentX - startX; const threshold = track.offsetWidth * 0.2; const velocity = Math.abs(diff) / (Date.now() - startTime); if (Math.abs(diff) > threshold || velocity > 0.5) { diff > 0 ? prevSlide() : nextSlide(); } else { updateSlide(); } }

        track.addEventListener('mousedown', handleStart);
        track.addEventListener('mousemove', handleMove);
        track.addEventListener('mouseup', handleEnd);
        track.addEventListener('mouseleave', handleEnd);
        track.addEventListener('touchstart', handleStart, { passive: true });
        track.addEventListener('touchmove', handleMove, { passive: false });
        track.addEventListener('touchend', handleEnd);
        track.querySelectorAll('img').forEach(img => img.addEventListener('dragstart', (e) => e.preventDefault()));
    }
</script>
@endsection