@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-10 lg:py-16 overflow-hidden">
        <div class="container">
            <!-- 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 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 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 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 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 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 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 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 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>
        </div>
    </section>

    <div class="flex justify-center pb-10">
        <nav class="flex items-center gap-2">
            <a href="#"
                class="w-10 h-10 flex items-center justify-center rounded-lg text-gray-600 hover:bg-green-50 hover:text-green-600 transition-colors">
                <span class="icon-[tabler--chevron-left] size-5"></span>
            </a>
            <a href="#"
                class="w-10 h-10 flex items-center justify-center rounded-lg bg-green-600 text-white hover:bg-green-700 transition-colors">
                1
            </a>
            <a href="#"
                class="w-10 h-10 flex items-center justify-center rounded-lg text-gray-600 hover:bg-green-50 hover:text-green-600 transition-colors">
                2
            </a>
            <a href="#"
                class="w-10 h-10 flex items-center justify-center rounded-lg text-gray-600 hover:bg-green-50 hover:text-green-600 transition-colors">
                3
            </a>
            <a href="#"
                class="w-10 h-10 flex items-center justify-center rounded-lg text-gray-600 hover:bg-green-50 hover:text-green-600 transition-colors">
                4
            </a>
            <a href="#"
                class="w-10 h-10 flex items-center justify-center rounded-lg text-gray-600 hover:bg-green-50 hover:text-green-600 transition-colors">
                5
            </a>
            <a href="#"
                class="w-10 h-10 flex items-center justify-center rounded-lg text-gray-600 hover:bg-green-50 hover:text-green-600 transition-colors">
                <span class="icon-[tabler--chevron-right] size-5"></span>
            </a>
        </nav>
    </div>
@endsection