<?php 
/**
 * about.php - কোম্পানির পরিচিতি পেজ
 * অভিজ্ঞতা ও সন্তুষ্ট গ্রাহক সংখ্যায় কাউন্ট-আপ ইফেক্ট যুক্ত করা হয়েছে।
 */

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

// ডাটাবেস থেকে প্যাকেজগুলো আনা
$pkg_query = "SELECT * FROM packages";
$pkg_result = mysqli_query($conn, $pkg_query);
$packages = [];
if ($pkg_result && mysqli_num_rows($pkg_result) > 0) {
    while($row = mysqli_fetch_assoc($pkg_result)) {
        $packages[] = $row;
    }
}
?>
<script src="assets/js/reveal.js"></script>
<link rel="stylesheet" href="assets/css/style.css">
<!-- ডাইনামিক প্যাকেজ স্লাইডার সেকশন -->
<section style="padding: 40px 0; background: var(--light-bg); position: relative;">
        <div class="container reveal zoom">
        <h2 style="text-align: center; margin-bottom: 0px; font-weight: 800; font-size: 2.2rem;">
            আমাদের জনপ্রিয় <span style="color: var(--primary);">প্যাকেজসমূহ</span>
        </h2>
        
        <div class="package-slider-wrapper">
            <button class="intp-slider-nav prev-pkg" aria-label="Previous"><i class="fas fa-chevron-left"></i></button>
            <button class="intp-slider-nav next-pkg" aria-label="Next"><i class="fas fa-chevron-right"></i></button>
            
            <div class="package-overflow" id="pkgSlider">
                <div class="package-track" id="pkgTrack">
                    <?php 
                    if (!empty($packages)) {
                        foreach($packages as $pkg): 
                        ?>
                        <div class="intp-slider-card" style="position: relative;">
                            <?php if(isset($pkg['featured']) && $pkg['featured'] == 1): ?>
                                <div style="position: absolute; top: 10px; right: 20px; background: var(--popular-gold); color: #fff; padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; z-index: 10;">POPULAR</div>
                            <?php endif; ?>
                            <div>
                                <h3><?php echo htmlspecialchars($pkg['name']); ?></h3>
                                <div class="speed"><?php echo htmlspecialchars($pkg['speed']); ?></div>
                                <div class="price">৳<?php echo (int)$pkg['price']; ?> <span>/ মাস</span></div>
                                
                                <?php if(isset($pkg['vat_status']) && $pkg['vat_status'] == 1): ?>
                                    <div style="font-size: 0.85rem; color: #666; margin-top: -10px; margin-bottom: 10px;">
                                        + <?php echo htmlspecialchars($pkg['vat_percent']); ?>% VAT 
                                        <?php 
                                            if($pkg['vat_type'] == 'include') echo '(Inc.)';
                                            elseif($pkg['vat_type'] == 'exclude') echo '(Exc.)';
                                        ?>
                                    </div>
                                <?php endif; ?>
                                
                                <ul class="intp-feature-list">
                                    <?php 
                                        if(isset($pkg['features']) && !empty($pkg['features'])){
                                            $features_arr = explode(',', $pkg['features']);
                                            foreach($features_arr as $feature){
                                                echo '<li><i class="fas fa-check-circle"></i> ' . htmlspecialchars(trim($feature)) . '</li>';
                                            }
                                        } else {
                                            echo '<li><i class="fas fa-check-circle"></i> আনলিমিটেড ব্যান্ডউইথ</li>';
                                            echo '<li><i class="fas fa-check-circle"></i> ২৪/৭ গ্রাহক সেবা</li>';
                                        }
                                    ?>
                                </ul>
                            </div>
                            <a href="registration.php?pkg=<?php echo $pkg['id']; ?>" class="btn-order-slider">অর্ডার করুন</a>
                        </div>
                        <?php 
                        endforeach;
                    } else {
                        echo "<p style='text-align:center; width: 100%;'>কোনো প্যাকেজ পাওয়া যায়নি।</p>";
                    }
                    ?>
                </div>
            </div>
        </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(--white)"></path>
        </svg>
    </div>
</section>

<section style="padding: 40px 0; background: var(--white); position: relative;">
    <div class="container reveal">
