@extends('layouts.website')
@section('titulo', 'Notícias')
@section('conteudo')
    <!-- Breadcrumb -->
    <div class="breadcrumb">
        <a href="{{ route('home') }}">Home</a> > <span>Notícias</span>
    </div>

    <!-- Page Header -->
    <div class="page-header">
        <h1>Notícias da Marimba</h1>
        <p>Mantenha-se informado com as últimas notícias de Angola e do mundo</p>
    </div>

    <!-- News Listing Page -->
    <div class="news-container" id="news-listing">
        <!-- Category Filters -->
        <div class="category-filters">
            <div class="category-filter active" data-category="todos">Todos</div>
            @foreach ($categories as $item)
                <div class="category-filter" data-category="{{ $item['slug'] }}">{{ $item['categoria'] }}</div>
            @endforeach
        </div>

        <!-- News Grid -->
        <!--<div class="news-grid" id="news-grid">-->
        <div class="news-grid">
            @foreach ($news as $item)
                <div class="news-card">
                    <img src="{{ asset('storage/' . $item['imagem_destaque']) }}" alt="{{ $item['imagem_destaque'] }}"
                        class="news-image">
                    <div class="news-content">
                        <span class="news-category">{{ $item['noticia_categoria']['categoria'] }}</span>
                        <h3 class="news-title">{{ $item['titulo'] }}</h3>
                        <p class="news-excerpt">{{ \Illuminate\Support\Str::limit($item['conteudo'], 100) }}</p>
                        <div class="news-meta">
                            <div class="news-date">
                                <i class="far fa-calendar-alt"></i>
                                <span>{{ $item['publicado_em'] }}</span>
                            </div>
                            <div class="news-comments">
                                <i class="far fa-comments"></i>
                                <span>${item.comments} comentários</span>
                            </div>
                        </div>
                        <div class="news-actions">
                            <button class="news-btn read-more-btn" data-id="${item.id}">
                                <i class="fas fa-book-open"></i> Ler Mais
                            </button>
                            <button class="news-btn secondary">
                                <i class="fas fa-share-alt"></i> Partilhar
                            </button>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Pagination -->
        <div class="pagination" id="pagination">
            <!-- Pagination buttons will be loaded here by JavaScript -->
        </div>
    </div>

    <!-- Article Detail Page -->
    <div class="article-detail" id="article-detail">
        <a href="javascript:void(0)" class="back-btn" id="back-button">
            <i class="fas fa-arrow-left"></i> Voltar às Notícias
        </a>

        <div class="article-header">
            <span class="article-category" id="article-category">Política</span>
            <h1 class="article-title" id="article-title">Título da Notícia</h1>
            <div class="article-meta">
                <div class="article-date">
                    <i class="far fa-calendar-alt"></i>
                    <span id="article-date">25 de Setembro, 2025</span>
                </div>
                <div class="article-author">
                    <i class="far fa-user"></i>
                    <span id="article-author">Por: Redacção</span>
                </div>
                <div class="article-comments">
                    <i class="far fa-comments"></i>
                    <span id="article-comments-count">5 comentários</span>
                </div>
            </div>
        </div>

        <img src="" alt="Imagem da notícia" class="article-image" id="article-image">

        <div class="article-content" id="article-content">
            <!-- Article content will be loaded here by JavaScript -->
        </div>

        <!-- Comments Section -->
        <div class="comments-section">
            <h2 class="comments-title">Comentários</h2>

            <!-- Comment Form -->
            <div class="comment-form">
                <h3 class="form-title">Deixe o seu comentário</h3>
                <form id="comment-form">
                    <div class="form-group">
                        <label for="comment-name">Nome</label>
                        <input type="text" id="comment-name" required>
                    </div>
                    <div class="form-group">
                        <label for="comment-email">Email</label>
                        <input type="email" id="comment-email" required>
                    </div>
                    <div class="form-group">
                        <label for="comment-message">Comentário</label>
                        <textarea id="comment-message" required></textarea>
                    </div>
                    <button type="submit" class="submit-btn">Enviar Comentário</button>
                </form>
            </div>

            <!-- Comments List -->
            <div class="comments-list" id="comments-list">
                <!-- Comments will be loaded here by JavaScript -->
            </div>
        </div>
    </div>
@endsection

