<!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>Ghana Anaesthesiologists Society - Official Member Portal</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">
    <?php if (!empty($companyFavicon)): ?>
    <link rel="icon" href="<?= $baseUrl ?><?= $companyFavicon ?>" type="image/x-icon">
    <?php endif; ?>
    <style>
        body, html { background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); font-family: 'Nunito', sans-serif; scroll-behavior: smooth; }
        .navbar-glass { background: rgba(33, 65, 122, 0.95) !important; backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.1); transition: all 0.3s; }
        .navbar-glass.scrolled { background: rgba(15, 12, 41, 0.98) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
        .hero-section { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; padding-top: 76px; }
        .hero-section::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 30% 50%, rgba(78, 115, 223, 0.15) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgba(78, 115, 223, 0.1) 0%, transparent 50%); animation: float 20s ease-in-out infinite; }
        @keyframes float { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(30px, -30px) rotate(1deg); } 66% { transform: translate(-20px, 20px) rotate(-1deg); } }
        .hero-badge { 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; }
        .hero-title { font-size: 3.8rem; font-weight: 900; line-height: 1.1; background: linear-gradient(135deg, #fff 30%, #4e73df 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
        .hero-subtitle { font-size: 1.2rem; color: rgba(255,255,255,0.65); line-height: 1.8; max-width: 600px; }
        .glass-btn { 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; backdrop-filter: blur(8px); transition: all 0.3s; text-decoration: none !important; font-weight: 600; }
        .glass-btn:hover { background: rgba(255,255,255,0.15); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.2); color: #fff; }
        .glass-btn-primary { background: linear-gradient(135deg, #4e73df 0%, #224abe 100%); border-color: transparent; }
        .glass-btn-primary:hover { background: linear-gradient(135deg, #2e59d9 0%, #1a3a8a 100%); }
        .glass-btn-success { background: linear-gradient(135deg, #1cc88a 0%, #13855c 100%); border-color: transparent; }
        .glass-btn-success:hover { background: linear-gradient(135deg, #17a673 0%, #0f6848 100%); }
        .glass-card { background: rgba(255,255,255,0.06); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 2rem; transition: all 0.4s; }
        .glass-card:hover { background: rgba(255,255,255,0.1); transform: translateY(-5px); box-shadow: 0 20px 60px rgba(0,0,0,0.3); border-color: rgba(78,115,223,0.3); }
        .section-tag { display: inline-block; padding: 0.3rem 1rem; border-radius: 50px; background: rgba(78, 115, 223, 0.15); color: #4e73df; font-size: 0.8rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 1rem; }
        .stat-card { text-align: center; padding: 2rem; background: rgba(255,255,255,0.04); border-radius: 16px; border: 1px solid rgba(255,255,255,0.06); }
        .stat-number { font-size: 2.8rem; font-weight: 900; background: linear-gradient(135deg, #4e73df, #1cc88a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
        .stat-label { color: rgba(255,255,255,0.6); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; margin-top: 0.3rem; }
        .benefit-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 16px; font-size: 1.5rem; margin-bottom: 1.2rem; background: rgba(78, 115, 223, 0.15); color: #4e73df; transition: all 0.3s; }
        .glass-card:hover .benefit-icon { background: rgba(78, 115, 223, 0.25); transform: scale(1.1); }
        .step-number { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1.2rem; font-weight: 800; background: linear-gradient(135deg, #4e73df, #224abe); color: #fff; margin-bottom: 1rem; }
        .testimonial-card { background: rgba(255,255,255,0.04); border-radius: 16px; padding: 2rem; border: 1px solid rgba(255,255,255,0.06); }
        .glass-badge { 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; }
        .navbar .nav-link { color: rgba(255,255,255,0.7) !important; font-weight: 600; padding: 0.5rem 1rem !important; transition: color 0.3s; }
        .navbar .nav-link:hover { color: #fff !important; }
        .navbar-nav { text-align: center; }
        .glass-btn { white-space: nowrap; }
        .mb-6 { margin-bottom: 4rem; }
        .py-6 { padding-top: 5rem; padding-bottom: 5rem; }
        .footer-link { color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.3s; }
        .footer-link:hover { color: #4e73df; text-decoration: none; }
        .thumbnail-img { width: 100%; height: 180px; object-fit: cover; border-radius: 12px; }
        .banner-overlay { position: relative; border-radius: 20px; overflow: hidden; }
        .banner-overlay img { width: 100%; max-height: 400px; object-fit: cover; }
        .banner-overlay .overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(15,12,41,0.85) 0%, rgba(48,43,99,0.6) 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; }
    </style>
</head>
<body>

<!-- Navigation -->
<nav class="navbar navbar-expand navbar-dark navbar-glass fixed-top py-2" id="topNav">
    <div class="container d-flex justify-content-between align-items-center">
        <a class="navbar-brand d-flex align-items-center font-weight-bold mb-0" href="<?= $baseUrl ?>">
            <?php if (!empty($companyLogo)): ?>
                <img src="<?= $baseUrl ?><?= $companyLogo ?>" alt="Company Logo" style="height: 40px; width: auto; object-fit: contain; margin-right: 0.75rem;">
            <?php else: ?>
                <i class="fas fa-stethoscope mr-2" style="color: #4e73df;"></i>
            <?php endif; ?>
            <span>Ghana Anaesthesiologists Society</span>
        </a>
        <div class="d-flex align-items-center">
            <a class="glass-btn px-4 py-2 mr-2" href="<?= $baseUrl ?>/login"><i class="fas fa-sign-in-alt mr-1"></i>Login</a>
            <a class="glass-btn glass-btn-primary px-4 py-2" href="<?= $baseUrl ?>/register"><i class="fas fa-user-plus mr-1"></i>Register</a>
        </div>
    </div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark navbar-glass py-2" id="mainNav" style="margin-top: 68px;">
    <div class="container">
        <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
            <ul class="navbar-nav align-items-lg-center">
                <li class="nav-item"><a class="nav-link" href="#announcements">News</a></li>
                <li class="nav-item"><a class="nav-link" href="#events">Events</a></li>
                <li class="nav-item"><a class="nav-link" href="#quicklinks">Links</a></li>
                <li class="nav-item"><a class="nav-link" href="#benefits">Benefits</a></li>
                <li class="nav-item"><a class="nav-link" href="#how-it-works">Join</a></li>
                <li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
                <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

<!-- Hero Section -->
<section class="hero-section text-white">
    <div class="container position-relative">
        <div class="row align-items-center">
            <div class="col-lg-7">
                <div class="hero-badge"><i class="fas fa-shield-alt mr-2"></i>Official Member Portal</div>
                <h1 class="hero-title mb-3"><?= nl2br(htmlspecialchars($heroTitle)) ?></h1>
                <p class="hero-subtitle mb-4"><?= nl2br(htmlspecialchars($heroSubtitle)) ?></p>
                <div class="d-flex flex-wrap gap-3">
                    <a href="<?= $baseUrl ?>/register" class="glass-btn glass-btn-primary btn-lg mr-3 mb-2"><i class="fas fa-user-plus mr-2"></i>Become a Member</a>
                    <a href="#benefits" class="glass-btn btn-lg mb-2"><i class="fas fa-arrow-down mr-2"></i>Explore Benefits</a>
                </div>
            </div>
            <div class="col-lg-5 d-none d-lg-block text-center">
                <div style="width: 350px; height: 350px; border-radius: 50%; background: radial-gradient(circle, rgba(78,115,223,0.2) 0%, transparent 70%); display: flex; align-items: center; justify-content: center; margin: 0 auto;">
                    <i class="fas fa-stethoscope" style="font-size: 8rem; color: rgba(78,115,223,0.4);"></i>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Stats Strip -->
<section class="py-4" style="background: rgba(255,255,255,0.03); border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05);">
    <div class="container">
        <div class="row">
            <div class="col-6 col-md-3 mb-3 mb-md-0">
                <div class="stat-card">
                    <div class="stat-number">500+</div>
                    <div class="stat-label">Members Nationwide</div>
                </div>
            </div>
            <div class="col-6 col-md-3 mb-3 mb-md-0">
                <div class="stat-card">
                    <div class="stat-number">12+</div>
                    <div class="stat-label">Annual Events</div>
                </div>
            </div>
            <div class="col-6 col-md-3 mb-3 mb-md-0">
                <div class="stat-card">
                    <div class="stat-number">30+</div>
                    <div class="stat-label">CME Credits Annually</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="stat-card">
                    <div class="stat-number">98%</div>
                    <div class="stat-label">Member Satisfaction</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Banner Image Section -->
<?php if ($bannerImage): ?>
<section class="py-4">
    <div class="container">
        <div class="banner-overlay">
            <img src="<?= $baseUrl ?>/<?= $bannerImage ?>" alt="Banner">
            <div class="overlay">
                <h2 class="text-white font-weight-bold" style="font-size: 2rem;"><?= nl2br(htmlspecialchars($heroTitle)) ?></h2>
                <p class="text-white-50" style="max-width: 600px;"><?= nl2br(htmlspecialchars($heroSubtitle)) ?></p>
                <a href="<?= $baseUrl ?>/register" class="glass-btn glass-btn-primary btn-lg mt-2"><i class="fas fa-user-plus mr-2"></i>Become a Member</a>
            </div>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- Benefits Section -->
<section id="benefits" class="py-6">
    <div class="container">
        <div class="text-center mb-5">
            <div class="section-tag"><i class="fas fa-gem mr-1"></i>Benefits</div>
            <h2 class="text-white font-weight-bold" style="font-size: 2.5rem;">Why Become a Member?</h2>
            <p style="color: rgba(255,255,255,0.6); max-width: 600px; margin: 1rem auto 0;">Your membership unlocks exclusive resources, professional connections, and career-advancing opportunities.</p>
        </div>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="glass-card h-100">
                    <div class="benefit-icon"><i class="fas fa-graduation-cap"></i></div>
                    <h5 class="text-white font-weight-bold">Continuing Education</h5>
                    <p style="color: rgba(255,255,255,0.65);">Access accredited CME programmes, workshops, and conferences to stay at the forefront of anaesthesiology practice and meet licensure requirements.</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="glass-card h-100">
                    <div class="benefit-icon"><i class="fas fa-handshake"></i></div>
                    <h5 class="text-white font-weight-bold">Professional Network</h5>
                    <p style="color: rgba(255,255,255,0.65);">Connect with colleagues across Ghana and beyond. Share insights, collaborate on research, and build lasting professional relationships.</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="glass-card h-100">
                    <div class="benefit-icon"><i class="fas fa-file-alt"></i></div>
                    <h5 class="text-white font-weight-bold">Resource Library</h5>
                    <p style="color: rgba(255,255,255,0.65);">Exclusive access to clinical guidelines, protocols, best practice documents, and educational materials curated by leading specialists.</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="glass-card h-100">
                    <div class="benefit-icon"><i class="fas fa-bullhorn"></i></div>
                    <h5 class="text-white font-weight-bold">Society Voice & Advocacy</h5>
                    <p style="color: rgba(255,255,255,0.65);">Have your voice heard in national health policy discussions. The society advocates for better working conditions, equipment, and recognition for anaesthesiologists.</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="glass-card h-100">
                    <div class="benefit-icon"><i class="fas fa-calendar-check"></i></div>
                    <h5 class="text-white font-weight-bold">Events & CME Activities</h5>
                    <p style="color: rgba(255,255,255,0.65);">Priority registration and discounted rates for annual congress, regional workshops, and international collaborations with partner societies.</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="glass-card h-100">
                    <div class="benefit-icon"><i class="fas fa-id-card"></i></div>
                    <h5 class="text-white font-weight-bold">Official Membership</h5>
                    <p style="color: rgba(255,255,255,0.65);">Receive a verified membership certificate, official society ID, and listing in the Ghana Anaesthesiologists Society directory.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- How It Works -->
<section id="how-it-works" class="py-6" style="background: rgba(255,255,255,0.02);">
    <div class="container">
        <div class="text-center mb-5">
            <div class="section-tag"><i class="fas fa-route mr-1"></i>Process</div>
            <h2 class="text-white font-weight-bold" style="font-size: 2.5rem;">How to Join</h2>
            <p style="color: rgba(255,255,255,0.6); max-width: 600px; margin: 1rem auto 0;">Getting started takes just a few minutes. Here is how the membership process works.</p>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="row">
                    <div class="col-md-4 mb-4">
                        <div class="glass-card h-100 text-center">
                            <div class="step-number mx-auto">1</div>
                            <h5 class="text-white font-weight-bold">Register Your Account</h5>
                            <p style="color: rgba(255,255,255,0.65);">Fill out the online registration form with your professional details, including your PIN and Medical Council number.</p>
                        </div>
                    </div>
                    <div class="col-md-4 mb-4">
                        <div class="glass-card h-100 text-center">
                            <div class="step-number mx-auto" style="background: linear-gradient(135deg, #1cc88a, #13855c);">2</div>
                            <h5 class="text-white font-weight-bold">Verification & Approval</h5>
                            <p style="color: rgba(255,255,255,0.65);">The society secretariat reviews your credentials. Once verified, your membership is approved and you receive a confirmation email.</p>
                        </div>
                    </div>
                    <div class="col-md-4 mb-4">
                        <div class="glass-card h-100 text-center">
                            <div class="step-number mx-auto" style="background: linear-gradient(135deg, #e74a3b, #be2617);">3</div>
                            <h5 class="text-white font-weight-bold">Complete Your Profile</h5>
                            <p style="color: rgba(255,255,255,0.65);">Log in and complete your member profile — upload your photo, add qualifications, specialisations, and contact information.</p>
                        </div>
                    </div>
                </div>
                <div class="text-center mt-4">
                    <a href="<?= $baseUrl ?>/register" class="glass-btn glass-btn-success btn-lg"><i class="fas fa-user-plus mr-2"></i>Start Registration Now</a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Platform Features -->
<section id="features" class="py-6">
    <div class="container">
        <div class="text-center mb-5">
            <div class="section-tag"><i class="fas fa-laptop mr-1"></i>Platform</div>
            <h2 class="text-white font-weight-bold" style="font-size: 2.5rem;">Member Portal Features</h2>
            <p style="color: rgba(255,255,255,0.6); max-width: 600px; margin: 1rem auto 0;">Everything you need to manage your membership, connect with peers, and stay informed — all in one place.</p>
        </div>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="glass-card h-100 text-center">
                    <div style="font-size: 2.5rem; color: #4e73df; margin-bottom: 1rem;"><i class="fas fa-comments"></i></div>
                    <h5 class="text-white font-weight-bold">Forum Discussions</h5>
                    <p style="color: rgba(255,255,255,0.65);">Engage in specialty-specific discussions, share clinical experiences, and seek advice from fellow anaesthesiologists.</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="glass-card h-100 text-center">
                    <div style="font-size: 2.5rem; color: #1cc88a; margin-bottom: 1rem;"><i class="fas fa-calendar-alt"></i></div>
                    <h5 class="text-white font-weight-bold">Event Management</h5>
                    <p style="color: rgba(255,255,255,0.65);">Browse upcoming events, register for CME activities, track attendance, and receive event reminders.</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="glass-card h-100 text-center">
                    <div style="font-size: 2.5rem; color: #f6c23e; margin-bottom: 1rem;"><i class="fas fa-folder-open"></i></div>
                    <h5 class="text-white font-weight-bold">Document Library</h5>
                    <p style="color: rgba(255,255,255,0.65);">Access guidelines, protocols, research papers, and educational resources organised by category for easy reference.</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="glass-card h-100 text-center">
                    <div style="font-size: 2.5rem; color: #e74a3b; margin-bottom: 1rem;"><i class="fas fa-hand-holding-usd"></i></div>
                    <h5 class="text-white font-weight-bold">Contribution Management</h5>
                    <p style="color: rgba(255,255,255,0.65);">Pay membership dues online, view payment history, and download official receipts for your records.</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="glass-card h-100 text-center">
                    <div style="font-size: 2.5rem; color: #36b9cc; margin-bottom: 1rem;"><i class="fas fa-images"></i></div>
                    <h5 class="text-white font-weight-bold">Photo Gallery</h5>
                    <p style="color: rgba(255,255,255,0.65);">View and share photos from society events, conferences, and gatherings.</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="glass-card h-100 text-center">
                    <div style="font-size: 2.5rem; color: #858796; margin-bottom: 1rem;"><i class="fas fa-envelope"></i></div>
                    <h5 class="text-white font-weight-bold">Messaging System</h5>
                    <p style="color: rgba(255,255,255,0.65);">Send and receive messages with other members. Communicate directly with colleagues across the society.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<?php if ($homePage && $homePage->status === 'published' && $homePage->content): ?>
<section class="py-6" style="background: rgba(255,255,255,0.02);">
    <div class="container">
        <div class="glass-card p-5">
            <?= $homePage->content ?>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- Announcements -->
<section id="announcements" class="py-6" style="background: rgba(255,255,255,0.02);">
    <div class="container">
        <div class="text-center mb-5">
            <div class="section-tag"><i class="fas fa-bullhorn mr-1"></i>Updates</div>
            <h2 class="text-white font-weight-bold" style="font-size: 2.5rem;">Latest News & Announcements</h2>
        </div>
        <?php if ($showAnnouncements && !empty($announcements)): ?>
        <div class="row">
            <?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">
                    <?php if ($ann->image): ?>
                    <div class="mb-3" style="border-radius: 12px; overflow: hidden; max-height: 180px;">
                        <img src="<?= $baseUrl ?>/<?= $ann->image ?>" class="thumbnail-img" alt="<?= htmlspecialchars($ann->title) ?>">
                    </div>
                    <?php endif; ?>
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="glass-badge"><?= 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">Learn More <i class="fas fa-external-link-alt ml-1"></i></a>
                    <?php endif; ?>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <div class="text-center mt-4">
            <a href="<?= $baseUrl ?>/announcements" class="glass-btn"><i class="fas fa-arrow-right mr-2"></i>View All Announcements</a>
        </div>
        <?php else: ?>
        <div class="text-center py-4">
            <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);">No announcements at this time.</p>
        </div>
        <?php endif; ?>
    </div>
</section>

<!-- Upcoming Events -->
<section id="events" class="py-6">
    <div class="container">
        <div class="text-center mb-5">
            <div class="section-tag"><i class="fas fa-calendar mr-1"></i>Events</div>
            <h2 class="text-white font-weight-bold" style="font-size: 2.5rem;">Upcoming Events</h2>
        </div>
        <?php if ($showEvents && !empty($upcomingEvents)): ?>
        <div class="row">
            <?php foreach ($upcomingEvents as $evt): ?>
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="glass-card h-100 d-flex flex-column">
                    <?php if ($evt->cover_image): ?>
                    <div class="mb-3" style="border-radius: 12px; overflow: hidden; max-height: 160px;">
                        <img src="<?= $baseUrl ?>/<?= $evt->cover_image ?>" class="thumbnail-img" style="height: 160px;" alt="<?= htmlspecialchars($evt->title) ?>">
                    </div>
                    <?php endif; ?>
                    <div class="d-flex align-items-center mb-3">
                        <div class="text-center mr-3 px-3 py-2 rounded" style="background: rgba(78,115,223,0.2); min-width: 60px;">
                            <div class="font-weight-bold" style="font-size: 1.6rem; color: #4e73df;"><?= date('d', strtotime($evt->start_datetime)) ?></div>
                            <small style="color: rgba(255,255,255,0.6); text-transform: uppercase;"><?= date('M', strtotime($evt->start_datetime)) ?></small>
                        </div>
                        <div>
                            <h6 class="text-white mb-1 font-weight-bold"><?= htmlspecialchars($evt->title) ?></h6>
                            <small style="color: rgba(255,255,255,0.5);"><i class="fas fa-map-marker-alt mr-1"></i><?= htmlspecialchars($evt->venue ?: 'Online') ?></small>
                        </div>
                    </div>
                    <p style="color: rgba(255,255,255,0.6); font-size: 0.9rem; flex-grow: 1;"><?= substr(strip_tags($evt->description ?? ''), 0, 150) ?>...</p>
                    <a href="<?= $baseUrl ?>/events/<?= $evt->id ?>" class="glass-btn btn-sm mt-auto align-self-start">View Details <i class="fas fa-arrow-right ml-1"></i></a>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <div class="text-center mt-4">
            <a href="<?= $baseUrl ?>/events" class="glass-btn"><i class="fas fa-arrow-right mr-2"></i>View All Events</a>
        </div>
        <?php else: ?>
        <div class="text-center py-4">
            <i class="fas fa-calendar-alt" style="font-size: 3rem; color: rgba(255,255,255,0.2); margin-bottom: 1rem;"></i>
            <p style="color: rgba(255,255,255,0.5);">No upcoming events at this time.</p>
        </div>
        <?php endif; ?>
    </div>
</section>

<!-- Quick Links -->
<?php if (!empty($quickLinks)): ?>
<section id="quicklinks" class="py-6" style="background: rgba(255,255,255,0.02);">
    <div class="container">
        <div class="text-center mb-5">
            <div class="section-tag"><i class="fas fa-link mr-1"></i>Resources</div>
            <h2 class="text-white font-weight-bold" style="font-size: 2.5rem;">Quick Links</h2>
        </div>
        <div class="row">
            <?php foreach ($quickLinks as $link): ?>
            <div class="col-lg-3 col-md-4 col-6 mb-4">
                <a href="<?= htmlspecialchars($link->url) ?>" target="<?= $link->target ?>" class="glass-card d-flex flex-column align-items-center text-center h-100" style="text-decoration: none; padding: 1.5rem;">
                    <div style="width: 56px; height: 56px; background: rgba(78,115,223,0.2); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 0.8rem;">
                        <i class="<?= htmlspecialchars($link->icon) ?>" style="font-size: 1.4rem; color: #4e73df;"></i>
                    </div>
                    <h6 class="text-white font-weight-bold mb-1" style="font-size: 0.9rem;"><?= htmlspecialchars($link->title) ?></h6>
                    <?php if ($link->description): ?>
                    <small style="color: rgba(255,255,255,0.5);"><?= htmlspecialchars($link->description) ?></small>
                    <?php endif; ?>
                </a>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- Testimonial -->
<section class="py-6" style="background: rgba(255,255,255,0.02);">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center">
                <div class="testimonial-card">
                    <i class="fas fa-quote-left mb-3" style="font-size: 2rem; color: rgba(78,115,223,0.3);"></i>
                    <p style="color: rgba(255,255,255,0.8); font-size: 1.15rem; font-style: italic; line-height: 1.8;">"Membership in the Ghana Anaesthesiologists Society has been invaluable to my career. The CME programmes, networking opportunities, and access to shared resources have helped me provide better care for my patients."</p>
                    <div class="mt-4">
                        <div style="width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #4e73df, #224abe); display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem;">
                            <i class="fas fa-user-md text-white"></i>
                        </div>
                        <strong class="text-white">Dr. Kwame Asare</strong>
                        <p style="color: rgba(255,255,255,0.5); font-size: 0.85rem;">Consultant Anaesthesiologist, Korle Bu Teaching Hospital</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="py-6">
    <div class="container">
        <div class="glass-card text-center p-5" style="background: linear-gradient(135deg, rgba(78,115,223,0.15), rgba(28,200,138,0.1));">
            <h2 class="text-white font-weight-bold mb-3" style="font-size: 2.2rem;">Ready to Join the Society?</h2>
            <p style="color: rgba(255,255,255,0.7); max-width: 600px; margin: 0 auto 2rem;">Take the next step in your professional journey. Register today and become part of Ghana's leading anaesthesiology community.</p>
            <div class="d-flex justify-content-center flex-wrap">
                <a href="<?= $baseUrl ?>/register" class="glass-btn glass-btn-primary btn-lg mr-3 mb-2"><i class="fas fa-user-plus mr-2"></i>Register Now</a>
                <a href="<?= $baseUrl ?>/login" class="glass-btn btn-lg mb-2"><i class="fas fa-sign-in-alt mr-2"></i>Member Login</a>
            </div>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section id="contact" class="py-6" style="background: rgba(255,255,255,0.02);">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 mb-4 mb-lg-0">
                <div class="section-tag"><i class="fas fa-phone mr-1"></i>Contact</div>
                <h2 class="text-white font-weight-bold mb-3" style="font-size: 2rem;">Get In Touch</h2>
                <p style="color: rgba(255,255,255,0.6); margin-bottom: 2rem;">Have questions about membership? Reach out to the society secretariat and we will be happy to help.</p>
                <div class="d-flex align-items-center mb-3">
                    <div style="width: 44px; height: 44px; border-radius: 12px; background: rgba(78,115,223,0.15); display: flex; align-items: center; justify-content: center; margin-right: 1rem;">
                        <i class="fas fa-envelope" style="color: #4e73df;"></i>
                    </div>
                    <div>
                        <small style="color: rgba(255,255,255,0.4);">Email</small>
                        <div class="text-white">info@ghanaanaesthesia.com</div>
                    </div>
                </div>
                <div class="d-flex align-items-center mb-3">
                    <div style="width: 44px; height: 44px; border-radius: 12px; background: rgba(28,200,138,0.15); display: flex; align-items: center; justify-content: center; margin-right: 1rem;">
                        <i class="fas fa-phone" style="color: #1cc88a;"></i>
                    </div>
                    <div>
                        <small style="color: rgba(255,255,255,0.4);">Phone</small>
                        <div class="text-white">+233 (0) 000 000 000</div>
                    </div>
                </div>
                <div class="d-flex align-items-center">
                    <div style="width: 44px; height: 44px; border-radius: 12px; background: rgba(246,194,62,0.15); display: flex; align-items: center; justify-content: center; margin-right: 1rem;">
                        <i class="fas fa-map-marker-alt" style="color: #f6c23e;"></i>
                    </div>
                    <div>
                        <small style="color: rgba(255,255,255,0.4);">Location</small>
                        <div class="text-white">Accra, Ghana</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="glass-card">
                    <h5 class="text-white font-weight-bold mb-3">Send Us a Message</h5>
                    <form>
                        <div class="form-group">
                            <input type="text" class="form-control glass-input" placeholder="Your Name" style="background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #fff; border-radius: 12px; padding: 0.8rem 1rem;">
                        </div>
                        <div class="form-group">
                            <input type="email" class="form-control glass-input" placeholder="Your Email" style="background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #fff; border-radius: 12px; padding: 0.8rem 1rem;">
                        </div>
                        <div class="form-group">
                            <textarea class="form-control glass-input" rows="4" placeholder="Your Message" style="background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #fff; border-radius: 12px; padding: 0.8rem 1rem;"></textarea>
                        </div>
                        <button type="submit" class="glass-btn glass-btn-primary btn-block"><i class="fas fa-paper-plane mr-2"></i>Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Footer -->
<footer class="py-5" style="background: rgba(0,0,0,0.4); border-top: 1px solid rgba(255,255,255,0.05);">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 mb-4 mb-lg-0">
                <h5 class="text-white font-weight-bold mb-3"><i class="fas fa-stethoscope mr-2" style="color: #4e73df;"></i>GAS</h5>
                <p style="color: rgba(255,255,255,0.5); font-size: 0.9rem;">The Ghana Anaesthesiologists Society — uniting anaesthesiologists across Ghana to advance patient safety, education, and professional excellence.</p>
            </div>
            <div class="col-lg-2 col-md-4 mb-4 mb-md-0">
                <h6 class="text-white font-weight-bold mb-3">Quick Links</h6>
                <ul class="list-unstyled">
                    <li class="mb-2"><a href="#benefits" class="footer-link">Benefits</a></li>
                    <li class="mb-2"><a href="#how-it-works" class="footer-link">How It Works</a></li>
                    <li class="mb-2"><a href="#features" class="footer-link">Features</a></li>
                    <li class="mb-2"><a href="<?= $baseUrl ?>/login" class="footer-link">Login</a></li>
                </ul>
            </div>
            <div class="col-lg-3 col-md-4 mb-4 mb-md-0">
                <h6 class="text-white font-weight-bold mb-3">For Members</h6>
                <ul class="list-unstyled">
                    <li class="mb-2"><a href="<?= $baseUrl ?>/register" class="footer-link">Register</a></li>
                    <li class="mb-2"><a href="<?= $baseUrl ?>/login" class="footer-link">Member Dashboard</a></li>
                    <li class="mb-2"><a href="#contact" class="footer-link">Support</a></li>
                </ul>
            </div>
            <div class="col-lg-3 col-md-4">
                <h6 class="text-white font-weight-bold mb-3">Follow Us</h6>
                <div class="d-flex gap-2">
                    <a href="#" class="glass-btn" style="width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px;"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="glass-btn" style="width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px;"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="glass-btn" style="width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px;"><i class="fab fa-linkedin-in"></i></a>
                    <a href="#" class="glass-btn" style="width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px;"><i class="fab fa-instagram"></i></a>
                </div>
            </div>
        </div>
        <hr style="border-color: rgba(255,255,255,0.05); margin: 2rem 0;">
        <div class="text-center">
            <p class="mb-0" style="color: rgba(255,255,255,0.4); font-size: 0.85rem;">&copy; <?= date('Y') ?> Ghana Anaesthesiologists Society. All rights reserved.</p>
        </div>
    </div>
</footer>

<script src="<?= $baseUrl ?>/vendor/jquery/jquery.min.js"></script>
<script src="<?= $baseUrl ?>/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
    $(window).scroll(function() {
        if ($(this).scrollTop() > 50) {
            $('.navbar-glass').addClass('scrolled');
        } else {
            $('.navbar-glass').removeClass('scrolled');
        }
    });
    $('a[href*="#"]').on('click', function(e) {
        if (this.hash !== '') {
            e.preventDefault();
            var hash = this.hash;
            $('html, body').animate({ scrollTop: $(hash).offset().top - 76 }, 600);
        }
    });
</script>
</body>
</html>
