@extends('layouts.home')
<style>
    /** mobile  **/
    .view-all-btn {
        margin-top: 20px;
    }

    @media (max-width: 768px) {
        #categories {
            padding-bottom: 0 !important;
        }

        #products {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }

        .view-all-btn {
            margin-top: 0 !important;
        }

        #features {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }
    }

    /* Enhanced Banner Carousel Styles */
    .banner-carousel-section {
        position: relative;
        overflow: hidden;
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    }

    .banner-carousel {
        position: relative;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0,0,0,0.1), 0 8px 20px rgba(0,0,0,0.08);
        background: white;
        margin: 0;
        max-width: 1200px;
    }

    .banner-item {
        position: relative;
        background: linear-gradient(45deg, #22c55e, #16a34a);
        overflow: hidden;
    }

    .banner-image {
        width: 100%;
        height: 450px;
        object-fit: cover;
        transition: transform 0.5s ease;
        /* border-radius: 20px; */
    }

    .banner-item:hover .banner-image {
        transform: scale(1.02);
    }

    /* Modern Navigation Arrows */
    .banner-carousel .owl-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        pointer-events: none;
        z-index: 10;
    }

    .banner-carousel .owl-nav button {
        position: absolute;
        background: rgba(255, 255, 255, 0.95) !important;
        color: #1f2937 !important;
        border: none !important;
        border-radius: 50% !important;
        width: 60px !important;
        height: 60px !important;
        font-size: 20px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        pointer-events: all;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 10px 25px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.1);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .banner-carousel .owl-nav button:hover {
        background: #22c55e !important;
        color: white !important;
        transform: scale(1.1) translateY(-2px);
        box-shadow: 0 15px 35px rgba(34, 197, 94, 0.4), 0 5px 15px rgba(0,0,0,0.1);
    }

    .banner-carousel .owl-nav .owl-prev {
        left: 30px;
    }

    .banner-carousel .owl-nav .owl-next {
        right: 30px;
    }

    /* Modern Dot Indicators */
    .banner-carousel .owl-dots {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        margin: 0 !important;
        display: flex;
        gap: 12px;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 15px 25px;
        border-radius: 50px;
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

    .banner-carousel .owl-dots .owl-dot {
        display: inline-block;
        margin: 0;
    }

    .banner-carousel .owl-dots .owl-dot span {
        width: 12px;
        height: 12px;
        background: rgba(156, 163, 175, 0.6);
        display: block;
        border-radius: 50%;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        position: relative;
    }

    .banner-carousel .owl-dots .owl-dot span:hover {
        background: rgba(34, 197, 94, 0.7);
        transform: scale(1.2);
    }

    .banner-carousel .owl-dots .owl-dot.active span {
        background: #22c55e !important;
        transform: scale(1.3);
        box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3);
    }

    /* Progress Bar Animation */
    .banner-carousel .owl-dots .owl-dot.active span::after {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        border: 2px solid #22c55e;
        border-radius: 50%;
        animation: progress 5s linear;
    }

    @keyframes progress {
        from {
            stroke-dasharray: 0 100;
        }
        to {
            stroke-dasharray: 100 0;
        }
    }

    
    /* Responsive Design */
    @media (max-width: 768px) {
        .banner-carousel {
            border-radius: 15px;
            margin: 0 15px;
        }
        
        .banner-image {
            height: 280px;
        }
        
        .banner-carousel .owl-nav button {
            width: 50px !important;
            height: 50px !important;
            font-size: 16px !important;
        }
        
        .banner-carousel .owl-nav .owl-prev {
            left: 15px;
        }
        
        .banner-carousel .owl-nav .owl-next {
            right: 15px;
        }

        .banner-carousel .owl-dots {
            bottom: 20px;
            padding: 12px 20px;
            gap: 10px;
        }

        .banner-carousel .owl-dots .owl-dot span {
            width: 10px;
            height: 10px;
        }
    }

    @media (max-width: 480px) {
        .banner-image {
            height: 220px;
        }
        
        .banner-carousel {
            margin: 0 10px;
            border-radius: 12px;
        }
    }

    /* Loading Animation */
    .banner-item {
        position: relative;
        overflow: hidden;
    }

    .banner-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.5s;
        z-index: 1;
    }

    .banner-item:hover::before {
        left: 100%;
    }

    /* Section Styling */
    .banner-section-wrapper {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        position: relative;
    }

    .banner-section-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23f1f5f9" fill-opacity="0.4"><circle cx="30" cy="30" r="1"/></g></g></svg>');
        pointer-events: none;
    }
