@extends('frontend::layouts.master')

@section('content')
    <div class="pt-24 md:pt-32 pb-10 lg:pb-16 ">
        <div class="container mx-auto px-4">
            <h1
                class="text-4xl md:text-5xl font-bold text-center bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent mb-5 lg:mb-12">
                Contact Us
            </h1>

            <div class="grid md:grid-cols-2 gap-12">
                <!-- Contact Information -->
                <div class="space-y-8">
                    <div class="backdrop-blur-sm bg-white/5 rounded-2xl p-6 border border-white/10">
                        <h3 class="text-2xl font-bold text-white mb-4">Our Office</h3>
                        <div class="space-y-4 text-gray-300">
                            <p class="flex items-center gap-3">
                                <svg class="w-5 h-5 text-purple-400" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                </svg>
                                123 Gaming Street, Digital City, 10110
                            </p>
                            <p class="flex items-center gap-3">
                                <svg class="w-5 h-5 text-purple-400" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                                </svg>
                                +66 2 123 4567
                            </p>
                            <p class="flex items-center gap-3">
                                <svg class="w-5 h-5 text-purple-400" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                </svg>
                                contact@company.com
                            </p>
                            <p class="flex items-center gap-3">
                                <svg class="w-5 h-5 text-purple-400" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                                Business Hours:
                            </p>
                            <div class="ml-8 space-y-2">
                                <p>Monday - Friday: 9:00 AM - 6:00 PM</p>
                                <p>Saturday: 9:00 AM - 1:00 PM</p>
                                <p>Sunday: Closed</p>
                            </div>
                        </div>
                    </div>

                    <!-- Map -->
                    <div class="rounded-2xl overflow-hidden h-[400px]">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3875.5438161839365!2d100.56324937580673!3d13.756717597998641!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30e29d4918d39f69%3A0x7c82b5cfcd94f79c!2sEmQuartier!5e0!3m2!1sen!2sth!4v1709881612736!5m2!1sen!2sth"
                            width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade">
                        </iframe>
                    </div>
                </div>

                <!-- Contact Form -->
                <div class="backdrop-blur-sm bg-white/5 rounded-2xl p-6 border border-white/10">
                    <h3 class="text-2xl font-bold text-white mb-6">Send us a message</h3>
                    <form class="space-y-6">
                        <div>
                            <label class="block text-gray-300 mb-2">Full Name</label>
                            <input type="text"
                                class="w-full px-4 py-3 rounded-xl bg-white/5 border border-white/10 text-white focus:border-purple-500 focus:ring-purple-500">
                        </div>
                        <div>
                            <label class="block text-gray-300 mb-2">Email</label>
                            <input type="email"
                                class="w-full px-4 py-3 rounded-xl bg-white/5 border border-white/10 text-white focus:border-purple-500 focus:ring-purple-500">
                        </div>
                        <div>
                            <label class="block text-gray-300 mb-2">Subject</label>
                            <input type="text"
                                class="w-full px-4 py-3 rounded-xl bg-white/5 border border-white/10 text-white focus:border-purple-500 focus:ring-purple-500">
                        </div>
                        <div>
                            <label class="block text-gray-300 mb-2">Message</label>
                            <textarea rows="4"
                                class="w-full px-4 py-3 rounded-xl bg-white/5 border border-white/10 text-white focus:border-purple-500 focus:ring-purple-500"></textarea>
                        </div>
                        <div class="flex items-start">
                            <input type="checkbox"
                                class="mt-1 rounded border-gray-600 text-purple-600 focus:ring-purple-500">
                            <label class="ml-2 text-base text-gray-400">
                                I agree and accept the <a href="privacy"
                                    class="underline hover:text-purple-400 transition-colors duration-300">Privacy
                                    Policy</a>
                            </label>
                        </div>
                        <picture class="flex items-center justify-between">
                            <img src="https://tmp1.theme.nd.co.th/modules/frontend/img/captcha.jpg" >
                        </picture>
                        <button type="submit"
                            class="w-full px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-xl hover:from-purple-700 hover:to-pink-700 transform hover:-translate-y-1 transition-all duration-300">
                            Send Message
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection