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

@section('content')
    <!-- Hero Section -->
    <section class="relative h-[70vh] min-h-[500px] flex items-end">
        <div class="absolute inset-0">
            <img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836" alt="Thai Food"
                class="w-full h-full object-cover pt-[86.63px]">
            <div class="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent"></div>
        </div>

        <div class="container max-w-7xl mx-auto px-4 relative pb-16">
            <!-- Breadcrumb -->
            <nav class="flex mb-6" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-2">
                    <li class="inline-flex items-center">
                        <a href="/" class="text-gray-200 hover:text-white">
                            <span class="icon-[tabler--home] size-5"></span>
                        </a>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <span class="icon-[tabler--chevron-right] text-gray-400 size-5"></span>
                            <a href="{{ route('blog') }}" class="ml-2 text-gray-200 hover:text-white">บทความ</a>
                        </div>
                    </li>
                    <li aria-current="page">
                        <div class="flex items-center">
                            <span class="icon-[tabler--chevron-right] text-gray-400 size-5"></span>
                            <span class="ml-2 text-gray-400">เคล็ดลับการทำอาหารไทยให้อร่อย</span>
                        </div>
                    </li>
                </ol>
            </nav>
            <h1 class="text-4xl md:text-6xl font-bold text-white mb-4">เคล็ดลับการทำอาหารไทยให้อร่อย</h1>
            <div class="flex items-center gap-6 text-white/80">
                <time>12 กุมภาพันธ์ 2024</time>
            </div>
        </div>
    </section>

    <!-- Content Section -->
    <section class="py-6 lg:py-10">
        <div class="container mx-auto px-4">
            <div class="max-w-7xl mx-auto px-4">
                <div class="prose prose-lg max-w-none">
                    <p class="lead text-xl text-gray-600">การทำอาหารไทยให้อร่อยนั้นไม่ใช่เรื่องยาก 
                    แต่มีเคล็ดลับเล็กๆ น้อยๆ ที่จะช่วยยกระดับรสชาติอาหารของคุณให้อร่อยเหมือนร้านดัง</p>

                    <!-- Recipe Card -->
                    <div class="bg-amber-50 p-8 rounded-2xl my-8">
                        <h3 class="text-2xl font-bold text-amber-900 mb-4">ส่วนผสมหลัก</h3>
                        <ul class="grid grid-cols-2 gap-4 text-amber-800">
                            <li>กะทิสด 2 ถ้วย</li>
                            <li>เครื่องแกงเผ็ด 100 กรัม</li>
                            <li>ใบมะกรูด 5 ใบ</li>
                            <li>น้ำปลาดี 3 ช้อนโต๊ะ</li>
                        </ul>
                    </div>

                    <img src="https://images.unsplash.com/photo-1559314809-0d155014e29e" 
                        alt="การเตรียมวัตถุดิบ" class="w-full rounded-xl my-8">

                    <h2>ขั้นตอนการทำอาหารไทยให้อร่อย</h2>
                    
                    <div class="grid md:grid-cols-2 gap-8 my-8">
                        <div class="bg-gray-50 p-6 rounded-xl">
                            <h4 class="font-bold text-xl mb-4">1. การเลือกวัตถุดิบ</h4>
                            <p>เลือกวัตถุดิบที่สด ใหม่ และมีคุณภาพดี จะช่วยให้อาหารมีรสชาติที่ดีขึ้น</p>
                        </div>
                        <div class="bg-gray-50 p-6 rounded-xl">
                            <h4 class="font-bold text-xl mb-4">2. การปรุงรส</h4>
                            <p>ปรุงรสให้ครบรส เปรี้ยว หวาน เค็ม เผ็ด ให้สมดุลกัน</p>
                        </div>
                    </div>

                    <blockquote class="text-xl italic border-l-4 border-amber-500 pl-4 my-8">
                        <p>"อาหารไทยไม่ได้มีดีแค่รสชาติ แต่ยังมีศิลปะในการปรุงและการจัดแต่ง"</p>
                    </blockquote>

                    <!-- Tips Section -->
                    <div class="bg-green-50 p-8 rounded-2xl my-8">
                        <h3 class="text-2xl font-bold text-green-800 mb-4">เคล็ดลับพิเศษ</h3>
                        <ul class="space-y-2 text-green-700">
                            <li>ใช้เครื่องเทศที่โขลกใหม่ๆ เพื่อกลิ่นหอมที่เข้มข้น</li>
                            <li>ควบคุมไฟให้เหมาะสมกับการปรุงแต่ละขั้นตอน</li>
                            <li>ชิมรสชาติระหว่างการปรุงอาหารเสมอ</li>
                        </ul>
                    </div>

                    <!-- Final Section -->
                    <h2>สรุป</h2>
                    <p>การทำอาหารไทยให้อร่อยนั้นต้องอาศัยทั้งความพิถีพิถัน ความใส่ใจในรายละเอียด 
                    และที่สำคัญคือการฝึกฝนอย่างสม่ำเสมอ</p>
                </div>
            </div>
        </div>
    </section>
@endsection