</style>

<!-- Owl Carousel CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" />
<style>
    .owl-dots {
        margin-top: 30px !important;
        text-align: center;
    }

    .owl-dots .owl-dot span {
        width: 12px;
        height: 12px;
        background: #ccc;
        display: inline-block;
        margin: 5px;
        border-radius: 50%;
        transition: background 0.3s ease;
    }

    .owl-dots .owl-dot.active span {
        background: #22c55e !important;
    }
</style>

@section('content')

    <section class="hero-gradient">
        <div class="container">
            <div class="row  py-5 align-items-center">
                <div class="col-lg-6">
                    <div class="hero-content">
                        <h1 class="hero-title">Ceylon’s Organic Excellence for the World</h1>
                        <p class="hero-subtitle">Naturally grown, ethically sourced — discover Sri Lanka’s finest farm treasures.</p>
                        <div class="hero-buttons">
                            <a href="{{ route('search') }}" class="btn btn-primary btn-lg me-3">
                                <i class="fas fa-shopping-bag me-2"></i>Shop Now
                            </a>
                            <a href="{{ route('categories.frontend') }}" class="btn btn-outline-light btn-lg">
                                <i class="fas fa-leaf me-2"></i>Explore Categories
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="hero-image">
                        <div class="floating-card">
                            <img src="{{ asset('assets/img/pages/hero_banner_image.webp') }}" alt="Ceylon Spices"
                                class="card-img">
                            <div class="card-content">
                                <h6>Premium Quality Products</h6>
                                <p class="text-muted small">Authentic • Trusted • Delivered Fresh</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if (count($banners) > 0)
        <section class="banner-section-wrapper py-5">
            <div class="container d-flex justify-content-center">
                <div class="banner-carousel owl-carousel owl-theme m-0" id="bannerCarousel">
                    @foreach ($banners as $banner)
                        <div class="banner-item">
                            <img src="{{ asset('storage/banners/' . $banner->image) }}" 
                                 alt="Banner {{ $loop->iteration }}"
                                 class="banner-image">
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    @if (count($categories) > 0)
        <section id="categories" class="py-5 bg-light">
            <div class="container">
                <div class="text-center mb-5">
                    <h2 class="section-title">Shop by Category</h2>
                    <p class="section-subtitle">Explore our carefully curated collection of authentic Ceylon products
                    </p>
                </div>
                <div class="owl-carousel owl-theme" id="owl-carousel">
                    @foreach ($categories as $category)
                        <div class="item">
                            <div class="category-card"
                                onclick="window.location.href='{{ route('category.filter', $category->slug) }}'">
                                <div class="category-icon">
                                    <img src="{{ $category->icon ? asset('storage/icons/' . $category->icon) : asset('/assets/img/no-product.png') }}"
                                        alt="{{ $category->name }}">
                                </div>
                                <h5 class="category-title">{{ $category->name }}</h5>
                                <p class="category-desc">{{ Str::limit($category->description, 50, '...') }}</p>
                                <div class="category-arrow">
                                    <i class="fas fa-arrow-right"></i>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="text-center view-all-btn mt-4">
                    <a href="{{ route('categories.frontend') }}" class="btn btn-outline-primary btn-lg">
                        <i class="fas fa-th-large me-2"></i>View All Categories
                    </a>
                </div>
            </div>
        </section>
    @endif

    @if (count($products) > 0)
        <section id="products" class="py-5">
            <div class="container">
                <div class="text-center mb-5">
                    <h2 class="section-title">Products</h2>
                    <p class="section-subtitle">Hand-picked premium products from our collection</p>
                </div>
                <div class="row" id="featuredProducts">
                    @foreach ($products as $index => $product)
                        <div class="col-lg-3 col-md-4 col-md-6 col-sm-6 mb-4">
                            <div class="fade-in" style="animation-delay: {{ $index * 100 }}s;">
                                <div class="product-card"
                                    onclick="window.location.href='{{ route('product.show', $product->id) }}'">
                                    <div class="product-image-container">
                                        @if ($product->image)
                                            <img src="{{ asset('storage/products/' . $product->image) }}"
                                                alt="{{ $product->name }}" class="product-image">
                                        @else
                                            <img src="{{ asset('/assets/img/no-product.png') }}"
                                                alt="{{ $product->name }}" class="product-image">
                                        @endif
                                        @php
                                            $discount = 0;
                                            if (
                                                $product->discount_price &&
                                                $product->price > $product->discount_price
                                            ) {
                                                $discount = round(
                                                    (($product->price - $product->discount_price) / $product->price) *
                                                        100,
                                                );
                                            }
                                        @endphp
                                        @if ($discount)
                                            <div class="save-badge">{{ $discount }}% OFF</div>
                                        @endif
                                    </div>
                                    <div class="product-card-content">
                                        <h6 class="product-name">{{ Str::limit($product->name, 30, '...') }}</h6>
                                        @if ($product->description)
                                            <div class="product-rating">
                                                <span
                                                    class="">{{ Str::limit($product->description, 80, '...') }}</span>
                                            </div>
                                        @endif
                                        @if ($product->is_stock_available)
                                            <div class="stock-badge" style="font-size: 13px">
                                                <i class="fas fa-check-circle me-2"></i>
                                                In Stock
                                            </div>
                                        @else
                                            <div class="stock-badge out-of-stock" style="font-size: 13px">
                                                <i class="fas fa-times-circle me-2"></i>
                                                Out of Stock
                                            </div>
                                        @endif
                                        <div class="d-flex align-items-center justify-content-between">
                                            <div>
                                                @if ($discount)
                                                    <span class="product-price">{{ $product->discount_price }}
                                                        @if ($config->currancy)
                                                            ({{ $config->currancy }})
                                                        @endif
                                                    </span>
                                                    <span class="product-original-price">{{ $product->price }}
                                                        @if ($config->currancy)
                                                            ({{ $config->currancy }})
                                                        @endif
                                                    </span>
                                                @else
                                                    <span class="product-price">{{ $product->price }} @if ($config->currancy)
                                                            ({{ $config->currancy }})
                                                        @endif
                                                    </span>
                                                @endif
                                            </div>
                                        </div>

                                        <a href="{{ route('cart.add', $product->id) }}">
                                            <button class="btn-add-cart">
                                                <i class="fas fa-shopping-cart me-2"></i>Add to Cart
                                            </button>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="text-center view-all-btn">
                    <a href="{{ route('search') }}" class="btn btn-outline-primary btn-lg">
                        <i class="fas fa-th-large me-2"></i>View All Products
                    </a>
                </div>
            </div>
        </section>
    @endif

    <section class="py-5 bg-harvest-cream" id="features">
        <div class="container">
            <div class="row g-4">
                <div class="col-lg-4">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-shipping-fast"></i>
                        </div>
                        <div class="feature-content">
                            <h5>Fast & Free Delivery</h5>
                            <p>Express delivery available on all orders, with fast and reliable service nationwide.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-leaf"></i>
                        </div>
                        <div class="feature-content">
                            <h5>100% Organic</h5>
                            <p>All products are certified organic and sustainably sourced from local farms.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <div class="feature-content">
                            <h5>Trusted Quality</h5>
                            <p>High-standard products crafted for lasting performance and reliability.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

    <script>
        $(document).ready(function() {
            // Enhanced Banner Carousel
            $("#bannerCarousel").owlCarousel({
                loop: true,
                margin: 0,
                nav: true,
                dots: true,
                autoplay: true,
                autoplayTimeout: 5000,
                autoplayHoverPause: true,
                smartSpeed: 800,
                navText: [
                    '<i class="fas fa-chevron-left"></i>', 
                    '<i class="fas fa-chevron-right"></i>'
                ],
                responsive: {
                    0: {
                        items: 1
                    },
                    576: {
                        items: 1
                    },
                    992: {
                        items: 1
                    }
                }
            });

            // Category Carousel
            $('#owl-carousel').owlCarousel({
                loop: true,
                margin: 20,
                nav: false,
                dots: true,
                autoplay: true,
                autoplayTimeout: 5000,
                responsive: {
                    0: {
                        items: 1
                    },
                    576: {
                        items: 2
                    },
                    992: {
                        items: 4
                    }
                }
            });
        });
    </script>

@endsection