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

export function TrustSection() {
  const { data: stats } = trpc.activity.getStats.useQuery()
  const counters = [
    { icon: Users, value: stats?.totalCustomers?.toLocaleString() || "10,240+", label: "Happy Customers" },
    { icon: ShoppingBag, value: stats?.monthlyActivations?.toLocaleString() || "2,480+", label: "Activations This Month" },
    { icon: Eye, value: stats?.currentVisitors?.toString() || "58", label: "Users Viewing Now" },
    { icon: Globe, value: stats?.weeklyOrders?.toLocaleString() || "1,240+", label: "Orders This Week" },
    { icon: Clock, value: "<2min", label: "Avg. Delivery" },
    { icon: Shield, value: "99.8%", label: "Success Rate" },
  ]
  return (
    <section className="py-16 px-4">
      <div className="max-w-6xl mx-auto">
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
          {counters.map((c, i) => (
            <div key={i} className="glass-card p-5 text-center hover:border-[#f97316]/30 transition-all duration-300 group">
              <div className="w-10 h-10 mx-auto mb-2 rounded-full bg-[#f97316]/10 flex items-center justify-center group-hover:bg-[#f97316]/20 transition-colors">
                <c.icon className="w-5 h-5 text-[#f97316]" />
              </div>
              <p className="text-xl md:text-2xl font-bold text-white">{c.value}</p>
              <p className="text-xs text-slate-400">{c.label}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}