@php
    /** @var \V2\Modules\Publicacoes\Noticias\Models\News $news */
    /** @var string $htmlContent */
    /** @var \Illuminate\Support\Collection $related */
    $previewMode = isset($previewMode) && $previewMode ? true : false;
    $seoData = $news->getSeoData();
    $pageTitle = $previewMode ? '[Preview] ' . $news->title : $news->title;
    $metaDescription = strip_tags($seoData['description'] ?? ($news->subtitle ?? $news->summary ?? ''));
    $metaImage = $news->getCoverImageUrl();
    $authorName = $news->author ? ($news->author->name ?? $news->author->email ?? '') : ($news->responsible_name ?? '');
    $isFromApi = ($news->metadata['source'] ?? '') === 'api';

    $monthsPt = ['JAN', 'FEV', 'MAR', 'ABR', 'MAI', 'JUN', 'JUL', 'AGO', 'SET', 'OUT', 'NOV', 'DEZ'];
@endphp

@push('head-styles')
<meta property="article:published_time" content="{{ $news->published_at ? $news->published_at->toIso8601String() : $news->created_at->toIso8601String() }}">
<meta property="article:modified_time" content="{{ $news->updated_at->toIso8601String() }}">
<meta property="article:author" content="{{ $authorName ?: config('app.name') }}">
<meta property="article:section" content="Notícias">
@endpush

@php
    // Palavras-chave a partir das tags
    $keywords = '';
    if ($news->relationLoaded('tags') && $news->tags->count() > 0) {
        $keywords = $news->tags->pluck('name')->implode(', ');
    }

    // Contagem aproximada de palavras (do conteúdo e subtítulo)
    $wordCount = 0;
    if (!empty($htmlContent)) {
        $wordCount = str_word_count(strip_tags($htmlContent));
    } elseif (!empty($news->summary)) {
        $wordCount = str_word_count($news->summary);
    } elseif (!empty($news->subtitle)) {
        $wordCount = str_word_count($news->subtitle);
    }

    // URL canônica da página
    $pageUrl = request()->url();

    // Itens da galeria para hasPart
    $hasParts = [];
    if ($news->relationLoaded('gallery') && $news->gallery->count() > 0) {
        foreach ($news->gallery as $galleryMedia) {
            $captionAlt = $galleryMedia->alt_text;
            if (empty($captionAlt) || preg_match('/\.(png|jpe?g|gif|svg|webp|bmp|ico|tiff?|pdf)$/i', $captionAlt)) {
                $captionAlt = $galleryMedia->description ?: 'Imagem da galeria';
            }
            $hasParts[] = [
                '@type' => 'ImageObject',
                'contentUrl' => v2_storage_url($galleryMedia->file_path),
                'caption' => $captionAlt,
            ];
        }
    }
    // Adiciona a imagem de capa como primeiro hasPart se existir
    if ($metaImage) {
        array_unshift($hasParts, [
            '@type' => 'ImageObject',
            'contentUrl' => $metaImage,
            'caption' => $news->getCoverImageAlt(),
        ]);
    }

    $schemas = [
        [
            '@context' => 'https://schema.org',
            '@type' => 'NewsArticle',
            'headline' => $news->title,
            'description' => $metaDescription,
            'image' => $metaImage ?: [],
            'thumbnailUrl' => $metaImage,
            'datePublished' => $news->published_at ? $news->published_at->toIso8601String() : $news->created_at->toIso8601String(),
            'dateModified' => $news->updated_at->toIso8601String(),
            'wordCount' => $wordCount,
            'isAccessibleForFree' => true,
            'inLanguage' => 'pt-BR',
            'mainEntityOfPage' => [
                '@type' => 'WebPage',
                '@id' => $pageUrl,
            ],
            'author' => [
                '@type' => 'Organization',
                'name' => $isFromApi
                    ? ($news->metadata['source_unidade_regional_name'] ?? config('app.name'))
                    : config('app.name'),
                'url' => $isFromApi && !empty($news->metadata['source_unidade_regional_slug'])
                    ? url('/regional/' . $news->metadata['source_unidade_regional_slug'])
                    : url('/'),
            ],
            'publisher' => [
                '@type' => 'Organization',
                'name' => config('app.name'),
                'url' => url('/'),
                'logo' => [
                    '@type' => 'ImageObject',
                    'url' => url('/assets/images/logo.png'),
                ],
            ],
            'copyrightYear' => ($news->published_at ? $news->published_at->year : $news->created_at->year),
            'copyrightHolder' => [
                '@type' => 'Organization',
                'name' => config('app.name'),
            ],
        ],
    ];

    // Categoria como articleSection
    if ($news->category) {
        $schemas[0]['articleSection'] = $news->category->name;
    }

    // Tags como keywords
    if (!empty($keywords)) {
        $schemas[0]['keywords'] = $keywords;
    }

    // about a partir das tags
    if ($news->relationLoaded('tags') && $news->tags->count() > 0) {
        foreach ($news->tags as $tag) {
            $schemas[0]['about'][] = [
                '@type' => 'Thing',
                'name' => $tag->name,
            ];
        }
    }

    // Galeria como hasPart
    if (!empty($hasParts)) {
        $schemas[0]['hasPart'] = $hasParts;
    }

    if ($isFromApi) {
        $schemas[0]['provider'] = [
            '@type' => 'Organization',
            'name' => $news->metadata['source_unidade_regional_name'] ?? 'Regional SUCESU',
            '@id' => $news->metadata['source_unidade_regional_slug'] ?? '',
        ];
    }
