<?php
use yii\helpers\Html;
use yii\helpers\Url;
use yii\web\View;

?>
<section class="hero-banner position-relative">
    <div class="position-absolute top-0 left-0 w-100 h-100">
        <img src="<?= Yii::getAlias('@web/imgs/food1.jpg') ?>" 
             alt="Food Delivery" 
             class="w-100 h-100 object-cover"
             style="">
        <div class="position-absolute top-0 left-0 w-100 h-100 hero-overlay"></div>
    </div>
    
    <div class="container-fluid px-4 position-relative z-1 py-20">
        <div class="row">
            <div class="col-lg-8">
                <h1 class="display-4 mb-4" style="font-weight: 550; color: white">
                    Быстрая доставка <span style="color: #bc6c25">вкусной еды</span>
                </h1>
                <p class="h5 mb-6 opacity-90" style="color: white">
                    Более 100 ресторанов в вашем городе
                </p>
                
                <div class="material-card rounded-lg p-1 max-w-xl" style="background: var(--surface);">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1 position-relative">
                            <input type="text" 
                                placeholder="Введите адрес доставки..." 
                                class="material-input w-100 px-3 py-3"
                                style="font-size: 16px; padding-left: 12px; padding-right: 12px; color: var(--text-primary);"
                                onfocus="this.parentElement.classList.add('focused')"
                                onblur="this.parentElement.classList.remove('focused')">
                        </div>
                        <a href="<?= Url::to(['site/restaurants']) ?>" class="text-decoration-none">
                        <button class="material-button accent ms-2 px-6 py-3" style="border-radius: 8px; font-weight: 500; letter-spacing: normal; text-transform: none;">
                            <b>Найти</b>
                        </button>
                        </a>
                    </div>
                </div>

                <div class="d-flex flex-wrap gap-4" style="margin-top: 30px; margin-bottom: 100px; color: white">
                    <div class="d-flex align-items-center">
                        <div class="rounded-circle bg-warning me-2" style="width: 8px; height: 8px;"></div>
                        <span class="opacity-90">Доставка за 30 минут</span>
                    </div>
                    <div class="d-flex align-items-center">
                        <div class="rounded-circle bg-warning me-2" style="width: 8px; height: 8px;"></div>
                        <span class="opacity-90">Бесплатная доставка</span>
                    </div>
                    <div class="d-flex align-items-center">
                        <div class="rounded-circle bg-warning me-2" style="width: 8px; height: 8px;"></div>
                        <span class="opacity-90">100+ ресторанов</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-12">
    <div class="container px-4">
        <h4 class="font-weight-bold mb-8 text-center" style="color: var(--category-text); margin-top: 50px"><b>Категории</b></h4>
        <div class="row g-4" style="margin-top: -80px">
            <?php foreach ($categories as $index => $category): ?>
            <?php 
                $categoryName = $category->category;
                $iconClass = isset($categoryIcons[$categoryName]) ? $categoryIcons[$categoryName] : 'fa-utensils';
                $colorVar = '--category-' . ($index + 1) . '-icon';
                $bgVar = '--category-' . ($index + 1) . '-bg';
            ?>
            <div class="col-6 col-md-4 col-lg-2">
                <a href="<?= Url::to(['site/menu-items', 'category' => $categoryName]) ?>" class="text-decoration-none">
                    <div class="rounded-3 p-3 mb-3 text-center" 
                         style="cursor: pointer; background-color: var(--category-card-bg); border: 1px solid var(--category-card-border); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);"
                         onmouseover="this.style.boxShadow='0 10px 25px rgba(0,0,0,0.2)'; this.querySelector('.category-icon').style.transform='scale(1.15)';"
                         onmouseout="this.style.boxShadow='none'; this.querySelector('.category-icon').style.transform='scale(1)'">
                        <div class="d-flex flex-column justify-content-between align-items-center h-100">
                            <div class="rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3 category-icon" 
                                 style="background-color: var(<?= $bgVar ?>); width: 56px; height: 56px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);">
                                <i class="fas <?= $iconClass ?>" style="color: var(<?= $colorVar ?>); font-size: 24px;"></i>
                            </div>
                            <span class="font-weight-bold" style="font-size: 14px; color: var(--category-text);"><b><?= Html::encode($categoryName) ?></b></span>
                        </div>
                    </div>
                </a>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<section class="py-8 bg-white" style="margin-bottom: 50px; margin-top: 30px; padding-top: 40px; padding-bottom: 40px">
    <div class="container px-4">
        <h4 class="font-weight-bold mb-6" style="margin-top: 0;"><b>Популярные рестораны</b></h4>
        <div class="row g-4" style="margin-top: 20px">
            <?php foreach ($popularRestaurants as $restaurant): ?>
            <div class="col-md-6 col-lg-4">
                <a href="<?= Url::to(['site/restaurant-menu', 'id' => $restaurant->id]) ?>" class="text-decoration-none">
                    <div class="rounded-3 mb-3 position-relative" 
                         style="cursor: pointer; background-color: var(--category-card-bg); border: 1px solid var(--category-card-border); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; height: 100%;"
                         onmouseover="this.style.boxShadow='0 10px 25px rgba(0,0,0,0.2)'"
                         onmouseout="this.style.boxShadow='none'">
                        <?php if ($restaurant->estimation): ?>
                        <div class="position-absolute" style="top: 8px; right: 8px; z-index: 10;">
                            <span class="rounded-pill bg-white px-2 py-1 d-inline-flex align-items-center" 
                                  style="color: var(--category-text); background-color: rgba(0, 0, 0, 0.8); font-size: 12px; backdrop-filter: blur(2px);">
                                <i class="fas fa-star me-1" style="font-size: 10px;"></i>
                                <b><?= number_format($restaurant->estimation, 1) ?></b>
                            </span>
                        </div>
                        <?php endif; ?>
                        
                        <div class="restaurant-image" style="height: 140px; overflow: hidden;">
                            <?php if ($restaurant->img): ?>
                            <?php
                            $imagePath = '/restaurant_imgs/' . $restaurant->img;
                            $fullImagePath = Yii::getAlias('@web' . $imagePath);
                            ?>
                            <img src="<?= $fullImagePath ?>" 
                                 alt="<?= Html::encode($restaurant->name) ?>" 
                                 class="position-absolute top-0 left-0"
                                 style="width: 100%; height: 50%; object-fit: cover; object-position: center; transition: transform 0.5s ease; min-width: 100%;"
                                 onmouseover="this.style.transform='scale(1.03)'"
                                 onmouseout="this.style.transform='scale(1)'">
                            <?php else: ?>
                            <div class="w-100 h-100 d-flex align-items-center justify-content-center bg-light">
                                <i class="fas fa-utensils fa-2x text-muted"></i>
                            </div>
                            <?php endif; ?>
                        </div>
                        <div class="p-3">
                            <h3 class="h5 font-weight-bold mb-1" style="color: var(--category-text);"><b><?= Html::encode($restaurant->name) ?></b></h3>
                            <p class="mb-2" style="color: var(--category-text); opacity: 0.7; font-size: 13px;">
                                <?= Html::encode($restaurant->category) ?>
                            </p>
                            <div class="d-flex justify-content-between align-items-center">
                                <span style="opacity: 0.7; font-size: 13px; color: var(--category-text);">
                                    <i class="fas fa-clock me-1"></i>
                                    <?= $restaurant->average_time ? '~' . $restaurant->average_time . ' мин' : '~30 мин' ?>
                                </span>
                                <span class="font-weight-bold" style="color: var(--category-1-icon); font-size: 13px;">
                                    <b>Бесплатно</b>
                                </span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>