<?php
// signup.php — Dabil Sign Up / Join screen
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>Sign Up — Dabil</title>
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --primary:      #2563EB;
    --primary-dark: #1D4ED8;
    --text:         #0F172A;
    --text-muted:   #64748B;
    --text-light:   #94A3B8;
    --bg:           #F0F4FF;
    --card-border:  #E2E8F0;
    --radius:       16px;
  }

  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);
  }

  .page {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    max-width: 430px;
    margin: 0 auto;
    background: #fff;
    position: relative;
  }

  /* ── Hero photo ── */
  .hero {
    position: relative;
    flex-shrink: 0;
    height: 52vw;
    min-height: 240px;
    max-height: 340px;
    overflow: hidden;
    animation: heroIn .5s cubic-bezier(.22,1,.36,1) both;
  }

  @keyframes heroIn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
  }

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

  /* Fallback when image missing */
  .hero-fallback {
    position: absolute; inset: 0;
    background: linear-gradient(160deg, #BFDBFE 0%, #93C5FD 40%, #60A5FA 100%);
    display: none;
    align-items: center;
    justify-content: center;
  }

  .hero-fallback svg { opacity: .55; }

  /* Gradient fade to white at bottom */
  .hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 100px;
    background: linear-gradient(to bottom, transparent, #ffffff);
    pointer-events: none;
  }

  /* ── Content ── */
  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 24px;
    background: #fff;
  }

  /* ── Headline ── */
  .headline {
    text-align: center;
    padding: 20px 4px 28px;
  }

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

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

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

  /* ── Buttons ── */
  .btn-email {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 17px;
    background: var(--primary);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(37,99,235,.32);
    transition: background .15s, transform .12s;
    -webkit-tap-highlight-color: transparent;
  }

  .btn-email:active {
    background: var(--primary-dark);
    transform: scale(.98);
  }

  .otp-note {
    text-align: center;
    font-size: .775rem;
    color: var(--text-light);
    margin: 10px 0 18px;
  }

  .btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    background: #fff;
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    border: 1.5px solid var(--card-border);
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, transform .12s;
    -webkit-tap-highlight-color: transparent;
  }

  .btn-google:active {
    background: #F8FAFC;
    transform: scale(.98);
  }

  /* Google "G" SVG logo */
  .google-logo {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  /* ── Legal ── */
  .legal {
    text-align: center;
    font-size: .775rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-top: 20px;
  }

  .legal a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
  }

  /* ── Sign in footer ── */
  .signin-row {
    margin-top: auto;
    text-align: center;
    padding: 22px 0 calc(env(safe-area-inset-bottom, 0px) + 28px);
    font-size: .875rem;
    color: var(--text-muted);
  }

  .signin-row a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
  }

  /* ── Animations ── */
  .anim-up {
    animation: slideUp .5s cubic-bezier(.22,1,.36,1) both;
  }
  .anim-up.d1 { animation-delay: .07s; }
  .anim-up.d2 { animation-delay: .14s; }
  .anim-up.d3 { animation-delay: .20s; }
  .anim-up.d4 { animation-delay: .26s; }
  .anim-up.d5 { animation-delay: .32s; }
  .anim-up.d6 { animation-delay: .38s; }

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

  @media (prefers-reduced-motion: reduce) {
    *, .anim-up, .hero { animation: none !important; }
  }
</style>
</head>
<body>

<div class="page">

  <!-- ── Hero photo ── -->
  <div class="hero">
    <img class="hero-img"
         src="assets/img/signup.png"
         alt="Person scanning a QR code at a restaurant table"
         onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
    <div class="hero-fallback">
      <!-- QR / scan illustration fallback -->
      <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#2563EB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
        <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>
        <rect x="3" y="14" width="7" height="7"/>
        <path d="M14 14h1v1h-1zM17 14h3v1h-3zM14 17h1v3h-1zM17 17h1v1h-1zM20 17v3h-2v-1h1v-2z"/>
      </svg>
    </div>
  </div>

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

    <!-- Headline -->
    <div class="headline anim-up d1">
      <h1>Join the <span class="brand">Dabil</span> Experience</h1>
      <p>Order, pay, and dine effortlessly<br>all in one place.</p>
    </div>

    <!-- Email button -->
    <a href="signup-email.php" class="btn-email anim-up d2">
      <!-- Envelope icon -->
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
        <rect x="2" y="4" width="20" height="16" rx="2"/>
        <path d="M2 7l10 7 10-7"/>
      </svg>
      Continue with Email
    </a>

    <p class="otp-note anim-up d3">We'll verify your account securely using OTP.</p>

    <!-- Google sign-in (OAuth via auth/google.php). -->
    <a href="auth/google.php" class="btn-google anim-up d4">
      <svg class="google-logo" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
        <path fill="#EA4335" d="M24 9.5c3.14 0 5.95 1.08 8.17 2.84l6.1-6.1C34.46 3.09 29.56 1 24 1 14.82 1 7.07 6.48 3.64 14.22l7.1 5.52C12.4 13.67 17.74 9.5 24 9.5z"/>
        <path fill="#4285F4" d="M46.52 24.5c0-1.64-.15-3.22-.42-4.74H24v8.98h12.67c-.55 2.94-2.2 5.43-4.68 7.1l7.18 5.57C43.27 37.78 46.52 31.6 46.52 24.5z"/>
        <path fill="#FBBC05" d="M10.74 28.26A14.46 14.46 0 019.5 24c0-1.48.25-2.91.68-4.26l-7.1-5.52A23.94 23.94 0 001 24c0 3.87.93 7.53 2.56 10.77l7.18-6.51z"/>
        <path fill="#34A853" d="M24 47c5.56 0 10.22-1.84 13.63-5l-7.18-5.57c-1.84 1.23-4.2 1.97-6.45 1.97-6.26 0-11.6-4.17-13.5-9.8l-7.18 6.51C7.07 41.52 14.82 47 24 47z"/>
        <path fill="none" d="M1 1h46v46H1z"/>
      </svg>
      Continue with Google
    </a>

    <!-- Legal -->
    <p class="legal anim-up d5">
      By continuing, you agree to our
      <a href="terms.php">Terms of Service</a> and <a href="privacy.php">Privacy Policy</a>.
    </p>

    <!-- Sign in -->
    <div class="signin-row anim-up d6">
      Already have an account? <a href="signin.php">Sign In</a>
    </div>

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

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

</body>
</html>
