@extends('layouts.app')

@section('title', 'Новинки — teeu')
@section('meta_description', 'Свежие поступления на teeu: новые товары со всего маркетплейса от проверенных продавцов.')

@section('seo')
    @include('partials.seo.meta', [
        'canonical' => route('new.index'),
        'ogTitle' => 'Новинки — teeu',
        'ogDescription' => 'Свежие поступления со всего маркетплейса teeu.',
    ])
@endsection

@section('content')
    <nav class="mb-4 text-sm text-[var(--color-muted)]">
        <a href="{{ route('home') }}" class="hover:text-[var(--color-primary)]">Главная</a>
        <span class="mx-1">/</span>
        <span class="text-[var(--color-ink)]">Новинки</span>
    </nav>

    <div class="flex flex-wrap items-center gap-3">
        <h1 class="text-2xl font-extrabold tracking-tight text-[var(--color-ink)]">Новинки</h1>
        <span class="inline-flex items-center gap-1.5 rounded-full bg-[var(--color-primary-soft)] px-3 py-1.5 text-[13px] font-extrabold text-[var(--color-primary)]"><i data-lucide="sparkles" class="h-3.5 w-3.5"></i> Свежие поступления</span>
    </div>
    <p class="mt-1 text-sm text-[var(--color-slate)]">Самые новые товары со всего маркетплейса — от проверенных продавцов.</p>

    @if ($products->isEmpty())
        <div class="mt-6 rounded-[var(--radius-lg)] border border-dashed border-[var(--color-line)] bg-white p-10 text-center text-[var(--color-muted)]">
            Пока нет товаров. <a href="{{ route('catalog.index') }}" class="font-semibold text-[var(--color-primary)]">Перейти в каталог</a>.
        </div>
    @else
        <div class="mt-6 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
            @foreach ($products as $product)
                <x-product-card :product="$product" />
            @endforeach
        </div>
        <div class="mt-6">{{ $products->links() }}</div>
    @endif
@endsection