<?php 
error_reporting(E_ALL);
ini_set('display_errors', 1);
include 'includes/header.php'; 
include 'includes/navbar.php'; 
?>

<!-- Premium Contact Hero -->
<div class="contact-hero" style="min-height: 60vh; background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.pexels.com/photos/338504/pexels-photo-338504.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; padding-top: 100px; padding-bottom: 150px;">
    <div class="container">
        <h6 class="reveal-up hero-subtitle" style="letter-spacing: 5px; text-transform: uppercase; color: var(--primary);">Get in Touch</h6>
        <h1 class="fw-bold reveal-up hero-title" style="letter-spacing: -2px;">CONTACT METHSISILA TOURS</h1>
        <p class="lead reveal-up hero-text" style="max-width: 600px; margin: 20px auto 0;">We are here to help you plan your next global adventure. Reach out to us for personalized travel arrangements.</p>
    </div>
</div>

<section class="py-5" style="background: #fff; margin-top: -100px; position: relative; z-index: 10;">
    <div class="container">
        <div class="row g-4">
            <!-- Contact Info Cards (Staggered) -->
            <div class="col-md-4 reveal-up">
                <div class="contact-card" style="background: #fff; padding: 50px; border-radius: 40px; box-shadow: 0 30px 60px rgba(0,0,0,0.08); height: 100%; transition: 0.4s;">
                    <div style="width: 70px; height: 70px; background: #fdf5f0; color: var(--primary); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 30px; margin-bottom: 30px;">
                        <i class="fas fa-phone-alt"></i>
                    </div>
                    <h4 class="fw-bold mb-3">Call Us</h4>
                    <p class="text-muted mb-0">Hotlines: +94 77 195 7420 / +94 777 291189</p>
                    <p class="text-muted">Office: +94 38 2289880 / +94 70 1111339</p>
                </div>
            </div>
            <div class="col-md-4 reveal-up" style="margin-top: 40px;">
                <div class="contact-card" style="background: var(--primary); color: #fff; padding: 50px; border-radius: 40px; box-shadow: 0 30px 60px rgba(255,107,0,0.2); height: 100%; transition: 0.4s;">
                    <div style="width: 70px; height: 70px; background: rgba(255,255,255,0.2); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 30px; margin-bottom: 30px;">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <h4 class="fw-bold mb-3">Email Us</h4>
                    <p class="mb-0">methsisilatours@gmail.com</p>
                    <p>ranga@methsisilatours.com / lanka@methsisilatours.com</p>
                </div>
            </div>
            <div class="col-md-4 reveal-up">
                <div class="contact-card" style="background: #fff; padding: 50px; border-radius: 40px; box-shadow: 0 30px 60px rgba(0,0,0,0.08); height: 100%; transition: 0.4s;">
                    <div style="width: 70px; height: 70px; background: #fdf5f0; color: var(--primary); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 30px; margin-bottom: 30px;">
                        <i class="fas fa-map-marker-alt"></i>
                    </div>
                    <h4 class="fw-bold mb-3">Our Office</h4>
                    <p class="text-muted mb-0">No 14, Sangamittarama road, Ramukkana, Bandaragama, Sri lanka</p>
                </div>
            </div>
        </div>

        <!-- Contact Form & Map -->
        <div class="row mt-5 pt-5 align-items-center">
            <div class="col-lg-6 reveal-left">
                <div class="pe-lg-5">
                    <h2 class="display-5 fw-bold mb-4" style="letter-spacing: -1px;">HAVE A QUESTION? <br> DROP US A LINE.</h2>
                    <p class="text-muted mb-5">Fill out the form below and our travel experts will get back to you within 24 hours.</p>
                    
                    <form action="process-contact.php" method="POST">
                        <div class="row g-4">
                            <div class="col-md-6">
                                <input type="text" name="name" class="form-control border-0 bg-light p-4" style="border-radius: 20px;" placeholder="Your Name" required>
                            </div>
                            <div class="col-md-6">
                                <input type="email" name="email" class="form-control border-0 bg-light p-4" style="border-radius: 20px;" placeholder="Your Email" required>
                            </div>
                            <div class="col-12">
                                <input type="text" name="subject" class="form-control border-0 bg-light p-4" style="border-radius: 20px;" placeholder="Subject">
                            </div>
                            <div class="col-12">
                                <textarea name="message" class="form-control border-0 bg-light p-4" style="border-radius: 20px;" rows="5" placeholder="Your Message" required></textarea>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary w-100 py-4 rounded-pill fw-bold text-uppercase" style="letter-spacing: 2px;">Send Message</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-lg-6 reveal-right mt-5 mt-lg-0">
                <div style="height: 600px; border-radius: 40px; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,0.1);">
                    <iframe 
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d126743.585859!2d79.861243!3d6.927079!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae2593cf65a1e9d%3A0x531390466b0a1a0!2sColombo!5e0!3m2!1sen!2slk!4v1650000000000!5m2!1sen!2slk" 
                        width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
.contact-card:hover {
    transform: translateY(-10px);
}
input:focus, textarea:focus {
    box-shadow: 0 10px 30px rgba(255,107,0,0.1) !important;
    background: #fff !important;
    border: 1px solid var(--primary) !important;
}
.hero-title { font-size: 80px; }
.hero-subtitle { font-size: 18px; }

/* Visibility Fix */
.reveal-up, .reveal-left, .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

@media (max-width: 768px) {
    .contact-hero {
        margin-top: 150px !important;
        padding-top: 50px !important;
        padding-bottom: 80px !important;
        min-height: auto !important;
    }
    .hero-title {
        font-size: 36px !important;
        line-height: 1.2;
    }
    .hero-subtitle {
        font-size: 14px !important;
        letter-spacing: 3px !important;
    }
    .hero-text {
        font-size: 16px !important;
    }
    section {
        margin-top: -50px !important;
        padding-top: 50px !important;
    }
    .contact-card {
        padding: 30px !important;
    }
    .col-md-4.reveal-up {
        margin-top: 0 !important;
        margin-bottom: 20px;
    }
}
</style>

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