@extends('layout')
@section('head')
    @if ($new->title_metatags)
        <title>{{ $new->title_metatags }}</title>
    @else
        <title>{{ $new->title }}</title>
    @endif

    @if ($new->description_metatags)
        <meta name="description" content="{{ $new->description_metatags }}">
    @else
        <meta name="description" content="{{ $new->excerpt }}">
    @endif

    @vite(['resources/stylus/noticia_detalle.styl'])
@endsection
@section('content')
    @if ($banners)
        <section class="banners relative flex items-center justify-center overflow-hidden" id="banner_escritorio">
            @foreach ($banners as $banner)
                <div class="banners-item">
                    <img src="{{ $banner->imagen_url }}" alt="Hero Background" class="inset-0 w-full h-full object-cover">
                    <div class="banners-item-texto z-10 max-w-4xl mx-auto px-4 text-center">
                        @if ($banner->titulo)
                            <h1 class="text-4xl md:text-6xl font-extrabold text-white leading-tight mb-6">
                                {{ $banner->titulo }}
                            </h1>
                        @endif
                        @if ($banner->subtitulo)
                            <p class="text-lg md:text-xl text-white font-normal mb-10 max-w-2xl mx-auto">
                                {{ $banner->subtitulo }}</p>
                        @endif
                        @if ($banner->link)
                            <a href="{{ $banner->link }}" target="{{ $banner->es_interno ? '_self' : '_blank' }}"
                                class="bg-[#a3e435] text-[#004b92] font-bold py-3 px-10 rounded-lg shadow-xl hover:scale-105 transition-transform text-xl mx-auto">
                                Descubre nuestro impacto
                            </a>
                        @endif
                    </div>
                </div>
            @endforeach
        </section>
        <section class="banners relative flex items-center justify-center overflow-hidden" id="banner_movil">
            @foreach ($banners as $banner)
                <div class="banners-item">
                    <img src="{{ $banner->imagen_movil_url }}" alt="Hero Background"
                        class="inset-0 w-full h-full object-cover">
                    <div class="banners-item-texto z-10 max-w-4xl mx-auto px-4 text-center">
                        @if ($banner->titulo)
                            <h1 class="text-4xl md:text-6xl font-extrabold text-white leading-tight mb-6">
                                {{ $banner->titulo }}
                            </h1>
                        @endif
                        @if ($banner->subtitulo)
                            <p class="text-lg md:text-xl text-white font-normal mb-10 max-w-2xl mx-auto">
                                {{ $banner->subtitulo }}</p>
                        @endif
                        @if ($banner->link)
                            <a href="{{ $banner->link }}" target="{{ $banner->es_interno ? '_self' : '_blank' }}"
                                class="bg-[#a3e435] text-[#004b92] font-bold py-3 px-10 rounded-lg shadow-xl hover:scale-105 transition-transform text-xl mx-auto">
                                Descubre nuestro impacto
                            </a>
                        @endif
                    </div>
                </div>
            @endforeach
        </section>
    @endif

    <!-- Main Content Area -->
    <div class="max-w-[1176px] mx-auto bg-white rounded shadow-sm relative z-10">
        <!-- Article Content -->
        <div class="px-6 lg:px-[100px] py-10">
            <h2 class="text-2xl md:text-4xl mb-10 text-center">{{ $new->title }}</h2>
            <div class="mb-10 font-advent text-base leading-[26px] text-[#323842] space-y-6">
                {!! $new->content_1 !!}
            </div>
            @if ($new->video_youtube)
                <div class="post-video">
                    <iframe width="1280" height="420" src="https://www.youtube.com/embed/{{ $new->video_youtube }}"
                        title="YouTube video player" frameborder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen></iframe>
                </div>
            @endif
            @if ($new->content_2)
                <div class="mb-10 font-advent text-base leading-[26px] text-[#323842] space-y-6">
                    {!! $new->content_2 !!}
                </div>
            @endif
            <div class="blog-galeria mb-12">
                <div class="blog-galeria-img">
                    <img src="{{ $new->large_image_url }}" alt="" />
                </div>
                @if ($new->galleries)
                    @foreach ($new->galleries as $gallery)
                        <div class="blog-galeria-img">
                            <img src="{{ $gallery->image_url }}" alt="" />
                        </div>
                    @endforeach
                @endif
            </div>
            @if ($new->content_3)
                <div class="font-advent text-base leading-[26px] text-[#323842] space-y-6">
                    {!! $new->content_3 !!}
                </div>
            @endif
            @if ($new->pdf_url)
                <div class="post-boton">
                    <a href="{{ $new->pdf_url }}" target="_blank"
                        class="bg-[#a3e435] text-[#004b92] font-bold py-3 px-10 rounded-lg shadow-xl hover:scale-105 transition-transform text-xl mx-auto">
                        Ver PDF
                    </a>
                </div>
            @endif
        </div>
    </div>

    <!-- Social Share Bar -->
    <section class="w-full bg-[#004b92] py-10">
        <div
            class="max-w-[1440px] mx-auto px-6 lg:px-20 flex flex-col md:flex-row items-center justify-center gap-8 lg:gap-32">
            <div class="text-center md:text-left">
                <h3 class="text-white text-2xl font-bold leading-tight">Comparte nuestro contenido:</h3>
                <p class="text-white text-sm font-medium opacity-90">¡Envía esta información a quien tú quieras!</p>
            </div>
            <div class="flex items-center space-x-10">
                <a href="javascript:;" data-sharer="x" data-title="{{ $new->title }}"
                    data-url="{{ route('noticia_detalle', ['id' => $new->id, 'slug' => $new->slug]) }}"
                    class="text-white hover:scale-110 transition-transform">
                    <svg data-svg-id="SVG_10" class="w-[46px] h-[46px]"></svg>
                    <img src="{{ asset('images/noticia_detalle/X.png') }}" alt="X" class="w-[46px] h-[46px]">
                </a>
                <a href="javascript:;" data-sharer="facebook" data-hashtag="hashtag"
                    data-url="{{ route('noticia_detalle', ['id' => $new->id, 'slug' => $new->slug]) }}"
                    class="text-white hover:scale-110 transition-transform">
                    <svg data-svg-id="SVG_11" class="w-[46px] h-[46px]"></svg>
                    <img src="{{ asset('images/noticia_detalle/IMG_11.svg') }}" alt="Facebook" class="w-[46px] h-[46px]">
                </a>
            </div>
        </div>
    </section>

    @if ($news)
        <!-- Related Content -->
        <section class="w-full py-20 bg-white relacionados">
            <div class="max-w-[1440px] mx-auto px-6 lg:px-20">
                <h2 class="text-[#171a1f] text-3xl lg:text-[32px] font-bold text-center mb-16">Relacionadas</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 justify-items-center">
                    @foreach ($news as $item)
                        <a href="{{ route('noticia_detalle', ['id' => $item->id, 'slug' => $item->slug]) }}"
                            class="bg-white rounded-md card-shadow-deep w-full max-w-[363px] flex flex-col h-[436px] p-6">
                            <div class="rounded-[10px] overflow-hidden h-[147px] mb-6">
                                <img src="{{ $item->thumbnail_image_url }}" alt="{{ $item->title }}"
                                    class="w-full h-full object-cover">
                            </div>
                            <h4 class="text-[#1A1A1A] text-xl font-semibold leading-[28px] mb-3 line-clamp-2">
                                {{ $item->title }}</h4>
                            <p class="font-advent text-sm text-[#5F5F5F] leading-[20px] mb-auto line-clamp-3">
                                {{ $item->excerpt }}
                            </p>
                            <span
                                class="border border-[#E1E1E1] rounded-lg py-2 px-6 font-accent text-sm font-medium hover:bg-gray-50">
                                Ver más
                            </span>
                        </a>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
@endsection
@section('js')
    @vite(['resources/js/sitio_publico/noticia_detalle.js'])
@endsection