@extends('layouts.app')

@section('styles')
<style>
.hero-slider {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    margin: 20px;
    height: 600px;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

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

.hero-slide-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 6rem 5rem;
    height: 100%;
}

.hero-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.hero-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-dot.active {
    background: white;
    transform: scale(1.2);
}
</style>
@endsection

@section('content')

    <!-- ===== 3. HERO SECTION ===== -->
    <section class="section" id="hero">
        <div class="hero-slider">
            @forelse($heroImages as $index => $image)
            <div class="hero-slide @if($index === 0) active @endif" style="background-image: url('{{ asset('storage/' . $image->image_path) }}');">
                <div class="hero-slide-content">
                    <div>
                        <div class="hero-content">
                            <h1 style="color: white; font-size: 3rem;">{{ $image->title }}</h1>
                            @if($image->description)
                            <p style="color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; max-width: 95%;">{{ $image->description }}</p>
                            @endif
                            <div class="hero-cta">
                                @if($image->button_text && $image->button_link)
                                    @if(str_starts_with($image->button_link, '#'))
                                    <button class="btn" onclick="document.getElementById('{{ substr($image->button_link, 1) }}').scrollIntoView({behavior: 'smooth'})">{{ $image->button_text }}</button>
                                    @else
                                    <a href="{{ $image->button_link }}" class="btn">{{ $image->button_text }}</a>
                                    @endif
                                @else
                                <button class="btn" onclick="document.getElementById('wallpaper').scrollIntoView({behavior: 'smooth'})">Browse Wallpaper Ranges</button>
                                <button class="btn btn--secondary" onclick="document.getElementById('consultation').scrollIntoView({behavior: 'smooth'})">Book a Free Consultation</button>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div></div>
                </div>
            </div>
            @empty
            <!-- Fallback hero images if none are configured in admin -->
            <div class="hero-slide active" style="background-image: url('https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=1200&q=80');">
                <div class="hero-slide-content">
                    <div>
                        <div class="hero-content">
                            <h1 style="color: white; font-size: 3rem;">Transform Your Spaces with Custom Wallpaper</h1>
                            <p style="color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; max-width: 95%;">Discover our curated collections of premium wallpapers and custom-printed fabrics, designed to elevate your interior aesthetic.</p>
                            <div class="hero-cta">
                                <button class="btn" onclick="document.getElementById('wallpaper').scrollIntoView({behavior: 'smooth'})">Browse Wallpaper Ranges</button>
                                <button class="btn btn--secondary" onclick="document.getElementById('consultation').scrollIntoView({behavior: 'smooth'})">Book a Free Consultation</button>
                            </div>
                        </div>
                    </div>
                    <div></div>
                </div>
            </div>

            <div class="hero-slide" style="background-image: url('https://images.unsplash.com/photo-1631049307264-da0ec9d70304?w=1200&q=80');">
                <div class="hero-slide-content">
                    <div>
                        <div class="hero-content">
                            <h1 style="color: white; font-size: 3rem;">Luxury Designs for Every Room</h1>
                            <p style="color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; max-width: 95%;">From botanical motifs to contemporary patterns, find the perfect wallpaper to match your style.</p>
                            <div class="hero-cta">
                                <button class="btn" onclick="document.getElementById('wallpaper').scrollIntoView({behavior: 'smooth'})">Explore Collections</button>
                            </div>
                        </div>
                    </div>
                    <div></div>
                </div>
            </div>

            <div class="hero-slide" style="background-image: url('https://images.unsplash.com/photo-1568605114967-8130f3a36994?w=1200&q=80');">
                <div class="hero-slide-content">
                    <div>
                        <div class="hero-content">
                            <h1 style="color: white; font-size: 3rem;">Custom Printed to Perfection</h1>
                            <p style="color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; max-width: 95%;">Every design is crafted with precision and printed to your exact specifications using eco-friendly materials.</p>
                            <div class="hero-cta">
                                <button class="btn" onclick="document.getElementById('sustainability').scrollIntoView({behavior: 'smooth'})">Learn About Our Process</button>
                            </div>
                        </div>
                    </div>
                    <div></div>
                </div>
            </div>
            @endforelse

            <div class="hero-dots">
                @forelse($heroImages as $index => $image)
                <div class="hero-dot @if($index === 0) active @endif" data-slide="{{ $index }}"></div>
                @empty
                <div class="hero-dot active" data-slide="0"></div>
                <div class="hero-dot" data-slide="1"></div>
                <div class="hero-dot" data-slide="2"></div>
                @endforelse
            </div>
        </div>
    </section>

    <!-- ===== 4. WALLPAPER RANGES ===== -->
    <section class="section section--light" id="wallpaper">
        <div class="container">
            <h2>Wallpaper Ranges</h2>
            <p>Explore our carefully curated collections, from botanical motifs to contemporary geometric patterns. Each range is designed to inspire and transform your interior spaces.</p>
            
            <div class="grid grid--3">
                @forelse($categories as $category)
                <div class="product-card">
                    <div class="card-image" style="background-image: url('{{ $category->image }}'); background-size: cover; background-position: center;"></div>
                    <div class="card-content">
                        <div class="card-title">{{ $category->name }}</div>
                        <p class="card-description">{{ $category->description }}</p>
                    </div>
                </div>
                @empty
                <p>No categories available</p>
                @endforelse
            </div>
        </div>
    </section>

    <!-- ===== 5. LATEST WALLPAPERS ===== -->
    <section class="section" id="featured">
        <div class="container">
            <h2>Our Latest Wallpapers</h2>
            <p>Discover our newest arrivals, hand-selected for their design excellence and quality.</p>
            
            <div class="grid grid--3">
                @forelse($featuredWallpapers as $product)
                    @include('components.product-card', ['product' => $product])
                @empty
                    <p>No featured wallpapers available</p>
                @endforelse
            </div>

            <div style="text-align: center; margin-top: var(--spacing-lg);">
                <a href="{{ route('wallpapers') }}" class="btn">View All Wallpapers</a>
            </div>
        </div>
    </section>

    <!-- ===== 5.5 FEATURED MURALS ===== -->
    <section class="section section--light" id="featured-murals">
        <div class="container">
            <h2>Featured Murals</h2>
            <p>Stunning accent wall murals to transform any room. Single image, non-repeating designs perfect for making a statement.</p>
            
            <div class="grid grid--3">
                @forelse($featuredMurals as $product)
                    @include('components.product-card', ['product' => $product])
                @empty
                    <p>No featured murals available</p>
                @endforelse
            </div>

            <div style="text-align: center; margin-top: var(--spacing-lg);">
                <a href="{{ route('murals') }}" class="btn">View All Murals</a>
            </div>
        </div>
    </section>

    <!-- ===== 6. FREE CONSULTATION CTA ===== -->
    <section class="section section--highlight" id="consultation">
        <div class="container" style="text-align: center;">
            <h2>Free Online Wallpaper Consultation</h2>
            <p style="max-width: 600px; margin: 0 auto var(--spacing-lg);">
                Unsure which design to choose? Our design experts offer complimentary 15-minute virtual consultations to help you select the perfect wallpaper and discuss customization options for your unique space.
            </p>
            <button class="btn btn--secondary">Schedule a Consultation</button>
        </div>
    </section>

    <!-- ===== 7. RECENT PROJECTS ===== -->
    <section class="section section--light" id="projects">
        <div class="container">
            <h2>Recent Projects</h2>
            <p>Our work spans luxury hotels, high-end residences, and commercial spaces. See how we transform environments with our custom wallpaper and fabric solutions.</p>
            
            <div class="grid grid--3">
                <div class="product-card">
                    <div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1631049307264-da0ec9d70304?w=500&q=80'); background-size: cover; background-position: center;"></div>
                    <div class="card-content">
                        <div class="card-title">Luxury Resort Redesign</div>
                        <p class="card-description">Custom botanical wallpapers throughout the main lobby and guest suites.</p>
                        <a href="#" class="btn btn--text">View Project</a>
                    </div>
                </div>

                <div class="product-card">
                    <div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1631049307264-da0ec9d70304?w=500&q=80'); background-size: cover; background-position: center;"></div>
                    <div class="card-content">
                        <div class="card-title">Modern Executive Office</div>
                        <p class="card-description">Bespoke geometric wallpaper for corporate interiors with sustainable materials.</p>
                        <a href="#" class="btn btn--text">View Project</a>
                    </div>
                </div>

                <div class="product-card">
                    <div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1568605114967-8130f3a36994?w=500&q=80'); background-size: cover; background-position: center;"></div>
                    <div class="card-content">
                        <div class="card-title">Residential Penthouse</div>
                        <p class="card-description">Custom-printed fabrics and vintage-inspired wallpapers for a luxury residence.</p>
                        <a href="#" class="btn btn--text">View Project</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== 8. CERTIFIED GREEN / SUSTAINABILITY ===== -->
    <section class="section" id="sustainability">
        <div class="container">
            <div class="badge" style="border-radius: 20px;">
                <div class="badge-icon">♻️</div>
                <div class="badge-text">
                    <h4>Certified Eco-Conscious</h4>
                    <p>Our wallpapers and fabrics are printed using low-VOC inks and sustainable materials sourced responsibly.</p>
                </div>
            </div>
            
            <div class="card--pink">
                <h3 style="color: var(--accent-dark); margin-bottom: var(--spacing-md);">Sustainability Commitment</h3>
                <ul style="list-style: none; color: var(--text-secondary);">
                    <li style="margin-bottom: 12px;"><strong>Low-VOC Inks:</strong> Non-toxic printing processes safe for your home and the environment.</li>
                    <li style="margin-bottom: 12px;"><strong>Local Production:</strong> Manufactured locally to reduce carbon footprint and ensure quality.</li>
                    <li style="margin-bottom: 12px;"><strong>Sustainable Materials:</strong> Sourced from certified sustainable suppliers with ethical practices.</li>
                    <li style="margin-bottom: 12px;"><strong>Recyclable Packaging:</strong> All packaging materials are fully recyclable or compostable.</li>
                </ul>
                <a href="#" class="btn btn--text" style="margin-top: var(--spacing-md);">Learn More About Our Practices</a>
            </div>
        </div>
    </section>

    <!-- ===== 9. CUSTOM FABRICS ===== -->
    <section class="section section--light" id="fabrics">
        <div class="container">
            <h2>Custom Printed Fabrics</h2>
            <div class="two-col">
                <div class="two-col-text">
                    <h3>Extend Your Design to Soft Furnishings</h3>
                    <p>Love a wallpaper design? We can print it onto premium fabrics for upholstery, curtains, cushions, and more. Create a cohesive interior where your wallpaper designs flow seamlessly across all textiles.</p>
                    <ul style="list-style: none; color: var(--text-secondary);">
                        <li style="margin-bottom: 8px;">✓ Custom upholstery and furniture fabric</li>
                        <li style="margin-bottom: 8px;">✓ Bespoke curtain and drape materials</li>
                        <li style="margin-bottom: 8px;">✓ Decorative cushion and throw pillow fabric</li>
                        <li style="margin-bottom: 8px;">✓ Bedding and linens custom printing</li>
                    </ul>
                    <button class="btn" style="margin-top: var(--spacing-lg);">Browse Fabrics</button>
                </div>
                <div class="two-col-image">
                    <img src="https://images.unsplash.com/photo-1578500494198-246f612d03b3?w=500&q=80" alt="Fabric Sample" style="width: 100%; height: auto; border-radius: 8px; object-fit: cover;">
                </div>
            </div>
        </div>
    </section>

    <!-- ===== 10. DECOR SHOP TEASER =====
    <section class="section" id="shop">
        <div class="container">
            <h2>Decor Shop</h2>
            <p>Discover curated home décor pieces that complement our wallpaper and fabric collections. From wall hangings to tableware.</p>
            
            <div class="grid grid--3">
                <div class="card">
                    <div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1578926314433-8e18d4f89b16?w=400&q=80'); background-size: cover; background-position: center;"></div>
                    <div class="card-content">
                        <div class="card-title">Artisan Wall Hangings</div>
                        <p class="card-description">Hand-crafted textile wall art pieces.</p>
                    </div>
                </div>

                <div class="card">
                    <div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1578500494198-246f612d03b3?w=400&q=80'); background-size: cover; background-position: center;"></div>
                    <div class="card-content">
                        <div class="card-title">Designer Tableware</div>
                        <p class="card-description">Coordinated dinnerware sets with exclusive designs.</p>
                    </div>
                </div>

                <div class="card">
                    <div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1606389506042-4bc31f98b485?w=400&q=80'); background-size: cover; background-position: center;"></div>
                    <div class="card-content">
                        <div class="card-title">Decorative Accents</div>
                        <p class="card-description">Curated home accessories to complete your space.</p>
                    </div>
                </div>
            </div>

            <div style="text-align: center; margin-top: var(--spacing-lg);">
                <button class="btn btn--secondary">Visit Decor Shop</button>
            </div>
        </div>
    </section>

    <!-- ===== 11. PORTFOLIO GALLERY ===== -->
    <!-- <section class="section section--light" id="portfolio">
        <div class="container">
            <h2>View Our Portfolio</h2>
            <p>Explore our diverse portfolio showcasing wallpaper and fabric applications across different room types and design styles.</p>
            
            <div class="portfolio-grid">
                <div class="portfolio-item" style="background-image: url('https://images.unsplash.com/photo-1540932239986-310128078e37?w=600&q=80'); background-size: cover; background-position: center;">
                    <div class="portfolio-item-caption">Master Bedroom</div>
                </div>
                <div class="portfolio-item" style="background-image: url('https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?w=600&q=80'); background-size: cover; background-position: center;">
                    <div class="portfolio-item-caption">Living Room</div>
                </div>
                <div class="portfolio-item" style="background-image: url('https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=600&q=80'); background-size: cover; background-position: center;">
                    <div class="portfolio-item-caption">Kitchen Nook</div>
                </div>
                <div class="portfolio-item" style="background-image: url('https://images.unsplash.com/photo-1593642632823-8f785ba67e45?w=600&q=80'); background-size: cover; background-position: center;">
                    <div class="portfolio-item-caption">Home Office</div>
                </div>
                <div class="portfolio-item" style="background-image: url('https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=600&q=80'); background-size: cover; background-position: center;">
                    <div class="portfolio-item-caption">Bathroom Spa</div>
                </div>
                <div class="portfolio-item" style="background-image: url('https://images.unsplash.com/photo-1566073771259-6a8506099945?w=600&q=80'); background-size: cover; background-position: center;">
                    <div class="portfolio-item-caption">Dining Space</div>
                </div>
            </div>

            <div style="text-align: center; margin-top: var(--spacing-lg);">
                <button class="btn">View Full Portfolio</button>
            </div>
        </div>
    </section> -->

    <!-- ===== 12. OUR CLIENTS ===== -->
    <!-- <section class="section" id="clients">
        <div class="container">
            <h2>Brands We've Worked With</h2>
            
            <div class="logo-strip">
                <div class="logo-item">Luxury Hotels Co.</div>
                <div class="logo-item">Interior Design Studio</div>
                <div class="logo-item">Modern Architects Ltd.</div>
                <div class="logo-item">Home & Living Mag</div>
                <div class="logo-item">Premium Resorts Group</div>
                <div class="logo-item">Urban Development</div>
            </div>
        </div>
    </section> -->

    <!-- ===== 13. CONTACT CTA ===== -->
    <section class="section section--highlight" id="contact">
        <div class="container" style="text-align: center;">
            <h2>Ready to Start Your Project?</h2>
            <p style="max-width: 600px; margin: 0 auto var(--spacing-lg); color: var(--text-primary);">
                We'd love to hear about your vision. Send us your room measurements, mood boards, and any design inspirations, and our team will provide a personalized quote and design recommendations.
            </p>
            <button class="btn">Contact Us</button>
        </div>
    </section>

@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const slides = document.querySelectorAll('.hero-slide');
    const dots = document.querySelectorAll('.hero-dot');
    let currentSlide = 0;
    let slideInterval;

    function showSlide(index) {
        slides.forEach(slide => slide.classList.remove('active'));
        dots.forEach(dot => dot.classList.remove('active'));
        
        slides[index].classList.add('active');
        dots[index].classList.add('active');
        currentSlide = index;
    }

    function nextSlide() {
        let next = (currentSlide + 1) % slides.length;
        showSlide(next);
    }

    function startAutoSlide() {
        slideInterval = setInterval(nextSlide, 10000);
    }

    function stopAutoSlide() {
        clearInterval(slideInterval);
    }

    // Dot click handlers
    dots.forEach(dot => {
        dot.addEventListener('click', function() {
            stopAutoSlide();
            showSlide(parseInt(this.dataset.slide));
            startAutoSlide();
        });
    });

    // Start automatic sliding
    startAutoSlide();

    // Pause on hover
    const slider = document.querySelector('.hero-slider');
    slider.addEventListener('mouseenter', stopAutoSlide);
    slider.addEventListener('mouseleave', startAutoSlide);
});
</script>
@endsection
