<?php
// order.php — "Order & Pay" onboarding (for guests, reached from welcome.php).
// Flow preserved: Continue -> signup.php, Back -> welcome.php.
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>Order &amp; Pay — Dabil</title>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --primary:#225AE3; --primary-dark:#1a47b8; --primary-bg:#EEF3FD;
    --text:#0F172A; --text-muted:#64748B; --text-light:#94A3B8;
    --border:#E7EDF6;
    --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  }
  html, body { height:100%; font-family:var(--font); color:var(--text); overflow-x:hidden; -webkit-text-size-adjust:100%; }
  body { background:#EAF1FE; }

  .page { display:flex; flex-direction:column; min-height:100%; width:100%; max-width:480px; margin:0 auto;
    background:linear-gradient(to bottom,#FFFFFF 0%, #F3F7FF 45%, #E9F0FE 100%);
    padding:0 22px calc(env(safe-area-inset-bottom,0px) + 20px); position:relative; }

  /* ── Top bar with standard back arrow (matches other pages) ── */
  .topbar { display:flex; align-items:center; padding-top:calc(env(safe-area-inset-top,0px) + 10px); }
  .back-btn { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    color:var(--primary); background:#fff; border:1px solid var(--border); box-shadow:0 4px 14px rgba(15,23,42,.06);
    text-decoration:none; -webkit-tap-highlight-color:transparent; transition:transform .15s, background .15s; }
  .back-btn:active { transform:scale(.92); background:var(--primary-bg); }
  .back-btn svg { stroke:currentColor; fill:none; }

  /* ── Hero image card ── */
  .hero { position:relative; margin:12px 0 6px;
    animation:heroIn .6s cubic-bezier(.22,1,.36,1) both; }
  .hero::before { content:''; position:absolute; inset:8% 6% 4%; border-radius:30px;
    background:radial-gradient(circle at 50% 40%, rgba(34,90,227,.16), transparent 70%); filter:blur(26px); z-index:0; }
  /* Background-image so the hero can never collapse to blank: a soft gradient
     shows even if the photo is missing on the server. */
  .hero-media { position:relative; z-index:1; width:100%; aspect-ratio:386/374; border-radius:24px;
    background-color:#E6EDFA;
    background-image:linear-gradient(135deg,#dce7fb 0%,#eef2f8 55%,#f4ecdb 100%), url('assets/img/orderimage.png?v=4');
    background-image:url('assets/img/orderimage.png?v=4'), linear-gradient(135deg,#dce7fb 0%,#eef2f8 55%,#f4ecdb 100%);
    background-size:cover, cover; background-position:center, center; background-repeat:no-repeat, no-repeat; }

  /* ── Headline ── */
  .headline { text-align:center; padding:14px 6px 22px; }
  .headline h1 { font-size:1.85rem; font-weight:800; letter-spacing:-.03em; line-height:1.12; }
  .headline h1 .accent { color:var(--primary); }
  .headline p { font-size:.92rem; color:var(--text-muted); line-height:1.5; margin-top:9px; }

  /* ── Features ── */
  .features { display:flex; flex-direction:column; gap:18px; padding:2px 4px; }
  .feature { display:flex; align-items:center; gap:15px; }
  .feature-icon { width:48px; height:48px; border-radius:14px; flex-shrink:0; background:#fff; border:1px solid var(--border);
    box-shadow:0 4px 14px rgba(15,23,42,.06); display:flex; align-items:center; justify-content:center; color:var(--primary); }
  .feature-icon svg { stroke:currentColor; fill:none; }
  .feature-body h3 { font-size:1.02rem; font-weight:800; letter-spacing:-.01em; margin-bottom:2px; }
  .feature-body p { font-size:.82rem; color:var(--text-muted); line-height:1.4; }

  /* ── CTA ── */
  .cta { margin-top:auto; padding-top:28px; }
  .btn-primary { display:flex; align-items:center; justify-content:center; width:100%; height:56px; border-radius:16px;
    background:var(--primary); color:#fff; font-family:var(--font); font-weight:700; font-size:1rem; text-decoration:none;
    box-shadow:0 10px 26px rgba(34,90,227,.32); transition:transform .12s, background .15s; }
  .btn-primary:active { transform:scale(.99); background:var(--primary-dark); }
  .back-link { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:16px;
    color:var(--text-muted); font-weight:700; font-size:.9rem; text-decoration:none; padding:8px; }
  .back-link:active { color:var(--primary); }
  .back-link svg { stroke:currentColor; fill:none; }

  /* ── Animations ── */
  .anim-up { animation:slideUp .55s cubic-bezier(.22,1,.36,1) both; }
  .anim-up.d1 { animation-delay:.08s; } .anim-up.d2 { animation-delay:.16s; }
  .anim-up.d3 { animation-delay:.23s; } .anim-up.d4 { animation-delay:.30s; }
  .anim-up.d5 { animation-delay:.38s; }
  @keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
  @keyframes heroIn { from { opacity:0; transform:translateY(-10px) scale(.98); } to { opacity:1; transform:none; } }
  @media (prefers-reduced-motion: reduce) { .anim-up, .hero { animation:none !important; } }
</style>
</head>
<body>

<div class="page">

  <div class="topbar">
    <a href="welcome.php" class="back-btn" aria-label="Back" onclick="return goBack(event)">
      <svg width="19" height="19" viewBox="0 0 24 24" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5m0 0l7 7M5 12l7-7"/></svg>
    </a>
  </div>

  <div class="hero">
    <div class="hero-media" role="img" aria-label="Scan a QR code and pay with your Dabil wallet"></div>
  </div>

  <div class="headline anim-up d1">
    <h1>Dining Made <span class="accent">Simple</span></h1>
    <p>Scan, order, and pay — all from your phone.</p>
  </div>

  <div class="features">
    <div class="feature anim-up d2">
      <span class="feature-icon">
        <svg width="22" height="22" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><line x1="14" y1="14" x2="21" y2="14"/><line x1="14" y1="18" x2="21" y2="18"/><line x1="17" y1="14" x2="17" y2="21"/></svg>
      </span>
      <div class="feature-body">
        <h3>Scan &amp; Order</h3>
        <p>Access any restaurant's menu instantly with a QR code.</p>
      </div>
    </div>

    <div class="feature anim-up d3">
      <span class="feature-icon">
        <svg width="22" height="22" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/><line x1="6" y1="15" x2="10" y2="15"/></svg>
      </span>
      <div class="feature-body">
        <h3>Fast Checkout</h3>
        <p>Pay in seconds from your Dabil wallet — no cards, no cash.</p>
      </div>
    </div>

    <div class="feature anim-up d4">
      <span class="feature-icon">
        <svg width="22" height="22" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
      </span>
      <div class="feature-body">
        <h3>QR Check-in</h3>
        <p>Tap in at your table and enjoy seamless cashless dining.</p>
      </div>
    </div>
  </div>

  <div class="cta anim-up d5">
    <a href="signup.php" class="btn-primary">Continue</a>
  </div>

</div>

<script>
  // Standard back behaviour: go back if there's history, else fall back to welcome.php (the href).
  function goBack(e){
    if (window.history.length > 1) { if (e) e.preventDefault(); window.history.back(); return false; }
    return true;
  }
</script>

</body>
</html>
