<!DOCTYPE html>
<html lang="pt">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notícias | IG Radio</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800;900&display=swap" rel="stylesheet">
</head>

<body>
    <nav class="top-nav">
        <a href="/" class="top-nav-logo">
            <img src="/static/images/logo.png" alt="IG Radio" style="height: 50px;">
        </a>
        <ul class="top-nav-links">
            <li><a href="/" class="nav-link">Início</a></li>
            <li><a href="/blog" class="nav-link active">Notícias</a></li>
        </ul>
        <button class="mobile-menu-btn">☰</button>
    </nav>

    <!-- ── Mobile Overlay ───────────────────────────────── -->
    <div class="mobile-overlay" id="mobileOverlay">
        <a href="/" class="nav-link" onclick="toggleMobileMenu()">Início</a>
        <a href="/blog" class="nav-link active" onclick="toggleMobileMenu()">Notícias</a>
    </div>

    <div class="container" style="padding: 60px 20px;">
        <header style="margin-bottom: 80px; text-align: center;">
            <h1 style="font-size: 4rem; font-weight: 900; color: #fff; margin-bottom: 20px; background: linear-gradient(90deg, #fff, var(--primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Últimas Notícias</h1>
            <p style="color: var(--text-muted); font-size: 1.2rem; max-width: 600px; margin: 0 auto;">Fica por dentro de tudo o que acontece na IG Radio e no mundo da música.</p>
        </header>

        <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 30px;">
            {% for post in posts %}
            <a href="/blog/{{ post.id }}" class="card"
                style="padding: 0; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column;">
                <img src="{{ url_for('static', filename='images/' + post.banner_filename) if post.banner_filename else 'https://via.placeholder.com/600x400' }}"
                    style="width: 100%; height: 200px; object-fit: cover;" alt="{{ post.title }}">
                <div style="padding: 25px; flex: 1; display: flex; flex-direction: column;">
                    <span
                        style="font-size: 0.75rem; color: var(--primary); font-weight: 800; text-transform: uppercase; margin-bottom: 10px;">
                        {{ post.published_at.strftime('%d %b, %Y') }}
                    </span>
                    <h2 style="font-size: 1.4rem; font-weight: 800; margin-bottom: 15px; line-height: 1.2;">{{
                        post.title }}</h2>
                    <p style="color: var(--text-muted); font-size: 0.95rem; margin-bottom: 20px; flex: 1;">{{
                        post.description[:160] }}...</p>
                    <span class="btn secondary small" style="align-self: flex-start;">Ler mais</span>
                </div>
            </a>
            {% else %}
            <div style="grid-column: 1/-1; text-align: center; padding: 100px 0;">
                <p style="color: var(--text-muted); font-size: 1.2rem;">Ainda não publicámos notícias. Volta em breve!
                </p>
            </div>
            {% endfor %}
        </div>
    </div>

    <footer>
        <div class="container footer-content">
            <div>
                <span class="footer-logo">IG RADIO</span>
                <p style="color: rgba(255,255,255,0.4); font-size: 0.9rem;">A tua rádio digital de confiança.</p>
            </div>
            <div class="footer-links">
                <h4>Navegação</h4>
                <ul>
                    <li><a href="/">Início</a></li>
                    <li><a href="/blog">Notícias</a></li>
                </ul>
            </div>
            <div class="footer-links">
                <h4>Legal</h4>
                <ul>
                    <li><a href="/privacy">Privacidade</a></li>
                    <li><a href="/terms">Termos de Uso</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            &copy; 2026 IG Radio. Desenvolvido para amantes de música.
        </div>
    </footer>
    <script src="/static/js/script.js"></script>
</body>

</html>