import { ShoppingBag, Construction } from "lucide-react"
import { useTranslations } from "next-intl"
import Link from "next/link"
import { cn } from "src/utils"


export default function ExpertiseSection() {
  const t = useTranslations("HomePage.Sides")

  const services = [
    {
      key: "fmcg",
      icon: ShoppingBag,
      color: "bg-blue-50 ",
      iconColor: "text-blue-600 ",
      borderColor: "border-blue-100 ",
    },
    {
      key: "construction",
      icon: Construction,
      color: "bg-amber-50 ",
      iconColor: "text-amber-600 ",
      borderColor: "border-amber-100 ",
    },
  ]

  return (
    <section className="w-full py-20 bg-gradient-to-b from-slate-50 to-white  mx-auto max-w-screen-xl">
      <div className="container px-4 md:px-6 mx-auto">
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold tracking-tight mb-4 bg-clip-text text-transparent bg-gradient-to-r from-slate-900 to-slate-700 ">
            {t("title")}
          </h2>
          <div className="w-20 h-1 bg-gradient-to-r from-blue-500 to-amber-500 mx-auto rounded-full"></div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mx-auto">
          {services.map((service) => (
            <div
              key={service.key}
              className={cn(
                "group relative overflow-hidden rounded-2xl border p-8 transition-all duration-300 hover:shadow-lg",
                service.borderColor,
                service.color,
              )}
            >
              <div className="absolute -right-16 -top-16 h-40 w-40 rounded-full border border-slate-100 0 opacity-50 group-hover:opacity-100 transition-opacity duration-500"></div>

              <div className="relative z-10">
                <div className={cn("p-3 rounded-xl inline-block mb-4", service.color)}>
                  <service.icon className={cn("w-8 h-8", service.iconColor)} />
                </div>

                <h3 className="text-2xl font-bold tracking-tight mb-2 text-slate-900 ">
                  {t(`${service.key}.title`)}
                </h3>

                <p className="text-sm font-medium text-slate-600  mb-4">
                  {t(`${service.key}.subtitle`)}
                </p>

                <p className="text-base text-slate-700  leading-relaxed text-justify">
                  {t(`${service.key}.description`)}
                </p>

                <div className="mt-6">
                  <Link href={`/products/${service.key}`} className="inline-flex items-center text-sm font-medium text-blue-600  hover:text-blue-800  transition-colors">
                    Learn more
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      className="w-4 h-4 ml-1"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                    </svg>
                  </Link>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

