<!DOCTYPE html>
<html lang="en">
<head>
  <title><%= title %></title>
  <%- include('partials/head') %>
</head>
<body class="bg-surface font-body text-on-surface">

<header class="bg-white border-b border-outline-variant/10">
  <div class="flex justify-between items-center px-8 py-4 w-full max-w-7xl mx-auto">
    <div class="text-xl font-bold text-on-surface font-headline">Digital Atrium</div>
    <div class="flex items-center gap-4">
      <span class="text-on-surface-variant text-sm font-medium">Step 3 of 4</span>
      <div class="w-32 h-1.5 bg-surface-container rounded-full overflow-hidden">
        <div class="w-3/4 h-full bg-primary"></div>
      </div>
    </div>
  </div>
</header>

<div class="flex min-h-screen">
  <!-- Left Setup Guide -->
  <aside class="fixed left-0 top-0 h-full flex-col py-8 bg-surface-container-low w-64 hidden lg:flex pt-20">
    <div class="px-6 mb-8">
      <h2 class="font-headline font-bold text-lg text-on-surface">Setup Guide</h2>
      <p class="text-on-surface-variant text-xs mt-1">75% Complete</p>
    </div>
    <nav class="flex-1 space-y-1">
      <div class="flex items-center gap-3 px-6 py-3 text-on-surface-variant">
        <span class="material-symbols-outlined text-lg">person_add</span>
        <span class="text-sm">Account Info</span>
        <span class="material-symbols-outlined text-primary ml-auto text-sm" style="font-variation-settings:'FILL' 1;">check_circle</span>
      </div>
      <div class="flex items-center gap-3 px-6 py-3 text-on-surface-variant">
        <span class="material-symbols-outlined text-lg">storefront</span>
        <span class="text-sm">Store Details</span>
        <span class="material-symbols-outlined text-primary ml-auto text-sm" style="font-variation-settings:'FILL' 1;">check_circle</span>
      </div>
      <div class="flex items-center gap-3 px-6 py-3 bg-white text-primary rounded-l-xl font-bold">
        <span class="material-symbols-outlined text-lg">layers</span>
        <span class="text-sm">Select Plan</span>
      </div>
      <div class="flex items-center gap-3 px-6 py-3 text-on-surface-variant">
        <span class="material-symbols-outlined text-lg">verified_user</span>
        <span class="text-sm">Verification</span>
      </div>
    </nav>
    <div class="mt-auto px-6">
      <a href="#" class="flex items-center gap-2 text-on-surface-variant hover:text-primary transition-colors text-sm">
        <span class="material-symbols-outlined">help</span>
        <span>Get Help</span>
      </a>
    </div>
  </aside>

  <!-- Main Content -->
  <main class="flex-1 lg:ml-64 p-8 md:p-12 lg:p-20 flex justify-center">
    <div class="w-full max-w-2xl">
      <header class="mb-12">
        <h1 class="font-headline text-4xl font-extrabold tracking-tight text-on-surface mb-2">Finalize Your Plan</h1>
        <% if (selectedPlan) { %>
        <p class="text-on-surface-variant text-lg">You've selected the <span class="text-primary font-bold"><%= selectedPlan.name %></span> plan. Complete your details to unlock growth.</p>
        <% } %>
      </header>

      <!-- Plan Summary -->
      <% if (selectedPlan) { %>
      <div class="bg-surface-container-lowest rounded-xl p-8 mb-8 editorial-shadow relative overflow-hidden">
        <div class="absolute top-4 right-4">
          <% if (selectedPlan.is_popular) { %>
          <span class="bg-primary-fixed text-on-primary-fixed-variant px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider">Most Popular</span>
          <% } %>
        </div>
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
          <div>
            <h3 class="font-headline text-2xl font-bold text-on-surface mb-1"><%= selectedPlan.name %> Plan</h3>
            <p class="text-on-surface-variant text-sm mb-4">Advanced tools for scaling merchants</p>
            <ul class="space-y-3">
              <% JSON.parse(selectedPlan.features || '[]').slice(0,3).forEach(function(f) { %>
              <li class="flex items-center gap-3 text-sm font-medium">
                <span class="material-symbols-outlined text-primary text-xl">check_circle</span>
                <span><%= f %></span>
              </li>
              <% }) %>
            </ul>
          </div>
          <div class="text-left md:text-right">
            <div class="text-on-surface-variant text-sm mb-1">Total due today</div>
            <div class="text-4xl font-black text-on-surface">$<%= selectedPlan.price_monthly %><span class="text-lg font-medium text-on-surface-variant">/mo</span></div>
            <a href="/pricing" class="text-primary text-sm font-semibold hover:underline mt-2 block">Change Plan</a>
          </div>
        </div>
      </div>
      <% } %>

      <!-- Payment -->
      <form action="/checkout" method="POST">
        <input type="hidden" name="plan_slug" value="<%= selectedPlan ? selectedPlan.slug : 'pro' %>"/>
        <input type="hidden" name="billing_cycle" value="monthly"/>

        <section class="space-y-6 mb-8">
          <h2 class="font-headline text-xl font-bold text-on-surface">Payment Method</h2>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <label class="flex items-center p-4 bg-surface-container-lowest rounded-xl border-2 border-primary cursor-pointer">
              <span class="material-symbols-outlined text-primary mr-3">credit_card</span>
              <span class="font-bold text-on-surface">Credit Card</span>
              <span class="ml-auto material-symbols-outlined text-primary" style="font-variation-settings:'FILL' 1;">radio_button_checked</span>
            </label>
            <label class="flex items-center p-4 bg-surface-container-lowest rounded-xl border-2 border-transparent hover:border-outline-variant cursor-pointer">
              <span class="material-symbols-outlined text-on-surface-variant mr-3">account_balance_wallet</span>
              <span class="font-bold text-on-surface">PayPal</span>
              <span class="ml-auto material-symbols-outlined text-outline-variant">radio_button_unchecked</span>
            </label>
          </div>

          <div class="bg-surface-container-lowest rounded-xl p-8 space-y-4">
            <div class="space-y-2">
              <label class="text-xs font-bold uppercase tracking-wider text-on-surface-variant">Cardholder Name</label>
              <input class="w-full bg-surface-container-low border-none rounded-lg p-3 focus:ring-2 focus:ring-primary focus:bg-white transition-all text-on-surface" placeholder="Johnathan Doe" type="text"/>
            </div>
            <div class="space-y-2">
              <label class="text-xs font-bold uppercase tracking-wider text-on-surface-variant">Card Number</label>
              <input class="w-full bg-surface-container-low border-none rounded-lg p-3 focus:ring-2 focus:ring-primary focus:bg-white transition-all text-on-surface" placeholder="0000 0000 0000 0000" type="text"/>
            </div>
            <div class="grid grid-cols-2 gap-4">
              <div class="space-y-2">
                <label class="text-xs font-bold uppercase tracking-wider text-on-surface-variant">Expiry Date</label>
                <input class="w-full bg-surface-container-low border-none rounded-lg p-3 focus:ring-2 focus:ring-primary focus:bg-white transition-all text-on-surface" placeholder="MM / YY" type="text"/>
              </div>
              <div class="space-y-2">
                <label class="text-xs font-bold uppercase tracking-wider text-on-surface-variant">CVV</label>
                <input class="w-full bg-surface-container-low border-none rounded-lg p-3 focus:ring-2 focus:ring-primary focus:bg-white transition-all text-on-surface" placeholder="123" type="text"/>
              </div>
            </div>
          </div>
        </section>

        <!-- Billing Summary -->
        <% if (selectedPlan) { %>
        <div class="p-6 bg-surface-container rounded-xl mb-8">
          <div class="flex justify-between items-center mb-2">
            <span class="text-on-surface-variant text-sm">Monthly Subscription</span>
            <span class="text-on-surface font-semibold">$<%= selectedPlan.price_monthly %></span>
          </div>
          <div class="flex justify-between items-center mb-4 pb-4 border-b border-outline-variant/20">
            <span class="text-on-surface-variant text-sm">Estimated Tax</span>
            <span class="text-on-surface font-semibold">$0.00</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-on-surface font-bold text-lg">Total Due</span>
            <span class="text-primary font-black text-2xl">$<%= selectedPlan.price_monthly %></span>
          </div>
        </div>
        <% } %>

        <div class="flex flex-col items-center gap-4">
          <button type="submit" class="w-full py-4 bg-gradient-to-r from-primary to-primary-container text-on-primary font-bold text-lg rounded-full shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all">
            Activate My Account
          </button>
          <p class="text-xs text-on-surface-variant text-center max-w-sm">
            By clicking "Activate My Account", you agree to Digital Atrium's Terms of Service and Privacy Policy.
          </p>
        </div>
      </form>
    </div>
  </main>
</div>
</body>
</html>
