import Link from 'next/link'
import {
  Target,
  Shield,
  Leaf,
  Users,
  Briefcase,
  Landmark,
  Heart,
  TrendingUp,
  Settings,
  FileText,
  Truck,
  Kanban,
  Building,
  Award,
  Megaphone,
  Brain,
  Clipboard,
  ArrowRight,
  type LucideIcon,
} from 'lucide-react'
import { courseSubjects } from '@/lib/site-config'
import { SectionHeader } from '@/components/section-header'

const iconMap: Record<string, LucideIcon> = {
  Target,
  Shield,
  Leaf,
  Users,
  Briefcase,
  Landmark,
  Heart,
  TrendingUp,
  Settings,
  FileText,
  Truck,
  Kanban,
  Building,
  Award,
  Megaphone,
  Brain,
  Clipboard,
}

export function SubjectsSection() {
  return (
    <section id="subjects" className="section-padding bg-muted/50">
      <div className="container-wide">
        <SectionHeader
          eyebrow="Our Subjects"
          title="500+ Courses Across Every Discipline"
          description="From strategic management to artificial intelligence — explore our comprehensive portfolio of management training subjects."
        />

        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-3 md:gap-4">
          {courseSubjects.map((subject) => {
            const Icon = iconMap[subject.icon] ?? Briefcase
            return (
              <Link
                key={subject.slug}
                href={`/courses?category=${subject.slug}`}
                className="group flex flex-col items-center text-center gap-3 p-4 md:p-5 rounded-xl bg-card border border-border/50 hover:border-accent/50 hover:shadow-md hover:-translate-y-0.5 transition-all duration-200"
              >
                <div className="w-11 h-11 rounded-lg bg-primary/5 group-hover:bg-accent/15 flex items-center justify-center transition-colors">
                  <Icon className="w-5 h-5 text-primary group-hover:text-accent transition-colors" />
                </div>
                <span className="text-xs md:text-sm font-medium text-foreground leading-snug">
                  {subject.name}
                </span>
              </Link>
            )
          })}
        </div>

        <div className="text-center mt-10">
          <Link
            href="/courses"
            className="inline-flex items-center gap-2 text-sm font-semibold text-primary hover:text-accent transition-colors"
          >
            View all course categories
            <ArrowRight className="w-4 h-4" />
          </Link>
        </div>
      </div>
    </section>
  )
}