@extends("layouts.app")

@section('title', '- Modern Interior Design')
@section('meta_description', 'Innovative and contemporary interior design solutions')

@section('content')
<div class="modern-home">
    <!-- Hero Section with Full-Width Slider -->
    <section class="relative h-screen">
        <div class="swiper hero-slider">
            <div class="swiper-wrapper">
            @forelse($banners as $slide)
    <div class="swiper-slide bg-cover bg-center" 
         style="background-image: url('{{ $slide->image }}'); 
                background-size: cover; 
                background-position: center; 
                min-height: 100vh; 
                width: 100%; 
                display: flex; 
                align-items: center; 
                justify-content: center;">
        <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
            <div class="text-center text-white max-w-3xl px-4">
                <h1 class="text-4xl md:text-6xl font-bold mb-6 tracking-tight">{{ $slide->title }}</h1>
                <p class="text-xl md:text-2xl mb-8 opacity-80">{{ $slide->subtitle }}</p>
                <a href="{{ $slide->button_link ?? route('contact.index') }}" class="btn btn-primary px-10 py-4 text-lg rounded-full hover:bg-opacity-90 transition bg-blue-600 text-white">
                    {{ $slide->button_text ?? 'Start Your Project' }}
                </a>
            </div>
        </div>
    </div>
@empty
    <div class="swiper-slide bg-cover bg-center" 
         style="background-image: url('{{ asset('images/home-hero.jpg') }}'); 
                background-size: cover; 
                background-position: center; 
                min-height: 100vh; 
                width: 100%; 
                display: flex; 
                align-items: center; 
                justify-content: center;">
        <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
            <div class="text-center text-white max-w-3xl px-4">
                <h1 class="text-4xl md:text-6xl font-bold mb-6 tracking-tight">Welcome to Interior Design</h1>
                <p class="text-xl md:text-2xl mb-8 opacity-80">Transforming Spaces, Creating Experiences</p>
                <a href="{{ route('contact.index') }}" class="btn btn-primary px-10 py-4 text-lg rounded-full hover:bg-opacity-90 transition bg-blue-600 text-white">
                    Start Your Project
                </a>
            </div>
        </div>
    </div>
@endforelse
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </section>

    
    <!-- Featured Projects Grid -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12 text-gray-800">Our Latest Collections</h2>
            <div class="grid md:grid-cols-3 gap-8">
                @forelse($featuredProjects as $project)
                <div class="group relative overflow-hidden rounded-lg shadow-lg">
                    <img src="{{ asset($project->featured_image) }}" alt="{{ $project->title }}" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500">
                    <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-70 transition duration-500 flex flex-col items-center justify-center text-white text-center p-4">
                        <h3 class="text-xl font-bold opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition duration-500">{{ $project->title }}</h3>
                        <a href="{{ route('projects.show', $project->slug) }}" class="opacity-0 group-hover:opacity-100 mt-4 px-6 py-2 border border-white rounded-full transform translate-y-4 group-hover:translate-y-0 transition duration-500 delay-100">
                            View Project
                        </a>
                    </div>
                </div>
                @empty
                <div class="col-span-3 text-center py-8">
                    <p class="text-gray-500">No featured projects available at the moment.</p>
                </div>
                @endforelse
            </div>
        </div>
    </section>

    <!-- Why Choose Us Section -->
