@extends('layouts.app')

@section('content')
    <!-- فونت فارسی -->
    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Vazirmatn', sans-serif;
            background: linear-gradient(to bottom right, #1a1a1a, #2a2a2a);
            color: #e5e7eb;
        }
    </style>

    <div class="container mx-auto px-4 py-10">
        <!-- دسته بندی ها -->
        <div class="flex flex-wrap justify-center gap-4 mb-12">
            @foreach($categories as $category)
                <a href="{{ route('groups.menu', ['category_id' => $category->id]) }}"
                   class="flex items-center gap-2 px-2 text-[13px] py-2.5 rounded-2xl border border-gray-600/40
                          backdrop-blur-md shadow-md font-semibold text-base transition-all duration-300
                          @if($selectedCategory == $category->id)
                              bg-gradient-to-r from-pink-600 to-purple-600 text-white shadow-lg scale-105
                          @else
                              bg-gray-800/70 text-gray-200 hover:bg-gradient-to-r hover:from-pink-500 hover:to-purple-500 hover:text-white
                          @endif">
                    <i class="fas fa-utensils"></i>
                    {{ $category->name }}
                </a>
            @endforeach
        </div>

        <!-- محصولات -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            @forelse($products as $product)
                <div class="bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transition-all duration-300 p-6 flex flex-col items-center text-center">
                    @if($product->image)
                        <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}"
                             class="w-32 h-32 object-cover rounded-full mb-6 shadow-md border-4 border-gray-700">
                    @else
                        <div class="w-32 h-32 rounded-full bg-gray-700 flex items-center justify-center mb-6 shadow-inner">
                            <span class="text-gray-400">بدون عکس</span>
                        </div>
                    @endif

                    <h2 class="text-2xl font-bold text-gray-100 mb-2">{{ $product->name }}</h2>
                    <p class="text-gray-400 mb-4 line-clamp-3 leading-relaxed">{{ $product->description }}</p>
                    @if($product->price > 0)
                    <span class="inline-block px-4 py-1 rounded-full bg-green-900/50 text-green-300 font-semibold text-sm">
                        {{ number_format($product->price) }} تومان
                    </span>
                    @else
                    <span class="inline-block px-4 py-1 rounded-full bg-green-900/50 text-green-300 font-semibold text-sm">
                        متغیر
                    </span>
                    @endif
                </div>
            @empty
                <p class="col-span-3 text-center text-gray-500 text-lg">
                    محصولی در این دسته موجود نیست 🙁
                </p>
            @endforelse
        </div>

        <!-- فقط اینستاگرام -->
        <div class="fixed flex justify-center bottom-6 right-6">
            <a href="https://www.instagram.com/coffe_nazari?igsh=MTUybnNxejVhMTBzbw==" target="_blank"
               class="w-14 h-14 rounded-full bg-gradient-to-tr from-yellow-500 via-pink-600 to-purple-700 flex items-center justify-center shadow-xl hover:scale-110 transition-transform duration-300">
                <svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24" class="w-7 h-7">
                    <path d="M7.75 2h8.5A5.75 5.75 0 0 1 22 7.75v8.5A5.75 5.75 0 0 1 16.25 22h-8.5A5.75 5.75 0 0 1 2 16.25v-8.5A5.75 5.75 0 0 1 7.75 2Zm0 1.5A4.25 4.25 0 0 0 3.5 7.75v8.5A4.25 4.25 0 0 0 7.75 20.5h8.5a4.25 4.25 0 0 0 4.25-4.25v-8.5A4.25 4.25 0 0 0 16.25 3.5h-8.5Zm4.25 4a5.25 5.25 0 1 1 0 10.5 5.25 5.25 0 0 1 0-10.5Zm0 1.5a3.75 3.75 0 1 0 0 7.5 3.75 3.75 0 0 0 0-7.5ZM17.5 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"/>
                </svg>
            </a>
        </div>
    </div>
@endsection