<%- include('partials/head', { title: 'Error | Atrium Merchant' }) %>
<body class="bg-surface font-body text-on-surface min-h-screen flex items-center justify-center">

  <div class="text-center px-6 py-20 max-w-lg mx-auto">
    <!-- Icon -->
    <div class="w-24 h-24 bg-error-container rounded-3xl flex items-center justify-center mx-auto mb-8 shadow-[0px_12px_32px_rgba(20,28,37,0.06)]">
      <span class="material-symbols-outlined text-5xl text-error">error</span>
    </div>

    <!-- Error Code -->
    <div class="font-headline font-extrabold text-8xl text-error/20 leading-none mb-4"><%= status || 500 %></div>

    <!-- Message -->
    <h1 class="font-headline text-3xl font-extrabold text-on-surface mb-3">Something went wrong</h1>
    <p class="text-on-surface-variant text-lg mb-4">
      <%= message || "An unexpected error occurred. Our team has been notified." %>
    </p>

    <% if (process.env.NODE_ENV !== 'production' && error) { %>
    <div class="text-left bg-surface-container-high rounded-xl p-4 mb-8 text-xs font-mono text-error overflow-auto max-h-40">
      <%= error.stack || error.message || error %>
    </div>
    <% } %>

    <!-- Actions -->
    <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mt-8">
      <a href="/dashboard" class="px-8 py-3 bg-gradient-to-r from-primary to-primary-container text-white rounded-full font-bold shadow-lg shadow-primary/20 hover:scale-[1.02] transition-all">
        Go to Dashboard
      </a>
      <a href="javascript:history.back()" class="px-8 py-3 bg-surface-container text-on-surface-variant rounded-full font-bold hover:bg-surface-container-high transition-colors">
        Go Back
      </a>
    </div>

    <!-- Brand -->
    <div class="mt-16 pt-8 border-t border-surface-container">
      <p class="text-xs text-on-surface-variant">
        &copy; 2024 <span class="font-bold text-primary">Digital Atrium</span> &mdash; All rights reserved.
      </p>
    </div>
  </div>

</body>
</html>
