<%- 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-ink text-cream px-14 py-14 overflow-hidden">
    <div class="pointer-events-none absolute -top-10 -left-10 w-64 h-64 bg-coral/20 rounded-full blur-2xl blob"></div>
    <div class="pointer-events-none absolute bottom-0 right-0 w-72 h-72 bg-grape/40 rounded-full blur-2xl blob" style="animation-delay:-5s"></div>

    <div class="relative">
      <h1 class="font-display font-semibold text-3xl leading-tight max-w-sm">
        Four channels. One place to run them from.
      </h1>
      <p class="mt-4 text-cream/70 max-w-sm leading-relaxed">
        Bring your own SMTP servers, bots, and SMS account — or use the shared
        system defaults and send your first campaign today.
      </p>
    </div>

    <div class="relative flex items-end gap-5">
      <div class="space-y-3 flex-1">
        <div class="flex items-center gap-3 text-sm">
          <span class="w-6 h-6 rounded-full bg-mint flex items-center justify-center text-ink text-xs font-bold">✓</span>
          Separate contact lists per channel
        </div>
        <div class="flex items-center gap-3 text-sm">
          <span class="w-6 h-6 rounded-full bg-sun flex items-center justify-center text-ink text-xs font-bold">✓</span>
          Daily send caps enforced automatically
        </div>
        <div class="flex items-center gap-3 text-sm">
          <span class="w-6 h-6 rounded-full bg-coral flex items-center justify-center text-ink text-xs font-bold">✓</span>
          Live status while a batch is sending
        </div>
      </div>
      <div class="w-32 bg-cream border-2 border-cream rounded-2xl p-2 pb-4 -rotate-3 hard-shadow shrink-0">
        <img src="/images/register-polaroid.jpg" alt="People checking messages on their phones" 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">welcome aboard</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">Create your account</h2>
      <p class="mt-2 text-sm text-ink/65">Get access to multi-channel bulk marketing.</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="/register" 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">
          Create account
        </button>
      </form>

      <p class="mt-8 text-center text-sm text-ink/65">
        Already have an account?
        <a href="/login" class="font-semibold text-grape hover:underline">Log in</a>
      </p>
    </div>
  </div>

</main>

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