<?php 
include('db/connection.php');

// Fetch company details from database
if(empty($row[0])) {
    $company_name = "SDB INNOVATIONS PRIVATE LIMITED";
    $company_email = "sdbinnovation@mail.com";
    $company_phone = "8171437264";
    $company_address = "Nagla Radhe, Umari National Highway 19, Sirsaganj, Firozabad, UP - 283151";
    $map_location = "Firozabad, Uttar Pradesh";
} else {
    $company_name = $row[0];
    $company_email = $row[4] ?? "sdbinnovation@mail.com";
    $company_phone = $row[5] ?? "8171437264";
    $company_address = $row[3] ?? "Nagla Radhe, Umari National Highway 19, Sirsaganj, Firozabad, UP - 283151";
    $map_location = "Firozabad, Uttar Pradesh, India";
}
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title><?php echo $company_name; ?> || Contact Us</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="SDB Innovations, contact, customer support, direct selling company" name="keywords">
    <meta content="Contact SDB Innovations - Get in touch with India's trusted direct selling company" name="description">

    <!-- Favicon -->
    <link href="img/logo/logo22222.png" rel="icon">

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

    <!-- Font Awesome 6 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- AOS Animation -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

    <!-- Custom CSS -->
    <style>
        * {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --primary: #8B5CF6;
            --secondary: #EC4899;
            --accent: #10B981;
            --dark: #1F2937;
            --light: #F9FAFB;
        }
        
        body {
            overflow-x: hidden;
            background: #f8fafc;
        }
        
        /* Page Header */
        .page-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            position: relative;
            overflow: hidden;
            padding: 120px 0 80px;
            margin-top: 76px;
        }
        
        .page-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,154.7C960,171,1056,181,1152,165.3C1248,149,1344,107,1392,85.3L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
            background-repeat: no-repeat;
            background-position: bottom;
            background-size: cover;
            opacity: 0.2;
        }
        
        /* Modern Cards */
        .contact-card {
            background: white;
            border-radius: 20px;
            padding: 2rem;
            transition: all 0.3s ease;
            border: 1px solid rgba(0,0,0,0.05);
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            height: 100%;
            text-align: center;
        }
        
        .contact-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(139, 92, 246, 0.15);
        }
        
        .contact-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            color: white;
            font-size: 2rem;
            transition: all 0.3s ease;
        }
        
        .contact-card:hover .contact-icon {
            transform: rotateY(180deg);
        }
        
        /* Form Styles */
        .form-floating {
            margin-bottom: 1rem;
        }
        
        .form-floating input,
        .form-floating textarea {
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            padding: 1rem;
            transition: all 0.3s ease;
        }
        
        .form-floating input:focus,
        .form-floating textarea:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.25);
        }
        
        .form-floating label {
            padding: 1rem;
        }
        
        /* Map Container */
        .map-container {
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            height: 350px;
        }
        
        .map-container iframe {
            width: 100%;
            height: 100%;
            border: 0;
        }
        
        /* Alert Messages */
        .alert-message {
            position: fixed;
            top: 100px;
            right: 20px;
            z-index: 9999;
            min-width: 300px;
            animation: slideIn 0.5s ease;
        }
        
        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        
        /* Submit Button */
        .btn-submit {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 15px 40px;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s ease;
            width: 100%;
        }
        
        .btn-submit:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
            color: white;
        }
        
        .btn-submit:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }
        
        /* Loading Spinner */
        .spinner-small {
            width: 20px;
            height: 20px;
            border: 3px solid #ffffff;
            border-top-color: transparent;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            display: inline-block;
            margin-right: 8px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* Section Title */
        .section-title {
            text-align: center;
            margin-bottom: 60px;
        }
        
        .section-title h2 {
            font-size: 2.5rem;
            font-weight: 800;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 20px;
            position: relative;
            display: inline-block;
        }
        
        .section-title h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, #667eea, #764ba2);
            border-radius: 2px;
        }
        
        /* Back to Top */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.5);
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            text-decoration: none;
        }
        
        .back-to-top.show {
            opacity: 1;
            visibility: visible;
        }
        
        .back-to-top:hover {
            transform: scale(1.1) rotate(360deg);
            color: white;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .section-title h2 {
                font-size: 2rem;
            }
            
            .alert-message {
                left: 20px;
                right: 20px;
                min-width: auto;
            }
        }
    </style>
</head>

