<?php 
/**
 * support.php - কাস্টমার সাপোর্ট এবং হেল্পডেস্ক পেজ
 * ব্র্যান্ড কালার (#00aeef এবং #57a03a) ব্যবহার করা হয়েছে
 */

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://plus.unsplash.com/premium_photo-1661413116114-635b8d67bfcd?auto=format&fit=crop&w=1350&q=80');
            background-size: cover;
            background-position: center;
        }
</style>

<!-- ১. সাপোর্ট হিরো সেকশন -->
<section style="padding: 0px 0px 60px 0px; background: var(--light-bg); position: relative;">
    <div class="reg-hero-banner">
        <div class="hero-content">
        <h1>২৪/৭ কাস্টমার <span style="color: var(--primary); text-decoration: underline;">সাপোর্ট</span></h1>
        <p>আমরা আপনার যেকোনো সমস্যার দ্রুত সমাধানে প্রতিশ্রুতিবদ্
        </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 id="alert" class="ticket-section" style="padding-bottom: 40px; position: relative;">
    <div class="container reveal">
        <div class="support-grid reveal zoom">
            <div class="support-box">
                <i class="fas fa-headset"></i>
                <h3>সরাসরি কথা বলুন</h3>
                <p>যেকোনো জরুরি প্রয়োজনে ফোন করুন আমাদের হটলাইনে।</p>
                <div style="margin-top: 15px;">
                    <span class="phone-number-display">+৮৮০ ১৯০০০০০০০০</span>
                </div>
            </div>
            <div class="support-box">
                <i class="fas fa-envelope-open-text"></i>
                <h3>ইমেইল সাপোর্ট</h3>
                <p>আমাদের ইমেইল করুন, আমরা ২৪ ঘণ্টার মধ্যে উত্তর দেব।</p>
                <h4 style="color: var(--primary-brand); margin-top: 10px;">support@gmail.com</h4>
            </div>
            <div class="support-box">
                <i class="fab fa-whatsapp"></i>
                <h3>হোয়াটসঅ্যাপ সাপোর্ট</h3>
                <p>দ্রুত চ্যাটের মাধ্যমে সমাধান পেতে মেসেজ দিন।</p>
                <a href="#" class="btn-custom" style="margin-top: 10px;">মেসেজ পাঠান</a>
            </div>
        </div>
        
        <div style="display: flex; flex-wrap: wrap; gap: 50px; align-items: center; margin-bottom: 40px;">
            <div class="reveal left" style="flex: 1; min-width: 300px;">
                <h2 style="margin-bottom: 15px; font-size: 2.2em; text-align: center;"> আপনার সমস্যাটি <span style="color:var(--primary);">  জানান</span> </h2>
                <span style="display: block; width: 80px; height: 5px; background: var(--primary); margin: 10px auto;"></span>
                
                <?php if(isset($_GET['status']) && $_GET['status'] == 'success#alert'): ?>
                    <div class="alert alert-success">
                        আপনার টিকিটটি সফলভাবে সাবমিট হয়েছে। আপনি <a href="check_status.php" style="color: #3c763d; font-weight: bold;">এখান থেকে</a> লিস্ট দেখতে পারেন।
                    </div>
                <?php endif; ?>

                <p style="margin-bottom: 30px;">আপনার ইন্টারনেট সংযোগে কোনো সমস্যা হচ্ছে? নিচের ফর্মটি পূরণ করে একটি কমপ্লেন টিকিট ওপেন করুন। আমাদের টেকনিক্যাল টিম দ্রুত আপনার সাথে যোগাযোগ করবে।</p>
                
                <form action="process_ticket.php" method="POST">
                    <div style="margin-bottom: 15px;">
                        <input type="text" name="customer_id" placeholder="আপনার কাস্টমার আইডি" style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px;" required>
                    </div>
                    <div style="margin-bottom: 15px;">
                        <input type="text" name="phone_number" placeholder="আপনার ফোন নম্বর" style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px;" required>
                    </div>
                    <div style="margin-bottom: 15px;">
                        <select name="issue_type" style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px;" required>
                            <option value="">সমস্যার ধরণ নির্বাচন করুন</option>
                            <option value="ইন্টারনেট স্পিড স্লো">ইন্টারনেট স্পিড স্লো</option>
                            <option value="সংযোগ বিচ্ছিন্ন">সংযোগ বিচ্ছিন্ন (No Internet)</option>
                            <option value="বিলিং সংক্রান্ত সমস্যা">বিলিং সংক্রান্ত সমস্যা</option>
                            <option value="অন্যান্য">অন্যান্য</option>
                        </select>
                    </div>
                    <div style="margin-bottom: 15px;">
                        <textarea name="message" placeholder="বিস্তারিত লিখুন..." rows="4" style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px;" required></textarea>
                    </div>
                    <button type="submit" name="submit_ticket" class="btn-custom">টিকিট সাবমিট করুন</button>
                </form>
            </div>
            <div class="reveal right" style="flex: 1; min-width: 300px;">
                <img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?auto=format&fit=crop&w=600&q=80" alt="Technical Support" style="width: 100%; border-radius: 20px; box-shadow: 0 15px 40px 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(--white)"></path>
        </svg>
    </div>
</section>

<section style="padding: 40px 0px; background: var(--white); position: relative;">
<!-- ম্যাপ লোকেশন সেকশন -->
    <div class="container reveal up">
        <div style="text-align: center; margin-bottom: 30px;">
            <h2 style="margin-bottom: 15px; font-size: 2.2em;"> আমাদের  <span style="color:var(--primary);"> অবস্থান</span> </h2>
                <span style="display: block; width: 80px; height: 5px; background: var(--primary); margin: 10px auto;"></span>
            <p>সরাসরি আমাদের অফিসে আসার জন্য নিচের ম্যাপটি অনুসরণ করুন</p>
        </div>
        <div class="map-container">
            <iframe 
                width="100%" 
                height="100%" 
                frameborder="0" 
                scrolling="no" 
                marginheight="0" 
                marginwidth="0" 
                src="https://maps.google.com/maps?q=Ramdia%20Online%20Divitional%20ISP@(22.809755743048516,89.5575150822777)&z=15&output=embed">
            </iframe>
        </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>

<!-- ৪. সাধারণ জিজ্ঞাসা (FAQ) -->
<section style="padding: 40px 0px; text-align: center; background: var(--light-bg); position: relative;">
    <div class="container reveal">
        <div id="faq">
    <?php include('faq_section.php'); 
?>
        </div>
    </div>
</section>

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