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

<!-- TopNavBar -->
<nav class="fixed top-0 w-full flex justify-between items-center px-8 h-16 bg-white/80 backdrop-blur-md shadow-sm z-50">
  <div class="flex items-center gap-8">
    <a href="/" class="text-2xl font-black text-emerald-900 tracking-tighter font-headline">Atrium Merchant</a>
    <div class="hidden md:flex gap-6 items-center">
      <a href="/" class="text-slate-600 hover:text-emerald-900 transition-colors font-medium text-sm">Solutions</a>
      <span class="text-emerald-700 font-bold border-b-2 border-emerald-700 text-sm">Pricing</span>
      <a href="/login" class="text-slate-600 hover:text-emerald-900 transition-colors font-medium text-sm">Log In</a>
    </div>
  </div>
  <div class="flex items-center gap-4">
    <a href="/register" class="bg-primary hover:bg-primary-container text-white px-6 py-2 rounded-xl font-headline font-bold transition-all active:scale-95 text-sm">
      Start Free Trial
    </a>
  </div>
</nav>

<main class="pt-32 pb-24">
  <!-- Hero -->
  <section class="max-w-6xl mx-auto px-8 mb-20 text-center">
    <h1 class="font-headline font-extrabold text-5xl md:text-6xl text-on-surface mb-6 tracking-tight">
      Plans for every stage of <br/><span class="text-primary">your business</span>
    </h1>
    <p class="text-on-surface-variant text-xl max-w-2xl mx-auto mb-10 leading-relaxed">
      Whether you're starting a side hustle or scaling a global brand, our flexible pricing grows with you.
    </p>
    <!-- Toggle -->
    <div class="flex items-center justify-center gap-4 mb-16">
      <span class="text-sm font-semibold text-on-surface">Monthly billing</span>
      <div class="w-14 h-7 bg-primary rounded-full p-1 cursor-pointer flex items-center justify-end">
        <div class="w-5 h-5 bg-white rounded-full shadow-sm"></div>
      </div>
      <span class="text-sm font-semibold text-on-surface">Annual billing</span>
      <span class="bg-primary-fixed text-on-primary-fixed-variant text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider">Save 20%</span>
    </div>
  </section>

  <!-- Pricing Cards -->
  <section class="max-w-7xl mx-auto px-8 grid grid-cols-1 md:grid-cols-3 gap-8 mb-32">
    <% plans.forEach(function(plan, i) { %>
    <div class="bg-surface-container-lowest rounded-xl p-8 transition-transform duration-300 hover:-translate-y-2 relative
      <%= plan.is_popular ? 'border-b-4 border-primary shadow-xl scale-105 z-10' : 'border-b-4 border-transparent' %>">
      <% if (plan.is_popular) { %>
      <div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-primary text-white text-[10px] font-black uppercase tracking-widest py-1 px-4 rounded-full">
        Most Popular
      </div>
      <% } %>
      <div class="mb-8">
        <h3 class="font-headline font-bold text-2xl mb-2"><%= plan.name %></h3>
        <p class="text-on-surface-variant text-sm">
          <% if (plan.slug === 'basic') { %>Best for solo entrepreneurs.
          <% } else if (plan.slug === 'pro') { %>For scaling businesses.
          <% } else { %>For advanced requirements.<% } %>
        </p>
      </div>
      <div class="mb-8">
        <span class="text-4xl font-extrabold font-headline">$<%= plan.price_monthly %></span>
        <span class="text-on-surface-variant">/mo</span>
      </div>
      <ul class="space-y-4 mb-10">
        <% JSON.parse(plan.features || '[]').forEach(function(f) { %>
        <li class="flex items-center gap-3 text-sm text-on-surface">
          <span class="material-symbols-outlined text-primary text-xl" style="font-variation-settings:'FILL' 1;">check_circle</span>
          <%= f %>
        </li>
        <% }) %>
      </ul>
      <% if (plan.is_popular) { %>
      <a href="/checkout?plan=<%= plan.slug %>" class="block w-full py-3 px-6 rounded-lg bg-gradient-to-r from-primary to-primary-container text-white font-bold font-headline shadow-lg hover:opacity-90 transition-opacity text-center">
        Choose <%= plan.name %>
      </a>
      <% } else if (plan.slug === 'enterprise') { %>
      <a href="/register" class="block w-full py-3 px-6 rounded-lg border-2 border-on-surface text-on-surface font-bold font-headline hover:bg-surface-container-high transition-colors text-center">
        Contact Sales
      </a>
      <% } else { %>
      <a href="/checkout?plan=<%= plan.slug %>" class="block w-full py-3 px-6 rounded-lg border-2 border-primary text-primary font-bold font-headline hover:bg-primary-fixed transition-colors text-center">
        Start <%= plan.name %>
      </a>
      <% } %>
    </div>
    <% }) %>
  </section>

  <!-- Feature Comparison -->
  <section class="max-w-6xl mx-auto px-8 mb-32">
    <h2 class="font-headline font-bold text-3xl mb-12 text-center">Compare features</h2>
    <div class="overflow-x-auto">
      <table class="w-full text-left border-collapse">
        <thead>
          <tr class="bg-surface-container-low">
            <th class="py-6 px-8 text-on-surface-variant font-label text-xs uppercase tracking-widest">Core Features</th>
            <% plans.forEach(function(p) { %>
            <th class="py-6 px-8 font-headline font-bold"><%= p.name %></th>
            <% }) %>
          </tr>
        </thead>
        <tbody class="divide-y divide-surface-variant/30">
          <tr class="hover:bg-surface-container-low/50 transition-colors">
            <td class="py-6 px-8 font-semibold">Sales Channels</td>
            <% plans.forEach(function(p) { %>
            <td class="py-6 px-8"><span class="material-symbols-outlined text-primary">done</span></td>
            <% }) %>
          </tr>
          <tr class="bg-surface-container-low/20 hover:bg-surface-container-low/50 transition-colors">
            <td class="py-6 px-8 font-semibold">Inventory Locations</td>
            <% plans.forEach(function(p) { %>
            <td class="py-6 px-8">Up to <%= p.inventory_locations %></td>
            <% }) %>
          </tr>
          <tr class="hover:bg-surface-container-low/50 transition-colors">
            <td class="py-6 px-8 font-semibold">Shipping Discount</td>
            <% plans.forEach(function(p) { %>
            <td class="py-6 px-8">Up to <%= p.shipping_discount %>%</td>
            <% }) %>
          </tr>
          <tr class="bg-surface-container-low/20 hover:bg-surface-container-low/50 transition-colors">
            <td class="py-6 px-8 font-semibold">Transaction Fees</td>
            <% plans.forEach(function(p) { %>
            <td class="py-6 px-8"><%= p.transaction_fee %>%</td>
            <% }) %>
          </tr>
          <tr class="hover:bg-surface-container-low/50 transition-colors">
            <td class="py-6 px-8 font-semibold">Staff Accounts</td>
            <% plans.forEach(function(p) { %>
            <td class="py-6 px-8"><%= p.staff_accounts %></td>
            <% }) %>
          </tr>
        </tbody>
      </table>
    </div>
  </section>

  <!-- FAQ -->
  <section class="max-w-4xl mx-auto px-8 mb-24">
    <h2 class="font-headline font-bold text-3xl mb-12 text-center">Frequently asked questions</h2>
    <div class="space-y-4" id="faq">
      <div class="bg-surface-container-lowest rounded-xl p-6 shadow-sm">
        <div class="flex justify-between items-center cursor-pointer" onclick="this.nextElementSibling.classList.toggle('hidden')">
          <h4 class="font-bold font-headline">Can I change plans later?</h4>
          <span class="material-symbols-outlined text-on-surface-variant">expand_more</span>
        </div>
        <p class="mt-4 text-on-surface-variant leading-relaxed">Yes, you can upgrade or downgrade your plan at any time from your Merchant Dashboard. Changes are applied immediately and prorated.</p>
      </div>
      <div class="bg-surface-container-lowest rounded-xl p-6 shadow-sm">
        <div class="flex justify-between items-center cursor-pointer" onclick="this.nextElementSibling.classList.toggle('hidden')">
          <h4 class="font-bold font-headline">What are the transaction fees?</h4>
          <span class="material-symbols-outlined text-on-surface-variant">expand_more</span>
        </div>
        <p class="mt-4 text-on-surface-variant leading-relaxed">Transaction fees depend on your plan. Basic plans start at 2%, while Enterprise users enjoy 0.5% per sale.</p>
      </div>
      <div class="bg-surface-container-lowest rounded-xl p-6 shadow-sm">
        <div class="flex justify-between items-center cursor-pointer" onclick="this.nextElementSibling.classList.toggle('hidden')">
          <h4 class="font-bold font-headline">Is there a long-term contract?</h4>
          <span class="material-symbols-outlined text-on-surface-variant">expand_more</span>
        </div>
        <p class="mt-4 text-on-surface-variant leading-relaxed">No. Monthly plans can be canceled any time without penalty. Annual plans offer a 20% discount and are billed upfront.</p>
      </div>
    </div>
  </section>

  <!-- Bottom CTA -->
  <section class="max-w-6xl mx-auto px-8 mb-32">
    <div class="bg-emerald-900 rounded-[2rem] p-16 text-center text-white relative overflow-hidden">
      <div class="absolute top-0 right-0 w-64 h-64 bg-emerald-800 rounded-full blur-3xl opacity-20 -mr-32 -mt-32"></div>
      <h2 class="font-headline font-extrabold text-4xl mb-6 relative z-10">Ready to build your dream store?</h2>
      <p class="text-emerald-100 text-lg mb-10 max-w-xl mx-auto relative z-10">Start your 14-day free trial today. No credit card required.</p>
      <a href="/register" class="inline-block bg-primary-fixed text-on-primary-fixed-variant px-10 py-4 rounded-xl font-headline font-bold text-lg hover:scale-105 transition-transform relative z-10">
        Start Your Free Trial
      </a>
    </div>
  </section>
</main>

<%- include('partials/footer-public') %>
</body>
</html>
