@extends('layouts.app')

@section('content')
    {{-- Hero Section --}}
    <section class="relative bg-cover bg-center h-screen flex items-center justify-center text-white mt-[-130px]" style="background-image: url('{{ asset('storage/images/hero-home-page.jpg') }}');" data-aos="fade-in">
        <div class="absolute inset-0 bg-black opacity-50"></div>
        <div class="relative z-10 text-center px-6">
            <h1 class="text-4xl md:text-6xl font-extrabold mb-4 leading-tight" style="text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);">
                Building Excellence, Forging Futures
            </h1>
            <p class="text-lg md:text-2xl max-w-4xl mx-auto mb-10" style="text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);">
                Your trusted partner in commercial construction and renovation, delivering unparalleled quality and efficiency across the Greater Houston area.
            </p>
            <a href="{{ route('contact') }}" class="inline-block bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-4 px-10 rounded-full text-lg transition-all duration-300 transform hover:scale-105 shadow-xl">
                Request a Consultation
            </a>
        </div>
    </section>

    {{-- Featured Projects Section --}}
    <section class="bg-white py-20 px-6" data-aos="fade-up">
        <div class="max-w-7xl mx-auto text-center">
            <h2 class="text-4xl font-extrabold mb-4 text-gray-900">Our Impactful Projects</h2>
            <p class="text-lg text-gray-600 mb-16 max-w-3xl mx-auto">We deliver high-quality results that speak for themselves. Explore some of our recent work.</p>
            <div class="grid md:grid-cols-3 gap-8">
                @foreach ($projects as $project) {{-- Display top 3 projects --}}
                    <a href="{{ route('projects.show', $project['slug']) }}" class="group relative overflow-hidden rounded-xl shadow-lg transform hover:-translate-y-2 transition-transform duration-300 block" data-aos="fade-up" data-aos-delay="{{ $loop->index * 100 }}">
                        <img src="{{ $project->images->first() ? asset('storage/' . $project->images->first()->image_path) : asset('storage/images/projects/' . ['commercial-office-renovation.jpg', 'luxury-home-interior-design.jpg', 'modern-kitchen-transformation.jpg'][$loop->index % 3]) }}" alt="{{ $project['title'] }}" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500" loading="lazy">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
                        <div class="absolute bottom-0 inset-x-0 p-6 text-center">
                            <h3 class="text-2xl font-bold text-white mb-2 cursor-pointer">{{ $project['title'] }}</h3>
                            <span class="text-yellow-400 hover:text-yellow-300 font-semibold transition-colors">View Project <i class="fas fa-arrow-right ml-1"></i></span>
                        </div>
                    </a>
                @endforeach
            </div>
            <div class="mt-16">
                <a href="{{ route('projects') }}" class="inline-block bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-4 px-10 rounded-full text-lg transition-all duration-300 transform hover:scale-105 shadow-xl">
                    Discover More Projects
                </a>
            </div>
        </div>
    </section>

    {{-- Trusted By Section --}}
    <section class="bg-gray-50 py-20 px-6" data-aos="fade-up">
        <div class="max-w-7xl mx-auto text-center">
            <h2 class="text-base font-semibold text-gray-500 uppercase tracking-widest mb-16">Trusted By Industry Leaders</h2>
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-y-12 gap-x-8 items-center opacity-75">
                <img src="{{ asset('storage/images/ws1.png') }}" alt="WS1 Logo" class="h-16 w-auto object-contain mx-auto grayscale hover:grayscale-0 transition-all duration-300" loading="lazy">
                <img src="{{ asset('storage/images/millmainsteel1.jpg') }}" alt="Millmainsteel Logo" class="h-16 w-auto object-contain mx-auto grayscale hover:grayscale-0 transition-all duration-300" loading="lazy">
                <img src="{{ asset('storage/images/oakstory1.png') }}" alt="Oakstory Logo" class="h-16 w-auto object-contain mx-auto grayscale hover:grayscale-0 transition-all duration-300" loading="lazy">
                <img src="{{ asset('storage/images/bluewave1.png') }}" alt="Bluewave Logo" class="h-16 w-auto object-contain mx-auto invert transition-all duration-300" loading="lazy">
            </div>
        </div>
    </section>

    {{-- About Section --}}
    <section class="py-20 px-6 bg-white" data-aos="fade-up">
        <div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-16 items-center">
            <div data-aos="fade-right" class="relative">
                <img src="{{ asset('storage/images/home-about.jpg') }}" alt="About IBS Team" class="rounded-xl shadow-2xl w-full h-auto object-cover" loading="lazy">
                <div class="absolute -bottom-8 -right-8 bg-yellow-500 text-white p-6 rounded-full shadow-lg w-48 h-48 flex items-center justify-center text-center font-bold text-xl">
                    <span>20+<br>Years of Experience</span>
                </div>
            </div>
            <div data-aos="fade-left">
                <h2 class="text-4xl font-extrabold mb-6 text-gray-900">Your Foundation for Success</h2>
                <p class="text-lg text-gray-600 mb-6">
                    Since 2022, International Building Services LLC has been a cornerstone of quality in the Greater Houston area. We blend time-honored craftsmanship with modern techniques to deliver exceptional plumbing and general contracting services.
                </p>
                <p class="text-lg text-gray-600 mb-8">
                    Our philosophy is simple: build with integrity, operate with transparency, and create lasting partnerships. We don't just construct buildings; we build your vision.
                </p>
                <a href="{{ route('about') }}" class="inline-block bg-gray-800 hover:bg-black text-white font-bold py-3 px-8 rounded-full text-lg transition-all duration-300">
                    Learn More About Us
                </a>
            </div>
        </div>
    </section>

    {{-- Quantifiable Metrics Section --}}
    <section class="bg-gray-800 text-white py-20 px-6" data-aos="fade-up">
        <div class="max-w-7xl mx-auto">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-12 text-center">
                <div data-aos="fade-up" data-aos-delay="100">
                    <p class="text-6xl font-extrabold text-yellow-500 mb-2">150+</p>
                    <p class="text-xl font-semibold text-gray-300">Projects Delivered</p>
                </div>
                <div data-aos="fade-up" data-aos-delay="200">
                    <p class="text-6xl font-extrabold text-yellow-500 mb-2">99%</p>
                    <p class="text-xl font-semibold text-gray-300">Client Satisfaction Rate</p>
                </div>
                <div data-aos="fade-up" data-aos-delay="300">
                    <p class="text-6xl font-extrabold text-yellow-500 mb-2">100%</p>
                    <p class="text-xl font-semibold text-gray-300">Safety Record</p>
                </div>
            </div>
        </div>
    </section>

    {{-- Services Section --}}
    <section class="py-20 px-6 bg-white" data-aos="fade-up">
        <div class="max-w-7xl mx-auto text-center">
            <h2 class="text-4xl font-extrabold mb-4 text-gray-900">Our Core Services</h2>
            <p class="text-lg text-gray-600 mb-16 max-w-3xl mx-auto">From initial design to final inspection, we offer a comprehensive suite of services to meet your needs.</p>
            <div class="grid md:grid-cols-3 gap-8">
                @foreach ($services as $service)
                    <a href="{{ route('services.show', $service->slug) }}" class="group block bg-gray-50 rounded-xl p-8 shadow-md hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 border-2 border-transparent hover:border-yellow-500" data-aos="fade-up" data-aos-delay="{{ $loop->index * 100 }}">
                        <div class="text-yellow-500 mb-4">
                            <i class="fas {{ $service->icon }} fa-4x"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-800 mb-3 group-hover:text-yellow-600 transition-colors">{{ $service->title }}</h3>
                        <p class="text-gray-600 leading-relaxed">{{ $service->description }}</p>
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    {{-- Testimonials Section --}}
    <section class="py-20 px-6 bg-gray-50" data-aos="fade-up">
        <div class="max-w-7xl mx-auto text-center">
            <h2 class="text-4xl font-extrabold mb-12 text-gray-900">Hear From Our Valued Clients</h2>
            <div class="relative max-w-6xl mx-auto">
                <div class="swiper testimonials-slider relative">
                    <div class="swiper-wrapper items-stretch">
                        @foreach ($testimonials as $testimonial)
                            <div class="swiper-slide h-auto">
                                <div class="bg-white rounded-xl p-8 shadow-lg text-center h-full flex flex-col justify-between min-h-[300px]">
                                    @if ($testimonial->rating)
                                        <div class="flex justify-center text-yellow-500 mb-4">
                                            @for ($i = 0; $i < $testimonial->rating; $i++)
                                                <i class="fas fa-star"></i>
                                            @endfor
                                        </div>
                                    @endif
                                    <div class="flex-grow">
                                        <p class="text-lg text-gray-600 italic">"{{ $testimonial->testimonial_text }}"</p>
                                    </div>
                                    <p class="text-gray-800 font-bold text-xl mt-6">- {{ $testimonial->client_name }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    {{-- Pagination dots removed as requested --}}
                </div>
            </div>
        </div>
    </section>

    {{-- Final Call-to-Action --}}
    <section class="bg-gray-800 py-20 text-white text-center px-6" data-aos="fade-up">
        <div class="max-w-4xl mx-auto">
            <h2 class="text-5xl font-extrabold mb-4">Ready to Build the Future?</h2>
            <p class="text-xl mb-10 max-w-2xl mx-auto">Let's discuss your project. Partner with IBS for unparalleled craftsmanship and reliable, innovative solutions.</p>
            <a href="{{ route('contact') }}" class="inline-block bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-4 px-10 rounded-full text-lg transition-all duration-300 transform hover:scale-105 shadow-xl">
                Get Your Free Estimate
            </a>
        </div>
    </section>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        new Swiper('.testimonials-slider', {
            slidesPerView: 1,
            spaceBetween: 30,
            loop: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            breakpoints: {
                768: {
                    slidesPerView: 2,
                },
                1024: {
                    slidesPerView: 3,
                },
            },
        });
        console.log('Initializing testimonials Swiper...');
    });
</script>
@endpush