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

@section('content')
    <!-- Contact Section -->
    <section class="pt-[120px] pb-10 lg:pb-16 relative overflow-hidden">
        <!-- Decorative Background -->
        <div class="absolute inset-0">
            <div
                class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1519972064555-542444e71b54')] bg-cover bg-fixed opacity-5">
            </div>
        </div>

        <div class="container max-w-7xl mx-auto px-4 relative">
            <!-- Header Section -->
            <div class="text-center mb-12">
                <h2 class="text-4xl font-bold text-[#bb9555]">ติดต่อเรา</h2>
                <div class="w-24 h-0.5 bg-[#bb9555] mx-auto mt-4"></div>
            </div>

            <div class="flex flex-wrap lg:flex-nowrap gap-8">
                <!-- Contact Form Section -->
                <div class="w-full lg:w-7/12">
                    <div class="bg-white p-8 border border-gray-100 hover:border-[#bb9555] transition-all duration-300">
                        <h3 class="text-2xl md:text-3xl font-bold text-gray-900 mb-6">กรอกแบบฟอร์มติดต่อ</h3>

                        <form class="space-y-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <input type="text" placeholder="ชื่อ" required
                                        class="w-full px-4 py-3 border border-gray-100 focus:border-[#bb9555] focus:ring-0 transition-all duration-300">
                                </div>
                                <div>
                                    <input type="text" placeholder="นามสกุล" required
                                        class="w-full px-4 py-3 border border-gray-100 focus:border-[#bb9555] focus:ring-0 transition-all duration-300">
                                </div>
                            </div>

                            <div>
                                <input type="email" placeholder="อีเมล" required
                                    class="w-full px-4 py-3 border border-gray-100 focus:border-[#bb9555] focus:ring-0 transition-all duration-300">
                            </div>

                            <div>
                                <input type="text" placeholder="หัวข้อ" required
                                    class="w-full px-4 py-3 border border-gray-100 focus:border-[#bb9555] focus:ring-0 transition-all duration-300">
                            </div>

                            <div>
                                <textarea rows="5" placeholder="ข้อความถึงเรา"
                                    class="w-full px-4 py-3 border border-gray-100 focus:border-[#bb9555] focus:ring-0 transition-all duration-300"></textarea>
                            </div>

                            <div class="flex items-center space-x-2">
                                <input type="checkbox" id="privacy-policy" required
                                    class="w-4 h-4 text-[#bb9555] border border-gray-100 rounded focus:ring-[#bb9555]">
                                <label for="privacy-policy" class="text-base text-gray-600">
                                    ฉันยินยอมให้เก็บข้อมูลส่วนบุคคลตาม <a href="privacy"
                                        class="text-[#bb9555] hover:underline">นโยบายความเป็นส่วนตัว</a>
                                </label>
                            </div>

                            <img src="https://tmp1.theme.nd.co.th/modules/frontend/img/captcha.jpg">

                            <button type="submit"
                                class="w-full py-4 bg-gradient-to-r from-[#bb9555] to-[#bb9555] text-white hover:from-[#bb9555] hover:to-[#bb9555] transition-all duration-300">
                                ส่งข้อความ
                            </button>
                        </form>
                    </div>
                </div>

                <!-- Contact Info Section -->
                <div class="w-full lg:w-5/12">
                    <div class="bg-white p-8 border border-gray-100 hover:border-[#bb9555] transition-all duration-300">
                        <h3 class="text-2xl md:text-3xl font-bold text-gray-900 mb-6">ข้อมูลการติดต่อ</h3>
                        <div class="space-y-6">
                            <div
                                class="flex items-center p-4 border border-gray-100 group transition-all duration-300">
                                <span class="icon-[tabler--map-pin] size-6 text-[#bb9555] mr-4"></span>
                                <p>123 ถนนสุขุมวิท แขวงคลองเตย เขตคลองเตย กรุงเทพฯ 10110</p>
                            </div>

                            <div
                                class="flex items-center p-4 border border-gray-100 group placeholder:transition-all duration-300">
                                <span class="icon-[tabler--phone] size-6 text-[#bb9555] mr-4"></span>
                                <a href="tel:120-240-9600"
                                    class="hover:text-[#bb9555] transition-colors duration-300">120-240-9600</a>
                            </div>

                            <div
                                class="flex items-center p-4 border border-gray-100 group transition-all duration-300">
                                <span class="icon-[tabler--mail] size-6 text-[#bb9555] mr-4"></span>
                                <a href="mailto:tasty@contact.com"
                                    class="hover:text-[#bb9555] transition-colors duration-300">tasty@contact.com</a>
                            </div>
                        </div>

                        <!-- Google Maps iframe -->
                        <div class="mt-8 border border-gray-100">
                            <iframe
                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2000.1201234567!2d10.7366!3d59.9067!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNTnCsDU0JzI0LjIiTiAxMMKwNDQnMTEuOCJF!5e0!3m2!1sen!2sno!4v1234567890"
                                width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy">
                            </iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection