<?php $s = $shopSettings; ?>

<!-- ── Hero ──────────────────────────────────────────────────────────── -->
<div class="home-hero">
    <div class="home-hero-text">
        <div class="home-hero-tag">🚀 Fast Delivery</div>
        <h2><?= e($s['restaurant_name'] ?? APP_NAME) ?></h2>
        <p>Hot food delivered to your door</p>
    </div>
    <div class="home-hero-emoji">
        <?php if (!empty($s['restaurant_logo'])): ?>
        <img src="<?= e(upload_url($s['restaurant_logo'])) ?>" alt="Logo"
             style="width:80px;height:80px;border-radius:50%;object-fit:cover;box-shadow:0 4px 20px rgba(0,0,0,.3);">
        <?php else: ?>
        🍕
        <?php endif; ?>
    </div>
</div>

<!-- ── Category Icon Grid ─────────────────────────────────────────────── -->
<?php if (!empty($categories)): ?>
<div class="sec-head">
    <h3>Categories</h3>
    <a href="<?= url('shop/menu') ?>">See all</a>
</div>
<div class="cat-icon-grid">
    <?php foreach ($categories as $cat): ?>
    <a href="#cs-<?= $cat['id'] ?>" class="cat-icon-card" onclick="scrollToCat(<?= $cat['id'] ?>)">
        <div class="cic-circle">
            <?php if (!empty($cat['icon_image'])): ?>
            <img src="<?= e(upload_url($cat['icon_image'])) ?>" alt="<?= e($cat['name']) ?>">
            <?php else: ?>
            <span><?= mb_substr(e($cat['name']), 0, 1) ?></span>
            <?php endif; ?>
        </div>
        <div class="cic-label"><?= e($cat['name']) ?></div>
    </a>
    <?php endforeach; ?>
</div>
<?php endif; ?>

<!-- ── Sticky Category Tab Bar ───────────────────────────────────────── -->
<div class="cat-tab-bar" id="catTabBar">
    <div class="cat-tab-inner" id="catTabInner">
        <?php foreach ($categories as $cat):
            if (empty($byCategory[(int)$cat['id']])) continue; ?>
        <button class="cat-tab" id="tab-<?= $cat['id'] ?>"
                onclick="scrollToCat(<?= $cat['id'] ?>)">
            <?= e($cat['name']) ?>
        </button>
        <?php endforeach; ?>
    </div>
</div>

<!-- ── Deals ─────────────────────────────────────────────────────────── -->
<?php if (!empty($deals)): ?>
<div class="sec-head">
    <h3>🔥 Today's Deals</h3>
</div>
<div class="deals-scroll">
    <?php foreach ($deals as $deal): ?>
    <div class="deal-card" onclick="openDealModal(<?= $deal['id'] ?>)">
        <?php if (!empty($deal['deal_image'])): ?>
        <img src="<?= e(upload_url($deal['deal_image'])) ?>" alt="<?= e($deal['title']) ?>">
        <?php else: ?>
        <div class="deal-card-img">🎁</div>
        <?php endif; ?>
        <div class="deal-card-body">
            <div class="deal-card-title"><?= e($deal['title']) ?></div>
            <?php if (!empty($deal['items'])): ?>
            <div class="deal-card-items">
                <?= e(implode(' + ', array_map(fn($i) => ($i['quantity']>1?$i['quantity'].'× ':'').$i['item_name'], $deal['items']))) ?>
            </div>
            <?php endif; ?>
            <div class="deal-card-price"><?= money((float)$deal['deal_price']) ?></div>
        </div>
    </div>
    <?php endforeach; ?>
</div>
<?php endif; ?>

<!-- ── Menu sections ─────────────────────────────────────────────────── -->
<div id="menuSections">
<?php foreach ($categories as $cat):
    $catItems = $byCategory[(int)$cat['id']] ?? [];
    if (empty($catItems)) continue;
?>
<div class="menu-section" id="cs-<?= $cat['id'] ?>">
    <div class="sec-head" style="padding-top:22px;">
        <h3><?= e($cat['name']) ?></h3>
        <a href="<?= url('shop/menu?cat='.$cat['id']) ?>">See all</a>
    </div>
    <div class="item-grid">
        <?php foreach (array_slice($catItems, 0, 6) as $item): ?>
        <?php include __DIR__ . '/_item_grid_card.php'; ?>
        <?php endforeach; ?>
    </div>
    <?php if (count($catItems) > 6): ?>
    <div style="text-align:center;padding:10px 14px 4px;">
        <a href="<?= url('shop/menu?cat='.$cat['id']) ?>" class="see-more-link">
            +<?= count($catItems) - 6 ?> more in <?= e($cat['name']) ?> <i class="bi bi-arrow-right"></i>
        </a>
    </div>
    <?php endif; ?>
</div>
<?php endforeach; ?>
</div>

<?php include __DIR__ . '/_item_modal.php'; ?>

<?php ob_start(); ?>
<script>
// ── Scroll to category section ──────────────────────────────────────────
function scrollToCat(id) {
    const el = document.getElementById('cs-' + id);
    if (!el) return;
    const bar    = document.getElementById('catTabBar');
    const offset = bar ? bar.offsetHeight + 60 : 70;
    const top    = el.getBoundingClientRect().top + window.scrollY - offset;
    window.scrollTo({ top, behavior: 'smooth' });
}

// ── Sticky tab bar: highlight active category on scroll ────────────────
const sections = document.querySelectorAll('[id^="cs-"]');
const tabBar   = document.getElementById('catTabBar');

const obs = new IntersectionObserver(entries => {
    entries.forEach(e => {
        if (e.isIntersecting) {
            const id = e.target.id.replace('cs-', '');
            document.querySelectorAll('.cat-tab').forEach(t => t.classList.remove('active'));
            const tab = document.getElementById('tab-' + id);
            if (tab) {
                tab.classList.add('active');
                // Scroll tab into view within bar
                tab.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
            }
        }
    });
}, { rootMargin: '-60px 0px -60% 0px', threshold: 0 });

sections.forEach(s => obs.observe(s));

// ── Sticky tab bar appears after hero ──────────────────────────────────
const hero = document.querySelector('.home-hero');
const scrollObs = new IntersectionObserver(([e]) => {
    tabBar.classList.toggle('visible', !e.isIntersecting);
}, { threshold: 0 });
if (hero) scrollObs.observe(hero);
</script>
<?php $extraJs = ob_get_clean(); ?>
