<?php
// welcome.php — Dabil Welcome / Splash Screen
// Updated to match the "Welcome to Dabil" design:
// hero photo of guests dining, "Order, pay, and manage dining seamlessly."
// subtitle, Order & Pay / Manage Operations cards, and 2026 footer.
?>
<!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>
<style>
  /* ── Reset & base ── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --primary:        #2563EB;
    --primary-dark:   #1D4ED8;
    --primary-bg:     #EFF6FF;
    --text:           #0F172A;
    --text-muted:     #64748B;
    --text-light:     #94A3B8;
    --bg:             #FFFFFF;
    --card-bg:        #FFFFFF;
    --card-border:    #F1F5F9;
    --radius-card:    18px;
    --radius-icon:    50%;
    --shadow-card:    0 2px 12px rgba(0,0,0,.07);
  }

  html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    background: var(--bg);
    overflow-x: hidden;
    color: var(--text);
  }

  /* ── Layout shell ── */
  .page {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    max-width: 430px;
    margin: 0 auto;
    background: var(--bg);
    position: relative;
  }

  /* ── Hero image area ── */
  .hero {
    position: relative;
    flex-shrink: 0;
    height: 46vw;
    min-height: 220px;
    max-height: 320px;
    overflow: hidden;
  }

  .hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }

  /* Fallback when image is missing */
  .hero-fallback {
    position: absolute; inset: 0;
    background: linear-gradient(160deg, #FF6B6B 0%, #EE5A24 40%, #C0392B 100%);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero-fallback-inner {
    text-align: center;
    color: rgba(255,255,255,0.85);
  }

  .hero-fallback svg {
    opacity: .7;
    margin-bottom: 8px;
  }

  .hero-fallback span {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  /* Gradient fade into white at the bottom of hero */
  .hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.95));
    pointer-events: none;
  }

  /* ── Content area ── */
  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    /* Gradient background matching the image's light blue-to-white */
    background: linear-gradient(to bottom, #FFFFFF 0%, #EEF2FF 55%, #E0E7FF 100%);
    position: relative;
    z-index: 2;
  }

  /* ── Headline block ── */
  .headline {
    text-align: center;
    padding: 28px 8px 26px;
  }

  .headline h1 {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.15;
    color: var(--text);
  }

  .headline h1 .brand {
    color: var(--primary);
  }

  .headline p {
    font-size: .88rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin-top: 10px;
  }

  /* ── Feature cards ── */
  .cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
  }

  .card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--card-bg);
    border-radius: var(--radius-card);
    padding: 16px 18px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--card-border);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    -webkit-tap-highlight-color: transparent;
  }

  .card:active {
    transform: scale(.98);
    box-shadow: 0 1px 6px rgba(0,0,0,.08);
  }

  /* Blue circle icon */
  .card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-icon);
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .card-icon svg {
    color: #fff;
  }

  /* Card text */
  .card-body {
    flex: 1;
    min-width: 0;
  }

  .card-body h3 {
    font-size: .97rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 3px;
  }

  .card-body p {
    font-size: .78rem;
    color: var(--text-muted);
    line-height: 1.45;
  }

  /* Chevron */
  .card-chevron {
    flex-shrink: 0;
    color: #CBD5E1;
  }

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

  /* ── Entrance animations ── */
  .anim-up {
    animation: slideUp .5s cubic-bezier(.22,1,.36,1) both;
  }
  .anim-up.d1 { animation-delay: .05s; }
  .anim-up.d2 { animation-delay: .12s; }
  .anim-up.d3 { animation-delay: .19s; }
  .anim-up.d4 { animation-delay: .26s; }
  .anim-up.d5 { animation-delay: .33s; }

  @keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Hero slides in from top */
  .hero {
    animation: heroIn .5s cubic-bezier(.22,1,.36,1) both;
  }
  @keyframes heroIn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
</style>
</head>
<body>

<div class="page">

  <!-- ── Hero image ── -->
  <div class="hero">
    <!-- Place the "guests dining together at a café table" photo at this path.
         The fallback gradient + icon below shows automatically if the image is missing. -->
    <img class="hero-img"
         src="assets/img/welcome.jpg"
         alt="Two guests smiling and enjoying coffee and food together at a café table"
         onerror="this.style.display='none'">
    <!-- Fallback gradient block (shown when image not found) -->
    <div class="hero-fallback">
      <div class="hero-fallback-inner">
        <svg width="64" height="64" 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>
        <span></span>
      </div>
    </div>
  </div>

  <!-- ── Content ── -->
  <div class="content">

    <!-- Headline -->
    <div class="headline anim-up d1">
      <h1>Welcome to <span class="brand">Dabil</span></h1>
      <p>Order, pay, and manage dining seamlessly.</p>
    </div>

    <!-- Feature cards -->
    <div class="cards">

      <!-- Card 1: Order & Pay -->
      <a href="order.php" class="card anim-up d2">
        <div class="card-icon">
          <!-- Fork & knife / restaurant 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 2h4a2 2 0 002-2V2"/>
            <path d="M7 2v20"/>
            <path d="M21 15V2s-5 2-5 9v4"/>
            <path d="M16 22v-3"/>
          </svg>
        </div>
        <div class="card-body">
          <h3>Order &amp; Pay</h3>
          <p>Scan QR codes, order meals,<br>and pay instantly.</p>
        </div>
        <div class="card-chevron">
          <svg width="18" height="18" 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>
        </div>
      </a>

      <!-- Card 2: Manage Operations -->
      <a href="manage.php" class="card anim-up d3">
        <div class="card-icon">
          <!-- Dashboard / operations monitor 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>
        </div>
        <div class="card-body">
          <h3>Manage Operations</h3>
          <p>Handle orders, kitchens, and<br>deliveries in real time.</p>
        </div>
        <div class="card-chevron">
          <svg width="18" height="18" 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>
        </div>
      </a>

    </div><!-- /.cards -->

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

  </div><!-- /.content -->

</div><!-- /.page -->

</body>
</html>
