<?php 
/**
 * index.php - হোম পেজ (ক্লিন স্ট্রাকচার ও এনিমেশন যুক্ত)
 */

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

<script src="assets/js/reveal.js"></script>
<link rel="stylesheet" href="assets/css/style.css">

<!-- ১. স্লাইডার সেকশন -->

<section style="padding: 0px -10px 80px 0; margin-top: 5px; position: relative;">
<!-- Services Section -->
    <div class="test-reveal">
            <?php include('slider_display.php'); ?>
    </div>

    <!-- Bottom Wave 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>
<!-- ২. কেন আমাদের বেছে নেবেন? (Features Grid) -->
<section style="padding: 60px 0; background: var(--white); position: relative;">
    <div class="container">
        <div style="display: flex; padding-bottom: 50px; flex-wrap: wrap; gap: 50px; align-items: center;">
            <div class="reveal left" style="flex: 1; min-width: 300px;">
                <h2 style="font-size: 2.5rem; color: #333; margin-bottom: 20px; line-height: 1.2;">NetPro নেটওয়ার্ক লিমিটেড-এ আপনাকে <span style="color:var(--primary-color);">স্বাগতম</span></h2>
                <p style="color: #666; font-size: 1.1rem; margin-bottom: 25px; text-align: justify;">
                    আমরা আপনাকে দিচ্ছি দ্রুতগতির ও নির্ভরযোগ্য ইন্টারনেট সেবা। আধুনিক ফাইবার অপটিক প্রযুক্তির মাধ্যমে প্রতিটি ঘরে ও ব্যবসায়িক প্রতিষ্ঠানে নিরবচ্ছিন্ন সংযোগ পৌঁছে দেওয়া আমাদের লক্ষ্য।
                </p>
                <div style="margin-top: 35px;">
                    <a href="about.php" class="btn-custom">আরও জানুন</a>
                </div>
            </div>
            <div class="reveal right about-img-wrapper" style="flex: 1; min-width: 300px; position: relative;">
                <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=800&q=80" alt="About Us" style="width: 100%; border-radius: 20px; box-shadow: 20px 20px 0px #e2e8f0;">
            </div>
        </div>
    </div><!-- Top Curve Divider -->
    <div class="divider-top">
        <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>
    <!-- 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>

<!-- Welcome Section -->
<section style="padding: 10px 0; background: var(--light-bg); position: relative;">
    <div class="container reveal up">
        <div id="features-grid">
            <?php include('features_section.php'); ?>
        </div>
    </div>
</section>

<!-- What We Do Section with Shape Divider -->
<section style="padding: 80px 0; background: var(--white); position: relative;">
    <!-- Top Curve Divider -->
    <div id="services" class="divider-top">
        <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>

<!-- Services Section -->
    <div class="container reveal up">
            <?php include('services_section.php'); ?>
    </div>

    <!-- Bottom Wave Divider -->
    <div id="packages" 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>

<!-- Packages Section -->
<section style="padding: 10px 0; background: var(--light-bg); position: relative;">
    <div class="container reveal up">
            <?php include('packages_list.php'); ?>
    </div>

    <!-- Bottom Wave Divider -->
    <div id="packages" 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>

<!-- Packages Section -->
<section style="padding: 10px 0; background: var(--white); position: relative;">
    <div class="container reveal up">
            <?php include('speed_test.php'); ?>
    </div>
    <!-- Divider For Testimonial Top -->
    <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>

<!-- Customer Testimonials Section -->
<section class="testi-section" style="padding: 40px 0; background: var(--light-bg); position: relative;">
    <div class="container reveal zoom">
        <div id="testimonials">
            <?php include('testimonials_section.php'); ?>
        </div>
    </div>
    <!-- Divider For Testimonial Top -->
    <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 -->
<section style="padding: 40px 0; background: var(--white); position: relative;">
    <div class="container">
        <div id="faq">
            <?php include('faq_section.php'); ?>
        </div>
    </div>
    <!-- Divider For FAQ Bottom -->
    <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>

<!-- Connected Section -->
<section style="padding: 40px 0; background: var(--light-bg); position: relative;">
    <div class="container reveal zoom">
        <div id="connected_partners">
            <?php include('connected_partners.php'); ?>
        </div>
    </div>
</section>

<script>
    
    // Auto-trigger filter based on URL hash
window.addEventListener('DOMContentLoaded', (event) => {
    const hash = window.location.hash.replace('#', '').toLowerCase();
    if (hash === 'home' || hash === 'corporate') {
        filterPackages(hash, null);
        
        // Optional: Scroll to packages section
        const section = document.querySelector('.packages-section');
        if(section) section.scrollIntoView({ behavior: 'smooth' });
    }
});
</script>

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