<?php
// splash.php — Dabil Loading / Splash Screen
//
// Determines where the splash animation should redirect to:
//   - Active customer session  -> dashboard.php   (already logged in)
//   - "dabil_returning" cookie -> signin.php       (signed up/in before,
//                                                    but session expired)
//   - Otherwise                -> welcome.php      (first-time visitor)

session_start();

if (isset($_SESSION['user_id']) && ($_SESSION['role'] ?? '') === 'customer') {
    $redirectTarget = 'dashboard.php';
} elseif (!empty($_COOKIE['dabil_returning'])) {
    $redirectTarget = 'signin.php';
} else {
    $redirectTarget = '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>Dabil</title>
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root { --primary:#225AE3; --text:#0F172A; --text-muted:#64748B; }

  html, body { height: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #F6F9FF; }

  /* ── Animated aurora background ── */
  .bg { position: fixed; inset: 0; overflow: hidden; background: linear-gradient(165deg, #EAF1FE 0%, #F4F8FF 48%, #FFFFFF 100%); }
  .blob { position: absolute; border-radius: 50%; filter: blur(64px); will-change: transform; }
  .b1 { width: 360px; height: 360px; background: radial-gradient(circle, rgba(170,202,255,.75), transparent 70%); top: -110px; left: -80px; animation: drift1 9s ease-in-out infinite alternate; }
  .b2 { width: 320px; height: 320px; background: radial-gradient(circle, rgba(196,217,255,.7), transparent 70%); bottom: -90px; right: -70px; animation: drift2 11s ease-in-out infinite alternate; }
  .b3 { width: 240px; height: 240px; background: radial-gradient(circle, rgba(214,228,255,.6), transparent 70%); top: 42%; left: 52%; animation: drift3 13s ease-in-out infinite alternate; }

  @keyframes drift1 { to { transform: translate(46px, 36px) scale(1.12); } }
  @keyframes drift2 { to { transform: translate(-40px, -30px) scale(1.15); } }
  @keyframes drift3 { to { transform: translate(-34px, 26px) scale(1.1); } }

  /* ── Splash content ── */
  .splash { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 40px 24px; }

  .logo-wrap { animation: enter .7s cubic-bezier(.34,1.4,.5,1) both; }
  .logo { display: block; height: 64px; width: auto; max-width: 70vw; object-fit: contain; animation: breathe 4.2s ease-in-out 1.1s infinite; }
  .logo-fallback { display: none; align-items: center; gap: 12px; }
  .logo-fallback svg { width: 52px; height: 52px; }
  .logo-fallback span { font-size: 2.1rem; font-weight: 800; color: var(--text); letter-spacing: -.04em; }

  /* ── Shimmer loader ── */
  .loader { width: 124px; height: 4px; border-radius: 4px; margin-top: 36px; background: rgba(34,90,227,.13); overflow: hidden; position: relative; animation: fadeIn .5s .6s both; }
  .loader::after { content: ''; position: absolute; top: 0; bottom: 0; width: 42%; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--primary), transparent); animation: slide 1.35s cubic-bezier(.45,0,.55,1) infinite; }

  .tagline { margin-top: 22px; font-size: .72rem; font-weight: 700; color: var(--text-muted); letter-spacing: .14em; text-transform: uppercase; text-align: center; opacity: 0; animation: fadeIn .6s 1s forwards; }

  @keyframes enter { from { opacity: 0; transform: translateY(12px) scale(.9); } to { opacity: 1; transform: none; } }
  @keyframes breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.025); } }
  @keyframes slide { 0% { transform: translateX(-130%); } 100% { transform: translateX(320%); } }
  @keyframes fadeIn { to { opacity: 1; } }

  @media (prefers-reduced-motion: reduce) {
    .blob, .logo, .logo-wrap, .loader, .loader::after, .tagline { animation: none !important; }
    .tagline { opacity: 1; }
  }
</style>
</head>
<body>

<div class="bg" aria-hidden="true">
  <span class="blob b1"></span>
  <span class="blob b2"></span>
  <span class="blob b3"></span>
</div>

<div class="splash">
  <div class="logo-wrap">
    <img class="logo" src="assets/img/dlogo.png" alt="Dabil"
         onerror="this.style.display='none'; this.parentElement.querySelector('.logo-fallback').style.display='flex';">
    <div class="logo-fallback">
      <svg viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="8" y="4" width="30" height="40" rx="5" fill="#225AE3"/>
        <path d="M8 38 Q11 44 14 38 Q17 44 20 38 Q23 44 26 38 Q29 44 32 38 Q35 44 38 38 V44 H8 Z" fill="#1a47b8"/>
        <path d="M17 23 L23 29 L35 17" stroke="white" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"/>
        <rect x="14" y="13" width="18" height="2.5" rx="1.25" fill="rgba(255,255,255,.35)"/>
      </svg>
      <span>Dabil</span>
    </div>
  </div>

  <div class="loader" role="progressbar" aria-label="Loading"></div>

  <div class="tagline">Order · Pay · Dine</div>
</div>

<script>
  // Auto-redirect after the splash settles. Destination decided server-side.
  setTimeout(function () {
    window.location.href = <?php echo json_encode($redirectTarget); ?>;
  }, 6000);
</script>

</body>
</html>
