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

@section('content')
    <!-- Hero Section -->
    <section class="py-16 bg-gradient-to-br from-sky-50 via-white to-sky-50 relative overflow-hidden">
        <!-- Decorative Elements -->
        <div class="absolute inset-0 overflow-hidden">
            <div class="absolute -top-8 -left-8 w-32 h-32 bg-sky-200 rounded-full blur-3xl opacity-30 animate-pulse"></div>
            <div class="absolute bottom-0 right-0 w-24 h-24 bg-sky-300 rounded-full blur-3xl opacity-20 animate-pulse delay-1000"></div>
            <div class="absolute top-1/2 left-1/3 w-28 h-28 bg-sky-100 rounded-full blur-3xl opacity-25 animate-pulse delay-500"></div>
        </div>

        <div class="container mx-auto px-4 relative">
            <div class="text-center max-w-3xl mx-auto">
                <span class="inline-block px-4 py-2 bg-sky-100 text-sky-800 rounded-full text-sm mb-4">Contact</span>
                <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">ติดต่อเรา</h1>
                <p class="text-gray-600 text-xl">พร้อมให้คำปรึกษาและบริการคุณด้วยทีมงานมืออาชีพ</p>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section class="py-16">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
                <!-- Contact Form -->
                <div class="bg-white p-8 rounded-2xl border border-gray-100 h-full flex flex-col">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6">ส่งข้อความถึงเรา</h2>
                    <form class="space-y-6 flex flex-col flex-grow">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-gray-700 font-medium mb-2">ชื่อ</label>
                                <input type="text" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-sky-400 focus:ring-2 focus:ring-sky-100 transition-all outline-none" placeholder="กรอกชื่อของคุณ">
                            </div>
                            <div>
                                <label class="block text-gray-700 font-medium mb-2">อีเมล</label>
                                <input type="email" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-sky-400 focus:ring-2 focus:ring-sky-100 transition-all outline-none" placeholder="example@email.com">
                            </div>
                        </div>
                        <div>
                            <label class="block text-gray-700 font-medium mb-2">เบอร์โทรศัพท์</label>
                            <input type="tel" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-sky-400 focus:ring-2 focus:ring-sky-100 transition-all outline-none" placeholder="กรอกเบอร์โทรศัพท์">
                        </div>
                        <div>
                            <label class="block text-gray-700 font-medium mb-2">เรื่องที่ต้องการติดต่อ</label>
                            <select class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-sky-400 focus:ring-2 focus:ring-sky-100 transition-all outline-none">
                                <option value="">กรุณาเลือกเรื่องที่ต้องการติดต่อ</option>
                                <option value="accounting">บริการด้านบัญชี</option>
                                <option value="tax">บริการด้านภาษี</option>
                                <option value="consulting">ปรึกษาธุรกิจ</option>
                                <option value="other">อื่นๆ</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-gray-700 font-medium mb-2">ข้อความ</label>
                            <textarea rows="4" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-sky-400 focus:ring-2 focus:ring-sky-100 transition-all outline-none" placeholder="กรอกข้อความที่ต้องการ"></textarea>
                        </div>
                        <div class="flex items-start gap-3">
                            <input type="checkbox" id="pdpa" class="mt-1 rounded border-gray-300 text-sky-600 focus:ring-sky-500">
                            <label for="pdpa" class="text-gray-600 text-18">
                                ฉันยินยอมให้เก็บข้อมูลส่วนบุคคลตาม <a href="/privacy" class="text-sky-600 hover:text-sky-700">นโยบายความเป็นส่วนตัว</a>
                            </label>
                        </div>
                        <div>
                            <img src="https://tmp1.theme.nd.co.th/modules/frontend/img/captcha.jpg" >
                        </div>
                        <div class="mt-auto">
                            <button type="submit" class="group relative w-full py-4 bg-gradient-to-r from-sky-600 to-sky-400 text-white font-medium rounded-xl overflow-hidden transition-all">
                                <div class="absolute inset-0 bg-gradient-to-r from-sky-400 to-sky-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                                <span class="relative">ส่งข้อความ</span>
                            </button>
                        </div>
                    </form>
                </div>

                <!-- Map and Contact Info -->
                <div class="space-y-8">
                    <!-- Contact Info Cards -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="group bg-white p-6 rounded-xl border border-gray-100 hover:border-sky-200 transition-colors">
                            <span class="icon-[tabler--map-pin] size-8 text-sky-500 mb-4 group-hover:text-sky-600 transition-colors"></span>
                            <h3 class="text-lg font-semibold text-gray-900 mb-2">ที่อยู่</h3>
                            <p class="text-gray-600">123 ถนนสุขุมวิท แขวงคลองเตย เขตคลองเตย กรุงเทพฯ 10110</p>
                        </div>
                        <div class="group bg-white p-6 rounded-xl border border-gray-100 hover:border-sky-200 transition-colors">
                            <span class="icon-[tabler--phone] size-8 text-sky-500 mb-4 group-hover:text-sky-600 transition-colors"></span>
                            <h3 class="text-lg font-semibold text-gray-900 mb-2">โทรศัพท์</h3>
                            <p class="text-gray-600">02-123-4567</p>
                            <p class="text-gray-600">089-123-4567</p>
                        </div>
                        <div class="group bg-white p-6 rounded-xl border border-gray-100 hover:border-sky-200 transition-colors">
                            <span class="icon-[tabler--mail] size-8 text-sky-500 mb-4 group-hover:text-sky-600 transition-colors"></span>
                            <h3 class="text-lg font-semibold text-gray-900 mb-2">อีเมล</h3>
                            <p class="text-gray-600">contact@accountingpro.com</p>
                        </div>
                        <div class="group bg-white p-6 rounded-xl border border-gray-100 hover:border-sky-200 transition-colors">
                            <span class="icon-[tabler--clock] size-8 text-sky-500 mb-4 group-hover:text-sky-600 transition-colors"></span>
                            <h3 class="text-lg font-semibold text-gray-900 mb-2">เวลาทำการ</h3>
                            <p class="text-gray-600">จันทร์ - ศุกร์: 9:00 - 18:00</p>
                            <p class="text-gray-600">เสาร์: 9:00 - 15:00</p>
                        </div>
                    </div>
                    <!-- Google Map -->
                    <div class="w-full h-[300px] rounded-2xl overflow-hidden border border-gray-100">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3875.3261723300547!2d100.56324937475556!3d13.756674397572727!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30e29e8dd79a0c9d%3A0x6b77b9a5dd4f8086!2z4Liq4Li14Lil4Lih4Lin4Li04LiX4LiB4Lij4Li44LiH4LmA4LiX4Lie!5e0!3m2!1sth!2sth!4v1709561121399!5m2!1sth!2sth" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>

                    
                </div>
            </div>
        </div>
    </section>
@endsection