@if (! empty($featured['show']))
<section class="section featured" id="featured">
  <div class="container">
    <div class="section-head reveal">
      <div>
        @if (! empty($featured['eyebrow']))
          <div class="section-eyebrow">{{ $featured['eyebrow'] }}</div>
        @endif
        @if (! empty($featured['title']))
          <h2 class="section-title">{{ $featured['title'] }}</h2>
        @endif
      </div>
      @if (function_exists('wc_get_page_id') && wc_get_page_id('shop') > 0)
        <a href="{{ get_permalink(wc_get_page_id('shop')) }}" class="section-link">
          {{ __('Svi proizvodi', 'elit-gastro') }} →
        </a>
      @endif
    </div>

    <div class="products-grid">
      @forelse ($featuredProducts as $p)
        {{-- Each grid cell wraps the card and (optionally) an inquiry
             button. The button MUST sit outside the wrapping <a class="product">
             because nested anchors are invalid HTML — browsers unwrap them
             at parse time, breaking the outer card link. The wrapper gives
             us a single grid cell that contains both. --}}
        <div class="product-cell reveal">
          <a href="{{ $p['permalink'] }}" class="product">
            <div class="product-media">
              @if ($p['is_on_sale'])
                <span class="product-badge sale">{{ __('Popust', 'elit-gastro') }}</span>
              @elseif ($p['is_new'])
                <span class="product-badge new">{{ __('Novo', 'elit-gastro') }}</span>
              @endif

              @if ($p['image'])
                <img src="{{ $p['image'] }}" alt="{{ $p['name'] }}" loading="lazy" />
              @else
                <x-icon.placeholder />
              @endif
            </div>
            <div class="product-body">
              @if (! empty($p['category_text']))
                <div class="product-cat">{{ $p['category_text'] }}</div>
              @endif
              <div class="product-name">{{ $p['name'] }}</div>
              <div class="product-foot">
                <div class="product-price {{ ! empty($p['is_inquiry']) ? 'quote' : '' }}">
                  @if (! empty($p['is_inquiry']))
                    {{ __('Cijena na upit', 'elit-gastro') }}
                  @else
                    {!! $p['price_html'] !!}
                  @endif
                </div>
                <span class="product-add" aria-label="{{ __('Pogledaj proizvod', 'elit-gastro') }}">
                  <x-icon.plus />
                </span>
              </div>
            </div>
          </a>

          @if (! empty($p['is_inquiry']))
            <a class="product-inquiry-btn" href="{{ $inquiry['url'] }}?product={{ urlencode($p['name']) }}">
              {{ $inquiry['label'] }}
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <line x1="5" y1="12" x2="19" y2="12"/>
                <polyline points="12 5 19 12 12 19"/>
              </svg>
            </a>
          @endif
        </div>
      @empty
        <p class="products-grid__empty">
          {{ __('Trenutno nema istaknutih proizvoda. Označi proizvode kao "Featured" u WooCommerce administraciji.', 'elit-gastro') }}
        </p>
      @endforelse
    </div>
  </div>
</section>
@endif