<div class="shop-container min-h-screen" style="position: relative; background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
  <!-- Skip Link for Accessibility -->
  <SimpleshopThemeWeb.ThemeLive.PreviewPages.skip_link />

  <!-- Announcement Bar -->
  <%= if @theme_settings.announcement_bar do %>
    <SimpleshopThemeWeb.ThemeLive.PreviewPages.announcement_bar theme_settings={@theme_settings} />
  <% end %>

  <!-- Header -->
  <SimpleshopThemeWeb.ThemeLive.PreviewPages.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="error" />

  <main id="main-content" class="flex items-center justify-center" style="min-height: calc(100vh - 4rem);">
    <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center">
    <h1 class="text-8xl md:text-9xl font-bold mb-4" style="font-family: var(--t-font-heading); color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); font-weight: var(--t-heading-weight);">
      404
    </h1>

    <h2 class="text-3xl md:text-4xl font-bold mb-6" style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking);">
      Page Not Found
    </h2>

    <p class="text-lg mb-8 max-w-md mx-auto" style="color: var(--t-text-secondary);">
      Sorry, we couldn't find the page you're looking for. Perhaps you've mistyped the URL or the page has been moved.
    </p>

    <div class="flex flex-col sm:flex-row gap-4 justify-center">
      <button
        class="px-8 py-3 font-semibold transition-all"
        style="background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); border-radius: var(--t-radius-button);"
      >
        Go to Homepage
      </button>

      <button
        class="px-8 py-3 font-semibold transition-all"
        style="border: 2px solid var(--t-border-default); color: var(--t-text-primary); border-radius: var(--t-radius-button);"
      >
        Browse Products
      </button>
    </div>

    <div class="product-grid mt-12 grid gap-4 grid-cols-2 md:grid-cols-4 max-w-xl mx-auto">
      <%= for product <- Enum.take(@preview_data.products, 4) do %>
        <div
          class="product-card group overflow-hidden"
          style="background-color: var(--t-surface-raised); border: 1px solid var(--t-border-subtle); border-radius: var(--t-radius-card);"
        >
          <div class="product-image-container aspect-square bg-gray-200 overflow-hidden relative">
            <img
              src={product.image_url}
              alt={product.name}
              class="product-image-primary w-full h-full object-cover transition-opacity duration-300"
            />
            <%= if @theme_settings.hover_image && product[:hover_image_url] do %>
              <img
                src={product.hover_image_url}
                alt={product.name}
                class="product-image-hover w-full h-full object-cover"
              />
            <% end %>
          </div>
          <div class="p-2">
            <p class="text-xs font-semibold truncate" style="color: var(--t-text-primary);">
              <%= product.name %>
            </p>
            <%= if @theme_settings.show_prices do %>
              <p class="text-xs" style="color: var(--t-text-secondary);">
                £<%= product.price / 100 %>
              </p>
            <% end %>
          </div>
        </div>
      <% end %>
    </div>
    </div>
  </main>

  <!-- Footer -->
  <SimpleshopThemeWeb.ThemeLive.PreviewPages.shop_footer theme_settings={@theme_settings} />

  <!-- Search Modal -->
  <!-- Cart Drawer -->
  <SimpleshopThemeWeb.ThemeLive.PreviewPages.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} />

  <SimpleshopThemeWeb.ThemeLive.PreviewPages.search_modal />
</div>
