<!DOCTYPE html>
<html lang="en">
<head>
    <script>
    // Handle form submission
    document.addEventListener('DOMContentLoaded', function() {
        const contactForm = document.getElementById('contact_form');
        const successMessage = document.getElementById('success_message');
        
        // Initially hide the success message
        if (successMessage) {
            successMessage.style.display = 'none';
        }

        if (contactForm) {
            contactForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // Get form data
                const formData = new FormData(this);
                const submitBtn = document.getElementById('send_message');
                
                // Disable submit button to prevent double submission
                if (submitBtn) {
                    submitBtn.disabled = true;
                    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Sending...';
                }
                
                // Submit form via AJAX
                fetch(this.action, {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const userName = document.getElementById('name').value;
                        
                        // Create modal HTML if it doesn't exist
                        let modal = document.getElementById('successModal');
                        if (!modal) {
                            modal = document.createElement('div');
                            modal.id = 'successModal';
                            modal.className = 'modal fade';
                            modal.tabIndex = '-1';
                            modal.setAttribute('aria-hidden', 'true');
                            modal.innerHTML = `
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-body text-center p-5">
                                            <div class="mb-4">
                                                <i class="fas fa-check-circle text-success" style="font-size: 4rem;"></i>
                                            </div>
                                            <h3 class="h4 mb-3">Thank You for Contacting Us!</h3>
                                            <p class="mb-4">
                                                Dear <strong>${userName}</strong>, we've received your message.<br>
                                                Our team will review your inquiry and get back to you within 24-48 hours.
                                            </p>
                                            <p class="small text-muted mb-4">
                                                For immediate assistance, please call us at +91 9355671050
                                            </p>
                                            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">
                                                <i class="fas fa-check me-2"></i> Close
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            `;
                            document.body.appendChild(modal);
                            
                            // Initialize the modal
                            const modalInstance = new bootstrap.Modal(modal);
                            modalInstance.show();
                            
                            // Reset form and reload when modal is closed
                            modal.addEventListener('hidden.bs.modal', function () {
                                contactForm.reset();
                                // Optional: Redirect to home page after modal is closed
                                // window.location.href = 'index.php';
                            });
                        } else {
                            // If modal exists, just update the content and show it
                            const modalInstance = bootstrap.Modal.getOrCreateInstance(modal);
                            modalInstance.show();
                        }
                        
                        // Reset the form
                        contactForm.reset();
                        
                        // Reset form
                        contactForm.reset();
                    } else {
                        alert(data.message || 'An error occurred. Please try again.');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('An error occurred. Please try again.');
                })
                .finally(() => {
                    // Re-enable submit button
                    if (submitBtn) {
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = '<span class="me-2">Send Message</span><i class="fas fa-paper-plane"></i>';
                    }
                });
            });
        }
    });
    </script>
    <title>Sales Basket ::Contact Us</title>
    <link rel="icon" href="images/icon.webp" type="image/gif" sizes="16x16">
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="width=device-width, initial-scale=1.0" name="viewport" >
    <meta content="" name="description" >
    <meta content="" name="keywords" >
    <meta content="" name="author" >
    <!-- CSS Files
    ================================================== -->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" id="bootstrap">
    <link href="css/plugins.css" rel="stylesheet" type="text/css" >
    <link href="css/swiper.css" rel="stylesheet" type="text/css" >
    <link href="css/style.css" rel="stylesheet" type="text/css" >
    <link href="css/coloring.css" rel="stylesheet" type="text/css" >
    <link href="css/swiper-custom-1.css" rel="stylesheet" type="text/css" >
    <link href="css/colors/scheme-01.css" id="colors" rel="stylesheet" type="text/css" >
    <link href="css/datepicker.css" rel="stylesheet" type="text/css" >
</head>

