@extends('public.layouts.app')

@section('title', $noticia->titulo)

@section('content')

<!-- Breadcrumb hero -->
<div style="background: linear-gradient(135deg,#0f172a 0%,#1e3a8a 100%); padding:3rem 0;">
    <div class="container">
        <div style="display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:rgba(255,255,255,.55);margin-bottom:.75rem;flex-wrap:wrap;">
            <a href="{{ route('home') }}" style="color:rgba(255,255,255,.55);">Inicio</a>
            <i class="bi bi-chevron-right" style="font-size:.7rem;"></i>
            <a href="{{ route('home') }}#noticias" style="color:rgba(255,255,255,.55);">Publicaciones</a>
            <i class="bi bi-chevron-right" style="font-size:.7rem;"></i>
            <span style="color:rgba(255,255,255,.8);">{{ $noticia->tipo_label }}</span>
        </div>
        <span class="badge badge-{{ $noticia->tipo }}" style="margin-bottom:.75rem;font-size:.8rem;padding:.35rem .9rem;">
            {{ $noticia->tipo_label }}
        </span>
        <h1 style="font-size:clamp(1.6rem,4vw,2.5rem);font-weight:800;color:white;line-height:1.25;max-width:800px;">
            {{ $noticia->titulo }}
        </h1>
        <div style="display:flex;align-items:center;gap:1.5rem;margin-top:1.25rem;flex-wrap:wrap;">
            <span style="color:rgba(255,255,255,.55);font-size:.85rem;display:flex;align-items:center;gap:.4rem;">
                <i class="bi bi-calendar3"></i>
                {{ $noticia->fecha_publicacion->isoFormat('D [de] MMMM [de] YYYY') }}
            </span>
            @if($noticia->destacado)
            <span style="color:#fbbf24;font-size:.85rem;display:flex;align-items:center;gap:.3rem;">
                <i class="bi bi-star-fill"></i> Destacado
            </span>
            @endif
        </div>
    </div>
</div>

