<div 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: "/"},
      %{label: @product.category, page: "collection", href: "/collections/#{@product.category |> String.downcase() |> String.replace(" ", "-")}"},
      %{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={@product} />
        <.variant_selector label="Size" options={["S", "M", "L", "XL"]} />
        <.quantity_selector quantity={@quantity} in_stock={@product.in_stock} />
        <.add_to_cart_button />
        <.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} mode={@mode} />
  <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />

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