<?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>
  /* ── Reset & base ── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --primary:      #2563EB;
    --primary-dark: #1D4ED8;
    --text:         #0F1A2E;
    --text-muted:   #6B7280;
    --bg-top:       #E8F0FE;
    --bg-bottom:    #FFFFFF;
    --radius-card:  18px;
  }

  html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(160deg, var(--bg-top) 0%, var(--bg-bottom) 60%);
    overflow: hidden;
  }

  /* ── Full-screen splash container ── */
  .splash {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px 24px;
    gap: 0;
  }

  /* ── Logo lockup ── */
  .logo-lockup {
    display: flex;
    align-items: center;
    gap: 12px;
    animation: popIn .55s cubic-bezier(.34,1.56,.64,1) both;
  }

  .logo-icon {
    width: 150px;
    height: 150px;
    flex-shrink: 0;
    object-fit: contain;
  }

  .logo-wordmark {
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -.04em;
    line-height: 1;
  }

  /* ── Loading dots ── */
  .loading-dots {
    margin-top: 56px;
    display: flex;
    gap: 8px;
    animation: fadeIn .4s .7s both;
  }

  .loading-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    opacity: .25;
    animation: dotPulse 1.4s ease-in-out infinite;
  }

  .loading-dots span:nth-child(2) { animation-delay: .18s; }
  .loading-dots span:nth-child(3) { animation-delay: .36s; }

  /* ── Bottom tagline ── */
  .splash-tagline {
    position: absolute;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 36px);
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: .06em;
    text-transform: uppercase;
    animation: fadeIn .4s 1s both;
  }

  /* ── Keyframes ── */
  @keyframes popIn {
    0%   { opacity: 0; transform: scale(.78); }
    100% { opacity: 1; transform: scale(1); }
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes dotPulse {
    0%, 80%, 100% { opacity: .18; transform: scale(.85); }
    40%           { opacity: 1;   transform: scale(1.15); }
  }
</style>
</head>
<body>

<div class="splash">

  <!-- Logo -->
  <div class="logo-lockup">
    <!-- Dabil logo image -->
    <img class="logo-icon"
         src="assets/img/dlogo.png"
         alt="Dabil logo"
         onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">

    <!-- Fallback: receipt-check icon, shown only if dlogo.png fails to load -->
    <svg class="logo-icon" style="display:none" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
      <!-- Receipt body -->
      <rect x="8" y="4" width="30" height="40" rx="5" fill="#2563EB"/>
      <!-- Torn bottom edge -->
      <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="#1D4ED8"/>
      <!-- Check mark -->
      <path d="M17 23 L23 29 L35 17" stroke="white" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"/>
      <!-- Lines suggesting text -->
      <rect x="14" y="13" width="18" height="2.5" rx="1.25" fill="rgba(255,255,255,.35)"/>
    </svg>

    <span class="logo-wordmark"></span>
  </div>

  <!-- Loading indicator -->
  <div class="loading-dots">
    <span></span>
    <span></span>
    <span></span>
  </div>

</div>

<!-- Bottom label -->
<div class="splash-tagline"></div>

<script>
  // Auto-redirect after the splash animation settles. Destination is
  // determined server-side based on session/cookie state (see top of file).
  setTimeout(function () {
    window.location.href = <?php echo json_encode($redirectTarget); ?>;
  }, 2600);
</script>

</body>
</html>
