<?php 
/**
 * contact.php - কন্টাক্ট ইউএস পেজ
 * নতুন প্রাইমারি কালার (#00aeef) এবং সেকেন্ডারি কালার (#57a03a) অনুযায়ী আপডেট করা হয়েছে
 */

include('header.php'); 
?>

<style>
    :root {
        --primary-color: #00aeef; /* নতুন প্রাইমারি কালার (আকাশী নীল) */
        --secondary-color: #57a03a; /* নতুন সেকেন্ডারি কালার (সবুজ) */
        --dark-gray: #333;
        --light-bg: #f8f9fa;
    }

    .contact-section {
        padding: 60px 0;
        background-color: var(--light-bg);
    }

    /* ম্যাপ সেকশন */
    .map-section {
        margin-bottom: 30px;
        height: 450px;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }

    /* টাইটেল সেকশন */
    .section-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .section-header h2 {
        font-size: 2.5rem;
        color: var(--secondary-color); /* সেকেন্ডারি কালার টাইটেল */
        font-weight: 800;
        margin-bottom: 10px;
    }

    .section-header .text-red {
        color: var(--primary-color); /* প্রাইমারি কালার হাইলাইট */
    }

    .section-header p {
        color: #666;
        font-size: 1.1rem;
        max-width: 700px;
        margin: 0 auto;
    }

    .contact-container {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 40px;
        background: #fff;
        padding: 40px;
        border-radius: 20px;
        box-shadow: 0 15px 40px rgba(0,0,0,0.05);
    }

    @media (max-width: 992px) {
        .contact-container { grid-template-columns: 1fr; }
        .map-section { height: 350px; }
        .section-header h2 { font-size: 2rem; }
    }

    /* বাম পাশের ইনফো সেকশন */
    .contact-info {
        background: var(--primary-color); /* প্রাইমারি কালার ব্যাকগ্রাউন্ড */
        color: white;
        padding: 40px;
        border-radius: 15px;
    }

    .contact-info h2 {
        font-size: 2rem;
        margin-bottom: 20px;
        font-weight: 700;
    }

    .info-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 25px;
    }

    .info-item i {
        font-size: 1.5rem;
        margin-right: 15px;
        background: rgba(255,255,255,0.2);
        padding: 12px;
        border-radius: 10px;
    }

    .info-item div h4 {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
    }

    .info-item div p {
        margin: 5px 0 0;
        opacity: 0.9;
    }

    /* ডান পাশের ফর্ম সেকশন */
    .contact-form h2 {
        color: var(--secondary-color); /* সেকেন্ডারি কালার টাইটেল */
        margin-bottom: 30px;
        font-weight: 700;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: #555;
    }

    .form-control {
        width: 100%;
        padding: 12px 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        transition: 0.3s;
    }

    .form-control:focus {
        border-color: var(--primary-color);
        outline: none;
        box-shadow: 0 0 8px rgba(0, 174, 239, 0.1);
    }

    .submit-btn {
        background: var(--secondary-color); /* সেকেন্ডারি কালার বাটন */
        color: white;
        border: none;
        padding: 15px 35px;
        border-radius: 8px;
        font-weight: 700;
        cursor: pointer;
        transition: 0.3s;
        width: 100%;
        text-transform: uppercase;
    }

    .submit-btn:hover {
        background: var(--primary-color); /* হোভারে প্রাইমারি কালার হবে */
        transform: translateY(-2px);
    }
</style>

<section class="contact-section">
    <div class="container">
        
        <!-- ১. গুগল ম্যাপ -->
        <div class="map-section">
            <iframe 
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3651.9024424301394!2d90.3910!3d23.7509!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjPCsDQ1JDAzLjIiTiA5MMKwMjMnMjcuNiJF!5e0!3m2!1sen!2sbd!4v1625000000000!5m2!1sen!2sbd" 
                width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy">
            </iframe>
        </div>

        <!-- ২. ম্যাপের নিচের টাইটেল -->
        <div class="section-header">
            <h2>যোগাযোগ <span class="text-red">করুন</span></h2>
            <p>আমাদের সেবা সম্পর্কে যেকোনো জিজ্ঞাসায় সরাসরি আমাদের অফিসে চলে আসুন অথবা নিচের ফর্মটি পূরণ করে মেসেজ পাঠান।</p>
        </div>

        <div class="contact-container">
            
            <!-- ৩. বাম পাশের ইনফো সেকশন -->
            <div class="contact-info">
                <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>
                        <p>+৮৮০ ১২৩৪-৫৬৭৮৯০</p>
                    </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">
                <h2>মেসেজ পাঠান</h2>
                <form action="send_mail.php" method="POST">
                    <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 class="form-group">
                        <label>ইমেইল (ঐচ্ছিক)</label>
                        <input type="email" name="email" class="form-control" placeholder="email@example.com">
                    </div>
                    <div class="form-group">
                        <label>আপনার মেসেজ</label>
                        <textarea name="message" class="form-control" rows="5" placeholder="কিভাবে সাহায্য করতে পারি?" required></textarea>
                    </div>
                    <button type="submit" class="submit-btn">মেসেজ পাঠান</button>
                </form>
            </div>

        </div>
    </div>
</section>

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