<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
    <meta name="description" content="Get in touch with Finggu Infotech. Contact us for web design, development, and digital marketing services in Mumbai.">
    
    <title>Contact Us | Finggu Infotech - Web Design & Development Company</title>
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://fingguinfotech.com/contact">
    <meta property="og:title" content="Contact Us | Finggu Infotech">
    <meta property="og:description" content="Get in touch with Finggu Infotech. Contact us for web design, development, and digital marketing services in Mumbai.">
    <meta property="og:image" content="https://fingguinfotech.com/images/og-contact.jpg">
    
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://fingguinfotech.com/contact">
    <meta property="twitter:title" content="Contact Us | Finggu Infotech">
    <meta property="twitter:description" content="Get in touch with Finggu Infotech. Contact us for web design, development, and digital marketing services in Mumbai.">
    <meta property="twitter:image" content="https://fingguinfotech.com/images/og-contact.jpg">

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="assets/images/favicon.png">
    
    <!-- Preconnect to important domains -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                    container: {
                        center: true,
                        padding: '1rem',
                        screens: {
                            sm: '100%',
                            md: '100%',
                            lg: '1024px',
                            xl: '1280px',
                        },
                    },
                }
            }
        }
    </script>
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="assets/css/main.css">
    
    <style>
        /* Contact Form */
        .contact-form {
            background: white;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            padding: 40px;
            height: 100%;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            font-weight: 500;
            margin-bottom: 8px;
            color: #374151;
        }
        
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            font-size: 15px;
            transition: all 0.3s ease;
            background-color: #f9fafb;
        }
        
        .form-control:focus {
            outline: none;
            border-color: #ef4444;
            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
            background-color: white;
        }
        
        textarea.form-control {
            min-height: 150px;
            resize: vertical;
        }
        
        .btn-submit {
            background: #ef4444;
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        
        .btn-submit:hover {
            background: #dc2626;
            transform: translateY(-2px);
        }
        
        .btn-submit i {
            margin-right: 8px;
        }
        
        /* Contact Info */
        .contact-info {
            background: #f9fafb;
            border-radius: 10px;
            padding: 40px;
            height: 100%;
        }
        
        .contact-item {
            display: flex;
            margin-bottom: 30px;
        }
        
        .contact-icon {
            width: 50px;
            height: 50px;
            background: #fee2e2;
            color: #ef4444;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin-right: 20px;
            flex-shrink: 0;
        }
        
        .contact-text h4 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 5px;
            color: #111827;
        }
        
        .contact-text p, .contact-text a {
            color: #6b7280;
            margin: 0;
            line-height: 1.6;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .contact-text a:hover {
            color: #ef4444;
        }
        
        /* Map */
        .map-container {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            height: 100%;
        }
        
        .map-container iframe {
            width: 100%;
            height: 100%;
            min-height: 300px;
            border: 0;
            display: block;
        }
        
        /* Social Links */
        .social-links {
            display: flex;
            margin-top: 20px;
        }
        
        .social-link {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #e5e7eb;
            color: #4b5563;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            transition: all 0.3s ease;
        }
        
        .social-link:hover {
            background: #ef4444;
            color: white;
            transform: translateY(-3px);
        }
        
        /* Working Hours */
        .working-hours {
            margin-top: 40px;
        }
        
        .working-hours h4 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 15px;
            color: #111827;
            position: relative;
            padding-bottom: 10px;
        }
        
        .working-hours h4::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 50px;
            height: 2px;
            background: #ef4444;
        }
        
        .hours-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .hours-list li {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px dashed #e5e7eb;
        }
        
        .hours-list li:last-child {
            border-bottom: none;
        }
        
        .day {
            color: #4b5563;
        }
        
        .time {
            color: #111827;
            font-weight: 500;
        }
        
        /* Responsive */
        @media (max-width: 767px) {
            .contact-form, .contact-info {
                padding: 25px;
            }
            
            .contact-item {
                flex-direction: column;
            }
            
            .contact-icon {
                margin-bottom: 15px;
            }
        }
    </style>
