import { Users, Presentation, School, Trophy, type LucideIcon } from "lucide-react";
import { Reveal } from "@/components/Reveal";
import { Counter } from "@/components/Counter";
import { statistik } from "@/lib/site-data";

const icons: Record<string, LucideIcon> = { users: Users, presentation: Presentation, school: School, trophy: Trophy };

export function StatsSection() {
  return (
    <section className="section-pad">
      <div className="container-x grid grid-cols-2 gap-5 lg:grid-cols-4">
        {statistik.map((s, i) => {
          const Icon = icons[s.icon];
          return (
            <Reveal key={s.label} delay={i * 0.1}>
              <div className="neu neu-press flex flex-col items-center p-7 text-center">
                <span className="grid h-14 w-14 place-items-center rounded-2xl text-primary-foreground" style={{ backgroundImage: "var(--gradient-primary)" }}>
                  <Icon className="h-7 w-7" />
                </span>
                <p className="mt-5 font-display text-3xl font-bold text-foreground sm:text-4xl">
                  <Counter to={s.value} suffix={s.suffix} />
                </p>
                <p className="mt-1 text-sm text-muted-foreground">{s.label}</p>
              </div>
            </Reveal>
          );
        })}
      </div>
    </section>
  );
}