@php
$locale = current_locale();

$fallbackTiles = [
    [
        'title' => match($locale) {
            'en' => 'Hair dryer and styler collection',
            'ru' => 'Коллекция фенов и стайлеров',
            default => 'Fen və stayer kolleksiyası',
        },
        'image' => 'ht816-new.jpg',
        'link' => localized_route('categories.show', 'gozellik-ve-saglamliq'),
    ],
    [
        'title' => match($locale) {
            'en' => 'Massage devices collection',
            'ru' => 'Коллекция массажных устройств',
            default => 'Massaj cihazları kolleksiyası',
        },
        'image' => 'c610-s.jpg',
        'link' => localized_route('categories.show', 'aksesuarlar'),
    ],
];

if (!isset($collectionTiles) || $collectionTiles->isEmpty()) {
    $collectionTiles = collect();
} else {
    $collectionTiles = $collectionTiles->map(function ($tile) {
        return [
            'title' => $tile->title,
            'image' => $tile->image,
            'big_image' => $tile->big_image,
            'small_image' => $tile->small_image,
            'link' => $tile->link ?: localized_route('products.index'),
            'settings' => $tile->settings ?? [],
        ];
    });
}

$tileImage = function ($tile, $size = 'image') {
    if ($size === 'big' && !empty($tile['big_image'])) {
        return asset('images/' . $tile['big_image']);
    }
    if ($size === 'small' && !empty($tile['small_image'])) {
        return asset('images/' . $tile['small_image']);
    }
    if (!empty($tile['image'])) {
        return asset('images/' . $tile['image']);
    }
    return asset('images/placeholder.jpg');
};

$viewCollection = match($locale) {
    'en' => 'View collection',
    'ru' => 'Смотреть коллекцию',
    default => 'Kolleksiyaya bax',
};

$gridProducts = $gridProducts ?? \App\Models\Product::with('category')->where('is_featured', true)->take(8)->get();
$tile1 = $collectionTiles[0] ?? null;
$tile2 = $collectionTiles[1] ?? null;
@endphp

@if($tile1 && $tile2)
<section class="products-showcase bg-[#38312d] py-3 sm:py-5 lg:py-7">
    <div class="mx-auto max-w-[1612px] px-4 sm:px-6 lg:px-8">
        <div class="products-grid">

            {{-- Collection tile 1 --}}
            @php
                $tile1Fit = $tile1['settings']['image_fit'] ?? 'cover';
                $tile1Scale = max(1, (float)($tile1['settings']['image_scale'] ?? 1));
            @endphp
            <a href="{{ $tile1['link'] }}" class="product-collection group">
                @if($tile1Fit === 'contain')
                    <img src="{{ $tileImage($tile1, 'big') }}" alt="" aria-hidden="true" class="absolute inset-0 h-full w-full" style="object-fit:cover;filter:blur(22px);transform:scale(1.08);opacity:.45;">
                @endif
                <picture class="absolute inset-0 z-[1]">
                    <source media="(max-width: 768px)" srcset="{{ $tileImage($tile1, 'small') }}">
                    <img src="{{ $tileImage($tile1, 'big') }}" alt="{{ $tile1['title'] }}" class="w-full h-full transition duration-700" style="object-fit:{{ $tile1Fit }};object-position:center;transform:scale({{ $tile1Scale }})">
                </picture>
                <div class="absolute inset-0 z-[2] bg-gradient-to-t from-black/70 via-black/5 to-transparent"></div>
                <div class="product-collection__content z-[3]">
                    <h3>{{ $tile1['title'] }}</h3>
                    <span>
                        {{ $viewCollection }}
                        <svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/>
                        </svg>
                    </span>
                </div>
            </a>

            {{-- Products 1-4: two beside the first collection, two before the second --}}
            @foreach($gridProducts->slice(0, 4) as $product)
                @include('partials.product-grid-card', ['product' => $product])
            @endforeach

            {{-- Collection tile 2 --}}
            @php
                $tile2Fit = $tile2['settings']['image_fit'] ?? 'cover';
                $tile2Scale = max(1, (float)($tile2['settings']['image_scale'] ?? 1));
            @endphp
            <a href="{{ $tile2['link'] }}" class="product-collection group">
                @if($tile2Fit === 'contain')
                    <img src="{{ $tileImage($tile2, 'big') }}" alt="" aria-hidden="true" class="absolute inset-0 h-full w-full" style="object-fit:cover;filter:blur(22px);transform:scale(1.08);opacity:.45;">
                @endif
                <picture class="absolute inset-0 z-[1]">
                    <source media="(max-width: 768px)" srcset="{{ $tileImage($tile2, 'small') }}">
                    <img src="{{ $tileImage($tile2, 'big') }}" alt="{{ $tile2['title'] }}" class="w-full h-full transition duration-700" style="object-fit:{{ $tile2Fit }};object-position:center;transform:scale({{ $tile2Scale }})">
                </picture>
                <div class="absolute inset-0 z-[2] bg-gradient-to-t from-black/70 via-black/5 to-transparent"></div>
                <div class="product-collection__content z-[3]">
                    <h3>{{ $tile2['title'] }}</h3>
                    <span>
                        {{ $viewCollection }}
                        <svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/>
                        </svg>
                    </span>
                </div>
            </a>

            {{-- Products 5-8 --}}
            @foreach($gridProducts->slice(4, 4) as $product)
                @include('partials.product-grid-card', ['product' => $product])
            @endforeach

        </div>
    </div>
</section>
@endif