featured_categories_component.ex

# /lib/ecommercelixir_web/components/home/featured_categories_component.ex

defmodule EcommercelixirWeb.Components.Home.FeaturedCategoriesComponent do
  use EcommercelixirWeb, :html

  # Define the featured_categories component
  def featured_categories(assigns) do
    # Ensure assigns is a map
    assigns = if is_list(assigns), do: Map.new(assigns), else: assigns

    ~H"""
    <!-- Modern Featured Categories with Icons -->
    <section class="py-16 bg-gradient-to-b from-gray-50 to-white">
      <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row md:items-end justify-between mb-10">
          <div class={"#{if @locale == "ar", do: "text-right", else: "text-left"}"}>
            <div class="inline-block px-3 py-1 bg-blue-100 text-blue-600 font-medium text-sm rounded-full mb-3">
              <%= if @locale == "ar", do: "الفئات الشعبية", else: "Popular Categories" %>
            </div>
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-3">
              <%= if @locale == "ar", do: "اكتشف منتجاتنا", else: "Discover Our Products" %>
            </h2>
            <p class="text-gray-600 max-w-2xl">
              <%= if @locale == "ar", do: "اختر من بين مجموعتنا الواسعة من قطع غيار السيارات ومستلزماتها عالية الجودة", else: "Choose from our wide range of high-quality auto parts and accessories" %>
            </p>
          </div>
          <a href={~p"/#{@locale}/categories"} class="mt-4 md:mt-0 text-blue-600 hover:text-blue-800 font-medium inline-flex items-center group">
            <%= if @locale == "ar", do: "عرض جميع الفئات", else: "View All Categories" %>
            <svg xmlns="http://www.w3.org/2000/svg" class={"h-5 w-5 #{if @locale == "ar", do: "mr-1 transform rotate-180 group-hover:-translate-x-1", else: "ml-1 transform group-hover:translate-x-1"} transition-transform"} fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
            </svg>
          </a>
        </div>

        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-7 gap-4 md:gap-6">
          <!-- Camping Tools -->
          <div class="group animate-fadeIn" style="animation-delay: 0.1s;">
            <a href={~p"/#{@locale}/categories/camping-tools"}
               class="block text-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 h-full border border-gray-100 hover:border-blue-200">
              <div class="w-16 h-16 mx-auto mb-4 flex items-center justify-center bg-blue-50 text-blue-600 rounded-full transition-colors group-hover:bg-blue-100">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
              </div>
              <h3 class="text-md font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">
                <%= if @locale == "ar", do: "أدوات التخييم", else: "Camping Tools" %>
              </h3>
            </a>
          </div>

          <!-- Car Accessories -->
          <div class="group animate-fadeIn" style="animation-delay: 0.2s;">
            <a href={~p"/#{@locale}/categories/car-accessories"}
               class="block text-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 h-full border border-gray-100 hover:border-blue-200">
              <div class="w-16 h-16 mx-auto mb-4 flex items-center justify-center bg-blue-50 text-blue-600 rounded-full transition-colors group-hover:bg-blue-100">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0" />
                </svg>
              </div>
              <h3 class="text-md font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">
                <%= if @locale == "ar", do: "إكسسوارات السيارات", else: "Car Accessories" %>
              </h3>
            </a>
          </div>

          <!-- Car Care -->
          <div class="group animate-fadeIn" style="animation-delay: 0.3s;">
            <a href={~p"/#{@locale}/categories/car-care"}
               class="block text-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 h-full border border-gray-100 hover:border-blue-200">
              <div class="w-16 h-16 mx-auto mb-4 flex items-center justify-center bg-blue-50 text-blue-600 rounded-full transition-colors group-hover:bg-blue-100">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
              <h3 class="text-md font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">
                <%= if @locale == "ar", do: "العناية بالسيارة", else: "Car Care" %>
              </h3>
            </a>
          </div>

          <!-- Car LED Lights -->
          <div class="group animate-fadeIn" style="animation-delay: 0.4s;">
            <a href={~p"/#{@locale}/categories/car-led-lights"}
               class="block text-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 h-full border border-gray-100 hover:border-blue-200">
              <div class="w-16 h-16 mx-auto mb-4 flex items-center justify-center bg-blue-50 text-blue-600 rounded-full transition-colors group-hover:bg-blue-100">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                </svg>
              </div>
              <h3 class="text-md font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">
                <%= if @locale == "ar", do: "إضاءة LED للسيارات", else: "Car LED Lights" %>
              </h3>
            </a>
          </div>

          <!-- Featured Products -->
          <div class="group animate-fadeIn" style="animation-delay: 0.5s;">
            <a href={~p"/#{@locale}/categories/featured-products"}
               class="block text-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 h-full border border-gray-100 hover:border-blue-200">
              <div class="w-16 h-16 mx-auto mb-4 flex items-center justify-center bg-blue-50 text-blue-600 rounded-full transition-colors group-hover:bg-blue-100">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                </svg>
              </div>
              <h3 class="text-md font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">
                <%= if @locale == "ar", do: "منتجات مميزة", else: "Featured Products" %>
              </h3>
            </a>
          </div>

          <!-- Protective Films -->
          <div class="group animate-fadeIn" style="animation-delay: 0.6s;">
            <a href={~p"/#{@locale}/categories/protective-films"}
               class="block text-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 h-full border border-gray-100 hover:border-blue-200">
              <div class="w-16 h-16 mx-auto mb-4 flex items-center justify-center bg-blue-50 text-blue-600 rounded-full transition-colors group-hover:bg-blue-100">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
                </svg>
              </div>
              <h3 class="text-md font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">
                <%= if @locale == "ar", do: "أفلام الحماية والتظليل", else: "Protective Films" %>
              </h3>
            </a>
          </div>

          <!-- Tires -->
          <div class="group animate-fadeIn" style="animation-delay: 0.7s;">
            <a href={~p"/#{@locale}/categories/tires"}
               class="block text-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 h-full border border-gray-100 hover:border-blue-200">
              <div class="w-16 h-16 mx-auto mb-4 flex items-center justify-center bg-blue-50 text-blue-600 rounded-full transition-colors group-hover:bg-blue-100">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
              <h3 class="text-md font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">
                <%= if @locale == "ar", do: "إطارات", else: "Tires" %>
              </h3>
            </a>
          </div>
        </div>

        <!-- Mobile view for small screens - shows fewer categories with horizontal scroll -->
        <div class="mt-6 block lg:hidden">
          <div class="overflow-x-auto pb-4 hide-scrollbar">
            <div class="flex space-x-4 min-w-max px-4">
              <!-- Mobile categories would be here if needed -->
            </div>
          </div>
        </div>
      </div>
    </section>

    <style>
      .animate-fadeIn {
        animation: fadeIn 0.6s ease-in-out backwards;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .hide-scrollbar::-webkit-scrollbar {
        display: none;
      }

      .hide-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
    </style>
    """
  end
end