@php
use App\Models\Product;

$featuredProducts = Product::where('is_available', 1)
    ->where('is_featured', 1)
    ->with('images')
    ->inRandomOrder()
    ->get();
@endphp

@if($featuredProducts->count())

<section class="lux-destaques py-5">
    <div class="container">

        {{-- HEADER --}}
        <div class="text-center mb-5">
            <span class="lux-badge">Seleção Premium</span>

            <h3 class="lux-title mt-3">
                Nossos Produtos em Destaque
            </h3>

            <p class="lux-subtitle">
                Fragrâncias exclusivas escolhidas para elegância e presença
            </p>
        </div>

        {{-- SLIDER --}}
        <div class="swiper featuredSwiper">

            <div class="swiper-wrapper">

                @foreach($featuredProducts as $product)

                    @php
                        $image = $product->images->first();
                        $now = now();

                        $onPromo = $product->promo_price
                            && $product->promo_start
                            && $product->promo_end
                            && $now->between($product->promo_start, $product->promo_end);
                    @endphp

                    <div class="swiper-slide">

                        <a href="{{ route('public.produtos.show', $product->slug) }}"
                           class="lux-product-card">

                            {{-- IMAGE --}}
                            <div class="lux-product-image">

                                <img src="{{ $image ? asset('storage/'.$image->image) : asset('images/no-image.png') }}">

                                @if($onPromo)
                                    <span class="lux-badge-promo">Promo</span>
                                @endif

                                <div class="lux-image-glow"></div>
                            </div>

                            {{-- INFO --}}
                            <div class="lux-product-info">

                                <h6>{{ $product->name }}</h6>

                                <p>{{ $product->brand }}</p>

                                <div class="lux-price">

                                    @if($onPromo)
                                        <span class="old-price">
                                            {{ number_format($product->price,2,',','.') }} Kz
                                        </span>
                                    @endif

                                    <span class="new-price">
                                        {{ number_format($onPromo ? $product->promo_price : $product->price,2,',','.') }} Kz
                                    </span>

                                </div>

                            </div>

                        </a>

                    </div>

                @endforeach

            </div>

        </div>

    </div>
</section>

{{-- SWIPER --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', () => {

    new Swiper('.featuredSwiper', {

        loop: true,
        slidesPerView: 4,
        spaceBetween: 20,

        autoplay: {
            delay: 0,
            disableOnInteraction: false,
        },

        speed: 5000,
        freeMode: true,
        freeModeMomentum: false,

        breakpoints: {
            320: { slidesPerView: 1.3 },
            576: { slidesPerView: 2 },
            768: { slidesPerView: 3 },
            1200:{ slidesPerView: 4 }
        },

    });

});
</script>

@endif
<style>

/* BACKGROUND LUXO SOFT */
.lux-destaques{
    background: linear-gradient(135deg,#fff7ed,#ffe4e6);
}

/* BADGE */
.lux-badge{
    background: linear-gradient(135deg,#fb923c,#f97316);
    padding:6px 14px;
    border-radius:30px;
    font-size:12px;
    font-weight:600;
    color:#fff;
}

/* TITULO */
.lux-title{
    font-size:2rem;
    font-weight:700;
    color:#111827;
}

.lux-subtitle{
    color:#64748b;
}

/* CARD */
.lux-product-card{
    display:block;
    border-radius:18px;
    overflow:hidden;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(12px);
    border:1px solid rgba(251,146,60,0.15);
    transition:.35s ease;
    text-decoration:none;
}

/* HOVER UX PREMIUM */
.lux-product-card:hover{
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(251,146,60,0.25);
    border-color: rgba(251,146,60,0.4);
}

/* IMAGE */
.lux-product-image{
    position:relative;
    height:240px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.lux-product-image img{
    max-width:85%;
    max-height:85%;
    object-fit:contain;
    transition:.5s ease;
}

/* zoom hover */
.lux-product-card:hover img{
    transform: scale(1.08);
}

/* glow */
.lux-image-glow{
    position:absolute;
    inset:0;
    background: radial-gradient(circle, rgba(251,146,60,.25), transparent 60%);
    opacity:0;
    transition:.4s ease;
}

.lux-product-card:hover .lux-image-glow{
    opacity:1;
}

/* PROMO */
.lux-badge-promo{
    position:absolute;
    top:12px;
    left:12px;
    background:#ef4444;
    color:#fff;
    font-size:11px;
    padding:4px 10px;
    border-radius:20px;
}

/* INFO */
.lux-product-info{
    padding:14px;
    text-align:center;
}

.lux-product-info h6{
    font-size:15px;
    color:#111827;
}

.lux-product-info p{
    font-size:12px;
    color:#64748b;
}

/* PRICE */
.lux-price{
    display:flex;
    justify-content:center;
    gap:8px;
    align-items:baseline;
}

.old-price{
    font-size:12px;
    color:#dc2626;
    text-decoration: line-through;
}

.new-price{
    font-size:16px;
    font-weight:700;
    color:#f97316;
}

/* 🧲 PAUSA NO HOVER (IMPORTANTE UX) */
.featuredSwiper:hover .swiper-wrapper{
    animation-play-state: paused;
}

/* RESPONSIVO */
@media(max-width:768px){
    .lux-product-image{height:200px;}
}

@media(max-width:576px){
    .lux-product-image{height:170px;}
}

</style>