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

<!-- 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">
    <span class="text-2xl font-black text-emerald-900 tracking-tighter font-headline">Atrium Merchant</span>
    <div class="hidden md:flex items-center space-x-6">
      <a href="/pricing" class="text-slate-600 hover:text-emerald-900 transition-colors text-sm font-body font-medium">Pricing</a>
      <a href="#features" class="text-slate-600 hover:text-emerald-900 transition-colors text-sm font-body font-medium">Features</a>
    </div>
  </div>
  <div class="flex items-center gap-4">
    <a href="/login" class="text-slate-600 hover:text-emerald-900 font-medium text-sm">Log In</a>
    <a href="/register" class="bg-gradient-to-r from-primary to-primary-container text-on-primary px-6 py-2.5 rounded-full font-semibold text-sm hover:scale-95 duration-150 ease-in-out transition-transform">
      Start Free Trial
    </a>
  </div>
</nav>

<main class="pt-16">
  <!-- Hero -->
  <section class="relative min-h-[900px] flex items-center overflow-hidden bg-surface-container-low">
    <div class="max-w-7xl mx-auto px-8 w-full grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
      <div class="z-10 py-12 lg:py-0">
        <span class="inline-block py-1 px-3 bg-primary-fixed text-on-primary-fixed-variant rounded-full text-xs font-bold mb-6 tracking-wider uppercase">Scale Your Vision</span>
        <h1 class="font-headline text-5xl lg:text-7xl font-extrabold text-on-surface leading-[1.1] tracking-tight mb-8">
          The store of your <span class="text-primary">dreams</span> starts here.
        </h1>
        <p class="text-on-surface-variant text-lg lg:text-xl leading-relaxed mb-10 max-w-lg">
          Atrium Merchant gives you the high-end tools to build, manage, and grow your boutique brand without the technical complexity.
        </p>
        <div class="flex flex-col sm:flex-row gap-4">
          <a href="/register" class="bg-gradient-to-r from-primary to-primary-container text-on-primary px-10 py-4 rounded-xl font-bold text-lg editorial-shadow hover:scale-95 transition-transform duration-150 text-center">
            Start Free Trial
          </a>
          <a href="/pricing" class="bg-surface-container-lowest text-on-surface px-10 py-4 rounded-xl font-bold text-lg editorial-shadow hover:bg-surface-container transition-colors text-center">
            View Pricing
          </a>
        </div>
      </div>
      <div class="relative hidden lg:flex items-center justify-center">
        <div class="absolute -top-20 -right-20 w-96 h-96 bg-primary/10 rounded-full blur-3xl"></div>
        <div class="relative bg-surface-container-lowest p-6 rounded-[2rem] editorial-shadow transform rotate-2 max-w-sm w-full">
          <div class="w-full h-72 bg-gradient-to-br from-primary/20 to-primary-fixed/30 rounded-[1.5rem] flex items-center justify-center">
            <div class="text-center">
              <span class="material-symbols-outlined text-primary text-8xl mb-4 block" style="font-variation-settings:'FILL' 1;">store</span>
              <p class="font-headline font-bold text-on-surface text-xl">Your Dream Store</p>
            </div>
          </div>
          <div class="absolute -bottom-10 -left-10 bg-white/90 backdrop-blur-md p-5 rounded-2xl editorial-shadow max-w-xs">
            <div class="flex items-center gap-3 mb-2">
              <span class="material-symbols-outlined text-primary" style="font-variation-settings:'FILL' 1;">trending_up</span>
              <span class="font-headline font-bold text-on-surface">Growth Insight</span>
            </div>
            <p class="text-sm text-on-surface-variant">Your sales increased by 42% this month. Keep up the great work!</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Value Props -->
  <section class="py-24 bg-surface">
    <div class="max-w-7xl mx-auto px-8">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div class="bg-surface-container-lowest p-10 rounded-2xl editorial-shadow transition-transform hover:-translate-y-2">
          <div class="w-14 h-14 bg-primary-fixed rounded-xl flex items-center justify-center mb-8">
            <span class="material-symbols-outlined text-primary text-3xl">bolt</span>
          </div>
          <h3 class="font-headline text-2xl font-bold mb-4">Fast Setup</h3>
          <p class="text-on-surface-variant leading-relaxed">Go from concept to commerce in minutes. Our intuitive builder makes storefront creation a breeze.</p>
        </div>
        <div class="bg-surface-container-lowest p-10 rounded-2xl editorial-shadow transition-transform hover:-translate-y-2">
          <div class="w-14 h-14 bg-primary-fixed rounded-xl flex items-center justify-center mb-8">
            <span class="material-symbols-outlined text-primary text-3xl">groups</span>
          </div>
          <h3 class="font-headline text-2xl font-bold mb-4">Reach Customers</h3>
          <p class="text-on-surface-variant leading-relaxed">Integrated SEO and social marketing tools ensure your brand finds the right audience, wherever they are.</p>
        </div>
        <div class="bg-surface-container-lowest p-10 rounded-2xl editorial-shadow transition-transform hover:-translate-y-2">
          <div class="w-14 h-14 bg-primary-fixed rounded-xl flex items-center justify-center mb-8">
            <span class="material-symbols-outlined text-primary text-3xl">auto_graph</span>
          </div>
          <h3 class="font-headline text-2xl font-bold mb-4">Simple Management</h3>
          <p class="text-on-surface-variant leading-relaxed">A unified dashboard to handle inventory, orders, and fulfillment. Spend less time on admin.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Features Bento -->
  <section id="features" class="py-24 bg-surface-container-low">
    <div class="max-w-7xl mx-auto px-8">
      <div class="text-center mb-20">
        <h2 class="font-headline text-4xl font-bold mb-4">Powerful Features for Modern Retail</h2>
        <p class="text-on-surface-variant max-w-2xl mx-auto text-lg">Every tool you need to thrive in the digital economy, integrated into one seamless experience.</p>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
        <div class="md:col-span-8 bg-surface-container-lowest rounded-3xl p-8 editorial-shadow flex flex-col justify-between overflow-hidden relative">
          <div>
            <span class="material-symbols-outlined text-primary text-4xl mb-4">payments</span>
            <h3 class="font-headline text-2xl font-bold mb-2">Global Checkout</h3>
            <p class="text-on-surface-variant max-w-sm">Accept 100+ payment methods and local currencies with enterprise-grade security.</p>
          </div>
          <div class="mt-8 flex gap-4">
            <div class="bg-surface-container p-4 rounded-xl flex-1 text-center font-bold text-primary">Apple Pay</div>
            <div class="bg-surface-container p-4 rounded-xl flex-1 text-center font-bold text-primary">Stripe</div>
            <div class="bg-surface-container p-4 rounded-xl flex-1 text-center font-bold text-primary">PayPal</div>
          </div>
        </div>
        <div class="md:col-span-4 bg-primary text-on-primary rounded-3xl p-8 editorial-shadow flex flex-col justify-center items-center text-center">
          <span class="material-symbols-outlined text-6xl mb-6">analytics</span>
          <h3 class="font-headline text-2xl font-bold mb-4">Smart Analytics</h3>
          <p class="text-on-primary-container opacity-80">Real-time data on your store's performance at your fingertips.</p>
        </div>
        <div class="md:col-span-4 bg-surface-container-highest rounded-3xl p-8 editorial-shadow flex flex-col justify-end">
          <h3 class="font-headline text-2xl font-bold mb-2">Inventory Sync</h3>
          <p class="text-on-surface-variant mb-6">Automatically sync stock across all your sales channels.</p>
          <span class="material-symbols-outlined text-on-surface text-4xl">inventory_2</span>
        </div>
        <div class="md:col-span-8 bg-white rounded-3xl p-8 editorial-shadow flex items-center justify-between overflow-hidden">
          <div class="max-w-xs">
            <h3 class="font-headline text-2xl font-bold mb-2">Custom Themes</h3>
            <p class="text-on-surface-variant">Choose from hundreds of designer-made templates that reflect your brand identity.</p>
          </div>
          <div class="w-40 h-40 bg-primary/5 rounded-full flex items-center justify-center">
            <span class="material-symbols-outlined text-primary text-7xl">palette</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Testimonial -->
  <section class="py-24 bg-surface">
    <div class="max-w-7xl mx-auto px-8">
      <div class="bg-white rounded-[3rem] p-12 md:p-20 editorial-shadow flex flex-col md:flex-row gap-16 items-center">
        <div class="w-full md:w-1/3">
          <div class="w-full aspect-square bg-gradient-to-br from-primary/20 to-primary-fixed/30 rounded-2xl flex items-center justify-center">
            <span class="material-symbols-outlined text-primary text-8xl" style="font-variation-settings:'FILL' 1;">person</span>
          </div>
        </div>
        <div class="w-full md:w-2/3">
          <div class="flex gap-1 mb-8">
            <span class="material-symbols-outlined text-primary" style="font-variation-settings:'FILL' 1;">star</span>
            <span class="material-symbols-outlined text-primary" style="font-variation-settings:'FILL' 1;">star</span>
            <span class="material-symbols-outlined text-primary" style="font-variation-settings:'FILL' 1;">star</span>
            <span class="material-symbols-outlined text-primary" style="font-variation-settings:'FILL' 1;">star</span>
            <span class="material-symbols-outlined text-primary" style="font-variation-settings:'FILL' 1;">star</span>
          </div>
          <h2 class="font-headline text-3xl font-bold mb-6 italic leading-snug">"Switching to Atrium Merchant was the best decision for our organic coffee brand. Sales are up 60% and the dashboard is actually fun to use."</h2>
          <div class="border-l-4 border-primary pl-6">
            <p class="font-headline font-bold text-xl">Julian Vance</p>
            <p class="text-on-surface-variant">Founder, Bean &amp; Brew</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="py-24">
    <div class="max-w-7xl mx-auto px-8">
      <div class="bg-gradient-to-br from-primary to-primary-container rounded-[3rem] p-16 text-center text-on-primary editorial-shadow relative overflow-hidden">
        <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -mr-20 -mt-20 blur-2xl"></div>
        <div class="relative z-10">
          <h2 class="font-headline text-5xl font-extrabold mb-6 tracking-tight">Join the next generation of commerce.</h2>
          <p class="text-on-primary-container opacity-90 text-xl max-w-2xl mx-auto mb-12">No credit card required. Cancel anytime. Start your 14-day free trial today.</p>
          <a href="/register" class="inline-block bg-white text-primary px-12 py-5 rounded-xl font-bold text-xl editorial-shadow hover:scale-105 transition-transform">
            Start Free Trial
          </a>
        </div>
      </div>
    </div>
  </section>
</main>

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