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

@section('content')
    <section class="relative py-10 md:py-8 bg-white overflow-hidden">
        <!-- Decorative Elements -->
        <div class="absolute inset-0">
            <div class="absolute w-full h-full">
                <div class="absolute top-0 left-0 w-1/2 h-full bg-green-50 transform -skew-x-12"></div>
                <div class="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-green-100/50"></div>
            </div>
            <div class="absolute right-0 bottom-0 hidden lg:block">
                <svg width="400" height="400" viewBox="0 0 200 200" class="text-green-100 opacity-50">
                    <path fill="currentColor"
                        d="M45,-78.1C58.3,-71.3,69.1,-58.9,75.9,-44.6C82.7,-30.3,85.5,-14.1,83.5,0.8C81.4,15.8,74.4,29.6,65.4,41.3C56.4,53,45.4,62.7,32.4,69.7C19.3,76.7,4.3,81,-10.9,79.5C-26.1,78,-41.5,70.7,-54.1,60.1C-66.7,49.5,-76.5,35.7,-81.7,19.7C-86.9,3.7,-87.5,-14.4,-81.3,-29.9C-75.1,-45.4,-62.1,-58.3,-47.1,-64.5C-32.1,-70.7,-15.1,-70.2,1.2,-72.2C17.6,-74.2,31.7,-78.8,45,-78.1Z"
                        transform="translate(100 100)" />
                </svg>
            </div>
        </div>

        <div class="container relative mx-auto px-4">
            <div class="flex flex-col items-center">
                <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-4 md:mb-6 text-center">ติดต่อ<span class="text-green-600">เรา</span>
                </h1>
                <div class="w-16 md:w-24 h-1 bg-green-600 rounded-full mb-6 md:mb-8"></div>
                <p class="text-base md:text-lg lg:text-xl xl:text-20 text-gray-600 max-w-2xl text-center leading-relaxed">
                    หากคุณมีคำถามหรือต้องการข้อมูลเพิ่มเติม สามารถติดต่อเราได้ผ่านช่องทางด้านล่าง
                    เรายินดีให้บริการและพร้อมตอบทุกคำถามของคุณ
                </p>
            </div>
        </div>
    </section>

    <section class="py-8 lg:py-16">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- Contact Info Cards -->
                <div class="space-y-8">
                    <!-- Location Card -->
                    <div class="bg-white p-8 rounded-3xl shadow-lg shadow-gray-100/50">
                        <div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-green-50 mb-6">
                            <span class="icon-[tabler--map-pin] size-8 text-green-600"></span>
                        </div>
                        <h3 class="text-18 lg:text-24 font-bold text-gray-900 mb-4">ที่อยู่</h3>
                        <p class="text-16 lg:text-18 text-gray-600 leading-relaxed">
                            123 ถนนสุขุมวิท แขวงคลองเตย<br>
                            เขตคลองเตย กรุงเทพฯ 10110
                        </p>
                    </div>

                    <!-- Phone Card -->
                    <div class="bg-white p-8 rounded-3xl shadow-lg shadow-gray-100/50">
                        <div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-green-50 mb-6">
                            <span class="icon-[tabler--phone] size-8 text-green-600"></span>
                        </div>
                        <h3 class="text-18 lg:text-24 font-bold text-gray-900 mb-4">เบอร์โทรศัพท์</h3>
                        <p class="text-16 lg:text-18 text-gray-600 leading-relaxed">
                            02-123-4567<br>
                            089-123-4567
                        </p>
                    </div>

                    <!-- Email Card -->
                    <div class="bg-white p-8 rounded-3xl shadow-lg shadow-gray-100/50">
                        <div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-green-50 mb-6">
                            <span class="icon-[tabler--mail] size-8 text-green-600"></span>
                        </div>
                        <h3 class="text-18 lg:text-24 font-bold text-gray-900 mb-4">อีเมล</h3>
                        <p class="text-16 lg:text-18 text-gray-600 leading-relaxed">
                            contact@pharmacare.com
                        </p>
                    </div>
                </div>

                <!-- Contact Form -->
                <div class="lg:col-span-2">
                    <div class="bg-white p-8 rounded-3xl shadow-lg shadow-gray-100/50 relative overflow-hidden">
                        <!-- Decorative Elements -->
                        <div class="absolute -top-12 -right-12 w-32 h-32 bg-green-100 rounded-full blur-3xl opacity-50 animate-pulse"></div>
                        <div class="absolute -bottom-8 -left-8 w-24 h-24 bg-green-200 rounded-full blur-2xl opacity-40 animate-pulse delay-700"></div>
                        
                        <div class="relative">
                            <div class="flex items-center gap-4 mb-8">
                                <span class="icon-[tabler--message-circle-2] size-10 text-green-600 animate-bounce"></span>
                                <h2 class="text-32 font-bold text-gray-900">ส่งข้อความถึงเรา</h2>
                            </div>

                            <form class="space-y-6">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div class="relative group">
                                        <label for="name" class="block text-16 font-medium text-gray-700 mb-2 flex items-center gap-2">
                                            <span class="icon-[tabler--user] size-5 text-green-500"></span>
                                            ชื่อ-นามสกุล
                                        </label>
                                        <input type="text" id="name" name="name" 
                                            class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:border-green-500 focus:ring-2 focus:ring-green-200 transition-all group-hover:shadow-lg group-hover:shadow-green-100/50">
                                    </div>
                                    <div class="relative group">
                                        <label for="email" class="block text-16 font-medium text-gray-700 mb-2 flex items-center gap-2">
                                            <span class="icon-[tabler--mail] size-5 text-green-500"></span>
                                            อีเมล
                                        </label>
                                        <input type="email" id="email" name="email" 
                                            class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:border-green-500 focus:ring-2 focus:ring-green-200 transition-all group-hover:shadow-lg group-hover:shadow-green-100/50">
                                    </div>
                                </div>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div class="relative group">
                                        <label for="phone" class="block text-16 font-medium text-gray-700 mb-2 flex items-center gap-2">
                                            <span class="icon-[tabler--phone] size-5 text-green-500"></span>
                                            เบอร์โทรศัพท์
                                        </label>
                                        <input type="tel" id="phone" name="phone" 
                                            class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:border-green-500 focus:ring-2 focus:ring-green-200 transition-all group-hover:shadow-lg group-hover:shadow-green-100/50">
                                    </div>
                                    <div class="relative group">
                                        <label for="subject" class="block text-16 font-medium text-gray-700 mb-2 flex items-center gap-2">
                                            <span class="icon-[tabler--list] size-5 text-green-500"></span>
                                            หัวข้อ
                                        </label>
                                        <select id="subject" name="subject" 
                                            class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:border-green-500 focus:ring-2 focus:ring-green-200 transition-all appearance-none group-hover:shadow-lg group-hover:shadow-green-100/50">
                                            <option value="">กรุณาเลือกหัวข้อ</option>
                                            <option value="general">สอบถามข้อมูลทั่วไป</option>
                                            <option value="product">สอบถามเกี่ยวกับสินค้า</option>
                                            <option value="service">สอบถามเกี่ยวกับบริการ</option>
                                            <option value="other">อื่นๆ</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="relative group">
                                    <label for="message" class="block text-16 font-medium text-gray-700 mb-2 flex items-center gap-2">
                                        <span class="icon-[tabler--message-dots] size-5 text-green-500"></span>
                                        ข้อความ
                                    </label>
                                    <div class="relative">
                                        <textarea id="message" name="message" rows="6" 
                                            class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:border-green-500 focus:ring-2 focus:ring-green-200 transition-all group-hover:shadow-lg group-hover:shadow-green-100/50"></textarea>
                                    </div>
                                </div>
                                <div class="flex items-center gap-3 group">
                                    <div class="relative">
                                        <input type="checkbox" id="pdpa" name="pdpa" 
                                            class="rounded border-gray-300 text-green-600 focus:ring-green-500 group-hover:shadow-lg group-hover:shadow-green-100/50">
                                        <span class="absolute -top-1 -left-1 w-6 h-6 bg-green-100 rounded-md -z-10 opacity-0 group-hover:opacity-100 transition-opacity"></span>
                                    </div>
                                    <label for="pdpa" class="text-16 text-gray-600">
                                        <span class="inline-flex items-center gap-2">
                                            ฉันยินยอมให้เก็บข้อมูลส่วนบุคคลตาม
                                        </span>
                                        <a href="/privacy" class="text-green-600 hover:text-green-700 underline">นโยบายความเป็นส่วนตัว</a>
                                    </label>
                                </div>
                                <div>
                                    <img src="https://tmp1.theme.nd.co.th/modules/frontend/img/captcha.jpg" >
                                </div>
                                <button type="submit" 
                                    class="w-full px-8 py-4 bg-gradient-to-r from-green-600 to-green-500 text-white text-18 font-medium rounded-xl hover:shadow-lg hover:shadow-green-200/50 active:scale-[0.98] transition-all duration-300 group">
                                    <span class="inline-flex items-center justify-center gap-2">
                                        <span>ส่งข้อความ</span>
                                        <span class="icon-[tabler--send] size-5 transform group-hover:translate-x-1 transition-transform"></span>
                                    </span>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="relative py-10 lg:py-16 bg-gradient-to-b from-gray-50 to-white overflow-hidden">
        <!-- Decorative Elements -->
        <div class="absolute inset-0 pointer-events-none">
            <div class="absolute top-0 left-0 w-96 h-96 bg-green-100 rounded-full mix-blend-multiply blur-3xl opacity-30 animate-pulse"></div>
            <div class="absolute bottom-0 right-0 w-96 h-96 bg-green-200 rounded-full mix-blend-multiply blur-3xl opacity-20 animate-pulse delay-1000"></div>
            
            <!-- Medical Icons Pattern -->
            <div class="absolute inset-0 opacity-[0.03]" style="background-image: url('data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23059669' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E')"></div>
        </div>

        <div class="container mx-auto px-4">
            <div class="relative">
                <!-- Map Header -->
                <div class="text-center mb-12">
                    <h2 class="text-32 font-bold text-gray-800 mb-4">ที่ตั้งร้านยาของเรา</h2>
                    <p class="text-gray-600 max-w-2xl mx-auto">เราพร้อมให้บริการด้วยทีมเภสัชกรมืออาชีพ ในทำเลที่เดินทางสะดวก เปิดบริการทุกวัน 08:00 - 21:00 น.</p>
                </div>

                <!-- Map Container with Custom Styling -->
                <div class="bg-white rounded-[40px] overflow-hidden shadow-2xl shadow-green-100/50 transform transition-all duration-500">
                    <!-- Store Info Bar -->
                    <div class="bg-gradient-to-r from-green-600 to-green-400 p-6 flex flex-wrap items-center justify-center gap-8 text-white">
                        <div class="flex items-center gap-3">
                            <span class="icon-[tabler--clock] size-6"></span>
                            <span>เปิดบริการ 08:00 - 21:00 น.</span>
                        </div>
                        <div class="flex items-center gap-3">
                            <span class="icon-[tabler--phone] size-6"></span>
                            <span>02-123-4567</span>
                        </div>
                        <div class="flex items-center gap-3">
                            <span class="icon-[tabler--car] size-6"></span>
                            <span>ที่จอดรถสะดวกสบาย</span>
                        </div>
                    </div>

                    <!-- Map -->
                    <div class="relative">
                        <div class="absolute inset-0 bg-gradient-to-b from-green-500/10 to-transparent pointer-events-none z-10"></div>
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3875.5438161433213!2d100.56124275!3d13.7424363!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMTPCsDQ0JzMyLjgiTiAxMDDCsDMzJzQwLjUiRQ!5e0!3m2!1sth!2sth!4v1635739458974!5m2!1sth!2sth" 
                            width="100%" 
                            height="600" 
                            style="border:0;" 
                            allowfullscreen="" 
                            loading="lazy"
                            class="grayscale hover:grayscale-0 transition-all duration-500">
                        </iframe>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection