@php
use App\Models\Marca;

$marcas = Marca::whereNotNull('logo')
            ->orderBy('name')
            ->get();
@endphp

@if($marcas->count())
<section class="lux-marcas py-5">
    <div class="container">

        {{-- HEADER --}}
        <div class="text-center mb-5">
            <span class="lux-badge">Marcas Premium</span>

            <h3 class="lux-title mt-3">
                Essências & Marcas que definem elegância
            </h3>

            <p class="lux-subtitle">
                Seleção exclusiva de marcas reconhecidas no universo da perfumaria, cosméticos, acessórios & cuidados pessoais. Descubra a excelência e a autenticidade por trás de cada marca, escolhida para oferecer a você o melhor em qualidade e sofisticação.
            </p>
        </div>

        {{-- GRID --}}
        <div class="row g-4 justify-content-center align-items-center">

            @foreach($marcas as $marca)
                <div class="col-xl-2 col-lg-3 col-md-4 col-6">
                    <div class="lux-marca-card">

                        <img 
                            src="{{ asset('storage/'.$marca->logo) }}" 
                            alt="{{ $marca->name }}"
                            title="{{ $marca->name }}"
                            class="lux-marca-logo"
                        >

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

                    </div>
                </div>
            @endforeach

        </div>

    </div>
</section>

<style>
/* SECTION */
.lux-marcas{
    background: radial-gradient(circle at top, #fff7ed, #ffffff);
    position: relative;
}

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

/* TITLE */
.lux-title{
    font-size:1.8rem;
    font-weight:700;
    color:#1e293b;
}

/* SUBTITLE */
.lux-subtitle{
    color:#64748b;
    font-size:1rem;
}

/* CARD */
.lux-marca-card{
    position:relative;
    height:130px;
    border-radius:18px;

    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(10px);

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow: 0 10px 25px rgba(0,0,0,.08);

    overflow:hidden;
    transition:.4s ease;
}

/* HOVER EFFECT */
.lux-marca-card:hover{
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 25px 50px rgba(251,146,60,.25);
}

/* LOGO */
.lux-marca-logo{
    max-height:60px;
    max-width:85%;
    object-fit:contain;

    filter: grayscale(100%);
    opacity:.75;

    transition:.4s ease;
}

/* HOVER LOGO */
.lux-marca-card:hover .lux-marca-logo{
    filter: grayscale(0%);
    opacity:1;
    transform: scale(1.08);
}

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

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

/* RESPONSIVO */
@media(max-width:768px){
    .lux-marca-card{
        height:110px;
    }

    .lux-title{
        font-size:1.4rem;
    }
}

@media(max-width:576px){
    .lux-marca-card{
        height:95px;
    }
}
</style>
@endif