<?php 
/**
 * about.php - কোম্পানির পরিচিতি পেজ
 * Red Network BD এর আদলে Vision, Mission এবং Management Team সেকশন আপডেট করা হয়েছে।
 * নতুন "We are Connected with" পার্টনার স্লাইডার যুক্ত করা হয়েছে।
 */

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;
    }
}
?>

<style>
    :root {
        --primary-brand: #00aeef; /* Updated Primary Color */
        --secondary-brand: #57a03a; /* Updated Secondary Color */
        --dark-bg: #1a1a1a;
        --light-bg: #f8f9fa;
    }

    /* প্যাকেজ স্লাইডার স্টাইল */
    .package-slider-container {
        overflow: hidden;
        padding: 20px 0; /* প্যাডিং কমানো হয়েছে */
        position: relative;
    }
    
    .package-track {
        display: flex;
        gap: 30px;
        animation: scroll 25s linear infinite;
        width: max-content;
    }

    .package-track:hover {
        animation-play-state: paused;
    }

    .slider-card {
        background: #fff;
        width: 280px;
        padding: 25px;
        border-radius: 15px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        border-top: 4px solid var(--primary-brand);
        text-align: center;
        flex-shrink: 0;
    }

    .slider-card h3 { margin-bottom: 10px; color: var(--dark-bg); }
    .slider-card .price { font-size: 1.8rem; font-weight: bold; color: var(--primary-brand); }
    .slider-card .speed { font-size: 1.2rem; margin: 10px 0; font-weight: 600; }

    /* অর্ডার বাটন হোভার ইফেক্ট */
    .btn-order-slider {
        display: inline-block;
        background: var(--primary-brand);
        color: #fff;
        padding: 8px 25px;
        text-decoration: none;
        border-radius: 5px;
        font-weight: bold;
        transition: 0.3s ease;
    }
    
    .btn-order-slider:hover {
        background: var(--secondary-brand); /* হোভার করলে সেকেন্ডারি কালার */
        transform: scale(1.05);
    }

    @keyframes scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-280px * 3 - 90px)); }
    }

    /* Vision & Mission Styles */
    .vm-card {
        background: #fff;
        padding: 40px;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        transition: 0.3s;
        height: 100%;
        border-left: 5px solid var(--primary-brand);
    }
    .vm-card:hover { transform: translateY(-5px); }
    .vm-icon {
        font-size: 3rem;
        color: var(--primary-brand);
        margin-bottom: 20px;
    }

    /* Team Styles Updated */
    .team-card {
        background: #fff;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(0,0,0,0.07);
        text-align: center;
        transition: 0.3s;
        border: 1px solid #eee;
    }
    .team-card:hover { transform: translateY(-10px); }
    .team-img-wrapper {
        position: relative;
        overflow: hidden;
    }
    .team-img {
        width: 100%;
        height: 280px;
        object-fit: cover;
        transition: 0.5s;
    }
    .team-card:hover .team-img { transform: scale(1.1); }
    
    .team-social-overlay {
        position: absolute;
        bottom: -50px;
        left: 0;
        right: 0;
        background: rgba(0, 174, 239, 0.9);
        padding: 10px;
        transition: 0.3s;
    }
    .team-card:hover .team-social-overlay { bottom: 0; }
    .team-social-overlay a { color: white; margin: 0 10px; font-size: 1.2rem; }

    .team-info { padding: 25px; }
    .team-info h4 { margin: 0; color: var(--dark-bg); font-size: 1.3rem; font-weight: 700; }
    .team-info .designation { color: var(--primary-brand); font-weight: 600; margin: 5px 0 15px; display: block; }
    .team-info .bio { color: #777; font-size: 0.95rem; line-height: 1.6; font-style: italic; }

    /* New: We are Connected with Section Styles */
    .connected-slider {
        padding: 60px 0;
        background: #fff;
        overflow: hidden;
    }
    .connected-scroll-container {
        display: flex;
        overflow-x: auto;
        gap: 40px;
        padding: 20px 10px;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;  /* IE and Edge */
        cursor: grab;
        user-select: none;
        align-items: center;
    }
    .connected-scroll-container::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
    .connected-scroll-container:active {
        cursor: grabbing;
    }
    .partner-logo {
        flex: 0 0 auto;
        width: 150px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        filter: grayscale(100%);
        transition: 0.4s;
        opacity: 0.7;
    }
    .partner-logo:hover {
        filter: grayscale(0%);
        opacity: 1;
        transform: scale(1.1);
    }
    .partner-logo img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
</style>

<!-- ডাইনামিক প্যাকেজ স্লাইডার সেকশন (Full Width & Minimal Padding) -->
<section style="background: #eee; padding: 30px 0; width: 100%; overflow: hidden;">
    <div style="width: 100%; padding: 0 15px;">
        <h2 style="text-align: center; margin-bottom: 25px;">আমাদের জনপ্রিয় <span style="color: var(--primary-brand);">প্যাকেজসমূহ</span></h2>
        
        <div class="package-slider-container">
            <div class="package-track">
                <?php 
                if (!empty($packages)) {
                    // স্লাইডার কন্টিনিউয়াস রাখার জন্য ডেটা ডুপ্লিকেট করা
                    $display_packages = array_merge($packages, $packages, $packages); 
                    foreach($display_packages as $pkg): 
                    ?>
                    <div class="slider-card">
                        <h3><?php echo $pkg['name']; ?></h3>
                        <div class="speed"><?php echo $pkg['speed']; ?></div>
                        <div class="price">৳<?php echo (int)$pkg['price']; ?></div>
                        <p style="font-size: 0.9rem; color: #666; margin: 15px 0;">মাসিক বিল</p>
                        <a href="contact.php" class="btn-order-slider">অর্ডার করুন</a>
                    </div>
                    <?php 
                    endforeach;
                } else {
                    echo "<p style='text-align:center; width: 100%;'>কোনো প্যাকেজ পাওয়া যায়নি।</p>";
                }
                ?>
            </div>
        </div>
    </div>
</section>

<!-- পেজ হেডার -->
<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: 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: 2.5rem; margin-bottom: 20px;">আপনার বিশ্বস্ত <span style="color: var(--primary-brand);">ইন্টারনেট</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-brand);">১০+</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-brand);">৫০০০+</h2>
                        <p>সন্তুষ্ট গ্রাহক</p>
                    </div>
                </div>
            </div>
            <div style="flex: 1; min-width: 300px;">
                <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc51?auto=format&fit=crop&w=800&q=80" alt="Server Room" style="width: 100%; border-radius: 15px; box-shadow: 0 15px 35px rgba(0,0,0,0.1);">
            </div>
        </div>
    </div>
</section>

<!-- ট্রাস্ট ব্যাজ সেকশন -->
<section style="padding: 80px 0; text-align: center; background: var(--light-bg);">
    <div class="container">
        <h2 style="margin-bottom: 50px;">কেন গ্রাহকরা আমাদের <span style="color: var(--primary-brand);">পছন্দ</span> করেন?</h2>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px;">
            <div>
                <i class="fas fa-clock" style="font-size: 2.5rem; color: var(--secondary-brand); margin-bottom: 15px;"></i>
                <h4>৯৯.৯% আপ-টাইম</h4>
            </div>
            <div>
                <i class="fas fa-tools" style="font-size: 2.5rem; color: var(--secondary-brand); margin-bottom: 15px;"></i>
                <h4>দ্রুত টেকনিক্যাল সাপোর্ট</h4>
            </div>
            <div>
                <i class="fas fa-money-bill-wave" style="font-size: 2.5rem; color: var(--secondary-brand); margin-bottom: 15px;"></i>
                <h4>কোনো লুকানো খরচ নেই</h4>
            </div>
            <div>
                <i class="fas fa-rocket" style="font-size: 2.5rem; color: var(--secondary-brand); margin-bottom: 15px;"></i>
                <h4>লো ল্যাটেন্সি গেমিং</h4>
            </div>
        </div>
    </div>
</section>

<!-- Our Vision and Mission Section -->
<section style="background: #fdfdfd; padding: 80px 0;">
    <div class="container">
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;">
            <!-- Mission -->
            <div class="vm-card">
                <div class="vm-icon"><i class="fas fa-bullseye"></i></div>
                <h2 style="font-size: 1.8rem; margin-bottom: 15px;">Our <span style="color: var(--primary-brand);">Mission</span></h2>
                <p style="color: #666; line-height: 1.8;">সাশ্রয়ী মূল্যে দেশের প্রতিটি ঘরে ঘরে উচ্চগতির ফাইবার ইন্টারনেট সংযোগ পৌঁছে দেওয়া এবং ডিজিটাল বিভাজন দূর করা। আমরা চাই প্রতিটি গ্রাহক যেন কোনো বাধা ছাড়াই ডিজিটাল পৃথিবীর সাথে যুক্ত থাকতে পারে।</p>
            </div>
            <!-- Vision -->
            <div class="vm-card">
                <div class="vm-icon"><i class="fas fa-eye"></i></div>
                <h2 style="font-size: 1.8rem; margin-bottom: 15px;">Our <span style="color: var(--primary-brand);">Vision</span></h2>
                <p style="color: #666; line-height: 1.8;">দেশের সেরা এবং সবচেয়ে নির্ভরযোগ্য ইন্টারনেট সেবাদাতা প্রতিষ্ঠান হিসেবে নিজেকে প্রতিষ্ঠিত করা। আমরা এমন একটি নেটওয়ার্ক ব্যবস্থা গড়ে তুলতে চাই যা আগামী দিনের স্মার্ট বাংলাদেশ বিনির্মাণে মূল শক্তি হিসেবে কাজ করবে।</p>
            </div>
        </div>
    </div>
