<?php 
/**
 * packages.php - ইন্টারনেট প্যাকেজ প্রদর্শনের পেজ
 * packages_list.php কম্পোনেন্ট ব্যবহার করে কোড অপ্টিমাইজ করা হয়েছে।
 */

include('db_config.php');
include('header.php'); 
?>
<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://images.unsplash.com/photo-1517181875630-f72350452109?auto=format&fit=crop&w=1350&q=80');
        background-size: cover;
        background-position: center;
    }
</style>

<!-- পেজ হেডার বা ব্যানার -->
<section style="padding: 0px 0px 40px 0px; background: var(--light-bg); position: relative;">
    <div class="reg-hero-banner">
        <div class="hero-content">
            <h1>আমাদের সকল প্যাকেজ</h1>
            <p>আপনার প্রয়োজন অনুযায়ী সেরা গতি বেছে নিন</p>
        </div>
    </div>
    <!-- Bottom 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: 60px 0px; background: var(--light-bg); position: relative;">
    <div class="container reveal up">
        <?php 
        /**
         * packages_list.php কল করা হচ্ছে।
         * এখানে $limit সেট করা হয়নি, তাই ডাটাবেসের সব প্যাকেজ দেখাবে।
         */
        include('packages_list.php'); 
        ?>
    </div>
    <!-- Bottom 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>

<!-- FAQ সেকশন -->
<section style="padding: 80px 0px; text-align: center; background: var(--white); position: relative;">
    <div class="container reveal">
        <div id="faq">
            <?php include('faq_section.php'); ?>
        </div>
    </div>
    <!-- Bottom 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: 80px 0px; text-align: center; background: var(--light-bg); position: relative;">
    <div class="container reveal zoom">
        <h3 style="font-size: 1.8rem; margin-bottom: 15px;">সঠিক প্যাকেজ নির্বাচনে সাহায্য প্রয়োজন?</h3>
        <p style="font-size: 1.1rem; color: #555;">আমাদের হটলাইনে কল করুন: <a style="text-decoration: none; color: var(--primary-color);" href="tel:+০১৯XXXXXXXX"><strong>০১৯XXXXXXXX</strong></a></p>
        <a href="contact.php" class="btn" style="display: inline-block; margin-top: 25px; background: #57a03a; color: white; padding: 12px 35px; border-radius: 5px; text-decoration: none; font-weight: bold; transition: 0.3s; box-shadow: 0 4px 10px rgba(87, 160, 58, 0.2);">যোগাযোগ করুন</a>
    </div>
</section>


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