<?php 
/**
 * contact.php - কন্টাক্ট ইউএস পেজ
 * সোশ্যাল কানেকশন সেকশন রিমুভ করা হয়েছে
 */

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 40px 0px; background: var(--light-bg); position: relative;">
    <div class="reg-hero-banner">
        <div class="hero-content">
            <h1>আমাদের সাথে <span style="color: var(--primary-color);">যোগাযোগ</span> করুন</h1>
            <p>আমরা সব সময় আপনার সহায়তায় নিয়োজিত। যেকোনো প্রয়োজনে আমাদের মেসেজ দিন অথবা অফিসে ভিজিট করুন।</p>
        </div>
    </div>
    <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 0px; background: var(--light-bg); position: relative;">
    <div class="container reveal up">
        <div class="ctc-section-header" style="margin-bottom: 25px;">
            <h2 style="font-size: 2rem;">আমাদের <span class="text-red">অবস্থান</span> ম্যাপে দেখুন</h2>
        </div>
        <div class="map-container">
            <iframe 
                src="https://maps.google.com/maps?q=Ramdia%20Online%20Divitional%20ISP@(22.809755743048516,89.5575150822777)&z=15&output=embed" 
                width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy">
            </iframe>
        </div>
    </div>
    <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-bottom: 40px; background: var(--white); position: relative;">
    <div class="container reveal">
        <div class="ctc-section-header reveal zoom">
            <h2>সরাসরি <span class="text-red">কথা বলুন</span></h2>
            <p>আমাদের সেবা সম্পর্কে যেকোনো জিজ্ঞাসায় সরাসরি আমাদের অফিসে চলে আসুন অথবা নিচের ফর্মটি পূরণ করে মেসেজ পাঠান।</p>
        </div>

        <div class="contact-container">
            <!-- বাম পাশের ইনফো সেকশন -->
            <div class="contact-info reveal left">
                <h2>তথ্য কেন্দ্র</h2>
                <p>আমাদের সেবা সম্পর্কে জানতে বা যেকোনো সমস্যায় যোগাযোগ করুন।</p>
                <br>
                
                <div class="info-item">
                    <i class="fas fa-map-marker-alt"></i>
                    <div>
                        <h4>ঠিকানা</h4>
                        <p>আপনার অফিসের ঠিকানা এখানে লিখুন</p>
                    </div>
                </div>

                <div class="info-item">
                    <i class="fas fa-phone-alt"></i>
                    <div>
                        <h4>ফোন করুন</h4>
                        <a href="tel:+8801234567890" style="color: white; text-decoration: none;">+৮৮০ ১২০০০০০০০০</a>
                    </div>
                </div>

                <div class="info-item">
                    <i class="fas fa-envelope"></i>
                    <div>
                        <h4>ইমেইল</h4>
                        <p>info@ramdiaonlinebd.com</p>
                    </div>
                </div>

                <div class="info-item">
                    <i class="fas fa-clock"></i>
                    <div>
                        <h4>অফিস টাইম</h4>
                        <p>শনি - বৃহস্পতি (১০:০০ - ০৮:০০)</p>
                    </div>
                </div>
            </div>

            <!-- ডান পাশের ফর্ম সেকশন -->
            <div class="contact-form reveal right">
                <h2>মেসেজ পাঠান</h2>
                
                <div id="form-response"></div>

                <form id="contactForm">
                    <div class="form-row">
                        <div class="form-group">
                            <label>আপনার নাম</label>
                            <input type="text" name="name" class="form-control" placeholder="নাম লিখুন" required>
                        </div>
                        <div class="form-group">
                            <label>মোবাইল নম্বর</label>
                            <input type="text" name="phone" class="form-control" placeholder="০১৭XXXXXXXX" required>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label>ইমেইল (ঐচ্ছিক)</label>
                            <input type="email" name="email" class="form-control" placeholder="email@example.com">
                        </div>
                        <div class="form-group">
                            <label>কোম্পানির নাম (ঐচ্ছিক)</label>
                            <input type="text" name="company" class="form-control" placeholder="কোম্পানির নাম">
                        </div>
                    </div>

                    <div class="form-group">
                        <label>মেসেজের বিষয়</label>
                        <input type="text" name="subject" class="form-control" placeholder="কি বিষয়ে জানতে চান?" required>
                    </div>

                    <div class="form-group">
                        <label>আপনার মেসেজ</label>
                        <textarea name="message" class="form-control" rows="4" placeholder="কিভাবে সাহায্য করতে পারি?" required></textarea>
                    </div>
                    <button type="submit" id="submitBtn" class="submit-btn">
                        <span class="btn-text">মেসেজ পাঠান</span>
                    </button>
                </form>
            </div>
        </div>
    </div>
    
    <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 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>

<!-- AJAX স্ক্রিপ্ট -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    
$(document).ready(function() {
    $('#contactForm').on('submit', function(e) {
        e.preventDefault();
        var form = $(this);
        var submitBtn = $('#submitBtn');
        var responseDiv = $('#form-response');
        submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> পাঠানো হচ্ছে...');
        $.ajax({
            type: 'POST',
            url: 'send_mail.php', 
            data: form.serialize(),
            success: function(response) {
                form.fadeOut(300, function() {
                    responseDiv.removeClass('error-msg').addClass('success-msg').html(
                        '<span class="tick-icon">✅</span>' +
                        '<h3>ধন্যবাদ!</h3>' +
                        '<p>আপনার মেসেজটি সফলভাবে পৌঁছেছে।</p>'
                    ).fadeIn();
                });
            },
            error: function() {
                responseDiv.removeClass('success-msg').addClass('error-msg').html(
                    '<h3>দুঃখিত!</h3>' +
                    '<p>আবার চেষ্টা করুন।</p>'
                ).fadeIn();
                submitBtn.prop('disabled', false).text('মেসেজ পাঠান');
            }
        });
    });
});
</script>

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