
<!-- DEBUG: Database connection established --><!-- DEBUG: Projects fetched: 5 --><!-- DEBUG: Projects data: Array
(
    [0] => Array
        (
            [project_id] => 5
            [user_id] => 166
            [neighbourhood] => East Legon
            [region] => Greater Accra
            [status] => Completed
            [approval_status] => pending
            [number_of_buildings] => 1
            [project_types] => Residential
            [unit_types] => House
            [parking_types] => Open
            [number_of_parking_spaces] => 3
            [amenities] => 2bedroom with 1Boys Quarters, fitted Kitchen, Ample parking space, Electric security fencing, Close to the road, Plant, Polytank
            [video_url] => uploads/videos/video_6a0742752a67c.jpeg
            [created_at] => 2026-05-15 15:57:41
            [updated_at] => 2026-05-15 15:57:41
        )

    [1] => Array
        (
            [project_id] => 4
            [user_id] => 170
            [neighbourhood] => Tse Addo
            [region] => Greater Accra
            [status] => Under Construction
            [approval_status] => pending
            [number_of_buildings] => 1
            [project_types] => Residential
            [unit_types] => Apartment 
            [parking_types] => Open
            [number_of_parking_spaces] => 15
            [amenities] => Pool, Gym, Security 
            [video_url] => 
            [created_at] => 2026-05-15 14:55:41
            [updated_at] => 2026-05-15 14:55:41
        )

    [2] => Array
        (
            [project_id] => 3
            [user_id] => 162
            [neighbourhood] => East Legon
            [region] => Greater Accra
            [status] => Completed
            [approval_status] => pending
            [number_of_buildings] => 2
            [project_types] => Residential
            [unit_types] => Town House
            [parking_types] => Open
            [number_of_parking_spaces] => 3
            [amenities] => 4bedroom all En suite plus 1 boys quarters, fully furnished living room with dinning area, furnished family area upstairs, Fitted kitchen, Water treatment machine, Standby generator, solar CCTV camera, Gated community Electric Security Fencing, 2water storage polytanks, spacious compound
            [video_url] => uploads/videos/video_6a05a250d61ae.jpeg
            [created_at] => 2026-05-14 10:22:08
            [updated_at] => 2026-05-14 10:22:08
        )

    [3] => Array
        (
            [project_id] => 2
            [user_id] => 162
            [neighbourhood] => East legon
            [region] => Greater Accra
            [status] => Completed
            [approval_status] => pending
            [number_of_buildings] => 2
            [project_types] => Residential
            [unit_types] => House
            [parking_types] => Covered
            [number_of_parking_spaces] => 3
            [amenities] => 4bedroom all En suite plus 1 boys quarters, fully furnished living room with dinning area, furnished family area upstairs, Fitted kitchen, Water treatment machine, Standby generator, solar CCTV camera, Gated community Electric Security Fencing, 2water storage polytanks, spacious compound
            [video_url] => uploads/videos/video_6a05a13471189.mp4
            [created_at] => 2026-05-14 10:17:24
            [updated_at] => 2026-05-14 10:26:07
        )

    [4] => Array
        (
            [project_id] => 1
            [user_id] => 126
            [neighbourhood] => Wood Village
            [region] => Greater Accra
            [status] => Completed
            [approval_status] => approved
            [number_of_buildings] => 140
            [project_types] => Residential, Comercial
            [unit_types] => Apartments
            [parking_types] => Open
            [number_of_parking_spaces] => 80
            [amenities] => Swimming Pool, Basket Ball Court, Club House, Golf, 
            [video_url] => 
            [created_at] => 2025-09-15 13:09:43
            [updated_at] => 2026-03-19 12:43:56
        )

)
 --><!-- DEBUG: Total projects: 5 --><!-- DEBUG: Project IDs: 5,4,3,2,1 --><!-- DEBUG: Ratings fetched: 0 --><!-- DEBUG: View counts fetched: {"1":538} -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project Listings - SeventerraGH</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@400;600;800&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <style>
        :root {
            --primary: #B8860B; /* Dim gold from mncai.php */
            --primary-dark: #8B6508; /* Darker dim gold */
            --secondary: #4B5EAA; /* Ash */
            --secondary-dark: #3A4A88; /* Darker ash */
            --accent: #FF6B6B; /* Coral for highlights */
            --text-dark: #2D3748; /* Slate gray for text */
            --text-light: #7A8799; /* Lighter ash-gray for secondary text */
            --bg-light: #EDEFF2; /* Soft ash background */
            --white: #FFFFFF;
            --glass-bg: rgba(255, 255, 255, 0.15); /* Stronger glassmorphism */
            --glass-border: rgba(255, 255, 255, 0.3);
            --glass-shadow: 0 8px 32px rgba(45, 55, 72, 0.1);
            --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
            --shadow-md: 0 12px 24px rgba(0, 0, 0, 0.12);
            --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.15);
            --border-radius: 20px; /* Softer, modern radius */
            --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            --mc-orange: #F97316;
            --mc-dark: #1A1A1A;
            --mc-gray-900: #111827;
            --mc-gray-800: #1F2937;
            --mc-gray-700: #374151;
            --mc-gray-600: #4B5563;
            --mc-gray-100: #F3F4F6;
        }

        body {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            font-family: 'Inter', sans-serif;
            color: var(--mc-gray-900);
        }

        /* Navigation */
        .top-nav {
            background: var(--white);
            backdrop-filter: blur(8px);
            border-bottom: 1px solid var(--glass-border);
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: var(--shadow-sm);
        }

        .nav-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .logo {
            font-family: 'Poppins', sans-serif;
            font-size: 1.75rem;
            font-weight: 800;
            color: var(--primary);
            text-decoration: none;
            letter-spacing: -0.025em;
        }

        .nav-links {
            display: flex;
            gap: 2.5rem;
        }

        .nav-links a {
            text-decoration: none;
            color: var(--text-light);
            font-weight: 500;
            font-size: 0.95rem;
            transition: var(--transition);
        }

        .nav-links a:hover {
            color: var(--primary);
        }

        .nav-links a.sign-in {
            background: var(--primary);
            color: var(--white);
            padding: 0.5rem 1.25rem;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-sm);
        }

        /* Burger Menu */
        .burger-menu {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0.5rem;
            z-index: 101;
        }

        .burger-icon {
            display: block;
            width: 24px;
            height: 3px;
            background: var(--text-dark);
            margin: 5px 0;
            transition: var(--transition);
        }

        .burger-menu.active .burger-icon:nth-child(1) {
            transform: rotate(45deg) translate(5px, 5px);
        }

        .burger-menu.active .burger-icon:nth-child(2) {
            opacity: 0;
        }

        .burger-menu.active .burger-icon:nth-child(3) {
            transform: rotate(-45deg) translate(7px, -7px);
        }

        .no-scroll {
            overflow: hidden;
        }

        .hero-section {
            position: relative;
            height: 400px;
            background-image: url('https://regimanuelgray.com/wp-content/uploads/2024/01/Best-Real-Estate-Developer-in-Ghana-2023-1-1024x576.jpg');
            background-size: cover;
            background-position: center;
        }

        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 5;
        }

        .hero-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: var(white);
            z-index: 10;
            max-width: 800px;
            width: 90%;
        }

        .hero-content h1 {
            color: white;
            font-size: 2.5rem;
            font-weight: 700;
            font-family: 'Playfair Display', serif;
            margin-bottom: 1rem;
        }

        .hero-content p {
            color: white;
            font-size: 1.1rem;
            line-height: 1.6;
            margin-bottom: 1rem;
        }

        .hero-content .stats {
            background: rgba(255, 255, 255, 0.1);
            padding: 0.75rem 1.5rem;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            font-size: 1.5rem;
            font-weight: 600;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
            color: white;
        }

        .project-card {
            background: var(--mc-white);
            border-radius: 20px;
            box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(229, 163, 50, 0.1);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
            position: relative;
        }

        .project-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            border-color: var(--primary);
        }

        .logo-container {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 4px solid var(--mc-white);
            background: var(--mc-white);
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 10;
            overflow: hidden;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
            transition: transform 0.3s ease;
        }

        .project-card:hover .logo-container {
            transform: scale(1.1);
        }

        .logo-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        .card-cover {
            height: 200px;
            position: relative;
            overflow: hidden;
        }

        .card-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }

        .project-card:hover .card-cover img {
            transform: scale(1.1);
        }

        .card-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(184, 134, 11, 0.8) 0%, rgba(249, 115, 22, 0.8) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .project-card:hover .card-overlay {
            opacity: 1;
        }

        .stats-badge {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 0.5rem 1rem;
            border: 1px solid rgba(184, 134, 11, 0.2);
            font-size: 0.875rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .stats-badge i {
            color: var(--primary);
        }

        .rating-stars {
            display: flex;
            gap: 0.25rem;
            color: #FFD700;
        }

        .view-details-btn {
            background: linear-gradient(135deg, var(--primary) 0%, var(--mc-orange) 100%);
            color: white;
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .view-details-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(184, 134, 11, 0.4);
            color: white;
        }

        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 2rem;
            padding: 2rem 0;
        }

        .no-projects {
            text-align: center;
            padding: 4rem 2rem;
            color: var(--mc-gray-600);
        }

        .no-projects i {
            font-size: 4rem;
            color: var(--mc-gray-400);
            margin-bottom: 1rem;
        }

        .search-input {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid var(--mc-gray-300);
            border-radius: 8px;
            font-size: 1rem;
            outline: none;
        }

        .search-input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 5px rgba(184, 134, 11, 0.3);
        }

        @media (max-width: 768px) {
            .burger-menu {
                display: block;
            }

            .nav-links {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100vh;
                background: var(--white);
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 2rem;
                z-index: 100;
                padding: 2rem;
                transform: translateX(-100%);
                transition: transform 0.3s ease-in-out;
            }

            .nav-links.active {
                display: flex;
                transform: translateX(0);
            }

            .nav-links a {
                font-size: 1.25rem;
                color: var(--text-dark);
            }

            .nav-links a.sign-in {
                padding: 0.75rem 1.5rem;
                font-size: 1.25rem;
            }

            .hero-content h1 {
                font-size: 2rem;
            }
            .hero-content p {
                font-size: 1rem;
            }
            .hero-content .stats {
                font-size: 1.25rem;
            }
        }

        @media (max-width: 576px) {
            .hero-content h1 {
                font-size: 1.75rem;
            }
            .hero-content p {
                font-size: 0.9rem;
            }
            .hero-content .stats {
                font-size: 1rem;
            }
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav class="top-nav">
        <div class="nav-container">
            <a href="index.php" class="logo">SeventerraGH</a>
            <button class="burger-menu" aria-label="Toggle navigation">
                <span class="burger-icon"></span>
                <span class="burger-icon"></span>
                <span class="burger-icon"></span>
            </button>
            <div class="nav-links">
                <a href="index.php">Home</a>
                <a href="agentlist.php">Agents</a>
                <a href="mncai.php">AI Search</a>
                <a href="developer.php">Developers</a>
                <a href="project-listing.php">Developments</a>
                <a href="best-deal.php">Best Deal</a>
                <a href="community.php">Community Hub</a>
                <a href="login.php" class="sign-in">Login/Signup</a>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero-section">
        <div class="hero-overlay"></div>
        <div class="hero-content">
            <h1>Developments For Sale In Ghana</h1>
            <p>Ghana keeps on growing in economics and supply of real estate assets. This is making Ghana one of Africa's most interesting markets for investors.</p>
            <p>The following are some of Estate Developers in Ghana and on SeventerraGH, some of whom are the top real estate companies in Ghana.</p>
            <div class="stats">5 Ongoing Projects</div>
        </div>
    </section>

    <!-- Search Bar -->
    <section class="container mx-auto px-6 py-4">
        <input id="projectSearch" type="text" placeholder="Search projects..." class="search-input">
    </section>

    <!-- Projects Grid -->
    <section class="container mx-auto px-6">
                    <div class="projects-grid">
                                    <div class="project-card">
                        <div class="card-cover">
                            <img src="uploads/videos/video_6a0742752a67c.jpeg" alt="East Legon Project" 
                                 onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDQwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojRTVBMzMyO3N0b3Atb3BhY2l0eToxIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I0Y5NzMxNjtzdG9wLW9wYWNpdHk6MSIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNncmFkKSIvPjx0ZXh0IHg9IjIwMCIgeT0iMTEwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSJ3aGl0ZSIgZm9udC1zaXplPSIyNCIgZm9udC1mYW1pbHk9IkFyaWFsIj5Qcm9qZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg=='">
                            <div class="card-overlay">
                                <a href="project-detail.php?project_id=5" class="view-details-btn">
                                    <i class="fas fa-eye"></i>
                                    View Details
                                </a>
                            </div>
                        </div>
                        
                        <div class="logo-container">
                            <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDQwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojRTVBMzMyO3N0b3Atb3BhY2l0eToxIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I0Y5NzMxNjtzdG9wLW9wYWNpdHk6MSIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNncmFkKSIvPjx0ZXh0IHg9IjIwMCIgeT0iMTEwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSJ3aGl0ZSIgZm9udC1zaXplPSIyNCIgZm9udC1mYW1pbHk9IkFyaWFsIj5Qcm9qZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg==" alt="Project Logo" onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDQwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojRTVBMzMyO3N0b3Atb3BhY2l0eToxIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I0Y5NzMxNjtzdG9wLW9wYWNpdHk6MSIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNncmFkKSIvPjx0ZXh0IHg9IjIwMCIgeT0iMTEwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSJ3aGl0ZSIgZm9udC1zaXplPSIyNCIgZm9udC1mYW1pbHk9IkFyaWFsIj5Qcm9qZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg=='">
                        </div>

                        <div class="p-6">
                            <h3 class="text-xl font-bold text-gray-900 mb-2">
                                East Legon                            </h3>
                            <p class="text-sm text-gray-600 mb-2">
                                <i class="fas fa-map-marker-alt mr-1 text-red-400"></i>
                                Greater Accra                            </p>
                            <p class="text-sm text-gray-600 mb-4">Status: Completed</p>
                            
                            <div class="flex flex-wrap gap-2 mb-4">
                                <div class="stats-badge">
                                    <i class="fas fa-building"></i>
                                    <span>1 Buildings</span>
                                </div>
                                                                <div class="stats-badge">
                                    <i class="fas fa-car"></i>
                                    <span>3 Parking</span>
                                </div>
                                                                                                <div class="stats-badge">
                                    <i class="fas fa-heart"></i>
                                    <span>Amenities</span>
                                </div>
                                                                <div class="stats-badge">
                                    <i class="fas fa-eye"></i>
                                    <span>0 Views</span>
                                </div>
                            </div>
                            
                            <div class="mb-2">
                                <span class="text-sm font-semibold text-gray-700">Rating: </span>
                                <span class="text-lg font-bold text-yellow-600">0.0/5</span>
                                <span class="text-sm text-gray-600 ml-1">(0 reviews)</span>
                                <div class="rating-stars">
                                                                            <i class="fas fa-star" style="color: #e2e8f0;"></i>
                                                                            <i class="fas fa-star" style="color: #e2e8f0;"></i>
                                                                            <i class="fas fa-star" style="color: #e2e8f0;"></i>
                                                                            <i class="fas fa-star" style="color: #e2e8f0;"></i>
                                                                            <i class="fas fa-star" style="color: #e2e8f0;"></i>
                                                                    </div>
                            </div>
                            
                            <p class="text-sm text-gray-600 mb-4 line-clamp-3">Residential</p>
                            
                                                        <a href="uploads/videos/video_6a0742752a67c.jpeg" target="_blank" class="view-details-btn w-full justify-center">
                                <i class="fas fa-video"></i>
                                Watch Video
                            </a>
                                                    </div>
                    </div>
                                    <div class="project-card">
                        <div class="card-cover">
                            <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDQwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojRTVBMzMyO3N0b3Atb3BhY2l0eToxIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I0Y5NzMxNjtzdG9wLW9wYWNpdHk6MSIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNncmFkKSIvPjx0ZXh0IHg9IjIwMCIgeT0iMTEwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSJ3aGl0ZSIgZm9udC1zaXplPSIyNCIgZm9udC1mYW1pbHk9IkFyaWFsIj5Qcm9qZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg==" alt="Tse Addo Project" 
                                 onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDQwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojRTVBMzMyO3N0b3Atb3BhY2l0eToxIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I0Y5NzMxNjtzdG9wLW9wYWNpdHk6MSIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNncmFkKSIvPjx0ZXh0IHg9IjIwMCIgeT0iMTEwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSJ3aGl0ZSIgZm9udC1zaXplPSIyNCIgZm9udC1mYW1pbHk9IkFyaWFsIj5Qcm9qZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg=='">
                            <div class="card-overlay">
                                <a href="project-detail.php?project_id=4" class="view-details-btn">
                                    <i class="fas fa-eye"></i>
                                    View Details
                                </a>
                            </div>
                        </div>
                        
                        <div class="logo-container">
                            <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDQwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojRTVBMzMyO3N0b3Atb3BhY2l0eToxIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I0Y5NzMxNjtzdG9wLW9wYWNpdHk6MSIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNncmFkKSIvPjx0ZXh0IHg9IjIwMCIgeT0iMTEwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSJ3aGl0ZSIgZm9udC1zaXplPSIyNCIgZm9udC1mYW1pbHk9IkFyaWFsIj5Qcm9qZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg==" alt="Project Logo" onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDQwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojRTVBMzMyO3N0b3Atb3BhY2l0eToxIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I0Y5NzMxNjtzdG9wLW9wYWNpdHk6MSIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNncmFkKSIvPjx0ZXh0IHg9IjIwMCIgeT0iMTEwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSJ3aGl0ZSIgZm9udC1zaXplPSIyNCIgZm9udC1mYW1pbHk9IkFyaWFsIj5Qcm9qZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg=='">
                        </div>

                        <div class="p-6">
                            <h3 class="text-xl font-bold text-gray-900 mb-2">
                                Tse Addo                            </h3>
                            <p class="text-sm text-gray-600 mb-2">
                                <i class="fas fa-map-marker-alt mr-1 text-red-400"></i>
                                Greater Accra                            </p>
                            <p class="text-sm text-gray-600 mb-4">Status: Under Construction</p>
                            
                            <div class="flex flex-wrap gap-2 mb-4">
                                <div class="stats-badge">
                                    <i class="fas fa-building"></i>
                                    <span>1 Buildings</span>
                                </div>
                                                                <div class="stats-badge">
                                    <i class="fas fa-car"></i>
                                    <span>15 Parking</span>
                                </div>
                                                                                                <div class="stats-badge">
                                    <i class="fas fa-heart"></i>
                                    <span>Amenities</span>
                                </div>
                                                                <div class="stats-badge">
                                    <i class="fas fa-eye"></i>
                                    <span>0 Views</span>
                                </div>
                            </div>
                            
                            <div class="mb-2">
                                <span class="text-sm font-semibold text-gray-700">Rating: </span>
                                <span class="text-lg font-bold text-yellow-600">0.0/5</span>
                                <span class="text-sm text-gray-600 ml-1">(0 reviews)</span>
                                <div class="rating-stars">
                                                                            <i class="fas fa-star" style="color: #e2e8f0;"></i>
                                                                            <i class="fas fa-star" style="color: #e2e8f0;"></i>
                                                                            <i class="fas fa-star" style="color: #e2e8f0;"></i>
                                                                            <i class="fas fa-star" style="color: #e2e8f0;"></i>
                                                                            <i class="fas fa-star" style="color: #e2e8f0;"></i>
                                                                    </div>
                            </div>
                            
                            <p class="text-sm text-gray-600 mb-4 line-clamp-3">Residential</p>
                            
                                                        <a href="project-detail.php?project_id=4" class="view-details-btn w-full justify-center">
                                <i class="fas fa-info-circle"></i>
                                Learn More
                            </a>
                                                    </div>
                    </div>
                                    <div class="project-card">
                        <div class="card-cover">
                            <img src="uploads/videos/video_6a05a250d61ae.jpeg" alt="East Legon Project" 
                                 onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDQwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojRTVBMzMyO3N0b3Atb3BhY2l0eToxIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I0Y5NzMxNjtzdG9wLW9wYWNpdHk6MSIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNncmFkKSIvPjx0ZXh0IHg9IjIwMCIgeT0iMTEwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSJ3aGl0ZSIgZm9udC1zaXplPSIyNCIgZm9udC1mYW1pbHk9IkFyaWFsIj5Qcm9qZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg=='">
                            <div class="card-overlay">
                                <a href="project-detail.php?project_id=3" class="view-details-btn">
                                    <i class="fas fa-eye"></i>
                                    View Details
                                </a>
                            </div>
                        </div>
                        
                        <div class="logo-container">
                            <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDQwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojRTVBMzMyO3N0b3Atb3BhY2l0eToxIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I0Y5NzMxNjtzdG9wLW9wYWNpdHk6MSIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNncmFkKSIvPjx0ZXh0IHg9IjIwMCIgeT0iMTEwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSJ3aGl0ZSIgZm9udC1zaXplPSIyNCIgZm9udC1mYW1pbHk9IkFyaWFsIj5Qcm9qZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg==" alt="Project Logo" onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDQwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojRTVBMzMyO3N0b3Atb3BhY2l0eToxIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I0Y5NzMxNjtzdG9wLW9wYWNpdHk6MSIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNncmFkKSIvPjx0ZXh0IHg9IjIwMCIgeT0iMTEwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSJ3aGl0ZSIgZm9udC1zaXplPSIyNCIgZm9udC1mYW1pbHk9IkFyaWFsIj5Qcm9qZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg=='">
                        </div>

                        <div class="p-6">
                            <h3 class="text-xl font-bold text-gray-900 mb-2">
                                East Legon                            </h3>
                            <p class="text-sm text-gray-600 mb-2">
                                <i class="fas fa-map-marker-alt mr-1 text-red-400"></i>
                                Greater Accra                            </p>
                            <p class="text-sm text-gray-600 mb-4">Status: Completed</p>
                            
                            <div class="flex flex-wrap gap-2 mb-4">
                                <div class="stats-badge">
                                    <i class="fas fa-building"></i>
                                    <span>2 Buildings</span>
                                </div>
                                                                <div class="stats-badge">
                                    <i class="fas fa-car"></i>
                                    <span>3 Parking</span>
                                </div>
                                                                                                <div class="stats-badge">
                                    <i class="fas fa-heart"></i>
                                    <span>Amenities</span>
                                </div>
                                                                <div class="stats-badge">
                                    <i class="fas fa-eye"></i>
                                    <span>0 Views</span>
                                </div>
                            </div>
                            
                            <div class="mb-2">
                                <span class="text-sm font-semibold text-gray-700">Rating: </span>
                                <span class="text-lg font-bold text-yellow-600">0.0/5</span>
                                <span class="text-sm text-gray-600 ml-1">(0 reviews)</span>
                                <div class="rating-stars">
                                                                            <i class="fas fa-star" style="color: #e2e8f0;"></i>
                                                                            <i class="fas fa-star" style="color: #e2e8f0;"></i>
                                                                            <i class="fas fa-star" style="color: #e2e8f0;"></i>
                                                                            <i class="fas fa-star" style="color: #e2e8f0;"></i>
                                                                            <i class="fas fa-star" style="color: #e2e8f0;"></i>
                                                                    </div>
                            </div>
                            
                            <p class="text-sm text-gray-600 mb-4 line-clamp-3">Residential</p>
                            
                                                        <a href="uploads/videos/video_6a05a250d61ae.jpeg" target="_blank" class="view-details-btn w-full justify-center">
                                <i class="fas fa-video"></i>
                                Watch Video
                            </a>
                                                    </div>
                    </div>
                                    <div class="project-card">
                        <div class="card-cover">
                            <img src="uploads/videos/video_6a05a13471189.mp4" alt="East legon Project" 
                                 onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDQwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojRTVBMzMyO3N0b3Atb3BhY2l0eToxIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I0Y5NzMxNjtzdG9wLW9wYWNpdHk6MSIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNncmFkKSIvPjx0ZXh0IHg9IjIwMCIgeT0iMTEwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSJ3aGl0ZSIgZm9udC1zaXplPSIyNCIgZm9udC1mYW1pbHk9IkFyaWFsIj5Qcm9qZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg=='">
                            <div class="card-overlay">
                                <a href="project-detail.php?project_id=2" class="view-details-btn">
                                    <i class="fas fa-eye"></i>
                                    View Details
                                </a>
                            </div>
                        </div>
                        
                        <div class="logo-container">
                            <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDQwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojRTVBMzMyO3N0b3Atb3BhY2l0eToxIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I0Y5NzMxNjtzdG9wLW9wYWNpdHk6MSIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNncmFkKSIvPjx0ZXh0IHg9IjIwMCIgeT0iMTEwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSJ3aGl0ZSIgZm9udC1zaXplPSIyNCIgZm9udC1mYW1pbHk9IkFyaWFsIj5Qcm9qZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg==" alt="Project Logo" onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDQwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojRTVBMzMyO3N0b3Atb3BhY2l0eToxIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I0Y5NzMxNjtzdG9wLW9wYWNpdHk6MSIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNncmFkKSIvPjx0ZXh0IHg9IjIwMCIgeT0iMTEwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSJ3aGl0ZSIgZm9udC1zaXplPSIyNCIgZm9udC1mYW1pbHk9IkFyaWFsIj5Qcm9qZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg=='">
                        </div>

                        <div class="p-6">
                            <h3 class="text-xl font-bold text-gray-900 mb-2">
                                East legon                            </h3>
                            <p class="text-sm text-gray-600 mb-2">
                                <i class="fas fa-map-marker-alt mr-1 text-red-400"></i>
                                Greater Accra                            </p>
                            <p class="text-sm text-gray-600 mb-4">Status: Completed</p>
                            
                            <div class="flex flex-wrap gap-2 mb-4">
                                <div class="stats-badge">
                                    <i class="fas fa-building"></i>
                                    <span>2 Buildings</span>
                                </div>
                                                                <div class="stats-badge">
                                    <i class="fas fa-car"></i>
                                    <span>3 Parking</span>
                                </div>
                                                                                                <div class="stats-badge">
                                    <i class="fas fa-heart"></i>
                                    <span>Amenities</span>
                                </div>
                                                                <div class="stats-badge">
                                    <i class="fas fa-eye"></i>
                                    <span>0 Views</span>
                                </div>
                            </div>
                            
                            <div class="mb-2">
                                <span class="text-sm font-semibold text-gray-700">Rating: </span>
                                <span class="text-lg font-bold text-yellow-600">0.0/5</span>
                                <span class="text-sm text-gray-600 ml-1">(0 reviews)</span>
                                <div class="rating-stars">
                                                                            <i class="fas fa-star" style="color: #e2e8f0;"></i>
                                                                            <i class="fas fa-star" style="color: #e2e8f0;"></i>
                                                                            <i class="fas fa-star" style="color: #e2e8f0;"></i>
                                                                            <i class="fas fa-star" style="color: #e2e8f0;"></i>
                                                                            <i class="fas fa-star" style="color: #e2e8f0;"></i>
                                                                    </div>
                            </div>
                            
                            <p class="text-sm text-gray-600 mb-4 line-clamp-3">Residential</p>
                            
                                                        <a href="uploads/videos/video_6a05a13471189.mp4" target="_blank" class="view-details-btn w-full justify-center">
                                <i class="fas fa-video"></i>
                                Watch Video
                            </a>
                                                    </div>
                    </div>
                                    <div class="project-card">
                        <div class="card-cover">
                            <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDQwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojRTVBMzMyO3N0b3Atb3BhY2l0eToxIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I0Y5NzMxNjtzdG9wLW9wYWNpdHk6MSIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNncmFkKSIvPjx0ZXh0IHg9IjIwMCIgeT0iMTEwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSJ3aGl0ZSIgZm9udC1zaXplPSIyNCIgZm9udC1mYW1pbHk9IkFyaWFsIj5Qcm9qZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg==" alt="Wood Village Project" 
                                 onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDQwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojRTVBMzMyO3N0b3Atb3BhY2l0eToxIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I0Y5NzMxNjtzdG9wLW9wYWNpdHk6MSIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNncmFkKSIvPjx0ZXh0IHg9IjIwMCIgeT0iMTEwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSJ3aGl0ZSIgZm9udC1zaXplPSIyNCIgZm9udC1mYW1pbHk9IkFyaWFsIj5Qcm9qZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg=='">
                            <div class="card-overlay">
                                <a href="project-detail.php?project_id=1" class="view-details-btn">
                                    <i class="fas fa-eye"></i>
                                    View Details
                                </a>
                            </div>
                        </div>
                        
                        <div class="logo-container">
                            <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDQwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojRTVBMzMyO3N0b3Atb3BhY2l0eToxIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I0Y5NzMxNjtzdG9wLW9wYWNpdHk6MSIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNncmFkKSIvPjx0ZXh0IHg9IjIwMCIgeT0iMTEwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSJ3aGl0ZSIgZm9udC1zaXplPSIyNCIgZm9udC1mYW1pbHk9IkFyaWFsIj5Qcm9qZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg==" alt="Project Logo" onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDQwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojRTVBMzMyO3N0b3Atb3BhY2l0eToxIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I0Y5NzMxNjtzdG9wLW9wYWNpdHk6MSIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNncmFkKSIvPjx0ZXh0IHg9IjIwMCIgeT0iMTEwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSJ3aGl0ZSIgZm9udC1zaXplPSIyNCIgZm9udC1mYW1pbHk9IkFyaWFsIj5Qcm9qZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg=='">
                        </div>

                        <div class="p-6">
                            <h3 class="text-xl font-bold text-gray-900 mb-2">
                                Wood Village                            </h3>
                            <p class="text-sm text-gray-600 mb-2">
                                <i class="fas fa-map-marker-alt mr-1 text-red-400"></i>
                                Greater Accra                            </p>
                            <p class="text-sm text-gray-600 mb-4">Status: Completed</p>
                            
                            <div class="flex flex-wrap gap-2 mb-4">
                                <div class="stats-badge">
                                    <i class="fas fa-building"></i>
                                    <span>140 Buildings</span>
                                </div>
                                                                <div class="stats-badge">
                                    <i class="fas fa-car"></i>
                                    <span>80 Parking</span>
                                </div>
                                                                                                <div class="stats-badge">
                                    <i class="fas fa-heart"></i>
                                    <span>Amenities</span>
                                </div>
                                                                <div class="stats-badge">
                                    <i class="fas fa-eye"></i>
                                    <span>538 Views</span>
                                </div>
                            </div>
                            
                            <div class="mb-2">
                                <span class="text-sm font-semibold text-gray-700">Rating: </span>
                                <span class="text-lg font-bold text-yellow-600">0.0/5</span>
                                <span class="text-sm text-gray-600 ml-1">(0 reviews)</span>
                                <div class="rating-stars">
                                                                            <i class="fas fa-star" style="color: #e2e8f0;"></i>
                                                                            <i class="fas fa-star" style="color: #e2e8f0;"></i>
                                                                            <i class="fas fa-star" style="color: #e2e8f0;"></i>
                                                                            <i class="fas fa-star" style="color: #e2e8f0;"></i>
                                                                            <i class="fas fa-star" style="color: #e2e8f0;"></i>
                                                                    </div>
                            </div>
                            
                            <p class="text-sm text-gray-600 mb-4 line-clamp-3">Residential, Comercial</p>
                            
                                                        <a href="project-detail.php?project_id=1" class="view-details-btn w-full justify-center">
                                <i class="fas fa-info-circle"></i>
                                Learn More
                            </a>
                                                    </div>
                    </div>
                            </div>
            </section>

    <!-- Footer -->
    <footer class="glass-card mx-6 mt-8 px-6 py-4 rounded-2xl text-center text-sm text-gray-600">
        &copy; 2026 SeventerraGH by M&C Properties. All rights reserved. Last updated: September 17, 2025 01:14 PM GMT
    </footer>

    <script>
        // Initialize burger menu
        $(document).ready(function() {
            $('.burger-menu').on('click', function() {
                $(this).toggleClass('active');
                $('.nav-links').toggleClass('active');
                $('body').toggleClass('no-scroll');
            });
        });

        // Search functionality
        function searchProjects() {
            const searchTerm = document.getElementById('projectSearch').value.toLowerCase().trim();
            const projectCards = document.querySelectorAll('.project-card');
            
            console.log('DEBUG: Search term:', searchTerm);
            projectCards.forEach(card => {
                const projectName = card.querySelector('h3').textContent.toLowerCase();
                const location = card.querySelector('.fas.fa-map-marker-alt').parentElement.textContent.toLowerCase();
                const status = card.querySelector('p:nth-of-type(2)').textContent.toLowerCase();
                
                if (searchTerm === '' || projectName.includes(searchTerm) || 
                    location.includes(searchTerm) || status.includes(searchTerm)) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        }

        // Search on Enter key and input
        document.addEventListener('DOMContentLoaded', function() {
            const searchInput = document.getElementById('projectSearch');
            if (searchInput) {
                searchInput.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        console.log('DEBUG: Enter key pressed for search');
                        searchProjects();
                    }
                });
                searchInput.addEventListener('input', function() {
                    setTimeout(searchProjects, 300);
                });
            } else {
                console.log('DEBUG: Search input not found');
            }
        });

        AOS.init({
            duration: 800,
            easing: 'ease-in-out',
            once: true
        });

        // Ensure images are loaded
        document.querySelectorAll('img').forEach(img => {
            img.addEventListener('load', () => {
                img.style.opacity = '1';
                console.log('DEBUG: Image loaded:', img.src);
            });
            img.addEventListener('error', () => {
                const defaultImg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDQwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojRTVBMzMyO3N0b3Atb3BhY2l0eToxIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I0Y5NzMxNjtzdG9wLW9wYWNpdHk6MSIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNncmFkKSIvPjx0ZXh0IHg9IjIwMCIgeT0iMTEwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSJ3aGl0ZSIgZm9udC1zaXplPSIyNCIgZm9udC1mYW1pbHk9IkFyaWFsIj5Qcm9qZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg==';
                img.src = defaultImg;
                console.log('DEBUG: Image failed, using default:', defaultImg);
            });
        });

        // Line clamp for descriptions
        function initLineClamp() {
            document.querySelectorAll('.line-clamp-3').forEach(el => {
                el.style.display = '-webkit-box';
                el.style.webkitLineClamp = '3';
                el.style.webkitBoxOrient = 'vertical';
                el.style.overflow = 'hidden';
            });
        }
        initLineClamp();
    </script>
</body>
</html>