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

  <main id="main-content" class="content-page" style="background-color: var(--t-surface-base);">
    <%= if assigns[:hero_background] do %>
      <.hero_section
        title={@hero_title}
        description={@hero_description}
        background={@hero_background}
      />
    <% else %>
      <.hero_section
        variant={:page}
        title={@hero_title}
        description={@hero_description}
      />
    <% end %>

    <div style="padding: var(--space-xl) var(--space-lg); max-width: 800px; margin: 0 auto;">
      <%= if assigns[:image_src] do %>
        <div
          class="content-image"
          style="margin-bottom: var(--space-lg); border-radius: var(--t-radius-image); overflow: hidden;"
        >
          <.responsive_image
            src={@image_src}
            source_width={1200}
            alt={@image_alt}
            sizes="(max-width: 800px) 100vw, 800px"
            class="w-full h-[300px] object-cover"
          />
        </div>
      <% end %>

      <.rich_text blocks={@content_blocks} />
    </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")} />

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