@endphp

@extends('v2-portal::app-layout', [
    'pageTitle'             => $pageTitle,
    'pageDescription'       => str_limit($metaDescription, 160),
    'coverImage'            => $metaImage,
    'gtag'                  => ['page_context' => 'noticia'],
    'schemas'               => $schemas,
    'showAccessibilityBar'  => true,
    'stickyAccessibilityBar'=> false,
    'showHeader'            => true,
    'showMainHeader'        => false,
    'showMainFooter'        => true,
    'showFooter'            => true,
    'showMainLeftArea'      => false,
    'showMainRightArea'     => false,
    'fullWidthMain'         => true,
])

@section('main-section-area')
    {{-- ================================================================ --}}
    {{-- BREADCRUMB COMPACTO + TÍTULO                                      --}}
    {{-- ================================================================ --}}
    <section class="news-page-header">
        <div class="container">
            <nav aria-label="Breadcrumb" class="news-breadcrumb">
                <ol itemscope itemtype="https://schema.org/BreadcrumbList">
                    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
                        <a href="/" itemprop="item"><span itemprop="name">Início</span></a>
                        <meta itemprop="position" content="1">
                    </li>
                    <li class="sep" aria-hidden="true"><i class="bi bi-chevron-right"></i></li>
                    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
                        <a href="{{ route('v2.noticias.portal.index') }}" itemprop="item"><span itemprop="name">Notícias</span></a>
                        <meta itemprop="position" content="2">
                    </li>
                    <li class="sep" aria-hidden="true"><i class="bi bi-chevron-right"></i></li>
                    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" aria-current="page">
                        <span itemprop="name">{{ $news->title }}</span>
                        <meta itemprop="position" content="3">
                    </li>
                </ol>
            </nav>
        </div>
    </section>

    {{-- ================================================================ --}}
    {{-- CONTEÚDO + SIDEBAR                                                 --}}
    {{-- ================================================================ --}}
    <section class="news-article section-padding fix">
        <div class="container">
            <div class="row g-4">
                <div class="col-lg-8">

                    <a href="#noticia-conteudo" class="visually-hidden-focusable">Pular para o conteúdo da notícia</a>

                    {{-- Preview mode alert --}}
                    @if($previewMode)
                    <div class="alert alert-warning d-flex align-items-center gap-2 mb-4" role="alert">
                        <i class="bi bi-eye-slash-fill flex-shrink-0" aria-hidden="true"></i>
                        <div><strong>Modo Preview.</strong> Esta notícia <strong>não está publicada</strong>.</div>
                    </div>
                    @endif

                    <article id="noticia-conteudo">
                        <h1 class="visually-hidden">{{ $news->title }}</h1>

                        {{-- Badge de origem (API de regional) --}}
                        @if($isFromApi)
                        <div class="alert alert-info d-flex align-items-center gap-2 py-2 px-3 mb-3 small" role="alert">
                            <i class="bi bi-building flex-shrink-0" aria-hidden="true"></i>
                            <span>Enviado por: <strong>{{ $news->metadata['source_unidade_regional_name'] ?? 'Regional SUCESU' }}</strong></span>
                            @if(!empty($news->metadata['author_name']))
                                <span class="text-muted ms-2">— {{ $news->metadata['author_name'] }}</span>
                            @endif
                        </div>
                        @endif

                        {{-- Imagem de capa --}}
                        @if($news->cover_image_id && $news->coverImage)
                        <div class="news-article__cover mb-4">
                            @include('v2-service-media::components.picture', [
                                'originalPath' => $news->coverImage->file_path,
                                'variants'     => $news->getCoverImageVariants(),
                                'alt'          => $news->getCoverImageAlt(),
                                'class'        => 'news-article__cover-img',
                                'lazy'         => false,
                            ])
                            @if(isset($news->unidadeRegional) && $news->unidadeRegional && strtolower($news->unidadeRegional->acronym) !== 'nac')
                            <span class="badge position-absolute top-0 end-0 m-3" style="background: var(--tenant-primary);z-index:10;font-size:0.85rem;">
                                {{ $news->unidadeRegional->name }}
                            </span>
                            @endif
                        </div>
                        @elseif($metaImage)
                        <div class="news-article__cover mb-4">
                            <img src="{{ $metaImage }}"
                                 alt="{{ $news->getCoverImageAlt() }}"
                                 class="news-article__cover-img"
                                 loading="eager" decoding="async">
                            @if(isset($news->unidadeRegional) && $news->unidadeRegional && strtolower($news->unidadeRegional->acronym) !== 'nac')
                            <span class="badge position-absolute top-0 end-0 m-3" style="background: var(--tenant-primary);z-index:10;font-size:0.85rem;">
                                {{ $news->unidadeRegional->name }}
                            </span>
                            @endif
                        </div>
                        @endif

                        {{-- Link para a regional --}}
                        @if(isset($news->unidadeRegional) && $news->unidadeRegional && strtolower($news->unidadeRegional->acronym) !== 'nac')
                            <div class="mb-2">
                                <a href="{{ route('v2.unidade-regional.portal.show', ['slug' => $news->unidadeRegional->slug]) }}"
                                   class="badge text-decoration-none" style="background: var(--tenant-primary);color: var(--color-bg-main);">
                                    <i class="bi bi-geo-alt me-1"></i>{{ $news->unidadeRegional->name }}
                                </a>
                            </div>
                        @endif

                        {{-- Metadados --}}
                        <div class="news-article__meta d-flex flex-wrap gap-3 mb-4">
                            <time class="news-article__date"
                                  datetime="{{ $news->published_at ? $news->published_at->toIso8601String() : $news->created_at->toIso8601String() }}">
                                <i class="bi bi-calendar3 me-1" aria-hidden="true"></i>
                                {{ $news->published_at ? $news->published_at->format('d/m/Y H:i') : $news->created_at->format('d/m/Y H:i') }}
                            </time>
                            @if($authorName)
                                <span class="news-article__author">
                                    <i class="bi bi-person me-1" aria-hidden="true"></i>{{ $authorName }}
                                </span>
                            @endif
                            @if($news->category)
                                <span class="news-article__category">
                                    <i class="bi bi-tag me-1" aria-hidden="true"></i>{{ $news->category->name }}
                                </span>
                            @endif
                        </div>

                        {{-- Corpo do artigo --}}
                        <div class="news-article__body mb-5">
                            @if(!empty($htmlContent))
                                @include('v2-service-contentricheditor::components.partials.viewer-styles')
                                <div class="content-rich-viewer preview-target">
                                    {!! $htmlContent !!}
                                </div>
                            @elseif($news->summary)
                                <p>{{ $news->summary }}</p>
                            @elseif($news->subtitle)
                                <p>{{ $news->subtitle }}</p>
                            @else
                                <p class="text-muted fst-italic">Nenhum conteúdo disponível.</p>
                            @endif
                        </div>

                        {{-- Fonte --}}
                        @if($news->source)
                            <div class="news-article__source mb-4 p-3 bg-light rounded">
                                <strong class="small text-muted"><i class="bi bi-info-circle me-1"></i>Fonte:</strong>
                                <p class="mb-0 small">{{ $news->source }}</p>
                            </div>
                        @endif

                        {{-- Tags --}}
                        @if($news->relationLoaded('tags') && $news->tags->count() > 0)
                            <div class="news-article__tags d-flex flex-wrap gap-2 mb-4">
                                @foreach($news->tags as $tag)
                                    <span class="badge bg-secondary bg-opacity-25 text-dark rounded-pill">
                                        <i class="bi bi-tag me-1" aria-hidden="true"></i>{{ $tag->name }}
                                    </span>
                                @endforeach
                            </div>
                        @endif

                        {{-- Galeria de Imagens --}}
                        @if($news->relationLoaded('gallery') && $news->gallery->count() > 0)
                                @php
                                    /** Função para detectar se texto é nome de arquivo */
                                    $isFilename = function($text) {
                                        return !empty($text) && (bool) preg_match('/\.(png|jpe?g|gif|svg|webp|bmp|ico|tiff?|pdf)$/i', $text);
                                    };
                                    $galleryItems = $news->gallery->map(function($m) use ($isFilename) {
                                        $alt = $m->alt_text;
                                        if (empty($alt) || $isFilename($alt)) {
                                            $alt = 'Imagem da galeria';
                                        }
                                        $variants = !empty($m->variants) ? json_decode($m->variants, true) : [];
                                        return [
                                            'src' => v2_storage_url($m->file_path),
                                            'path' => $m->file_path,
                                            'variants' => is_array($variants) ? $variants : [],
                                            'alt' => $alt,
                                        ];
                                    })->values()->toArray();
                                @endphp
                                <section aria-label="Galeria de imagens da notícia" class="news-article__gallery mb-4 pt-3">
                                    <h2 class="h5 fw-bold mb-3 d-flex align-items-center gap-2">
                                        <i class="bi bi-images" aria-hidden="true"></i>
                                        Galeria de Imagens
                                    </h2>
                                    <div class="news-gallery__grid row g-2">
                                        @foreach($galleryItems as $index => $item)
                                            <div class="col-6 col-md-4 col-lg-3">
                                                <button type="button"
                                                   class="news-gallery__link"
                                                   data-gallery-index="{{ $index }}"
                                                   aria-label="Ampliar imagem {{ $index + 1 }} de {{ count($galleryItems) }}">
                                                     @include('v2-service-media::components.picture', [
                                                         'originalPath' => $item['path'],
                                                         'variants' => $item['variants'],
                                                         'alt' => $item['alt'],
                                                         'class' => 'img-fluid news-gallery__img',
                                                         'style' => 'width:100%;height:180px;object-fit:cover;',
                                                         'lazy' => true,
                                                     ])
                                                </button>
                                            </div>
                                        @endforeach
                                    </div>
                                </section>
                        @endif
                    </article>

                    {{-- Notícias Relacionadas (grid no final do conteúdo) --}}
                    @if(isset($related) && $related->count() > 0)
                    <section aria-label="Notícias relacionadas" class="mb-5 pt-4 border-top">
                        <h2 class="h4 fw-bold mb-4 d-flex align-items-center gap-2">
                            <i class="bi bi-link-45deg" aria-hidden="true"></i>
                            Notícias Relacionadas
                        </h2>
                        <div class="row g-3">
                            @foreach($related->take(3) as $rel)
                                @php
                                    $relExcerpt = $rel->summary ?: ($rel->subtitle ?: '');
                                @endphp
                                <article class="col-md-4">
                                    <div class="related-card">
                                        @if($rel->cover_image_id && $rel->coverImage)
                                            <a href="{{ $rel->getPublicUrl() }}" class="related-card-img-link">
                                                @include('v2-service-media::components.picture', [
                                                    'originalPath' => $rel->coverImage->file_path,
                                                    'variants'     => $rel->coverImage->variants ?? [],
                                                    'alt'          => $rel->getCoverImageAlt(),
                                                    'class'        => 'related-card-img',
                                                    'lazy'         => true,
                                                ])
                                            </a>
                                        @else
                                            @php $relCoverUrl = $rel->getCoverImageUrl(); @endphp
                                            @if($relCoverUrl)
                                                <a href="{{ $rel->getPublicUrl() }}" class="related-card-img-link">
                                                    <img src="{{ $relCoverUrl }}" alt="{{ $rel->title }}" class="related-card-img" loading="lazy" decoding="async">
                                                </a>
                                            @else
                                                <div class="related-card-img-placeholder">
                                                    <i class="bi bi-newspaper"></i>
                                                </div>
                                            @endif
                                        @endif
                                        <div class="related-card-body">
                                            <h3 class="related-card-title">
                                                <a href="{{ $rel->getPublicUrl() }}">{{ $rel->title }}</a>
                                            </h3>
                                            @if($relExcerpt)
                                                <p class="related-card-excerpt">{{ str_limit($relExcerpt, 100) }}</p>
                                            @endif
                                            @if($rel->published_at)
                                                <time class="related-card-date">{{ $rel->published_at->format('d/m/Y') }}</time>
                                            @endif
                                        </div>
                                    </div>
                                </article>
                            @endforeach
                        </div>
                    </section>
                    @endif

                    {{-- Voltar --}}
                    <div class="mt-4">
                        <a href="{{ route('v2.noticias.portal.index') }}" class="btn btn-outline-primary rounded-pill px-4">
                            <i class="bi bi-arrow-left me-1" aria-hidden="true"></i>
                            Voltar para Notícias
                        </a>
                    </div>

                </div>{{-- /col-lg-8 --}}

                {{-- ============================================================ --}}
                {{-- SIDEBAR — Notícias em Destaque                                --}}
                {{-- ============================================================ --}}
                <aside class="col-lg-4" aria-label="Notícias em destaque">
                    <div class="news-sidebar">
                        @if(isset($related) && $related->count() > 0)
                            <div class="sidebar-widget">
                                <h3 class="sidebar-widget-title">
                                    <i class="bi bi-star-fill me-1" style="color: var(--tenant-primary);" aria-hidden="true"></i> Destaques
                                </h3>
                                <div class="sidebar-news-list">
                                    @foreach($related as $rel)
                                        <article class="sidebar-news-item">
                                            <a href="{{ $rel->getPublicUrl() }}" class="sidebar-news-link">
                                                @if($rel->cover_image_id && $rel->coverImage)
                                                    <div class="sidebar-news-thumb">
                                                        @include('v2-service-media::components.picture', [
                                                            'originalPath' => $rel->coverImage->file_path,
                                                            'variants'     => $rel->coverImage->variants ?? [],
                                                            'alt'          => $rel->getCoverImageAlt(),
                                                            'class'        => 'sidebar-news-img',
                                                            'lazy'         => true,
                                                        ])
                                                    </div>
                                                @else
                                                    <div class="sidebar-news-thumb sidebar-news-thumb--placeholder">
                                                        <i class="bi bi-newspaper"></i>
                                                    </div>
                                                @endif
                                                <div class="sidebar-news-info">
                                                    <h4 class="sidebar-news-title">{{ $rel->title }}</h4>
                                                    @if($rel->published_at)
                                                        <time class="sidebar-news-date">
                                                            {{ $rel->published_at->format('d/m/Y') }}
                                                        </time>
                                                    @endif
                                                </div>
                                            </a>
                                        </article>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        @if($news->category)
                            <div class="sidebar-widget">
                                <h3 class="sidebar-widget-title">
                                    <i class="bi bi-tag me-1" aria-hidden="true"></i> Categoria
                                </h3>
                                <div style="padding:0.75rem 1rem;">
                                    <a href="{{ route('v2.noticias.portal.index', ['categoria' => $news->category->slug]) }}"
                                       class="btn btn-outline-primary btn-sm rounded-pill d-block text-truncate">
                                        <i class="bi bi-tag me-1"></i> {{ $news->category->name }}
                                    </a>
                                </div>
                            </div>
                        @endif

                        <div class="sidebar-widget">
                            <h3 class="sidebar-widget-title">
                                <i class="bi bi-share me-1" aria-hidden="true"></i> Compartilhar
                            </h3>
                            <div class="d-flex gap-2 flex-wrap">
                                <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(request()->url()) }}"
                                   target="_blank" rel="noopener noreferrer"
                                   class="btn btn-outline-primary btn-sm rounded-pill flex-fill"
                                   aria-label="Compartilhar no Facebook">
                                    <i class="bi bi-facebook"></i>
                                </a>
                                <a href="https://twitter.com/intent/tweet?text={{ urlencode($news->title) }}&url={{ urlencode(request()->url()) }}"
                                   target="_blank" rel="noopener noreferrer"
                                   class="btn btn-outline-dark btn-sm rounded-pill flex-fill"
                                   aria-label="Compartilhar no Twitter">
                                    <i class="bi bi-twitter-x"></i>
                                </a>
                                <a href="https://wa.me/?text={{ urlencode($news->title . ' - ' . request()->url()) }}"
                                   target="_blank" rel="noopener noreferrer"
                                   class="btn btn-outline-success btn-sm rounded-pill flex-fill"
                                   aria-label="Compartilhar no WhatsApp">
                                    <i class="bi bi-whatsapp"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </aside>

            </div>{{-- /row --}}
        </div>
    </section>

    {{-- ================================================================ --}}
    {{-- MODAL DA GALERIA DE IMAGENS                                       --}}
    {{-- ================================================================ --}}
    @if($news->relationLoaded('gallery') && $news->gallery->count() > 0)
    <div class="modal fade" id="newsGalleryModal" tabindex="-1"
         aria-labelledby="newsGalleryModalLabel" aria-hidden="true"
         role="dialog" aria-modal="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title visually-hidden" id="newsGalleryModalLabel">Visualizador de imagens da galeria</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar visualizador"></button>
                </div>
                <div class="modal-body d-flex align-items-center justify-content-center position-relative p-0">
                    {{-- Botão anterior --}}
                    <button type="button" class="news-gallery-modal__nav news-gallery-modal__nav--prev"
                            id="galleryModalPrev" aria-label="Imagem anterior">
                        <i class="bi bi-chevron-left" aria-hidden="true"></i>
                    </button>
                    {{-- Imagem --}}
                    <div class="news-gallery-modal__figure d-flex align-items-center justify-content-center w-100">
                        <img id="galleryModalImg" src="" alt=""
                             class="news-gallery-modal__img"
                             loading="eager" decoding="async">
                    </div>
                    {{-- Botão próximo --}}
                    <button type="button" class="news-gallery-modal__nav news-gallery-modal__nav--next"
                            id="galleryModalNext" aria-label="Próxima imagem">
                        <i class="bi bi-chevron-right" aria-hidden="true"></i>
                    </button>
                    {{-- Contador --}}
                    <span id="galleryModalCounter" class="news-gallery-modal__counter"
                          aria-live="polite"></span>
                </div>
            </div>
        </div>
    </div>
    @endif
