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

@section('content')
    <section class="bg-gray-50">
        <div class="relative text-center py-10 lg:py-16 overflow-hidden">
            <h1 class="text-9xl font-black text-gray-100/10 tracking-wider z-10 relative">
                CONTACT US
            </h1>
            <div class="top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full z-10 relative">
                <h2 class="text-6xl font-bold text-primary-600">
                    Get In Touch
                </h2>
                <p class="mt-4 text-xl text-gray-600">
                    Let's Start a Conversation
                </p>
            </div>
            <div
                class="absolute bottom-10 left-1/2 -translate-x-1/2 text-[120px] font-black text-white tracking-[0.2em] z-0">
                CONTACT
            </div>
        </div>


        <div class="container mx-auto px-4 pb-5">
            <div class="max-w-7xl mx-auto">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div class="bg-white p-8 rounded-3xl border border-gray-100">
                        <div class="w-16 h-16 bg-emerald-100 rounded-2xl flex items-center justify-center mb-6">
                            <svg class="w-8 h-8 text-emerald-500" 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>
                        </div>
                        <h3 class="text-2xl font-bold mb-4">Our Location</h3>
                        <p class="text-gray-600">
                            123 Wellness Street, Bangkok 10110
                        </p>
                    </div>

                    <div class="bg-white p-8 rounded-3xl border border-gray-100">
                        <div class="w-16 h-16 bg-emerald-100 rounded-2xl flex items-center justify-center mb-6">
                            <svg class="w-8 h-8 text-emerald-500" 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>
                        </div>
                        <h3 class="text-2xl font-bold mb-4">Business Hours</h3>
                        <ul class="space-y-2 text-gray-600">
                            <li>Monday - Friday: 9:00 AM - 6:00 PM</li>
                            <li>Saturday: 9:00 AM - 5:00 PM</li>
                            <li>Sunday: Closed</li>
                        </ul>
                    </div>

                    <div class="bg-white p-8 rounded-3xl border border-gray-100">
                        <div class="w-16 h-16 bg-emerald-100 rounded-2xl flex items-center justify-center mb-6">
                            <svg class="w-8 h-8 text-emerald-500" 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>
                        </div>
                        <h3 class="text-2xl font-bold mb-4">Contact Info</h3>
                        <ul class="space-y-2 text-gray-600">
                            <li>Phone: +66 2 123 4567</li>
                            <li>Email: info@company.com</li>
                            <li>Fax: +66 2 123 4568</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="max-w-7xl mx-auto pt-10">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-5">
                    <div>
                        <div class="bg-white rounded-[40px] p-12 border border-gray-100">
                            <h3 class="text-3xl font-bold text-center pb-4">Send us a Message</h3>
                            <form class="space-y-6">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div class="relative">
                                        <input type="text" placeholder="Full Name" required
                                            class="w-full px-6 py-4 rounded-2xl border border-gray-200 focus:border-emerald-500 focus:ring-0 transition-colors bg-white placeholder-gray-400">
                                        <div class="absolute right-4 top-4 text-emerald-500">*</div>
                                    </div>
                                    <div class="relative">
                                        <input type="email" placeholder="Email Address" required
                                            class="w-full px-6 py-4 rounded-2xl border border-gray-200 focus:border-emerald-500 focus:ring-0 transition-colors bg-white placeholder-gray-400">
                                        <div class="absolute right-4 top-4 text-emerald-500">*</div>
                                    </div>
                                </div>

                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <input type="tel" placeholder="Phone Number"
                                        class="w-full px-6 py-4 rounded-2xl border border-gray-200 focus:border-emerald-500 focus:ring-0 transition-colors bg-white placeholder-gray-400">
                                    <div class="relative">
                                        <input type="text" placeholder="Subject" required
                                            class="w-full px-6 py-4 rounded-2xl border border-gray-200 focus:border-emerald-500 focus:ring-0 transition-colors bg-white placeholder-gray-400">
                                        <div class="absolute right-4 top-4 text-emerald-500">*</div>
                                    </div>
                                </div>

                                <div class="relative">
                                    <textarea placeholder="Your Message" rows="4" required
                                        class="w-full px-6 py-4 rounded-2xl border border-gray-200 focus:border-emerald-500 focus:ring-0 transition-colors bg-white placeholder-gray-400"></textarea>
                                    <div class="absolute right-4 top-4 text-emerald-500">*</div>
                                </div>

                                <div class="flex items-center space-x-3">
                                    <input type="checkbox" required
                                        class="w-4 h-4 rounded border-2 border-gray-300 text-emerald-500 focus:ring-emerald-500">
                                    <span class="text-base text-gray-600">I agree to the <a href="/privacy"
                                            class="text-emerald-500 hover:text-emerald-600">Privacy Policy</a></span>
                                </div>

                                <picture class="block">
                                    <img src="https://tmp1.theme.nd.co.th/modules/frontend/img/captcha.jpg"
                                        class="rounded-xl">
                                </picture>

                                <button type="submit"
                                    class="inline-flex justify-center gap-2 items-center w-full text-lg text-white backdrop-blur-md lg:font-semibold isolation-auto border-emerald-500 before:absolute before:w-full before:transition-all before:duration-700 before:hover:w-full before:-left-full before:hover:left-0 before:rounded-full before:bg-white hover:text-emerald-500 before:-z-10 before:aspect-square before:hover:scale-150 before:hover:duration-700 relative z-10 px-4 py-2 overflow-hidden border-2 rounded-full group bg-emerald-500">
                                    Send Message
                                    <svg class="w-8 h-8 justify-end group-hover:rotate-90 group-hover:bg-white text-white ease-linear duration-300 rounded-full group-hover:border-none p-2 rotate-45"
                                        viewBox="0 0 16 19" xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M7 18C7 18.5523 7.44772 19 8 19C8.55228 19 9 18.5523 9 18H7ZM8.70711 0.292893C8.31658 -0.0976311 7.68342 -0.0976311 7.29289 0.292893L0.928932 6.65685C0.538408 7.04738 0.538408 7.68054 0.928932 8.07107C1.31946 8.46159 1.95262 8.46159 2.34315 8.07107L8 2.41421L13.6569 8.07107C14.0474 8.46159 14.6805 8.46159 15.0711 8.07107C15.4616 7.68054 15.4616 7.04738 15.0711 6.65685L8.70711 0.292893ZM9 18L9 1H7L7 18H9Z"
                                            class="fill-white group-hover:fill-emerald-500"></path>
                                    </svg>
                                </button>
                            </form>
                        </div>
                    </div>

                    <!-- Google Maps Section -->
                    <div class="h-full min-h-[600px] rounded-[40px] overflow-hidden">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3875.5377202252507!2d100.56324431527565!3d13.756624590346315!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30e29d4918d39f69%3A0x3e69d96bf8c52587!2sEmQuartier!5e0!3m2!1sen!2sth!4v1635164828989!5m2!1sen!2sth"
                            width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy">
                        </iframe>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection