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

@section('content')
    <div class="full-carousel-wrapper">
        <div class="full-carousel-banner">
            <x-frontend::plugin.splidecarousel slideName='splide-demo'>
                <x-slot:slideList>
                    <x-frontend::plugin.splidecarousel.image
                        slideSource='https://images.unsplash.com/photo-1580281657529-557a6abb6387?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
                        slideUrl='' slideDescription='' class='full-screen-slide'>
                        </x-frontend>

                        <x-frontend::plugin.splidecarousel.video
                            slideSource='https://videos.pexels.com/video-files/4407724/4407724-sd_640_360_30fps.mp4'
                            slideCover='https://mockupline.com/wp-content/uploads/2024/04/1920x1080-mockup.jpg'
                            slideDescription='' class='full-screen-slide'>
                            </x-frontend>
                </x-slot>
                </x-frontend>
        </div>
    </div>

    <section class="py-10 lg:py-16 bg-gradient-to-br from-white via-green-50 to-white overflow-hidden">

        <div class="container mx-auto px-4">
            <div class="grid lg:grid-cols-2 gap-12 items-center">
                <!-- Content -->
                <div class="relative">
                    <span class="text-green-600 font-medium mb-4 block">ยินดีต้อนรับสู่ PharmaCare</span>
                    <h2 class="text-32 lg:text-40 font-bold text-gray-800 mb-6">ร้านขายยาที่คุณไว้วางใจ<br>
                        <span class="text-green-600">ดูแลสุขภาพของคุณด้วยความใส่ใจ</span>
                    </h2>
                    <p class="text-gray-600 text-18 leading-relaxed mb-8">
                        เราคือร้านขายยาที่มุ่งมั่นในการให้บริการด้านสุขภาพที่ดีที่สุดแก่ลูกค้าทุกท่าน
                        ด้วยทีมเภสัชกรมืออาชีพที่พร้อมให้คำปรึกษาและแนะนำผลิตภัณฑ์ที่เหมาะสมกับความต้องการของคุณ
                        เรามีผลิตภัณฑ์คุณภาพที่ผ่านการคัดสรรมาอย่างดี เพื่อสุขภาพที่ดีของคุณและครอบครัว
                    </p>
                    <div class="flex flex-wrap gap-4">
                        <a href="/contact"
                            class="inline-flex items-center gap-2 px-6 py-3 rounded-xl border-2 border-green-600 text-green-600 hover:bg-green-50 hover:scale-105 transition-all duration-300">
                            <span>ติดต่อเรา</span>
                            <span class="icon-[tabler--phone] size-5"></span>
                        </a>
                    </div>
                </div>

                <!-- Features -->
                <div class="grid sm:grid-cols-2 gap-6">
                    <div
                        class="p-6 rounded-2xl bg-white shadow-lg shadow-green-100/50 hover:shadow-md hover:scale-105 transition-all duration-300">
                        <span class="icon-[tabler--certificate] size-12 text-green-600 mb-4"></span>
                        <h3 class="text-20 font-bold text-gray-800 mb-2">มาตรฐานรับรอง</h3>
                        <p class="text-gray-600">ได้รับการรับรองมาตรฐานจากสภาเภสัชกรรม</p>
                    </div>
                    <div
                        class="p-6 rounded-2xl bg-white shadow-lg shadow-green-100/50 hover:shadow-md hover:scale-105 transition-all duration-300">
                        <span class="icon-[tabler--users] size-12 text-green-600 mb-4"></span>
                        <h3 class="text-20 font-bold text-gray-800 mb-2">ทีมผู้เชี่ยวชาญ</h3>
                        <p class="text-gray-600">เภสัชกรมืออาชีพพร้อมให้คำปรึกษา</p>
                    </div>
                    <div
                        class="p-6 rounded-2xl bg-white shadow-lg shadow-green-100/50 hover:shadow-md hover:scale-105 transition-all duration-300">
                        <span class="icon-[tabler--truck-delivery] size-12 text-green-600 mb-4"></span>
                        <h3 class="text-20 font-bold text-gray-800 mb-2">จัดส่งรวดเร็ว</h3>
                        <p class="text-gray-600">บริการจัดส่งถึงบ้านทั่วประเทศ</p>
                    </div>
                    <div
                        class="p-6 rounded-2xl bg-white shadow-lg shadow-green-100/50 hover:shadow-md hover:scale-105 transition-all duration-300">
                        <span class="icon-[tabler--shield-check] size-12 text-green-600 mb-4"></span>
                        <h3 class="text-20 font-bold text-gray-800 mb-2">สินค้าคุณภาพ</h3>
                        <p class="text-gray-600">ผลิตภัณฑ์ได้มาตรฐาน ปลอดภัย</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section
        class="py-10 lg:py-16 overflow-hidden relative bg-url('https://img.freepik.com/free-vector/abstract-medical-wallpaper-template-design_53876-61802.jpg') bg-opacity-10">
        <!-- Decorative Circles -->
        <div class="absolute -left-32 top-1/4 w-64 h-64 rounded-full bg-green-100/80 "></div>
        <div class="absolute -right-32 bottom-1/4 w-64 h-64 rounded-full bg-green-100/80 "></div>
        <div class="absolute right-1/4 top-1/3 w-32 h-32 rounded-full bg-green-200/50 "></div>

        <div class="container mx-auto px-4 relative z-10">
            <!-- Section Header -->
            <div class="text-center max-w-3xl mx-auto mb-6 lg:mb-8">
                <h2 class="text-32 lg:text-40 font-bold text-gray-800 mb-6">สินค้าคุณภาพ<br>
                    <span class="text-green-600">เพื่อสุขภาพที่ดีของคุณ</span>
                </h2>
            </div>

            <!-- Product Cards -->
            <div class="grid xs:grid-cols-2 lg:grid-cols-4 gap-8">
                <!-- Product Card 1 -->
                <div class="group">
                    <a href="/products-detail">
                        <div
                            class="bg-gradient-to-br from-green-50 via-white to-green-50 rounded-2xl p-6 shadow-lg shadow-green-100/50 group-hover:shadow-xl group-hover:scale-105 transition-all duration-300 h-full">
                            <div class="aspect-square rounded-xl bg-white mb-6 overflow-hidden">
                                <img src="https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2340&q=80"
                                    alt="ยาพาราเซตามอล"
                                    class="w-full h-full object-cover group-hover:scale-110 transition-all duration-300">
                            </div>
                            <h3 class="text-20 font-bold text-gray-800 mb-2 line-clamp-1">ยาพาราเซตามอล</h3>
                            <p class="text-gray-600 mb-2 line-clamp-2 h-[48px]">ยาลดไข้ บรรเทาปวด ยาลดไข้ บรรเทาปวด ยาลดไข้
                                บรรเทาปวด ยาลดไข้ บรรเทาปวด ยาลดไข้ บรรเทาปวด</p>
                            <p class="text-green-600 font-bold mb-4">฿35.00</p>
                            <a href="/products-detail"
                                class="inline-flex items-center text-green-600 group-hover:gap-2 transition-all duration-300">
                                <span>ดูเพิ่มเติม</span>
                                <span class="icon-[tabler--arrow-right] size-5"></span>
                            </a>
                        </div>
                    </a>
                </div>

                <!-- Product Card 2 -->
                <div class="group">
                    <a href="/products-detail">
                        <div
                        class="bg-gradient-to-br from-green-50 via-white to-green-50 rounded-2xl p-6 shadow-lg shadow-green-100/50 group-hover:shadow-xl group-hover:scale-105 transition-all duration-300 h-full">
                        <div class="aspect-square rounded-xl bg-white mb-6 overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2340&q=80"
                                alt="ยาพาราเซตามอล"
                                class="w-full h-full object-cover group-hover:scale-110 transition-all duration-300">
                        </div>
                        <h3 class="text-20 font-bold text-gray-800 mb-2 line-clamp-1">วิตามินซี 1000mg</h3>
                        <p class="text-gray-600 mb-2 line-clamp-2 h-[48px]">เสริมภูมิคุ้มกัน 30 เม็ด</p>
                        <p class="text-green-600 font-bold mb-4">฿290.00</p>
                        <a href="/products-detail"
                            class="inline-flex items-center text-green-600 group-hover:gap-2 transition-all duration-300">
                            <span>ดูเพิ่มเติม</span>
                            <span class="icon-[tabler--arrow-right] size-5"></span>
                        </a>
                    </div>
                    </a>
                </div>

                <!-- Product Card 3 -->
                <div class="group">
                    <a href="/products-detail">
                        <div
                        class="bg-gradient-to-br from-green-50 via-white to-green-50 rounded-2xl p-6 shadow-lg shadow-green-100/50 group-hover:shadow-xl group-hover:scale-105 transition-all duration-300 h-full">
                        <div class="aspect-square rounded-xl bg-white mb-6 overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1603398938378-e54eab446dde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2340&q=80"
                                alt="ชุดปฐมพยาบาล"
                                class="w-full h-full object-cover group-hover:scale-110 transition-all duration-300">
                        </div>
                        <h3 class="text-20 font-bold text-gray-800 mb-2 line-clamp-1">ชุดปฐมพยาบาล</h3>
                        <p class="text-gray-600 mb-2 line-clamp-2 h-[48px]">อุปกรณ์ครบครัน</p>
                        <p class="text-green-600 font-bold mb-4">฿450.00</p>
                        <a href="/products-detail"
                            class="inline-flex items-center text-green-600 group-hover:gap-2 transition-all duration-300">
                            <span>ดูเพิ่มเติม</span>
                            <span class="icon-[tabler--arrow-right] size-5"></span>
                        </a>
                    </div>
                    </a>
                </div>

                <!-- Product Card 4 -->
                <div class="group">
                    <a href="/products-detail">
                        <div
                        class="bg-gradient-to-br from-green-50 via-white to-green-50 rounded-2xl p-6 shadow-lg shadow-green-100/50 group-hover:shadow-xl group-hover:scale-105 transition-all duration-300 h-full">
                        <div class="aspect-square rounded-xl bg-white mb-6 overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1620916566398-39f1143ab7be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2340&q=80"
                                alt="ครีมบำรุงผิว"
                                class="w-full h-full object-cover group-hover:scale-110 transition-all duration-300">
                        </div>
                        <h3 class="text-20 font-bold text-gray-800 mb-2 line-clamp-1">ครีมบำรุงผิว</h3>
                        <p class="text-gray-600 mb-2 line-clamp-2 h-[48px]">สูตรอ่อนโยน 50ml</p>
                        <p class="text-green-600 font-bold mb-4">฿590.00</p>
                        <a href="/products-detail"
                            class="inline-flex items-center text-green-600 group-hover:gap-2 transition-all duration-300">
                            <span>ดูเพิ่มเติม</span>
                            <span class="icon-[tabler--arrow-right] size-5"></span>
                        </a>
                    </div>
                    </a>
                </div>
            </div>

            <!-- View All Products Button -->
            <div class="text-center mt-12">
                <a href="/products"
                    class="inline-flex items-center gap-2 px-8 py-4 rounded-xl bg-green-600 text-white hover:bg-green-700 hover:scale-105 transition-all duration-300">
                    <span class="text-18 font-medium">ดูสินค้าทั้งหมด</span>
                    <span class="icon-[tabler--arrow-right] size-5"></span>
                </a>
            </div>
        </div>
    </section>

    <!-- Health Tips Section -->
    <section class="py-10 lg:py-16 bg-gray-50">
        <div class="container">
            <!-- Section Header -->
            <div class="text-center mb-12 lg:mb-16">
                <h2 class="text-32 font-bold text-gray-800 mb-4">สาระสุขภาพ</h2>
                <p class="text-gray-600 max-w-2xl mx-auto text-18">เรื่องราวและบทความที่น่าสนใจเกี่ยวกับสุขภาพ
                    การดูแลตัวเอง และข้อมูลทางการแพทย์ที่เป็นประโยชน์</p>
            </div>

            <!-- Blog Cards Grid -->
            <div class="grid grid-cols-1 xs:grid-cols-2 lg:grid-cols-4 gap-8">
                <!-- Blog Card 1 -->
                <div class="group">
                    <a href="/blog-detail">
                        <div
                        class="bg-white rounded-2xl overflow-hidden shadow-lg shadow-gray-100/50 group-hover:shadow-xl group-hover:scale-105 transition-all duration-300">
                        <div class="aspect-[16/9] overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1498837167922-ddd27525d352"
                                alt="การดูแลสุขภาพในช่วงหน้าร้อน"
                                class="w-full h-full object-cover group-hover:scale-110 transition-all duration-300">
                        </div>
                        <div class="p-6">
                            <div class="text-14 text-gray-500 mb-4">15 มกราคม 2567</div>
                            <h3 class="text-20 font-bold text-gray-800 mb-3 line-clamp-1">การดูแลสุขภาพในช่วงหน้าร้อน</h3>
                            <p class="text-gray-600 mb-4 line-clamp-2 h-[48px]">วิธีการดูแลสุขภาพให้แข็งแรงในช่วงอากาศร้อน
                                พร้อมเคล็ดลับการป้องกันภาวะขาดน้ำ</p>
                            <a href="/blog-detail"
                                class="inline-flex items-center text-green-600 group-hover:gap-2 transition-all duration-300">
                                <span>อ่านเพิ่มเติม</span>
                                <span class="icon-[tabler--arrow-right] size-5"></span>
                            </a>
                        </div>
                    </div>
                    </a>
                </div>

                <!-- Blog Card 2 -->
                <div class="group">
                    <a href="/blog-detail">
                        <div
                        class="bg-white rounded-2xl overflow-hidden shadow-lg shadow-gray-100/50 group-hover:shadow-xl group-hover:scale-105 transition-all duration-300">
                        <div class="aspect-[16/9] overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1494390248081-4e521a5940db" alt="อาหารเพื่อสุขภาพ"
                                class="w-full h-full object-cover group-hover:scale-110 transition-all duration-300">
                        </div>
                        <div class="p-6">
                            <div class="text-14 text-gray-500 mb-4">14 มกราคม 2567</div>
                            <h3 class="text-20 font-bold text-gray-800 mb-3 line-clamp-1">อาหารเพื่อสุขภาพที่ควรทานทุกวัน
                            </h3>
                            <p class="text-gray-600 mb-4 line-clamp-2 h-[48px]">แนะนำอาหารที่มีประโยชน์ต่อร่างกาย
                                ช่วยเสริมสร้างภูมิคุ้มกันและบำรุงสุขภาพ</p>
                            <a href="/blog-detail"
                                class="inline-flex items-center text-green-600 group-hover:gap-2 transition-all duration-300">
                                <span>อ่านเพิ่มเติม</span>
                                <span class="icon-[tabler--arrow-right] size-5"></span>
                            </a>
                        </div>
                    </div>
                    </a>
                </div>

                <!-- Blog Card 3 -->
                <div class="group">
                    <a href="/blog-detail">
                        <div
                        class="bg-white rounded-2xl overflow-hidden shadow-lg shadow-gray-100/50 group-hover:shadow-xl group-hover:scale-105 transition-all duration-300">
                        <div class="aspect-[16/9] overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1538805060514-97d9cc17730c" alt="การออกกำลังกาย"
                                class="w-full h-full object-cover group-hover:scale-110 transition-all duration-300">
                        </div>
                        <div class="p-6">
                            <div class="text-14 text-gray-500 mb-4">13 มกราคม 2567</div>
                            <h3 class="text-20 font-bold text-gray-800 mb-3 line-clamp-1">การออกกำลังกายที่เหมาะสมกับวัย
                            </h3>
                            <p class="text-gray-600 mb-4 line-clamp-2 h-[48px]">
                                แนะนำวิธีการออกกำลังกายที่เหมาะสมกับแต่ละช่วงวัย เพื่อสุขภาพที่ดี</p>
                            <a href="/blog-detail"
                                class="inline-flex items-center text-green-600 group-hover:gap-2 transition-all duration-300">
                                <span>อ่านเพิ่มเติม</span>
                                <span class="icon-[tabler--arrow-right] size-5"></span>
                            </a>
                        </div>
                    </div>
                    </a>
                </div>

                <!-- Blog Card 4 -->
                <div class="group">
                    <a href="/blog-detail">
                        <div
                        class="bg-white rounded-2xl overflow-hidden shadow-lg shadow-gray-100/50 group-hover:shadow-xl group-hover:scale-105 transition-all duration-300">
                        <div class="aspect-[16/9] overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1506126613408-eca07ce68773" alt="การนอนหลับ"
                                class="w-full h-full object-cover group-hover:scale-110 transition-all duration-300">
                        </div>
                        <div class="p-6">
                            <div class="text-14 text-gray-500 mb-4">12 มกราคม 2567</div>
                            <h3 class="text-20 font-bold text-gray-800 mb-3 line-clamp-1">เคล็ดลับการนอนหลับให้มีคุณภาพ
                            </h3>
                            <p class="text-gray-600 mb-4 line-clamp-2 h-[48px]">วิธีการนอนหลับให้มีคุณภาพ
                                เพื่อสุขภาพที่ดีและร่างกายที่แข็งแรง</p>
                            <a href="/blog-detail"
                                class="inline-flex items-center text-green-600 group-hover:gap-2 transition-all duration-300">
                                <span>อ่านเพิ่มเติม</span>
                                <span class="icon-[tabler--arrow-right] size-5"></span>
                            </a>
                        </div>
                    </div>
                    </a>
                </div>
            </div>

            <!-- View All Articles Button -->
            <div class="text-center mt-12">
                <a href="/blog"
                    class="inline-flex items-center gap-2 px-8 py-4 rounded-xl bg-green-600 text-white hover:bg-green-700 hover:scale-105 transition-all duration-300">
                    <span class="text-18 font-medium">ดูบทความทั้งหมด</span>
                    <span class="icon-[tabler--arrow-right] size-5"></span>
                </a>
            </div>
        </div>
    </section>
@endsection