</section>

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

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px;">
            <!-- Member 1 -->
            <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="https://facebook.com/yourprofile" 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>
            <!-- Member 2 -->
            <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="https://facebook.com/yourprofile" 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>
            <!-- Member 3 -->
            <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="https://facebook.com/yourprofile" 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>
            <!-- Member 4 -->
            <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="https://facebook.com/yourprofile" 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>
</section>

<!-- New: We are Connected with Section -->
<section class="connected-slider">
    <div class="container">
        <div style="text-align: center; margin-bottom: 40px;">
            <h2 style="font-size: 2.2rem;">We are <span style="color: var(--primary-brand);">Connected</span> with</h2>
            <div style="width: 60px; height: 3px; background: var(--secondary-brand); margin: 10px auto;"></div>
        </div>

        <div class="connected-scroll-container" id="connected-scroll">
            <!-- Partner 1 -->
            <div class="partner-logo">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Google_logo_%282013-2015%29.svg/2560px-Google_logo_%282013-2015%29.svg.png" alt="Google">
            </div>
            <!-- Partner 2 -->
            <div class="partner-logo">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Facebook_f_logo_%282019%29.svg/2048px-Facebook_f_logo_%282019%29.svg.png" alt="Facebook">
            </div>
            <!-- Partner 3 -->
            <div class="partner-logo">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/2560px-Netflix_2015_logo.svg.png" alt="Netflix">
            </div>
            <!-- Partner 4 -->
            <div class="partner-logo">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2560px-Google_2015_logo.svg.png" alt="YouTube">
            </div>
            <!-- Partner 5 -->
            <div class="partner-logo">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Amazon_logo.svg/2560px-Amazon_logo.svg.png" alt="Amazon">
            </div>
            <!-- Partner 6 -->
            <div class="partner-logo">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/BDIX_Logo.png/1200px-BDIX_Logo.png" alt="BDIX">
            </div>
            <!-- Partner 7 -->
            <div class="partner-logo">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/1667px-Apple_logo_black.svg.png" alt="Apple">
            </div>
            <!-- Partner 8 -->
            <div class="partner-logo">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Microsoft_logo.svg/2048px-Microsoft_logo.svg.png" alt="Microsoft">
            </div>
        </div>
    </div>
</section>

<script>
    // মাউস দিয়ে ড্র্যাগ করার স্ক্রিপ্ট
    const slider = document.getElementById('connected-scroll');
    let isDown = false;
    let startX;
    let scrollLeft;

    slider.addEventListener('mousedown', (e) => {
        isDown = true;
        slider.classList.add('active');
        startX = e.pageX - slider.offsetLeft;
        scrollLeft = slider.scrollLeft;
    });

    slider.addEventListener('mouseleave', () => {
        isDown = false;
        slider.classList.remove('active');
    });

    slider.addEventListener('mouseup', () => {
        isDown = false;
        slider.classList.remove('active');
    });

    slider.addEventListener('mousemove', (e) => {
        if (!isDown) return;
        e.preventDefault();
        const x = e.pageX - slider.offsetLeft;
        const walk = (x - startX) * 2; // স্ক্রল স্পিড
        slider.scrollLeft = scrollLeft - walk;
    });

    // টাচ ডিভাইসের জন্য সাপোর্ট (Mobile Swipe)
    slider.addEventListener('touchstart', (e) => {
        startX = e.touches[0].pageX - slider.offsetLeft;
        scrollLeft = slider.scrollLeft;
    });

    slider.addEventListener('touchmove', (e) => {
        const x = e.touches[0].pageX - slider.offsetLeft;
        const walk = (x - startX) * 2;
        slider.scrollLeft = scrollLeft - walk;
    });
</script>

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