<body>

      <?php include 'header.php'; ?>

    
    <main>
        <a href="#" id="back-to-top"></a>
        <!-- page preloader begin -->
        <div id="de-loader"></div>
        <!-- page preloader close -->

        <section class="jarallax text-light relative overflow-hidden mt-80 mt-sm-50">
            <img src="images/background/1.webp" class="jarallax-img" alt="">
            <div class="container relative z-2">
                <div class="row g-4 justify-content-between align-items-center">
                    <div class="col-md-7">
                        <h1 class="fs-72 fs-xs-10vw lh-1-1 split">Contact</h1>
                    </div>
                    <div class="col-md-5 text-md-end">
                        <ul class="crumb text-light">
                            <li><a href="index-2.html">Home</a></li>
                            <li class="active">Contact</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="sw-overlay op-6"></div>
        </section>

        <section id="section-contact" class="py-5">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-12 text-center mb-5">
                        <h2 class="display-5 fw-bold mb-3 wow fadeInUp">Get In Touch</h2>
                        <div class="divider mx-auto bg-primary mb-4"></div>
                        <p class="lead text-muted wow fadeInUp" data-wow-delay=".2s">We'd love to hear from you. Send us a message and we'll respond as soon as possible.</p>
                    </div>
                </div>
                
                <div class="row g-5 justify-content-center">
                    <div class="col-lg-5 col-xl-4">
                        <div class="contact-info p-4 p-lg-5 bg-light rounded-4 h-100 wow fadeInLeft">
                            <h3 class="h4 mb-4">Contact Information</h3>
                            <p class="mb-4">At <strong>Sales Basket</strong>, we take pride in being a pioneer in <strong>Green Housing Projects</strong> across <strong>Uttar Pradesh</strong> and <strong>Uttarakhand</strong>.</p>
                            
                            <div class="d-flex align-items-start mb-4">
                                <div class="me-3 text-primary">
                                    <i class="fas fa-map-marker-alt fa-2x"></i>
                                </div>
                                <div>
                                    <h5 class="h6 mb-1">Our Offices</h5>
                                    <p class="mb-0">   <strong>Lucknow Office:</strong><br>   1/220, Vardaan Khand,<br>   Gomti Nagar, Lucknow, UP </p> <br> <p class="mb-0">   <strong>Noida Office:</strong><br>   A-1305, I-1307, 13th Floor, Tower T3,<br>   NX One, Greater Noida (W), UP </p>
                                </div>
                            </div>
                           

                            
                            <div class="d-flex align-items-start mb-4">
                                <div class="me-3 text-primary">
                                    <i class="fas fa-envelope fa-2x"></i>
                                </div>
                                <div>
                                    <h5 class="h6 mb-1">Email Us</h5>
                                    <p class="mb-0">salesbasket2025@gmail.com</p>
                                </div>
                            </div>
                            
                            <div class="d-flex align-items-start">
                                <div class="me-3 text-primary">
                                    <i class="fas fa-phone-alt fa-2x"></i>
                                </div>
                                <div>
                                    <h5 class="h6 mb-1">Call Us</h5>
                                    <p class="mb-0">+91 9355671050</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-lg-7 col-xl-6">
                        <div class="contact-form p-4 p-lg-5 bg-white rounded-4 shadow-sm wow fadeInRight">
                            <h3 class="h4 mb-4">Send Us a Message</h3>
                            <p class="text-muted mb-4">Fill the form below and our team will assist you with plot availability, site visits and investment details.</p>
                            
                            <form name="contactForm" id="contact_form" method="post" action="visit.php">
                                <input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
                                
                                <div class="mb-4">
                                    <label for="name" class="form-label fw-500">First Name <span class="text-danger">*</span></label>
                                    <input type="text" name="name" id="name" class="form-control form-control-lg" required>
                                </div>
                                
                                <div class="row g-4 mb-4">
                                    <div class="col-md-6">
                                        <label for="email" class="form-label fw-500">Email Address <span class="text-danger">*</span></label>
                                        <input type="email" name="email" id="email" class="form-control form-control-lg" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="phone" class="form-label fw-500">Phone Number</label>
                                        <input type="tel" name="phone" id="phone" class="form-control form-control-lg">
                                    </div>
                                </div>
                                
                                <div class="mb-4">
                                    <label for="message" class="form-label fw-500">Your Message</label>
                                    <textarea name="message" id="message" class="form-control form-control-lg" rows="5" maxlength="180" oninput="updateCharCount(this)"></textarea>
                                    <div class="text-end text-muted small mt-2" id="charCount">0 / 180 characters</div>
                                </div>
                                
                               <div class="d-grid mt-4">
  <button type="submit"
          id="send_message"
          class="btn btn-primary btn-lg"
          style="height:56px; box-sizing:border-box;">
    <span class="me-2">Send Message</span>
    <i class="fas fa-paper-plane"></i>
  </button>