<!-- পেজ হেডার -->
        <div class="reveal zoom">
        <h2 style="text-align: center; margin-bottom: 0px; font-weight: 800; font-size: 2.2rem;">
            আমাদের  <span style="color: var(--primary);">সম্পর্কে</span> জানুন</h2>
                <span style="display: block; width: 80px; height: 5px; background: var(--primary-color); margin: 10px auto;"></span>
        <p style="text-align: center;">আমরা বিশ্বাস করি উচ্চগতি এবং নিরবচ্ছিন্ন ইন্টারনেট সংযোগ সবার অধিকার</p>
        </div>
        <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 50px; margin-bottom: 40px; margin-top: 30px">
            <div class="reveal left" style="flex: 1; min-width: 300px;">
                <h2 style="font-size: 2rem; margin-bottom: 20px; margin-top: 20px;">আপনার বিশ্বস্ত <span style="color: var(--primary);">ইন্টারনেট</span> পার্টনার</h2>
                <p style="margin-bottom: 20px; font-size: 1.1rem; color: #555;">
                    দীর্ঘ এক দশকেরও বেশি সময় ধরে আমরা আমাদের গ্রাহকদের নিরবচ্ছিন্ন ফাইবার অপটিক ইন্টারনেট সেবা দিয়ে আসছি। আমাদের লক্ষ্য হলো আধুনিক প্রযুক্তির মাধ্যমে মানুষের জীবনকে আরও সহজ এবং গতিশীল করা।
                </p>
                <div style="display: flex; gap: 20px; margin-top: 30px;">
                    <div style="text-align: center; background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); flex: 1;">
                        <h2 style="color: var(--primary);"><span class="counter" data-target="10">0</span>+</h2>
                        <p>বছরের অভিজ্ঞতা</p>
                    </div>
                    <div style="text-align: center; background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); flex: 1;">
                        <h2 style="color: var(--primary);"><span class="counter" data-target="5000">0</span>+</h2>
                        <p>সন্তুষ্ট গ্রাহক</p>
                    </div>
                </div>
            </div>
            <div class="reveal right" style="flex: 1; min-width: 300px;">
                <img src="https://plus.unsplash.com/premium_photo-1661715955019-89f39802cd4d?w=500" alt="Server Room" style="width: 100%; border-radius: 15px; box-shadow: 0 15px 35px rgba(0,0,0,0.1);">
            </div>
        </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 0; background: var(--light-bg); position: relative;">
    <div class="container reveal">
        <!-- ট্রাস্ট ব্যাজ সেকশন -->
        <div class="reveal zoom">
        <h2 style="text-align: center; margin-bottom: 20px; font-weight: 800; font-size: 2.2rem;">
            কেন গ্রাহকরা আমাদের <span style="color: var(--primary);">পছন্দ</span> করেন?</h2>
                <span style="display: block; width: 80px; height: 5px; background: var(--primary-color); margin: 10px auto;"></span>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; justify-content: center; text-align: center;">
            <div>
                <i class="fas fa-clock" style="font-size: 2.5rem; color: var(--secondary); margin-bottom: 15px;"></i>
                <h4>৯৯.৯% আপ-টাইম</h4>
            </div>
            <div>
                <i class="fas fa-tools" style="font-size: 2.5rem; color: var(--secondary); margin-bottom: 15px;"></i>
                <h4>দ্রুত টেকনিক্যাল সাপোর্ট</h4>
            </div>
            <div>
                <i class="fas fa-money-bill-wave" style="font-size: 2.5rem; color: var(--secondary); margin-bottom: 15px;"></i>
                <h4>কোনো লুকানো খরচ নেই</h4>
            </div>
            <div>
                <i class="fas fa-rocket" style="font-size: 2.5rem; color: var(--secondary); margin-bottom: 15px;"></i>
                <h4>লো ল্যাটেন্সি গেমিং</h4>
            </div>
        </div>
        </div>
        <!-- Vision and Mission Section -->
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 40px; margin-bottom: 40px;">
            <div class="vm-card reveal left">
                <div class="vm-icon"><i class="fas fa-bullseye"></i></div>
                <h2 style="font-size: 1.8rem; margin-bottom: 5px;">Our <span style="color: var(--primary);">Mission</span></h2>
                <p style="color: #666; line-height: 1.8;">সাশ্রয়ী মূল্যে দেশের প্রতিটি ঘরে ঘরে উচ্চগতির ফাইবার ইন্টারনেট সংযোগ পৌঁছে দেওয়া এবং ডিজিটাল বিভাজন দূর করা। আমরা চাই প্রতিটি গ্রাহক যেন কোনো বাধা ছাড়াই ডিজিটাল পৃথিবীর সাথে যুক্ত থাকতে পারে।</p>
            </div>
            <div class="vm-card reveal right">
                <div class="vm-icon"><i class="fas fa-eye"></i></div>
                <h2 style="font-size: 1.8rem; margin-bottom: 5px;">Our <span style="color: var(--primary);">Vision</span></h2>
                <p style="color: #666; line-height: 1.8;">দেশের সেরা এবং সবচেয়ে নির্ভরযোগ্য ইন্টারনেট সেবাদাতা প্রতিষ্ঠান হিসেবে নিজেকে প্রতিষ্ঠিত করা। আমরা এমন একটি নেটওয়ার্ক ব্যবস্থা গড়ে তুলতে চাই যা আগামী দিনের স্মার্ট বাংলাদেশ বিনির্মাণে মূল শক্তি হিসেবে কাজ করবে।</p>
            </div>
        </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(--white)"></path>
        </svg>
    </div>
