<!DOCTYPE html>
<html lang="en">
<head>
  <title><%= title %></title>
  <%- include('partials/head') %>
</head>
<body class="bg-surface font-body text-on-surface selection:bg-primary-fixed">
<main class="min-h-screen flex flex-col md:flex-row">

  <!-- Left Panel -->
  <section class="relative hidden md:flex md:w-5/12 lg:w-1/2 bg-on-background items-end overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-br from-primary to-on-surface" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuB8_lkhl-u7tSpYCcmoIwhxxdYUbU6BwCKGGi-HCmkm2Q-UMjQEVIUp_IS-Xams3DYrzCYM0sHZ589us-UuRUM8cKqlfp6dy3FIMvjUi1F_pri-BQneG_wKnw7_As4oJ8UpKWcYpWdUo96GqxyJJvu1X9x99raN434q19kUcrfDxizdzyK78vMQdIyeszIXUAtB53S5jDLaHvVGI20v4i28ROwp0Lyw2jy1yXYqguvPmq62nDPTkJSseekCWVoNXwsr2MCoh2Fi6ykh'); background-size: cover;"></div>
    <div class="relative z-10 p-12 lg:p-20 w-full">
      <div class="mb-12">
        <span class="font-headline text-3xl font-extrabold tracking-tight text-white">Digital Atrium</span>
      </div>
      <div class="glass-card rounded-xl p-8 border border-white/10 shadow-xl">
        <div class="flex gap-1 mb-4">
          <span class="material-symbols-outlined text-primary-fixed" style="font-variation-settings:'FILL' 1;">star</span>
          <span class="material-symbols-outlined text-primary-fixed" style="font-variation-settings:'FILL' 1;">star</span>
          <span class="material-symbols-outlined text-primary-fixed" style="font-variation-settings:'FILL' 1;">star</span>
          <span class="material-symbols-outlined text-primary-fixed" style="font-variation-settings:'FILL' 1;">star</span>
          <span class="material-symbols-outlined text-primary-fixed" style="font-variation-settings:'FILL' 1;">star</span>
        </div>
        <blockquote class="text-xl font-headline font-semibold text-on-background leading-snug mb-6 italic">
          "The Digital Atrium didn't just give us a dashboard; they gave us a digital home that breathes."
        </blockquote>
        <div class="flex items-center gap-4">
          <div class="w-12 h-12 rounded-full bg-primary-fixed flex items-center justify-center font-bold text-primary">MB</div>
          <div>
            <p class="font-bold text-on-background">Modern Boutique</p>
            <p class="text-sm text-on-surface-variant font-medium">Merchant since 2022</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Right Panel -->
  <section class="flex-1 flex flex-col justify-center items-center px-6 py-12 md:px-12 lg:px-24 bg-surface-bright">
    <div class="w-full max-w-md">
      <div class="md:hidden mb-8 text-center">
        <span class="font-headline text-2xl font-extrabold tracking-tight text-primary">Digital Atrium</span>
      </div>
      <header class="mb-10">
        <h1 class="font-headline text-3xl lg:text-4xl font-extrabold text-on-surface mb-3 tracking-tight">Create Account</h1>
        <p class="text-on-surface-variant font-medium">Start your journey into the atrium today.</p>
      </header>

      <% if (error) { %>
      <div class="mb-6 p-4 bg-error-container text-on-error-container rounded-lg text-sm font-medium flex items-center gap-2">
        <span class="material-symbols-outlined text-sm">error</span>
        <%= error %>
      </div>
      <% } %>

      <form action="/register" method="POST" class="space-y-6">
        <div class="space-y-2">
          <label class="block text-xs font-bold uppercase tracking-wider text-on-surface-variant" for="full_name">Full Name</label>
          <input class="w-full px-4 py-3.5 bg-surface-container-lowest border-0 rounded-lg focus:ring-2 focus:ring-primary shadow-sm text-on-surface placeholder:text-outline/50 transition-all"
            id="full_name" name="full_name" placeholder="Enter your name" type="text" required/>
        </div>
        <div class="space-y-2">
          <label class="block text-xs font-bold uppercase tracking-wider text-on-surface-variant" for="email">Email Address</label>
          <input class="w-full px-4 py-3.5 bg-surface-container-lowest border-0 rounded-lg focus:ring-2 focus:ring-primary shadow-sm text-on-surface placeholder:text-outline/50 transition-all"
            id="email" name="email" placeholder="name@company.com" type="email" required/>
        </div>
        <div class="space-y-2">
          <label class="block text-xs font-bold uppercase tracking-wider text-on-surface-variant" for="password">Password</label>
          <div class="relative">
            <input class="w-full px-4 py-3.5 bg-surface-container-lowest border-0 rounded-lg focus:ring-2 focus:ring-primary shadow-sm text-on-surface placeholder:text-outline/50 transition-all"
              id="password" name="password" placeholder="Min. 8 characters" type="password" required/>
            <button class="absolute right-4 top-1/2 -translate-y-1/2 text-on-surface-variant/60 hover:text-primary" type="button"
              onclick="const i=document.getElementById('password');i.type=i.type==='password'?'text':'password'">
              <span class="material-symbols-outlined text-xl">visibility</span>
            </button>
          </div>
        </div>
        <div class="flex items-start gap-3 py-2">
          <div class="flex items-center h-5">
            <input class="h-4 w-4 rounded border-outline-variant text-primary focus:ring-primary" id="terms" name="terms" type="checkbox" value="1"/>
          </div>
          <label class="text-sm text-on-surface-variant leading-relaxed" for="terms">
            I agree to the <a class="text-primary font-semibold hover:underline" href="#">Terms of Service</a> and <a class="text-primary font-semibold hover:underline" href="#">Privacy Policy</a>.
          </label>
        </div>
        <button class="w-full py-4 bg-gradient-to-r from-primary to-primary-container text-white font-headline font-bold rounded-xl shadow-lg shadow-primary/20 hover:shadow-primary/40 transform transition-all active:scale-95" type="submit">
          Create Your Account
        </button>
      </form>
      <footer class="mt-10 text-center">
        <p class="text-on-surface-variant font-medium">
          Already have an account?
          <a class="text-primary font-bold hover:underline ml-1" href="/login">Log in</a>
        </p>
      </footer>
    </div>
    <div class="mt-auto pt-12 text-center text-[10px] text-on-surface-variant/40 font-bold uppercase tracking-[0.2em]">
      © 2024 Digital Atrium • Merchant Core v4.2
    </div>
  </section>
</main>
</body>
</html>
