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

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

// কাভারেজ এরিয়া ডেটা
$coverage_areas = [
    "ঢাকা" => ["মিরপুর", "উত্তরা", "বনানী", "গুলশান", "ধানমণ্ডি", "মোহাম্মদপুর"],
    "চট্টগ্রাম" => ["হালিশহর", "খুলশী", "পতেঙ্গা", "পাঁচলাইশ"],
    "সিলেট" => ["জিন্দাবাজার", "উপশহর", "শিবগঞ্জ"],
    "খুলনা" => ["খালিশপুর", "দৌলতপুর"]
];
?>
<script src="assets/js/reveal.js"></script>
<link rel="stylesheet" href="assets/css/style.css">
<style>
    /* ব্যানার সেকশন ডিজাইন */
    .reg-hero-banner {
        background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
                    url('https://plus.unsplash.com/premium_photo-1764687617519-1d7d6d210248?auto=format&fit=crop&w=1350&q=80');
        background-size: cover;
        background-position: center;
    }
</style>

<!-- পেজ হেডার -->
<section style="padding: 0px 0px 40px 0px; background: var(--white); position: relative;">
    <div class="reg-hero-banner">
        <div class="hero-content">
        <h1>আমাদের নেটওয়ার্ক <span style="color: var(--primary);">কাভারেজ</span> এরিয়া</h1>
        <p>আমরা প্রতিনিয়ত আমাদের সেবার পরিধি বাড়িয়ে চলেছি</p>
        </div>
    <!-- Top Curve Divider -->
    <div class="divider-bottom">
        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
            <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5,73.84-4.36,147.54,16.88,218.2,35.26,69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113,2,1200,34.72V0Z" fill="var(--white)"></path>
        </svg>
    </div>
</section>

<section style="padding: 40px 0px; background: var(--white); position: relative;">
        <!-- কাভারেজ সার্চ বা ইনফো -->
    <div class="container reveal up">
        <div style="text-align: center; max-width: 800px; margin: 0 auto 50px;">
            <h2 style="margin-bottom: 15px; font-size: 2.2em;">আপনার এলাকায় কি আমাদের<span style="color:var(--primary-color);"> সংযোগ</span> আছে?</h2>
                <span style="display: block; width: 80px; height: 5px; background: var(--primary-color); margin: 10px auto;"></span>
            <p>নিচের তালিকাটি দেখুন। আপনার এলাকা তালিকায় না থাকলে আমাদের সাথে যোগাযোগ করুন, আমরা শীঘ্রই আপনার এলাকায় আসার চেষ্টা করছি।</p>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-bottom: 40px;">
            <?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);">
                <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);"></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); font-size: 0.8rem;"><i class="fas fa-check-circle"></i> উপলব্ধ</span>
                    </li>
                    <?php endforeach; ?>
                </ul>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
    <!-- Top Curve Divider -->
    <div class="divider-bottom">
        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
            <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5,73.84-4.36,147.54,16.88,218.2,35.26,69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113,2,1200,34.72V0Z" fill="var(--light-bg)"></path>
        </svg>
    </div>
</section>

<!-- নতুন এলাকার জন্য রিকোয়েস্ট সেকশন -->
<section style="padding: 40px 0px; background: var(--light-bg); position: relative;">
    <div class="container">
        <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 50px;">
            <div class="reveal left" style="flex: 1; min-width: 300px;">
            <h2 style="margin-bottom: 15px; font-size: 2.2em;">আপনার এলাকা  <span style="color:var(--primary-color);"> তালিকায়</span> নেই?</h2>
                <span style="display: block; width: 80px; height: 5px; background: var(--primary-color); margin: 10px auto;"></span>
                <p style="margin-bottom: 25px;">চিন্তা করবেন না! আমাদের নেটওয়ার্ক দ্রুত সম্প্রসারিত হচ্ছে। আপনার নাম এবং এলাকার নাম আমাদের জানান, আমরা আপনার এলাকায় সংযোগ দেওয়ার ব্যাপারে আপনাকে আপডেট জানাবো।</p>
                <a href="contact.php" class="btn-custom">অনুরোধ জানান</a>
            </div>
            <div class="reveal right" 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'); ?>