@extends('public.layouts.app')
@section('title', 'Noticias y Publicaciones')

@section('content')

{{-- ── HERO ─────────────────────────────────── --}}
<div class="page-hero" style="background:linear-gradient(135deg,#1e293b 0%,#1e3a8a 50%,#7c3aed 100%);">
    <div class="container">
        <div class="page-hero-content">
            <span class="page-hero-badge"><i class="bi bi-newspaper"></i> Publicaciones</span>
            <h1 class="page-hero-title">Noticias, Comunicados <span style="color:#a78bfa;">y Logros</span></h1>
            <p class="page-hero-desc">Mantente informado de todo lo que sucede en WebSoft Solutions: noticias, convocatorias, comunicados y más.</p>
        </div>
    </div>
</div>

{{-- ── FILTROS DE TIPO ──────────────────────── --}}
<section style="background:white;padding:1.5rem 0;border-bottom:1px solid #e2e8f0;position:sticky;top:75px;z-index:100;box-shadow:0 4px 12px rgba(0,0,0,.05);">
    <div class="container">
        <div class="noticias-tabs">
            @php
            $tipos = [
                'todos'        => ['Todos', 'bi-grid-fill'],
                'noticia'      => ['Noticias', 'bi-newspaper'],
                'comunicado'   => ['Comunicados', 'bi-megaphone-fill'],
                'convocatoria' => ['Convocatorias', 'bi-person-lines-fill'],
                'logro'        => ['Logros', 'bi-trophy-fill'],
            ];
            @endphp
            @foreach($tipos as $key => [$label, $icon])
            <a href="{{ route('noticias') }}?tipo={{ $key }}"
               class="noticias-tab-btn {{ $tipo === $key ? 'active' : '' }}">
                <i class="bi {{ $icon }}"></i> {{ $label }}
            </a>
            @endforeach
        </div>
    </div>
</section>

{{-- ── GRID NOTICIAS ────────────────────────── --}}
<section class="section-padding" style="background:#f8fafc;">
    <div class="container">
        @if($noticias->count())
        <div class="noticias-grid" style="grid-template-columns:repeat(auto-fill,minmax(320px,1fr));">
            @foreach($noticias as $n)
            <article class="noticia-card" data-aos="fade-up" data-aos-delay="{{ ($loop->index % 3) * 80 }}">
                <a href="{{ route('noticia.show', $n->slug) }}" style="text-decoration:none;color:inherit;">
                    <div class="noticia-card-img">
                        @if($n->imagen)
                        <img src="{{ asset('storage/'.$n->imagen) }}" alt="{{ $n->titulo }}" loading="lazy">
                        @else
                        <div class="noticia-card-img-placeholder">
                            @if($n->tipo==='noticia')📰@elseif($n->tipo==='comunicado')📢@elseif($n->tipo==='convocatoria')📋@else🏆@endif
                        </div>
                        @endif
                        <span class="noticia-card-badge badge-{{ $n->tipo }}">{{ $n->tipo_label }}</span>
                    </div>
                    <div class="noticia-card-body">
                        <div class="noticia-card-date">
                            <i class="bi bi-calendar3"></i>
                            {{ $n->fecha_publicacion->isoFormat('D MMM YYYY') }}
                        </div>
                        <h3 class="noticia-card-title">{{ $n->titulo }}</h3>
                        @if($n->resumen)
                        <p class="noticia-card-desc">{{ $n->resumen }}</p>
                        @endif
                        <span class="noticia-card-link">
                            Leer más <i class="bi bi-arrow-right"></i>
                        </span>
                    </div>
                </a>
            </article>
            @endforeach
        </div>

        {{-- Paginación --}}
        @if($noticias->hasPages())
        <div style="display:flex;justify-content:center;margin-top:3rem;gap:.5rem;flex-wrap:wrap;">
            @if($noticias->onFirstPage())
            <span class="btn btn-secondary btn-sm" style="opacity:.5;cursor:default;">
                <i class="bi bi-chevron-left"></i> Anterior
            </span>
            @else
            <a href="{{ $noticias->previousPageUrl() }}" class="btn btn-secondary btn-sm">
                <i class="bi bi-chevron-left"></i> Anterior
            </a>
            @endif

            <span style="display:flex;align-items:center;gap:.3rem;font-size:.85rem;color:#64748b;">
                Página {{ $noticias->currentPage() }} de {{ $noticias->lastPage() }}
            </span>

            @if($noticias->hasMorePages())
            <a href="{{ $noticias->nextPageUrl() }}" class="btn btn-primary btn-sm">
                Siguiente <i class="bi bi-chevron-right"></i>
            </a>
            @else
            <span class="btn btn-primary btn-sm" style="opacity:.5;cursor:default;">
                Siguiente <i class="bi bi-chevron-right"></i>
            </span>
            @endif
        </div>
        @endif

        @else
        <div style="text-align:center;padding:5rem 0;">
            <div style="font-size:4rem;margin-bottom:1rem;">📭</div>
            <h3 style="color:#1e293b;margin-bottom:.5rem;">No hay publicaciones</h3>
            <p style="color:#64748b;">
                @if($tipo !== 'todos')
                No hay publicaciones del tipo seleccionado. <a href="{{ route('noticias') }}">Ver todas</a>
                @else
                Pronto habrá publicaciones disponibles.
                @endif
            </p>
        </div>
        @endif
    </div>
</section>

@endsection