Social Proof Badges

"use client";

import { motion } from "framer-motion";
import { Award, Trophy, Medal, Crown } from "lucide-react";
import type { ElementType } from "react";

interface AwardBadge {
  icon: string;
  title: string;
  description: string;
}

interface SocialProofBadgesProps {
  title?: string;
  subtitle?: string;
  awards?: AwardBadge[];
}

const ICON_MAP: Record<string, ElementType> = { Award, Trophy, Medal, Crown };
const EASE = [0.16, 1, 0.3, 1] as const;

export default function SocialProofBadges({
  title = "Recompenses et distinctions",
  subtitle = "Awards",
  awards = [],
}: SocialProofBadgesProps) {
  return (
    <section
      style={{
        paddingTop: "var(--section-padding-y)",
        paddingBottom: "var(--section-padding-y)",
        background: "var(--color-background)",
      }}
    >
      <div
        className="mx-auto"
        style={{
          maxWidth: "var(--container-max-width)",
          paddingLeft: "var(--container-padding-x)",
          paddingRight: "var(--container-padding-x)",
        }}
      >
        <motion.div
          initial={{ opacity: 0, y: 16 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5, ease: EASE }}
          className="text-center mb-14"
        >
          <p className="text-xs font-semibold uppercase tracking-widest mb-2" style={{ color: "var(--color-accent)" }}>
            {subtitle}
          </p>
          <h2 className="text-2xl md:text-3xl font-bold tracking-tight" style={{ color: "var(--color-foreground)" }}>
            {title}
          </h2>
        </motion.div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {awards.map((award, i) => {
            const Icon = ICON_MAP[award.icon] ?? Award;
            return (
              <motion.div
                key={award.title}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.45, delay: i * 0.08, ease: EASE }}
                className="text-center p-6 rounded-xl"
                style={{
                  background: "var(--color-background-alt)",
                  border: "1px solid var(--color-border)",
                  borderRadius: "var(--radius-lg)",
                }}
              >
                <Icon className="h-8 w-8 mx-auto mb-4" style={{ color: "var(--color-accent)" }} />
                <h3 className="text-sm font-semibold mb-1" style={{ color: "var(--color-foreground)" }}>
                  {award.title}
                </h3>
                <p className="text-xs" style={{ color: "var(--color-foreground-muted)" }}>
                  {award.description}
                </p>
              </motion.div>
            );
          })}
        </div>
      </div>
    </section>
  );
}