<?php
/**
 * Homepage – Emehama Village Community
 * Dynamically displays member statistics from the database.
 */

require_once __DIR__ . '/./includes/config.php';
require_once __DIR__ . '/./includes/db.php';

// Fetch statistics
$totalMembers   = $pdo->query("SELECT COUNT(*) FROM members")->fetchColumn();
$maleMembers    = $pdo->query("SELECT COUNT(*) FROM members WHERE gender = 'Male'")->fetchColumn();
$femaleMembers  = $pdo->query("SELECT COUNT(*) FROM members WHERE gender = 'Female'")->fetchColumn();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Emehama Village </title>

    <!-- Google Font: Inter -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap" rel="stylesheet" />

    <!-- Font Awesome 6 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />

    <!-- Shortcut icon -->
    <link rel="shortcut icon" type="image/x-icon" href="./images/ChatGPT%20Image%20Jul%2013,%202026,%2007_24_33%20PM.png" />

    <!-- External CSS -->
    <link rel="stylesheet" href="./assets/css/index.css" />
</head>
<body>

    <!-- ============================================================
    PRELOADER
    ============================================================ -->
    <div id="preloader" aria-hidden="true">
        <div class="preloader-content">
            <div class="preloader-ring"></div>
            <div class="preloader-logo">
                <img src="./images/ChatGPT%20Image%20Jul%2013,%202026,%2007_24_33%20PM.png" alt="Emehama Village Community" />
            </div>
        </div>
    </div>

    <!-- ============================================================
    NAVIGATION (NEW MOBILE MENU)
    ============================================================ -->
    <header class="site-header" id="siteHeader">
        <div class="container nav-container">
            <!-- Logo + Name -->
            <a href="#" class="nav-brand">
                <img src="./images/ChatGPT%20Image%20Jul%2013,%202026,%2007_24_33%20PM.png" alt="Emehama Village Community Logo">
                <span class="brand-name">Emehama <span class="brand-highlight">Village</span></span>
            </a>

            <!-- Desktop Navigation -->
            <nav class="nav-links" id="navLinks">
                <a href="#hero" class="nav-link active">Home</a>
                <a href="#about" class="nav-link">About</a>
                <a href="#executives" class="nav-link">Executives</a>
                <a href="#location" class="nav-link">Location</a>
                <a href="#contact" class="nav-link">Contact</a>
                <a href="./admin/login.php" class="nav-link nav-login">
                    <i class="fas fa-lock"></i> Admin
                </a>
            </nav>

            <!-- Hamburger (new) -->
            <button class="hamburger" id="hamburger" aria-label="Toggle navigation" aria-expanded="false">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </button>
        </div>
    </header>

    <!-- Mobile Menu Overlay -->
    <div class="menu-overlay" id="menuOverlay"></div>

    <!-- Mobile Menu Panel (off-canvas) -->
    <div class="mobile-menu" id="mobileMenu" role="navigation" aria-label="Mobile navigation">
        <div class="mobile-menu-inner">
            <div class="mobile-menu-header">
                <span class="mobile-menu-brand">Emehama Village</span>
                <button class="mobile-menu-close" id="mobileMenuClose" aria-label="Close menu">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <ul class="mobile-nav-links">
                <li><a href="#hero" class="nav-link active">Home</a></li>
                <li><a href="#about" class="nav-link">About</a></li>
                <li><a href="#executives" class="nav-link">Executives</a></li>
                <li><a href="#location" class="nav-link">Location</a></li>
                <li><a href="#contact" class="nav-link">Contact</a></li>
                <li><a href="./admin/login.php" class="nav-link mobile-login">
                    <i class="fas fa-lock"></i> Admin
                </a></li>
            </ul>
        </div>
    </div>

    <!-- ============================================================
    HERO SECTION (unchanged)
    ============================================================ -->
    <section class="hero" id="hero">
        <div class="container hero-container">
            <div class="hero-content">
                <div class="hero-badge">
                    <span class="badge-dot"></span>
                    Welcome Home
                </div>
                <h1 class="hero-title">
                    Emehama <br />
                    <span class="hero-title-accent">Village</span>
                </h1>
                <p class="hero-text">
                    A thriving community built on unity, culture, and progress.
                    We are dedicated to preserving our heritage while embracing the future.
                </p>
            </div>
            <div class="hero-visual">
                <div class="hero-grid">
                    <div class="grid-item"></div>
                    <div class="grid-item"></div>
                    <div class="grid-item"></div>
                    <div class="grid-item"></div>
                    <div class="grid-item"></div>
                    <div class="grid-item"></div>
                </div>
                <div class="hero-stats">
                    <div class="stat">
                        <span class="stat-number"><?php echo number_format($totalMembers); ?>+</span>
                        <span class="stat-label">Members</span>
                    </div>
                    <div class="stat">
                        <span class="stat-number">47</span>
                        <span class="stat-label">Events</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="hero-accent-line"></div>
    </section>

    <!-- ============================================================
    ABOUT SECTION (unchanged)
    ============================================================ -->
    <section class="about" id="about">
        <div class="container about-container">
            <div class="about-header">
                <span class="section-tag">About Us</span>
                <h2 class="section-title">Preserving Our <span class="title-accent">Legacy</span></h2>
            </div>
            <div class="about-grid">
                <div class="about-text">
                    <p class="about-lead">
                        Emehama Village  is more than a place — it's a movement.
                        We bring together ambitious individuals who believe in
                        collaboration over competition.
                    </p>
                    <p>
                        Founded in 2020, our village has grown organically
                        through word-of-mouth and a shared commitment to
                        excellence. We curate events, facilitate mentorship,
                        and provide resources that help our members thrive.
                    </p>
                    <div class="about-values">
                        <div class="value-item">
                            <span class="value-icon"><i class="fas fa-eye"></i></span>
                            <div>
                                <h4>Vision</h4>
                                <p>To become the most trusted professional network for purpose-driven leaders.</p>
                            </div>
                        </div>
                        <div class="value-item">
                            <span class="value-icon"><i class="fas fa-flag"></i></span>
                            <div>
                                <h4>Mission</h4>
                                <p>Empower members with connections, knowledge, and opportunities to make a lasting impact.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="about-visual">
                    <div class="about-card">
                        <div class="about-card-icon"><i class="fas fa-users"></i></div>
                        <h3>Active Members</h3>
                        <p class="about-card-number"><?php echo number_format($totalMembers); ?>+</p>
                        <span class="about-card-label">and growing</span>
                    </div>
                    <div class="about-card">
                        <div class="about-card-icon"><i class="fas fa-calendar-check"></i></div>
                        <h3>Annual Events</h3>
                        <p class="about-card-number">24+</p>
                        <span class="about-card-label">exclusive gatherings</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ============================================================
    EXECUTIVES SECTION (unchanged)
    ============================================================ -->
    <section class="executives" id="executives">
        <div class="container">
            <div class="executives-header">
                <span class="section-tag">Leadership</span>
                <h2 class="section-title">Meet Our <span class="title-accent">Executives</span></h2>
            </div>

            <div class="carousel-wrapper" id="carouselWrapper">
                <div class="carousel-track" id="carouselTrack">
                    <!-- Cards injected by JS -->
                </div>
                <div class="carousel-fade carousel-fade-left"></div>
                <div class="carousel-fade carousel-fade-right"></div>
            </div>
        </div>
    </section>

    <!-- ============================================================
    LOCATION SECTION (unchanged)
    ============================================================ -->
    <section class="location" id="location">
        <div class="container location-container">
            <div class="location-header">
                <span class="section-tag">Location</span>
                <h2 class="section-title">Find <span class="title-accent">Us</span></h2>
            </div>
            <div class="location-grid">
                <div class="location-map">
                    <div class="map-wrapper">
                        <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024.2219901290355!2d-74.00369368400567!3d40.71312937933038!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a316bb7bf8d%3A0xb4d5ee0c8c7b8d0f!2sNew%20York%2C%20NY!5e0!3m2!1sen!2sus!4v1644262070674!5m2!1sen!2sus"
                        style="border:0;"
                        allowfullscreen=""
                        loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade"
                        title="Emehama Village Community Location"
                    ></iframe>
                </div>
            </div>
            <div class="location-address">
                <div class="address-card">
                    <div class="address-icon"><i class="fas fa-location-dot"></i></div>
                    <div class="address-content">
                        <h4>Emehama Village </h4>
                        <p>123 Leadership Avenue, Suite 400</p>
                        <p>New York, NY 10001</p>
                        <a href="#" class="address-link">
                            Get Directions <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ============================================================
    CONTACT SECTION (unchanged)
    ============================================================ -->
    <section class="contact" id="contact">
        <div class="container contact-container">
            <div class="contact-header">
                <span class="section-tag">Contact</span>
                <h2 class="section-title">Get in <span class="title-accent">Touch</span></h2>
            </div>
            <div class="contact-grid">
                <div class="contact-item">
                    <div class="contact-icon"><i class="fas fa-phone"></i></div>
                    <div>
                        <h4>Phone</h4>
                        <a href="tel:+15551234567">+1 (555) 123-4567</a>
                    </div>
                </div>
                <div class="contact-item">
                    <div class="contact-icon"><i class="fas fa-envelope"></i></div>
                    <div>
                        <h4>Email</h4>
                        <a href="mailto:hello@emehamavillage.org">hello@emehamavillage.org</a>
                    </div>
                </div>
                <div class="contact-item">
                    <div class="contact-icon"><i class="fas fa-location-dot"></i></div>
                    <div>
                        <h4>Address</h4>
                        <p>123 Leadership Ave, Suite 400, NY 10001</p>
                    </div>
                </div>
                <div class="contact-item contact-social">
                    <div class="contact-icon"><i class="fas fa-share-nodes"></i></div>
                    <div>
                        <h4>Join the Whatsapp Group</h4>
                        <div class="social-icons">
                            <a href="#" aria-label="WhatsApp"><i class="fab fa-whatsapp"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ============================================================
    FOOTER (unchanged – only WhatsApp)
    ============================================================ -->
    <footer class="site-footer">
        <div class="container footer-container">
            <div class="footer-top">
                <div class="footer-brand">
                    <a href="#" class="nav-brand footer-brand-link">
                        <img src="./images/ChatGPT%20Image%20Jul%2013,%202026,%2007_24_33%20PM.png" alt="Emehama Village Community Logo">
                        <span class="brand-name">Emehama <span class="brand-highlight"></span>Village</span>
                    </a>
                    <p class="footer-description">
                        A premium network for purpose-driven leaders.
                    </p>
                </div>
                <div class="footer-links">
                    <h4>Quick Links</h4>
                    <ul>
                        <li><a href="#hero">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#executives">Executives</a></li>
                        <li><a href="#location">Location</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-social">
                    <h4>Connect</h4>
                    <div class="footer-social-icons">
                        <a href="#" aria-label="WhatsApp"><i class="fab fa-whatsapp"></i></a>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2026 Emehama Village . All rights reserved.</p>
                <p class="footer-legal">
                    <a href="/html/privacy-policy.html">Privacy</a> &middot; <a href="#">Terms</a>
                </p>
            </div>
        </div>
    </footer>

    <!-- External JavaScript -->
    <script src="./asset/js/index.js"></script>
</body>
</html>