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

  <!-- Left Visual Panel -->
  <div class="hidden lg:flex lg:w-1/3 bg-primary-container relative overflow-hidden flex-col justify-between p-12">
    <div class="relative z-10">
      <div class="text-3xl font-black text-on-primary-container tracking-tighter font-headline mb-8">Atrium Merchant</div>
      <h1 class="text-5xl font-extrabold text-on-primary-container font-headline leading-tight tracking-tight">
        Grow your <br/>vision into <br/>a <span class="text-primary-fixed">legacy.</span>
      </h1>
    </div>
    <div class="relative z-10">
      <div class="p-6 bg-white/10 backdrop-blur-xl rounded-xl border border-white/10">
        <p class="text-on-primary-container/80 text-sm italic font-body mb-4">"Atrium didn't just give me a store; they gave me a digital home that breathes."</p>
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-full bg-primary-fixed flex items-center justify-center text-primary font-bold">MB</div>
          <div>
            <p class="text-on-primary-container font-bold text-sm">Modern Boutique</p>
            <p class="text-on-primary-container/60 text-xs">Merchant since 2022</p>
          </div>
        </div>
      </div>
    </div>
    <div class="absolute -bottom-20 -right-20 w-80 h-80 bg-primary-fixed/20 rounded-full blur-3xl"></div>
    <div class="absolute top-1/2 -left-20 w-64 h-64 bg-primary/30 rounded-full blur-3xl"></div>
  </div>

  <!-- Right Content Panel -->
  <div class="flex-grow flex flex-col items-center justify-center p-6 md:p-12 lg:p-24 bg-surface-bright">
    <div class="w-full max-w-xl">

      <!-- Progress -->
      <div class="mb-12">
        <div class="flex justify-between mb-4">
          <div class="flex flex-col gap-1">
            <span class="text-[10px] uppercase tracking-widest font-bold text-primary">Step 02 of 03</span>
            <h2 class="text-2xl font-bold font-headline text-on-surface">Tell us about yourself</h2>
          </div>
          <div class="flex items-center gap-1">
            <div class="w-8 h-1.5 rounded-full bg-primary"></div>
            <div class="w-8 h-1.5 rounded-full bg-primary"></div>
            <div class="w-8 h-1.5 rounded-full bg-surface-container-highest"></div>
          </div>
        </div>
        <div class="h-1 w-full bg-surface-container-low rounded-full overflow-hidden">
          <div class="h-full bg-primary w-2/3"></div>
        </div>
      </div>

      <form action="/onboarding" method="POST" class="space-y-8">
        <!-- Business type -->
        <div class="space-y-4">
          <label class="block text-sm font-semibold text-on-surface-variant font-headline">What are you selling?</label>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <label class="flex items-center gap-4 p-5 rounded-xl bg-surface-container-lowest border-2 border-primary text-left transition-all hover:-translate-y-0.5 cursor-pointer">
              <input type="radio" name="business_type" value="physical_goods" class="hidden" checked/>
              <div class="w-10 h-10 rounded-lg bg-primary-fixed flex items-center justify-center text-primary">
                <span class="material-symbols-outlined">inventory_2</span>
              </div>
              <div>
                <p class="font-bold text-on-surface text-sm">Physical Goods</p>
                <p class="text-xs text-on-surface-variant">Shipping items to customers</p>
              </div>
              <span class="material-symbols-outlined text-primary ml-auto" style="font-variation-settings:'FILL' 1;">check_circle</span>
            </label>
            <label class="flex items-center gap-4 p-5 rounded-xl bg-surface-container-low border-2 border-transparent text-left transition-all hover:bg-surface-container-high hover:-translate-y-0.5 cursor-pointer">
              <input type="radio" name="business_type" value="digital_services" class="hidden"/>
              <div class="w-10 h-10 rounded-lg bg-surface-container-highest flex items-center justify-center text-on-surface-variant">
                <span class="material-symbols-outlined">auto_awesome</span>
              </div>
              <div>
                <p class="font-bold text-on-surface text-sm">Digital Services</p>
                <p class="text-xs text-on-surface-variant">Downloads or subscriptions</p>
              </div>
            </label>
          </div>
        </div>

        <!-- Store details -->
        <div class="bg-surface-container-lowest rounded-2xl p-8 shadow-sm">
          <h3 class="text-lg font-bold font-headline mb-6">Store Details</h3>
          <div class="space-y-6">
            <div>
              <label class="block text-xs font-bold text-on-surface-variant uppercase tracking-wider mb-2" for="store_name">Store Name</label>
              <input class="w-full px-4 py-3 bg-surface-container-low border-none rounded-lg focus:ring-2 focus:ring-primary focus:bg-white transition-all text-on-surface font-medium"
                id="store_name" name="store_name" placeholder="Enter your store name" type="text" required
                value="<%= merchant && merchant.store_name ? merchant.store_name : '' %>"/>
            </div>
            <div>
              <label class="block text-xs font-bold text-on-surface-variant uppercase tracking-wider mb-2" for="experience_level">How would you describe your experience?</label>
              <select class="w-full px-4 py-3 bg-surface-container-low border-none rounded-lg focus:ring-2 focus:ring-primary focus:bg-white transition-all text-on-surface font-medium" id="experience_level" name="experience_level">
                <option value="starting_out">I'm just starting out</option>
                <option value="moving_platform">I'm moving from another platform</option>
                <option value="established_offline">I have an established offline business</option>
              </select>
            </div>
          </div>
        </div>

        <!-- Actions -->
        <div class="flex items-center justify-between pt-4">
          <a href="/" class="flex items-center gap-2 text-on-surface-variant font-bold text-sm hover:text-on-surface transition-colors">
            <span class="material-symbols-outlined text-sm">arrow_back</span>
            Back
          </a>
          <div class="flex gap-4">
            <a href="/pricing" class="px-8 py-3 rounded-full bg-secondary-container text-on-secondary-container font-bold text-sm transition-all hover:bg-secondary-fixed">
              Skip for now
            </a>
            <button type="submit" class="px-10 py-3 rounded-full bg-gradient-to-r from-primary to-primary-container text-on-primary font-bold text-sm shadow-lg shadow-primary/20 transition-all hover:scale-[1.02] active:scale-[0.98]">
              Continue
            </button>
          </div>
        </div>
      </form>

      <div class="mt-12 pt-8 border-t border-surface-container-highest flex flex-col md:flex-row justify-between items-center gap-4">
        <p class="text-xs text-on-surface-variant">© 2024 Atrium Commerce Inc.</p>
        <div class="flex gap-6">
          <a href="#" class="text-xs text-on-surface-variant hover:text-primary">Help Center</a>
          <a href="#" class="text-xs text-on-surface-variant hover:text-primary">Privacy Policy</a>
        </div>
      </div>
    </div>
  </div>
</main>

<!-- Support Bubble -->
<div class="fixed bottom-8 right-8 z-50">
  <button class="w-14 h-14 rounded-full bg-on-surface text-white flex items-center justify-center shadow-xl hover:scale-110 transition-transform">
    <span class="material-symbols-outlined">contact_support</span>
  </button>
</div>
</body>
</html>
