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

@section('content')
    <!-- Breadcrumb -->
    <div class="pt-[120px]">
        <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-primary transition-colors">
                            หน้าแรก
                        </a>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <span class="icon-[tabler--chevron-right] size-4 text-gray-400"></span>
                            <a href="{{ route('products') }}"
                                class="ml-1 text-gray-500 hover:text-primary 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-primary font-medium md:ml-2 truncate max-w-[200px] md:max-w-none">
                                เบอร์เกอร์เนื้อพรีเมียม
                            </span>
                        </div>
                    </li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Product Detail -->
    <section class="pb-10 lg:pb-16">
        <div class="container max-w-7xl mx-auto px-4">
            <div class="grid lg:grid-cols-2 gap-8">
                <!-- Gallery Grid -->
                <div class="grid grid-cols-4 gap-2 mt-4">
                    @php
                        $images = [
                            asset('modules/frontend/img/food1.jpg'),
                            asset('modules/frontend/img/food2.png'),
                            asset('modules/frontend/img/food2.png'),
                            asset('modules/frontend/img/food3.png'),
                            asset('modules/frontend/img/food1.jpg'),
                            asset('modules/frontend/img/food1.jpg'),
                            asset('modules/frontend/img/food1.jpg'),
                            asset('modules/frontend/img/food1.jpg')
                        ];
                    @endphp
                    @foreach ($images as $index => $image)
                        <div class="aspect-square overflow-hidden {{ $index == 0 ? 'col-span-2 row-span-2' : '' }}">
                            <img src="{{ $image }}" 
                                 class="w-full h-full object-contain hover:scale-110 transition-transform duration-300 cursor-pointer"
                                 onclick="window.open(this.src, '_blank')">
                        </div>
                    @endforeach
                </div>

                <!-- Product Info -->
                <div class="lg:pl-8">
                    <div class="sticky top-28">
                        <h1 class="mt-4 text-3xl font-bold">เบอร์เกอร์เนื้อพรีเมียม</h1>
                        <p class="mt-4 text-gray-600 line-clamp-6">เบอร์เกอร์เนื้อคุณภาพพรีเมียม คัดสรรเนื้อวัวเกรดพรีเมียมนำเข้า นำมาย่างด้วยความพิถีพิถันจนได้ที่พอดี เสิร์ฟพร้อมผักสลัดสดกรอบ ชีสแผ่นคุณภาพดีที่หลอมละลายพอดี 
                            และซอสสูตรพิเศษที่คิดค้นเฉพาะทางร้าน ให้รสชาติที่กลมกล่อม หอมกลิ่นเนื้อย่าง สัมผัสได้ถึงความนุ่มฉ่ำของเนื้อในทุกคำ เหมาะสำหรับคนรักเบอร์เกอร์ที่ต้องการความพิเศษมากกว่าเบอร์เกอร์ทั่วไป เบอร์เกอร์เนื้อคุณภาพพรีเมียม คัดสรรเนื้อวัวเกรดพรีเมียมนำเข้า นำมาย่างด้วยความพิถีพิถันจนได้ที่พอดี เสิร์ฟพร้อมผักสลัดสดกรอบ ชีสแผ่นคุณภาพดีที่หลอมละลายพอดี 
                            และซอสสูตรพิเศษที่คิดค้นเฉพาะทางร้าน ให้รสชาติที่กลมกล่อม หอมกลิ่นเนื้อย่าง สัมผัสได้ถึงความนุ่มฉ่ำของเนื้อในทุกคำ เหมาะสำหรับคนรักเบอร์เกอร์ที่ต้องการความพิเศษมากกว่าเบอร์เกอร์ทั่วไป เบอร์เกอร์เนื้อคุณภาพพรีเมียม คัดสรรเนื้อวัวเกรดพรีเมียมนำเข้า นำมาย่างด้วยความพิถีพิถันจนได้ที่พอดี เสิร์ฟพร้อมผักสลัดสดกรอบ ชีสแผ่นคุณภาพดีที่หลอมละลายพอดี 
                            และซอสสูตรพิเศษที่คิดค้นเฉพาะทางร้าน ให้รสชาติที่กลมกล่อม หอมกลิ่นเนื้อย่าง สัมผัสได้ถึงความนุ่มฉ่ำของเนื้อในทุกคำ เหมาะสำหรับคนรักเบอร์เกอร์ที่ต้องการความพิเศษมากกว่าเบอร์เกอร์ทั่วไป เบอร์เกอร์เนื้อคุณภาพพรีเมียม คัดสรรเนื้อวัวเกรดพรีเมียมนำเข้า นำมาย่างด้วยความพิถีพิถันจนได้ที่พอดี เสิร์ฟพร้อมผักสลัดสดกรอบ ชีสแผ่นคุณภาพดีที่หลอมละลายพอดี 
                            และซอสสูตรพิเศษที่คิดค้นเฉพาะทางร้าน ให้รสชาติที่กลมกล่อม หอมกลิ่นเนื้อย่าง สัมผัสได้ถึงความนุ่มฉ่ำของเนื้อในทุกคำ เหมาะสำหรับคนรักเบอร์เกอร์ที่ต้องการความพิเศษมากกว่าเบอร์เกอร์ทั่วไป</p>

                        <div class="mt-8 space-y-6">
                            <button
                                class="inline-flex items-center justify-center gap-2 border border-primary bg-primary px-4 py-3 font-medium text-white hover:bg-secondary hover:border-primary transition-colors">
                                <span class="icon-[tabler--shopping-bag]"></span>
                                ติดต่อเรา
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection