@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 max-w-7xl 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-5 lg:py-10 bg-[#f9fafb]">
        <div class="container max-w-7xl mx-auto">
            <!-- Blog Cards Grid -->
            <div class="grid tn:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
                <x-frontend::card.blog_card title="การดูแลสุขภาพในช่วงฤดูฝน 2566"
                details="เคล็ดลับการดูแลสุขภาพในช่วงฤดูฝน เพื่อป้องกันโรคที่มักเกิดขึ้นในช่วงนี้ เช่น โรคไข้หวัดและโรคภูมิแพ้"
                img="https://images.unsplash.com/photo-1519692933481-e162a57d6721?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" date="15 กันยายน 2566" />
            <x-frontend::card.blog_card title="การดูแลสุขภาพในช่วงฤดูร้อน"
                details="วิธีการป้องกันโรคที่เกิดจากความร้อน เช่น โรคลมแดด และการรักษาความชุ่มชื้นในร่างกาย"
                img="https://images.unsplash.com/photo-1491403649849-5e23c1bce126?q=80&w=2128&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" date="15 เมษายน 2566" />
            <x-frontend::card.blog_card title="การดูแลสุขภาพในช่วงฤดูหนาว 2566"
                details="การดูแลสุขภาพในช่วงฤดูหนาว รวมถึงการป้องกันโรคไข้หวัดใหญ่และการดูแลผิวพรรณ"
                img="https://images.unsplash.com/photo-1519944159858-806d435dc86b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" date="15 ธันวาคม 2565" />
            <x-frontend::card.blog_card title="การดูแลสุขภาพในช่วงฤดูใบไม้ร่วง 2565"
                details="เคล็ดลับการดูแลสุขภาพในช่วงฤดูใบไม้ร่วง เพื่อป้องกันโรคภูมิแพ้จากละอองเกสร"
                img="https://images.unsplash.com/photo-1639237675927-38386a4e7785?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" date="15 ตุลาคม 2565" />
            <x-frontend::card.blog_card title="การดูแลสุขภาพในช่วงฤดูร้อน 2565"
                details="การดูแลสุขภาพในช่วงฤดูร้อน โดยเฉพาะการป้องกันโรคที่เกิดจากความร้อน"
                img="https://images.unsplash.com/photo-1541840518972-700a0bde0c6b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" date="15 มิถุนายน 2565" />
            <x-frontend::card.blog_card title="การดูแลสุขภาพในช่วงฤดูฝน 2564"
                details="การดูแลสุขภาพในช่วงฤดูฝน เพื่อป้องกันโรคที่มักเกิดขึ้นในช่วงนี้"
                img="https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0" date="15 สิงหาคม 2564" />
            </div>
        </div>

        <div class="flex justify-center pt-5 lg:pt-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>
    </section>
@endsection