@php
use App\Models\Publicidade;
use Illuminate\Support\Str;

$publicidades = Publicidade::where('is_active', 1)
    ->where(function($query){
        $query->where('is_permanent', 1)
              ->orWhere(function($q){
                  $now = now()->toDateString();
                  $q->where(function($qq) use ($now) {
                      $qq->where('start_date', '<=', $now)
                         ->where('end_date', '>=', $now);
                  })->orWhere(function($qq){
                      $qq->whereNull('start_date')->whereNull('end_date');
                  });
              });
    })
    ->latest()
    ->get();
@endphp

@if($publicidades->count())
<section class="lux-pub-section py-5">

    <div class="container">

        {{-- HEADER --}}
        <div class="text-center mb-5">
            <h2 class="lux-title">Campanhas & Promoções</h2>
            <p class="lux-subtitle">Descubra ofertas exclusivas e novidades selecionadas</p>
        </div>

        {{-- GRID --}}
        <div class="row g-4">

            @foreach($publicidades as $pub)
            <div class="col-xl-4 col-lg-6 col-md-6">

                <div class="lux-card">

                    {{-- IMAGE --}}
                    <div class="lux-image">
                        <img src="{{ asset('storage/'.$pub->image) }}" alt="{{ $pub->title }}">
                    </div>

                    {{-- OVERLAY --}}
                    <div class="lux-overlay"></div>

                    {{-- CONTENT --}}
                    <div class="lux-content">

                        <h5>{{ $pub->title }}</h5>

                        <p>{{ Str::limit($pub->content, 90) }}</p>

                        <div class="lux-footer">

                            @if($pub->is_permanent)
                                <span class="lux-badge success">Permanente</span>
                            @elseif($pub->start_date && $pub->end_date)
                                <span class="lux-badge warning">
                                    {{ \Carbon\Carbon::parse($pub->start_date)->format('d/m') }}
                                    →
                                    {{ \Carbon\Carbon::parse($pub->end_date)->format('d/m') }}
                                </span>
                            @endif

                        </div>

                    </div>

                </div>

            </div>
            @endforeach

        </div>

    </div>

</section>
@endif
<style>
    .lux-pub-section{
    background: linear-gradient(180deg, #fff7ed, #ffe4d6);
}

/* TÍTULOS */
.lux-title{
    font-size: 2rem;
    font-weight: 700;
    color: #ea580c;
}

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

/* CARD PRINCIPAL */
.lux-card{
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    height: 320px;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    transition: .4s ease;
    background: #000;
}

.lux-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0,0,0,.2);
}

/* IMAGEM */
.lux-image{
    position: absolute;
    inset: 0;
}

.lux-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.lux-card:hover .lux-image img{
    transform: scale(1.08);
}

/* OVERLAY MODERNO */
.lux-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.15),
        transparent
    );
}

/* CONTEÚDO */
.lux-content{
    position: absolute;
    bottom: 0;
    padding: 18px;
    color: #fff;
    z-index: 2;
}

.lux-content h5{
    font-weight: 700;
    margin-bottom: 6px;
}

.lux-content p{
    font-size: 0.9rem;
    opacity: .9;
    margin-bottom: 10px;
}

/* FOOTER BADGE */
.lux-footer{
    display: flex;
    justify-content: flex-start;
}

/* BADGES */
.lux-badge{
    font-size: 0.75rem;
    padding: 5px 10px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.lux-badge.success{
    background: rgba(34,197,94,.2);
    border: 1px solid rgba(34,197,94,.4);
}

.lux-badge.warning{
    background: rgba(251,146,60,.2);
    border: 1px solid rgba(251,146,60,.4);
}

/* RESPONSIVO */
@media(max-width:768px){
    .lux-card{
        height: 260px;
    }
}
</style>