berrypod/lib/simpleshop_theme_web/components/shop_components.ex

defmodule SimpleshopThemeWeb.ShopComponents do
  @moduledoc """
  Provides shop/storefront UI components.

  These components are shared between the theme preview system and
  the public storefront pages. They render using CSS custom properties
  defined by the theme settings.
  """
  use Phoenix.Component

  @doc """
  Renders the announcement bar.

  The bar displays promotional messaging at the top of the page.
  It uses CSS custom properties for theming.

  ## Attributes

  * `theme_settings` - Required. The theme settings map.
  * `message` - Optional. The announcement message to display.
    Defaults to "Free delivery on orders over £40".

  ## Examples

      <.announcement_bar theme_settings={@theme_settings} />
      <.announcement_bar theme_settings={@theme_settings} message="20% off this weekend!" />
  """
  attr :theme_settings, :map, required: true
  attr :message, :string, default: "Free delivery on orders over £40"

  def announcement_bar(assigns) do
    ~H"""
    <div
      class="announcement-bar"
      style="background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); text-align: center; padding: 0.5rem 1rem; font-size: var(--t-text-small);"
    >
      <p style="margin: 0;">{@message}</p>
    </div>
    """
  end

  @doc """
  Renders the skip link for keyboard navigation accessibility.

  This is a standard accessibility pattern that allows keyboard users
  to skip directly to the main content.
  """
  def skip_link(assigns) do
    ~H"""
    <a href="#main-content" class="skip-link">
      Skip to main content
    </a>
    """
  end

  @doc """
  Renders the search modal overlay.

  This is a modal dialog for searching products. Currently provides
  the UI shell; search functionality will be added later.

  ## Attributes

  * `hint_text` - Optional. Hint text shown below the search input.
    Defaults to nil (no hint shown).

  ## Examples

      <.search_modal />
      <.search_modal hint_text="Try searching for \"mountain\" or \"forest\"" />
  """
  attr :hint_text, :string, default: nil

  def search_modal(assigns) do
    ~H"""
    <div
      id="search-modal"
      class="search-modal"
      style="position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1001; display: none; align-items: flex-start; justify-content: center; padding-top: 10vh;"
      phx-click={Phoenix.LiveView.JS.hide(to: "#search-modal")}
    >
      <div
        class="search-modal-content w-full max-w-xl mx-4"
        style="background: var(--t-surface-raised); border-radius: var(--t-radius-card); overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);"
        phx-click-away={Phoenix.LiveView.JS.hide(to: "#search-modal")}
      >
        <div
          class="flex items-center gap-3 p-4"
          style="border-bottom: 1px solid var(--t-border-default);"
        >
          <svg class="w-5 h-5 flex-shrink-0" style="color: var(--t-text-tertiary);" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="11" cy="11" r="8"></circle>
            <path d="M21 21l-4.35-4.35"></path>
          </svg>
          <input
            type="text"
            id="search-input"
            class="flex-1 text-lg bg-transparent border-none outline-none"
            style="font-family: var(--t-font-body); color: var(--t-text-primary);"
            placeholder="Search products..."
            phx-click={Phoenix.LiveView.JS.dispatch("stop-propagation")}
          />
          <button
            type="button"
            class="w-8 h-8 flex items-center justify-center transition-all"
            style="color: var(--t-text-tertiary); background: none; border: none; cursor: pointer; border-radius: var(--t-radius-button);"
            phx-click={Phoenix.LiveView.JS.hide(to: "#search-modal")}
            aria-label="Close search"
          >
            <svg class="w-5 h-5" 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>
        </div>
        <%= if @hint_text do %>
          <div class="p-6" style="color: var(--t-text-tertiary);">
            <p class="text-sm">{@hint_text}</p>
          </div>
        <% end %>
      </div>
    </div>
    """
  end

  @doc """
  Renders the shop footer with newsletter signup and links.

  ## Attributes

  * `theme_settings` - Required. The theme settings map containing site_name.
  * `mode` - Optional. Either `:live` (default) for real navigation or
    `:preview` for theme preview mode with phx-click handlers.

  ## Examples

      <.shop_footer theme_settings={@theme_settings} />
      <.shop_footer theme_settings={@theme_settings} mode={:preview} />
  """
  attr :theme_settings, :map, required: true
  attr :mode, :atom, default: :live

  def shop_footer(assigns) do
    assigns = assign(assigns, :current_year, Date.utc_today().year)

    ~H"""
    <footer style="background-color: var(--t-surface-raised); border-top: 1px solid var(--t-border-default);">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
          <!-- Newsletter -->
          <div>
            <h3 class="text-xl font-bold mb-2" style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight);">
              Stay in touch
            </h3>
            <p class="mb-4 text-sm" style="color: var(--t-text-secondary);">
              Get 10% off your first order and be the first to know about new designs.
            </p>
            <form class="flex flex-wrap gap-2">
              <input
                type="email"
                placeholder="your@email.com"
                class="flex-1 min-w-0 px-4 py-2 text-sm"
                style="background-color: var(--t-surface-base); color: var(--t-text-primary); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-input); min-width: 150px;"
              />
              <button
                type="submit"
                class="px-6 py-2 font-medium transition-all text-sm whitespace-nowrap"
                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);"
              >
                Subscribe
              </button>
            </form>
          </div>

          <!-- Links -->
          <div class="grid grid-cols-2 gap-8">
            <div>
              <h4 class="font-semibold mb-4 text-sm" style="font-family: var(--t-font-heading); color: var(--t-text-primary);">
                Shop
              </h4>
              <ul class="space-y-2 text-sm">
                <%= if @mode == :preview do %>
                  <li><a href="#" phx-click="change_preview_page" phx-value-page="collection" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary); cursor: pointer;">All products</a></li>
                  <li><a href="#" phx-click="change_preview_page" phx-value-page="collection" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary); cursor: pointer;">New arrivals</a></li>
                  <li><a href="#" phx-click="change_preview_page" phx-value-page="collection" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary); cursor: pointer;">Best sellers</a></li>
                <% else %>
                  <li><a href="/products" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary);">All products</a></li>
                  <li><a href="/products?sort=newest" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary);">New arrivals</a></li>
                  <li><a href="/products?sort=popular" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary);">Best sellers</a></li>
                <% end %>
              </ul>
            </div>
            <div>
              <h4 class="font-semibold mb-4 text-sm" style="font-family: var(--t-font-heading); color: var(--t-text-primary);">
                Help
              </h4>
              <ul class="space-y-2 text-sm">
                <%= if @mode == :preview do %>
                  <li><a href="#" phx-click="change_preview_page" phx-value-page="about" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary); cursor: pointer;">Delivery</a></li>
                  <li><a href="#" phx-click="change_preview_page" phx-value-page="about" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary); cursor: pointer;">Returns</a></li>
                  <li><a href="#" phx-click="change_preview_page" phx-value-page="contact" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary); cursor: pointer;">Contact</a></li>
                <% else %>
                  <li><a href="/delivery" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary);">Delivery</a></li>
                  <li><a href="/returns" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary);">Returns</a></li>
                  <li><a href="/contact" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary);">Contact</a></li>
                <% end %>
              </ul>
            </div>
          </div>
        </div>

        <!-- Bottom Bar -->
        <div class="mt-12 pt-8 flex flex-col md:flex-row justify-between items-center gap-4" style="border-top: 1px solid var(--t-border-subtle);">
          <p class="text-xs" style="color: var(--t-text-tertiary);">
            © {@current_year} {@theme_settings.site_name}
          </p>
          <div class="flex gap-2">
            <a
              href="#"
              class="social-link w-9 h-9 flex items-center justify-center transition-all"
              style="color: var(--t-text-secondary); border-radius: var(--t-radius-button);"
              aria-label="Instagram"
            >
              <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
              </svg>
            </a>
            <a
              href="#"
              class="social-link w-9 h-9 flex items-center justify-center transition-all"
              style="color: var(--t-text-secondary); border-radius: var(--t-radius-button);"
              aria-label="Pinterest"
            >
              <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="10"></circle>
                <path d="M8 12c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4"></path>
                <line x1="12" y1="16" x2="9" y2="21"></line>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </footer>
    """
  end

  @doc """
  Renders the shop header with logo, navigation, and actions.

  ## Attributes

  * `theme_settings` - Required. The theme settings map.
  * `logo_image` - Optional. The logo image struct (with id, is_svg fields).
  * `header_image` - Optional. The header background image struct.
  * `active_page` - Optional. Current page for nav highlighting.
  * `mode` - Optional. Either `:live` (default) or `:preview`.
  * `cart_count` - Optional. Number of items in cart. Defaults to 0.

  ## Examples

      <.shop_header theme_settings={@theme_settings} />
      <.shop_header theme_settings={@theme_settings} mode={:preview} cart_count={2} />
  """
  attr :theme_settings, :map, required: true
  attr :logo_image, :map, default: nil
  attr :header_image, :map, default: nil
  attr :active_page, :string, default: nil
  attr :mode, :atom, default: :live
  attr :cart_count, :integer, default: 0

  def shop_header(assigns) do
    ~H"""
    <header
      class="shop-header"
      style="background-color: var(--t-surface-raised); border-bottom: 1px solid var(--t-border-default); padding: 1rem 2rem; display: flex; align-items: center;"
    >
      <%= if @theme_settings.header_background_enabled && @header_image do %>
        <div style={header_background_style(@theme_settings, @header_image)} />
      <% end %>

      <div class="shop-logo" style="display: flex; align-items: center; position: relative; z-index: 1;">
        <%= case @theme_settings.logo_mode do %>
          <% "text-only" -> %>
            <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
              <%= @theme_settings.site_name %>
            </span>

          <% "logo-text" -> %>
            <%= if @logo_image do %>
              <img
                src={logo_url(@logo_image, @theme_settings)}
                alt={@theme_settings.site_name}
                style={"height: #{@theme_settings.logo_size}px; width: auto; margin-right: 0.5rem;"}
              />
            <% end %>
            <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
              <%= @theme_settings.site_name %>
            </span>

          <% "logo-only" -> %>
            <%= if @logo_image do %>
              <img
                src={logo_url(@logo_image, @theme_settings)}
                alt={@theme_settings.site_name}
                style={"height: #{@theme_settings.logo_size}px; width: auto;"}
              />
            <% else %>
              <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
                <%= @theme_settings.site_name %>
              </span>
            <% end %>

          <% _ -> %>
            <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
              <%= @theme_settings.site_name %>
            </span>
        <% end %>
      </div>

      <nav class="shop-nav hidden md:flex" style="gap: 1.5rem; position: relative; z-index: 1;">
        <%= if @mode == :preview do %>
          <a href="#" phx-click="change_preview_page" phx-value-page="home" aria-current={if @active_page == "home", do: "page"} style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;">Home</a>
          <a href="#" phx-click="change_preview_page" phx-value-page="collection" aria-current={if @active_page in ["collection", "pdp"], do: "page"} style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;">Shop</a>
          <a href="#" phx-click="change_preview_page" phx-value-page="about" aria-current={if @active_page == "about", do: "page"} style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;">About</a>
          <a href="#" phx-click="change_preview_page" phx-value-page="contact" aria-current={if @active_page == "contact", do: "page"} style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;">Contact</a>
        <% else %>
          <a href="/" aria-current={if @active_page == "home", do: "page"} style="color: var(--t-text-secondary); text-decoration: none;">Home</a>
          <a href="/products" aria-current={if @active_page in ["collection", "pdp"], do: "page"} style="color: var(--t-text-secondary); text-decoration: none;">Shop</a>
          <a href="/about" aria-current={if @active_page == "about", do: "page"} style="color: var(--t-text-secondary); text-decoration: none;">About</a>
          <a href="/contact" aria-current={if @active_page == "contact", do: "page"} style="color: var(--t-text-secondary); text-decoration: none;">Contact</a>
        <% end %>
      </nav>

      <div class="shop-actions flex items-center gap-1" style="position: relative; z-index: 1;">
        <button
          type="button"
          class="header-icon-btn w-9 h-9 flex items-center justify-center transition-all"
          style="color: var(--t-text-secondary); background: none; border: none; cursor: pointer; border-radius: var(--t-radius-button);"
          phx-click={Phoenix.LiveView.JS.show(to: "#search-modal", display: "flex") |> Phoenix.LiveView.JS.focus(to: "#search-input")}
          aria-label="Search"
        >
          <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="11" cy="11" r="8"></circle>
            <path d="M21 21l-4.35-4.35"></path>
          </svg>
        </button>
        <button
          type="button"
          class="header-icon-btn w-9 h-9 flex items-center justify-center transition-all relative"
          style="color: var(--t-text-secondary); background: none; border: none; cursor: pointer; border-radius: var(--t-radius-button);"
          phx-click={Phoenix.LiveView.JS.add_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.add_class("open", to: "#cart-drawer-overlay")}
          aria-label="Cart"
        >
          <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"></path>
            <line x1="3" y1="6" x2="21" y2="6"></line>
            <path d="M16 10a4 4 0 01-8 0"></path>
          </svg>
          <%= if @cart_count > 0 do %>
            <span class="cart-count" style="position: absolute; top: -4px; right: -4px; background: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); font-size: var(--t-text-caption); font-weight: 600; min-width: 18px; height: 18px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; padding: 0 4px;">{@cart_count}</span>
          <% end %>
          <span class="sr-only">Cart ({@cart_count})</span>
        </button>
      </div>
    </header>
    """
  end

  defp logo_url(logo_image, %{logo_recolor: true, logo_color: color}) when logo_image.is_svg do
    clean_color = String.trim_leading(color, "#")
    "/images/#{logo_image.id}/recolored/#{clean_color}"
  end

  defp logo_url(logo_image, _), do: "/images/#{logo_image.id}"

  defp header_background_style(settings, header_image) do
    "position: absolute; top: 0; left: 0; right: 0; bottom: 0; " <>
      "background-image: url('/images/#{header_image.id}'); " <>
      "background-size: #{settings.header_zoom}%; " <>
      "background-position: #{settings.header_position_x}% #{settings.header_position_y}%; " <>
      "background-repeat: no-repeat; z-index: 0;"
  end

  @doc """
  Renders the cart drawer (floating sidebar).

  The drawer slides in from the right when opened. It displays cart items
  and checkout options.

  ## Attributes

  * `cart_items` - List of cart items to display. Each item should have
    `image`, `name`, `variant`, and `price` keys. Default: []
  * `subtotal` - The subtotal to display. Default: nil (shows "£0.00")
  * `mode` - Either `:live` (default) for real stores or `:preview` for theme editor.
    In preview mode, "View basket" navigates via LiveView JS commands.

  ## Examples

      <.cart_drawer cart_items={@cart.items} subtotal={@cart.subtotal} />
      <.cart_drawer cart_items={demo_items} subtotal="£72.00" mode={:preview} />
  """
  attr :cart_items, :list, default: []
  attr :subtotal, :string, default: nil
  attr :mode, :atom, default: :live

  def cart_drawer(assigns) do
    assigns = assign_new(assigns, :display_subtotal, fn ->
      assigns.subtotal || "£0.00"
    end)

    ~H"""
    <!-- Cart Drawer -->
    <div
      id="cart-drawer"
      class="cart-drawer"
      style="position: fixed; top: 0; right: -400px; width: 400px; max-width: 90vw; height: 100vh; background: var(--t-surface-raised); z-index: 1001; display: flex; flex-direction: column; transition: right 0.3s ease; box-shadow: -4px 0 20px rgba(0,0,0,0.15);"
    >
      <div class="cart-drawer-header" style="display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--t-border-default);">
        <h2 style="font-family: var(--t-font-heading); font-weight: var(--t-heading-weight); font-size: var(--t-text-large); color: var(--t-text-primary); margin: 0;">Your basket</h2>
        <button
          type="button"
          class="cart-drawer-close"
          style="background: none; border: none; padding: 0.5rem; cursor: pointer; color: var(--t-text-secondary);"
          phx-click={Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay")}
          aria-label="Close cart"
        >
          <svg class="w-5 h-5" 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>
      </div>

      <div class="cart-drawer-items" style="flex: 1; overflow-y: auto; padding: 1rem;">
        <%= for item <- @cart_items do %>
          <div class="cart-drawer-item" style="display: flex; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--t-border-default);">
            <div class="cart-drawer-item-image" style={"width: 60px; height: 60px; border-radius: var(--t-radius-card); background-size: cover; background-position: center; background-image: url('#{item.image}'); flex-shrink: 0;"}></div>
            <div class="cart-drawer-item-details" style="flex: 1;">
              <h3 style="font-family: var(--t-font-body); font-size: var(--t-text-small); font-weight: 500; color: var(--t-text-primary); margin: 0 0 2px;">
                <%= item.name %>
              </h3>
              <p style="font-family: var(--t-font-body); font-size: var(--t-text-caption); color: var(--t-text-tertiary); margin: 0;">
                <%= item.variant %>
              </p>
              <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 4px;">
                <p class="cart-drawer-item-price" style="color: var(--t-text-primary); font-weight: 500; font-size: var(--t-text-small); margin: 0;">
                  <%= item.price %>
                </p>
                <button type="button" style="background: none; border: none; padding: 0; cursor: pointer; font-family: var(--t-font-body); font-size: var(--t-text-caption); color: var(--t-text-tertiary); text-decoration: underline;">
                  Remove
                </button>
              </div>
            </div>
          </div>
        <% end %>
      </div>

      <div class="cart-drawer-footer" style="padding: 1rem 1.5rem; border-top: 1px solid var(--t-border-default); background: var(--t-surface-sunken);">
        <div style="display: flex; justify-content: space-between; font-family: var(--t-font-body); font-size: var(--t-text-small); color: var(--t-text-secondary); margin-bottom: 0.5rem;">
          <span>Delivery</span>
          <span>Calculated at checkout</span>
        </div>
        <div class="cart-drawer-total" style="display: flex; justify-content: space-between; font-family: var(--t-font-body); font-size: var(--t-text-base); font-weight: 600; color: var(--t-text-primary); margin-bottom: 1rem;">
          <span>Subtotal</span>
          <span><%= @display_subtotal %></span>
        </div>
        <button
          type="submit"
          class="cart-drawer-checkout w-full mb-2"
          style="width: 100%; padding: 0.75rem 1.5rem; font-weight: 600; transition-all; background: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); border-radius: var(--t-radius-button); border: none; cursor: pointer; font-family: var(--t-font-body);"
        >
          Checkout
        </button>
        <%= if @mode == :preview do %>
          <a
            href="#"
            phx-click={Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay") |> Phoenix.LiveView.JS.push("change_preview_page", value: %{page: "cart"})}
            class="cart-drawer-link"
            style="display: block; text-align: center; font-family: var(--t-font-body); font-size: var(--t-text-small); color: var(--t-text-secondary); text-decoration: underline; cursor: pointer;"
          >
            View basket
          </a>
        <% else %>
          <a
            href="/cart"
            phx-click={Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay")}
            class="cart-drawer-link"
            style="display: block; text-align: center; font-family: var(--t-font-body); font-size: var(--t-text-small); color: var(--t-text-secondary); text-decoration: underline; cursor: pointer;"
          >
            View basket
          </a>
        <% end %>
      </div>
    </div>

    <!-- Cart Drawer Overlay -->
    <div
      id="cart-drawer-overlay"
      class="cart-drawer-overlay"
      style="position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;"
      phx-click={Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay")}
    >
    </div>

    <style>
      .cart-drawer.open {
        right: 0 !important;
      }
      .cart-drawer-overlay.open {
        opacity: 1 !important;
        visibility: visible !important;
      }
    </style>
    """
  end

  @doc """
  Renders a product card with configurable variants.

  ## Attributes

  * `product` - Required. The product map with `name`, `image_url`, `price`, etc.
  * `theme_settings` - Required. The theme settings map.
  * `mode` - Either `:live` (default) or `:preview`.
  * `variant` - The visual variant:
    - `:default` - Collection page style with border, category, full details
    - `:featured` - Home page style with hover lift, no border
    - `:compact` - PDP related products with aspect-square, minimal info
    - `:minimal` - Error 404 style, smallest, not clickable
  * `show_category` - Show category label. Defaults based on variant.
  * `show_badges` - Show product badges. Defaults based on variant.
  * `show_delivery_text` - Show "Free delivery" text. Defaults based on variant.
  * `clickable` - Whether the card navigates. Defaults based on variant.

  ## Examples

      <.product_card product={product} theme_settings={@theme_settings} />
      <.product_card product={product} theme_settings={@theme_settings} variant={:featured} mode={:preview} />
  """
  attr :product, :map, required: true
  attr :theme_settings, :map, required: true
  attr :mode, :atom, default: :live
  attr :variant, :atom, default: :default
  attr :show_category, :boolean, default: nil
  attr :show_badges, :boolean, default: nil
  attr :show_delivery_text, :boolean, default: nil
  attr :clickable, :boolean, default: nil

  def product_card(assigns) do
    # Apply variant defaults for nil values
    defaults = variant_defaults(assigns.variant)

    assigns =
      assigns
      |> assign_new(:show_category_resolved, fn ->
        if assigns.show_category == nil, do: defaults.show_category, else: assigns.show_category
      end)
      |> assign_new(:show_badges_resolved, fn ->
        if assigns.show_badges == nil, do: defaults.show_badges, else: assigns.show_badges
      end)
      |> assign_new(:show_delivery_text_resolved, fn ->
        if assigns.show_delivery_text == nil,
          do: defaults.show_delivery_text,
          else: assigns.show_delivery_text
      end)
      |> assign_new(:clickable_resolved, fn ->
        if assigns.clickable == nil, do: defaults.clickable, else: assigns.clickable
      end)

    ~H"""
    <%= if @clickable_resolved do %>
      <%= if @mode == :preview do %>
        <a
          href="#"
          phx-click="change_preview_page"
          phx-value-page="pdp"
          class={card_classes(@variant)}
          style={card_style(@variant)}
        >
          <.product_card_inner
            product={@product}
            theme_settings={@theme_settings}
            variant={@variant}
            show_category={@show_category_resolved}
            show_badges={@show_badges_resolved}
            show_delivery_text={@show_delivery_text_resolved}
          />
        </a>
      <% else %>
        <a
          href={"/products/#{@product[:slug] || @product[:id]}"}
          class={card_classes(@variant)}
          style={card_style(@variant)}
        >
          <.product_card_inner
            product={@product}
            theme_settings={@theme_settings}
            variant={@variant}
            show_category={@show_category_resolved}
            show_badges={@show_badges_resolved}
            show_delivery_text={@show_delivery_text_resolved}
          />
        </a>
      <% end %>
    <% else %>
      <div
        class={card_classes(@variant)}
        style={card_style(@variant)}
      >
        <.product_card_inner
          product={@product}
          theme_settings={@theme_settings}
          variant={@variant}
          show_category={@show_category_resolved}
          show_badges={@show_badges_resolved}
          show_delivery_text={@show_delivery_text_resolved}
        />
      </div>
    <% end %>
    """
  end

  attr :product, :map, required: true
  attr :theme_settings, :map, required: true
  attr :variant, :atom, required: true
  attr :show_category, :boolean, required: true
  attr :show_badges, :boolean, required: true
  attr :show_delivery_text, :boolean, required: true

  defp product_card_inner(assigns) do
    ~H"""
    <div class={image_container_classes(@variant)}>
      <%= if @show_badges do %>
        <.product_badge product={@product} />
      <% end %>
      <img
        src={@product.image_url}
        alt={@product.name}
        loading={if @variant == :minimal, do: nil, else: "lazy"}
        decoding={if @variant == :minimal, do: nil, else: "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={if @variant == :minimal, do: nil, else: "lazy"}
          decoding={if @variant == :minimal, do: nil, else: "async"}
          class="product-image-hover w-full h-full object-cover"
        />
      <% end %>
    </div>
    <div class={content_padding_class(@variant)}>
      <%= if @show_category && @product[:category] do %>
        <p class="text-xs mb-1" style="color: var(--t-text-tertiary);">
          <%= @product.category %>
        </p>
      <% end %>
      <h3 class={title_classes(@variant)} style={title_style(@variant)}>
        <%= @product.name %>
      </h3>
      <%= if @theme_settings.show_prices do %>
        <.product_price product={@product} variant={@variant} />
      <% end %>
      <%= if @show_delivery_text do %>
        <p class="text-xs mt-1" style="color: var(--t-text-tertiary);">
          Free delivery over £40
        </p>
      <% end %>
    </div>
    """
  end

  attr :product, :map, required: true

  defp product_badge(assigns) do
    ~H"""
    <%= cond do %>
      <% Map.get(@product, :in_stock, true) == false -> %>
        <span class="product-badge badge-sold-out">Sold out</span>
      <% @product[:is_new] -> %>
        <span class="product-badge badge-new">New</span>
      <% @product[:on_sale] -> %>
        <span class="product-badge badge-sale">Sale</span>
      <% true -> %>
    <% end %>
    """
  end

  attr :product, :map, required: true
  attr :variant, :atom, required: true

  defp product_price(assigns) do
    ~H"""
    <%= case @variant do %>
      <% :default -> %>
        <div>
          <%= if @product.on_sale do %>
            <span class="text-lg font-bold" style="color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));">
              £<%= @product.price / 100 %>
            </span>
            <span class="text-sm line-through ml-2" style="color: var(--t-text-tertiary);">
              £<%= @product.compare_at_price / 100 %>
            </span>
          <% else %>
            <span class="text-lg font-bold" style="color: var(--t-text-primary);">
              £<%= @product.price / 100 %>
            </span>
          <% end %>
        </div>
      <% :featured -> %>
        <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>
      <% :compact -> %>
        <p class="font-bold" style="color: var(--t-text-primary);">
          £<%= @product.price / 100 %>
        </p>
      <% :minimal -> %>
        <p class="text-xs" style="color: var(--t-text-secondary);">
          £<%= @product.price / 100 %>
        </p>
    <% end %>
    """
  end

  defp variant_defaults(:default),
    do: %{show_category: true, show_badges: true, show_delivery_text: true, clickable: true}

  defp variant_defaults(:featured),
    do: %{show_category: false, show_badges: true, show_delivery_text: true, clickable: true}

  defp variant_defaults(:compact),
    do: %{show_category: false, show_badges: false, show_delivery_text: false, clickable: true}

  defp variant_defaults(:minimal),
    do: %{show_category: false, show_badges: false, show_delivery_text: false, clickable: false}

  defp card_classes(:default), do: "product-card group overflow-hidden transition-all"
  defp card_classes(:featured), do: "product-card group overflow-hidden transition-all hover:-translate-y-1"
  defp card_classes(:compact), do: "product-card group overflow-hidden cursor-pointer"
  defp card_classes(:minimal), do: "product-card group overflow-hidden"

  defp card_style(:default),
    do: "background-color: var(--t-surface-raised); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-card); cursor: pointer;"

  defp card_style(:featured),
    do: "background-color: var(--t-surface-raised); border-radius: var(--t-radius-card); cursor: pointer;"

  defp card_style(:compact),
    do: "background-color: var(--t-surface-raised); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-card);"

  defp card_style(:minimal),
    do: "background-color: var(--t-surface-raised); border: 1px solid var(--t-border-subtle); border-radius: var(--t-radius-card);"

  defp image_container_classes(:compact),
    do: "product-image-container aspect-square bg-gray-200 overflow-hidden relative"

  defp image_container_classes(:minimal),
    do: "product-image-container aspect-square bg-gray-200 overflow-hidden relative"

  defp image_container_classes(_),
    do: "product-image-container bg-gray-200 overflow-hidden relative"

  defp content_padding_class(:compact), do: "p-3"
  defp content_padding_class(:minimal), do: "p-2"
  defp content_padding_class(_), do: ""

  defp title_classes(:default), do: "font-semibold mb-2"
  defp title_classes(:featured), do: "text-sm font-medium mb-1"
  defp title_classes(:compact), do: "font-semibold text-sm mb-1"
  defp title_classes(:minimal), do: "text-xs font-semibold truncate"

  defp title_style(:default), do: "font-family: var(--t-font-heading); color: var(--t-text-primary);"
  defp title_style(:featured), do: "color: var(--t-text-primary);"
  defp title_style(:compact), do: "font-family: var(--t-font-heading); color: var(--t-text-primary);"
  defp title_style(:minimal), do: "color: var(--t-text-primary);"

  @doc """
  Renders a responsive product grid container.

  This component wraps product cards in a responsive grid layout. It supports
  theme-based column settings or fixed column layouts for specific use cases.

  ## Attributes

  * `theme_settings` - Optional. When provided, uses `grid_columns` setting for lg breakpoint.
  * `columns` - Optional. Fixed column count for lg breakpoint (overrides theme_settings).
    Use `:fixed_4` for a fixed 2/4 column layout (error page, related products).
  * `gap` - Optional. Gap size. Defaults to standard gap.
  * `class` - Optional. Additional CSS classes to add.

  ## Slots

  * `inner_block` - Required. The product cards to render inside the grid.

  ## Examples

      <.product_grid theme_settings={@theme_settings}>
        <%= for product <- @products do %>
          <.product_card product={product} theme_settings={@theme_settings} />
        <% end %>
      </.product_grid>

      <.product_grid columns={:fixed_4} gap="gap-6">
        ...
      </.product_grid>
  """
  attr :theme_settings, :map, default: nil
  attr :columns, :atom, default: nil
  attr :gap, :string, default: nil
  attr :class, :string, default: nil

  slot :inner_block, required: true

  def product_grid(assigns) do
    ~H"""
    <div class={grid_classes(@theme_settings, @columns, @gap, @class)}>
      <%= render_slot(@inner_block) %>
    </div>
    """
  end

  defp grid_classes(theme_settings, columns, gap, extra_class) do
    base = "product-grid grid"

    cols =
      cond do
        columns == :fixed_4 ->
          "grid-cols-2 md:grid-cols-4"

        theme_settings != nil ->
          responsive_cols = "grid-cols-1 sm:grid-cols-2"

          lg_cols =
            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

          "#{responsive_cols} #{lg_cols}"

        true ->
          "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
      end

    gap_class = gap || ""

    [base, cols, gap_class, extra_class]
    |> Enum.reject(&is_nil/1)
    |> Enum.reject(&(&1 == ""))
    |> Enum.join(" ")
  end

  @doc """
  Renders a centered hero section with title, description, and optional CTA.

  ## Attributes

  * `title` - Required. The main heading text.
  * `description` - Required. The description paragraph text.
  * `background` - Background style. Either `:base` (default) or `:sunken`.
  * `cta_text` - Optional. Text for the CTA button.
  * `cta_page` - Optional. Page to navigate to on click (for preview mode).
  * `mode` - Either `:live` (default) or `:preview`.

  ## Examples

      <.hero_section
        title="Original designs, printed on demand"
        description="From art prints to apparel – unique products created by independent artists."
        cta_text="Shop the collection"
        cta_page="collection"
        mode={:preview}
      />

      <.hero_section
        title="About the studio"
        description="Nature photography, printed with care"
        background={:sunken}
      />
  """
  attr :title, :string, required: true
  attr :description, :string, required: true
  attr :background, :atom, default: :base
  attr :cta_text, :string, default: nil
  attr :cta_page, :string, default: nil
  attr :cta_href, :string, default: nil
  attr :mode, :atom, default: :live

  def hero_section(assigns) do
    ~H"""
    <section
      class="text-center"
      style={"padding: var(--space-2xl) var(--space-lg); background-color: var(--t-surface-#{@background});"}
    >
      <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);"
      >
        <%= @title %>
      </h1>
      <p class="text-lg max-w-lg mx-auto mb-8" style="color: var(--t-text-secondary); line-height: 1.6;">
        <%= @description %>
      </p>
      <%= if @cta_text do %>
        <%= if @mode == :preview do %>
          <button
            phx-click="change_preview_page"
            phx-value-page={@cta_page}
            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;"
          >
            <%= @cta_text %>
          </button>
        <% else %>
          <a
            href={@cta_href || "/products"}
            class="inline-block 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); text-decoration: none;"
          >
            <%= @cta_text %>
          </a>
        <% end %>
      <% end %>
    </section>
    """
  end
end