@extends('master')
@section('content')
@if(Route::currentRouteName() == 'home')

        <!-- =====================================================
             HERO SECTION
        ====================================================== -->
        <section class="home-hero">

            <div class="hero-slider" id="heroSlider">

            @foreach($sliders as $key=>$slider)
                <!-- Slide 1 -->
            @if($key+1 == 1)
                <div class="hero-slide active">

                    <div class="hero-slide-image">
                        <img
                            src="{{env("API_BASE_URL").$slider['Image']}}"
                            alt="{{$slider['Title']}}"
                        >
                    </div>

                    <div class="hero-overlay"></div>

                    <div class="container hero-container">

                        <div class="hero-content">

                            {{-- <span class="hero-eyebrow">
                                New Collection
                            </span> --}}

                            <h1>
                               {{$slider['Title']}}
                            </h1>

                            <p class="d-none">
                                Discover thoughtfully selected products
                                made to elevate your everyday experience.
                            </p>

                            <div class="hero-buttons d-none">

                                <a
                                    href="shop.html"
                                    class="btn-custom btn-primary-custom">
                                    Shop Collection
                                    <i class="bi bi-arrow-right"></i>
                                </a>

                                <a
                                    href="categories.html"
                                    class="btn-custom btn-outline-light-custom">
                                    Explore More
                                </a>

                            </div>

                        </div>

                    </div>

                </div>
            @else
               <div class="hero-slide">

                    <div class="hero-slide-image">
                        <img
                            src="{{env("API_BASE_URL").$slider['Image']}}"
                            alt="Premium collection"
                        >
                    </div>

                    <div class="hero-overlay"></div>

                    <div class="container hero-container">

                        <div class="hero-content">

                            <span class="hero-eyebrow d-none">
                                New Collection
                            </span>

                            <h1>
                                {{$slider['Title']}}
                            </h1>

                            <p class="d-none">
                                Discover thoughtfully selected products
                                made to elevate your everyday experience.
                            </p>

                            <div class="hero-buttons d-none">

                                <a
                                    href="shop.html"
                                    class="btn-custom btn-primary-custom">
                                    Shop Collection
                                    <i class="bi bi-arrow-right"></i>
                                </a>

                                <a
                                    href="categories.html"
                                    class="btn-custom btn-outline-light-custom">
                                    Explore More
                                </a>

                            </div>

                        </div>

                    </div>

                </div>
            @endif

            @endforeach

                <!-- Slider Controls -->

                <button
                    class="hero-control hero-prev"
                    id="heroPrev"
                    type="button"
                    aria-label="Previous slide">

                    <i class="bi bi-arrow-left"></i>

                </button>


                <button
                    class="hero-control hero-next"
                    id="heroNext"
                    type="button"
                    aria-label="Next slide">

                    <i class="bi bi-arrow-right"></i>

                </button>


                <!-- Slider Indicators -->

                <div
                    class="hero-indicators"
                    id="heroIndicators">

                    <button
                        type="button"
                        class="active"
                        aria-label="Go to slide 1">
                    </button>

                    <button
                        type="button"
                        aria-label="Go to slide 2">
                    </button>

                    <button
                        type="button"
                        aria-label="Go to slide 3">
                    </button>

                </div>

            </div>

        </section>
        
    @endif

        <!-- =====================================================
             TRUST / VALUE STRIP
        ====================================================== -->
        <section class="value-strip">

            <div class="container">

                <div class="value-grid">

                    <div class="value-item">

                        <div class="value-icon">
                            <i class="bi bi-box-seam"></i>
                        </div>

                        <div>
                            <h3>Quality Products</h3>
                            <p>Carefully selected for you</p>
                        </div>

                    </div>


                    <div class="value-item">

                        <div class="value-icon">
                            <i class="bi bi-truck"></i>
                        </div>

                        <div>
                            <h3>Fast Delivery</h3>
                            <p>Reliable delivery to your door</p>
                        </div>

                    </div>


                    <div class="value-item">

                        <div class="value-icon">
                            <i class="bi bi-shield-check"></i>
                        </div>

                        <div>
                            <h3>Secure Payments</h3>
                            <p>Safe and trusted checkout</p>
                        </div>

                    </div>


                    <div class="value-item">

                        <div class="value-icon">
                            <i class="bi bi-arrow-repeat"></i>
                        </div>

                        <div>
                            <h3>Easy Returns</h3>
                            <p>Simple return process</p>
                        </div>

                    </div>

                </div>

            </div>

        </section>


        <!-- =====================================================
             FEATURED CATEGORIES
        ====================================================== -->
        <section class="home-section categories-section">

            <div class="container">

                <div class="section-heading-row">

                    <div>

                        <span class="eyebrow">
                            Explore
                        </span>

                        <h2 class="section-title">
                            Shop by Category
                        </h2>

                    </div>

                    {{-- <a
                        href="shop.html"
                        class="section-link">
                        View All
                        <i class="bi bi-arrow-right"></i>
                    </a> --}}

                </div>


                <div class="category-grid">
                {{-- @foreach($homeCategories as $category) 
                    <a
                        href="{{url('/category-details/'.$category['Category'])}}"
                        class="category-card">

                        <div class="category-image">

                            <img
                                src="{{env("API_BASE_URL").$category['Image']}}"
                                alt="{{$category['Category']}}"
                                loading="lazy"
                            >

                        </div>

                        <div class="category-content">

                            <h3>{{$category['Category']}}</h3>

                            <span>
                                Explore Collection
                                <i class="bi bi-arrow-right"></i>
                            </span>

                        </div>

                    </a>
                @endforeach --}}

                @foreach(menus()->report as $category) 
                    <a
                        href="{{url('/category-details/'.$category->Category)}}"
                        class="category-card">

                        <div class="category-image">

                            <img
                                src="{{env("API_BASE_URL").$category->Image}}"
                                alt="{{$category->Category}}"
                                loading="lazy"
                            >

                        </div>

                        <div class="category-content">

                            <h3>{{$category->Category}}</h3>

                            <span>
                                Explore Collection
                                <i class="bi bi-arrow-right"></i>
                            </span>

                        </div>

                    </a>
                @endforeach

                </div>

            </div>

        </section>


        <!-- =====================================================
             NEW ARRIVALS
        ====================================================== -->
        <section class="home-section products-section">

            <div class="container">

                <div class="section-heading-centered">

                    <span class="eyebrow">
                        Fresh In
                    </span>

                    <h2 class="section-title">
                        New Arrivals
                    </h2>

                    <p>
                        Discover the latest additions to our collection.
                    </p>

                </div>


                <div class="product-grid">
                @foreach($arrivalProducts as $product)
                    <!-- Product 1 -->
                    <article class="product-card">

                        <div class="product-image">

                            <a href="{{url('/product-details/'.$product['Id'])}}">

                                <img
                                    src="{{env('API_BASE_URL').$product['Image']}}"
                                    alt="Premium Product One"
                                    loading="lazy"
                                >

                            </a>


                            <span class="product-label d-none">
                                New
                            </span>


                            <button
                                type="button"
                                class="product-wishlist d-none"
                                aria-label="Add to wishlist"
                                data-product="product-01">

                                <i class="bi bi-heart"></i>

                            </button>


                            <div class="product-quick-actions">

                                <button
                                    type="button"
                                    class="quick-view btn-add-cart" data-id="{{$product['Id']}}"> 
                                    ADD TO CART
                                </button>

                            </div>

                        </div>


                        <div class="product-info">

                            <div class="product-category">
                                Category
                            </div>

                            <h3 class="product-title">

                                <a href="{{url('/product-details/'.$product['Id'])}}">
                                    {{$product['Title']}}
                                </a>

                            </h3>


                            <div class="product-rating d-none">

                                <span class="stars">
                                    ★★★★★
                                </span>

                                <span>
                                    (12)
                                </span>

                            </div>


                            <div class="product-price">

                                <span class="current-price">
                                    {{$product['Price']}} BDT
                                </span>

                            </div>

                        </div>

                    </article>

                @endforeach

                </div>


                <div class="section-button d-none">

                    <a
                        href="shop.html"
                        class="btn-custom btn-outline-custom">

                        View All Products
                        <i class="bi bi-arrow-right"></i>

                    </a>

                </div>

            </div>

        </section>


        <!-- =====================================================
             PROMOTIONAL BANNER
        ====================================================== -->
        <section class="promotion-section d-none">

            <div class="container">

                <div class="promotion-banner">

                    <div class="promotion-image">

                        <img
                            src="assets/images/promotion-banner.jpg"
                            alt="Special promotion"
                            loading="lazy"
                        >

                    </div>

                    <div class="promotion-overlay"></div>


                    <div class="promotion-content">

                        <span class="eyebrow">
                            Limited Time Offer
                        </span>

                        <h2>
                            Something Special
                            <span>For You.</span>
                        </h2>

                        <p>
                            Enjoy exclusive savings on selected
                            products for a limited time.
                        </p>


                        <div class="promotion-meta">

                            <span>
                                Up to <strong>30% OFF</strong>
                            </span>

                            <span class="promotion-divider"></span>

                            <span>
                                Ends Soon
                            </span>

                        </div>


                        <a
                            href="categories.html"
                            class="btn-custom btn-accent-custom">

                            Shop The Offer
                            <i class="bi bi-arrow-right"></i>

                        </a>

                    </div>

                </div>

            </div>

        </section>


        <!-- =====================================================
             BEST SELLERS
        ====================================================== -->
        <section class="home-section products-section best-sellers-section">

            <div class="container">

                <div class="section-heading-row">

                    <div>

                        <span class="eyebrow">
                            Customer Favorites
                        </span>

                        <h2 class="section-title">
                            Best Sellers
                        </h2>

                    </div>

                    <a
                        href="categories.html"
                        class="section-link">

                        View All
                        <i class="bi bi-arrow-right"></i>

                    </a>

                </div>


                <div class="product-grid">

                    @foreach($featuredProducts as $product)
                    <!-- Product 1 -->
                    <article class="product-card">

                        <div class="product-image">

                            <a href="{{url('/product-details/'.$product['Id'])}}">

                                <img
                                    src="{{env('API_BASE_URL').$product['Image']}}"
                                    alt="Premium Product One"
                                    loading="lazy"
                                >

                            </a>


                            <span class="product-label d-none">
                                New
                            </span>


                            <button
                                type="button"
                                class="product-wishlist d-none"
                                aria-label="Add to wishlist"
                                data-product="product-01">

                                <i class="bi bi-heart"></i>

                            </button>


                            <div class="product-quick-actions">

                                <button
                                    type="button"
                                    class="quick-view btn-add-cart" data-id="{{$product['Id']}}"> 
                                    ADD TO CART
                                </button>

                            </div>

                        </div>


                        <div class="product-info">

                            <div class="product-category">
                                Category
                            </div>

                            <h3 class="product-title">

                                <a href="{{url('/product-details/'.$product['Id'])}}">
                                    {{$product['Title']}}
                                </a>

                            </h3>


                            <div class="product-rating d-none">

                                <span class="stars">
                                    ★★★★★
                                </span>

                                <span>
                                    (12)
                                </span>

                            </div>


                            <div class="product-price">

                                <span class="current-price">
                                    {{$product['Price']}} BDT
                                </span>

                            </div>

                        </div>

                    </article>

                @endforeach
                    </article>

                </div>

            </div>

        </section>


        <!-- =====================================================
             BRAND / VALUE PROPOSITION
        ====================================================== -->
        <section class="brand-section d-none">

            <div class="container">

                <div class="brand-content">

                    <div class="brand-text">

                        <span class="eyebrow">
                            Why Choose Us
                        </span>

                        <h2>
                            Quality You Can
                            <span>Trust.</span>
                        </h2>

                        <p>
                            We believe shopping should be simple,
                            transparent and enjoyable. Every product
                            is carefully selected with quality,
                            reliability and customer satisfaction in mind.
                        </p>

                        <a
                            href="about.html"
                            class="btn-custom btn-primary-custom">

                            Discover Our Story
                            <i class="bi bi-arrow-right"></i>

                        </a>

                    </div>


                    <div class="brand-features">

                        <div class="brand-feature">

                            <span class="brand-feature-number">
                                01
                            </span>

                            <div>

                                <h3>Authentic Products</h3>

                                <p>
                                    Carefully sourced products with
                                    quality at the center.
                                </p>

                            </div>

                        </div>


                        <div class="brand-feature">

                            <span class="brand-feature-number">
                                02
                            </span>

                            <div>

                                <h3>Reliable Service</h3>

                                <p>
                                    From order to delivery, we focus
                                    on a smooth experience.
                                </p>

                            </div>

                        </div>


                        <div class="brand-feature">

                            <span class="brand-feature-number">
                                03
                            </span>

                            <div>

                                <h3>Customer First</h3>

                                <p>
                                    Your satisfaction remains our
                                    highest priority.
                                </p>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </section>


        <!-- =====================================================
             CUSTOMER REVIEWS
        ====================================================== -->
        <section class="home-section reviews-section d-none">

            <div class="container">

                <div class="section-heading-centered">

                    <span class="eyebrow">
                        Customer Love
                    </span>

                    <h2 class="section-title">
                        What Our Customers Say
                    </h2>

                    <p>
                        Real experiences from customers who shop with us.
                    </p>

                </div>


                <div class="reviews-grid">

                    <article class="review-card">

                        <div class="review-stars">
                            ★★★★★
                        </div>

                        <blockquote>
                            “The product quality was excellent and
                            the entire ordering experience was smooth
                            from beginning to end.”
                        </blockquote>

                        <div class="review-author">

                            <div class="review-avatar">
                                A
                            </div>

                            <div>

                                <strong>
                                    Alex Morgan
                                </strong>

                                <span>
                                    Verified Customer
                                </span>

                            </div>

                        </div>

                    </article>


                    <article class="review-card featured-review">

                        <div class="review-stars">
                            ★★★★★
                        </div>

                        <blockquote>
                            “Beautiful products, fast delivery and
                            excellent customer service. I will definitely
                            be shopping here again.”
                        </blockquote>

                        <div class="review-author">

                            <div class="review-avatar">
                                S
                            </div>

                            <div>

                                <strong>
                                    Sarah Williams
                                </strong>

                                <span>
                                    Verified Customer
                                </span>

                            </div>

                        </div>

                    </article>


                    <article class="review-card">

                        <div class="review-stars">
                            ★★★★★
                        </div>

                        <blockquote>
                            “Everything was exactly as described.
                            The checkout was easy and my order arrived
                            sooner than expected.”
                        </blockquote>

                        <div class="review-author">

                            <div class="review-avatar">
                                M
                            </div>

                            <div>

                                <strong>
                                    Michael Lee
                                </strong>

                                <span>
                                    Verified Customer
                                </span>

                            </div>

                        </div>

                    </article>

                </div>

            </div>

        </section>


        <!-- =====================================================
             NEWSLETTER
        ====================================================== -->
        <section class="newsletter-section d-none">

            <div class="container">

                <div class="newsletter-box">

                    <div class="newsletter-content">

                        <span class="eyebrow">
                            Stay Connected
                        </span>

                        <h2>
                            Be The First To Know.
                        </h2>

                        <p>
                            Subscribe for new arrivals, exclusive offers
                            and special updates.
                        </p>

                    </div>


                    <form
                        class="newsletter-form"
                        id="newsletterForm">

                        <div class="newsletter-input">

                            <i class="bi bi-envelope"></i>

                            <input
                                type="email"
                                id="newsletterEmail"
                                placeholder="Your email address"
                                aria-label="Email address"
                                required
                            >

                        </div>

                        <button
                            type="submit"
                            class="btn-custom btn-accent-custom">

                            Subscribe
                            <i class="bi bi-arrow-right"></i>

                        </button>

                    </form>


                    <small class="newsletter-note">
                        By subscribing, you agree to receive promotional
                        communications from us.
                    </small>

                </div>

            </div>

        </section>
@endsection