<!-- Contenido -->
<section style="padding:3rem 0 4rem;">
    <div class="container">
        <div class="noticia-detail-grid" style="display:grid;grid-template-columns:1fr 300px;gap:2.5rem;align-items:flex-start;">

            <!-- Artículo -->
            <article>
                @if($noticia->imagen)
                <img src="{{ asset('storage/'.$noticia->imagen) }}" alt="{{ $noticia->titulo }}"
                     style="width:100%;height:360px;object-fit:cover;border-radius:16px;margin-bottom:2rem;">
                @endif

                <div style="background:white;border-radius:16px;padding:2.5rem;box-shadow:0 4px 20px rgba(0,0,0,.07);border:1px solid #e2e8f0;font-size:1rem;line-height:1.9;color:#334155;">
                    @if($noticia->resumen)
                    <p style="font-size:1.1rem;color:#475569;font-weight:500;border-left:4px solid #2563eb;padding-left:1.25rem;margin-bottom:1.75rem;font-style:italic;">
                        {{ $noticia->resumen }}
                    </p>
                    @endif

                    {!! $noticia->contenido !!}

                </div>

                {{-- ── BOTONES DE ENLACE ── --}}
                @if($noticia->botones && count($noticia->botones) > 0)
                @php
                    $botonesPublicos = collect($noticia->botones)->filter(fn($b) => !empty($b['url']));
                @endphp
                @if($botonesPublicos->count() > 0)
                <div style="margin-top:2rem;margin-bottom:1rem;">
                    <div style="display:flex;flex-wrap:wrap;gap:12px;align-items:center;">
                        @foreach($botonesPublicos as $btn)
                        @php
                            $color = $btn['color'] ?? '#1565c0';
                            $texto = $btn['texto'] ?? 'Ver más';
                            $url   = $btn['url'];
                            // Calcular color oscuro para el hover (shadow)
                        @endphp
                        <a href="{{ $url }}"
                           target="_blank"
                           rel="noopener"
                           class="noticia-link-btn"
                           style="
                               display:inline-flex;align-items:center;gap:8px;
                               padding:11px 24px;
                               border-radius:50px;
                               background:{{ $color }};
                               color:#fff;
                               font-weight:700;
                               font-size:14px;
                               text-decoration:none;
                               box-shadow:0 4px 16px {{ $color }}55;
                               transition:transform .18s,box-shadow .18s,opacity .18s;
                               letter-spacing:.3px;
                               border:2px solid transparent;
                           "
                           onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 8px 24px {{ $color }}77';this.style.opacity='.93';"
                           onmouseout="this.style.transform='';this.style.boxShadow='0 4px 16px {{ $color }}55';this.style.opacity='1';">
                            <i class="bi bi-box-arrow-up-right" style="font-size:13px;"></i>
                            {{ $texto }}
                        </a>
                        @endforeach
                    </div>
                </div>
                @endif
                @endif

                <!-- Compartir -->

                <div style="margin-top:2rem;padding:1.25rem 1.5rem;background:white;border-radius:12px;border:1px solid #e2e8f0;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;">
                    <span style="font-weight:600;color:#334155;font-size:.9rem;">
                        <i class="bi bi-share-fill" style="color:#2563eb;"></i> Compartir:
                    </span>
                    <a href="https://wa.me/?text={{ urlencode($noticia->titulo.' '.request()->url()) }}"
                       target="_blank" class="btn btn-sm" style="background:#25D366;color:white;">
                        <i class="bi bi-whatsapp"></i> WhatsApp
                    </a>
                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(request()->url()) }}"
                       target="_blank" class="btn btn-sm" style="background:#1877F2;color:white;">
                        <i class="bi bi-facebook"></i> Facebook
                    </a>
                    <a href="{{ route('home') }}#noticias" class="btn btn-secondary btn-sm" style="margin-left:auto;">
                        <i class="bi bi-arrow-left"></i> Volver
                    </a>
                </div>
            </article>

            <!-- Sidebar -->
            <aside>
                <!-- Publicaciones recientes -->
                <div style="background:white;border-radius:16px;padding:1.5rem;box-shadow:0 4px 20px rgba(0,0,0,.07);border:1px solid #e2e8f0;margin-bottom:1.5rem;">
                    <h4 style="font-size:1rem;font-weight:700;color:#0f172a;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:2px solid #e2e8f0;display:flex;align-items:center;gap:.5rem;">
                        <i class="bi bi-newspaper" style="color:#2563eb;"></i> Publicaciones Recientes
                    </h4>
                    <div style="display:flex;flex-direction:column;gap:1rem;">
                        @foreach($recientes as $rec)
                        <a href="{{ route('noticia.show', $rec->slug) }}"
                           style="display:flex;gap:.85rem;align-items:flex-start;text-decoration:none;">
                            <div style="width:64px;height:52px;border-radius:8px;background:linear-gradient(135deg,#1e293b,#334155);flex-shrink:0;overflow:hidden;">
                                @if($rec->imagen)
                                <img src="{{ asset('storage/'.$rec->imagen) }}" alt="" style="width:100%;height:100%;object-fit:cover;">
                                @else
                                <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:1.25rem;">
                                    @if($rec->tipo==='noticia')📰@elseif($rec->tipo==='comunicado')📢@elseif($rec->tipo==='convocatoria')📋@else🏆@endif
                                </div>
                                @endif
                            </div>
                            <div style="min-width:0;">
                                <div style="font-size:.72rem;color:#2563eb;font-weight:600;margin-bottom:.2rem;">{{ $rec->tipo_label }}</div>
                                <div style="font-size:.83rem;font-weight:600;color:#1e293b;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">{{ $rec->titulo }}</div>
                            </div>
                        </a>
                        @endforeach
                    </div>
                </div>

                <!-- Contacto rápido -->
                @if($config['social_whatsapp'] ?? false)
                <div style="background:linear-gradient(135deg,#2563eb,#06b6d4);border-radius:16px;padding:1.5rem;text-align:center;color:white;">
                    <i class="bi bi-whatsapp" style="font-size:2.5rem;display:block;margin-bottom:.75rem;"></i>
                    <div style="font-weight:700;font-size:1.05rem;margin-bottom:.5rem;">¿Tienes preguntas?</div>
                    <div style="font-size:.85rem;opacity:.85;margin-bottom:1.25rem;">Escríbenos por WhatsApp y te atendemos de inmediato.</div>
                    <a href="https://wa.me/{{ $config['social_whatsapp'] }}" target="_blank"
                       style="display:inline-flex;align-items:center;gap:.5rem;background:white;color:#2563eb;padding:.6rem 1.25rem;border-radius:50px;font-weight:700;font-size:.88rem;">
                        <i class="bi bi-whatsapp"></i> Contactar ahora
                    </a>
                </div>
                @endif
            </aside>

        </div>
    </div>
</section>

<style>
@media (max-width: 900px) {
    .noticia-detail-grid { grid-template-columns: 1fr !important; }
}
</style>

@endsection