import {
  Headphones,
  ShieldCheck,
  Sparkles,
  Users,
  type LucideIcon,
} from "lucide-react";
import { cn } from "@/lib/utils";

const TRUST_STATS: {
  icon: LucideIcon;
  value: string;
  label: string;
}[] = [
  {
    icon: Users,
    value: "700K+",
    label: "بیش از ۷۰۰ هزار همراه در اینستاگرام",
  },
  {
    icon: Sparkles,
    value: "10,000+",
    label: "هزاران فال ثبت‌شده در سایت",
  },
  {
    icon: ShieldCheck,
    value: "100%",
    label: "حفظ کامل حریم خصوصی",
  },
  {
    icon: Headphones,
    value: "24/7",
    label: "پاسخ‌گویی هوشمند ۲۴ ساعته",
  },
];

export function HomeHeroTrustBar() {
  return (
    <div className="mx-auto w-full max-w-4xl rounded-2xl border border-amber-400/50 bg-[#1a0f2e]/80 px-2 py-4 shadow-[0_0_28px_rgba(251,191,36,0.14)] backdrop-blur-md sm:px-5 md:px-6 md:py-6">
      <div className="grid grid-cols-4 gap-0">
        {TRUST_STATS.map((stat, index) => {
          const Icon = stat.icon;
          return (
            <div
              key={stat.label}
              className={cn(
                "flex flex-col items-center px-1 text-center sm:px-2",
                index < TRUST_STATS.length - 1 && "border-e border-amber-400/30"
              )}
            >
              <Icon
                className="mb-1 size-5 text-amber-300 sm:mb-2 sm:size-7 md:size-8"
                strokeWidth={1.75}
                aria-hidden
              />
              <p className="text-sm font-bold tracking-tight text-amber-300 sm:text-xl md:text-2xl">
                {stat.value}
              </p>
              <p className="mt-1 text-[0.6rem] leading-snug text-amber-200/90 sm:mt-1.5 sm:text-xs md:text-sm">
                {stat.label}
              </p>
            </div>
          );
        })}
      </div>
    </div>
  );
}