@extends('layouts.app')

@section('title', 'Noticias - OnAPB Media Hub')

@section('content')
<div class="container-fluid py-5" style="background: var(--surface);">
    <div class="container py-4">
        <div class="mb-5">
            <span class="text-primary fw-bold text-uppercase tracking-widest d-block mb-2">Comunidad & Actualidad</span>
            <h1 class="display-1 fw-bold mb-3" style="line-height: 0.9;">Noticias<span class="text-primary">.</span></h1>
            <p class="fs-4 text-muted mx-auto" style="max-width: 800px; margin-left: 0 !important;">El pulso del básquet entrerriano. Crónicas, resultados y las efemérides que marcan nuestra historia.</p>
        </div>

        @if($noticias->isEmpty())
            <div class="p-5 text-center bg-white shadow-sm" style="border-top: 10px solid var(--primary-container);">
                <i class="bi bi-newspaper text-muted display-1 mb-4 d-block"></i>
                <h3 class="fw-bold text-uppercase">Silencio en la cancha</h3>
                <p class="text-muted">No hay noticias publicadas por el momento. Volvé pronto.</p>
            </div>
        @else
            @php $featured = $noticias->first(); $rest = $noticias->skip(1); @endphp

            <!-- Featured News: High Impact -->
            <div class="row mb-5">
                <div class="col-12">
                    <div class="bg-white p-0 shadow-lg overflow-hidden d-flex flex-column flex-lg-row" style="min-height: 500px; border: 1px solid var(--primary-container);">
                        <div class="col-lg-7 p-0 overflow-hidden">
                            @if($featured->imagen)
                                <img src="{{ str_starts_with($featured->imagen, 'http') ? $featured->imagen : asset($featured->imagen) }}" alt="{{ $featured->titulo }}" class="w-100 h-100" style="object-fit: cover; min-height: 350px;">
                            @else
                                <div class="w-100 h-100 bg-dark d-flex align-items-center justify-content-center" style="min-height: 350px;">
                                    <i class="bi bi-image text-muted display-1"></i>
                                </div>
                            @endif
                        </div>
                        <div class="col-lg-5 p-5 d-flex flex-column justify-content-center">
                            <div class="mb-4">
                                @if($featured->categoria)
                                    <span class="bg-primary text-white px-3 py-1 fw-bold text-uppercase small tracking-widest">{{ $featured->categoria }}</span>
                                @else
                                    <span class="bg-primary text-white px-3 py-1 fw-bold text-uppercase small tracking-widest">Destacado</span>
                                @endif
                                <span class="ms-3 text-muted fw-bold small text-uppercase"><i class="bi bi-calendar3 me-2"></i> {{ $featured->fecha->translatedFormat('d M Y') }}</span>
                            </div>
                            <h2 class="display-4 fw-bold font-header mb-4" style="line-height: 1;">{{ $featured->titulo }}<span class="text-primary">.</span></h2>
                            <p class="fs-5 text-muted mb-5">
                                {{ Str::limit(strip_tags($featured->contenido), 200) }}
                            </p>
                            <a href="{{ route('noticias.show', $featured->id) }}" class="btn-kinetic-primary w-100 py-3 text-center">LEER CRÓNICA COMPLETA <i class="bi bi-arrow-right ms-2"></i></a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- News Grid: Editorial Cards -->
            <div class="row g-5">
                @foreach($rest as $noticia)
                <div class="col-md-6 col-lg-4">
                    <div class="bg-white p-0 h-100 d-flex flex-column" style="border-top: 6px solid var(--outline-variant); transition: 0.3s;" onmouseover="this.style.borderTopColor='var(--primary)'" onmouseout="this.style.borderTopColor='var(--outline-variant)'">
                        @if($noticia->imagen)
                            <div style="height: 250px; overflow: hidden;">
                                <img src="{{ str_starts_with($noticia->imagen, 'http') ? $noticia->imagen : asset($noticia->imagen) }}" alt="{{ $noticia->titulo }}" class="w-100 h-100" style="object-fit: cover;">
                            </div>
                        @else
                            <div class="bg-light d-flex align-items-center justify-content-center" style="height: 250px;">
                                <i class="bi bi-image text-muted display-4"></i>
                            </div>
                        @endif
                        <div class="p-4 flex-grow-1 d-flex flex-column">
                            <div class="mb-3 d-flex justify-content-between align-items-center">
                                <span class="text-primary fw-bold text-uppercase small tracking-widest">{{ $noticia->categoria ?? 'Actualidad' }}</span>
                                <span class="text-muted fw-bold small">{{ $noticia->fecha->translatedFormat('d/m/Y') }}</span>
                            </div>
                            <h3 class="fw-bold font-header mb-3" style="font-size: 1.5rem; line-height: 1.2;">{{ $noticia->titulo }}</h3>
                            <p class="text-muted small mb-4 flex-grow-1">
                                {{ Str::limit(strip_tags($noticia->contenido), 120) }}
                            </p>
                            <a href="{{ route('noticias.show', $noticia->id) }}" class="text-dark fw-bold text-uppercase small tracking-widest text-decoration-none hover-primary">
                                Continuar leyendo <i class="bi bi-chevron-right ms-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        @endif

        @if(session('admin_logged_in') && session('admin_role') == 1)
        <div class="mt-5 pt-5 border-top">
            <div class="p-5 bg-dark text-white d-flex flex-column flex-md-row justify-content-between align-items-center">
                <div>
                    <h3 class="fw-bold font-header mb-1 text-uppercase">Modo Editor Activo</h3>
                    <p class="mb-md-0 text-muted">Añadí nueva información al Media Hub de la OnAPB.</p>
                </div>
                <a href="{{ route('admin.noticias.create') }}" class="btn-kinetic-primary px-5 py-3">➕ NUEVA NOTICIA</a>
            </div>
        </div>
        @endif
    </div>
</div>

<style>
.hover-primary:hover {
    color: var(--primary) !important;
}
</style>
@endsection