<body>
    <!-- Topbar Start -->
    <?php include('assets/header.php'); ?>
    <!-- Navbar End -->

    <!-- Page Header Start -->
    <div class="page-header">
        <div class="container text-center py-5">
            <h1 class="display-3 text-white mb-4" data-aos="fade-down">Contact Us</h1>
            <nav aria-label="breadcrumb" data-aos="fade-up">
                <ol class="breadcrumb justify-content-center">
                    <li class="breadcrumb-item"><a href="index.php" class="text-white">Home</a></li>
                    <li class="breadcrumb-item active text-white" aria-current="page">Contact Us</li>
                </ol>
            </nav>
        </div>
    </div>
    <!-- Page Header End -->

    <!-- Contact Info Cards Start -->
    <div class="container-xxl py-5">
        <div class="container">
            <div class="row g-4">
                <div class="col-lg-4 col-md-6" data-aos="fade-up">
                    <div class="contact-card">
                        <div class="contact-icon">
                            <i class="fas fa-phone-alt"></i>
                        </div>
                        <h4>Call Us</h4>
                        <p class="text-muted mb-2">We're available 24/7</p>
                        <h5><a href="tel:+91<?php echo $company_phone; ?>" class="text-primary">+91 <?php echo $company_phone; ?></a></h5>
                    </div>
                </div>
                
                <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
                    <div class="contact-card">
                        <div class="contact-icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <h4>Email Us</h4>
                        <p class="text-muted mb-2">Get support via email</p>
                        <h5><a href="mailto:<?php echo $company_email; ?>" class="text-primary"><?php echo $company_email; ?></a></h5>
                    </div>
                </div>
                
                <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
                    <div class="contact-card">
                        <div class="contact-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <h4>Visit Us</h4>
                        <p class="text-muted mb-2">Our headquarters</p>
                        <h6 class="text-primary"><?php echo $company_address; ?></h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Contact Info Cards End -->

    <!-- Contact Form & Map Start -->
    <div class="container-xxl py-5 bg-light">
        <div class="container">
            <div class="section-title" data-aos="fade-up">
                <h2>Get In Touch</h2>
                <p>Have questions? We'd love to hear from you. Send us a message and we'll respond as soon as possible.</p>
            </div>
            
            <div class="row g-5">
                <!-- Contact Form -->
                <div class="col-lg-7" data-aos="fade-right">
                    <div class="modern-card">
                        <form id="contactForm" method="POST">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="name" name="name" placeholder="Your Name" required>
                                        <label for="name">Your Name *</label>
                                        <div class="invalid-feedback" id="name-error"></div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="email" class="form-control" id="email" name="email" placeholder="Your Email" required>
                                        <label for="email">Your Email *</label>
                                        <div class="invalid-feedback" id="email-error"></div>
                                    </div>
                                </div>
                                
                                <div class="col-12">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" required>
                                        <label for="subject">Subject *</label>
                                        <div class="invalid-feedback" id="subject-error"></div>
                                    </div>
                                </div>
                                
                                <div class="col-12">
                                    <div class="form-floating">
                                        <textarea class="form-control" placeholder="Your Message" id="message" name="message" style="height: 200px" required></textarea>
                                        <label for="message">Your Message *</label>
                                        <div class="invalid-feedback" id="message-error"></div>
                                    </div>
                                </div>
                                
                                <div class="col-12">
                                    <button type="submit" class="btn-submit" id="submitBtn">
                                        <span id="btnText">Send Message</span>
                                        <span id="btnSpinner" style="display: none;"><span class="spinner-small"></span> Sending...</span>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                
                <!-- Map -->
                <div class="col-lg-5" data-aos="fade-left">
                    <div class="modern-card h-100">
                        <h4 class="mb-4">Our Location</h4>
                        <div class="map-container mb-4">
                            <iframe 
                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d115214.353467424!2d78.31915555!3d27.17206895!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39746b8b7aafc1d9%3A0x2e3b4b7b7b7b7b7b!2sFirozabad%2C%20Uttar%20Pradesh!5e0!3m2!1sen!2sin!4v1620000000000!5m2!1sen!2sin"
                                allowfullscreen="" 
                                loading="lazy">
                            </iframe>
                        </div>
                        
                        <div class="business-hours">
                            <h5 class="mb-3"><i class="fas fa-clock text-primary me-2"></i> Business Hours</h5>
                            <div class="d-flex justify-content-between border-bottom pb-2 mb-2">
                                <span>Monday - Friday:</span>
                                <span class="fw-bold">9:00 AM - 8:00 PM</span>
                            </div>
                            <div class="d-flex justify-content-between border-bottom pb-2 mb-2">
                                <span>Saturday:</span>
                                <span class="fw-bold">10:00 AM - 6:00 PM</span>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span>Sunday:</span>
                                <span class="fw-bold">Closed</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Contact Form & Map End -->

    <!-- FAQ Section Start -->
    <div class="container-xxl py-5">
        <div class="container">
            <div class="section-title" data-aos="fade-up">
                <h2>Frequently Asked Questions</h2>
                <p>Quick answers to common questions</p>
            </div>
            
            <div class="row g-4">
                <div class="col-lg-6" data-aos="fade-up">
                    <div class="modern-card">
                        <h5><i class="fas fa-question-circle text-primary me-2"></i> How can I become a distributor?</h5>
                        <p class="text-muted">You can join us by purchasing any of our starter packages. Contact our support team for guidance.</p>
                    </div>
                </div>
                
                <div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
                    <div class="modern-card">
                        <h5><i class="fas fa-question-circle text-primary me-2"></i> What is your return policy?</h5>
                        <p class="text-muted">We offer 7-day return policy on unused products. Contact our support for assistance.</p>
                    </div>
                </div>
                
                <div class="col-lg-6" data-aos="fade-up" data-aos-delay="200">
                    <div class="modern-card">
                        <h5><i class="fas fa-question-circle text-primary me-2"></i> How do I track my order?</h5>
                        <p class="text-muted">Once your order is shipped, you'll receive tracking details via email and SMS.</p>
                    </div>
                </div>
                
                <div class="col-lg-6" data-aos="fade-up" data-aos-delay="300">
                    <div class="modern-card">
                        <h5><i class="fas fa-question-circle text-primary me-2"></i> Is there any joining fee?</h5>
                        <p class="text-muted">No, there's no joining fee. You just need to purchase a product package to start.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- FAQ Section End -->

    <!-- Footer Start -->
    <?php include('assets/footer.php'); ?>

    <!-- Back to Top -->
    <a href="#" class="back-to-top" id="backToTop">
        <i class="bi bi-arrow-up"></i>
    </a>

    <!-- Alert Message Container -->
    <div id="alertContainer" class="alert-message"></div>

    <!-- JavaScript Libraries -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    
    <!-- Template Javascript -->
    <script src="js/main.js"></script>
    
    <script>
        // Initialize AOS
        AOS.init({
            duration: 1000,
            once: true,
            offset: 100
        });

    
        // Back to top button
        window.addEventListener('scroll', function() {
            const backToTop = document.getElementById('backToTop');
            if (window.scrollY > 300) {
                backToTop.classList.add('show');
            } else {
                backToTop.classList.remove('show');
            }
        });

        document.getElementById('backToTop').addEventListener('click', function(e) {
            e.preventDefault();
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });

        // Contact Form Handling
        document.getElementById('contactForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Reset errors
            document.querySelectorAll('.invalid-feedback').forEach(el => el.innerHTML = '');
            document.querySelectorAll('.form-control').forEach(el => {
                el.classList.remove('is-invalid');
            });
            
            // Show loading
            document.getElementById('btnText').style.display = 'none';
            document.getElementById('btnSpinner').style.display = 'inline-block';
            document.getElementById('submitBtn').disabled = true;
            
            // Get form data
            const formData = new FormData(this);
            
            // Send AJAX request
            fetch('contact_process.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                // Hide loading
                document.getElementById('btnText').style.display = 'inline-block';
                document.getElementById('btnSpinner').style.display = 'none';
                document.getElementById('submitBtn').disabled = false;
                
                if (data.success) {
                    // Show success message
                    showAlert('success', data.message);
                    
                    // Reset form
                    document.getElementById('contactForm').reset();
                } else {
                    // Show errors
                    if (data.errors) {
                        Object.keys(data.errors).forEach(key => {
                            const input = document.getElementById(key);
                            const errorDiv = document.getElementById(key + '-error');
                            if (input && errorDiv) {
                                input.classList.add('is-invalid');
                                errorDiv.innerHTML = data.errors[key];
                            }
                        });
                    }
                    
                    // Show error message
                    showAlert('danger', data.message || 'An error occurred. Please try again.');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                document.getElementById('btnText').style.display = 'inline-block';
                document.getElementById('btnSpinner').style.display = 'none';
                document.getElementById('submitBtn').disabled = false;
                showAlert('danger', 'Network error. Please try again.');
            });
        });

        // Show alert function
        function showAlert(type, message) {
            const alertContainer = document.getElementById('alertContainer');
            const alertDiv = document.createElement('div');
            alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
            alertDiv.role = 'alert';
            alertDiv.innerHTML = `
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            `;
            
            alertContainer.innerHTML = '';
            alertContainer.appendChild(alertDiv);
            
            // Auto hide after 5 seconds
            setTimeout(() => {
                alertDiv.remove();
            }, 5000);
        }

        // Real-time validation
        document.querySelectorAll('.form-control').forEach(input => {
            input.addEventListener('input', function() {
                this.classList.remove('is-invalid');
                const errorDiv = document.getElementById(this.id + '-error');
                if (errorDiv) errorDiv.innerHTML = '';
            });
        });
    </script>
</body>

</html>