<div class="shop-container min-h-screen" style="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="home" />

  <!-- Hero Section -->
  <main id="main-content">
  <section class="text-center" style="padding: var(--space-2xl) var(--space-lg); background-color: var(--t-surface-base);">
    <h1 class="text-3xl md:text-4xl mb-4" style="font-family: var(--t-font-heading); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking); color: var(--t-text-primary);">
      Original designs, printed on demand
    </h1>
    <p class="text-lg max-w-lg mx-auto mb-8" style="color: var(--t-text-secondary); line-height: 1.6;">
      From art prints to apparel – unique products created by independent artists and delivered straight to your door.
    </p>
    <button
      phx-click="change_preview_page"
      phx-value-page="collection"
      class="px-6 py-3 font-medium 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;"
    >
      Shop the collection
    </button>
  </section>

  <!-- Categories -->
  <section style="padding: var(--space-xl) var(--space-lg); background-color: var(--t-surface-base);">
    <nav class="grid grid-cols-3 gap-4 max-w-3xl mx-auto" aria-label="Product categories">
      <%= for category <- Enum.take(@preview_data.categories, 3) do %>
        <a href="#" phx-click="change_preview_page" phx-value-page="collection" class="flex flex-col items-center gap-3 p-4 rounded-lg transition-colors hover:bg-black/5" style="text-decoration: none; cursor: pointer;">
          <div
            class="w-24 h-24 rounded-full bg-gray-200 bg-cover bg-center transition-transform hover:scale-105"
            style={"background-image: url('#{category.image_url}');"}
          ></div>
          <span class="text-sm font-medium" style="font-family: var(--t-font-body); color: var(--t-text-primary);">
            <%= category.name %>
          </span>
        </a>
      <% end %>
    </nav>
  </section>

  <!-- Featured Products -->
  <section style="padding: var(--space-xl) var(--space-lg); background-color: var(--t-surface-sunken);">
    <h2 class="text-2xl mb-6" style="font-family: var(--t-font-heading); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking); color: var(--t-text-primary);">
      Featured products
    </h2>

    <div class={[
      "product-grid grid grid-cols-1 sm:grid-cols-2",
      case @theme_settings.grid_columns do
        "2" -> "lg:grid-cols-2"
        "3" -> "lg:grid-cols-3"
        "4" -> "lg:grid-cols-4"
        _ -> "lg:grid-cols-3"
      end
    ]}>
      <%= for product <- Enum.take(@preview_data.products, 4) do %>
        <div
          phx-click="change_preview_page"
          phx-value-page="pdp"
          class="product-card group overflow-hidden transition-all hover:-translate-y-1"
          style="background-color: var(--t-surface-raised); border-radius: var(--t-radius-card); cursor: pointer;"
        >
          <div class="product-image-container bg-gray-200 overflow-hidden relative">
            <%= if product[:is_new] do %>
              <span class="product-badge badge-new">New</span>
            <% end %>
            <%= if product.on_sale do %>
              <span class="product-badge badge-sale">Sale</span>
            <% end %>
            <img
              src={product.image_url}
              alt={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 && product[:hover_image_url] do %>
              <img
                src={product.hover_image_url}
                alt={product.name}
                loading="lazy"
                decoding="async"
                class="product-image-hover w-full h-full object-cover"
              />
            <% end %>
          </div>
          <div>
            <h3 class="text-sm font-medium mb-1" style="color: var(--t-text-primary);">
              <%= product.name %>
            </h3>
            <%= if @theme_settings.show_prices do %>
              <p class="text-sm" style="color: var(--t-text-secondary);">
                <%= if product.on_sale do %>
                  <span class="line-through mr-1" style="color: var(--t-text-tertiary);">£<%= product.compare_at_price / 100 %></span>
                <% end %>
                £<%= product.price / 100 %>
              </p>
            <% end %>
            <p class="text-xs mt-1" style="color: var(--t-text-tertiary);">
              Free delivery over £40
            </p>
          </div>
        </div>
      <% end %>
    </div>

    <div class="text-center mt-8">
      <button
        phx-click="change_preview_page"
        phx-value-page="collection"
        class="px-6 py-3 font-medium transition-all"
        style="background-color: transparent; color: var(--t-text-primary); border: 1px solid var(--t-text-primary); border-radius: var(--t-radius-button); cursor: pointer;"
      >
        View all products
      </button>
    </div>
  </section>

  <!-- About Section -->
  <section class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center" style="padding: var(--space-2xl) var(--space-lg); background-color: var(--t-surface-base);">
    <div
      class="h-72 rounded-lg bg-cover bg-center"
      style="background-image: url('/mockups/mountain-sunrise-print-3.jpg'); border-radius: var(--t-radius-image);"
    ></div>
    <div>
      <h2 class="text-2xl mb-4" style="font-family: var(--t-font-heading); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking); color: var(--t-text-primary);">
        Made with passion, printed with care
      </h2>
      <p class="text-base mb-4" style="color: var(--t-text-secondary); line-height: 1.7;">
        Every design starts with an idea. We work with quality print partners to bring those ideas to life on premium products – from gallery-quality art prints to everyday essentials.
      </p>
      <a
        href="#"
        phx-click="change_preview_page"
        phx-value-page="about"
        class="text-sm font-medium transition-colors"
        style="color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); text-decoration: none; cursor: pointer;"
      >
        Learn more about the studio →
      </a>
    </div>
  </section>
  </main>

  <!-- Footer -->
  <SimpleshopThemeWeb.ThemeLive.PreviewPages.shop_footer theme_settings={@theme_settings} />

  <!-- Cart Drawer -->
  <SimpleshopThemeWeb.ThemeLive.PreviewPages.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} />

  <!-- Search Modal -->
  <SimpleshopThemeWeb.ThemeLive.PreviewPages.search_modal />
</div>