</div>

                            </form>
                        </div>
                    </div>
                </div>
            </div>
            
            <style>
                .text-primary {
    color: #ff6b35 !important;
}
                .divider {
                    width: 60px;
                    height: 4px;
                    border-radius: 2px;
                }
                .contact-info i {
                    min-width: 24px;
                }
                .form-control:focus {
                    border-color: var(--primary-color);
                    box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.15);
                }
                .btn-primary {
                    background-color: var(--primary-color);
                    border-color: var(--primary-color);
                }
                .btn-primary:hover {
                    background-color: #ff6b35;
                    border-color: #ff6b35;
                }
                .btn-primary {
    background-color: #ff6b35 !important;
    border-color: var(--primary-color);
}
            </style>
            
            <script>
            function updateCharCount(textarea) {
                const maxLength = 180;
                const currentLength = textarea.value.length;
                const charCount = document.getElementById('charCount');
                charCount.textContent = currentLength + ' / ' + maxLength + ' characters';
                
                if (currentLength > maxLength) {
                    textarea.value = textarea.value.substring(0, maxLength);
                    charCount.textContent = maxLength + ' / ' + maxLength + ' characters';
                }
                
                // Update text color based on character count
                if (currentLength > maxLength * 0.9) {
                    charCount.classList.remove('text-muted');
                    charCount.classList.add('text-danger');
                } else {
                    charCount.classList.remove('text-danger');
                    charCount.classList.add('text-muted');
                }
            }
            </script>
                        <div id="success_message" class="bg-color mt-4 p-4 p-lg-5 rounded-4 shadow-sm" style="display: none;">
                            <div class="text-center">
                                <div class="mb-4">
                                    <i class="fas fa-check-circle text-success" style="font-size: 4rem;"></i>
                                </div>
                                <h3 class="h4 mb-3">Message Sent Successfully!</h3>
                                <p class="mb-4">
                                    Thank you <strong><span id="user_name"></span></strong> for contacting us.
                                    We have received your message and our team will get back to you shortly.
                                </p>
                                <button onclick="location.reload()" class="btn btn-primary">
                                    <i class="fas fa-arrow-left me-2"></i> Back to Form
                                </button>
                            </div>
                        </div>

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

    </main>

    <!-- Google Map Section -->
    <div class="container my-5">
        <div class="row justify-content-center">
            <div class="col-12 text-center mb-5">
                <h2 class="display-5 fw-bold mb-3">Our Location</h2>
                <div class="divider mx-auto mb-4"></div>
                <p class="lead">Visit us at our office in the heart of Gomti Nagar, Lucknow</p>
            </div>
        </div>
        
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div style="width: 100%; height: 500px; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1);">
                    <iframe 
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3557.361077698675!2d81.0026!3d26.9124!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x399957e8a1a6b1b5%3A0x1a7c3a9d2d3e4f5g!2sEcogram%20Lifestyle%2C%20Vardaan%20Khand%2C%20Gomti%20Nagar%2C%20Lucknow%2C%20Uttar%20Pradesh%20226010!5e0!3m2!1sen!2sin!4v1641234567890!5m2!1sen!2sin" 
                        width="100%" 
                        height="100%" 
                        style="border:0;" 
                        allowfullscreen="" 
                        loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade"
                        title="Sales Basket Location on Map">
                    </iframe>
                </div>
            </div>
        </div>
        
        <div class="row mt-5">
            <div class="col-md-4 mb-4 mb-md-0">
                <div class="d-flex align-items-center p-4 bg-white rounded-3 shadow-sm h-100">
                    <div class="me-4 text-primary">
                        <i class="fas fa-map-marker-alt fa-2x" ></i>
                    </div>
                    <div>
                        <h5 class="h6 mb-1">Our Office</h5>