</head>
<body class="font-sans antialiased text-gray-800 bg-white">
    <!-- Include Header -->
    <?php include 'includes/header.php'; ?>
    
    <!-- Hero Section -->
    <section class="bg-gradient-to-r from-red-600 to-red-700 py-20 md:py-32 text-white relative overflow-hidden">
        <div class="absolute inset-0 opacity-10">
            <div class="absolute inset-0" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHJlY3Qgd2lkdGg9IjUwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjA1Ii8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI3BhdHRlcm4pIi8+PC9zdmc+');"></div>
        </div>
        <div class="container mx-auto px-4 relative z-10">
            <div class="max-w-4xl mx-auto text-center">
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">Get In Touch</h1>
                <p class="text-xl md:text-2xl text-red-100 max-w-3xl mx-auto">We'd love to hear from you. Contact us today to discuss your project.</p>
            </div>
        </div>
    </section>
    
    <!-- Contact Section -->
    <section class="py-16 md:py-24 bg-white">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- Contact Form -->
                <div class="lg:col-span-2">
                    <div class="contact-form">
                        <h2 class="text-2xl font-bold mb-6 text-gray-900">Send Us a Message</h2>
                        <p class="text-gray-600 mb-8">Have questions or want to discuss your project? Fill out the form below and we'll get back to you within 24 hours.</p>
                        
                        <form id="contactForm" action="#" method="POST">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div class="form-group">
                                    <label for="name" class="form-label">Your Name <span class="text-red-500">*</span></label>
                                    <input type="text" id="name" name="name" class="form-control" required>
                                </div>
                                
                                <div class="form-group">
                                    <label for="email" class="form-label">Email Address <span class="text-red-500">*</span></label>
                                    <input type="email" id="email" name="email" class="form-control" required>
                                </div>
                                
                                <div class="form-group">
                                    <label for="phone" class="form-label">Phone Number</label>
                                    <input type="tel" id="phone" name="phone" class="form-control">
                                </div>
                                
                                <div class="form-group">
                                    <label for="subject" class="form-label">Subject <span class="text-red-500">*</span></label>
                                    <input type="text" id="subject" name="subject" class="form-control" required>
                                </div>
                                
                                <div class="form-group md:col-span-2">
                                    <label for="message" class="form-label">Your Message <span class="text-red-500">*</span></label>
                                    <textarea id="message" name="message" class="form-control" required></textarea>
                                </div>
                                
                                <div class="form-group md:col-span-2">
                                    <button type="submit" class="btn-submit">
                                        <i class="fas fa-paper-plane"></i> Send Message
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                
                <!-- Contact Info -->
                <div class="lg:col-span-1">
                    <div class="bg-white rounded-lg shadow-sm p-8 h-full">
                        <h2 class="text-2xl font-bold mb-6 text-gray-900">Contact Information</h2>
                        <p class="text-gray-600 mb-8">We're here to help and answer any questions you might have. Reach out to us through any of these channels.</p>
                        
                        <div class="space-y-6">
                            <div class="flex items-start">
                                <div class="flex-shrink-0 bg-red-50 p-3 rounded-full text-red-600">
                                    <i class="fas fa-map-marker-alt text-xl"></i>
                                </div>
                                <div class="ml-4">
                                    <h3 class="font-semibold text-gray-900">Our Office</h3>
                                    <p class="text-gray-600">A-402, Channur Bhavan CHS., Ghanshyam Near Station, Dombivali West, Mumbai, Maharashtra 421202</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="flex-shrink-0 bg-red-50 p-3 rounded-full text-red-600">
                                    <i class="fas fa-phone-alt text-xl"></i>
                                </div>
                                <div class="ml-4">
                                    <h3 class="font-semibold text-gray-900">Call Us</h3>
                                    <p class="text-gray-600">+91 8655442429</p>
                                    <p class="text-gray-600">+91 9321473921</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="flex-shrink-0 bg-red-50 p-3 rounded-full text-red-600">
                                    <i class="fas fa-envelope text-xl"></i>
                                </div>
                                <div class="ml-4">
                                    <h3 class="font-semibold text-gray-900">Email Us</h3>
                                    <p class="text-gray-600">info@fingguinfotech.com</p>
                                    <p class="text-gray-600">support@fingguinfotech.com</p>
                                </div>
                            </div>
                            
                          
                       
                        
                        <div class="social-links">
                            <a href="#" class="social-link" aria-label="Facebook">
                                <i class="fab fa-facebook-f"></i>
                            </a>
                            <a href="#" class="social-link" aria-label="Twitter">
                                <i class="fab fa-twitter"></i>
                            </a>
                            <a href="#" class="social-link" aria-label="Instagram">
                                <i class="fab fa-instagram"></i>
                            </a>
                            <a href="#" class="social-link" aria-label="LinkedIn">
                                <i class="fab fa-linkedin-in"></i>
                            </a>
                            <a href="#" class="social-link" aria-label="WhatsApp">
                                <i class="fab fa-whatsapp"></i>
                            </a>
                        </div>
                        
                        <div class="working-hours">
                            <h4>Working Hours</h4>
                            <ul class="hours-list">
                                <li>
                                    <span class="day">Monday - Friday</span>
                                    <span class="time">9:00 AM - 8:00 PM</span>
                                </li>
                                <li>
                                    <span class="day">Saturday</span>
                                    <span class="time">10:00 AM - 6:00 PM</span>
                                </li>
                                <li>
                                    <span class="day">Sunday</span>
                                    <span class="time">Emergency Only</span>
                                </li>
                                <li>
                                    <span class="day">24/7 Support</span>
                                    <span class="time">Available</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Map Section with CTA -->
    <section class="py-16 md:py-24 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <div class="lg:col-span-2">
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                        <div class="h-96 w-full">
                            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3771.2648482941855!2d72.8785!3d19.0759837!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7c8f7b4f1e8b9%3A0xf8f1c3e9f1c3e9f1!2sFinggu%20Infotech!5e0!3m2!1sen!2sin!4v1620000000000!5m2!1sen!2sin" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                        </div>
                        <div class="p-6 text-center">
                            <h3 class="text-xl font-bold text-gray-900 mb-2">Visit Our Office</h3>
                            <p class="text-gray-600 mb-4">Schedule a meeting with our team to discuss your project in person.</p>
                            <a href="#contact-form" class="inline-block bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-6 rounded-md transition-colors">Book a Meeting</a>
                        </div>
                    </div>
                </div>
                
                <div class="lg:col-span-1">
                    <div class="bg-red-600 text-white p-8 rounded-lg h-full flex flex-col justify-center">
                        <h3 class="text-2xl font-bold mb-4">Need Help Immediately?</h3>
                        <p class="text-red-100 mb-6">For urgent inquiries or support, please call our 24/7 support line.</p>
                        <a href="tel:+918655442429" class="bg-white text-red-600 font-semibold py-3 px-6 rounded-md text-center inline-flex items-center justify-center hover:bg-gray-100 transition-colors">
                            <i class="fas fa-phone-alt mr-2"></i> Call Now
                        </a>
                        
                        <div class="mt-8 pt-8 border-t border-red-500">
                            <h4 class="text-lg font-semibold mb-3">Prefer WhatsApp?</h4>
                            <p class="text-red-100 mb-4">Chat with us on WhatsApp for quick responses.</p>
                            <a href="https://wa.me/918655442429" target="_blank" class="bg-green-500 hover:bg-green-600 text-white font-semibold py-3 px-6 rounded-md text-center inline-flex items-center justify-center transition-colors w-full">
                                <i class="fab fa-whatsapp mr-2"></i> Chat on WhatsApp
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- CTA Section -->
    <section class="py-16 md:py-24 bg-red-600 text-white">
        <div class="container mx-auto px-4 text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Start Your Project?</h2>
            <p class="text-xl mb-8 max-w-3xl mx-auto">Let's discuss how we can help you achieve your digital goals and take your business to the next level.</p>
            <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
                <a href="contact.html" class="bg-white hover:bg-gray-100 text-red-600 font-semibold py-3 px-8 rounded-md transition-colors inline-flex items-center justify-center">
                    Get Started
                </a>
                <a href="tel:+918655442429" class="bg-transparent hover:bg-red-700 text-white border-2 border-white font-semibold py-3 px-8 rounded-md transition-colors inline-flex items-center justify-center">
                    <i class="fas fa-phone-alt mr-2"></i> Call Us Now
                </a>
            </div>
        </div>
    </section>
    
    <!-- Include Footer -->
    <?php include 'includes/footer.html'; ?>
    
    <script>
        // Form submission handling
        document.getElementById('contactForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Get form data
            const formData = new FormData(this);
            const formObject = {};
            formData.forEach((value, key) => {
                formObject[key] = value;
            });
            
            // In a real implementation, you would send this data to a server
            console.log('Form submitted:', formObject);
            
            // Show success message
            alert('Thank you for your message! We will get back to you soon.');
            this.reset();
            
            // You would typically make an AJAX request here
            // fetch('your-api-endpoint', {
            //     method: 'POST',
            //     headers: {
            //         'Content-Type': 'application/json',
            //     },
            //     body: JSON.stringify(formObject),
            // })
            // .then(response => response.json())
            // .then(data => {
            //     alert('Thank you for your message! We will get back to you soon.');
            //     this.reset();
            // })
            // .catch((error) => {
            //     console.error('Error:', error);
            //     alert('There was an error sending your message. Please try again.');
            // });
        });
    </script>
   
</body>
</html>
