@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>
                <div class="max-w-xl mx-auto">
                    <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>
        </div>
    </section>


    <section class="py-10 lg:py-16 overflow-hidden">
        <div class="container max-w-7xl mx-auto">
            <!-- Product Cards -->
            <div class="grid tn:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
                <x-frontend::card.product_card title="ยาแก้แพ้"
                    details="ยาที่ช่วยบรรเทาอาการแพ้และอาการคัน โดยเฉพาะในกรณีที่เกิดจากการแพ้ละอองเกสรดอกไม้หรือสารก่อภูมิแพ้ในอากาศ ช่วยลดอาการคันและอาการบวมของเยื่อบุจมูก ทำให้คุณรู้สึกสบายขึ้นและสามารถใช้ชีวิตประจำวันได้อย่างปกติ"
                    price="25.00" discount="30.00"
                    img="https://www.clarityne.co.th/sites/g/files/vrxlpx30141/files/2024-01/clarityne-10mg.png" />

                <x-frontend::card.product_card title="วิตามินซี"
                    details="วิตามินซีเป็นสารต้านอนุมูลอิสระที่สำคัญ ช่วยเสริมภูมิคุ้มกันและบำรุงผิวพรรณ ทำให้ผิวดูสดใสและมีสุขภาพดี นอกจากนี้ยังช่วยในการดูดซึมธาตุเหล็กจากอาหาร ช่วยให้ร่างกายแข็งแรงและลดความเสี่ยงต่อการเกิดโรค"
                    price="50.00" discount="60.00"
                    img="https://image.makewebcdn.com/makeweb/m_1200x600/bIYWer913/VitC/Vit_C_60cap_FRONT_02.jpg" />

                <x-frontend::card.product_card title="ยาลดกรด"
                    details="ยาลดกรดช่วยบรรเทาอาการกรดไหลย้อนและอาการไม่สบายท้องที่เกิดจากกรดในกระเพาะอาหาร ช่วยลดความรู้สึกแสบร้อนในอกและช่วยให้คุณรู้สึกสบายท้องมากขึ้น เหมาะสำหรับผู้ที่มีปัญหากรดไหลย้อนบ่อยครั้ง"
                    price="40.00" discount="50.00"
                    img="https://www.clickzy.com/media/contents/Health-Beauty/Health/Antacid-Deflatulent/antacid_deflatulent-02_belcid.jpg" />

                <x-frontend::card.product_card title="ยาน้ำแก้ไอ"
                    details="ยาน้ำแก้ไอช่วยบรรเทาอาการไอและเจ็บคอ โดยเฉพาะในกรณีที่เกิดจากการติดเชื้อไวรัสหรือการระคายเคืองในลำคอ ช่วยให้คุณรู้สึกสบายขึ้นและสามารถนอนหลับได้ดีขึ้นในช่วงที่มีอาการไอ"
                    price="30.00" discount="35.00"
                    img="https://st.bigc-cs.com/cdn-cgi/image/format=webp,quality=90/public/media/catalog/product/57/88/8858704600857/8858704600857_1-20230105085427-.jpg" />
            </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