@php
    $monthsPt = ['JAN', 'FEV', 'MAR', 'ABR', 'MAI', 'JUN', 'JUL', 'AGO', 'SET', 'OUT', 'NOV', 'DEZ'];
    $defaultCover = asset('assets/sucesu/img/news-default.jpg');
    $title = $data['title'] ?? 'Últimas Notícias';
    $super = $data['super_highlighted'] ?? null;
    $items = $data['items'] ?? [];
@endphp

@if(!empty($items) || !empty($super))
<section class="section-padding {{ !empty($super) ? '' : 'pt-0' }}">
    <div class="container">
        {{-- TÍTULO DA SEÇÃO --}}
        <div class="section-title-row">
            <h2 class="section-title-custom">
                <i class="bi bi-newspaper me-2" style="color: var(--tenant-primary, #1075ad);"></i>{{ $title }}
            </h2>
            <a href="{{ route('v2.noticias.portal.index') }}" class="section-title-link">
                Ver todas <i class="bi bi-arrow-right"></i>
            </a>
        </div>

        {{-- 1. SUPER DESTAQUE --}}
        @if(!empty($super))
            @php
                $sh = $super;
                $shDate = !empty($sh['published_at']) ? \Carbon\Carbon::parse($sh['published_at']) : null;
                $monthName = $shDate ? strtolower($monthsPt[$shDate->format('n') - 1]) : '';
                $coverUrl = $sh['cover_image_url'] ?: $defaultCover;
            @endphp
            <div class="super-news-card mb-4">
                <div class="super-news-bg" style="background-image: url('{{ $coverUrl }}');"></div>
                <div class="super-news-overlay"></div>
                <div class="super-news-content">
                    @if(!empty($sh['category_name']))
                        <span class="super-news-badge">{{ $sh['category_name'] }}</span>
                    @endif
                    <h2 class="super-news-title">
                        <a href="{{ $sh['url'] ?? '#' }}">{{ $sh['title'] }}</a>
                    </h2>
                    @if(!empty($sh['subtitle']))
                        <p class="super-news-subtitle">{{ $sh['subtitle'] }}</p>
                    @endif
                    <div class="super-news-meta">
                        @if($shDate)
                            <span><i class="bi bi-calendar3 me-1"></i> {{ $shDate->format('d') }} de {{ $monthName }} de {{ $shDate->format('Y') }}</span>
                        @endif
                        @if(!empty($sh['responsible_name']))
                            <span class="ms-3"><i class="bi bi-person me-1"></i> {{ $sh['responsible_name'] }}</span>
                        @endif
                    </div>
                    <a href="{{ $sh['url'] ?? '#' }}" class="btn btn-outline-light rounded-pill px-5 mt-4">
                        Leia Mais <i class="bi bi-arrow-right ms-2"></i>
                    </a>
                </div>
            </div>
        @endif

        {{-- 2. GRID DE NOTÍCIAS --}}
        @if(!empty($items))
            <div class="row g-3">
                @foreach($items as $item)
                    @php
                        $itemDate = !empty($item['published_at']) ? \Carbon\Carbon::parse($item['published_at']) : null;
                        $itemCover = $item['cover_image_url'] ?: $defaultCover;
                    @endphp
                    <div class="col-xl-4 col-lg-6 col-md-6">
                        <div class="noticia-card">
                            <div class="noticia-card-img-wrap">
                                <img src="{{ $itemCover }}" alt="{{ $item['cover_image_alt'] ?? $item['title'] }}" loading="lazy">
                                @if(!empty($item['category_name']))
                                    <span class="noticia-card-badge noticia-card-badge-cat">{{ $item['category_name'] }}</span>
                                @endif
                                @if($item['is_super_highlighted'] ?? false)
                                    <span class="noticia-card-badge noticia-card-badge-super"><i class="bi bi-lightning-fill"></i></span>
                                @elseif($item['is_highlighted'] ?? false)
                                    <span class="noticia-card-badge noticia-card-badge-star"><i class="bi bi-star-fill"></i></span>
                                @endif
                            </div>
                            <div class="noticia-card-body">
                                <h3><a href="{{ $item['url'] ?? '#' }}">{{ $item['title'] }}</a></h3>
                                @if(!empty($item['summary']))
                                    <p>{{ str_limit(strip_tags($item['summary']), 120) }}</p>
                                @elseif(!empty($item['subtitle']))
                                    <p>{{ str_limit(strip_tags($item['subtitle']), 120) }}</p>
                                @endif
                                <div class="noticia-card-footer">
                                    @if($itemDate)
                                        <time>{{ $itemDate->format('d/m/Y') }}</time>
                                    @endif
                                    <a href="{{ $item['url'] ?? '#' }}" class="noticia-card-link">
                                        Leia Mais <i class="bi bi-arrow-right"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</section>

