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

@section('content')
    <!-- Breadcrumb -->
    <div class="py-10">
        <div class="container max-w-7xl mx-auto px-4">
            <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">
                                สาระสุขภาพ
                            </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>

    <article class="pb-16">
        <div class="container max-w-7xl mx-auto px-4">
            <!-- Article Header -->
            <header class="mb-8 text-start">
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6 leading-tight">
                    การดูแลสุขภาพอย่างมีสไตล์ในช่วงหน้าร้อน
                </h1>
                <div class="flex items-center justify-start gap-6 text-gray-600">
                    <time class="flex items-center gap-2">
                        <span class="icon-[tabler--calendar] size-5"></span>
                        15 มกราคม 2567
                    </time>
                </div>
            </header>

            <!-- Featured Image -->
            <figure class="mb-8 lg:mb-12">
                <img src="https://images.unsplash.com/photo-1498837167922-ddd27525d352" 
                     alt="การดูแลสุขภาพในช่วงหน้าร้อน"
                     class="w-full h-[600px] object-cover rounded-3xl shadow-lg">
            </figure>

            <!-- Article Content -->
            <div class="prose prose-lg max-w-none mx-auto">
                <p class="text-base md:text-lg lg:text-xl leading-relaxed text-gray-700">
                    ในช่วงหน้าร้อนของประเทศไทย การดูแลสุขภาพอย่างมีสไตล์และถูกวิธีเป็นสิ่งสำคัญอย่างยิ่ง 
                    นอกจากจะช่วยให้ร่างกายแข็งแรงแล้ว ยังช่วยให้คุณดูดีและรู้สึกดีได้ตลอดหน้าร้อน
                </p>
                
                <h2 class="text-2xl md:text-3xl font-bold text-gray-900 mt-8 md:mt-12 mb-4 md:mb-6">1. Hydration is Key: ศิลปะแห่งการดื่มน้ำ</h2>
                <p class="text-base md:text-lg mb-6 md:mb-8">
                    การดื่มน้ำไม่ใช่เพียงการดับกระหาย แต่เป็นการดูแลสุขภาพที่ต้องทำอย่างพิถีพิถัน
                    ควรเลือกดื่มน้ำแร่คุณภาพสูง หรือน้ำสมุนไพรที่ช่วยเสริมสุขภาพ เช่น:
                </p>
                <ul class="list-disc ml-4 md:ml-6 mb-6 md:mb-8 text-base md:text-lg">
                    <li>น้ำมะนาวผสมน้ำผึ้งออร์แกนิค</li>
                    <li>น้ำแร่จากแหล่งธรรมชาติ</li>
                    <li>น้ำสมุนไพรเย็นจากวัตถุดิบออร์แกนิค</li>
                </ul>

                <h2 class="text-2xl md:text-3xl font-bold text-gray-900 mt-8 md:mt-12 mb-4 md:mb-6">2. Mindful Dining: ศิลปะแห่งการรับประทานอาหาร</h2>
                <p class="text-base md:text-lg mb-6 md:mb-8">
                    เลือกรับประทานอาหารที่มีคุณภาพสูง เน้นวัตถุดิบออร์แกนิค และการจัดจานอย่างสวยงาม:
                </p>
                <ul class="list-disc ml-4 md:ml-6 mb-6 md:mb-8 text-base md:text-lg">
                    <li>ผักและผลไม้ตามฤดูกาลจากฟาร์มออร์แกนิค</li>
                    <li>โปรตีนคุณภาพสูงจากแหล่งที่เชื่อถือได้</li>
                    <li>ขนมหวานที่ทำจากวัตถุดิบธรรมชาติ ลดน้ำตาล</li>
                </ul>

                <blockquote class="border-l-4 border-green-500 pl-4 md:pl-6 text-lg md:text-xl italic">
                    "Wellness is not just about health, it's about creating a lifestyle that brings harmony to body, mind, and soul."
                </blockquote>
            </div>
        </div>
    </article>
@endsection