<!-- <?php
// Database configuration
$host = 'localhost';
$dbname = 'peshawar_real_estate';
$user = 'root';
$pass = '';

try {
    $pdo = new PDO("mysql:host=$host;charset=utf8mb4", $user, $pass);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
    // Create database
    $pdo->exec("CREATE DATABASE IF NOT EXISTS $dbname");
    $pdo->exec("USE $dbname");
    
    // Create tables
    $pdo->exec("CREATE TABLE IF NOT EXISTS market_summary (
        id INT PRIMARY KEY AUTO_INCREMENT,
        residential_index INT,
        commercial_index INT,
        rental_yield DECIMAL(3,1),
        sentiment VARCHAR(20),
        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
    )");
    
    $pdo->exec("CREATE TABLE IF NOT EXISTS stocks (
        id INT PRIMARY KEY AUTO_INCREMENT,
        symbol VARCHAR(20),
        price DECIMAL(10,2),
        change_percent DECIMAL(5,2),
        trend VARCHAR(10)
    )");
    
    $pdo->exec("CREATE TABLE IF NOT EXISTS sectors (
        id INT PRIMARY KEY AUTO_INCREMENT,
        name VARCHAR(100),
        price_per_kanal VARCHAR(50),
        growth_percent INT,
        demand_percent INT
    )");
    
    $pdo->exec("CREATE TABLE IF NOT EXISTS historical_trends (
        id INT PRIMARY KEY AUTO_INCREMENT,
        year INT,
        residential_index INT,
        commercial_index INT,
        plot_price_lakh INT
    )");
    
    $pdo->exec("CREATE TABLE IF NOT EXISTS inquiries (
        id INT PRIMARY KEY AUTO_INCREMENT,
        name VARCHAR(100),
        email VARCHAR(100),
        phone VARCHAR(20),
        message TEXT,
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    )");
    
    // Insert sample data if empty
    $check = $pdo->query("SELECT COUNT(*) FROM market_summary")->fetchColumn();
    if($check == 0) {
        $pdo->exec("INSERT INTO market_summary (residential_index, commercial_index, rental_yield, sentiment) VALUES 
            (141, 128, 5.4, 'Bullish'),
            (142, 129, 5.5, 'Very Bullish'),
            (140, 127, 5.3, 'Stable')");
    }
    
    $checkStock = $pdo->query("SELECT COUNT(*) FROM stocks")->fetchColumn();
    if($checkStock == 0) {
        $pdo->exec("INSERT INTO stocks (symbol, price, change_percent, trend) VALUES 
            ('KSE-100', 82450, 2.4, 'up'),
            ('PSO', 389.75, 3.1, 'up'),
            ('UBL', 281.20, -0.2, 'down'),
            ('FFC', 189.30, 0.9, 'up'),
            ('ENGRO', 341.75, 1.5, 'up')");
    }
    
    $checkSector = $pdo->query("SELECT COUNT(*) FROM sectors")->fetchColumn();
    if($checkSector == 0) {
        $pdo->exec("INSERT INTO sectors (name, price_per_kanal, growth_percent, demand_percent) VALUES 
            ('DHA Peshawar', '4.2 Cr', 14, 38),
            ('Hayatabad', '2.8 Cr', 10, 27),
            ('Regi Model Town', '1.9 Cr', 7, 20),
            ('University Road', 'High yield', 8, 15)");
    }
    
    $checkHist = $pdo->query("SELECT COUNT(*) FROM historical_trends")->fetchColumn();
    if($checkHist == 0) {
        $pdo->exec("INSERT INTO historical_trends (year, residential_index, commercial_index, plot_price_lakh) VALUES 
            (2022, 108, 102, 22),
            (2023, 115, 108, 26),
            (2024, 122, 114, 31),
            (2025, 128, 119, 37),
            (2026, 141, 128, 45)");
    }
    
} catch(PDOException $e) {
    die("Database Error: " . $e->getMessage());
}

// ============ API ROUTES ============
if(isset($_GET['api'])) {
    header('Content-Type: application/json');
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: GET, POST');
    header('Access-Control-Allow-Headers: Content-Type');
    
    $api = $_GET['api'];
    
    switch($api) {
        case 'market-summary':
            $stmt = $pdo->query("SELECT residential_index, commercial_index, rental_yield, sentiment, updated_at FROM market_summary ORDER BY id DESC LIMIT 1");
            $data = $stmt->fetch(PDO::FETCH_ASSOC);
            echo json_encode(['success' => true, 'data' => $data, 'timestamp' => date('Y-m-d H:i:s')]);
            break;
            
        case 'stocks':
            $stmt = $pdo->query("SELECT symbol, price, change_percent, trend FROM stocks");
            $data = $stmt->fetchAll(PDO::FETCH_ASSOC);
            echo json_encode(['success' => true, 'data' => $data, 'count' => count($data)]);
            break;
            
        case 'sectors':
            $stmt = $pdo->query("SELECT name, price_per_kanal, growth_percent, demand_percent FROM sectors ORDER BY growth_percent DESC");
            $data = $stmt->fetchAll(PDO::FETCH_ASSOC);
            echo json_encode(['success' => true, 'data' => $data]);
            break;
            
        case 'historical':
            $stmt = $pdo->query("SELECT year, residential_index, commercial_index, plot_price_lakh FROM historical_trends ORDER BY year");
            $data = $stmt->fetchAll(PDO::FETCH_ASSOC);
            echo json_encode(['success' => true, 'data' => $data]);
            break;
            
        default:
            echo json_encode(['success' => false, 'error' => 'Invalid API endpoint. Available: market-summary, stocks, sectors, historical']);
    }
    exit;
}

// ============ POST REQUEST FOR INQUIRY ============
if($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_SERVER['HTTP_X_REQUESTED_WITH'])) {
    header('Content-Type: application/json');
    $input = json_decode(file_get_contents('php://input'), true);
    
    if($input && isset($input['name']) && isset($input['email'])) {
        $stmt = $pdo->prepare("INSERT INTO inquiries (name, email, phone, message) VALUES (?, ?, ?, ?)");
        $stmt->execute([$input['name'], $input['email'], $input['phone'] ?? '', $input['message'] ?? '']);
        echo json_encode(['success' => true, 'message' => 'Inquiry saved successfully', 'id' => $pdo->lastInsertId()]);
    } else {
        echo json_encode(['success' => false, 'error' => 'Name and email are required']);
    }
    exit;
}

// Get initial data for display
$marketStmt = $pdo->query("SELECT residential_index, commercial_index, rental_yield, sentiment FROM market_summary ORDER BY id DESC LIMIT 1");
$initialMarket = $marketStmt->fetch(PDO::FETCH_ASSOC);

$stockStmt = $pdo->query("SELECT symbol, price, change_percent, trend FROM stocks");
$initialStocks = $stockStmt->fetchAll(PDO::FETCH_ASSOC);

$sectorStmt = $pdo->query("SELECT name, price_per_kanal, growth_percent FROM sectors ORDER BY growth_percent DESC");
$initialSectors = $sectorStmt->fetchAll(PDO::FETCH_ASSOC);

$histStmt = $pdo->query("SELECT year, residential_index, commercial_index, plot_price_lakh FROM historical_trends ORDER BY year");
$initialHistorical = $histStmt->fetchAll(PDO::FETCH_ASSOC);
?> -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=yes">
    <title>Peshawar Real Estate | SyedShayan.com</title>

    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap"
        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>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: #F0F4F8;
            color: #1A2A3A;
            line-height: 1.45;
            overflow-x: hidden;
        }

        .main-header {
            background: linear-gradient(135deg, #1A3A5F 0%, #2A4A6F 100%);
            color: white;
            padding: 16px 5%;
            border-bottom: 3px solid #D4AF37;
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .kpi-card {
            background: white;
            border-radius: 20px;
            padding: 20px;
            border-left: 5px solid #D4AF37;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
            transition: all 0.3s;
            cursor: pointer;
        }

        .kpi-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

        .kpi-value {
            font-size: 2.2rem;
            font-weight: 800;
            color: #1A3A5F;
            transition: color 0.3s, transform 0.3s;
            display: inline-block;
        }

        .value-changing {
            color: #D4AF37 !important;
            transform: scale(1.05);
        }

        .card {
            background: white;
            border-radius: 24px;
            padding: 22px;
            margin-bottom: 24px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
            border: 1px solid #e2e8f0;
            transition: all 0.3s;
        }

        .card:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

        .card h3 {
            font-size: 1.25rem;
            margin-bottom: 16px;
            border-left: 5px solid #D4AF37;
            padding-left: 14px;
            color: #1A3A5F;
        }

        .price-row {
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid #eef2f6;
            transition: all 0.2s;
        }

        .price-row:hover {
            background: #f8fafc;
            padding-left: 8px;
        }

        .trend-up {
            background: #E8F5E9;
            color: #2E7D32;
            padding: 3px 12px;
            border-radius: 30px;
            font-size: 0.7rem;
            font-weight: 700;
            display: inline-block;
        }

        .trend-down {
            background: #FFEBEE;
            color: #C62828;
            padding: 3px 12px;
            border-radius: 30px;
            font-size: 0.7rem;
            font-weight: 700;
            display: inline-block;
        }

        .api-endpoint {
            background: #1e2a3a;
            color: #D4AF37;
            padding: 14px;
            border-radius: 14px;
            font-family: monospace;
            font-size: 0.75rem;
            margin: 12px 0;
            overflow-x: auto;
            transition: all 0.3s;
        }

        .api-endpoint:hover {
            transform: translateX(5px);
        }

        .refresh-btn {
            background: #D4AF37;
            border: none;
            padding: 8px 20px;
            border-radius: 40px;
            cursor: pointer;
            font-weight: bold;
            color: #1A3A5F;
            transition: all 0.3s;
        }

        .refresh-btn:hover {
            background: #B8860B;
            color: white;
            transform: scale(1.05);
        }

        .status-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
            padding: 8px 18px;
            border-radius: 40px;
            font-size: 0.8rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        }

        .status-indicator:hover {
            background: rgba(255, 255, 255, 0.15);
            transform: translateY(-2px);
        }

        .blinking-dot {
            width: 10px;
            height: 10px;
            background-color: #2ecc71;
            border-radius: 50%;
            animation: blink 1.2s infinite;
        }

        @keyframes blink {

            0%,
            100% {
                opacity: 1;
                transform: scale(1);
            }

            50% {
                opacity: 0.3;
                transform: scale(0.8);
            }
        }

        .page-content {
            display: none;
            animation: fadeIn 0.4s ease;
        }

        .page-content.active-page {
            display: block;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(15px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .nav-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 30px;
            background: white;
            padding: 8px 16px;
            border-radius: 60px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }

        .tab-btn {
            background: transparent;
            border: none;
            padding: 10px 22px;
            border-radius: 40px;
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            color: #1A3A5F;
            transition: all 0.3s;
        }

        .tab-btn i {
            margin-right: 8px;
        }

        .tab-btn.active {
            background: #D4AF37;
            color: #1A3A5F;
            transform: scale(1.02);
        }

        .tab-btn:hover:not(.active) {
            background: #eef2f7;
            transform: translateY(-2px);
        }

        .sector-list {
            list-style: none;
        }

        .sector-list li {
            display: flex;
            justify-content: space-between;
            padding: 14px 0;
            border-bottom: 1px solid #eef2f6;
            flex-wrap: wrap;
            transition: all 0.2s;
        }

        .sector-list li:hover {
            background: #f8fafc;
            padding-left: 8px;
        }

        .stat-box {
            background: #f8fafe;
            padding: 15px;
            border-radius: 18px;
            text-align: center;
            border-left: 4px solid #D4AF37;
            transition: all 0.3s;
        }

        .stat-box:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        }

        .chart-wrapper {
            max-width: 100%;
            margin: 15px 0;
        }

        canvas {
            max-height: 250px;
            width: 100% !important;
        }

        @media (max-width: 768px) {
            .two-columns {
                grid-template-columns: 1fr !important;
            }

            .kpi-value {
                font-size: 1.6rem;
            }

            .tab-btn {
                padding: 6px 14px;
                font-size: 0.7rem;
            }

            .card {
                padding: 16px;
            }
        }

        @media (max-width: 550px) {
            .kpi-grid {
                gap: 12px;
            }

            .kpi-card {
                padding: 14px;
            }

            .kpi-value {
                font-size: 1.4rem;
            }

            .live-status-bar {
                justify-content: center;
            }
        }

        .dashboard-wrapper {
            max-width: 1400px;
            margin: 30px auto;
            padding: 0 5%;
        }

        .two-columns {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 24px;
            margin-bottom: 24px;
        }

        .kpi-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .live-status-bar {
            background: #1A3A5F;
            border-radius: 24px;
            padding: 16px 24px;
            margin-bottom: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
            color: white;
            border-left: 5px solid #D4AF37;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            transition: all 0.4s ease;
        }

        @media (max-width: 768px) {
            .live-status-bar {
                background-image: linear-gradient(rgba(10, 13, 51, .6), rgba(0, 0, 0, 0.55)), url('../Images/images.png');
                background-color: transparent;
            }
        }

        #typewriter::after {
            content: '|';
            animation: blinkCursor 0.7s infinite;
            color: #D7A93A;
            margin-left: 2px;
        }

        @keyframes blinkCursor {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }
        }

        #peshawarMap {
            height: 380px;
            width: 100%;
            border-radius: 18px;
            border: 2px solid #D4AF37;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background: white;
            border-radius: 24px;
            padding: 30px;
            max-width: 500px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: #1A3A5F;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 10px;
            font-family: inherit;
        }

        .submit-btn {
            background: #1A3A5F;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 40px;
            cursor: pointer;
            width: 100%;
            font-weight: bold;
        }

        .submit-btn:hover {
            background: #2A4A6F;
        }

        .close-modal {
            float: right;
            font-size: 28px;
            cursor: pointer;
            color: #999;
        }

        .close-modal:hover {
            color: #333;
        }

        /* Chart loading skeleton */
        .chart-skeleton {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
            border-radius: 12px;
            height: 250px;
            width: 100%;
        }

        @keyframes shimmer {
            0% {
                background-position: 200% 0;
            }

            100% {
                background-position: -200% 0;
            }
        }
        
        csss 

