<%- include('partials/header') %>
<%- include('partials/nav') %>

<main class="flex-grow grid lg:grid-cols-2">

  <!-- Brand panel -->
  <div class="hidden lg:flex relative flex-col justify-between bg-grape text-white px-14 py-14 overflow-hidden">
    <div class="pointer-events-none absolute -top-16 -right-16 w-72 h-72 bg-white/10 rounded-full blur-2xl blob"></div>
    <div class="pointer-events-none absolute bottom-10 left-0 w-60 h-60 bg-coral/30 rounded-full blur-2xl blob" style="animation-delay:-4s"></div>

    <div class="relative">
      <h1 class="font-display font-semibold text-3xl leading-tight max-w-sm">
        Welcome back. Your batches didn't stop while you were away.
      </h1>
      <p class="mt-4 text-white/75 max-w-sm leading-relaxed">
        Sign in and your dashboard will show exactly where every campaign stands.
      </p>
    </div>

    <div class="relative flex items-end gap-4">
      <div class="w-36 bg-white border-2 border-ink rounded-2xl p-2 pb-4 rotate-3 hard-shadow shrink-0">
        <img src="/images/login-polaroid.jpg" alt="Someone smiling at their laptop" class="w-full h-24 object-cover rounded-lg">
        <p class="mt-1.5 text-center text-[10px] font-display font-semibold text-ink/70">good morning</p>
      </div>
      <div class="-rotate-1 bg-white/10 backdrop-blur border-2 border-white/30 rounded-2xl px-5 py-4 flex-1">
        <div class="flex items-center justify-between">
          <span class="text-xs text-white/70">Newsletter — October drop</span>
          <span class="flex items-center gap-1.5 text-xs font-semibold text-sun">
            <span class="w-1.5 h-1.5 rounded-full bg-sun"></span> sending
          </span>
        </div>
        <p class="mt-2 text-sm font-tabular font-semibold">2,140 of 3,000 delivered</p>
      </div>
    </div>
  </div>

  <!-- Form panel -->
  <div class="flex items-center justify-center px-4 sm:px-6 py-16">
    <div class="w-full max-w-sm">
      <h2 class="font-display font-semibold text-3xl text-ink">Welcome back</h2>
      <p class="mt-2 text-sm text-ink/65">Sign in to your account to launch campaigns.</p>

      <% if (error) { %>
        <div class="mt-6 bg-coral-dim border-2 border-coral text-ink px-4 py-3 rounded-lg text-sm" role="alert">
          <%= error %>
        </div>
      <% } %>

      <form class="mt-8 space-y-5" action="/login" method="POST">
        <div>
          <label class="block text-sm font-semibold text-ink">Email address</label>
          <input type="email" name="email" required autofocus class="mt-1.5 block w-full px-3.5 py-2.5 border-2 border-ink/20 rounded-xl placeholder-ink/30 focus:outline-none focus:border-grape text-sm">
        </div>
        <div>
          <label class="block text-sm font-semibold text-ink">Password</label>
          <input type="password" name="password" required class="mt-1.5 block w-full px-3.5 py-2.5 border-2 border-ink/20 rounded-xl placeholder-ink/30 focus:outline-none focus:border-grape text-sm">
        </div>

        <button type="submit" class="w-full flex justify-center py-3 px-4 rounded-full text-sm font-semibold text-ink bg-sun border-2 border-ink hard-shadow-sm hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-none transition">
          Sign in
        </button>
      </form>

      <p class="mt-8 text-center text-sm text-ink/65">
        Don't have an account?
        <a href="/register" class="font-semibold text-grape hover:underline">Create one</a>
      </p>
    </div>
  </div>

</main>

<%- include('partials/footer') %>
