@extends('layouts.app')

@section('title', $noticia->titulo . ' - OnAPB Media Hub')

@section('content')
<article class="news-article" style="background: var(--surface);">
    <!-- Article Hero: Digital High Impact -->
    <header class="article-hero position-relative overflow-hidden mb-5" style="min-height: 400px; background: #000;">
        @if($noticia->imagen)
            <img src="{{ str_starts_with($noticia->imagen, 'http') ? $noticia->imagen : asset($noticia->imagen) }}" 
                 class="w-100 h-100 position-absolute top-0 start-0" 
                 style="object-fit: cover; opacity: 0.6; filter: grayscale(30%) contrast(1.1);" 
                 alt="{{ $noticia->titulo }}">
        @endif
        
        <div class="container position-relative py-5 d-flex flex-column justify-content-end" style="min-height: 400px; z-index: 2;">
            <div class="col-lg-10 col-xl-8">
                <div class="mb-4 animate-on-scroll">
                    @if($noticia->categoria)
                        <span class="bg-primary text-white px-3 py-1 fw-bold text-uppercase small tracking-widest d-inline-block mb-3">
                            {{ $noticia->categoria }}
                        </span>
                    @else
                        <span class="bg-primary text-white px-3 py-1 fw-bold text-uppercase small tracking-widest d-inline-block mb-3">
                            Comunicado
                        </span>
                    @endif
                    <div class="text-white opacity-75 small fw-bold text-uppercase tracking-widest mb-2 font-header">
                        <i class="bi bi-calendar3 me-2 text-primary"></i> {{ $noticia->fecha->translatedFormat('d F, Y') }}
                    </div>
                </div>
                <h1 class="display-3 fw-bold text-white mb-0 font-header" style="line-height: 1.1; letter-spacing: -2px;">
                    {{ $noticia->titulo }}<span class="text-primary">.</span>
                </h1>
            </div>
        </div>
        
        <!-- Gradient Overlay -->
        <div class="position-absolute bottom-0 start-0 w-100 h-100" 
             style="background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%);">
        </div>
    </header>

    <!-- Article Body -->
    <div class="container pb-5">
        <div class="row g-5">
            <!-- Main Content Column -->
            <div class="col-lg-8 mx-auto">
                <div class="article-content fs-5 text-dark lh-base font-body mb-5" style="letter-spacing: -0.01em;">
                    {!! nl2br(e($noticia->contenido)) !!}
                </div>
                
                <!-- Share & Interaction -->
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-center py-5 border-top border-bottom mb-5 gap-3">
                    <div class="d-flex align-items-center gap-3">
                        <span class="text-muted fw-bold small text-uppercase tracking-widest">Compartir</span>
                        <div class="d-flex gap-2">
                            <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}" target="_blank" class="btn btn-outline-dark btn-sm rounded-circle" style="width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;"><i class="bi bi-facebook"></i></a>
                            <a href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}&text={{ urlencode($noticia->titulo) }}" target="_blank" class="btn btn-outline-dark btn-sm rounded-circle" style="width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;"><i class="bi bi-twitter-x"></i></a>
                            <a href="https://api.whatsapp.com/send?text={{ urlencode($noticia->titulo . ' ' . url()->current()) }}" target="_blank" class="btn btn-outline-dark btn-sm rounded-circle" style="width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;"><i class="bi bi-whatsapp"></i></a>
                        </div>
                    </div>
                    <div>
                        <a href="{{ route('noticias.index') }}" class="btn-kinetic-outline d-inline-flex align-items-center px-4 py-2 small fw-bold text-uppercase tracking-widest text-decoration-none border border-dark">
                            <i class="bi bi-arrow-left me-2"></i> Volver al Media Hub
                        </a>
                    </div>
                </div>
                
                <!-- Comments/Engagement (Optional Placeholder) -->
                <div class="p-5 bg-white shadow-sm text-center mb-5" style="border-top: 8px solid var(--primary);">
                    <i class="bi bi-chat-left-quote text-muted display-4 mb-4 d-block"></i>
                    <h3 class="fw-bold font-header mb-3">Sé parte de la conversación</h3>
                    <p class="text-muted mb-4 mx-auto" style="max-width: 500px;">Sumate a la comunidad OnAPB y compartí tus comentarios sobre esta cobertura en nuestras redes sociales oficiales.</p>
                    <div class="d-flex justify-content-center gap-3">
                        <a href="https://instagram.com/prensa_apb" target="_blank" class="btn btn-dark px-4 py-2 rounded-0 fw-bold small"><i class="bi bi-instagram me-2"></i> INSTAGRAM</a>
                    </div>
                </div>
            </div>
            
            <!-- Sidebar (Optional for related content) -->
            <!-- We keep it empty for now to maintain the clean editorial look, or add related tournaments -->
        </div>
    </div>
</article>

<style>
.news-article {
    min-height: 100vh;
}
.article-content p {
    margin-bottom: 2rem;
}
.article-hero {
    border-bottom: 8px solid var(--primary);
}
.btn-kinetic-outline:hover {
    background: var(--primary);
    color: white !important;
    border-color: var(--primary) !important;
}
</style>
@endsection