@extends('layouts.app')
@section('title', __('nav.menu'))

@section('content')

<div style="height:280px;background:linear-gradient(135deg,var(--ocean),var(--turquoise-dark));display:flex;align-items:flex-end;padding-bottom:3rem;">
  <div class="container" style="text-align:center;width:100%;">
    <span class="section-label" style="color:var(--gold-light);">{{ __('menu.label') }}</span>
    <h1 style="font-size:clamp(2.5rem,6vw,4.5rem);color:var(--white);">{{ __('menu.page_title') }} <em style="color:var(--gold-light);">{{ __('menu.page_title_em') }}</em></h1>
  </div>
</div>

<section class="menu-section">
  <div class="container">

    @php
      $categories = [
        ['key'=>'starters','label'=>__('menu.starters')],
        ['key'=>'mains','label'=>__('menu.mains')],
        ['key'=>'drinks','label'=>__('menu.drinks')],
        ['key'=>'desserts','label'=>__('menu.desserts')],
      ];
      $groupedItems = $menuItems->groupBy('category');
    @endphp

    <div class="menu-tabs">
      @foreach($categories as $i => $cat)
        @if(isset($groupedItems[$cat['key']]) && $groupedItems[$cat['key']]->count())
        <button class="menu-tab {{ $i === 0 ? 'active' : '' }}" data-category="{{ $cat['key'] }}">
          {{ $cat['label'] }}
        </button>
        @endif
      @endforeach
    </div>

    @foreach($categories as $i => $cat)
      @if(isset($groupedItems[$cat['key']]))
      <div class="menu-category {{ $i === 0 ? 'active' : '' }}" id="cat-{{ $cat['key'] }}">
        @foreach($groupedItems[$cat['key']] as $item)
        <div class="menu-item">
          <div class="menu-item-info">
            <h4>{{ app()->getLocale() === 'tr' ? $item->name_tr : $item->name_en }}</h4>
            @if($item->description_tr || $item->description_en)
            <p>{{ app()->getLocale() === 'tr' ? $item->description_tr : $item->description_en }}</p>
            @endif
          </div>
          <div class="menu-item-price">₺{{ number_format($item->price) }}</div>
        </div>
        @endforeach
      </div>
      @endif
    @endforeach

  </div>
</section>

@endsection