---
export const prerender = false;

import RootLayout from '../layouts/RootLayout.astro';
import StoreHeader from '../components/StoreHeader.astro';
---

<RootLayout title="Your cart" description="Review items in your shopping cart.">
  <StoreHeader />
  <main class="mx-auto max-w-2xl px-4 py-8">
    <h1 class="text-3xl font-bold text-slate-900">Your cart</h1>
    <p class="mt-4 text-slate-600">
      Your cart is managed in the browser. Add products from the product catalog to begin checkout.
    </p>
    <p class="mt-2 text-sm text-slate-500">
      The interactive cart widget will be integrated in a future release. For now, browse products and proceed when ready.
    </p>

    <div class="mt-8 rounded-lg border border-dashed border-slate-300 bg-slate-50 p-8 text-center">
      <p class="text-slate-600">Your cart is empty.</p>
      <a href="/products" class="mt-4 inline-block text-sm font-medium text-slate-900 hover:underline">
        Browse products
      </a>
    </div>

    <div class="mt-8">
      <a
        href="/checkout"
        class="inline-block rounded-md bg-slate-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-slate-800"
      >
        Continue to checkout
      </a>
    </div>
  </main>
</RootLayout>