<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="collection" />

  <!-- Page Header -->
  <main id="main-content">
  <div class="border-b" style="background-color: var(--t-surface-raised); border-color: var(--t-border-default);">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <h1 class="text-3xl md:text-4xl font-bold mb-2" style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking);">
        All Products
      </h1>
      <p style="color: var(--t-text-secondary);">
        <%= length(@preview_data.products) %> products
      </p>
    </div>
  </div>

  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Filter Bar: Category Pills + Sort -->
    <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
      <!-- Category Pills -->
      <div class="filter-pills-container flex gap-2 overflow-x-auto">
        <button class="filter-pill filter-pill-active">
          All
        </button>
        <%= for category <- @preview_data.categories do %>
          <button class="filter-pill">
            <%= category.name %>
          </button>
        <% end %>
      </div>

      <!-- Sort Dropdown -->
      <select
        class="px-4 py-2"
        style="background-color: var(--t-surface-raised); color: var(--t-text-primary); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-input);"
      >
        <option>Sort by: Featured</option>
        <option>Price: Low to High</option>
        <option>Price: High to Low</option>
        <option>Newest</option>
        <option>Best Selling</option>
      </select>
    </div>

    <!-- Product Grid -->
    <div class={[
          "product-grid grid grid-cols-1 sm:grid-cols-2",
          case @theme_settings.grid_columns do
            "2" -> "lg:grid-cols-2"
            "3" -> "lg:grid-cols-3"
            "4" -> "lg:grid-cols-4"
            _ -> "lg:grid-cols-3"
          end
        ]}>
          <%= for product <- @preview_data.products do %>
            <div
              phx-click="change_preview_page"
              phx-value-page="pdp"
              class="product-card group overflow-hidden transition-all"
              style="background-color: var(--t-surface-raised); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-card); cursor: pointer;"
            >
              <div class="product-image-container bg-gray-200 overflow-hidden relative">
                <!-- Product Badge -->
                <%= cond do %>
                  <% not product.in_stock -> %>
                    <span class="product-badge badge-sold-out">Sold out</span>
                  <% product.on_sale -> %>
                    <span class="product-badge badge-sale">Sale</span>
                  <% true -> %>
                <% end %>
                <!-- Primary Image -->
                <img
                  src={product.image_url}
                  alt={product.name}
                  loading="lazy"
                  decoding="async"
                  class="product-image-primary w-full h-full object-cover transition-opacity duration-300"
                />
                <!-- Hover Image -->
                <%= if @theme_settings.hover_image && product[:hover_image_url] do %>
                  <img
                    src={product.hover_image_url}
                    alt={product.name}
                    loading="lazy"
                    decoding="async"
                    class="product-image-hover w-full h-full object-cover"
                  />
                <% end %>
              </div>
              <div>
                <p class="text-xs mb-1" style="color: var(--t-text-tertiary);">
                  <%= product.category %>
                </p>
                <h3 class="font-semibold mb-2" style="font-family: var(--t-font-heading); color: var(--t-text-primary);">
                  <%= product.name %>
                </h3>
                <%= if @theme_settings.show_prices do %>
                  <div>
                    <%= if product.on_sale do %>
                      <span class="text-lg font-bold" style="color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));">
                        £<%= product.price / 100 %>
                      </span>
                      <span class="text-sm line-through ml-2" style="color: var(--t-text-tertiary);">
                        £<%= product.compare_at_price / 100 %>
                      </span>
                    <% else %>
                      <span class="text-lg font-bold" style="color: var(--t-text-primary);">
                        £<%= product.price / 100 %>
                      </span>
                    <% end %>
                  </div>
                <% end %>
                <p class="text-xs mt-1" style="color: var(--t-text-tertiary);">
                  Free delivery over £40
                </p>
              </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>
