@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">
        <div class="container">
            <!-- Blog Cards Grid -->
            <div class="grid grid-cols-1 xs:grid-cols-2 lg:grid-cols-4 gap-8">
                <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 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">11 มกราคม 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">10 มกราคม 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">9 มกราคม 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">8 มกราคม 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>
        </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