import { ArrowRight, Code, User, Database, Megaphone, Calculator, Headset, Home, LayoutGrid } from "lucide-react";
import { FadeUp } from "./animations/FadeUp";
import { StaggerContainer, StaggerItem } from "./animations/StaggerContainer";

const categories = [
  { id: 1, title: "IT & Software", jobs: "25,400+ Jobs", icon: Code, bg: "bg-purple-100/50", color: "text-purple-600" },
  { id: 2, title: "HR & Recruitment", jobs: "8,800+ Jobs", icon: User, bg: "bg-orange-100/50", color: "text-orange-500" },
  { id: 3, title: "Data Science", jobs: "15,200+ Jobs", icon: Database, bg: "bg-green-100/50", color: "text-green-600" },
  { id: 4, title: "Marketing", jobs: "12,200+ Jobs", icon: Megaphone, bg: "bg-blue-100/50", color: "text-blue-600" },
  
  { id: 5, title: "Finance", jobs: "10,100+ Jobs", icon: Calculator, bg: "bg-yellow-100/50", color: "text-yellow-600" },
  { id: 6, title: "Customer Support", jobs: "9,300+ Jobs", icon: Headset, bg: "bg-pink-100/50", color: "text-pink-600" },
  { id: 7, title: "Admin & Support", jobs: "7,600+ Jobs", icon: Home, bg: "bg-teal-100/50", color: "text-teal-600" },
  { id: 8, title: "More Categories", jobs: "View all", icon: LayoutGrid, bg: "bg-gray-100/80", color: "text-gray-600" },
];

export function JobCategories() {
  return (
    <section className="py-10 md:py-12 bg-[#f9f7fc] overflow-hidden">
      <div className="container mx-auto px-4">
        <div className="flex flex-col lg:flex-row items-center gap-12 lg:gap-8">
          
          {/* Left Content */}
          <FadeUp delay={0.1} xOffset={-30} className="w-full lg:w-1/3 text-center lg:text-left z-10 relative">
            <h2 className="text-3xl md:text-4xl font-bold text-[#111827] mb-4">
              Popular job categories
            </h2>
            <p className="text-gray-500 text-base md:text-lg mb-6 max-w-md mx-auto lg:mx-0 leading-relaxed">
              Explore roles across top domains and find the right fit for you.
            </p>
            <button className="inline-flex items-center justify-center gap-2 px-8 py-3 rounded-full border border-[#FF5722] text-[#FF5722] font-semibold hover:bg-[#FF5722] hover:text-white transition-colors">
              View all <ArrowRight className="w-4 h-4" />
            </button>
          </FadeUp>

          {/* Right Content - Honeycomb Grid */}
          <div className="w-full lg:w-2/3 flex flex-col items-center lg:items-start relative">
            {/* Standard Grid */}
            <StaggerContainer staggerDelay={0.05} className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 w-full place-items-center">
              {categories.map((cat) => (
                <StaggerItem
                  key={cat.id}
                  yOffset={20}
                  className={`w-[160px] md:w-[190px] h-[120px] md:h-[130px] flex flex-col items-center justify-center ${cat.bg} transition-transform hover:-translate-y-1 cursor-pointer`}
                  style={{
                    clipPath: "polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%)"
                  }}
                >
                  <cat.icon className={`w-6 h-6 md:w-8 md:h-8 mb-2 ${cat.color}`} />
                  <h3 className="text-sm md:text-[15px] font-bold text-gray-900 mb-1 text-center px-4 leading-tight">
                    {cat.title}
                  </h3>
                  <p className={`text-xs ${cat.color} font-medium`}>
                    {cat.jobs}
                  </p>
                </StaggerItem>
              ))}
            </StaggerContainer>
            
          </div>

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