@extends('layouts.shop')

@section('meta_title', 'Главная')
@section('meta_description', 'Интернет-магазин комплектующих для ПК: процессоры, материнские платы, видеокарты, ноутбуки и периферия.')
@section('meta_keywords', 'интернет-магазин пк, комплектующие, процессоры, видеокарты, ноутбуки')
@section('meta_canonical', route('home'))

@section('content')
    <section class="pc-home-sliders">
        @include('partials.home-slider', [
            'slides' => $leftSlides,
            'sliderClass' => 'is-main',
            'fallbackTitle' => 'Собирайте ПК быстрее',
            'fallbackText' => 'Процессоры, материнские платы, видеокарты, ноутбуки и периферия в одном каталоге.',
            'fallbackUrl' => route('catalog.index'),
            'fallbackButton' => 'Перейти в каталог',
        ])
        @include('partials.home-slider', [
            'slides' => $rightSlides,
            'sliderClass' => 'is-side',
            'fallbackTitle' => 'Доставка и оплата',
            'fallbackText' => 'Узнайте сроки доставки и способы оплаты заказа.',
            'fallbackUrl' => route('pages.shipping-payment'),
            'fallbackButton' => 'Подробнее',
        ])
    </section>

    <section class="pc-section">
        <div class="pc-section-title">
            <h2>Категории</h2>
        </div>
        <div class="pc-grid pc-grid-4 pc-category-grid">
            @foreach ($categories as $category)
                <a class="pc-card pc-category-card pc-category-link" href="{{ route('catalog.category', $category) }}">
                    <div class="pc-category-image" role="img" aria-label="{{ $category->name }}"></div>
                    <h3 class="pc-category-title">{{ $category->name }}</h3>
                </a>
            @endforeach
        </div>
    </section>

    @include('partials.product-carousel', [
        'title' => 'Популярные товары',
        'products' => $featured,
        'emptyText' => 'Пока нет популярных товаров.',
    ])

    @include('partials.product-carousel', [
        'title' => 'Новые товары',
        'products' => $newProducts,
        'emptyText' => 'Пока нет новых товаров.',
    ])

    <section class="pc-grid pc-grid-3">
        <a class="pc-card pc-category-link" href="{{ route('pages.shipping-payment') }}">
            <div class="pc-card-meta">Сервис</div>
            <h3>Доставка и оплата</h3>
            <p>Условия доставки, способы оплаты и сроки отправки.</p>
        </a>
        <a class="pc-card pc-category-link" href="{{ route('pages.about') }}">
            <div class="pc-card-meta">Компания</div>
            <h3>О нас</h3>
            <p>Чем занимаемся и как помогаем выбрать комплектующие.</p>
        </a>
        <a class="pc-card pc-category-link" href="{{ route('pages.contacts') }}">
            <div class="pc-card-meta">Поддержка</div>
            <h3>Контакты</h3>
            <p>Свяжитесь с нами для консультации по вашей сборке.</p>
        </a>
    </section>
@endsection