<?php
// welcome.php — Dabil Welcome screen
// Hero photo of guests dining + "Welcome to Dabil" + two audience cards
// (Order & Pay for guests, Manage Operations for staff) + footer.
// Routing preserved: order.php and manage.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>Welcome — 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:#EAF0F7; --radius-card:20px;
    --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%; margin:0 auto;
    background:linear-gradient(to bottom,#FFFFFF 0%, #F4F8FF 50%, #E9F0FE 100%); position:relative; }

  /* ── Hero ── */
  /* Full-bleed hero banner: spans the whole screen width with no side or top
     gaps. The frame's aspect-ratio matches the 3:2 photo, so the WHOLE image
     is shown (people AND the food on the table) with no cropping at any phone
     width. Only the very bottom edge dissolves softly into the page. */
  .hero { position:relative; flex-shrink:0; width:100%; aspect-ratio:3/2; max-height:520px; overflow:hidden;
    background:transparent; animation:heroIn .6s cubic-bezier(.22,1,.36,1) both; }
  /* The lower section of the photo (the table, below the food at ~72–83%)
     dissolves to transparent and reveals the page's own gradient behind it, so
     the image fades into the background cleanly — right at the headline. */
  .hero-img { display:block; width:100%; height:100%; object-fit:cover; object-position:center center;
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 82%, rgba(0,0,0,.55) 91%, transparent 100%);
            mask-image:linear-gradient(to bottom, #000 0%, #000 82%, rgba(0,0,0,.55) 91%, transparent 100%); }
  .hero-fallback { position:absolute; inset:0; display:none; align-items:center; justify-content:center;
    background:linear-gradient(160deg,#4f79ea,#225AE3 60%,#1a47b8); color:rgba(255,255,255,.85); }
  .hero-fallback svg { width:60px; height:60px; opacity:.8; }

  /* ── Content ── (centered, pulled up to overlap the photo's fade) ── */
  .content { flex:1; display:flex; flex-direction:column; width:100%; max-width:480px; margin:-10px auto 0;
    padding:0 20px; position:relative; z-index:2; }

  .headline { text-align:center; padding:14px 8px 24px; }
  .headline h1 { font-size:1.85rem; font-weight:800; letter-spacing:-.03em; line-height:1.12; }
  .headline h1 .brand { color:var(--primary); }
  .headline p { font-size:.92rem; color:var(--text-muted); line-height:1.55; margin-top:10px; max-width:300px; margin-left:auto; margin-right:auto; }

  /* ── Cards ── */
  .cards { display:flex; flex-direction:column; gap:14px; }
  .card { display:flex; align-items:center; gap:15px; background:#fff; border-radius:var(--radius-card);
    padding:16px; border:1px solid var(--border); box-shadow:0 8px 26px rgba(15,23,42,.07);
    text-decoration:none; color:inherit; cursor:pointer; transition:transform .15s, box-shadow .15s, border-color .15s;
    -webkit-tap-highlight-color:transparent; }
  .card:active { transform:scale(.985); box-shadow:0 4px 14px rgba(15,23,42,.08); border-color:#D9E4F6; }

  .card-icon { position:relative; width:52px; height:52px; border-radius:16px; flex-shrink:0;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(34,90,227,.32); }
  .card-icon svg { color:#fff; }

  .card-body { flex:1; min-width:0; }
  .card-body .eyebrow { display:inline-block; font-size:.6rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
    color:var(--primary); background:var(--primary-bg); padding:3px 8px; border-radius:20px; margin-bottom:6px; }
  .card-body h3 { font-size:1.05rem; font-weight:800; letter-spacing:-.01em; margin-bottom:3px; }
  .card-body p { font-size:.8rem; color:var(--text-muted); line-height:1.45; }

  .card-chev { flex-shrink:0; width:30px; height:30px; border-radius:50%; background:var(--primary-bg);
    color:var(--primary); display:flex; align-items:center; justify-content:center; }

  /* ── Footer ── */
  .footer { margin-top:auto; text-align:center; padding:26px 0 calc(env(safe-area-inset-bottom,0px) + 26px);
    font-size:.64rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-light); }

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

<div class="page">

  <div class="hero">
    <img class="hero-img" src="assets/img/welcome.png?v=2"
         alt="Friends smiling and sharing a meal together at a restaurant table"
         onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
    <div class="hero-fallback">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8h1a4 4 0 010 8h-1"/><path d="M2 8h16v9a4 4 0 01-4 4H6a4 4 0 01-4-4V8z"/><line x1="6" y1="1" x2="6" y2="4"/><line x1="10" y1="1" x2="10" y2="4"/><line x1="14" y1="1" x2="14" y2="4"/></svg>
    </div>
  </div>

  <div class="content">

    <div class="headline anim-up d1">
      <h1>Welcome to <span class="brand">Dabil</span></h1>
      <p>Order, pay, and manage dining — all in one place.</p>
    </div>

    <div class="cards">
      <a href="order.php" class="card anim-up d2">
        <span class="card-icon">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 2v7c0 1.1.9 2 2 2h2a2 2 0 002-2V2"/><path d="M7 2v20"/><path d="M21 15V2a5 5 0 00-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7"/></svg>
        </span>
        <span class="card-body">
          <span class="eyebrow">For guests</span>
          <h3>Order &amp; Pay</h3>
          <p>Scan your table's QR, order, and pay in seconds.</p>
        </span>
        <span class="card-chev"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></span>
      </a>

      <a href="../staff/login.php"" class="card anim-up d3">
        <span class="card-icon">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></svg>
        </span>
        <span class="card-body">
          <span class="eyebrow">For staff</span>
          <h3>Manage Operations</h3>
          <p>Run your kitchen, waiters, and orders in real time.</p>
        </span>
        <span class="card-chev"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></span>
      </a>
    </div>

    <div class="footer anim-up d4">&copy; 2026 DABIL. THE ART OF MODERN DINING.</div>

  </div>
</div>

</body>
</html>
