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

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

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

  <div class="hero-content">

    <span class="hero-eyebrow">
      <?= t('delivery_tagline') ?>
    </span>

    <h1>
      <?= t('delivery_title') ?>
    </h1>

    <p>
      <?= t('delivery_desc') ?>
    </p>

    <div class="hero-btns">

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

         <?= t('start_order') ?>

      </a>

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

         <?= t('order') ?>

      </a>

    </div>

  </div>

</section>

<!-- ── Stats Bar ─────────────────────────────────────────── -->
<div class="stats-bar">

  <div class="container grid-4">

    <div class="stat-item">

      <div style="font-size:1.5rem;margin-bottom:6px">
        🕐
      </div>

      <div class="stat-value">
        <?= t('delivery_time_val') ?>
      </div>

      <div class="stat-label">
        <?= t('delivery_time_lbl') ?>
      </div>

    </div>

    <div class="stat-item">

      <div style="font-size:1.5rem;margin-bottom:6px">
        🚚
      </div>

      <div class="stat-value">
        $5
      </div>

      <div class="stat-label">
        <?= t('delivery_fee_lbl') ?>
      </div>

    </div>

    <div class="stat-item">

      <div style="font-size:1.5rem;margin-bottom:6px">
        ⭐
      </div>

      <div class="stat-value">
        <?= t('min_order_val') ?>
      </div>

      <div class="stat-label">
        <?= t('min_order_lbl') ?>
      </div>

    </div>

    <div class="stat-item">

      <div style="font-size:1.5rem;margin-bottom:6px">
        📍
      </div>

      <div class="stat-value">
        5+
      </div>

      <div class="stat-label">
        <?= t('delivery_zones') ?>
      </div>

    </div>

  </div>

</div>

<!-- ── Free Delivery Banner ───────────────────────────── -->
<div class="free-banner">
  ★ <?= t('free_delivery') ?> ★
</div>

<!-- ── Why Order With Us ─────────────────────────────── -->
<section class="section" style="background:var(--bg)">

  <div class="container">

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

      <span class="section-tag">
        <?= t('delivery_tagline') ?>
      </span>

      <h2 class="section-title">
        <?= t('why_deliver') ?>
      </h2>

    </div>

    <div class="grid-4">

      <?php
      $features = [
        ['icon' => '👨‍🍳', 'title' => 'd_fresh',  'desc' => 'd_fresh_desc'],
        ['icon' => '📦', 'title' => 'd_packed',  'desc' => 'd_packed_desc'],
        ['icon' => '⚡', 'title' => 'd_tracked', 'desc' => 'd_tracked_desc'],
        ['icon' => '🛡️', 'title' => 'd_safe',    'desc' => 'd_safe_desc'],
      ];

      foreach ($features as $f):
      ?>

      <div class="feature-card">

        <div class="feature-icon">
          <?= $f['icon'] ?>
        </div>

        <div class="feature-title">
          <?= t($f['title']) ?>
        </div>

        <div class="feature-desc">
          <?= t($f['desc']) ?>
        </div>

      </div>

      <?php endforeach; ?>

    </div>

  </div>

</section>

<!-- ── Delivery Zones ─────────────────────────────────── -->
<section class="section"
         style="background:var(--bg2);text-align:center">

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

    <div style="font-size:2rem;margin-bottom:16px">
      📍
    </div>

    <span class="section-tag">
      <?= t('delivery_zones') ?>
    </span>

    <h2 class="section-title">
      <?= t('delivery_zones') ?>
    </h2>

    <div style="margin:24px 0 32px">

      <?php foreach (explode('·', t('zones_list')) as $zone): ?>

        <span class="zone-chip">
          <?= trim(e($zone)) ?>
        </span>

      <?php endforeach; ?>

    </div>

    <p style="
      color:var(--fg60);
      margin-bottom:32px;
      font-size:14px
    ">
      <?= t('free_delivery') ?>
    </p>

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

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

    </a>

  </div>

</section>

<!-- ── How It Works ───────────────────────────────────── -->
<section class="section" style="background:var(--bg)">

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

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

      <h2 class="section-title">

        <?= $isRTL ? 'كيف يعمل؟' : 'How It Works' ?>

      </h2>

    </div>

    <div class="grid-3">

      <?php

      $steps = $isRTL
      ? [
          ['01', 'اختر أطباقك', 'تصفح قائمتنا الكاملة واختر أشهى ما يعجبك.'],
          ['02', 'أكمل طلبك', 'أدخل بياناتك وعنوان التوصيل وأكّد طلبك.'],
          ['03', 'استمتع بوجبتك', 'نوصل طلبك طازجاً حتى بابك خلال ٣٠–٤٥ دقيقة.'],
        ]
      : [
          ['01', 'Choose Your Dishes', 'Browse our full menu and select your favourites.'],
          ['02', 'Complete Your Order', 'Enter your details, delivery address, and confirm.'],
          ['03', 'Enjoy Your Meal', 'We deliver fresh to your door in 30–45 minutes.'],
        ];

      foreach ($steps as [$num, $title, $desc]):
      ?>

      <div style="
        background:var(--card);
        border:1px solid var(--border);
        padding:36px 24px;
        text-align:center
      ">

        <div style="
          font-family:var(--font-serif);
          font-size:3rem;
          color:rgba(201,169,110,.2);
          margin-bottom:12px
        ">
          <?= $num ?>
        </div>

        <h3 style="
          font-family:var(--font-serif);
          font-size:1.1rem;
          margin-bottom:10px
        ">
          <?= e($title) ?>
        </h3>

        <p style="
          font-size:13px;
          color:var(--fg60);
          line-height:1.6
        ">
          <?= e($desc) ?>
        </p>

      </div>

      <?php endforeach; ?>

    </div>

  </div>

</section>

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