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

@section('content')
    <!-- Breadcrumb -->
    <div class="py-10">
        <div class="container">
            <nav class="flex overflow-x-auto" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1 md:space-x-3 whitespace-nowrap">
                    <li class="inline-flex items-center">
                        <a href="{{ route('index') }}"
                            class="inline-flex items-center text-gray-500 hover:text-green-600 transition-colors">
                            <span class="icon-[tabler--home] size-4 mr-2"></span>
                            หน้าแรก
                        </a>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <span class="icon-[tabler--chevron-right] size-4 text-gray-400"></span>
                            <a href="{{ route('blog') }}"
                                class="ml-1 text-gray-500 hover:text-green-600 transition-colors md:ml-2">
                                <span class="icon-[tabler--heart-plus] size-4 mr-2"></span>
                                สาระสุขภาพ
                            </a>
                        </div>
                    </li>
                    <li aria-current="page">
                        <div class="flex items-center">
                            <span class="icon-[tabler--chevron-right] size-4 text-gray-400"></span>
                            <span class="ml-1 text-green-600 font-medium md:ml-2 truncate max-w-[200px] md:max-w-none">
                                การดูแลสุขภาพในช่วงหน้าร้อน
                            </span>
                        </div>
                    </li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Blog Header -->
    <div class="max-w-4xl mx-auto text-center">
        <div class="mb-8">
            <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-green-50">
                <span class="icon-[tabler--calendar] size-4 text-green-600"></span>
                <span class="text-green-600 font-medium text-18">15 มกราคม 2567</span>
            </div>
        </div>
        <h1 class="text-48 font-bold text-gray-900">การดูแลสุขภาพในช่วงหน้าร้อน</h1>
    </div>

    <!-- Blog Content -->
    <section class="py-10">
        <div class="container mx-auto px-4">
            <div class="max-w-4xl mx-auto">
                <!-- Featured Image -->
                <div class="rounded-3xl overflow-hidden mb-16">
                    <img src="https://images.unsplash.com/photo-1498837167922-ddd27525d352"
                        alt="การดูแลสุขภาพในช่วงหน้าร้อน" class="w-full h-[300px] md:h-[450px] lg:h-[600px] object-cover">
                </div>

                <!-- Article Content -->
                <article class="prose prose-lg max-w-none space-y-8 md:space-y-12">
                    <p class="text-base md:text-lg lg:text-xl leading-relaxed">
                        การดูแลสุขภาพในช่วงหน้าร้อนเป็นสิ่งสำคัญที่ไม่ควรมองข้าม
                        เนื่องจากอากาศที่ร้อนจัดอาจส่งผลกระทบต่อร่างกายได้หลายด้าน ทั้งการขาดน้ำ อ่อนเพลีย
                        หรือแม้แต่โรคลมแดด
                    </p>

                    <div class="space-y-4 md:space-y-6">
                        <h2 class="text-2xl md:text-3xl font-bold text-gray-900">1. ดื่มน้ำให้เพียงพอ</h2>
                        <p class="text-base md:text-lg lg:text-xl leading-relaxed">
                            การดื่มน้ำอย่างเพียงพอเป็นสิ่งสำคัญที่สุดในการดูแลสุขภาพช่วงหน้าร้อน ควรดื่มน้ำอย่างน้อยวันละ 8
                            แก้ว หรือมากกว่านั้นหากมีกิจกรรมกลางแจ้ง
                        </p>
                    </div>

                    <div class="space-y-4 md:space-y-6">
                        <h2 class="text-2xl md:text-3xl font-bold text-gray-900">2. หลีกเลี่ยงแสงแดดจัด</h2>
                        <p class="text-base md:text-lg lg:text-xl leading-relaxed">
                            ควรหลีกเลี่ยงการอยู่กลางแจ้งในช่วงเวลาที่แดดจัด โดยเฉพาะระหว่าง 10.00-16.00 น.
                            หากจำเป็นต้องออกนอกบ้าน ควรสวมเสื้อผ้าที่ป้องกันแสงแดด ใส่หมวก และทาครีมกันแดด
                        </p>
                    </div>

                    <div class="space-y-4 md:space-y-6">
                        <h2 class="text-2xl md:text-3xl font-bold text-gray-900">3. รับประทานอาหารที่เหมาะสม</h2>
                        <p class="text-base md:text-lg lg:text-xl leading-relaxed">
                            เลือกรับประทานอาหารที่ย่อยง่าย มีน้ำเป็นส่วนประกอบ เช่น ผักและผลไม้ที่มีน้ำมาก
                            หลีกเลี่ยงอาหารรสจัด และอาหารที่มีไขมันสูง
                        </p>
                    </div>

                    <div class="space-y-4 md:space-y-6">
                        <h2 class="text-2xl md:text-3xl font-bold text-gray-900">4. การออกกำลังกายที่เหมาะสม</h2>
                        <p class="text-base md:text-lg lg:text-xl leading-relaxed">
                            ควรเลือกออกกำลังกายในช่วงเช้าหรือเย็น หลีกเลี่ยงการออกกำลังกายกลางแจ้งในช่วงที่อากาศร้อนจัด
                            และควรออกกำลังกายในที่ร่มหรือห้องที่มีอากาศถ่ายเทสะดวก
                        </p>
                    </div>

                    <div class="bg-green-50 p-6 md:p-8 rounded-3xl space-y-4 md:space-y-6">
                        <h3 class="text-xl md:text-2xl font-bold text-green-600">คำแนะนำเพิ่มเติม</h3>
                        <ul class="space-y-3 md:space-y-4 text-base md:text-lg">
                            <li class="flex items-center gap-3">
                                <span class="icon-[tabler--circle-check] text-green-500"></span>
                                สังเกตสัญญาณของร่างกายเมื่อรู้สึกไม่สบาย
                            </li>
                            <li class="flex items-center gap-3">
                                <span class="icon-[tabler--circle-check] text-green-500"></span>
                                พักผ่อนให้เพียงพอ
                            </li>
                            <li class="flex items-center gap-3">
                                <span class="icon-[tabler--circle-check] text-green-500"></span>
                                หลีกเลี่ยงเครื่องดื่มแอลกอฮอล์และคาเฟอีน
                            </li>
                            <li class="flex items-center gap-3">
                                <span class="icon-[tabler--circle-check] text-green-500"></span>
                                แต่งกายด้วยเสื้อผ้าที่ระบายอากาศได้ดี
                            </li>
                        </ul>
                    </div>
                </article>
            </div>
        </div>
    </section>
@endsection