<div
  class="shop-container min-h-screen"
  style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
>
  <.skip_link />

  <%= if @theme_settings.announcement_bar do %>
    <.announcement_bar theme_settings={@theme_settings} />
  <% end %>

  <.shop_header
    theme_settings={@theme_settings}
    logo_image={@logo_image}
    header_image={@header_image}
    active_page="error"
    mode={@mode}
    cart_count={@cart_count}
  />

  <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">
      <.hero_section
        variant={:error}
        pre_title={@error_code}
        title={@error_title}
        description={@error_description}
        cta_text="Go to Homepage"
        cta_page="home"
        secondary_cta_text="Browse Products"
        secondary_cta_page="collection"
        mode={@mode}
      />

      <.product_grid columns={:fixed_4} gap="gap-4" class="mt-12 max-w-xl mx-auto">
        <%= for product <- Enum.take(@preview_data.products, 4) do %>
          <.product_card
            product={product}
            theme_settings={@theme_settings}
            mode={@mode}
            variant={:minimal}
          />
        <% end %>
      </.product_grid>
    </div>
  </main>

  <.shop_footer theme_settings={@theme_settings} mode={@mode} />

  <.cart_drawer
    cart_items={@cart_items}
    subtotal={@cart_subtotal}
    cart_count={@cart_count}
    mode={@mode}
    open={assigns[:cart_drawer_open] || false}
    cart_status={assigns[:cart_status]}
  />

  <.search_modal hint_text={~s(Try a search – e.g. "mountain" or "notebook")} />
</div>