<p class="mb-0 small">
<strong>Lucknow:</strong><br>
1/220, Vardaan Khand,<br>
Gomti Nagar, Lucknow, UP
</p>                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4 mb-md-0">
                <div class="d-flex align-items-center p-4 bg-white rounded-3 shadow-sm h-100">
                    <div class="me-4  text-primary">
                        <i class="fas fa-envelope fa-2x"></i>
                    </div>
                    <div>
                        <h5 class="h6 mb-1">Email Us</h5>
                        <p class="mb-0 small">salesbasket2025@gmail.com</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="d-flex align-items-center p-4 bg-white rounded-3 shadow-sm h-100">
                    <div class="me-4 text-primary">
                        <i class="fas fa-phone-alt fa-2x" ></i>
                    </div>
                    <div>
                        <h5 class="h6 mb-1">Call Us</h5>
                        <p class="mb-0 small">+91 9355671050</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
        </div>

    <style>
        /* Map Section Styling */
        .map-section {
            margin: 80px 0;
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, rgba(52, 135, 143, 0.05) 0%, rgba(255, 107, 53, 0.05) 100%);
            padding: 60px 0;
        }
        
        .map-container {
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            border: none;
            position: relative;
            z-index: 1;
            width: 100%;
            height: 500px;
        }
        
        .map-container iframe {
            width: 100%;
            height: 100%;
            border: none;
            display: block;
        }
        
        .map-container:hover {
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
            transform: translateY(-5px);
        }
        
        .map-section iframe {
            width: 100%;
            height: 100%;
            min-height: 400px;
            border: none;
            display: block;
        }
        
        .map-section h2 {
            color: var(--dark-text);
            font-weight: 700;
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
        }
        
        .map-section h2::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -10px;
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
            border-radius: 2px;
        }
        
        .map-section p.lead {
            color: var(--light-text);
            margin-bottom: 30px;
            font-size: 1.1rem;
        }
        
        .map-section .divider {
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
            margin: 0 auto 25px;
            border-radius: 2px;
        }
        
        /* Update button styles to match new color scheme */
        .btn-primary {
            transition: all 0.3s ease;
            padding: 12px 30px;
            font-weight: 600;
        }
        
        .btn-primary:hover {
           
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(52, 135, 143, 0.3);
        }
        
        .btn-outline-primary {
            color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .btn-outline-primary:hover {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        /* Update form controls */
        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.25rem rgba(52, 135, 143, 0.25);
        }
        
        /* Update section headers */
        .section-header h2 {
            color: var(--dark-text);
            position: relative;
            padding-bottom: 15px;
        }
        
        .section-header h2::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
            border-radius: 2px;
        }
        
        @media (max-width: 992px) {
            .map-section {
                margin: 60px 0;
                padding: 40px 0;
            }
            
            .map-container {
                border-radius: 12px;
            }
        }
        
        @media (max-width: 768px) {
            .map-section {
                margin: 40px 0;
                padding: 30px 0;
            }
            
            .map-container {
                margin: 0 -15px;
                border-radius: 0;
            }
            
            .map-section iframe {
                min-height: 350px;
            }
        }
    </style>

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

    <!-- Success Modal Styles -->
    <style>
        .modal-content {
            border: none;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        }
        .modal-header {
            border: none;
            padding: 1.5rem 1.5rem 0;
        }
        .modal-body {
            padding: 2rem 2.5rem;
        }
        .btn-close:focus {
            box-shadow: none;
        }
        .btn-primary {
            background-color: #ff6b35 !important;
            border-color: #ff6b35 !important;
        }
        .btn-primary:hover {
            background-color: #e65a2b !important;
            border-color: #e65a2b !important;
        }
    </style>
    
    <!-- Javascript Files
    ================================================== -->
    <!-- Bootstrap JS Bundle with Popper (moved before other scripts) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/vendors.js"></script>
    <script src="js/designesia.js"></script>
    <script src="js/custom-datepicker.js"></script>
    <script src="js/validation-visit.js"></script>

    
   
</body>


</html>