<section class="py-16 bg-gray-100">
    <div class="container mx-auto px-4">
        <h2 class="text-3xl md:text-4xl font-bold text-center mb-12 text-gray-800">Why Choose Our Textiles</h2>
        <div class="text-center mb-12">
            <p class="text-xl text-gray-700 max-w-3xl mx-auto">At Fabric Fusion, we blend traditional craftsmanship with modern innovation to create textiles that inspire.</p>
        </div>
        <div class="grid md:grid-cols-4 gap-8">
            <div class="text-center p-6 bg-white rounded-lg shadow-md hover:shadow-xl transition duration-300">
                <div class="mb-4 flex items-center justify-center">
                    <svg class="w-16 h-16 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <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"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-semibold mb-4 text-gray-800">Premium Quality</h3>
                <p class="text-gray-600">Our textiles are crafted using the finest materials and meticulous attention to detail.</p>
            </div>
            <div class="text-center p-6 bg-white rounded-lg shadow-md hover:shadow-xl transition duration-300">
                <div class="mb-4 flex items-center justify-center">
                    <svg class="w-16 h-16 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-semibold mb-4 text-gray-800">Sustainable Practices</h3>
                <p class="text-gray-600">We're committed to eco-friendly production methods that respect our planet.</p>
            </div>
            <div class="text-center p-6 bg-white rounded-lg shadow-md hover:shadow-xl transition duration-300">
                <div class="mb-4 flex items-center justify-center">
                    <svg class="w-16 h-16 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <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"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-semibold mb-4 text-gray-800">Award-Winning Design</h3>
                <p class="text-gray-600">Our unique patterns and innovative designs have received industry recognition.</p>
            </div>
            <div class="text-center p-6 bg-white rounded-lg shadow-md hover:shadow-xl transition duration-300">
                <div class="mb-4 flex items-center justify-center">
                    <svg class="w-16 h-16 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <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"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-semibold mb-4 text-gray-800">Durable & Long-lasting</h3>
                <p class="text-gray-600">Created to withstand the test of time, our fabrics maintain their beauty for years.</p>
            </div>
        </div>
    </div>
</section>
    
    

    <!-- Gallery Section -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12 text-gray-800">Our Gallery</h2>
            
            <div class="grid grid-cols-2 md:grid-cols-3 gap-6 mb-8">
                @php
                    $galleryImages = [
                        'gal1.jpg',
                        'gal2.jpg',
                        'gal3.jpg',
                        'gal4.jpg',
                        'gal5.jpg',
                        'gal6.jpg'
                    ];
                @endphp
                
                @foreach($galleryImages as $index => $image)
                    <div class="group relative overflow-hidden rounded-lg shadow-lg">
                        <img 
                            src="{{ asset('storage/gallery/' . $image) }}" 
                            alt="Gallery Image {{ $index + 1 }}" 
                            class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500"
                        >
                        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition duration-500 flex items-center justify-center">
                            <a href="{{ route('projects') }}" class="opacity-0 group-hover:opacity-100 bg-white text-gray-900 px-6 py-3 rounded-full shadow-lg transform translate-y-4 group-hover:translate-y-0 transition duration-500">
                                View More
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Testimonials Carousel -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12 text-gray-800">What Our Clients Say</h2>
            <div class="swiper testimonial-slider">
                <div class="swiper-wrapper">
                    @forelse($testimonials as $testimonial)
                    <div class="swiper-slide">
                        <div class="bg-gray-100 p-8 rounded-lg text-center max-w-2xl mx-auto">
                            <p class="text-xl italic mb-6 text-gray-700">"{{ $testimonial->content }}"</p>
                            <div class="flex items-center justify-center">
                                <img src="{{ asset($testimonial->client_image) }}" alt="{{ $testimonial->client_name }}" class="w-16 h-16 rounded-full mr-4 object-cover">
                                <div>
                                    <h4 class="font-semibold text-gray-800">{{ $testimonial->client_name }}</h4>
                                    <p class="text-gray-600">{{ $testimonial->client_position }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="swiper-slide">
                        <div class="bg-gray-100 p-8 rounded-lg text-center max-w-2xl mx-auto">
                            <p class="text-xl italic mb-6 text-gray-700">"We were amazed by the transformation of our space. The team was professional and delivered beyond our expectations."</p>
                            <div class="flex items-center justify-center">
                                <div class="w-16 h-16 rounded-full mr-4 bg-gray-300 flex items-center justify-center">
                                    <span class="text-gray-500 text-2xl">👤</span>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-gray-800">Sample Client</h4>
                                    <p class="text-gray-600">Happy Customer</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforelse
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>
            
            <div class="text-center">
                <a href="{{ route('projects') }}" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-8 rounded-md transition-colors duration-300">
                    Explore All Collections
                </a>
            </div>
        </div>
    </section>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        new Swiper('.hero-slider', {
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            }
        });

        new Swiper('.testimonial-slider', {
            loop: true,
            slidesPerView: 1,
            spaceBetween: 30,
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            }
        });
    });
</script>
@endpush
@endsection