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

<section class="features-section">
    <div class="section-header reveal zoom">
        <h2>সাধারণ <span style="color:var(--primary-color, #007bff);">জিজ্ঞাসা</span> (FAQ)</h2>
        <span style="display: block; width: 80px; height: 5px; background: var(--primary-color, #007bff); margin: 15px auto;"></span>
        <p>আপনার প্রয়োজনীয় তথ্যের জন্য নিচের প্রশ্নগুলো দেখে নিতে পারেন।</p>
    </div>

    <div class="faq-container">
        <!-- প্রথম কলামের জন্য প্রশ্নসমূহ -->
        <div class="faq-column reveal left">
            <div class="faq-item">
                <div class="faq-question">ইন্টারনেট না থাকলে আমি প্রথমে কি করব? <i class="fas fa-plus"></i></div>
                <div class="faq-answer">প্রথমে আপনার রাউটারটি ৫ মিনিটের জন্য বন্ধ করে আবার চালু করুন। যদি কাজ না হয়, তবে আপনার ল্যান (LAN) কেবলটি চেক করুন এবং আমাদের হেল্পডেস্কে কল দিন।</div>
            </div>

            <div class="faq-item" style="margin-top: 20px;">
                <div class="faq-question">আমি কিভাবে বিল পরিশোধ করতে পারি? <i class="fas fa-plus"></i></div>
                <div class="faq-answer">আপনি বিকাশ, নগদ, রকেট অথবা আমাদের কাস্টমার পোর্টালে লগইন করে সরাসরি কার্ডের মাধ্যমে বিল পরিশোধ করতে পারেন।</div>
            </div>

            <div class="faq-item" style="margin-top: 20px;">
                <div class="faq-question">অনলাইন গেমিংয়ের জন্য আপনাদের পিং (Ping) কেমন? <i class="fas fa-plus"></i></div>
                <div class="faq-answer">আমরা গেমারদের জন্য লো-ল্যাটেন্সি নিশ্চিত করি। আমাদের অপ্টিমাইজড গেমিং রুটিংয়ের মাধ্যমে আপনি জনপ্রিয় গেমগুলোতে অত্যন্ত কম পিং পাবেন।</div>
            </div>

            <div class="faq-item" style="margin-top: 20px;">
                <div class="faq-question">নতুন সংযোগ নিতে কতক্ষণ সময় লাগে? <i class="fas fa-plus"></i></div>
                <div class="faq-answer">সাধারণত আবেদনের ২৪ ঘণ্টার মধ্যেই আমরা সংযোগ প্রদান সম্পন্ন করি। তবে এলাকা ভেদে কিছুটা সময় কম-বেশি হতে পারে।</div>
            </div>
        </div>

        <!-- দ্বিতীয় কলামের জন্য প্রশ্নসমূহ -->
        <div class="faq-column reveal right">
            <div class="faq-item">
                <div class="faq-question">প্যাকেজ পরিবর্তন করতে চাইলে কি করতে হবে? <i class="fas fa-plus"></i></div>
                <div class="faq-answer">প্যাকেজ পরিবর্তনের জন্য আপনার বর্তমান বিলিং সাইকেল শেষ হওয়ার অন্তত ৩ দিন আগে আমাদের কল করুন অথবা কাস্টমার পোর্টাল থেকে রিকোয়েস্ট পাঠান।</div>
            </div>

            <div class="faq-item" style="margin-top: 20px;">
                <div class="faq-question">আপনাদের অফিস কি ছুটির দিনে খোলা থাকে? <i class="fas fa-plus"></i></div>
                <div class="faq-answer">হ্যাঁ, আমাদের টেকনিক্যাল সাপোর্ট টিম সপ্তাহে ৭ দিন ২৪ ঘণ্টাই আপনাদের সেবায় নিয়োজিত থাকে। তবে ফিজিক্যাল অফিস শুক্রবার বন্ধ থাকতে পারে।</div>
            </div>

            <div class="faq-item" style="margin-top: 20px;">
                <div class="faq-question">আপনাদের কি বিডিআইএক্স (BDIX) সুবিধা আছে? <i class="fas fa-plus"></i></div>
                <div class="faq-answer">হ্যাঁ, আমাদের সকল প্যাকেজে হাই-স্পিড BDIX কানেক্টিভিটি রয়েছে, যার ফলে আপনি লোকাল সার্ভার থেকে সুপারফাস্ট স্পিডে ডাউনলোড এবং বাফারিং মুক্ত স্ট্রিমিং করতে পারবেন।</div>
            </div>

            <div class="faq-item" style="margin-top: 20px;">
                <div class="faq-question">আপনাদের কি কোনো রেফারেল অফার আছে? <i class="fas fa-plus"></i></div>
                <div class="faq-answer">জি অবশ্যই! আপনি যদি নতুন কোনো গ্রাহককে রেফার করেন, তবে আপনাদের দুজনের জন্যই আকর্ষণীয় ডিসকাউন্ট বা বোনাস ইন্টারনেট সুবিধা রয়েছে।</div>
            </div>
        </div>
    </div>
</section>

<script>
    document.querySelectorAll('.faq-question').forEach(item => {
        item.addEventListener('click', () => {
            const answer = item.nextElementSibling;
            const icon = item.querySelector('i');
            
            // Toggle answer
            if (answer.style.display === 'block') {
                answer.style.display = 'none';
                icon.classList.replace('fa-minus', 'fa-plus');
                icon.style.transform = 'rotate(0deg)';
            } else {
                answer.style.display = 'block';
                icon.classList.replace('fa-plus', 'fa-minus');
                icon.style.transform = 'rotate(180deg)';
            }
        });
    });
</script>