<section class="user-signin-section">
  <!-- Background Image -->
  <div class="user-signin-section__bg">
    <img
      src="background.jpg"
      alt="Forest path"
      class="user-signin-section__bg-image"
    >
    <div class="user-signin-section__bg-overlay"></div>
  </div>

  <!-- Hero Content -->
  <div class="user-signin-section__content">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
      <!-- Left: Text Content -->
      <div>
        <span class="badge badge--primary mb-6">
          👋 Welcome back
        </span>

        <h1 class="t-display mb-6 text-white">
          Sign in to your account
        </h1>

        <p class="t-lead mb-8 text-white-90">
          Manage your bookings, messages, and account settings in one place.
        </p>
      </div>

      <!-- Right: Sign-in Form Card -->
      <div class="user-signin-section__card">
        <h3 class="t-lead t-semibold mb-2 text-white">Sign in</h3>
        <p class="user-signin-section__card-subtitle">Use your email and password to continue.</p>

        <form action="#" method="post" class="space-y-4">
          <!-- Email Field -->
          <div>
            <label for="email">Email</label>
            <input
              type="email"
              id="email"
              name="email"
              class="input"
              placeholder="your@email.com"
              autocomplete="email"
              required
            >
          </div>

          <!-- Password Field -->
          <div>
            <label for="password">Password</label>
            <input
              type="password"
              id="password"
              name="password"
              class="input"
              placeholder="••••••••"
              autocomplete="current-password"
              required
            >
            <a href="#" class="user-signin-section__forgot-password">
              Forgot password?
            </a>
          </div>

          <!-- Remember Me Checkbox -->
          <div class="flex items-center gap-2">
            <input
              type="checkbox"
              id="remember"
              name="remember"
              class="checkbox"
            >
            <label for="remember" class="mb-0 cursor-pointer">
              Remember me
            </label>
          </div>

          <!-- GDPR Acknowledgment -->
          <div class="flex items-start gap-2">
            <input
              type="checkbox"
              id="gdpr"
              name="gdpr"
              class="checkbox"
              required
              style="margin-top: 0.125rem;"
            >
            <label for="gdpr" class="user-signin-section__gdpr-text mb-0 cursor-pointer">
              I have read the <a href="#">Privacy Policy</a> and consent to the processing of my personal data for authentication purposes.
            </label>
          </div>

          <!-- Submit Button -->
          <button type="submit" class="btn btn--primary w-full">
            Sign In
          </button>
        </form>
      </div>
    </div>
  </div>
</section>