@extends('layouts.app')

@section('title', 'Murals - Premium Custom Designs')

@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);
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-dot.active {
    background: white;
    width: 32px;
    border-radius: 6px;
}

.hero-content {
    color: white;
}

.hero-cta {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.hero-slider:hover .hero-dot {
    background: rgba(255, 255, 255, 0.7);
}

.hero-slider:hover .hero-dot.active {
    background: white;
}
</style>
@endsection

@section('content')
    <!-- 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('mural-filters').scrollIntoView({behavior: 'smooth'})">Browse Murals</button>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div></div>
                </div>
            </div>
            @empty
            <!-- Fallback hero image if none are configured in admin -->
            <div class="hero-slide active" style="background: linear-gradient(to right, rgba(45, 80, 71, 0.7), rgba(45, 80, 71, 0.5)), url('https://images.unsplash.com/photo-1568605114967-8130f3a36994?w=1200&q=80') center/cover no-repeat;">
                <div class="hero-slide-content">
                    <div>
                        <div class="hero-content">
                            <h1 style="color: white; font-size: 3rem;">Stunning Custom Murals</h1>
                            <p style="color: rgba(255, 255, 255, 0.95); font-size: 1.1rem;">Make a statement with our collection of bold, eye-catching murals. Single-image designs perfect for accent walls in any room. Each mural is custom-printed to your exact dimensions.</p>
                            <div class="hero-cta">
                                <button class="btn" onclick="document.getElementById('mural-filters').scrollIntoView({behavior: 'smooth'})">Browse Murals</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>
                @endforelse
            </div>
        </div>
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const slides = document.querySelectorAll('.hero-slide');
            const dots = document.querySelectorAll('.hero-dot');
            const slider = document.querySelector('.hero-slider');
            let currentSlide = 0;
            let autoAdvanceInterval;

            function showSlide(n) {
                if (slides.length === 0) return;
                slides.forEach(s => s.classList.remove('active'));
                dots.forEach(d => d.classList.remove('active'));
                currentSlide = (n + slides.length) % slides.length;
                slides[currentSlide].classList.add('active');
                dots[currentSlide].classList.add('active');
            }

            function startAutoAdvance() {
                autoAdvanceInterval = setInterval(() => {
                    showSlide(currentSlide + 1);
                }, 5000);
            }

            function resetAutoAdvance() {
                clearInterval(autoAdvanceInterval);
                startAutoAdvance();
            }

            dots.forEach(dot => {
                dot.addEventListener('click', () => {
                    showSlide(parseInt(dot.getAttribute('data-slide')));
                    resetAutoAdvance();
                });
            });

            slider.addEventListener('mouseenter', () => clearInterval(autoAdvanceInterval));
            slider.addEventListener('mouseleave', startAutoAdvance);

            startAutoAdvance();
        });
    </script>

    <!-- FILTERS & SORTING -->
    <section class="section" id="mural-filters" style="padding: 2rem 0;">
        <div class="container">
            <div style="display: flex; gap: 2rem; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 2rem;">
                <div>
                    <h3>All Murals</h3>
                    <p style="color: var(--text-secondary);">Showing all designs</p>
                </div>
                <div style="display: flex; gap: 1rem;">
                    <select style="padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 0.9rem;">
                        <option>Sort by: Featured</option>
                        <option>Newest</option>
                        <option>Price: Low to High</option>
                        <option>Price: High to Low</option>
                    </select>
                </div>
            </div>

            <div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem;">
                <button class="filter-btn active" data-filter="all">All</button>
                <button class="filter-btn" data-filter="landscape">Landscape</button>
                <button class="filter-btn" data-filter="abstract">Abstract</button>
                <button class="filter-btn" data-filter="urban">Urban</button>
                <button class="filter-btn" data-filter="nature">Nature</button>
                <button class="filter-btn" data-filter="artistic">Artistic</button>
            </div>
        </div>
    </section>

    <!-- MURAL GRID -->
    <section class="section" id="mural-grid" style="padding: 2rem 0;">
        <div class="container">
            <div class="grid grid--3">
                @forelse($products as $product)
                    @include('components.product-card', ['product' => $product])
                @empty
                    <p>No murals available yet</p>
                @endforelse
            </div>
        </div>
    </section>

    <!-- MURAL INFO SECTION -->
    <section class="section section--light">
        <div class="container">
            <h2>About Our Murals</h2>
            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2rem;">
                <div class="card">
                    <h4 style="color: var(--primary-color); margin-bottom: 1rem;">Custom Dimensions</h4>
                    <p>Order murals in any size. Simply provide your width and height measurements, and we'll print to exact specifications.</p>
                </div>
                <div class="card">
                    <h4 style="color: var(--primary-color); margin-bottom: 1rem;">Non-Repeating Design</h4>
                    <p>Unlike wallpapers, murals are single cohesive images perfect for accent walls. One stunning focal point for your space.</p>
                </div>
                <div class="card">
                    <h4 style="color: var(--primary-color); margin-bottom: 1rem;">Premium Quality</h4>
                    <p>High-resolution printing with vibrant colors and excellent durability. Professional installation guides included.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA SECTION -->
    <section class="section section--highlight">
        <div class="container" style="text-align: center;">
            <h2>Transform Your Space</h2>
            <p style="max-width: 600px; margin: 0 auto var(--spacing-lg); color: var(--text-primary);">
                Can't find the perfect mural? Our design experts can help you create a custom mural from your own image or concept.
            </p>
            <button class="btn btn--secondary">Request a Custom Mural</button>
        </div>
    </section>
@endsection

@section('scripts')
    <script>
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const filter = this.dataset.filter;
                document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
                this.classList.add('active');

                document.querySelectorAll('[data-category]').forEach(card => {
                    if (filter === 'all' || card.dataset.category === filter) {
                        card.style.display = '';
                    } else {
                        card.style.display = 'none';
                    }
                });
            });
        });
    </script>
@endsection