@endsection

@push('head-styles')
<link rel="stylesheet" href="{{ asset('assets/css/modules/noticias/portal-noticias-show.css') }}">
@endpush

@push('scripts')
@if($news->relationLoaded('gallery') && $news->gallery->count() > 0)
<script>
(function() {
    'use strict';
    var galleryData = {!! json_encode($galleryItems, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!};
    var currentIndex = 0;
    var galleryModal = document.getElementById('newsGalleryModal');
    var modalImg = document.getElementById('galleryModalImg');
    var modalCounter = document.getElementById('galleryModalCounter');
    var prevBtn = document.getElementById('galleryModalPrev');
    var nextBtn = document.getElementById('galleryModalNext');

    if (!galleryModal || !galleryData.length) return;

    function showImage(index) {
        if (index < 0 || index >= galleryData.length) return;
        currentIndex = index;
        var item = galleryData[index];
        modalImg.src = item.src;
        modalImg.alt = item.alt;
        modalCounter.textContent = (index + 1) + ' / ' + galleryData.length;

        prevBtn.style.visibility = (index === 0) ? 'hidden' : 'visible';
        prevBtn.setAttribute('aria-disabled', index === 0 ? 'true' : 'false');
        nextBtn.style.visibility = (index === galleryData.length - 1) ? 'hidden' : 'visible';
        nextBtn.setAttribute('aria-disabled', index === galleryData.length - 1 ? 'true' : 'false');
    }

    function openModal(index) {
        showImage(index);
        var bsModal = new bootstrap.Modal(galleryModal, {
            keyboard: true,
            focus: true
        });
        bsModal.show();
    }

    // Click handlers for gallery thumbnails
    var thumbnails = document.querySelectorAll('.news-gallery__link');
    thumbnails.forEach(function(btn) {
        btn.addEventListener('click', function() {
            var idx = parseInt(this.getAttribute('data-gallery-index'), 10);
            if (!isNaN(idx)) openModal(idx);
        });
    });

    // Modal navigation buttons
    if (prevBtn) {
        prevBtn.addEventListener('click', function() {
            if (currentIndex > 0) showImage(currentIndex - 1);
        });
    }
    if (nextBtn) {
        nextBtn.addEventListener('click', function() {
            if (currentIndex < galleryData.length - 1) showImage(currentIndex + 1);
        });
    }

    // Keyboard navigation
    galleryModal.addEventListener('keydown', function(e) {
        if (e.key === 'ArrowLeft') {
            e.preventDefault();
            if (currentIndex > 0) showImage(currentIndex - 1);
        } else if (e.key === 'ArrowRight') {
            e.preventDefault();
            if (currentIndex < galleryData.length - 1) showImage(currentIndex + 1);
        }
    });

    // Reset on modal close
    galleryModal.addEventListener('hidden.bs.modal', function() {
        currentIndex = 0;
    });
})();
</script>
@endif
<script>
(function() {
    'use strict';
    window.addEventListener('message', function(event) {
        if (event.data && event.data.type === 'contentRichPreviewUpdate') {
            var target = document.querySelector('.preview-target');
            if (target) target.innerHTML = event.data.html;
        }
    });
})();
</script>
@endpush