<?php 
/**
 * coverage.php - আইএসপি নেটওয়ার্ক কাভারেজ এরিয়া পেজ
 * নতুন ব্র্যান্ড কালার (#00aeef এবং #57a03a) অনুযায়ী আপডেট করা হয়েছে
 */

include('db_config.php');
include('header.php'); 

// কাভারেজ এরিয়া ডেটা
$coverage_areas = [
    "ঢাকা" => ["মিরপুর", "উত্তরা", "বনানী", "গুলশান", "ধানমণ্ডি", "মোহাম্মদপুর"],
    "চট্টগ্রাম" => ["হালিশহর", "খুলশী", "পতেঙ্গা", "পাঁচলাইশ"],
    "সিলেট" => ["জিন্দাবাজার", "উপশহর", "শিবগঞ্জ"],
    "খুলনা" => ["খালিশপুর", "দৌলতপুর"]
];
?>

<style>
    :root {
        --primary-brand: #00aeef; /* আকাশী নীল */
        --secondary-brand: #57a03a; /* সবুজ */
        --dark-bg: #222;
        --light-bg: #f8f9fa;
    }
    .text-brand { color: var(--primary-brand); }
    .text-secondary { color: var(--secondary-brand); }
    .btn-custom {
        background: var(--primary-brand);
        color: white;
        padding: 12px 30px;
        border-radius: 50px;
        text-decoration: none;
        font-weight: bold;
        display: inline-block;
        transition: 0.3s;
    }
    .btn-custom:hover {
        background: var(--secondary-brand);
        color: white;
    }
</style>

<!-- পেজ হেডার -->
<section style="background: var(--dark-bg); color: white; padding: 60px 0; text-align: center;">
    <div class="container">
        <h1>আমাদের নেটওয়ার্ক <span style="color: var(--primary-brand);">কাভারেজ</span> এরিয়া</h1>
        <p>আমরা প্রতিনিয়ত আমাদের সেবার পরিধি বাড়িয়ে চলেছি</p>
    </div>
</section>

<!-- কাভারেজ সার্চ বা ইনফো -->
<section style="padding: 60px 0;">
    <div class="container">
        <div style="text-align: center; max-width: 800px; margin: 0 auto 50px;">
            <h2 style="margin-bottom: 15px;">আপনার এলাকায় কি আমাদের সংযোগ আছে?</h2>
            <p>নিচের তালিকাটি দেখুন। আপনার এলাকা তালিকায় না থাকলে আমাদের সাথে যোগাযোগ করুন, আমরা শীঘ্রই আপনার এলাকায় আসার চেষ্টা করছি।</p>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px;">
            <?php foreach($coverage_areas as $city => $areas): ?>
            <div style="background: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); border-top: 4px solid var(--primary-brand);">
                <h3 style="margin-bottom: 20px; color: var(--dark-bg); display: flex; align-items: center;">
                    <i class="fas fa-map-marker-alt" style="margin-right: 10px; color: var(--primary-brand);"></i> <?php echo $city; ?>
                </h3>
                <ul style="list-style: none; padding: 0;">
                    <?php foreach($areas as $area): ?>
                    <li style="padding: 10px 0; border-bottom: 1px solid #eee; display: flex; justify-content: space-between;">
                        <span><?php echo $area; ?></span>
                        <span style="color: var(--secondary-brand); font-size: 0.8rem;"><i class="fas fa-check-circle"></i> উপলব্ধ</span>
                    </li>
                    <?php endforeach; ?>
                </ul>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- নতুন এলাকার জন্য রিকোয়েস্ট সেকশন -->
<section style="background: var(--light-bg); padding: 80px 0;">
    <div class="container">
        <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 50px;">
            <div style="flex: 1; min-width: 300px;">
                <h2 style="font-size: 2rem; margin-bottom: 20px;">আপনার এলাকা তালিকায় নেই?</h2>
                <p style="margin-bottom: 25px;">চিন্তা করবেন না! আমাদের নেটওয়ার্ক দ্রুত সম্প্রসারিত হচ্ছে। আপনার নাম এবং এলাকার নাম আমাদের জানান, আমরা আপনার এলাকায় সংযোগ দেওয়ার ব্যাপারে আপনাকে আপডেট জানাবো।</p>
                <a href="contact.php" class="btn-custom">অনুরোধ জানান</a>
            </div>
            <div style="flex: 1; min-width: 300px; text-align: center;">
                <img src="https://images.unsplash.com/photo-1526628953301-3e589a6a8b74?auto=format&fit=crop&w=600&q=80" alt="Network Map" style="max-width: 100%; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);">
            </div>
        </div>
    </div>
</section>

<?php include('footer.php'); ?>