/* Feature Grid - 4 columns layout */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .feature-grid {
        gap: 1.5rem;
    }
}

/* Social Media Icons - Golden Color */
.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.social-icons a i {
    color: #a8967c !important;
    font-size: 18px;
    transition: all 0.3s ease;
}

.social-icons a:hover i {
    color: #B29974 !important;
    transform: translateY(-2px);
}

/* Hover effect with glow */
.social-icons a:hover {
    filter: drop-shadow(0 2px 4px rgba(168, 150, 124, 0.3));
}

/* Membership button gradient */
.btn-membership {
    background: linear-gradient(90deg, rgba(221, 192, 150, 1) 0%, rgba(245, 220, 179, 1) 100%);
    border-color: #B29974;
    box-shadow: 0 4px 6px -3px rgba(0,0,0,0.35);
}

/* Diamond shape */
.diamond {
    background-color: #a8967c;
}

/* Custom line gradient */
.custom-line {
    background: linear-gradient(90deg, transparent, #a8967c, #a8967c, transparent);
}

/* Footer links hover */
.footerLinks a {
    transition: color 0.2s ease;
}

/* Rotate utility */
.rotate-45 {
    transform: rotate(45deg);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .feature-grid {
        gap: 1rem;
    }
}

@media (max-width: 550px) {
    .feature-grid {
        gap: 0.75rem;
    }
}
        
    </style>
</head>

<body>

    <header style="z-index: 9999;" class="bg-[#e5e7f4] only-header-mobile-h text-white px-1 py-2 sm:py-0 bg-no-repeat bg-center bg-cover transition-all duration-500 bg-[url('Images/header-bg-17.jpeg')] sm:bg-[url('Images/header-bg-20.jpeg')] min-h-[90px] sm:min-h-[100px] sticky top-0 z-50">

    <div class="container mx-auto px-2">
        <div class="flex items-center justify-between h-16">
            <div class="flex items-center space-x-3">
                <a href="/" class="flex items-center mt-3 no-underline">
                    <img src="Images/blue-logo.jpg" alt="SyedShayan.com – Real Estate Think Tank and Research Institute" class="w-[65px] border border-gray-200 mt-1">
                    <div class="ml-2 leading-tight">
                        <div class="text-lg font-semibold text-white mt-1">SyedShayan.com</div>
                        <span id="typewriter" class="text-sm text-white typewriter">
                            Real Estate Think Tank, Research<br>
                            Institute & Web Portal
                        </span>
                    </div>
                </a>
            </div>

            <nav class="hidden md:flex items-center space-x-6">
               <a href="uploads/homenew-ui.pdf" target="_blank" class="nav-link flex items-center justify-content-center gap-2 py-2 text-sm font-semibold text-white hover:text-white">
  Home
</a>
                <a href="/about" class="nav-link flex items-center justify-content-center gap-2 py-2 text-sm font-semibold text-white hover:text-white">About</a>
                <a href="mission-statement" class="nav-link flex items-center justify-content-center gap-2 py-2 text-sm font-semibold text-white hover:text-white">Our Mission</a>
                <a href="site-map" class="nav-link flex items-center justify-content-center gap-2 py-2 text-sm font-semibold text-white hover:text-white">Site Map</a>
                <a href="faqs" class="nav-link flex items-center justify-content-center gap-2 py-2 text-sm font-semibold text-white hover:text-white">FAQs</a>
                <a href="board_intro" class="nav-link flex items-center justify-content-center gap-2 py-2 text-sm font-semibold text-white hover:text-white">Board of Governers</a>
                <a href="governer_form" class="nav-link flex items-center justify-content-center gap-2 py-2 text-sm font-semibold text-white hover:text-white">Join us as a Thought Leader</a>
                <a href="contact" class="nav-link flex items-center justify-content-center gap-2 py-2 text-sm font-semibold text-white hover:text-white">Contact Us</a>
            </nav>

            <div id="mobileMenuButton" class="md:hidden cursor-pointer mb-8 z-50 text-xl text-[#043F6C]">
                <i id="hamburgerIcon" class="fas fa-bars"></i>
                <i id="closeIcon" class="fas fa-times hidden"></i>
            </div>
        </div>
    </div>

    <div id="mobileMenu" class="md:hidden hidden fixed inset-0 bg-white z-[9998]">
        <div class="absolute top-4 right-4 z-[10000]">
            <button id="mobileMenuCloseBtn" class="text-2xl font-bold text-[#D7A93A] focus:outline-none">&times;</button>
        </div>

        <div class="px-0 py-4 space-y-2 h-full overflow-y-auto bg-white">
<div class="mx-2 border rounded-lg shadow-sm" style="background-color: #ecf6fd; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;">
                <h2 class="px-3 pt-2 text-[15px] font-bold text-[#052945]">About This Website</h2>
                <p class="px-3 pb-3 text-[11px] leading-relaxed text-[#373737]">
                    This platform functions as a Real Estate Think Tank, a Web Portal, and a Research Institute. It examines how land, cities, governance, and human behaviour interact over time...<br><br>
                    The website is organised into <span class="text-[#043F6C]"><b> three core sections: </b></span><i><br> Central, Segments, and Ecosystem Platforms. </i>
                </p>
            </div>

            <p class="flex items-center gap-2 px-3 py-2 bg-[#D9D9D9CC] text-[18px] font-semibold text-[#052945] rounded-sm">
                <i class="fa-solid fa-house"></i>
                <span>CENTRAL</span>
                <span class="text-[#D7A93A] font-light mb-1 ">|</span>
                <span class="text-[14px] font-medium opacity-90 -ml-1 ">8 SECTIONS</span>
            </p>

            <div class="mobile-links-wrapper">
                <a href="insights" class="flex items-center px-3 border-b py-[10px] text-[13px] font-medium text-slate-900 hover:bg-slate-100">Home</a>
                <a href="about.php" class="flex items-center px-3 border-b py-[10px] text-[13px] font-medium text-slate-900 hover:bg-slate-100">About</a>
                <a href="mission-statement.php" class="flex items-center px-3 py-[10px] border-b text-[13px] font-medium text-slate-900 hover:bg-slate-100">Our Mission</a>
                <a href="site-map.php" class="flex items-center px-3 py-[10px] text-[13px] border-b font-medium text-slate-900 hover:bg-slate-100">Site Map</a>
                <a href="faqs.php" class="flex items-center px-3 py-[10px] text-[13px] border-b font-medium text-slate-900 hover:bg-slate-100">FAQs</a>
                <a href="board_intro.php" class="flex items-center px-3 py-[10px] border-b text-[13px] font-medium text-slate-900 hover:bg-slate-100">Board of Governors</a>
                <a href="governer_form.php" class="flex items-center px-3 py-[10px] border-b text-[13px] font-medium text-slate-900 hover:bg-slate-100">Join us as a Thought Leader</a>
                <a href="contact.php" class="flex items-center px-3 py-[10px] border-b text-[13px] font-medium text-slate-900 hover:bg-slate-100">Contact Us</a>
            </div>

            <p class="flex items-center gap-2 px-3 py-2 bg-[#D9D9D9CC] text-[18px] font-semibold text-[#052945] rounded-sm mt-4">
                <img src="Images/3a98515c43ee07dd391938d6953825f97806f224.png" class="w-[20px]" alt="Segments">
                <span>SEGMENTS</span>
                <span class="text-[#D7A93A] font-light mb-1">|</span>
                <span class="text-[14px] -ml-1 font-medium opacity-90">14 SECTIONS</span>
            </p>

           <div class="mobile-links-wrapper">
    <a href="web-portal" class="flex items-center px-3 py-[10px] border-b text-[13px] font-medium text-slate-900 hover:bg-slate-100">Web Portal</a>
    
    <a href="think-tank-welcome" class="flex items-center px-3 py-[10px] border-b text-[13px] font-medium text-slate-900 hover:bg-slate-100">Think Tank</a>
    
    <a href="research_institue" class="flex items-center px-3 py-[10px] border-b text-[13px] font-medium text-slate-900 hover:bg-slate-100">Real Estate Research Institute</a>
    
    <a href="under-construction-page" class="flex items-center px-3 py-[10px] border-b text-[13px] font-medium text-slate-900 hover:bg-slate-100">Policy Governance Hub</a>
    
    <a href="real_estate_today" class="flex items-center px-3 py-[10px] border-b text-[13px] font-medium text-slate-900 hover:bg-slate-100">RE News</a>
    
    <a href="real-estate-blogs" class="flex items-center px-3 py-[10px] border-b text-[13px] font-medium text-slate-900 hover:bg-slate-100">Real Estate Blog</a>
    
    <a href="history" class="flex items-center px-3 py-[10px] border-b text-[13px] font-medium text-slate-900 hover:bg-slate-100">On This Date</a>
    
    <a href="model-town-lahore-archive" class="flex items-center px-3 py-[10px] border-b text-[13px] font-medium text-slate-900 hover:bg-slate-100">Model Town Lahore</a>
    
    <a href="real-estate_index" class="flex items-center px-3 py-[10px] border-b text-[13px] font-medium text-slate-900 hover:bg-slate-100">Real Estate Index</a>
    
    <a href="newsroom.php" class="flex items-center px-3 py-[10px] border-b text-[13px] font-medium text-slate-900 hover:bg-slate-100">News Room</a>
    
    <a href="under-construction-page" class="flex items-center px-3 py-[10px] border-b text-[13px] font-medium text-slate-900 hover:bg-slate-100">Research Report</a>
    
    <a href="tv&documentry" class="flex items-center px-3 py-[10px] border-b text-[13px] font-medium text-slate-900 hover:bg-slate-100">TV & Documentaries</a>
    
    <a href="podcast-home" class="flex items-center px-3 py-[10px] border-b text-[13px] font-medium text-slate-900 hover:bg-slate-100">Podcast</a>
    
    <a href="RE-educational-series" class="flex items-center px-3 py-[10px] border-b text-[13px] font-medium text-slate-900 hover:bg-slate-100">RE Educational Series</a>
</div>
            
            <p class="flex items-center gap-2 px-3 py-2 bg-[#D9D9D9CC] text-[18px] font-semibold text-[#052945] rounded-sm mt-4">
                <i class="fa-regular fa-handshake"></i> 
                <span>PARTNERS WEBSITES</span>
                <span class="text-[#D7A93A] font-light mb-1 ">|</span>
                <span class="text-[14px] font-medium opacity-90 -ml-1 ">5</span>
            </p>

            <div class="mobile-links-wrapper pb-10">
                <a href="partner.php" class="flex items-center px-3 py-[10px] border-b text-[13px] font-medium text-slate-900 hover:bg-slate-100">syedshayan.com/partners</a>
                <a href="https://jaidadonline.co" target="_blank" class="flex items-center px-3 py-[10px] border-b text-[13px] font-medium text-slate-900 hover:bg-slate-100"> jaidadonline.co</a>
                <a href="https://rentahome.pk" target="_blank" class="flex items-center px-3 py-[10px] border-b text-[13px] font-medium text-slate-900 hover:bg-slate-100"> rentahome.pk</a>
                <a href="https://shehrbeen.com" target="_blank" class="flex items-center px-3 py-[10px] border-b text-[13px] font-medium text-slate-900 hover:bg-slate-100"> shehrbeen.com</a>
                <a href="https://shakehands.pk" target="_blank" class="flex items-center px-3 py-[10px] border-b text-[13px] font-medium text-slate-900 hover:bg-slate-100"> shakehands.pk</a>
            </div>
        </div>
    </div>

    <a class="mr-2 mt-1 text-[#043F6C] only-header-mobile-home" style="display:flex; align-items:flex-end; justify-content:flex-end; text-decoration:underline;" href="insights">Home</a>
</header>

    <div class="dashboard-wrapper">
        <div class="live-status-bar">
            <div class="status-indicator">
                <div class="blinking-dot"></div><span><strong>LIVE:</strong> PHP Backend Connected</span>
            </div>
            <div class="status-indicator"><i class="fas fa-database"></i><span>Database: <strong id="dbStatus">MySQL
                        Active</strong></span></div>
            <div class="status-indicator" id="lastRefreshBadge"><i class="fas fa-clock"></i> Last: Just now</div>
            <button class="refresh-btn" id="manualRefreshBtn"><i class="fas fa-sync-alt"></i> Refresh</button>
        </div>

        <div class="nav-tabs">
            <button class="tab-btn active" data-page="dashboard"><i class="fas fa-home"></i> Dashboard</button>
            <button class="tab-btn" data-page="historical"><i class="fas fa-chart-line"></i> Historical</button>
            <button class="tab-btn" data-page="sectors"><i class="fas fa-building"></i> Sectors</button>
            <button class="tab-btn" data-page="api"><i class="fas fa-code"></i> API Docs</button>
            <button class="tab-btn" data-page="diaspora"><i class="fas fa-plane"></i> Diaspora</button>
        </div>

        <div id="dashboardPage" class="page-content active-page">
            <div class="kpi-grid">
                <div class="kpi-card">
                    <div class="kpi-value" id="resIndexVal">--</div>
                    <div>Residential Index <span class="trend-up" id="resTrend">▲ Loading</span></div>
                </div>
                <div class="kpi-card">
                    <div class="kpi-value" id="comIndexVal">--</div>
                    <div>Commercial Index <span class="trend-up" id="comTrend">▲ Loading</span></div>
                </div>
                <div class="kpi-card">
                    <div class="kpi-value" id="rentalYieldVal">--</div>
                    <div>Rental Yield</div>
                </div>
                <div class="kpi-card">
                    <div class="kpi-value" id="sentimentVal">--</div>
                    <div>Market Sentiment</div>
                </div>
            </div>

            <div class="two-columns">
                <div class="card">
                    <h3><i class="fas fa-chart-line"></i> KSE-100 & Stocks</h3>
                    <div id="stockList">
                        <div class="text-center py-4"><i class="fas fa-spinner fa-spin"></i> Loading stocks...</div>
                    </div>
                </div>
                <div class="card">
                    <h3><i class="fas fa-chart-simple"></i> Price Snapshot</h3>
                    <div class="price-row"><span>5 Marla Plot</span><span>PKR 28 Lakh – 55 Lakh</span></div>
                    <div class="price-row"><span>10 Marla Plot</span><span>PKR 55 Lakh – 1.2 Cr</span></div>
                    <div class="price-row"><span>1 Kanal Plot</span><span>PKR 1.2 Cr – 3.5 Cr</span></div>
                    <div class="price-row"><span>Commercial Shop</span><span>PKR 30 Lakh – 1.8 Cr</span></div>
                </div>
            </div>

            <div class="card">
                <h3><i class="fas fa-map-marked-alt"></i> Peshawar Map</h3>
                <div id="peshawarMap"></div>
            </div>

            <div class="card" style="background:#FEF9E6;">
                <i class="fas fa-brain"></i> <strong>Insight:</strong> Peshawar's real estate is gaining momentum due to
                CPEC connectivity and urban renewal. High potential for value appreciation in DHA and Hayatabad sectors.
            </div>
        </div>
        
        

        <div id="historicalPage" class="page-content">
            <div class="card">
                <h3>Residential Index Live Candle</h3>
                <div id="candleResChart" style="min-height: 250px;">
                    <div class="chart-skeleton"></div>
                </div>
            </div>
            <div class="card">
                <h3>Commercial Index Live Candle</h3>
                <div id="candleComChart" style="min-height: 250px;">
                    <div class="chart-skeleton"></div>
                </div>
            </div>
            <div class="card">
                <h3>5 Marla Price Live Candle</h3>
                <div id="candlePlotChart" style="min-height: 250px;">
                    <div class="chart-skeleton"></div>
                </div>
            </div>
        </div>

        <div id="sectorsPage" class="page-content">
            <div class="card">
                <h3>Top Performing Sectors</h3>
                <ul class="sector-list" id="sectorList">
                    <li>
                        <div class="text-center py-4"><i class="fas fa-spinner fa-spin"></i> Loading sectors...</div>
                    </li>
                </ul>
            </div>
            <div class="two-columns">
                <div class="card">
                    <h3>Demand Distribution</h3>
                    <div class="chart-wrapper"><canvas id="sectorPieChart" style="height: 250px;"></canvas></div>
                </div>
                <div class="card">
                    <h3>Summary</h3>
                    <p>DHA Peshawar and Hayatabad lead premium demand. Regi Model Town offers affordable housing
                        options. Commercial yields are strongest on University Road with 6-8% returns.</p><br>
                    <p><strong>Investment Tip:</strong> Early investment in developing sectors like Regi Model Town
                        shows promising appreciation potential.</p>
                </div>
            </div>
        </div>

        <div id="apiPage" class="page-content">
            <div class="card">
                <h3>Peshawar Real Estate REST API</h3>
                <p><strong>Base URL:</strong> <code><?php echo $_SERVER['REQUEST_URI']; ?>?api=</code></p>
                <div class="api-endpoint">
                    <strong>GET ?api=market-summary</strong><br>
                    Returns residential index, commercial index, rental yield, market sentiment
                </div>
                <div class="api-endpoint">
                    <strong>GET ?api=stocks</strong><br>
                    Returns live KSE-100 and stock prices
                </div>
                <div class="api-endpoint">
                    <strong>GET ?api=sectors</strong><br>
                    Returns sector-wise prices and growth percentages
                </div>
                <div class="api-endpoint">
                    <strong>GET ?api=historical</strong><br>
                    Returns yearly index values (2022-2026)
                </div>
                <div class="api-endpoint">
                    <strong>POST (JSON) /</strong><br>
                    Saves user inquiries to database (name, email, phone, message)
                </div>
            </div>
            <div class="card">
                <h3>Sample API Response</h3>
                <div class="api-endpoint" id="sampleResponse">
                    Click "Test API" button to fetch live data from PHP backend
                </div>
                <button onclick="testAPILive()" class="refresh-btn" style="margin-top: 10px;">🔌 Test API
                    Connection</button>
            </div>
        </div>

        <div id="diasporaPage" class="page-content">
            <div class="card">
                <h3>🌍 Overseas Investment Dashboard</h3>
                <div class="diaspora-stats"
                    style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px;">
                    <div class="stat-box"><strong>🇬🇧 UK</strong><br>↑ 21%<br><small>Top: DHA</small></div>
                    <div class="stat-box"><strong>🇺🇸 USA/Canada</strong><br>↑ 16%<br><small>Hayatabad</small></div>
                    <div class="stat-box"><strong>🇦🇪 UAE/GCC</strong><br>↑ 28%<br><small>Regi Model</small></div>
                    <div class="stat-box"><strong>🇪🇺 Europe</strong><br>↑ 12%<br><small>Commercial</small></div>
                </div>
            </div>
            <div class="two-columns">
                <div class="card">
                    <h3>📈 Diaspora Investment Growth</h3>
                    <div class="chart-wrapper"><canvas id="diasporaChart" style="height: 250px;"></canvas></div>
                </div>
                <div class="card">
                    <h3>📘 Investment Guide</h3>
                    <p>✔️ Roshan Digital Accounts available<br>✔️ CDA/Board of Revenue approvals required<br>✔️ Best
                        sectors: DHA, Hayatabad, Regi Model<br>✔️ Average rental yields: 5-7%<br>✔️ Capital
                        appreciation: 8-12% annually</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Inquiry Modal -->
    <div id="inquiryModal" class="modal">
        <div class="modal-content">
            <span class="close-modal" onclick="closeModal()">&times;</span>
            <h2 class="text-xl font-bold mb-4 text-[#1A3A5F]">Join Our Community</h2>
            <form id="inquiryForm">
                <div class="form-group">
                    <label>Full Name</label>
                    <input type="text" id="name" required placeholder="Enter your name">
                </div>
                <div class="form-group">
                    <label>Email Address</label>
                    <input type="email" id="email" required placeholder="Enter your email">
                </div>
                <div class="form-group">
                    <label>Phone Number</label>
                    <input type="tel" id="phone" required placeholder="Enter your phone">
                </div>
                <div class="form-group">
                    <label>Message / Interest</label>
                    <textarea id="message" rows="3"
                        placeholder="Tell us about your real estate interests..."></textarea>
                </div>
                <button type="submit" class="submit-btn">Submit Inquiry</button>
            </form>
            <div id="formMessage" class="mt-3 text-center text-sm"></div>
        </div>
    </div>
    
        <div class="min-h-screen flex flex-col justify-end">
        <!-- ==================== FOOTER COMPONENT ==================== -->
        <footer class="bg-[#fafafa] w-full">
            
            <!-- Logo Section -->
            <div class="text-center pt-4 pb-2">
                <img src="Images/logo-9.png" alt="Syed Shayan Logo" class="relative mx-auto" style="width:205px; position: relative; right: 20px;">
            </div>

            <section class="text-black pb-2">
                <div class="max-w-xl mx-auto px-4">
                    <!-- Quote -->
                    <p class="text-[12px] px-[45px] text-center leading-relaxed">
                        Land is not what we own.<br> It is what shapes us, remembers us, and carries us forward. <i>Syed Shayan</i>
                    </p>

                    <!-- Our Vision Header -->
                    <div class="flex items-center justify-center mb-3 mt-5 space-x-2">
                        <span class="inline-block h-px w-10 bg-gradient-to-r from-transparent via-[#a8967c] to-[#a8967c] opacity-80"></span>
                        <span class="text-[14px] mt-4 font-semibold text-center whitespace-nowrap">Our Vision</span>
                        <span class="inline-block h-px w-10 bg-gradient-to-l from-transparent via-[#a8967c] to-[#a8967c] opacity-80"></span>
                    </div>
                    
                    <!-- Vision Text -->
                    <p class="text-center text-[11px] text-black leading-relaxed">
                        To research, preserve, analyse, and interpret real estate knowledge by building a credible ecosystem that connects historical archives, contemporary market analysis, collective intellectual exchange, and institutional research. Our mission is to make land, cities, and property systems understandable, accountable, and usable for public discourse and institutional decision-making.
                    </p>

                    <!-- Our Mission Header -->
                    <div class="flex items-center justify-center mb-3 mt-4 space-x-2">
                        <span class="inline-block h-px w-10 bg-gradient-to-r from-transparent via-[#a8967c] to-[#a8967c] opacity-80"></span>
                        <span class="text-[14px] mt-4 font-semibold text-center whitespace-nowrap">Our Mission</span>
                        <span class="inline-block h-px w-10 bg-gradient-to-l from-transparent via-[#a8967c] to-[#a8967c] opacity-80"></span>
                    </div>

                    <!-- 4 Feature Cards with Actual Images -->
                    <div class="bg-[#fafafa] py-4 mb-4 px-2">
                        <div class="max-w-6xl mx-auto">
                            <div class="feature-grid text-center">
                                
                                <!-- Research & Archives -->
                                <div class="flex flex-col items-center">
                                    <img src="Images/research.jpg" class="w-full h-[50px] md:h-[70px] object-contain rounded mb-3" alt="Research & Archives" onerror="this.src='https://placehold.co/70x50?text=Research'">
                                    <h4 class="text-[10px] md:text-[12px] font-semibold mb-1 min-h-[50px] flex items-center justify-center">Research & Archives</h4>
                                    <p class="text-[9px] md:text-[11px] text-gray-600 leading-snug">
                                        A structured archive preserving real estate records, urban history, land documentation, and verified research.
                                    </p>
                                </div>

                                <!-- Writing & Analysis -->
                                <div class="flex flex-col items-center">
                                    <img src="Images/writing.jpg" class="w-full h-[50px] md:h-[70px] object-contain rounded mb-3" alt="Writing & Analysis" onerror="this.src='https://placehold.co/70x50?text=Writing'">
                                    <h4 class="text-[10px] md:text-[12px] font-semibold mb-1 min-h-[50px] flex items-center justify-center">Writing & Analysis</h4>
                                    <p class="text-[9px] md:text-[11px] text-gray-600 leading-snug">
                                        An independent platform delivering credible market updates, policy analysis, and investment insights.
                                    </p>
                                </div>

                                <!-- Think Tank & Collective Knowledge -->
                                <div class="flex flex-col items-center">
                                    <img src="Images/think.jpg" class="w-full h-[50px] md:h-[70px] object-contain rounded mb-3" alt="Think Tank" onerror="this.src='https://placehold.co/70x50?text=Think+Tank'">
                                    <h4 class="text-[10px] md:text-[12px] font-semibold mb-1 min-h-[50px] flex items-center justify-center">Think Tank & Collective Knowledge</h4>
                                    <p class="text-[9px] md:text-[11px] text-gray-600 leading-snug">
                                        A collaborative think tank enabling intellectual exchange and informed perspectives on land, cities, and Property.
                                    </p>
                                </div>

                                <!-- Real Estate Research Institute -->
                                <div class="flex flex-col items-center">
                                    <img src="Images/real.jpg" class="w-full h-[50px] md:h-[70px] object-contain rounded mb-3" alt="Real Estate Institute" onerror="this.src='https://placehold.co/70x50?text=Institute'">
                                    <h4 class="text-[10px] md:text-[12px] font-semibold mb-1 min-h-[50px] flex items-center justify-center">Real Estate Research Institute</h4>
                                    <p class="text-[9px] md:text-[11px] text-gray-600 leading-snug">
                                        An institutional platform supplying analytical materials and research inputs to support global institutions.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Footer Links -->
                    <div class="footerLinks flex flex-wrap justify-center gap-4 mb-3 text-center mx-2 mt-2">
                        <a href="#" id="profileLink" class="text-[11px] text-gray-700 underline hover:text-[#043F6C] transition">Profile</a>
                        <a href="#" class="text-[11px] underline text-gray-700 hover:text-[#043F6C] transition">About Us</a>
                        <a href="#" class="text-[11px] underline text-gray-700 hover:text-[#043F6C] transition">Our Mission</a>
                        <a href="#" class="text-[11px] underline text-gray-700 hover:text-[#043F6C] transition">Site Map</a>
                        <a href="#" class="text-[11px] underline text-gray-700 hover:text-[#043F6C] transition">Terms & Conditions</a>
                        <a href="#" class="text-[11px] underline text-gray-700 hover:text-[#043F6C] transition">FAQs</a>
                        <a href="#" class="text-[11px] underline text-gray-700 hover:text-[#043F6C] transition">Privacy Policy</a>
                        <a href="#" class="text-[11px] underline text-gray-700 hover:text-[#043F6C] transition">Contact Us</a>
                        <a href="#" id="membersDirectoryLink" class="text-[11px] underline text-gray-700 hover:text-[#043F6C] transition">Members Directory</a>
                    </div>

                    <!-- Membership Access Button -->
                    <div class="flex items-center justify-center mb-2 space-x-2">
                        <span class="inline-block h-px w-10 bg-gradient-to-r from-transparent via-[#a8967c] to-[#a8967c] opacity-80"></span>
                        <a href="#" id="membershipBtn" class="px-[6px] py-[2px] mt-4 rounded-md text-[11px] font-medium border border-[#B29974] text-black btn-membership shadow-md">
                            Membership Access
                        </a>
                        <span class="inline-block h-px w-10 bg-gradient-to-l from-transparent via-[#a8967c] to-[#a8967c] opacity-80"></span>
                    </div>

                    <!-- Benefits Text -->
                    <p class="text-[11px] text-center text-gray-700 mb-2 leading-relaxed">
                        Members are provided with a profile, access to <br> community initiatives, early research reports, and <br> participation in think tank surveys.
                    </p>

                    <!-- Diamond Divider -->
                    <div class="flex items-center justify-center gap-3 my-3">
                        <div class="w-16 h-px bg-gradient-to-r from-transparent via-[#a8967c] to-[#a8967c] opacity-70"></div>
                        <div class="w-2 h-2 rotate-45 bg-[#a8967c]"></div>
                        <div class="w-16 h-px bg-gradient-to-l from-transparent via-[#a8967c] to-[#a8967c] opacity-70"></div>
                    </div>

                    <!-- Social Media Icons -->
                    <div class="flex justify-center pt-2 pb-4 bg-[#fafafa] px-2">
                        <div class="social-icons flex items-center space-x-5">
                            <a href="https://www.facebook.com/syedshayanpk1" target="_blank" class="hover:scale-110 transition">
                                <i class="fab fa-facebook-f"></i>
                            </a>
                            <a href="https://www.threads.net/@syedshayancom" target="_blank" class="hover:scale-110 transition">
                                <i class="fab fa-threads"></i>
                            </a>
                            <a href="https://www.instagram.com/syedshayancom" target="_blank" class="hover:scale-110 transition">
                                <i class="fab fa-instagram"></i>
                            </a>
                            <a href="https://youtube.com/@syedshayan" target="_blank" class="hover:scale-110 transition">
                                <i class="fab fa-youtube"></i>
                            </a>
                            <a href="https://www.linkedin.com/company/syedshayan/" target="_blank" class="hover:scale-110 transition">
                                <i class="fab fa-linkedin-in"></i>
                            </a>
                            <a href="https://x.com/syedshayanpk" target="_blank" class="hover:scale-110 transition">
                                <i class="fab fa-twitter"></i>
                            </a>
                            <a href="https://www.tiktok.com/@syedshayan.com" target="_blank" class="hover:scale-110 transition">
                                <i class="fab fa-tiktok"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Copyright Section -->
            <div class="footerView z-0 bg-[#fafafa]">
                <p class="mb-2 text-gray-400 text-center text-[11px]">&copy; syedshayan.com</p>
            </div>
        </footer>
    </div>

    <!-- ==================== MEMBERS MODAL ==================== -->
    <div id="membersModal" class="fixed inset-0 z-[99999] hidden bg-black bg-opacity-50 flex items-center justify-center">
        <div class="bg-[#fafafa] rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto shadow-lg relative p-6">
            <button onclick="closeMembersModal()" class="absolute top-5 right-6 text-gray-500 hover:text-black text-3xl">&times;</button>
            <h2 class="text-xl font-bold mb-2 text-center">All Members</h2>
            <h2 class="text-center mb-2 text-sm">Total Registered Members: <span id="totalMembersCount">156</span></h2>
            <hr class="mb-4">
            <div class="space-y-4 relative" id="membersListContainer"></div>
        </div>
    </div>

    <!-- ==================== GUEST POPUP ==================== -->
    <div id="guestPopup" class="fixed inset-0 z-[99998] hidden bg-black bg-opacity-60 flex items-center justify-center">
        <div class="bg-white rounded-lg max-w-md w-full p-6 text-center shadow-2xl">
            <i class="fas fa-key text-4xl text-[#a8967c] mb-3"></i>
            <h3 class="text-xl font-semibold mb-2">Membership Required</h3>
            <p class="text-gray-600 text-sm mb-5">You need to be a registered member to access this feature. Join our community for exclusive benefits.</p>
            <div class="flex gap-3 justify-center">
                <button onclick="closeGuestPopup()" class="px-4 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-100">Cancel</button>
                <a href="#" id="popupJoinBtn" class="px-4 py-2 text-sm bg-[#a8967c] text-white rounded-md hover:bg-[#8b7552] transition">Join Now</a>
            </div>
        </div>
    </div>
</div>
    
    

    <script>
        // API Base URL - Same page with query parameter
        const API_BASE = window.location.pathname + '?api=';

        // Chart variables
        let sectorPieChart, diasporaChart;
        let candleRes, candleCom, candlePlot;

        // Candlestick Data Helpers
        function generateInitialCandleData(basePrice) {
            let data = [];
            let price = basePrice;
            let time = new Date().getTime() - (20 * 60000);
            for (let i = 0; i < 20; i++) {
                let open = price + Math.random() * 20 - 10;
                let high = open + Math.random() * 15;
                let low = open - Math.random() * 15;
                let close = (open + high + low) / 3 + (Math.random() * 10 - 5);
                data.push({ x: time + (i * 60000), y: [open.toFixed(1), high.toFixed(1), low.toFixed(1), close.toFixed(1)] });
                price = close;
            }
            return data;
        }

        function initCandleCharts() {
            const commonOptions = {
                chart: {
                    type: 'candlestick',
                    height: 250,
                    animations: { enabled: true, easing: 'linear', dynamicAnimation: { speed: 800 } },
                    toolbar: { show: false }
                },
                xaxis: { type: 'datetime' },
                plotOptions: {
                    candlestick: {
                        colors: {
                            upward: '#1A3A5F',   // Deep Blue (Upar ke liye)
                            downward: '#FF3131', // Crimson Red (Niche ke liye)
                            neutral: '#D4AF37'   // Gold (Special signals ya borders ke liye)
                        },
                        wick: {
                            useFillColor: true
                        }
                    }
                },
                tooltip: {
                    theme: 'dark',
                    y: {
                        formatter: function (val) {
                            return val.toFixed(2);
                        }
                    }
                }
            };

            // Remove skeleton and render charts
            const resContainer = document.querySelector("#candleResChart");
            const comContainer = document.querySelector("#candleComChart");
            const plotContainer = document.querySelector("#candlePlotChart");

            if (resContainer) resContainer.innerHTML = '';
            if (comContainer) comContainer.innerHTML = '';
            if (plotContainer) plotContainer.innerHTML = '';

            candleRes = new ApexCharts(document.querySelector("#candleResChart"), { ...commonOptions, series: [{ name: 'Residential Index', data: generateInitialCandleData(141) }] });
            candleCom = new ApexCharts(document.querySelector("#candleComChart"), { ...commonOptions, series: [{ name: 'Commercial Index', data: generateInitialCandleData(128) }] });
            candlePlot = new ApexCharts(document.querySelector("#candlePlotChart"), { ...commonOptions, series: [{ name: '5 Marla Price (Lakh PKR)', data: generateInitialCandleData(45) }] });

            candleRes.render();
            candleCom.render();
            candlePlot.render();
        }

        // Initialize Map
        const map = L.map('peshawarMap').setView([34.0151, 71.5249], 12);
        L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OSM</a> & CARTO'
        }).addTo(map);

        const markers = [
            { name: "Hayatabad", coords: [34.000, 71.460] },
            { name: "DHA Peshawar", coords: [34.030, 71.510] },
            { name: "Regi Model Town", coords: [33.990, 71.550] },
            { name: "University Road", coords: [34.022, 71.537] }
        ];
        markers.forEach(m => {
            L.marker(m.coords).addTo(map).bindPopup(`<b>${m.name}</b><br>Premium Investment Zone`);
        });

        L.polygon([
            [34.080, 71.450],
            [34.050, 71.600],
            [33.950, 71.580],
            [33.940, 71.420]
        ], { color: "#D4AF37", weight: 3, fillOpacity: 0.08 }).addTo(map);

        // Fetch Market Summary from PHP API
        async function fetchMarketSummary() {
            try {
                const response = await fetch(API_BASE + 'market-summary');
                const data = await response.json();
                if (data.success && data.data) {
                    document.getElementById('resIndexVal').innerText = data.data.residential_index;
                    document.getElementById('comIndexVal').innerText = data.data.commercial_index;
                    document.getElementById('rentalYieldVal').innerText = data.data.rental_yield + '%';
                    document.getElementById('sentimentVal').innerHTML = data.data.sentiment + ' 📈';
                    document.getElementById('resTrend').innerHTML = '▲ Active';
                    document.getElementById('comTrend').innerHTML = '▲ Active';
                }
            } catch (error) {
                console.error('Error fetching market summary:', error);
                document.getElementById('resIndexVal').innerText = '141';
                document.getElementById('comIndexVal').innerText = '128';
                document.getElementById('rentalYieldVal').innerText = '5.4%';
                document.getElementById('sentimentVal').innerHTML = 'Bullish 📈';
            }
        }

        // Fetch Stocks from PHP API
        async function fetchStocks() {
            try {
                const response = await fetch(API_BASE + 'stocks');
                const data = await response.json();
                if (data.success && data.data) {
                    const stockList = document.getElementById('stockList');
                    stockList.innerHTML = '';
                    data.data.forEach(stock => {
                        const arrow = stock.trend === 'up' ? '↑' : '↓';
                        const color = stock.trend === 'up' ? '#2ecc71' : '#e74c3c';
                        stockList.innerHTML += `
                    <div class="price-row">
                        <span><strong>${stock.symbol}</strong></span>
                        <span>${stock.price.toLocaleString()} <span style="color:${color};">${arrow} ${Math.abs(stock.change_percent)}%</span></span>
                    </div>
                `;
                    });
                }
            } catch (error) {
                console.error('Error fetching stocks:', error);
                const stockList = document.getElementById('stockList');
                stockList.innerHTML = `
            <div class="price-row"><span><strong>KSE-100</strong></span><span>82,450 <span style="color:#2ecc71;">↑ 2.4%</span></span></div>
            <div class="price-row"><span><strong>PSO</strong></span><span>389.75 <span style="color:#2ecc71;">↑ 3.1%</span></span></div>
            <div class="price-row"><span><strong>UBL</strong></span><span>281.20 <span style="color:#e74c3c;">↓ 0.2%</span></span></div>
        `;
            }
        }

        // Fetch Historical Trends from PHP API
        async function fetchHistoricalTrends() {
            try {
                const response = await fetch(API_BASE + 'historical');
                const data = await response.json();
                if (data.success && data.data) {
                    console.log("Historical data synced with backend");
                }
            } catch (error) {
                console.error('Error fetching historical trends:', error);
            }
        }

        // Fetch Sectors from PHP API
        async function fetchSectors() {
            try {
                const response = await fetch(API_BASE + 'sectors');
                const data = await response.json();
                if (data.success && data.data) {
                    const sectorList = document.getElementById('sectorList');
                    sectorList.innerHTML = '';
                    const sectorNames = [];
                    const demandData = [];

                    data.data.forEach(sector => {
                        sectorList.innerHTML += `
                    <li><span>🏘️ ${sector.name}</span><span class="trend-up">▲ +${sector.growth_percent}% | ${sector.price_per_kanal}</span></li>
                `;
                        sectorNames.push(sector.name);
                        demandData.push(sector.demand_percent);
                    });

                    if (sectorPieChart) {
                        sectorPieChart.data.labels = sectorNames;
                        sectorPieChart.data.datasets[0].data = demandData;
                        sectorPieChart.update();
                    }
                }
            } catch (error) {
                console.error('Error fetching sectors:', error);
            }
        }

        // Initialize Pie Chart and Diaspora Chart
        function initStaticCharts() {
            // Sector Pie Chart - with custom colors (Blue, Gold, Light Blue, Dark Blue)
            const pieCtx = document.getElementById('sectorPieChart').getContext('2d');
            sectorPieChart = new Chart(pieCtx, {
                type: 'pie',
                data: {
                    labels: ['DHA Peshawar', 'Hayatabad', 'Regi Model', 'University Road'],
                    datasets: [{
                        data: [38, 27, 20, 15],
                        backgroundColor: ['#1A3A5F', '#D4AF37', '#3A6A8F', '#2A4A6F'],
                        borderWidth: 2,
                        borderColor: 'white'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    plugins: { legend: { position: 'bottom' } },
                    animation: { duration: 800 }
                }
            });

            // Diaspora Chart - with Blue and Gold theme
            const diasporaCtx = document.getElementById('diasporaChart').getContext('2d');
            diasporaChart = new Chart(diasporaCtx, {
                type: 'bar',
                data: {
                    labels: ['2022', '2023', '2024', '2025', '2026'],
                    datasets: [{
                        label: 'Overseas Investment (Billion PKR)',
                        data: [22, 28, 36, 45, 56],
                        backgroundColor: '#1A3A5F',
                        borderRadius: 8,
                        borderColor: '#D4AF37',
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    plugins: { legend: { position: 'top' } },
                    animation: { duration: 800 }
                }
            });
        }

        // Test API Live
        async function testAPILive() {
            try {
                const response = await fetch(API_BASE + 'market-summary');
                const data = await response.json();
                document.getElementById('sampleResponse').innerHTML = JSON.stringify(data, null, 2);
                alert('✅ API is working! Check the sample response above.');
            } catch (error) {
                document.getElementById('sampleResponse').innerHTML = JSON.stringify({ success: false, error: error.message }, null, 2);
                alert('❌ API Connection Failed! Make sure your PHP server is running.');
            }
        }

        // Submit inquiry form
        document.getElementById('inquiryForm')?.addEventListener('submit', async (e) => {
            e.preventDefault();
            const formData = {
                name: document.getElementById('name').value,
                email: document.getElementById('email').value,
                phone: document.getElementById('phone').value,
                message: document.getElementById('message').value
            };

            try {
                const response = await fetch(window.location.pathname, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                    body: JSON.stringify(formData)
                });
                const result = await response.json();
                const msgDiv = document.getElementById('formMessage');
                if (result.success) {
                    msgDiv.innerHTML = '<span class="text-green-600">✅ Thank you! We will contact you soon.</span>';
                    document.getElementById('inquiryForm').reset();
                    setTimeout(() => closeModal(), 2000);
                } else {
                    msgDiv.innerHTML = '<span class="text-red-600">❌ Error: ' + result.error + '</span>';
                }
            } catch (error) {
                document.getElementById('formMessage').innerHTML = '<span class="text-red-600">❌ Network error. Please try again.</span>';
            }
        });

        // Modal functions
        function openModal() { document.getElementById('inquiryModal').style.display = 'flex'; }
        function closeModal() { document.getElementById('inquiryModal').style.display = 'none'; }

        // Refresh all data
        async function refreshAllData() {
            await Promise.all([
                fetchMarketSummary(),
                fetchStocks(),
                fetchHistoricalTrends(),
                fetchSectors()
            ]);
            const now = new Date();
            document.getElementById('lastRefreshBadge').innerHTML = `<i class="fas fa-clock"></i> Last: ${now.toLocaleTimeString()}`;
        }

        // Tab switching
        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                const pageId = btn.dataset.page;
                document.querySelectorAll('.page-content').forEach(page => page.classList.remove('active-page'));
                document.getElementById(pageId + 'Page').classList.add('active-page');
                document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
                btn.classList.add('active');

                setTimeout(() => {
                    if (sectorPieChart) sectorPieChart.resize();
                    if (diasporaChart) diasporaChart.resize();
                    map.invalidateSize();
                    // Resize candle charts
                    if (candleRes) candleRes.render();
                    if (candleCom) candleCom.render();
                    if (candlePlot) candlePlot.render();
                }, 100);
            });
        });

        // Typewriter effect
        const typewriterElement = document.getElementById('typewriter');
        const text = "Peshawar Real Estate Insights & Research";
        let charIndex = 0;
        function typeEffect() {
            if (charIndex < text.length) {
                typewriterElement.innerHTML += text.charAt(charIndex);
                charIndex++;
                setTimeout(typeEffect, 50);
            }
        }

        // Mobile menu
        document.getElementById('mobileMenuButton')?.addEventListener('click', () => {
            alert('📱 Navigation Menu\n\nHome | About | Our Mission | FAQs | Join Us');
        });

        // Join Us button
        document.getElementById('joinUsBtn')?.addEventListener('click', (e) => {
            e.preventDefault();
            openModal();
        });

        // Auto refresh every 3 minutes
        setInterval(refreshAllData, 180000);
        document.getElementById('manualRefreshBtn')?.addEventListener('click', refreshAllData);

        // Initialize on load
        document.addEventListener('DOMContentLoaded', () => {
            initStaticCharts();
            setTimeout(() => {
                initCandleCharts(); // Initialize with slight delay for smoother loading
            }, 100);
            refreshAllData();
            typeEffect();

            setTimeout(() => {
                if (sectorPieChart) sectorPieChart.resize();
                if (diasporaChart) diasporaChart.resize();
                map.invalidateSize();
            }, 200);
        });

        window.addEventListener('resize', () => {
            if (sectorPieChart) sectorPieChart.resize();
            if (diasporaChart) diasporaChart.resize();
            if (candleRes) candleRes.resize();
            if (candleCom) candleCom.resize();
            if (candlePlot) candlePlot.resize();
            map.invalidateSize();
        });

        // ============ DYNAMIC CHART ANIMATION (2 SECONDS) ============
        let animTime = 0;

        function animateLiveCharts() {
            animTime += 0.5;

            // Update KPI Values with organic movement
            const kpiConfigs = [
                { id: 'resIndexVal', base: 141, freq: 0.8 },
                { id: 'comIndexVal', base: 128, freq: 0.6 },
                { id: 'rentalYieldVal', base: 5.4, freq: 0.4, suffix: '%' }
            ];

            kpiConfigs.forEach(conf => {
                const el = document.getElementById(conf.id);
                if (el) {
                    const oscillation = Math.sin(animTime * conf.freq) * (conf.base * 0.02);
                    const newVal = (conf.base + oscillation).toFixed(conf.suffix ? 1 : 0);

                    if (el.innerText !== newVal + (conf.suffix || '')) {
                        el.innerText = newVal + (conf.suffix || '');
                        el.classList.add('value-changing');
                        setTimeout(() => el.classList.remove('value-changing'), 400);
                    }
                }
            });

            // Update Diaspora Chart with jitter
            if (diasporaChart && diasporaChart.data && diasporaChart.data.datasets[0]) {
                diasporaChart.data.datasets[0].data = diasporaChart.data.datasets[0].data.map((val, i) => {
                    const wave = Math.sin(animTime * 0.5 + i) * (val * 0.02);
                    return parseFloat((val + wave).toFixed(2));
                });
                diasporaChart.update('none');
            }

            // Update Pie Chart
            if (sectorPieChart) {
                sectorPieChart.data.datasets[0].data = sectorPieChart.data.datasets[0].data.map((val, i) => {
                    const wave = Math.sin(animTime * 0.3 + i) * 1.5;
                    return Math.max(5, val + wave);
                });
                sectorPieChart.update('none');
            }

            // Jitter for Stock Prices
            const stockPrices = document.querySelectorAll('#stockList .price-row span:last-child');
            stockPrices.forEach((span, i) => {
                const node = span.childNodes[0];
                if (node) {
                    let price = parseFloat(node.nodeValue.replace(/,/g, ''));
                    if (!isNaN(price)) {
                        const wave = Math.sin(animTime * 0.7 + i) * (price * 0.001);
                        const newPrice = (price + wave).toLocaleString(undefined, { minimumFractionDigits: 2 });
                        node.nodeValue = newPrice + ' ';
                    }
                }
            });

            // Update status indicator
            const badge = document.getElementById('lastRefreshBadge');
            if (badge && animTime % 10 < 0.5) {
                badge.innerHTML = `<i class="fas fa-wave-square text-yellow-500"></i> Stream Live...`;
            }
        }

        // Update Candlestick Charts separately for better performance
        function updateCandleCharts() {
            if (!candleRes || !candleCom || !candlePlot) return;

            const candleCharts = [candleRes, candleCom, candlePlot];
            candleCharts.forEach(chart => {
                if (chart && chart.w) {
                    const series = chart.w.config.series[0].data;
                    if (series && series.length > 0) {
                        const lastCandle = series[series.length - 1];
                        let [open, high, low, close] = lastCandle.y.map(v => parseFloat(v));

                        const drift = (Math.random() - 0.5) * (close * 0.02);
                        close = close + drift;
                        if (close > high) high = close;
                        if (close < low) low = close;

                        series[series.length - 1] = { x: lastCandle.x, y: [open.toFixed(1), high.toFixed(1), low.toFixed(1), close.toFixed(1)] };

                        if (Math.random() < 0.15) {
                            const newX = lastCandle.x + 60000;
                            series.push({ x: newX, y: [close.toFixed(1), (close + 1).toFixed(1), (close - 1).toFixed(1), close.toFixed(1)] });
                            if (series.length > 40) series.shift();
                        }

                        chart.updateSeries([{ data: series }], false);
                    }
                }
            });
        }

        // Start animations
        setInterval(() => {
            animateLiveCharts();
        }, 2000);

        // Update candlesticks every 3 seconds for smoother animation
        setInterval(() => {
            updateCandleCharts();
        }, 3000);

    </script>

</body>

</html>