</section>

<section style="padding: 40px 0; background: var(--white); position: relative;">
        <!-- Management Team Section -->
    <div class="container reveal up">
        <div style="text-align: center; margin-bottom: 40px;">
            <h2 style="font-size: 2.5rem;">Management <span style="color: var(--primary);">Team</span></h2>
                <span style="display: block; width: 80px; height: 5px; background: var(--primary-color); margin: 10px auto;"></span>
            <p style="color: #777;">আমাদের নেতৃত্বের পেছনে যারা কাজ করছেন তাদের সম্পর্কে জানুন</p>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom:40px;">
            <div class="team-card">
                <div class="team-img-wrapper">
                    <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=400&q=80" alt="MD" class="team-img">
                    <div class="team-social-overlay">
                        <a href="#" target="_blank"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
                <div class="team-info">
                    <h4>মোঃ আব্দুর রহমান</h4>
                    <span class="designation">Managing Director</span>
                    <p class="bio">"আমাদের মূল লক্ষ্য গ্রাহকদের সন্তুষ্টি এবং উন্নত প্রযুক্তি সরবরাহ করা।"</p>
                </div>
            </div>
            <div class="team-card">
                <div class="team-img-wrapper">
                    <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=400&q=80" alt="TD" class="team-img">
                    <div class="team-social-overlay">
                        <a href="#" target="_blank"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
                <div class="team-info">
                    <h4>জান্নাতুল ফেরদৌস</h4>
                    <span class="designation">Technical Director</span>
                    <p class="bio">"নিরবচ্ছিন্ন নেটওয়ার্ক এবং আধুনিক সাপোর্ট সিস্টেম নিশ্চিত করাই আমার স্বপ্ন।"</p>
                </div>
            </div>
            <div class="team-card">
                <div class="team-img-wrapper">
                    <img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?auto=format&fit=crop&w=400&q=80" alt="OM" class="team-img">
                    <div class="team-social-overlay">
                        <a href="#" target="_blank"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
                <div class="team-info">
                    <h4>রাকিব হাসান</h4>
                    <span class="designation">Operations Manager</span>
                    <p class="bio">"অপারেশনাল দক্ষতা এবং গ্রাহক সেবার মান উন্নয়নে আমরা সর্বদা সচেষ্ট।"</p>
                </div>
            </div>
            <div class="team-card">
                <div class="team-img-wrapper">
                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=400&q=80" alt="CSL" class="team-img">
                    <div class="team-social-overlay">
                        <a href="#" target="_blank"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
                <div class="team-info">
                    <h4>তানভীর আহমেদ</h4>
                    <span class="designation">Customer Support Lead</span>
                    <p class="bio">"প্রতিটি কাস্টমারের সমস্যা দ্রুত সমাধান করাই আমাদের অগ্রাধিকার।"</p>
                </div>
            </div>
        </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: 0px 0; background: var(--light-bg); position: relative;">
    <!-- We are Connected with Section -->
<div class="container reveal zoom">
    <div id="services">
        <?php include('connected_partners.php'); ?>
    </div>
</div>
</section>


