import { trpc } from "@/providers/trpc";
import { Users, ShoppingBag, Eye, Globe } from "lucide-react";

export function TrustCounters() {
  const { data: stats } = trpc.activity.getStats.useQuery();

  const counters = [
    { icon: Users, value: stats?.totalCustomers?.toLocaleString() || "10,240+", label: "Happy Customers", suffix: "" },
    { icon: ShoppingBag, value: stats?.monthlyActivations?.toLocaleString() || "2,480+", label: "Activations This Month", suffix: "" },
    { icon: Eye, value: stats?.currentVisitors?.toString() || "58", label: "Users Viewing Now", suffix: "" },
    { icon: Globe, value: stats?.weeklyOrders?.toLocaleString() || "1,240+", label: "Orders This Week", suffix: "" },
  ];

  return (
    <section className="relative z-10 py-16 px-4">
      <div className="max-w-6xl mx-auto">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
          {counters.map((c, i) => (
            <div
              key={i}
              className="glass-card p-6 text-center hover:border-[#f97316]/30 transition-all duration-300 group"
            >
              <div className="w-12 h-12 mx-auto mb-3 rounded-full bg-[#f97316]/10 flex items-center justify-center group-hover:bg-[#f97316]/20 transition-colors">
                <c.icon className="w-6 h-6 text-[#f97316]" />
              </div>
              <p className="text-2xl md:text-3xl font-bold text-white mb-1">{c.value}{c.suffix}</p>
              <p className="text-sm text-slate-400">{c.label}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}