<%
  product = List.first(@preview_data.products)
%>
<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="pdp" />

  <main id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Breadcrumb -->
    <nav class="mb-8 flex items-center gap-2 text-sm" style="color: var(--t-text-secondary);">
      <a href="#" phx-click="change_preview_page" phx-value-page="home" class="hover:underline">Home</a>
      <span>/</span>
      <a href="#" phx-click="change_preview_page" phx-value-page="collection" class="hover:underline"><%= product.category %></a>
      <span>/</span>
      <span style="color: var(--t-text-primary);"><%= product.name %></span>
    </nav>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-12 mb-16">
      <!-- Product Images -->
      <div>
        <% gallery_images = [product.image_url, product.hover_image_url, product.image_url, product.hover_image_url] %>
        <div
          class="pdp-main-image-container aspect-square bg-gray-200 mb-4 overflow-hidden relative"
          style="border-radius: var(--t-radius-image);"
          phx-click={Phoenix.LiveView.JS.exec("data-show", to: "#pdp-lightbox")}
        >
          <img
            id="pdp-main-image"
            src={product.image_url}
            alt={product.name}
            class="w-full h-full object-cover"
          />
          <!-- Zoom icon overlay -->
          <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity bg-black/10">
            <div class="w-12 h-12 bg-white/90 rounded-full flex items-center justify-center shadow-lg">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" />
              </svg>
            </div>
          </div>
        </div>
        <div class="grid grid-cols-4 gap-4">
          <%= for {img_url, idx} <- Enum.with_index(gallery_images) do %>
            <button
              type="button"
              class={"aspect-square bg-gray-200 cursor-pointer overflow-hidden pdp-thumbnail#{if idx == 0, do: " pdp-thumbnail-active", else: ""}"}
              style="border-radius: var(--t-radius-image);"
              data-index={idx}
              phx-click={Phoenix.LiveView.JS.set_attribute({"src", img_url}, to: "#pdp-main-image")
                |> Phoenix.LiveView.JS.set_attribute({"data-current-index", to_string(idx)}, to: "#pdp-lightbox")
                |> Phoenix.LiveView.JS.remove_class("pdp-thumbnail-active", to: ".pdp-thumbnail")
                |> Phoenix.LiveView.JS.add_class("pdp-thumbnail-active")}
            >
              <img
                src={img_url}
                alt={product.name}
                class="w-full h-full object-cover"
              />
            </button>
          <% end %>
        </div>
        <style>
          .pdp-thumbnail {
            border: 2px solid var(--t-border-default);
            transition: border-color 0.15s ease;
          }
          .pdp-thumbnail-active {
            border-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
          }
        </style>

        <!-- Image Lightbox -->
        <dialog
          class="lightbox"
          id="pdp-lightbox"
          aria-label="Product image gallery"
          data-current-index="0"
          data-images={Jason.encode!(gallery_images)}
          data-show={Phoenix.LiveView.JS.exec("phx-show-lightbox", to: "#pdp-lightbox")}
          phx-show-lightbox={Phoenix.LiveView.JS.dispatch("pdp:open-lightbox", to: "#pdp-lightbox")}
          phx-hook="Lightbox"
        >
          <div class="lightbox-content">
            <button
              type="button"
              class="lightbox-close"
              aria-label="Close gallery"
              phx-click={Phoenix.LiveView.JS.dispatch("pdp:close-lightbox", to: "#pdp-lightbox")}
            >
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="18" y1="6" x2="6" y2="18"></line>
                <line x1="6" y1="6" x2="18" y2="18"></line>
              </svg>
            </button>
            <button
              type="button"
              class="lightbox-nav lightbox-prev"
              aria-label="Previous image"
              phx-click={Phoenix.LiveView.JS.dispatch("pdp:prev-image", to: "#pdp-lightbox")}
            >
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="15 18 9 12 15 6"></polyline>
              </svg>
            </button>
            <figure class="lightbox-figure">
              <div class="lightbox-image-container">
                <img
                  class="lightbox-image"
                  id="lightbox-image"
                  src={product.image_url}
                  alt={product.name}
                />
              </div>
              <figcaption class="lightbox-caption"><%= product.name %></figcaption>
            </figure>
            <button
              type="button"
              class="lightbox-nav lightbox-next"
              aria-label="Next image"
              phx-click={Phoenix.LiveView.JS.dispatch("pdp:next-image", to: "#pdp-lightbox")}
            >
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="9 18 15 12 9 6"></polyline>
              </svg>
            </button>
            <div class="lightbox-counter" id="lightbox-counter">1 / <%= length(gallery_images) %></div>
          </div>
        </dialog>
      </div>

      <!-- Product Info -->
      <div>
        <h1 class="text-3xl md:text-4xl font-bold mb-4" style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking);">
          <%= product.name %>
        </h1>

        <div class="flex items-center gap-4 mb-6">
          <%= if product.on_sale do %>
            <span class="text-3xl font-bold" style="color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));">
              £<%= product.price / 100 %>
            </span>
            <span class="text-xl line-through" style="color: var(--t-text-tertiary);">
              £<%= product.compare_at_price / 100 %>
            </span>
            <span class="px-2 py-1 text-sm font-bold text-white rounded" style="background-color: var(--t-sale-color);">
              SAVE <%= round((product.compare_at_price - product.price) / product.compare_at_price * 100) %>%
            </span>
          <% else %>
            <span class="text-3xl font-bold" style="color: var(--t-text-primary);">
              £<%= product.price / 100 %>
            </span>
          <% end %>
        </div>

        <!-- Variant Options -->
        <div class="mb-6">
          <label class="block font-semibold mb-2" style="color: var(--t-text-primary);">
            Size
          </label>
          <div class="flex gap-2">
            <%= for size <- ["S", "M", "L", "XL"] do %>
              <button
                class="px-4 py-2 font-medium transition-all"
                style="border: 2px solid var(--t-border-default); border-radius: var(--t-radius-button); color: var(--t-text-primary);"
              >
                <%= size %>
              </button>
            <% end %>
          </div>
        </div>

        <!-- Quantity -->
        <div class="mb-8">
          <label class="block font-semibold mb-2" style="color: var(--t-text-primary);">
            Quantity
          </label>
          <div class="flex items-center gap-4">
            <div class="flex items-center" style="border: 2px solid var(--t-border-default); border-radius: var(--t-radius-input);">
              <button class="px-4 py-2" style="color: var(--t-text-primary);">−</button>
              <span class="px-4 py-2 border-x-2" style="border-color: var(--t-border-default); color: var(--t-text-primary);">
                1
              </span>
              <button class="px-4 py-2" style="color: var(--t-text-primary);">+</button>
            </div>
            <%= if product.in_stock do %>
              <span class="text-sm" style="color: var(--t-text-tertiary);">In stock</span>
            <% else %>
              <span class="text-sm font-semibold" style="color: var(--t-sale-color);">Out of stock</span>
            <% end %>
          </div>
        </div>

        <!-- Add to Cart - Sticky on mobile -->
        <div class="sticky bottom-0 z-10 py-3 md:relative md:py-0 -mx-4 px-4 md:mx-0 md:px-0 border-t md:border-0 mb-4" style="background-color: var(--t-surface-base); border-color: var(--t-border-subtle);">
          <button
            phx-click={Phoenix.LiveView.JS.add_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.add_class("open", to: "#cart-drawer-overlay")}
            class="w-full px-6 py-4 text-lg font-semibold transition-all"
            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); cursor: pointer; border: none;"
          >
            Add to basket
          </button>
        </div>

        <!-- Features / Trust Badges -->
        <%= if @theme_settings.pdp_trust_badges do %>
          <div class="p-4 space-y-3" style="background-color: var(--t-surface-sunken); border-radius: var(--t-radius-card);">
            <div class="flex items-start gap-3">
              <svg class="w-5 h-5 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
              <div>
                <p class="font-semibold" style="color: var(--t-text-primary);">Free Delivery</p>
                <p class="text-sm" style="color: var(--t-text-secondary);">On orders over £40</p>
              </div>
            </div>
            <div class="flex items-start gap-3">
              <svg class="w-5 h-5 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              <div>
                <p class="font-semibold" style="color: var(--t-text-primary);">Easy Returns</p>
                <p class="text-sm" style="color: var(--t-text-secondary);">30-day return policy</p>
              </div>
            </div>
          </div>
        <% end %>

        <!-- Product Info Accordion -->
        <div class="mt-8 divide-y" style="border-top: 1px solid var(--t-border-subtle); border-bottom: 1px solid var(--t-border-subtle); border-color: var(--t-border-subtle);">
          <!-- Description - open by default -->
          <details open class="group">
            <summary class="flex justify-between items-center py-4 cursor-pointer list-none [&::-webkit-details-marker]:hidden" style="color: var(--t-text-primary);">
              <span class="font-semibold">Description</span>
              <svg class="w-5 h-5 transition-transform duration-200 group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
              </svg>
            </summary>
            <div class="pb-4 leading-relaxed" style="color: var(--t-text-secondary);">
              <p><%= product.description %>. Crafted with attention to detail and quality materials, this product is designed to last. Perfect for everyday use or special occasions.</p>
            </div>
          </details>

          <!-- Size Guide - collapsed by default -->
          <details class="group">
            <summary class="flex justify-between items-center py-4 cursor-pointer list-none [&::-webkit-details-marker]:hidden" style="color: var(--t-text-primary);">
              <span class="font-semibold">Size Guide</span>
              <svg class="w-5 h-5 transition-transform duration-200 group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
              </svg>
            </summary>
            <div class="pb-4" style="color: var(--t-text-secondary);">
              <table class="w-full text-sm">
                <thead>
                  <tr style="border-bottom: 1px solid var(--t-border-subtle);">
                    <th class="text-left py-2 font-semibold" style="color: var(--t-text-primary);">Size</th>
                    <th class="text-left py-2 font-semibold" style="color: var(--t-text-primary);">Chest (cm)</th>
                    <th class="text-left py-2 font-semibold" style="color: var(--t-text-primary);">Length (cm)</th>
                  </tr>
                </thead>
                <tbody>
                  <tr style="border-bottom: 1px solid var(--t-border-subtle);">
                    <td class="py-2">S</td>
                    <td class="py-2">86-91</td>
                    <td class="py-2">71</td>
                  </tr>
                  <tr style="border-bottom: 1px solid var(--t-border-subtle);">
                    <td class="py-2">M</td>
                    <td class="py-2">91-96</td>
                    <td class="py-2">73</td>
                  </tr>
                  <tr style="border-bottom: 1px solid var(--t-border-subtle);">
                    <td class="py-2">L</td>
                    <td class="py-2">96-101</td>
                    <td class="py-2">75</td>
                  </tr>
                  <tr>
                    <td class="py-2">XL</td>
                    <td class="py-2">101-106</td>
                    <td class="py-2">77</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </details>

          <!-- Shipping & Returns - collapsed by default -->
          <details class="group">
            <summary class="flex justify-between items-center py-4 cursor-pointer list-none [&::-webkit-details-marker]:hidden" style="color: var(--t-text-primary);">
              <span class="font-semibold">Shipping & Returns</span>
              <svg class="w-5 h-5 transition-transform duration-200 group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
              </svg>
            </summary>
            <div class="pb-4 space-y-3" style="color: var(--t-text-secondary);">
              <div>
                <p class="font-semibold mb-1" style="color: var(--t-text-primary);">Delivery</p>
                <p class="text-sm">Free UK delivery on orders over £40. Standard delivery 3-5 working days. Express delivery available at checkout.</p>
              </div>
              <div>
                <p class="font-semibold mb-1" style="color: var(--t-text-primary);">Returns</p>
                <p class="text-sm">We offer a 30-day return policy. Items must be unused and in original packaging. Please contact us to arrange a return.</p>
              </div>
            </div>
          </details>
        </div>
      </div>
    </div>

    <!-- Reviews Section - Accordion format, open by default for social proof -->
    <%= if @theme_settings.pdp_reviews do %>
      <details open class="pdp-reviews group" style="border-top: 1px solid var(--t-border-default);">
        <summary class="flex justify-between items-center py-6 cursor-pointer list-none [&::-webkit-details-marker]:hidden" style="color: var(--t-text-primary);">
          <div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
            <h2 class="text-2xl font-bold" style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight);">
              Customer reviews
            </h2>
            <div class="flex items-center gap-2">
              <div class="flex gap-0.5">
                <%= for _i <- 1..5 do %>
                  <svg class="w-4 h-4" viewBox="0 0 20 20" style="color: #f59e0b;">
                    <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" fill="currentColor"/>
                  </svg>
                <% end %>
              </div>
              <span class="text-sm" style="color: var(--t-text-secondary);">(24)</span>
            </div>
          </div>
          <svg class="w-5 h-5 transition-transform duration-200 group-open:rotate-180 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
          </svg>
        </summary>

        <div class="pb-8">
          <div class="space-y-6">
            <!-- Review 1 -->
            <article class="pb-6" style="border-bottom: 1px solid var(--t-border-subtle);">
              <div class="flex items-center justify-between mb-2">
                <div class="flex gap-0.5">
                  <%= for _i <- 1..5 do %>
                    <svg class="w-4 h-4" viewBox="0 0 20 20" style="color: #f59e0b;">
                      <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" fill="currentColor"/>
                    </svg>
                  <% end %>
                </div>
                <span class="text-xs" style="color: var(--t-text-tertiary);">2 weeks ago</span>
              </div>
              <h3 class="font-semibold mb-1" style="color: var(--t-text-primary);">Absolutely beautiful</h3>
              <p class="text-sm mb-3" style="color: var(--t-text-secondary); line-height: 1.6;">
                The quality exceeded my expectations. The colours are vibrant and the paper feels premium. It's now pride of place in my living room.
              </p>
              <div class="flex items-center gap-2">
                <span class="text-sm font-medium" style="color: var(--t-text-primary);">Sarah M.</span>
                <span class="text-xs px-2 py-0.5 rounded" style="background-color: var(--t-surface-sunken); color: var(--t-text-tertiary);">Verified purchase</span>
              </div>
            </article>

            <!-- Review 2 -->
            <article class="pb-6" style="border-bottom: 1px solid var(--t-border-subtle);">
              <div class="flex items-center justify-between mb-2">
                <div class="flex gap-0.5">
                  <%= for i <- 1..5 do %>
                    <svg class="w-4 h-4" viewBox="0 0 20 20" style={"color: #{if i <= 4, do: "#f59e0b", else: "var(--t-border-default)"};"}>
                      <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" fill="currentColor"/>
                    </svg>
                  <% end %>
                </div>
                <span class="text-xs" style="color: var(--t-text-tertiary);">1 month ago</span>
              </div>
              <h3 class="font-semibold mb-1" style="color: var(--t-text-primary);">Great gift</h3>
              <p class="text-sm mb-3" style="color: var(--t-text-secondary); line-height: 1.6;">
                Bought this as a gift and it arrived beautifully packaged. Fast shipping too. Would definitely order again.
              </p>
              <div class="flex items-center gap-2">
                <span class="text-sm font-medium" style="color: var(--t-text-primary);">James T.</span>
                <span class="text-xs px-2 py-0.5 rounded" style="background-color: var(--t-surface-sunken); color: var(--t-text-tertiary);">Verified purchase</span>
              </div>
            </article>
          </div>

          <button
            class="mt-6 px-6 py-2 text-sm font-medium transition-all mx-auto block"
            style="background-color: transparent; color: var(--t-text-primary); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-button);"
          >
            Load more reviews
          </button>
        </div>
      </details>
    <% end %>

    <!-- Related Products -->
    <%= if @theme_settings.pdp_related_products do %>
      <div class="py-12" style="border-top: 1px solid var(--t-border-default);">
        <h2 class="text-2xl font-bold mb-6" style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight);">
          You might also like
        </h2>

        <div class="product-grid grid gap-6 grid-cols-2 md:grid-cols-4">
          <%= for related_product <- Enum.slice(@preview_data.products, 1, 4) do %>
            <a
              href="#"
              phx-click="change_preview_page"
              phx-value-page="pdp"
              class="product-card group overflow-hidden cursor-pointer"
              style="background-color: var(--t-surface-raised); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-card);"
            >
              <div class="product-image-container aspect-square bg-gray-200 overflow-hidden relative">
                <img
                  src={related_product.image_url}
                  alt={related_product.name}
                  loading="lazy"
                  decoding="async"
                  class="product-image-primary w-full h-full object-cover transition-opacity duration-300"
                />
                <%= if @theme_settings.hover_image && related_product[:hover_image_url] do %>
                  <img
                    src={related_product.hover_image_url}
                    alt={related_product.name}
                    loading="lazy"
                    decoding="async"
                    class="product-image-hover w-full h-full object-cover"
                  />
                <% end %>
              </div>
              <div class="p-3">
                <h3 class="font-semibold text-sm mb-1" style="font-family: var(--t-font-heading); color: var(--t-text-primary);">
                  <%= related_product.name %>
                </h3>
                <%= if @theme_settings.show_prices do %>
                  <p class="font-bold" style="color: var(--t-text-primary);">
                    £<%= related_product.price / 100 %>
                  </p>
                <% end %>
              </div>
            </a>
          <% end %>
        </div>
      </div>
    <% end %>
  </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>
