<?php
$pageTitle = 'tagline';
require_once 'includes/header.php';

$db = getDB();

// ─────────────────────────────────────────────
// GET ALL MENU ITEMS
// ─────────────────────────────────────────────
$featured = $db->query("
SELECT *
FROM menu_items
WHERE is_available = 1
ORDER BY id DESC
")->fetchAll();

?>

<!-- ── Hero ────────────────────────────────────────────────── -->
<section class="hero">

  <div class="hero-bg"></div>

  <div class="hero-content">

    <span class="hero-eyebrow">

      <?= t('tagline') ?>

    </span>

    <h1>

      <?= t('hero_title') ?>

    </h1>

    <p>

      <?= t('hero_desc') ?>

    </p>

    <div class="hero-btns">

      <a href="reservations.php"
         class="btn btn-primary btn-lg">

        <?= t('book_table') ?>

      </a>

      <a href="menu.php"
         class="btn btn-outline btn-lg">

        <?= t('explore_menu') ?>

      </a>

      <a href="delivery.php"
         class="btn btn-outline btn-lg">

        🚚 <?= t('delivery') ?>

      </a>

    </div>

  </div>

</section>

<!-- ── Delivery banner ──────────────────────────────────────── -->
<div class="free-banner">

  ★ <?= t('free_delivery') ?> ★

</div>

<!-- ── About ────────────────────────────────────────────────── -->
<section class="section"
         style="background:var(--bg2)">

  <div class="container"
       style="
        max-width:850px;
        margin:auto;
        text-align:center;
        padding:0 20px
       ">

    <span class="section-tag">

      <?= t('about_tag') ?>

    </span>

    <h2 class="section-title"
        style="
          margin-inline:auto;
          max-width:700px
        ">

      <?= t('about_title') ?>

    </h2>

    <p style="
      color:var(--fg60);
      line-height:1.9;
      margin-bottom:18px;
      font-size:16px
    ">

      <?= t('about_p1') ?>

    </p>

    <p style="
      color:var(--fg60);
      line-height:1.9;
      margin-bottom:32px;
      font-size:16px
    ">

      <?= t('about_p2') ?>

    </p>

    <a href="menu.php"
       class="btn btn-primary btn-lg">

      <?= t('explore_menu') ?>

    </a>

  </div>

</section>

<!-- ── MENU PRODUCTS ───────────────────────────────────────── -->
<section class="section">

  <div class="container">

    <div class="text-center"
         style="margin-bottom:48px">

      <span class="section-tag">

        MENU

      </span>

      <h2 class="section-title">

        Our Menu

      </h2>

    </div>

    <div class="menu-grid">

      <?php foreach ($featured as $item): ?>

      <div class="menu-card">

        <img
          class="menu-card-img"

          src="<?= e('./' . ($item['image_url'] ?: 'assets/img/food-placeholder.jpg')) ?>"

          alt="<?= e($item['name']) ?>"

          onerror="this.src='assets/img/food-placeholder.jpg'"
        >

        <div class="menu-card-body">

          <div class="menu-card-name">

            <?= e($item['name']) ?>

          </div>

          <div class="menu-card-desc">

            <?= e($item['description']) ?>

          </div>

          <div class="menu-card-foot">

            <span class="menu-card-price">

              $<?= number_format($item['price'], 2) ?>

            </span>

            <form method="POST"
                  action="order.php">

              <input type="hidden"
                     name="action"
                     value="add">

              <input type="hidden"
                     name="item_id"
                     value="<?= $item['id'] ?>">

              <button type="submit"
                      class="btn btn-primary btn-sm">

                <?= t('add_cart') ?>

              </button>

            </form>

          </div>

        </div>

      </div>

      <?php endforeach; ?>

    </div>

    <div class="text-center"
         style="margin-top:40px">

      <a href="menu.php"
         class="btn btn-outline">

        عرض المنيو بالكامل

      </a>

    </div>

  </div>

</section>

<!-- ── Stats ─────────────────────────────────────────────────── -->
<section class="stats-bar">

  <div class="container grid-4">

    <div class="stat-item">

      <div class="stat-value">

        15+

      </div>

      <div class="stat-label">

        <?= t('yearsExperience') ?>

      </div>

    </div>

    <div class="stat-item">

      <div class="stat-value">

        8

      </div>

      <div class="stat-label">

        <?= t('masterChefs') ?>

      </div>

    </div>

    <div class="stat-item">

      <div class="stat-value">

        50K+

      </div>

      <div class="stat-label">

        <?= t('happyGuests') ?>

      </div>

    </div>

    <div class="stat-item">

      <div class="stat-value">

        12

      </div>

      <div class="stat-label">

        <?= t('awards') ?>

      </div>

    </div>

  </div>

</section>

<!-- ── Quote ─────────────────────────────────────────────────── -->
<section class="section"
         style="
            text-align:center;
            background:var(--bg)
         ">

  <div class="container"
       style="max-width:700px">

    <div style="
      font-family:var(--font-serif);
      font-size:1.6rem;
      font-style:italic;
      color:var(--fg60);
      line-height:1.6;
      margin-bottom:20px
    ">

      <?= t('quoteText') ?>

    </div>

    <div style="
      font-size:11px;
      letter-spacing:.2em;
      text-transform:uppercase;
      color:var(--primary)
    ">

      — <?= t('quoteAuthor') ?>

    </div>

  </div>

</section>

<?php require_once 'includes/footer.php'; ?>