<section class="hero">
    <div class="hero-texture"></div>
    <div class="container hero-grid">
        <div class="hero-copy">
            <span class="eyebrow"><?= e($config->get('branding.hero_eyebrow')) ?></span>
            <h1><?= e($config->get('branding.hero_heading')) ?><br><em><?= e($config->get('branding.hero_emphasis')) ?></em></h1>
            <p><?= e($config->get('branding.hero_intro')) ?></p>
            <div class="hero-actions">
                <a class="button button-large" href="<?= e(url('/menu')) ?>">Start Your Order</a>
                <?php if ($config->get('business.phone')): ?>
                    <a class="text-link" href="tel:<?= e(preg_replace('/[^0-9+]/', '', (string) $config->get('business.phone'))) ?>">
                        Call <?= e($config->get('business.phone')) ?>
                    </a>
                <?php endif; ?>
            </div>
            <div class="hero-meta">
                <span>Pickup in about <?= (int) $config->get('ordering.pickup_eta_minutes', 25) ?> minutes</span>
                <span><?= (bool) $config->get('ordering.accepting_orders', true) ? 'Ordering now open' : 'Ordering currently paused' ?></span>
            </div>
        </div>
        <div class="hero-plate">
            <div class="hero-food-photo">
                <img src="<?= e(asset((string) $config->get('branding.hero_image'))) ?>" alt="Burger and fries ready for a lakeside meal">
                <div class="hero-photo-caption">
                    <span>From grill to shoreline</span>
                    <strong>Fresh pickup. Easy afternoons.</strong>
                </div>
            </div>
            <div class="hero-stamp" aria-hidden="true">
                <strong>DEMO</strong>
                <span>Lakeside pickup</span>
            </div>
        </div>
    </div>
</section>

<?php if ($specials): ?>
<section class="specials-section section">
    <div class="container">
        <div class="section-heading">
            <div>
                <span class="eyebrow">Happening now</span>
                <h2>Dockside Specials</h2>
            </div>
            <a class="text-link" href="<?= e(url('/menu')) ?>">See the full menu</a>
        </div>
        <div class="special-grid special-count-<?= min(count($specials), 4) ?>">
            <?php foreach ($specials as $special): ?>
                <article class="special-card">
                    <span class="special-badge"><?= e($special['badge']) ?></span>
                    <h3><?= e($special['title']) ?></h3>
                    <p><?= e($special['description']) ?></p>
                    <div class="special-footer">
                        <?php if ($special['price_cents'] !== null): ?>
                            <strong><?= money($special['price_cents']) ?></strong>
                        <?php endif; ?>
                        <?php if ($special['menu_item_id']): ?>
                            <form action="<?= e(url('/cart/add')) ?>" method="post">
                                <?= csrf_field() ?>
                                <input type="hidden" name="menu_item_id" value="<?= (int) $special['menu_item_id'] ?>">
                                <input type="hidden" name="quantity" value="1">
                                <input type="hidden" name="return_to" value="/">
                                <button class="button button-small button-light" type="submit">Add Item</button>
                            </form>
                        <?php endif; ?>
                    </div>
                </article>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<section class="section menu-preview">
    <div class="container">
        <div class="section-heading">
            <div>
                <span class="eyebrow">Packed for the day</span>
                <h2>Shoreline Favorites</h2>
            </div>
            <p>Easygoing food for docks, picnic blankets, and patio tables.</p>
        </div>
        <div class="menu-grid">
            <?php foreach ($featured as $item): ?>
                <?php \FatBottom\Core\View::partial('partials/menu-card', compact('item')); ?>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<section class="lakeside-gallery section">
    <div class="container">
        <div class="section-heading">
            <div>
                <span class="eyebrow">Stay awhile</span>
                <h2>Food fits the view</h2>
            </div>
            <p>Grab a picnic, settle into a sunny table, or let the evening stretch out under the lights.</p>
        </div>
        <div class="experience-grid">
            <figure class="experience-card experience-card-wide">
                <img src="<?= e(asset((string) $config->get('branding.gallery_picnic_image'))) ?>" alt="People enjoying a picnic beside a lake">
                <figcaption><span>Take it outside</span><strong>Picnic-ready</strong></figcaption>
            </figure>
            <figure class="experience-card">
                <img src="<?= e(asset((string) $config->get('branding.gallery_patio_image'))) ?>" alt="Guests sitting and eating at outdoor restaurant tables">
                <figcaption><span>Meet by the water</span><strong>Tables in the sun</strong></figcaption>
            </figure>
            <figure class="experience-card">
                <img src="<?= e(asset((string) $config->get('branding.gallery_service_image'))) ?>" alt="A lively restaurant with diners and servers moving among the tables">
                <figcaption><span>Settle in</span><strong>Friendly table service</strong></figcaption>
            </figure>
        </div>
    </div>
</section>

<section class="category-band">
    <div class="container">
        <span class="eyebrow">Pick your direction</span>
        <div class="category-links">
            <?php foreach ($categories as $category): ?>
                <a href="<?= e(url('/menu')) ?>#<?= e($category['slug']) ?>">
                    <strong><?= e($category['name']) ?></strong>
                    <span><?= count($category['items']) ?> picks</span>
                </a>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<section class="story-section section">
    <div class="container story-grid">
        <div class="story-art">
            <img src="<?= e(asset((string) $config->get('branding.story_image'))) ?>" alt="Sunset over a calm lake and dock">
            <span class="story-number">LAKE</span>
        </div>
        <div>
            <span class="eyebrow"><?= e($config->get('branding.story_eyebrow')) ?></span>
            <h2><?= e($config->get('branding.story_heading')) ?></h2>
            <p><?= e($config->get('branding.story_text')) ?></p>
            <a class="button button-outline" href="<?= e(url('/menu')) ?>">Order for Pickup</a>
        </div>
    </div>
</section>
