<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="collection" mode={@mode} cart_count={@cart_count} />

  <main id="main-content">
    <.collection_header title="All Products" product_count={length(@preview_data.products)} />

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <.filter_bar categories={@preview_data.categories} />

      <.product_grid theme_settings={@theme_settings}>
        <%= for product <- @preview_data.products do %>
          <.product_card
            product={product}
            theme_settings={@theme_settings}
            mode={@mode}
            variant={:default}
            show_category={true}
          />
        <% end %>
      </.product_grid>
    </div>
  </main>

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

  <.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} mode={@mode} />

  <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
</div>