<script>
    
    // Counter Animation Logic
    const counters = document.querySelectorAll('.counter');
    const speedCount = 200; // Counter animation duration factor

    const startCounters = () => {
        counters.forEach(counter => {
            const updateCount = () => {
                const target = +counter.getAttribute('data-target');
                const count = +counter.innerText;
                const inc = target / speedCount;

                if (count < target) {
                    counter.innerText = Math.ceil(count + inc);
                    setTimeout(updateCount, 15);
                } else {
                    counter.innerText = target;
                }
            };
            updateCount();
        });
    };

    // Intersection Observer to trigger counter when visible
    const observerOptions = {
        threshold: 0.5
    };

    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if(entry.isIntersecting) {
                startCounters();
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);

    const counterSection = document.querySelector('.counter')?.parentElement?.parentElement?.parentElement;
    if(counterSection) {
        observer.observe(counterSection);
    } else {
        // Fallback for simple page load
        window.addEventListener('load', startCounters);
    }

    // Existing Package Slider Logic
    const track = document.getElementById('pkgTrack');
    const slider = document.getElementById('pkgSlider');
    const cards = document.querySelectorAll('.intp-slider-card');
    const nextBtn = document.querySelector('.next-pkg');
    const prevBtn = document.querySelector('.prev-pkg');

    let isDragging = false;
    let startPos = 0;
    let currentTranslate = 0;
    let prevTranslate = 0;
    let currentIndex = 0;
    let animationID = 0;
    let autoPlay;

    function getItemsInView() {
        if (window.innerWidth > 1200) return 4;
        if (window.innerWidth > 992) return 2;
        if (window.innerWidth > 600) return 2;
        return 1;
    }

    function setSliderPosition() {
        if(track) track.style.transform = `translateX(${currentTranslate}px)`;
    }

    function moveSlider() {
        if (!track || cards.length === 0) return;
        const itemWidth = cards[0].offsetWidth + 25; // width + gap
        const inView = getItemsInView();
        
        if (currentIndex > cards.length - inView) currentIndex = 0;
        if (currentIndex < 0) currentIndex = cards.length - inView;

        currentTranslate = currentIndex * -itemWidth;
        prevTranslate = currentTranslate;
        setSliderPosition();
    }

    function startAutoPlay() {
        stopAutoPlay();
        autoPlay = setInterval(() => {
            currentIndex++;
            moveSlider();
        }, 4500);
    }

    function stopAutoPlay() {
        clearInterval(autoPlay);
    }

    if(nextBtn) {
        nextBtn.addEventListener('click', () => {
            stopAutoPlay();
            currentIndex++;
            moveSlider();
            startAutoPlay();
        });
    }

    if(prevBtn) {
        prevBtn.addEventListener('click', () => {
            stopAutoPlay();
            currentIndex--;
            moveSlider();
            startAutoPlay();
        });
    }

    if(slider) {
        slider.addEventListener('mousedown', dragStart);
        slider.addEventListener('touchstart', dragStart, {passive: true});
        slider.addEventListener('mouseup', dragEnd);
        slider.addEventListener('touchend', dragEnd);
        slider.addEventListener('mousemove', dragAction);
        slider.addEventListener('touchmove', dragAction, {passive: true});
        slider.addEventListener('mouseleave', dragEnd);
        slider.addEventListener('mouseenter', stopAutoPlay);
        slider.addEventListener('mouseleave', startAutoPlay);
    }

    function dragStart(e) {
        stopAutoPlay();
        isDragging = true;
        startPos = getPositionX(e);
        track.style.transition = 'none';
        animationID = requestAnimationFrame(animation);
    }

    function dragEnd() {
        if (!isDragging) return;
        isDragging = false;
        cancelAnimationFrame(animationID);
        track.style.transition = 'transform 0.8s cubic-bezier(0.25, 1, 0.5, 1)';
        
        const movedBy = currentTranslate - prevTranslate;
        
        if (movedBy < -100) currentIndex++;
        if (movedBy > 100) currentIndex--;

        moveSlider();
        startAutoPlay();
    }

    function dragAction(e) {
        if (isDragging) {
            const currentPosition = getPositionX(e);
            currentTranslate = prevTranslate + currentPosition - startPos;
        }
    }

    function getPositionX(e) {
        return e.type.includes('mouse') ? e.pageX : e.touches[0].clientX;
    }

    function animation() {
        setSliderPosition();
        if (isDragging) requestAnimationFrame(animation);
    }

    window.addEventListener('resize', () => {
        moveSlider();
    });

    window.addEventListener('load', () => {
        moveSlider();
        startAutoPlay();
    });
</script>

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