import { Badge } from "@/components/ui/badge"
import {
  Utensils,
  ShoppingBag,
  Scissors,
  Dumbbell,
  Car,
  Store,
  ArrowRight,
} from "lucide-react"
import homeData from "@/data/home.json"

const iconMap: Record<string, React.ReactNode> = {
  "utensils":     <Utensils className="w-6 h-6" />,
  "shopping-bag": <ShoppingBag className="w-6 h-6" />,
  "scissors":     <Scissors className="w-6 h-6" />,
  "dumbbell":     <Dumbbell className="w-6 h-6" />,
  "car":          <Car className="w-6 h-6" />,
  "store":        <Store className="w-6 h-6" />,
}

export function TeamSection() {
  const { solutions } = homeData

  return (
    <section id="solutions" className="py-20 lg:py-28 bg-background">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="flex flex-col items-center text-center gap-4 mb-14">
          <Badge
            variant="outline"
            className="border-primary/30 text-primary bg-primary-light px-4 py-1 text-sm font-medium"
          >
            {solutions.sectionBadge}
          </Badge>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-foreground text-balance">
            {solutions.title}
          </h2>
          <p className="text-muted-foreground text-base lg:text-lg max-w-2xl text-pretty">
            {solutions.subtitle}
          </p>
        </div>

        {/* Solutions grid */}
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
          {solutions.items.map((item) => (
            <div
              key={item.name}
              className="group flex flex-col items-center text-center gap-3 bg-background border border-border rounded-2xl p-6 hover:border-primary/40 hover:shadow-lg hover:shadow-primary/8 hover:-translate-y-1 transition-all duration-300 cursor-pointer"
            >
              <div className="w-14 h-14 rounded-2xl bg-primary/8 text-primary flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all duration-300">
                {iconMap[item.icon]}
              </div>
              <div>
                <p className="font-semibold text-sm text-foreground">{item.name}</p>
                <p className="text-xs text-muted-foreground mt-0.5 leading-snug">{item.desc}</p>
              </div>
              <ArrowRight className="w-3.5 h-3.5 text-muted-foreground/40 group-hover:text-primary transition-colors" />
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}