<?php
/**
 * Blog — Listagem de Artigos
 * Acesso público (sem login) para SEO
 */
require_once __DIR__ . '/../src/Core/Bootstrap.php';
use App\Services\AuthService;

$auth = new AuthService();
$user = $auth->isLoggedIn() ? $auth->getCurrentUser() : null;
$isAdmin = ($user['role'] ?? '') === 'admin';

// ── Contagem de comentários ──────────────────────────────────────────────────
$commentCounts = [];
try {
    $pdo = \App\Core\Database::getInstance()->getConnection();
    $rows = $pdo->query("SELECT slug, COUNT(*) AS n FROM blog_comments WHERE status='active' GROUP BY slug")->fetchAll(\PDO::FETCH_ASSOC);
    foreach ($rows as $r) $commentCounts[$r['slug']] = (int)$r['n'];
} catch (\Throwable $e) {}

// ── Catálogo de artigos — importado de includes/blog-catalog.php ─────────────
require_once __DIR__ . '/includes/blog-catalog.php';
// Converter o catálogo indexado por slug para array simples (formato da listagem)
$articles = array_values($BLOG_CATALOG);

include_once __DIR__ . '/partials/header.php';
?>
<!DOCTYPE html>
<html lang="pt-PT">
<head>
    <?php headMeta('Blog — Cultura, Mistério & Espiritualidade | Oraculuminus'); ?>
    <meta name="description" content="Artigos de investigação sobre cultura, mistério, espiritualidade e os padrões ocultos que conectam a arte ao cosmos. Leitura livre, sem registo.">
    <link rel="canonical" href="https://oraculuminus.com/blog">
    <script type="application/ld+json"><?= json_encode([
        '@context'        => 'https://schema.org',
        '@type'           => 'Blog',
        'name'            => 'Blog — Oraculuminus',
        'url'             => 'https://oraculuminus.com/blog',
        'description'     => 'Artigos de investigação sobre cultura, mistério e espiritualidade.',
        'publisher'       => ['@type' => 'Organization', 'name' => 'Oraculuminus', 'url' => 'https://oraculuminus.com'],
    ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?></script>
    <style>
        :root {
            --bg: #0a0a0f;
            --card-bg: rgba(255,255,255,0.03);
            --border: rgba(255,255,255,0.07);
            --text: #f1f5f9;
            --muted: #64748b;
            --accent: #d4af37;
            --accent-subtle: rgba(212,175,55,0.1);
            --font-d: 'Cormorant Garamond', Georgia, serif;
            --font-b: 'DM Sans', system-ui, sans-serif;
        }
        *, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
        html { scroll-behavior:smooth }
        body { background:var(--bg); color:var(--text); font-family:var(--font-b); min-height:100dvh; overflow-x:hidden; -webkit-font-smoothing:antialiased }

        /* Atmosphere */
        .atm { position:fixed; inset:0; pointer-events:none; z-index:0 }
        .orb { position:absolute; border-radius:50%; filter:blur(120px) }
        .orb1 { width:60vw; height:60vw; max-width:700px; max-height:700px; background:radial-gradient(circle,rgba(212,175,55,.07),transparent 70%); top:-20%; left:50%; transform:translateX(-50%) }
        .orb2 { width:40vw; height:40vw; max-width:400px; max-height:400px; background:radial-gradient(circle,rgba(0,212,255,.04),transparent 70%); bottom:0; right:0 }

        .wrap { position:relative; z-index:1; max-width:960px; margin:0 auto; padding:0 1.5rem }

        /* Hero */
        .blog-hero { padding:4rem 0 2.5rem; text-align:center }
        .blog-hero-badge { display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .9rem; border-radius:100px; background:var(--accent-subtle); border:1px solid rgba(212,175,55,.2); color:var(--accent); font-size:.72rem; font-weight:600; letter-spacing:.05em; margin-bottom:1.25rem }
        .blog-hero h1 { font-family:var(--font-d); font-size:clamp(2rem,5vw,3.2rem); font-weight:600; color:var(--text); margin-bottom:.75rem; line-height:1.1 }
        .blog-hero h1 span { background:linear-gradient(135deg,var(--accent),#f4e4a6); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
        .blog-hero p { color:var(--muted); font-size:.95rem; max-width:500px; margin:0 auto }

        /* Grid */
        .articles-grid { display:grid; gap:1.5rem; padding:2rem 0 5rem; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)) }

        /* Card */
        .article-card { background:var(--card-bg); border:1px solid var(--border); border-radius:16px; overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:transform .25s, border-color .25s, box-shadow .25s }
        .article-card:hover { transform:translateY(-4px); border-color:rgba(212,175,55,.3); box-shadow:0 16px 48px rgba(0,0,0,.4) }

        .card-accent-line { height:3px }
        .card-body { padding:1.5rem; flex:1; display:flex; flex-direction:column }
        .card-meta { display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap }
        .card-cat { font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.2rem .6rem; border-radius:4px; background:rgba(212,175,55,.08); color:var(--accent); border:1px solid rgba(212,175,55,.15) }
        .card-date { font-size:.72rem; color:var(--muted) }
        .card-reading { font-size:.72rem; color:var(--muted); margin-left:auto }

        .card-title { font-family:var(--font-d); font-size:1.35rem; font-weight:600; line-height:1.25; margin-bottom:.75rem; color:var(--text) }
        .card-excerpt { font-size:.85rem; color:#94a3b8; line-height:1.65; flex:1 }
        .card-cta { display:inline-flex; align-items:center; gap:.4rem; margin-top:1.25rem; font-size:.8rem; font-weight:600; color:var(--accent); }
        .card-cta svg { transition:transform .2s }
        .article-card:hover .card-cta svg { transform:translateX(3px) }

        /* Empty state */
        .empty { text-align:center; padding:5rem 0; color:var(--muted) }

        @media(max-width:600px) {
            .blog-hero { padding:2.5rem 0 1.5rem }
            .articles-grid { grid-template-columns:1fr; padding:1.5rem 0 3rem }
            .card-reading { margin-left:0 }
            .card-body { padding:1.25rem }
        }
    </style>
</head>
<body data-page="blog">
    <div class="atm"><div class="orb orb1"></div><div class="orb orb2"></div></div>

    <?php renderNavbar($user, $isAdmin); ?>

    <main>
        <div class="wrap">
            <div class="blog-hero">
                <div class="blog-hero-badge">
                    <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
                    Investigação &amp; Cultura
                </div>
                <h1>O <span>Oráculo</span> escreve</h1>
                <p>Artigos sobre padrões ocultos, cultura, mistério e espiritualidade — sem filtros e sem registo.</p>
            </div>

            <?php if (empty($articles)): ?>
            <div class="empty"><p>Em breve — o primeiro artigo está a caminho.</p></div>
            <?php else: ?>
            <div class="articles-grid">
                <?php foreach ($articles as $a): ?>
                <a href="/blog/<?= htmlspecialchars($a['slug']) ?>" class="article-card">
                    <div class="card-accent-line" style="background:<?= htmlspecialchars($a['color']) ?>"></div>
                    <div class="card-body">
                        <div class="card-meta">
                            <span class="card-cat"><?= htmlspecialchars($a['category']) ?></span>
                            <span class="card-date"><?= date('d M Y', strtotime($a['date'])) ?></span>
                            <span class="card-reading"><?= htmlspecialchars($a['reading']) ?> leitura</span>
                        </div>
                        <h2 class="card-title"><?= htmlspecialchars($a['title']) ?></h2>
                        <p class="card-excerpt"><?= htmlspecialchars($a['excerpt']) ?></p>
                        <div style="display:flex;align-items:center;justify-content:space-between;margin-top:1.25rem">
                            <span class="card-cta" style="margin-top:0">Ler artigo <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></span>
                            <?php $cn = $commentCounts[$a['slug']] ?? 0; if ($cn > 0): ?>
                            <span style="display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;color:#4b5563">
                                <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
                                <?= $cn ?>
                            </span>
                            <?php endif; ?>
                        </div>
                    </div>
                </a>
                <?php endforeach; ?>
            </div>
            <?php endif; ?>
        </div>
    </main>

    <footer style="border-top:1px solid rgba(255,255,255,.06);padding:2rem 1.5rem;text-align:center">
        <p style="font-size:.75rem;color:var(--muted);margin-bottom:.5rem"><a href="/" style="color:var(--accent);text-decoration:none">← Voltar ao Oraculuminus</a></p>
        <p style="font-size:.68rem;color:rgba(255,255,255,.2)">Oraculuminus &copy; <?= date('Y') ?> — Portal das Estrelas</p>
    </footer>

    <?php include __DIR__ . '/partials/cookie-banner.php'; ?>
    <?php include __DIR__ . '/partials/footer.php'; ?>
</body>
</html>