@push('css')
    <style>
        :root {
            --azul-escuro: #1B1C89;
            --azul-claro: #3A6FF7;
            --azul-fundo: #e6f0ff;
            --roxo: #6426A8;
            --dourado: #F7A21B;
            --texto-roxo: #3F2198;
            --bg: #e6f0ff;
            --card-bg: #ffffff;
            --muted: #5a5a7a;
            --texto-escuro: #1a1a2a;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: var(--azul-fundo);
            color: var(--texto-escuro);
            min-height: 100vh;
            position: relative;
            padding-bottom: 80px;
            line-height: 1.6;
        }

        /* Header */
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 72px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(6px);
            display: flex;
            align-items: center;
            padding: 0 20px;
            z-index: 1000;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .logo .mark {
            width: 48px;
            height: 48px;
            border-radius: 8px;
            background: linear-gradient(135deg, var(--roxo), var(--azul-claro));
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            color: white;
            font-size: 18px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .brand {
            font-weight: 800;
            color: var(--dourado);
            line-height: 1;
            font-size: 18px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }

        .brand small {
            display: block;
            font-weight: 600;
            color: var(--muted);
            font-size: 11px;
        }

        nav {
            margin-left: 24px;
        }

        nav ul {
            display: flex;
            gap: 14px;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        nav a {
            color: var(--muted);
            text-decoration: none;
            padding: 6px 10px;
            border-radius: 6px;
            font-size: 14px;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        nav a.active,
        nav a:hover {
            color: var(--azul-claro);
            background: rgba(58, 111, 247, 0.1);
        }

        .spacer {
            flex: 1;
        }

        .top-actions {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .social {
            display: flex;
            gap: 6px;
        }

        .social a {
            width: 34px;
            height: 34px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(58, 111, 247, 0.1);
            color: var(--azul-claro);
            text-decoration: none;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        .social a:hover {
            background: var(--azul-claro);
            color: white;
            transform: translateY(-2px);
        }

        .search {
            position: relative;
        }

        .search input {
            padding: 8px 12px;
            border-radius: 8px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            background: rgba(255, 255, 255, 0.8);
            color: var(--texto-escuro);
            width: 180px;
            font-size: 13px;
        }

        .search input:focus {
            outline: 2px solid var(--azul-claro);
            border-color: transparent;
        }

        /* Hamburger menu (mobile) */
        .hamburger {
            display: none;
            flex-direction: column;
            justify-content: space-around;
            width: 30px;
            height: 30px;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
            z-index: 1100;
        }

        .hamburger span {
            width: 30px;
            height: 3px;
            background: var(--dourado);
            border-radius: 3px;
            transition: all 0.3s linear;
            position: relative;
            transform-origin: 1px;
        }

        /* Mobile menu */
        .mobile-menu {
            position: fixed;
            top: 0;
            right: -300px;
            width: 300px;
            height: 100vh;
            background: var(--card-bg);
            z-index: 1000;
            padding: 80px 20px 20px;
            transition: right 0.3s ease;
            box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
            overflow-y: auto;
        }

        .mobile-menu.active {
            right: 0;
        }

        .mobile-menu ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .mobile-menu li {
            margin-bottom: 15px;
        }

        .mobile-menu a {
            color: var(--muted);
            text-decoration: none;
            font-size: 18px;
            display: block;
            padding: 5px;
            border-radius: 6px;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        .mobile-menu a.active,
        .mobile-menu a:hover {
            color: var(--azul-claro);
            background: rgba(58, 111, 247, 0.1);
        }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 900;
            display: none;
        }

        main {
            padding-top: 100px;
            padding-bottom: 10px;
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
        }

        /* Breadcrumb */
        .breadcrumb {
            padding: 10px 20px;
            background: var(--card-bg);
            border-radius: 8px;
            margin: 0 20px 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .breadcrumb a {
            color: var(--azul-claro);
            text-decoration: none;
        }

        .breadcrumb a:hover {
            text-decoration: underline;
        }

        /* Page Header */
        .page-header {
            text-align: center;
            margin: 30px 20px;
            padding: 30px;
            background: linear-gradient(135deg, var(--azul-claro), var(--roxo));
            border-radius: 12px;
            color: white;
        }

        .page-header h1 {
            margin: 0;
            font-size: 2.5rem;
            color: white;
        }

        .page-header p {
            margin: 10px 0 0;
            font-size: 1.1rem;
            opacity: 0.9;
        }

        /* News Container */
        .news-container {
            padding: 0 20px;
        }

        /* Category Filters */
        .category-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 20px 0;
            justify-content: center;
        }

        .category-filter {
            padding: 8px 16px;
            background: var(--card-bg);
            border: 2px solid var(--azul-claro);
            border-radius: 30px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            font-size: 14px;
        }

        .category-filter.active,
        .category-filter:hover {
            background: var(--azul-claro);
            color: white;
        }

        /* News Grid */
        .news-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }

        .news-card {
            background: var(--card-bg);
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

        .news-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .news-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .news-content {
            padding: 20px;
        }

        .news-category {
            display: inline-block;
            background: rgba(58, 111, 247, 0.1);
            color: var(--azul-claro);
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .news-title {
            font-size: 1.3rem;
            color: var(--roxo);
            margin-bottom: 10px;
            font-weight: 700;
        }

        .news-excerpt {
            font-size: 0.95rem;
            margin-bottom: 15px;
            color: var(--texto-escuro);
        }

        .news-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
            color: var(--muted);
            margin-bottom: 15px;
        }

        .news-date {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .news-comments {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .news-actions {
            display: flex;
            gap: 10px;
        }

        .news-btn {
            flex: 1;
            padding: 10px;
            background: var(--azul-claro);
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        .news-btn:hover {
            background: var(--azul-escuro);
        }

        /* Pagination */
        .pagination {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin: 40px 0;
        }

        .pagination-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            background: var(--card-bg);
            color: var(--texto-escuro);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid rgba(0, 0, 0, 0.1);
        }

        .pagination-btn.active,
        .pagination-btn:hover {
            background: var(--azul-claro);
            color: white;
            border-color: var(--azul-claro);
        }

        .pagination-btn.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Article Detail Page */
        .article-detail {
            display: none;
            padding: 0 20px;
        }

        .article-header {
            margin-bottom: 30px;
        }

        .article-category {
            display: inline-block;
            background: rgba(58, 111, 247, 0.1);
            color: var(--azul-claro);
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 15px;
        }

        .article-title {
            font-size: 2.2rem;
            color: var(--roxo);
            margin-bottom: 15px;
            line-height: 1.3;
        }

        .article-meta {
            display: flex;
            gap: 15px;
            color: var(--muted);
            font-size: 0.9rem;
            margin-bottom: 20px;
        }

        .article-meta div {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .article-image {
            width: 100%;
            border-radius: 12px;
            margin-bottom: 25px;
            max-height: 450px;
            object-fit: cover;
        }

        .article-content {
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 40px;
        }

        .article-content p {
            margin-bottom: 20px;
        }

        .article-content h2,
        .article-content h3 {
            color: var(--roxo);
            margin: 30px 0 15px;
        }

        .article-content blockquote {
            border-left: 4px solid var(--dourado);
            padding-left: 20px;
            margin: 25px 0;
            font-style: italic;
            color: var(--muted);
        }

        /* Comments Section */
        .comments-section {
            margin-top: 50px;
            padding-top: 30px;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }

        .comments-title {
            font-size: 1.5rem;
            color: var(--roxo);
            margin-bottom: 25px;
        }

        .comment-form {
            background: var(--card-bg);
            padding: 20px;
            border-radius: 12px;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

        .form-title {
            font-size: 1.2rem;
            color: var(--roxo);
            margin-bottom: 15px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: var(--texto-escuro);
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            font-family: inherit;
            font-size: 1rem;
        }

        .form-group textarea {
            min-height: 120px;
            resize: vertical;
        }

        .submit-btn {
            background: var(--azul-claro);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .submit-btn:hover {
            background: var(--azul-escuro);
        }

        .comments-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .comment {
            background: var(--card-bg);
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

        .comment-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .comment-author {
            font-weight: 700;
            color: var(--roxo);
        }

        .comment-date {
            font-size: 0.85rem;
            color: var(--muted);
        }

        .comment-content {
            line-height: 1.6;
        }

        /* Back Button */
        .back-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            background: var(--azul-claro);
            color: white;
            text-decoration: none;
            border-radius: 8px;
            font-weight: 600;
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }

        .back-btn:hover {
            background: var(--azul-escuro);
        }

        /* Floating WhatsApp */
        .whatsapp-float {
            position: fixed;
            right: 20px;
            bottom: 90px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: #25D366;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
            z-index: 100;
            transition: all 0.3s ease;
        }

        .whatsapp-float:hover {
            transform: scale(1.1);
        }

        .whatsapp-float a {
            color: white;
            text-decoration: none;
            font-size: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }

        /* Floating Player */
        .player-float {
            position: fixed;
            left: 20px;
            bottom: 20px;
            background: linear-gradient(90deg, var(--azul-escuro), var(--azul-claro));
            padding: 10px 14px;
            border-radius: 12px;
            display: flex;
            gap: 12px;
            align-items: center;
            z-index: 100;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
            max-width: 2500px;
            width: auto;
            color: white;
        }

        .player-float .radio-img {
            width: 150px;
            height: 50px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .player-float .radio-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .player-float .meta {
            min-width: 140px;
            max-width: 200px;
            flex: 1;
        }

        .player-float .meta strong {
            display: block;
            color: var(--dourado);
            font-size: 13px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 700;
        }

        .player-float .meta span {
            display: block;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.8);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .player-controls {
            display: flex;
            gap: 8px;
        }

        .player-float button {
            border: none;
            background: rgba(255, 255, 255, 0.15);
            color: white;
            font-weight: 800;
            font-size: 14px;
            cursor: pointer;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        .player-float button:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: scale(1.1);
        }

        .player-float button.play-pause {
            background: var(--dourado);
            color: var(--texto-escuro);
        }

        .player-float button.play-pause:hover {
            background: #ffb340;
        }

        footer {
            margin-top: 40px;
            padding: 24px 16px;
            background: var(--azul-escuro);
            text-align: center;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 14px;
            color: white;
            border-radius: 12px 12px 0 0;
        }

        footer div:first-child {
            margin-bottom: 8px;
            font-weight: 600;
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .news-grid {
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            }
        }

        @media (max-width: 768px) {
            nav ul {
                display: none;
            }

            .hamburger {
                display: flex;
            }

            .search input {
                width: 140px;
            }

            .brand {
                font-size: 16px;
            }

            .brand small {
                font-size: 10px;
            }

            .logo .mark {
                width: 42px;
                height: 42px;
                font-size: 16px;
            }

            .page-header h1 {
                font-size: 2rem;
            }

            .news-grid {
                grid-template-columns: 1fr;
            }

            .article-title {
                font-size: 1.8rem;
            }
        }

        @media (max-width: 640px) {
            .search {
                display: none;
            }

            .category-filters {
                justify-content: flex-start;
                overflow-x: auto;
                padding-bottom: 10px;
            }

            .whatsapp-float {
                bottom: 150px;
                right: 20px;
            }

            .article-meta {
                flex-direction: column;
                gap: 8px;
            }
        }

        @media (max-width: 480px) {
            header {
                padding: 0 12px;
            }

            .logo {
                gap: 8px;
            }

            .social a {
                width: 30px;
                height: 30px;
                font-size: 14px;
            }

            .news-actions {
                flex-direction: column;
            }

            .whatsapp-float {
                width: 50px;
                height: 50px;
                bottom: 140px;
                right: 15px;
            }

            .whatsapp-float a {
                font-size: 22px;
            }
        }
    </style>
@endpush

@push('script')
    <script>
        // Sample news data
        const news = [{
                id: 1,
                title: "Presidente anuncia novo plano de desenvolvimento económico",
                excerpt: "O Presidente da República anunciou hoje um ambicioso plano de desenvolvimento económico para os próximos cinco anos, com foco na diversificação da economia.",
                category: "politica",
                image: "{{ asset('website/imgs/slider1.jpg') }}",
                content: `
                    <p>O Presidente da República anunciou hoje um ambicioso plano de desenvolvimento económico para os próximos cinco anos, com foco na diversificação da economia e criação de emprego.</p>
                    <p>Durante o discurso na Assembleia Nacional, o chefe de Estado destacou a importância de investir em sectores não petrolíferos, como a agricultura, turismo e manufactura.</p>
                    <h2>Principais medidas do plano</h2>
                    <p>O plano inclui medidas como:</p>
                    <ul>
                        <li>Incentivos fiscais para pequenas e médias empresas</li>
                        <li>Investimento em infraestruturas críticas</li>
                        <li>Programas de formação profissional para jovens</li>
                        <li>Fomento ao empreendedorismo</li>
                    </ul>
                    <p>O Presidente afirmou que "este plano representa uma viragem estratégica na nossa economia, com vista a criar uma nação mais resiliente e próspera para todos os angolanos".</p>
                    <blockquote>
                        "Estamos comprometidos em construir uma economia diversificada que não dependa exclusivamente do petróleo"
                    </blockquote>
                    <p>Analistas económicos receberam positivamente o anúncio, embora tenham alertado para os desafios de implementação num contexto económico global complexo.</p>
                `,
                date: "25 de Setembro, 2025",
                author: "Por: João Silva",
                comments: 12
            },
            {
                id: 2,
                title: "Seleção nacional vence importante jogo de qualificação",
                excerpt: "A seleção angolana de futebol garantiu uma vitória importante frente ao Gana, mantendo vivas as esperanças de qualificação para o Campeonato do Mundo.",
                category: "desporto",
                image: "{{ asset('website/imgs/slider2.jpg') }}",
                content: `
                    <p>A seleção angolana de futebol garantiu uma vitória importante frente ao Gana, mantendo vivas as esperanças de qualificação para o Campeonato do Mundo.</p>
                    <p>Com um golo de Gelson Dala aos 78 minutos, a equipa das Palancas Negras venceu por 1-0 no Estádio 11 de Novembro, perante um público entusiasta.</p>
                    <h2>Análise do jogo</h2>
                    <p>O seleccionador Pedro Gonçalves optou por uma formação defensiva sólida, que conseguiu neutralizar os ataques da equipa ganense durante a maior parte do jogo.</p>
                    <p>No segundo tempo, com a entrada de Mbala Nzola, a equipa angolana ganhou mais poder ofensivo, o que culminou no golo da vitória.</p>
                    <blockquote>
                        "Esta vitória é para todos os angolanos que nunca deixaram de acreditar na equipa"
                    </blockquote>
                    <p>Com este resultado, Angola soma agora 7 pontos no grupo E, ficando a 3 pontos da liderança, ocupada pela Nigéria.</p>
                    <p>O próximo jogo será contra a Etiópia, no próximo mês, em Adis Abeba.</p>
                `,
                date: "24 de Setembro, 2025",
                author: "Por: Pedro Mendes",
                comments: 8
            },
            {
                id: 3,
                title: "Festival de música tradicional atrai milhares de visitantes",
                excerpt: "A 15ª edição do Festival de Música Tradicional Angolana decorreu este fim-de-semana em Luanda, com participação de grupos de todas as províncias.",
                category: "cultura",
                image: "{{ asset('website/imgs/slider3.jpg') }}",
                content: `
                    <p>A 15ª edição do Festival de Música Tradicional Angolana decorreu este fim-de-semana em Luanda, com participação de grupos de todas as províncias.</p>
                    <p>O evento, que aconteceu no Museu Nacional de Antropologia, contou com a presença de mais de 5.000 visitantes ao longo dos três dias.</p>
                    <h2>Diversidade cultural</h2>
                    <p>O festival apresentou a riqueza e diversidade da música tradicional angolana, desde a semba de Luanda até aos ritmos do sul do país.</p>
                    <p>Grupos como Ngola Ritmos, Kiezos e Jovens do Prenda fizeram actuações memoráveis que foram muito aplaudidas pelo público.</p>
                    <blockquote>
                        "É importante preservarmos as nossas tradições musicais e transmiti-las às novas gerações"
                    </blockquote>
                    <p>Além das actuações, o festival incluiu workshops sobre instrumentos tradicionais e a história da música angolana.</p>
                    <p>O ministro da Cultura encerrou o evento, destacando a importância de initiatives que promovam a cultura nacional.</p>
                `,
                date: "23 de Setembro, 2025",
                author: "Por: Teresa Lopes",
                comments: 5
            },
            {
                id: 4,
                title: "Banco Central prevê crescimento económico de 3,5% para 2026",
                excerpt: "O Banco Nacional de Angola reviu em alta as previsões de crescimento económico para o próximo ano, impulsionado pelo sector não petrolífero.",
                category: "economia",
                image: "{{ asset('website/imgs/slider1.jpg') }}",
                content: `
                    <p>O Banco Nacional de Angola reviu em alta as previsões de crescimento económico para o próximo ano, impulsionado pelo sector não petrolífero.</p>
                    <p>De acordo com o relatório de previsões económicas divulgado hoje, a economia angolana deverá crescer 3,5% em 2026, acima dos 2,8% previstos anteriormente.</p>
                    <h2>Sectores em crescimento</h2>
                    <p>O relatório destaca o bom desempenho de vários sectores:</p>
                    <ul>
                        <li>Agricultura: +4,2%</li>
                        <li>Turismo: +5,7%</li>
                        <li>Manufactura: +3,8%</li>
                        <li>Serviços: +4,1%</li>
                    </ul>
                    <p>O governador do Banco Central, explicou que "a diversificação da economia está a dar resultados tangíveis, com o sector não petrolífero a representar já 65% do PIB".</p>
                    <blockquote>
                        "A inflação continua sob controlo, com uma previsão de 9% para o final do ano"
                    </blockquote>
                    <p>Analistas económicos consideram estas previsões realistas, mas alertam para a necessidade de manter as reformas estruturais e melhorar o ambiente de negócios.</p>
                `,
                date: "22 de Setembro, 2025",
                author: "Por: Sofia Costa",
                comments: 3
            },
            {
                id: 5,
                title: "Novo hospital central inaugurado em Luanda",
                excerpt: "Foi inaugurado hoje o novo Hospital Central de Luanda, uma infraestrutura moderna com capacidade para 500 camas e equipamento de última geração.",
                category: "sociedade",
                image: "{{ asset('website/imgs/slider2.jpg') }}",
                content: `
                    <p>Foi inaugurado hoje o novo Hospital Central de Luanda, uma infraestrutura moderna com capacidade para 500 camas e equipamento de última geração.</p>
                    <p>A unidade hospitalar, construída em três anos, representa um investimento de 250 milhões de dólares e vai servir como hospital de referência para casos complexos.</p>
                    <h2>Instalações e equipamentos</h2>
                    <p>O novo hospital conta com:</p>
                    <ul>
                        <li>12 salas de cirurgia</li>
                        <li>Unidade de cuidados intensivos com 50 camas</li>
                        <li>Serviço de emergência 24 horas</li>
                        <li>Centro de diagnóstico com ressonância magnética e TAC</li>
                        <li>Heliporto para emergências</li>
                    </ul>
                    <p>O ministro da Saúde destacou que "esta infraestrutura representa um salto qualitativo no sistema de saúde angolano e vai melhorar significativamente a resposta aos cidadãos".</p>
                    <blockquote>
                        "Estamos comprometidos em fornecer cuidados de saúde de qualidade a todos os angolanos"
                    </blockquote>
                    <p>O hospital vai empregar mais de 800 profissionais de saúde, incluindo médicos, enfermeiros e técnicos especializados.</p>
                `,
                date: "21 de Setembro, 2025",
                author: "Por: Maria João",
                comments: 15
            },
            {
                id: 6,
                title: "Angola eleita para o Conselho de Segurança da ONU",
                excerpt: "Angola foi eleita hoje como membro não permanente do Conselho de Segurança das Nações Unidas para o biénio 2026-2027.",
                category: "politica",
                image: "{{ asset('website/imgs/slider3.jpg') }}",
                content: `
                    <p>Angola foi eleita hoje como membro não permanente do Conselho de Segurança das Nações Unidas para o biénio 2026-2027.</p>
                    <p>O país recebeu 190 votos a favor na Assembleia Geral da ONU, demonstrando o amplo apoio da comunidade internacional.</p>
                    <h2>Prioridades da candidatura</h2>
                    <p>Durante a campanha, Angola destacou três prioridades principais:</p>
                    <ul>
                        <li>Prevenção e resolução de conflitos em África</li>
                        <li>Promoção do desenvolvimento sustentável</li>
                        <li>Reforço da cooperação entre a ONU e organizações regionais</li>
                    </ul>
                    <p>O Presidente da República afirmou que "esta eleição é um reconhecimento do papel activo de Angola na promoção da paz e segurança internacionais".</p>
                    <blockquote>
                        "Angola vai trabalhar para ser uma voz activa e construtiva no Conselho de Segurança"
                    </blockquote>
                    <p>Esta será a terceira vez que Angola ocupa um lugar no Conselho de Segurança, após os mandatos de 2003-2004 e 2015-2016.</p>
                    <p>Analistas consideram que a experiência anterior do país em processos de paz e reconciliação será valiosa para o trabalho do Conselho.</p>
                `,
                date: "20 de Setembro, 2025",
                author: "Por: Miguel Santos",
                comments: 10
            }
        ];

        // Comments data
        const comments = {
            1: [{
                    id: 1,
                    author: "Carlos Manuel",
                    date: "25 Set, 2025",
                    content: "Finalmente um plano concreto para diversificar a economia. Espero que seja implementado com sucesso!"
                },
                {
                    id: 2,
                    author: "Ana Silva",
                    date: "25 Set, 2025",
                    content: "É importante que estes planos incluam medidas específicas para as pequenas empresas, que são o motor da economia."
                }
            ],
            2: [{
                    id: 1,
                    author: "João Paulo",
                    date: "24 Set, 2025",
                    content: "Que jogo emocionante! As Palancas Negras mostraram muita determinação."
                },
                {
                    id: 2,
                    author: "Rita Sousa",
                    date: "24 Set, 2025",
                    content: "Gelson Dala está em grande forma. Espero que continue assim nos próximos jogos."
                }
            ],
            3: [{
                id: 1,
                author: "Teresa Lopes",
                date: "23 Set, 2025",
                content: "É maravilhoso ver a riqueza da nossa cultura musical sendo celebrada desta forma."
            }],
            4: [{
                id: 1,
                author: "Sofia Costa",
                date: "22 Set, 2025",
                content: "São boas notícias, mas é preciso garantir que este crescimento chega a toda a população."
            }],
            5: [{
                    id: 1,
                    author: "Maria João",
                    date: "21 Set, 2025",
                    content: "Finalmente um hospital moderno em Luanda. Espero que seja bem mantido e que sirva a população como merece."
                },
                {
                    id: 2,
                    author: "Pedro Mendes",
                    date: "21 Set, 2025",
                    content: "Ótima notícia para o sistema de saúde angolano. Agora precisamos de mais investimento na formação de profissionais."
                }
            ],
            6: [{
                id: 1,
                author: "Miguel Santos",
                date: "20 Set, 2025",
                content: "Um momento histórico para a diplomacia angolana. Parabéns a todos os envolvidos."
            }]
        };

        // DOM elements
        const newsListing = document.getElementById('news-listing');
        const articleDetail = document.getElementById('article-detail');
        const newsGrid = document.getElementById('news-grid');
        const pagination = document.getElementById('pagination');
        const categoryFilters = document.querySelectorAll('.category-filter');
        const backButton = document.getElementById('back-button');
        const commentForm = document.getElementById('comment-form');

        // Pagination variables
        let currentPage = 1;
        const newsPerPage = 6;
        let filteredNews = [...news];
        let currentCategory = 'todos';

        // Initialize page
        document.addEventListener('DOMContentLoaded', () => {
            renderNews();
            setupEventListeners();

            // Mobile menu
            const hamburger = document.querySelector('.hamburger');
            const mobileMenu = document.querySelector('.mobile-menu');
            const overlay = document.querySelector('.overlay');

            hamburger.addEventListener('click', () => {
                mobileMenu.classList.toggle('active');
                overlay.style.display = mobileMenu.classList.contains('active') ? 'block' : 'none';
            });

            overlay.addEventListener('click', () => {
                mobileMenu.classList.remove('active');
                overlay.style.display = 'none';
            });
        });

        // Render news based on current page and filters
        function renderNews() {
            // Clear news grid
            newsGrid.innerHTML = '';

            // Calculate pagination
            const startIndex = (currentPage - 1) * newsPerPage;
            const endIndex = startIndex + newsPerPage;
            const paginatedNews = filteredNews.slice(startIndex, endIndex);

            // Render news cards
            paginatedNews.forEach(item => {
                const newsCard = document.createElement('div');
                newsCard.className = 'news-card';
                newsCard.innerHTML = `
                    <img src="${item.image}" alt="${item.title}" class="news-image">
                    <div class="news-content">
                        <span class="news-category">${item.category.charAt(0).toUpperCase() + item.category.slice(1)}</span>
                        <h3 class="news-title">${item.title}</h3>
                        <p class="news-excerpt">${item.excerpt}</p>
                        <div class="news-meta">
                            <div class="news-date">
                                <i class="far fa-calendar-alt"></i>
                                <span>${item.date}</span>
                            </div>
                            <div class="news-comments">
                                <i class="far fa-comments"></i>
                                <span>${item.comments} comentários</span>
                            </div>
                        </div>
                        <div class="news-actions">
                            <button class="news-btn read-more-btn" data-id="${item.id}">
                                <i class="fas fa-book-open"></i> Ler Mais
                            </button>
                            <button class="news-btn secondary">
                                <i class="fas fa-share-alt"></i> Partilhar
                            </button>
                        </div>
                    </div>
                `;
                newsGrid.appendChild(newsCard);
            });

            // Render pagination
            renderPagination();

            // Add event listeners to read more buttons
            document.querySelectorAll('.read-more-btn').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    const newsId = parseInt(e.target.closest('.read-more-btn').dataset.id);
                    showArticle(newsId);
                });
            });
        }

        // Render pagination buttons
        function renderPagination() {
            const totalPages = Math.ceil(filteredNews.length / newsPerPage);

            // Clear pagination
            pagination.innerHTML = '';

            // Previous button
            const prevBtn = document.createElement('div');
            prevBtn.className = `pagination-btn ${currentPage === 1 ? 'disabled' : ''}`;
            prevBtn.innerHTML = '<i class="fas fa-chevron-left"></i>';
            prevBtn.addEventListener('click', () => {
                if (currentPage > 1) {
                    currentPage--;
                    renderNews();
                }
            });
            pagination.appendChild(prevBtn);

            // Page buttons
            for (let i = 1; i <= totalPages; i++) {
                const pageBtn = document.createElement('div');
                pageBtn.className = `pagination-btn ${i === currentPage ? 'active' : ''}`;
                pageBtn.textContent = i;
                pageBtn.addEventListener('click', () => {
                    currentPage = i;
                    renderNews();
                });
                pagination.appendChild(pageBtn);
            }

            // Next button
            const nextBtn = document.createElement('div');
            nextBtn.className = `pagination-btn ${currentPage === totalPages ? 'disabled' : ''}`;
            nextBtn.innerHTML = '<i class="fas fa-chevron-right"></i>';
            nextBtn.addEventListener('click', () => {
                if (currentPage < totalPages) {
                    currentPage++;
                    renderNews();
                }
            });
            pagination.appendChild(nextBtn);
        }

        // Show article detail
        function showArticle(newsId) {
            const article = news.find(item => item.id === newsId);
            if (!article) return;

            // Update article content
            document.getElementById('article-category').textContent = article.category.charAt(0).toUpperCase() + article
                .category.slice(1);
            document.getElementById('article-title').textContent = article.title;
            document.getElementById('article-date').textContent = article.date;
            document.getElementById('article-author').textContent = article.author;
            document.getElementById('article-comments-count').textContent = `${article.comments} comentários`;
            document.getElementById('article-image').src = article.image;
            document.getElementById('article-image').alt = article.title;
            document.getElementById('article-content').innerHTML = article.content;

            // Render comments
            renderComments(newsId);

            // Switch to article view
            newsListing.style.display = 'none';
            articleDetail.style.display = 'block';

            // Scroll to top
            window.scrollTo(0, 0);
        }

        // Render comments for an article
        function renderComments(newsId) {
            const commentsList = document.getElementById('comments-list');
            commentsList.innerHTML = '';

            const articleComments = comments[newsId] || [];

            if (articleComments.length === 0) {
                commentsList.innerHTML = '<p>Seja o primeiro a comentar esta notícia.</p>';
                return;
            }

            articleComments.forEach(comment => {
                const commentElement = document.createElement('div');
                commentElement.className = 'comment';
                commentElement.innerHTML = `
                    <div class="comment-header">
                        <div class="comment-author">${comment.author}</div>
                        <div class="comment-date">${comment.date}</div>
                    </div>
                    <div class="comment-content">${comment.content}</div>
                `;
                commentsList.appendChild(commentElement);
            });
        }

        // Setup event listeners
        function setupEventListeners() {
            // Category filters
            categoryFilters.forEach(filter => {
                filter.addEventListener('click', () => {
                    categoryFilters.forEach(f => f.classList.remove('active'));
                    filter.classList.add('active');

                    currentCategory = filter.dataset.category;
                    currentPage = 1;

                    if (currentCategory === 'todos') {
                        filteredNews = [...news];
                    } else {
                        filteredNews = news.filter(item => item.category === currentCategory);
                    }

                    renderNews();
                });
            });

            // Back button
            backButton.addEventListener('click', () => {
                articleDetail.style.display = 'none';
                newsListing.style.display = 'block';
            });

            // Comment form
            commentForm.addEventListener('submit', (e) => {
                e.preventDefault();

                const name = document.getElementById('comment-name').value;
                const email = document.getElementById('comment-email').value;
                const message = document.getElementById('comment-message').value;

                if (!name || !email || !message) return;

                // In a real application, you would send this data to a server
                // For this example, we'll just show an alert
                alert('Obrigado pelo seu comentário! Será moderado antes de ser publicado.');

                // Reset form
                commentForm.reset();
            });
        }
    </script>
@endpush