<div
  id="shop-container"
  phx-hook="CartPersist"
  class="shop-container min-h-screen pb-20 md:pb-0"
  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="pdp"
    mode={@mode}
    cart_count={@cart_count}
  />

  <main id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <.breadcrumb
      items={
        [
          %{label: "Home", page: "home", href: "/"}
        ] ++
          if @product.category do
            [
              %{
                label: @product.category,
                page: "collection",
                href:
                  "/collections/#{@product.category |> String.downcase() |> String.replace(" ", "-")}"
              }
            ]
          else
            []
          end ++
          [%{label: @product.name, current: true}]
      }
      mode={@mode}
    />

    <div class="grid grid-cols-1 md:grid-cols-2 gap-12 mb-16">
      <.product_gallery images={@gallery_images} product_name={@product.name} />

      <div>
        <.product_info product={Map.put(@product, :price, @display_price)} />

        <%!-- Dynamic variant selectors --%>
        <%= for option_type <- @option_types do %>
          <.variant_selector
            option_type={option_type}
            selected={@selected_options[option_type.name]}
            available={@available_options[option_type.name] || []}
            mode={@mode}
          />
        <% end %>

        <%!-- Fallback for products with no variant options --%>
        <div
          :if={@option_types == []}
          class="mb-6 text-sm"
          style="color: var(--t-text-secondary);"
        >
          One size
        </div>

        <.quantity_selector quantity={@quantity} in_stock={@product.in_stock} />
        <.add_to_cart_button mode={@mode} />
        <.trust_badges :if={@theme_settings.pdp_trust_badges} />
        <.product_details product={@product} />
      </div>
    </div>

    <.reviews_section
      :if={@theme_settings.pdp_reviews}
      reviews={SimpleshopTheme.Theme.PreviewData.reviews()}
      average_rating={5}
      total_count={24}
    />

    <.related_products_section
      :if={@theme_settings.pdp_related_products}
      products={@related_products}
      theme_settings={@theme_settings}
      mode={@mode}
    />
  </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")} />

  <.mobile_bottom_nav active_page="pdp" mode={@mode} />
</div>