<style>
/* ============================================
   SECTION TITLE (consistente com portal)
   ============================================ */
.section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.section-title-custom {
    font-size: var(--text-lg);
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
}
.section-title-link {
    font-size: var(--text-sm);
    color: var(--tenant-primary, #1075ad);
    text-decoration: none;
    font-weight: 500;
}
.section-title-link:hover {
    text-decoration: underline;
}

/* ============================================
   SUPER NOTÍCIA (banner)
   ============================================ */
.super-news-card {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    min-height: 400px;
    display: flex;
    align-items: flex-end;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
.super-news-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.super-news-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 30%, rgba(0, 0, 0, 0.85) 100%);
}
.super-news-content {
    position: relative;
    z-index: 1;
    padding: 2.5rem;
    color: #fff;
    width: 100%;
}
.super-news-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--tenant-primary, #1075ad);
    border-radius: 50rem;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
}
.super-news-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    max-width: 800px;
    line-height: 1.2;
    margin: 0;
}
.super-news-title a {
    color: #fff;
    text-decoration: none;
}
.super-news-title a:hover {
    text-decoration: underline;
}
.super-news-subtitle {
    font-size: var(--text-base);
    opacity: 0.9;
    max-width: 600px;
    margin-top: 0.5rem;
    margin-bottom: 0;
}
.super-news-meta {
    font-size: var(--text-sm);
    opacity: 0.8;
    margin-top: 0.5rem;
}

/* ============================================
   NOTÍCIA CARD (grid)
   ============================================ */
.noticia-card {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--bs-body-bg, #fff);
    height: 100%;
    transition: box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}
.noticia-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.noticia-card-img-wrap {
    position: relative;
    height: 180px;
    overflow: hidden;
    flex-shrink: 0;
}
.noticia-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.noticia-card:hover .noticia-card-img-wrap img {
    transform: scale(1.05);
}
.noticia-card-body {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.noticia-card-body h3 {
    font-size: var(--text-base);
    font-weight: 600;
    margin: 0 0 0.5rem;
    line-height: 1.35;
}
.noticia-card-body h3 a {
    color: var(--bs-body-color, #212529);
    text-decoration: none;
}
.noticia-card-body h3 a:hover {
    color: var(--tenant-primary, #1075ad);
}
.noticia-card-body p {
    font-size: var(--text-sm);
    color: var(--bs-secondary-color, #6c757d);
    margin: 0 0 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.noticia-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}
.noticia-card-footer time {
    font-size: var(--text-xs);
    color: var(--bs-secondary-color, #6c757d);
}
.noticia-card-link {
    font-size: var(--text-xs);
    color: var(--tenant-primary, #1075ad);
    text-decoration: none;
    font-weight: 500;
}
.noticia-card-link:hover {
    text-decoration: underline;
}

/* ============================================
   BADGES
   ============================================ */
.noticia-card-badge {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0.5rem;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 0.25rem;
    pointer-events: none;
}
.noticia-card-badge-cat {
    top: 0.5rem;
    left: 0.5rem;
    background: var(--tenant-primary, #1075ad);
    color: #fff;
}
.noticia-card-badge-star {
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(255, 193, 7, 0.9);
    color: #000;
}
.noticia-card-badge-super {
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(220, 53, 69, 0.9);
    color: #fff;
    animation: pulse-super 2s infinite;
}

@keyframes pulse-super {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ============================================
   RESPONSIVO
   ============================================ */
@media (max-width: 991px) {
    .super-news-card { min-height: 320px; }
    .super-news-title { font-size: var(--text-lg); }
    .noticia-card-img-wrap { height: 160px; }
}
@media (max-width: 576px) {
    .super-news-card { min-height: 280px; }
    .super-news-content { padding: 1.5rem; }
    .super-news-title { font-size: var(--text-md); }
    .section-title-row { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .noticia-card-img-wrap { height: 140px; }
}
</style>
@endif