<?= $this->extend('layouts/main') ?>

<?= $this->section('title') ?>Alimentos y Bebidas<?= $this->endSection() ?>

<?= $this->section('content') ?>
<section class="confiteria-section">
    <div class="section-heading">
        <span class="eyebrow">Alimentos y bebidas</span>
        <h2>Menú de snacks y combos</h2>
    </div>

    <div class="membership-box">
        <p>Disfruta de combos irresistibles, bebidas y promociones especiales antes o después de tu función.</p>
    </div>

    <?php if ($descuentoPct > 0): ?>
        <div class="membership-box" style="background: linear-gradient(90deg, #1b5e20, #2e7d32);">
            <p>🎟️ Tienes un descuento de membresía del <?= esc($descuentoPct) ?>% aplicado a los precios que ves a continuación.</p>
        </div>
    <?php endif; ?>

    <div class="confiteria-tabs">
        <button class="active" type="button" data-filter="todos">Todos</button>
        <button type="button" data-filter="combos">Combos</button>
        <button type="button" data-filter="canchita">Canchita</button>
        <button type="button" data-filter="bebidas">Bebidas</button>
        <button type="button" data-filter="dulces">Dulces</button>
    </div>

    <div class="card-grid">
        <?php foreach ($productos as $producto): ?>
            <?php $precioFinal = $descuentoPct > 0 ? round($producto->precio * (1 - $descuentoPct / 100), 2) : $producto->precio; ?>
            <article class="promo-card accent">
                <div class="card-img" <?= isset($producto->imagen) ? 'style="background-image:url(\'' . esc($producto->imagen) . '\')"' : '' ?>></div>
                <div class="card-body">
                    <h3><?= esc($producto->nombre) ?></h3>
                    <p><?= esc($producto->descripcion) ?></p>
                    <div class="card-footer">
                        <?php if ($descuentoPct > 0): ?>
                            <span class="price">
                                <span style="text-decoration: line-through; opacity: 0.6; font-size: 0.8em; margin-right: 4px;">S/ <?= number_format($producto->precio, 2) ?></span>
                                S/ <?= number_format($precioFinal, 2) ?>
                            </span>
                        <?php else: ?>
                            <span class="price">S/ <?= number_format($producto->precio, 2) ?></span>
                        <?php endif; ?>
                        <button class="btn-add" type="button">Agregar</button>
                    </div>
                </div>
            </article>
        <?php endforeach; ?>
    </div>
</section>
<?= $this->endSection() ?>