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

<!-- Page Header -->
<section class="py-5 text-white" style="background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);">
    <div class="container py-3 text-center">
        <h1 class="outfit fw-bold display-4">Contact Us</h1>
        <p class="mb-0 text-white-50">Have questions? Get in touch with our factory or sales team.</p>
    </div>
</section>

<section class="py-5 bg-white">
    <div class="container py-4">
        <div class="row g-5">
            <!-- Left Info Column -->
            <div class="col-lg-5">
                <span class="section-subtitle">Reach Us Direct</span>
                <h2 class="outfit fw-bold text-dark mb-4">Contact Information</h2>
                <p class="text-secondary mb-4">
                    For bulk purchase orders, dealership inquiries, or product samples, feel free to visit our office or call us directly. Our customer service team is happy to assist you.
                </p>
                
                <div class="d-flex align-items-start mb-4">
                    <div class="text-primary fs-4 me-3"><i class="fa-solid fa-location-dot"></i></div>
                    <div>
                        <h6 class="outfit fw-bold mb-1">Corporate Address</h6>
                        <p class="small text-secondary mb-0">
                            <strong>Veluno Industries</strong><br>
                            219, Tiljala Rd, Gobra,<br>
                            Kolkata, West Bengal 700046
                        </p>
                    </div>
                </div>
                
                <div class="d-flex align-items-start mb-4">
                    <div class="text-primary fs-4 me-3"><i class="fa-solid fa-phone"></i></div>
                    <div>
                        <h6 class="outfit fw-bold mb-1">Phone Number</h6>
                        <p class="small text-secondary mb-0">
                            <a href="tel:+917003549432" class="text-decoration-none text-secondary hover-light">+91 7003549432</a>
                        </p>
                    </div>
                </div>
                
                <div class="d-flex align-items-start mb-4">
                    <div class="text-primary fs-4 me-3"><i class="fa-solid fa-envelope"></i></div>
                    <div>
                        <h6 class="outfit fw-bold mb-1">Email Address</h6>
                        <p class="small text-secondary mb-0">
                            <a href="mailto:info@veluno.in" class="text-decoration-none text-secondary hover-light">info@veluno.in</a>
                        </p>
                    </div>
                </div>

                <div class="d-flex align-items-start mb-4">
                    <div class="text-primary fs-4 me-3"><i class="fa-solid fa-clock"></i></div>
                    <div>
                        <h6 class="outfit fw-bold mb-1">Business Hours</h6>
                        <p class="small text-secondary mb-0">
                            Monday - Saturday: 10:00 AM - 6:30 PM<br>
                            Sunday: Closed
                        </p>
                    </div>
                </div>
                
                <!-- Social media -->
                <div class="mt-4 pt-3 border-top">
                    <h6 class="outfit fw-bold mb-2">Follow Us</h6>
                    <div class="d-flex gap-3">
                        <a href="#" class="btn btn-outline-primary btn-sm rounded-circle d-flex align-items-center justify-content-center" style="width: 35px; height: 35px;"><i class="fa-brands fa-facebook"></i></a>
                        <a href="#" class="btn btn-outline-primary btn-sm rounded-circle d-flex align-items-center justify-content-center" style="width: 35px; height: 35px;"><i class="fa-brands fa-instagram"></i></a>
                        <a href="#" class="btn btn-outline-primary btn-sm rounded-circle d-flex align-items-center justify-content-center" style="width: 35px; height: 35px;"><i class="fa-brands fa-linkedin"></i></a>
                    </div>
                </div>
            </div>
            
            <!-- Right Form Column -->
            <div class="col-lg-7">
                <div class="card border-0 shadow-lg p-4 p-md-5 rounded-4 bg-light">
                    <h3 class="outfit fw-bold mb-2 text-primary">Send A Message</h3>
                    <p class="small text-secondary mb-4">Have general queries? Fill in the details below and we will revert back within 24 hours.</p>
                    
                    <form action="send-enquiry.php" method="POST" class="needs-validation" novalidate>
                        <input type="hidden" name="form_type" value="general_contact">
                        
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label small fw-semibold text-secondary">Your Name *</label>
                                <input type="text" class="form-control bg-white" name="name" required placeholder="E.g., Anil Kumar">
                                <div class="invalid-feedback">Please enter your name.</div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-semibold text-secondary">Mobile Number *</label>
                                <input type="tel" class="form-control bg-white" name="phone" pattern="[0-9]{10}" required placeholder="10-digit mobile number">
                                <div class="invalid-feedback">Please enter valid mobile.</div>
                            </div>
                            <div class="col-12">
                                <label class="form-label small fw-semibold text-secondary">Email Address *</label>
                                <input type="email" class="form-control bg-white" name="email" required placeholder="E.g., name@company.com">
                                <div class="invalid-feedback">Please enter email.</div>
                            </div>
                            <div class="col-12">
                                <label class="form-label small fw-semibold text-secondary">Subject *</label>
                                <input type="text" class="form-control bg-white" name="subject" required placeholder="E.g., Price list request for HEXA series">
                                <div class="invalid-feedback">Please enter a subject.</div>
                            </div>
                            <div class="col-12">
                                <label class="form-label small fw-semibold text-secondary">Your Message *</label>
                                <textarea class="form-control bg-white" name="message" rows="5" required placeholder="Write your message here..."></textarea>
                                <div class="invalid-feedback">Please enter your message.</div>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary w-100 py-3 fw-bold rounded-3 mt-2">Send Message</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Maps Section -->
<section class="py-0">
    <div class="w-100" style="height: 450px;">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3685.078388622748!2d88.37228007593974!3d22.538736134209334!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a0277000c42e1e3%3A0xa846ae8a3f104801!2sVeluno%20Industries%20Private%20Limited!5e0!3m2!1sen!2sin!4v1782213624041!5m2!1sen!2sin" 
                width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>
</section>

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