@extends('layouts.app')

@section('title', 'Contact Us')

@section('content')
    <div class="bg-[#FFF9E6] py-12">
        <div class="container mx-auto px-4">
            <h1 class="text-4xl font-bold text-center mb-8">Contact Us</h1>

            <!-- Contact Info & Map Section -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
                <!-- Contact Information -->
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h2 class="text-2xl font-bold mb-6">Get in Touch</h2>

                    <div class="space-y-6">
                        <!-- Address -->
                        <div class="flex items-start space-x-4">
                            <div class="flex-shrink-0">
                                <div class="w-10 h-10 bg-red-50 rounded-full flex items-center justify-center">
                                    <i class="fas fa-map-marker-alt text-red-700"></i>
                                </div>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg mb-1">Temple Address</h3>
                                <p class="text-gray-600">
                                    Sri Vidya Saraswathi Shani Temples<br>
                                    (V) & (M) Wargal, Dist. Siddipet<br>
                                    Telangana - 502279<br>
                                    India
                                </p>
                            </div>
                        </div>

                        <!-- Phone Numbers -->
                        <div class="flex items-start space-x-4">
                            <div class="flex-shrink-0">
                                <div class="w-10 h-10 bg-red-50 rounded-full flex items-center justify-center">
                                    <i class="fas fa-phone-alt text-red-700"></i>
                                </div>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg mb-1">Phone Numbers</h3>
                                <p class="text-gray-600">
                                    +91 92481 51122<br>
                                    +91 92478 51122
                                </p>
                            </div>
                        </div>

                        <!-- Email -->
                        <div class="flex items-start space-x-4">
                            <div class="flex-shrink-0">
                                <div class="w-10 h-10 bg-red-50 rounded-full flex items-center justify-center">
                                    <i class="fas fa-envelope text-red-700"></i>
                                </div>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg mb-1">Email</h3>
                                <p class="text-gray-600">
        
                                    Support: svsstemples.wargal@gmail.com
                                </p>
                            </div>
                        </div>

                        <!-- Social Media -->
                        <div class="flex items-start space-x-4">
                            <div class="flex-shrink-0">
                                <div class="w-10 h-10 bg-red-50 rounded-full flex items-center justify-center">
                                    <i class="fas fa-share-alt text-red-700"></i>
                                </div>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg mb-2">Connect With Us</h3>
                                <div class="flex space-x-4">
                                    <a href="https://www.facebook.com/share/1B4MRoqZ9m/" target="_blank" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-gray-200 transition-colors duration-300">
                                        <i class="fab fa-facebook-f text-blue-600"></i>
                                    </a>
                                    <a href="https://www.instagram.com/svsstvargalofficial?igsh=eHdyMWF5bHM1a3Fl" target="_blank" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-gray-200 transition-colors duration-300">
                                        <i class="fab fa-instagram text-pink-600"></i>
                                    </a>
                                    <a href="https://youtube.com/@wargalsaraswatham" target="_blank" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-gray-200 transition-colors duration-300">
                                        <i class="fab fa-youtube text-red-600"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Google Map -->
                <div class="bg-white rounded-lg shadow-md overflow-hidden">
                    <div class="">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3799.466234384205!2d78.61839147557268!3d17.769772091676092!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bcc7e5197a9ca27%3A0x1637a4125d8c58e5!2sSri%20Vidya%20Saraswathi%20Shani%20Temples%20Wargal!5e0!3m2!1sen!2sin!4v1745751595252!5m2!1sen!2sin" width="100%" height="590" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
            </div>

            <!-- YouTube Video Gallery -->
            <div class="mb-12">
                <h2 class="text-2xl font-bold mb-6">Featured Videos</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <!-- Video 1 -->
                    <div class="bg-white rounded-lg shadow-md overflow-hidden">
                        <div class="aspect-w-16 aspect-h-9">
                            <iframe
                                src="https://www.youtube.com/embed/vdixJGyBhLE"
                                frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                allowfullscreen>
                            </iframe>
                        </div>
                        <div class="p-4">
                            <h3 class="font-semibold mb-2">Temple Drone Visuals</h3>
                            <p class="text-gray-600 text-sm">Soaring Above the Divine: A Breathtaking Drone Journey of Sri Vidya Saraswathi Shani Temples</p>
                        </div>
                    </div>

                    <!-- Video 2 -->
                    <div class="bg-white rounded-lg shadow-md overflow-hidden">
                        <div class="aspect-w-16 aspect-h-9">
                            <iframe
                                src="https://www.youtube.com/embed/sbXqDtXMfs0"
                                frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                allowfullscreen>
                            </iframe>
                        </div>
                        <div class="p-4">
                            <h3 class="font-semibold mb-2">Vasantha Panchami Celebrations</h3>
                            <p class="text-gray-600 text-sm">Vasantha Panchami 2025: Invoking the Blessings of Goddess Saraswati</p>
                        </div>
                    </div>

                    <!-- Video 3 -->
                    <div class="bg-white rounded-lg shadow-md overflow-hidden">
                        <div class="aspect-w-16 aspect-h-9">
                            <iframe
                                src="https://www.youtube.com/embed/rTOTBBq6NnU"
                                frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                allowfullscreen>
                            </iframe>
                        </div>
                        <div class="p-4">
                            <h3 class="font-semibold mb-2">Sri Sri Sri Vijayendra Saraswathi Swamy's Spiritual Talk</h3>
                            <p class="text-gray-600 text-sm">Divine Discourse: His Holiness Sri Vijayendra Saraswathi Swamy's Blessings</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact Form Section -->
            {{-- <div class="max-w-2xl mx-auto">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h2 class="text-2xl font-bold mb-6">Send us a Message</h2>
                    <form action="{{ route('contact.submit') }}" method="POST" class="space-y-4">
                        @csrf
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
                            <input type="text" id="name" name="name" required
                                class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-red-500 focus:border-red-500">
                        </div>
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                            <input type="email" id="email" name="email" required
                                class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-red-500 focus:border-red-500">
                        </div>
                        <div>
                            <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label>
                            <input type="text" id="subject" name="subject" required
                                class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-red-500 focus:border-red-500">
                        </div>
                        <div>
                            <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
                            <textarea id="message" name="message" rows="4" required
                                class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-red-500 focus:border-red-500"></textarea>
                        </div>
                        <button type="submit"
                            class="w-full bg-red-700 text-white py-2 px-4 rounded-md hover:bg-red-800 transition-colors duration-300">
                            Send Message
                        </button>
                    </form>
                </div>
            </div> --}}
        </div>
    </div>
@endsection

@push('styles')
<style>
    .aspect-w-16 {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    }
    .aspect-w-16 iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>
@endpush