"use client";

import Image from "next/image";
import Link from "next/link";

export default function CategoriesSection() {

  const categories = [
    {
      name: "B2B",
      image: "/gallery/category/b2b.png",
      color: "text-primary-400",
      bgColor: "bg-primary-500/10",
      link: "/b2b"
    },
    {
      name: "B2C",
      image: "/gallery/category/b2c.png",
      color: "text-primary-400",
      bgColor: "bg-primary-500/10",
      link: "/b2c"
    },
    {
      name: "EV Charging Infra",
      image: "/gallery/category/ev-charging.png",
      color: "text-primary-400",
      bgColor: "bg-primary-500/10",
      link: "/ev-charging"
    },
    {
      name: "Tenders",
      image: "/gallery/category/tender.png",
      color: "text-ocean-400",
      bgColor: "bg-ocean-500/10",
      link: "/tender"
    },
    {
      name: "Finance",
      image: "/gallery/category/finance.png",
      color: "text-primary-400",
      bgColor: "bg-primary-500/10",
      link: "/finance"
    },
    {
      name: "Daily Post App",
      image: "/gallery/category/daily-post.png",
      color: "text-solar-400",
      bgColor: "bg-solar-500/10",
      link: "/dailypost-app"
    },
    {
      name: "CRM",
      image: "/gallery/category/crm-logo.png",
      color: "text-ocean-400",
      bgColor: "bg-ocean-500/10",
      link: "/crm"
    },
  ];

  return (
    <section
      className="relative bg-theme-nav border-b border-primary-500/10 backdrop-blur-lg w-full overflow-x-hidden"
      style={{ zIndex: 60 }}
    >
      <div
        className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full overflow-x-hidden"
        style={{ position: "relative" }}
      >
        <div
          className="flex items-center justify-start md:justify-center gap-2 sm:gap-3 md:gap-4 overflow-x-auto overflow-y-hidden py-3 sm:py-4 md:scrollbar-hide"
          style={{ position: "relative", WebkitOverflowScrolling: "touch" }}
        >
          {categories.map((category, index) => {
            return (
              <div
                key={category.name}
                className="relative flex-shrink-0"
              >
                <Link
                  href={category.link || `/${category.name.toLowerCase().replace(/\s+/g, "-")}`}
                  className="flex flex-col items-center gap-1 sm:gap-2 px-2 sm:px-3 md:px-4 py-2 sm:py-3 rounded-lg transition-all min-w-[70px] sm:min-w-[90px] md:min-w-[110px] lg:min-w-[130px] group"
                >
                  <div className="transition-transform duration-200 group-hover:scale-110">
                    <Image
                      src={category.image}
                      alt={category.name}
                      width={64}
                      height={64}
                      className="w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 object-contain"
                      style={{ maxHeight: '64px', maxWidth: '64px' }}
                    />
                  </div>
                  <span className="text-[10px] sm:text-xs font-medium text-theme-secondary group-hover:text-primary-400 transition-colors text-center whitespace-nowrap">
                    {category.name}
                  </span>
                </Link>


              </div>
            );
          })}
        </div>
      </div>

      {/* Scrollbar hide utility - only hide on medium screens and up */}
      <style jsx global>{`
        .scrollbar-hide {
          -ms-overflow-style: none;
          scrollbar-width: none;
        }
        .scrollbar-hide::-webkit-scrollbar {
          display: none !important;
          width: 0 !important;
          height: 0 !important;
          background: transparent !important;
        }
        .scrollbar-hide::-webkit-scrollbar-track {
          display: none !important;
          background: transparent !important;
        }
        .scrollbar-hide::-webkit-scrollbar-thumb {
          display: none !important;
          background: transparent !important;
        }
        /* Show scrollbar on mobile */
        @media (max-width: 767px) {
          .overflow-x-auto::-webkit-scrollbar {
            display: block;
            height: 6px;
          }
          .overflow-x-auto::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            margin: 0 16px;
          }
          .overflow-x-auto::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.4);
            border-radius: 10px;
          }
          .overflow-x-auto::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.6);
          }
        }
      `}</style>
    </section>
  );
}