<?php include 'header.php'; ?>

<!-- ⭐️ 1. ADD THIS SCRIPT to the <head> of your file -->
<!-- (It's best to put this in header.php, but here is fine) -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<!-- End of script -->

<div class="relative bg-gray-100"> 
    <div class="relative max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8 lg:grid lg:grid-cols-5 lg:gap-8">
        
        <!-- Contact Information Section -->
        <div class="lg:col-span-2">
            <h2 class="text-3xl font-extrabold tracking-tight text-ucf-charcoal sm:text-4xl">Get in touch</h2>
            <p class="mt-4 text-lg leading-6 text-gray-600">
                We'd love to hear from you! Here's how you can reach us for any inquiries.
            </p>
            
            <div class="mt-10 grid grid-cols-1 gap-6">
                <!-- Address Card -->
                <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 transform hover:-translate-y-1">
                    <div class="flex items-center justify-center h-16 w-16 rounded-full bg-ucf-green-light mx-auto mb-4">
                        <i class="fa-solid fa-location-dot h-8 w-8 text-ucf-green-dark"></i>
                    </div>
                    <h3 class="text-xl font-bold text-ucf-charcoal text-center">Our Address</h3>
                    <p class="mt-2 text-base text-gray-700 text-center">
                        Ongole, Andhra Pradesh<br>India
                    </p>
                </div>

                <!-- Phone Card -->
                <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 transform hover:-translate-y-1">
                    <div class="flex items-center justify-center h-16 w-16 rounded-full bg-ucf-green-light mx-auto mb-4">
                        <i class="fa-solid fa-phone h-8 w-8 text-ucf-green-dark"></i>
                    </div>
                    <h3 class="text-xl font-bold text-ucf-charcoal text-center">Phone Number</h3>
                    <p class="mt-2 text-base text-gray-700 text-center">
                        <a href="tel:+919490026977" class="hover:text-ucf-green-dark transition-colors duration-300">+91-9490026977</a>
                    </p>
                </div>

                <!-- Email Card -->
                <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 transform hover:-translate-y-1">
                    <div class="flex items-center justify-center h-16 w-16 rounded-full bg-ucf-green-light mx-auto mb-4">
                        <i class="fa-solid fa-envelope h-8 w-8 text-ucf-green-dark"></i>
                    </div>
                    <h3 class="text-xl font-bold text-ucf-charcoal text-center">Email Address</h3>
                    <p class="mt-2 text-base text-gray-700 text-center">
                       <a href="mailto:info@unitedculturalforum.com" class="hover:text-ucf-green-dark transition-colors duration-300">info@unitedculturalforum.com</a>
                    </p>
                </div>
            </div>
        </div>

        <!-- Contact Form Section -->
        <div class="lg:col-span-3 mt-12 lg:mt-0">
            <h2 class="text-3xl font-extrabold tracking-tight text-ucf-charcoal sm:text-4xl">Send us a Message</h2>
            
            <!-- ⭐️ 2. ADDED A NEW ERROR MESSAGE FOR 'captcha_failed' -->
            <?php if (isset($_GET['status'])): ?>
                <?php if ($_GET['status'] == 'success'): ?>
                    <div class="rounded-md bg-green-50 p-4 my-6">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fa-solid fa-check-circle h-5 w-5 text-green-400"></i>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm font-medium text-green-800">Thank you! Your message has been sent successfully.</p>
                            </div>
                        </div>
                    </div>
                <?php elseif ($_GET['status'] == 'captcha_failed'): ?>
                    <div class="rounded-md bg-red-50 p-4 my-6">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fa-solid fa-times-circle h-5 w-5 text-red-400"></i>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm font-medium text-red-800">Spam check failed. Please check the "I'm not a robot" box and try again.</p>
                            </div>
                        </div>
                    </div>
                <?php else: ?>
                    <p class="mt-4 text-lg leading-6 text-gray-600">
                        Use the form below to send us a message directly.
                    </p>
                <?php endif; ?>
            <?php else: ?>
                <p class="mt-4 text-lg leading-6 text-gray-600">
                    Use the form below to send us a message directly.
                </p>
            <?php endif; ?>
            
            <form action="contact_handler.php" method="POST" class="grid grid-cols-1 gap-y-6 mt-8">
                <div>
                    <label for="full-name" class="sr-only">Full name</label>
                    <input type="text" name="full-name" id="full-name" required autocomplete="name" class="block w-full shadow-sm py-3 px-4 placeholder-gray-400 focus:ring-ucf-green focus:border-ucf-green border-gray-300 rounded-md" placeholder="Full name">
                </div>
                <div>
                    <label for="email" class="sr-only">Email</label>
                    <input id="email" name="email" type="email" required autocomplete="email" class="block w-full shadow-sm py-3 px-4 placeholder-gray-400 focus:ring-ucf-green focus:border-ucf-green border-gray-300 rounded-md" placeholder="Email">
                </div>
                <div>
                    <label for="phone" class="sr-only">Phone</label>
                    <input type="text" name="phone" id="phone" autocomplete="tel" class="block w-full shadow-sm py-3 px-4 placeholder-gray-400 focus:ring-ucf-green focus:border-ucf-green border-gray-300 rounded-md" placeholder="Phone (Optional)">
                </div>
                <div>
                    <label for="message" class="sr-only">Message</label>
                    <textarea id="message" name="message" rows="4" required class="block w-full shadow-sm py-3 px-4 placeholder-gray-400 focus:ring-ucf-green focus:border-ucf-green border-gray-300 rounded-md" placeholder="Your message..."></textarea>
                </div>
                
                <!-- ⭐️ 3. ADD THE reCAPTCHA BOX HERE -->
                <div class="g-recaptcha" data-sitekey="6LfyhQwsAAAAANPg7iRzyDaE9KjsXnjTUg0ltna9"></div>
                <!-- 
                    (Make sure to replace YOUR_SITE_KEY_HERE 
                     with the key from your Google reCAPTCHA admin page)
                -->

                <div>
                    <button type="submit" class="inline-flex justify-center py-3 px-6 border border-transparent shadow-sm text-base font-medium rounded-md text-white bg-ucf-green hover:bg-ucf-green-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-ucf-green w-full sm:w-auto">
                        Send Message
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Map Section -->
<div class="bg-gray-50">
    <div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-extrabold text-center text-ucf-charcoal mb-8">Our Location</h2>
        <div class="aspect-w-16 aspect-h-9 rounded-xl overflow-hidden shadow-lg">
            <iframe 
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3849.522960351701!2d80.0464972148479!3d15.506086120029169!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMTXCsDMwJzIxLjkiTiA4MMKwMDInNTYuNyJF!5e0!3m2!1sen!2sus!4v1668612345678!5m2!1sen!2sus" 
                width="100%" 
                height="450" 
                style="border:0;" 
                allowfullscreen="" 
                loading="lazy" 
                referrerpolicy="no-referrer-when-downgrade">
            </iframe>
        </div>
    </div>
</div>

<?php include 'footer.php'; ?>