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

@section('content')
    <!-- About Us Section -->
    <section class="relative overflow-hidden pt-[120px] pb-10 lg:pb-16">
        <!-- Decorative Background -->
        <div class="absolute inset-0">
            <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1519972064555-542444e71b54')] bg-cover bg-fixed opacity-5"></div>
        </div>

        <div class="container max-w-7xl mx-auto px-4 relative">
            <div class="text-center mb-10">
                <h2 class="text-4xl font-bold text-[#bb9555]">เกี่ยวกับเรา</h2>
                <div class="w-24 h-0.5 bg-[#bb9555] mx-auto mt-4"></div>
            </div>

            <div class="prose mx-auto text-gray-600 max-w-3xl text-center leading-relaxed text-15 sm:text-18">
                <p class="mb-6">
                    ร้านอาหารของเราก่อตั้งขึ้นด้วยความรักและความหลงใหลในอาหารไทย เริ่มต้นจากร้านเล็กๆ 
                    จนเติบโตเป็นร้านอาหารที่มีชื่อเสียงในปัจจุบัน
                </p>
                <p class="mb-8">
                    เรามุ่งมั่นที่จะรักษามาตรฐานและคุณภาพของอาหารทุกจาน 
                    เพื่อมอบประสบการณ์ที่ดีที่สุดให้กับลูกค้าทุกท่าน
                </p>
                <div class="flex justify-center gap-8">
                    <span class="inline-block px-8 py-3 border border-[#bb9555] text-[#bb9555] font-medium">20+ ปีประสบการณ์</span>
                    <span class="inline-block px-8 py-3 border border-[#bb9555] text-[#bb9555] font-medium">100+ เมนูอาหาร</span>
                </div>
            </div>

            <div class="mt-16 md:mt-24 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
                <div class="relative">
                    <img src="{{ Module::asset('frontend:img/chef.png') }}" class="w-full h-full object-contain">
                    <div class="absolute -bottom-6 -right-6 w-32 h-32 border border-[#bb9555] rounded-none"></div>
                </div>
                <div class="space-y-8">
                    <h3 class="text-3xl font-bold text-gray-900">ประสบการณ์ที่มากกว่า</h3>
                    <p class="text-gray-600 leading-relaxed text-15 sm:text-18">ด้วยประสบการณ์กว่า 20 ปีในวงการอาหาร เราภูมิใจนำเสนออาหารคุณภาพเยี่ยมที่คัดสรรวัตถุดิบอย่างพิถีพิถัน พร้อมบริการที่ประทับใจ</p>
                    <div class="grid grid-cols-2 gap-6">
                        <div class="flex items-center gap-3">
                            <span class="icon-[tabler--check] size-6 text-[#bb9555]"></span>
                            <span class="text-gray-700">วัตถุดิบคุณภาพสูง</span>
                        </div>
                        <div class="flex items-center gap-3">
                            <span class="icon-[tabler--check] size-6 text-[#bb9555]"></span>
                            <span class="text-gray-700">เชฟมืออาชีพ</span>
                        </div>
                        <div class="flex items-center gap-3">
                            <span class="icon-[tabler--check] size-6 text-[#bb9555]"></span>
                            <span class="text-gray-700">บริการประทับใจ</span>
                        </div>
                        <div class="flex items-center gap-3">
                            <span class="icon-[tabler--check] size-6 text-[#bb9555]"></span>
                            <span class="text-gray-700">รสชาติดั้งเดิม</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Story Section -->
    <section class="py-6 lg:py-12 bg-gray-50">
        <div class="container max-w-7xl mx-auto px-4">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
                <div class="order-2 lg:order-1 space-y-8">
                    <div class="space-y-4">
                        <h2 class="text-3xl font-bold text-gray-900">เรื่องราวของเรา</h2>
                        <h5 class="text-xl text-[#bb9555] font-medium">ร้านอาหารไทยรสชาติดั้งเดิม</h5>
                        <p class="text-gray-600 leading-relaxed text-15 sm:text-18">เราเริ่มต้นจากความรักในอาหารไทยและต้องการรักษารสชาติดั้งเดิมให้คงอยู่ พร้อมส่งต่อความอร่อยให้กับทุกคน</p>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div class="p-6 border border-[#bb9555]">
                            <h5 class="text-lg font-semibold text-gray-900 mb-4">พันธกิจของเรา</h5>
                            <p class="text-gray-600 mb-4">มุ่งมั่นสร้างสรรค์อาหารไทยคุณภาพ ด้วยวัตถุดิบชั้นเยี่ยม</p>
                        </div>
                        <div class="p-6 border border-[#bb9555]">
                            <h5 class="text-lg font-semibold text-gray-900 mb-4">วิสัยทัศน์ของเรา</h5>
                            <p class="text-gray-600 mb-4">ยกระดับมาตรฐานอาหารไทยสู่ระดับสากล</p>
                        </div>
                    </div>
                </div>

                <div class="order-1 lg:order-2 relative">
                    <img src="{{ Module::asset('frontend:img/aboutfood.jpg') }}" 
                         alt="Our Restaurant Team" 
                         class="w-full">
                    <div class="absolute -bottom-4 -right-4 w-full h-full border border-[#bb9555] -z-10"></div>
                </div>
            </div>
        </div>
    </section>

@endsection