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

  <main id="main-content" 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-8" style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking);">
      Your basket
    </h1>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
      <!-- Cart Items -->
      <div class="lg:col-span-2">
        <div class="space-y-4">
          <%= for item <- @preview_data.cart_items do %>
            <div
              class="flex gap-4 p-4"
              style="background-color: var(--t-surface-raised); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-card);"
            >
              <div class="w-24 h-24 flex-shrink-0 bg-gray-200 overflow-hidden" style="border-radius: var(--t-radius-image);">
                <img
                  src={item.product.image_url}
                  alt={item.product.name}
                  class="w-full h-full object-cover"
                />
              </div>

              <div class="flex-1">
                <h3 class="font-semibold mb-1" style="font-family: var(--t-font-heading); color: var(--t-text-primary);">
                  <%= item.product.name %>
                </h3>
                <p class="text-sm mb-2" style="color: var(--t-text-secondary);">
                  <%= item.variant %>
                </p>

                <div class="flex items-center gap-4">
                  <div class="flex items-center" style="border: 1px solid var(--t-border-default); border-radius: var(--t-radius-input);">
                    <button class="px-3 py-1" style="color: var(--t-text-primary);">−</button>
                    <span class="px-3 py-1 border-x" style="border-color: var(--t-border-default); color: var(--t-text-primary);">
                      <%= item.quantity %>
                    </span>
                    <button class="px-3 py-1" style="color: var(--t-text-primary);">+</button>
                  </div>

                  <button class="text-sm" style="color: var(--t-text-tertiary);">
                    Remove
                  </button>
                </div>
              </div>

              <div class="text-right">
                <p class="font-bold text-lg" style="color: var(--t-text-primary);">
                  $<%= item.product.price / 100 * item.quantity %>
                </p>
              </div>
            </div>
          <% end %>
        </div>
      </div>

      <!-- Order Summary -->
      <div>
        <div
          class="p-6 sticky top-4"
          style="background-color: var(--t-surface-raised); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-card);"
        >
          <h2 class="text-xl font-bold mb-6" style="font-family: var(--t-font-heading); color: var(--t-text-primary);">
            Order Summary
          </h2>

          <div class="space-y-3 mb-6">
            <div class="flex justify-between">
              <span style="color: var(--t-text-secondary);">Subtotal</span>
              <span style="color: var(--t-text-primary);">
                $<%= Enum.reduce(@preview_data.cart_items, 0, fn item, acc -> acc + item.product.price * item.quantity end) / 100 %>
              </span>
            </div>
            <div class="flex justify-between">
              <span style="color: var(--t-text-secondary);">Delivery</span>
              <span style="color: var(--t-text-primary);">£8.00</span>
            </div>
            <div class="flex justify-between">
              <span style="color: var(--t-text-secondary);">VAT (20%)</span>
              <span style="color: var(--t-text-primary);">£7.20</span>
            </div>
            <div class="border-t pt-3" style="border-color: var(--t-border-default);">
              <div class="flex justify-between text-lg">
                <span class="font-semibold" style="color: var(--t-text-primary);">Total</span>
                <span class="font-bold" style="color: var(--t-text-primary);">
                  £<%= (Enum.reduce(@preview_data.cart_items, 0, fn item, acc -> acc + item.product.price * item.quantity end) / 100 + 8.00 + 7.20) |> Float.round(2) %>
                </span>
              </div>
            </div>
          </div>

          <button
            class="w-full px-6 py-3 font-semibold transition-all mb-3"
            style="background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); border-radius: var(--t-radius-button);"
          >
            Checkout
          </button>

          <button
            class="w-full px-6 py-3 font-semibold transition-all"
            style="border: 2px solid var(--t-border-default); color: var(--t-text-primary); border-radius: var(--t-radius-button);"
          >
            Continue Shopping
          </button>
        </div>
      </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>
