import { useTranslations } from "next-intl";
import {
  QrCode,
  ShoppingCart,
  BarChart3,
  Users,
  Package,
  Building2,
} from "lucide-react";

const FEATURES = [
  { icon: QrCode, key: "qrMenu", descKey: "qrMenuDesc", color: "bg-brand-50 text-brand-700" },
  { icon: ShoppingCart, key: "pos", descKey: "posDesc", color: "bg-amber-50 text-amber-700" },
  { icon: BarChart3, key: "analytics", descKey: "analyticsDesc", color: "bg-blue-50 text-blue-700" },
  { icon: Users, key: "staff", descKey: "staffDesc", color: "bg-purple-50 text-purple-700" },
  { icon: Package, key: "inventory", descKey: "inventoryDesc", color: "bg-rose-50 text-rose-700" },
  { icon: Building2, key: "multiBranch", descKey: "multiBranchDesc", color: "bg-teal-50 text-teal-700" },
] as const;

export function Features() {
  const t = useTranslations("features");

  return (
    <section id="features" className="scroll-mt-16 py-20 sm:py-28">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="mx-auto max-w-2xl text-center">
          <span className="inline-flex items-center gap-1.5 rounded-full border border-brand-200 bg-brand-50 px-3 py-1 text-xs font-semibold text-brand-700">
            {t("badge")}
          </span>
          <h2 className="mt-4 text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
            {t("title")}
          </h2>
          <p className="mt-4 text-lg leading-relaxed text-gray-500">
            {t("subtitle")}
          </p>
        </div>

        {/* Grid */}
        <div className="mt-16 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {FEATURES.map(({ icon: Icon, key, descKey, color }) => (
            <div
              key={key}
              className="group relative overflow-hidden rounded-2xl border border-gray-100 bg-white p-6 shadow-sm transition-all duration-200 hover:-translate-y-1 hover:shadow-md hover:border-gray-200"
            >
              {/* Subtle hover bg */}
              <div className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100 bg-gradient-to-br from-transparent to-gray-50/60" />

              <div className={`mb-4 inline-flex h-11 w-11 items-center justify-center rounded-xl ${color}`}>
                <Icon className="h-5 w-5" />
              </div>
              <h3 className="mb-2 text-base font-semibold text-gray-900">
                {t(key)}
              </h3>
              <p className="text-sm leading-relaxed text-gray-500">
                {t(descKey)}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
