<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Announcements - Ghana Anaesthesiologists Society</title>
    <link href="<?= $baseUrl ?>/vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
    <link href="<?= $baseUrl ?>/css/sb-admin-2.min.css" rel="stylesheet">
    <link href="<?= $baseUrl ?>/css/glass.css" rel="stylesheet">
    <style>
        body { background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); font-family: 'Nunito', sans-serif; min-height: 100vh; }
        .navbar-glass { background: rgba(33, 65, 122, 0.95) !important; backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.1); }
        .page-header { padding: 120px 0 60px; text-align: center; }
        .page-header h1 { font-size: 2.8rem; font-weight: 900; background: linear-gradient(135deg, #fff 30%, #4e73df 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    </style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark navbar-glass fixed-top">
    <div class="container">
        <a class="navbar-brand font-weight-bold" href="<?= $baseUrl ?>"><i class="fas fa-stethoscope mr-2" style="color: #4e73df;"></i>GAS</a>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto align-items-lg-center">
                <li class="nav-item"><a class="nav-link" href="<?= $baseUrl ?>">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="<?= $baseUrl ?>/events">Events</a></li>
                <li class="nav-item ml-lg-2"><a class="glass-btn px-4 py-2" href="<?= $baseUrl ?>/login"><i class="fas fa-sign-in-alt mr-1"></i>Login</a></li>
            </ul>
        </div>
    </div>
</nav>
<section class="page-header">
    <div class="container">
        <div class="hero-badge" style="display:inline-block;padding:0.5rem 1.5rem;border-radius:50px;background:rgba(78,115,223,0.2);border:1px solid rgba(78,115,223,0.3);color:#4e73df;font-size:0.85rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:1.5rem;">
            <i class="fas fa-bullhorn mr-2"></i>Updates
        </div>
        <h1>Announcements</h1>
    </div>
</section>
<section class="py-4">
    <div class="container">
        <div class="row">
            <?php if (!empty($announcements)): ?>
                <?php foreach ($announcements as $ann): ?>
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="glass-card h-100 d-flex flex-column" style="background:rgba(255,255,255,0.06);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:1.5rem;transition:all 0.4s;">
                        <?php if ($ann->image): ?>
                        <div class="mb-3" style="border-radius:12px;overflow:hidden;max-height:180px;">
                            <img src="<?= $baseUrl ?>/<?= $ann->image ?>" class="w-100" style="object-fit:cover;height:180px;" alt="<?= htmlspecialchars($ann->title) ?>">
                        </div>
                        <?php endif; ?>
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="glass-badge" style="display:inline-block;padding:0.2rem 0.8rem;border-radius:50px;font-size:0.75rem;font-weight:600;background:rgba(78,115,223,0.2);color:#4e73df;">
                                <?= htmlspecialchars($ann->priority) ?>
                            </span>
                            <small style="color: rgba(255,255,255,0.4);"><?= date('M d, Y', strtotime($ann->published_at ?? $ann->created_at)) ?></small>
                        </div>
                        <h5 class="text-white font-weight-bold"><?= htmlspecialchars($ann->title) ?></h5>
                        <p style="color: rgba(255,255,255,0.65); font-size: 0.9rem; flex-grow:1;">
                            <?= htmlspecialchars($ann->excerpt ?: substr(strip_tags($ann->content), 0, 150)) ?>
                        </p>
                        <?php if ($ann->link_url): ?>
                        <a href="<?= htmlspecialchars($ann->link_url) ?>" target="_blank" class="glass-btn btn-sm mt-auto align-self-start" style="display:inline-block;padding:0.5rem 1.2rem;border-radius:50px;border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.08);color:#fff;text-decoration:none;font-weight:600;">
                            Learn More <i class="fas fa-external-link-alt ml-1"></i>
                        </a>
                        <?php endif; ?>
                    </div>
                </div>
                <?php endforeach; ?>
            <?php else: ?>
            <div class="col-12 text-center py-5">
                <i class="fas fa-bullhorn" style="font-size:3rem;color:rgba(255,255,255,0.2);margin-bottom:1rem;"></i>
                <p style="color:rgba(255,255,255,0.5);font-size:1.2rem;">No announcements at this time.</p>
            </div>
            <?php endif; ?>
        </div>
        <div class="text-center mt-4">
            <a href="<?= $baseUrl ?>" class="glass-btn" style="display:inline-block;padding:0.8rem 2rem;border-radius:50px;border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.08);color:#fff;text-decoration:none;"><i class="fas fa-arrow-left mr-2"></i>Back to Home</a>
        </div>
    </div>
</section>
<script src="<?= $baseUrl ?>/vendor/jquery/jquery.min.js"></script>
<script src="<?= $baseUrl ?>/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
