@{
    ViewData["Title"] = "Главная";
}

<section class="promo-banner">
    <div>
        <h1 class="promo-banner__title">ТехноМир — техника по честным ценам</h1>
        <p class="promo-banner__text">
            Ноутбуки, смартфоны, планшеты и наушники.
            Бесплатная доставка от 5 000 &#8381; по всей России.
        </p>
        <a asp-controller="Catalog" asp-action="Index" class="btn btn-primary">Перейти в каталог</a>
    </div>
    
    <div class="promo-banner__icon">
        <i class="bi bi-laptop"></i>
    </div>
</section>

<div class="advantages">
    
    <div class="advantage">
        <span class="advantage__icon tint-blue"><i class="bi bi-truck"></i></span>
        <div>
            <p class="advantage__title">Доставка от 1 дня</p>
            <p class="advantage__text">По Москве и области</p>
        </div>
    </div>

    
    <div class="advantage">
        <span class="advantage__icon tint-green"><i class="bi bi-shield-check"></i></span>
        <div>
            <p class="advantage__title">Гарантия на весь товар</p>
            <p class="advantage__text">Официальная гарантия</p>
        </div>
    </div>

    
    <div class="advantage">
        <span class="advantage__icon tint-amber"><i class="bi bi-arrow-return-left"></i></span>
        <div>
            <p class="advantage__title">Возврат 14 дней</p>
            <p class="advantage__text">Без вопросов</p>
        </div>
    </div>

    
    <div class="advantage">
        <span class="advantage__icon tint-violet"><i class="bi bi-credit-card"></i></span>
        <div>
            <p class="advantage__title">Удобная оплата</p>
            <p class="advantage__text">Картой, наличными, рассрочка</p>
        </div>
    </div>
</div>

<section class="home-section">
    <div class="section-head">
        <div>
            <span class="section-overline">Популярное</span>
            <h2 class="section-title">Хиты продаж</h2>
        </div>
        <a class="section-link" asp-controller="Catalog" asp-action="Index">Все товары &rarr;</a>
    </div>

    <div class="row g-3 g-md-4">
        
        <div class="col-lg-3 col-md-6 col-12">
            <article class="product-card">
                
                <span class="product-card__badge badge-hit">Хит продаж</span>
                
                <div class="product-card__media"><i class="bi bi-laptop"></i></div>
                <div class="product-card__body">
                    <h5 class="product-card__name">Ноутбук Pro 15</h5>
                    
                    <div class="product-card__specs">
                        <span>Экран 15.6" · 8 ГБ RAM · SSD 512 ГБ</span>
                    </div>
                    <div class="product-card__footer">
                        <span class="product-card__price">89 990 &#8381;</span>
                        <a href="#" class="btn btn-primary btn-sm product-card__btn">Купить</a>
                    </div>
                </div>
            </article>
        </div>

        
        <div class="col-lg-3 col-md-6 col-12">
            <article class="product-card">
                <span class="product-card__badge badge-hit">Хит продаж</span>
                <div class="product-card__media"><i class="bi bi-phone"></i></div>
                <div class="product-card__body">
                    <h5 class="product-card__name">Смартфон Nova X</h5>
                    <div class="product-card__specs">
                        <span>Экран 6.7" · Камера 108 Мп · 128 ГБ</span>
                    </div>
                    <div class="product-card__footer">
                        <span class="product-card__price">29 990 &#8381;</span>
                        <a href="#" class="btn btn-primary btn-sm product-card__btn">Купить</a>
                    </div>
                </div>
            </article>
        </div>

        
        <div class="col-lg-3 col-md-6 col-12">
            <article class="product-card">
                <span class="product-card__badge badge-new">Новинка</span>
                <div class="product-card__media"><i class="bi bi-tablet"></i></div>
                <div class="product-card__body">
                    <h5 class="product-card__name">Планшет Tab Lite</h5>
                    <div class="product-card__specs">
                        <span>Экран 11" · 4 ГБ RAM · 128 ГБ</span>
                    </div>
                    <div class="product-card__footer">
                        <span class="product-card__price">18 490 &#8381;</span>
                        <a href="#" class="btn btn-primary btn-sm product-card__btn">Купить</a>
                    </div>
                </div>
            </article>
        </div>

        
        <div class="col-lg-3 col-md-6 col-12">
            <article class="product-card">
                <span class="product-card__badge badge-hot">Выгодно</span>
                <div class="product-card__media"><i class="bi bi-headphones"></i></div>
                <div class="product-card__body">
                    <h5 class="product-card__name">Наушники SoundMax</h5>
                    <div class="product-card__specs">
                        <span>Bluetooth 5.3 · ANC · 40 ч</span>
                    </div>
                    <div class="product-card__footer">
                        <span class="product-card__price">3 990 &#8381;</span>
                        <a href="#" class="btn btn-primary btn-sm product-card__btn">Купить</a>
                    </div>
                </div>
            </article>
        </div>
    </div>
</section>

<section class="home-section">
    <div class="cta">
        <h2 class="cta__title">Не нашли нужное?</h2>
        <p class="cta__text">
            Напишите нам — поможем выбрать технику под ваши задачи и бюджет.
        </p>
        <a asp-controller="Home" asp-action="Contacts" class="btn btn-primary">Перейти к контактам</a>
    </div>
</section>