@{
    ViewData["Title"] = "Каталог";
}

@* заголовок страницы *@
<h1 class="mb-4">Каталог товаров</h1>

@* описание — по заданию: 4 карточки-заглушки *@
<p class="text-muted mb-4">
    Выберите товар для подробной информации. Пока что это заглушки —
    позже карточки будут заполняться данными из базы.
</p>

@* строка с четырьмя карточками *@
@* g-4 — отступы между колонками 1.5rem *@
<div class="row g-4">

    @* === КАРТОЧКА 1: НОУТБУК === *@
    @* col-lg-3 — на больших экранах 4 карточки в ряд (3/12 = 25%) *@
    @* col-md-6 — на средних — 2 в ряд *@
    @* col-12 — на маленьких — 1 в ряд *@
    <div class="col-lg-3 col-md-6 col-12">
        <div class="card h-100 shadow-sm product-card">
            @* заглушка для картинки — вместо реального фото просто серый блок *@
            <div class="card-img-top placeholder-img d-flex align-items-center justify-content-center">
                <span class="fs-1">&#128187;</span>
            </div>
            <div class="card-body d-flex flex-column">
                <h5 class="card-title fw-bold">Ноутбук ProBook 15</h5>
                <p class="card-text text-muted small flex-grow-1">
                    15.6", Intel Core i5, 8 ГБ RAM, 512 ГБ SSD
                </p>
                <div class="d-flex justify-content-between align-items-center mt-2">
                    @* цена *@
                    <span class="fw-bold fs-5 text-primary">45 990 &#8381;</span>
                    @* кнопка "Подробнее" — заглушка *@
                    <a href="#" class="btn btn-outline-primary btn-sm">Подробнее</a>
                </div>
            </div>
        </div>
    </div>

    @* === КАРТОЧКА 2: СМАРТФОН === *@
    <div class="col-lg-3 col-md-6 col-12">
        <div class="card h-100 shadow-sm product-card">
            <div class="card-img-top placeholder-img d-flex align-items-center justify-content-center">
                <span class="fs-1">&#128241;</span>
            </div>
            <div class="card-body d-flex flex-column">
                <h5 class="card-title fw-bold">Смартфон Nova X</h5>
                <p class="card-text text-muted small flex-grow-1">
                    6.5", AMOLED, 128 ГБ, 48 Мп камера
                </p>
                <div class="d-flex justify-content-between align-items-center mt-2">
                    <span class="fw-bold fs-5 text-primary">29 990 &#8381;</span>
                    <a href="#" class="btn btn-outline-primary btn-sm">Подробнее</a>
                </div>
            </div>
        </div>
    </div>

    @* === КАРТОЧКА 3: ПЛАНШЕТ === *@
    <div class="col-lg-3 col-md-6 col-12">
        <div class="card h-100 shadow-sm product-card">
            <div class="card-img-top placeholder-img d-flex align-items-center justify-content-center">
                <span class="fs-1">&#128246;</span>
            </div>
            <div class="card-body d-flex flex-column">
                <h5 class="card-title fw-bold">Планшет Tab Lite</h5>
                <p class="card-text text-muted small flex-grow-1">
                    10.1", 64 ГБ, Wi-Fi, идеален для учёбы
                </p>
                <div class="d-flex justify-content-between align-items-center mt-2">
                    <span class="fw-bold fs-5 text-primary">18 490 &#8381;</span>
                    <a href="#" class="btn btn-outline-primary btn-sm">Подробнее</a>
                </div>
            </div>
        </div>
    </div>

    @* === КАРТОЧКА 4: НАУШНИКИ === *@
    <div class="col-lg-3 col-md-6 col-12">
        <div class="card h-100 shadow-sm product-card">
            <div class="card-img-top placeholder-img d-flex align-items-center justify-content-center">
                <span class="fs-1">&#127911;</span>
            </div>
            <div class="card-body d-flex flex-column">
                <h5 class="card-title fw-bold">Наушники SoundMax</h5>
                <p class="card-text text-muted small flex-grow-1">
                    Накладные, Bluetooth 5.0, шумоподавление, 40 ч
                </p>
                <div class="d-flex justify-content-between align-items-center mt-2">
                    <span class="fw-bold fs-5 text-primary">3 990 &#8381;</span>
                    <a href="#" class="btn btn-outline-primary btn-sm">Подробнее</a>
                </div>
            </div>
        </div>
    </div>

</div>