"use client";

import { Store, Share2, Clapperboard, Building2, Megaphone } from "lucide-react";
import type { LucideIcon } from "lucide-react";
import { Container } from "@/components/container";
import { FadeIn } from "@/components/fade-in";
import type { Audience } from "@/lib/mock-data";
import { audiences } from "@/lib/mock-data";
import { useLanguage } from "@/lib/i18n/context";

const icons: Record<Audience["icon"], LucideIcon> = {
  store: Store,
  share2: Share2,
  clapperboard: Clapperboard,
  building2: Building2,
  megaphone: Megaphone,
};

export function SocialProof() {
  const { t } = useLanguage();

  return (
    <section className="border-y border-border bg-secondary/20 py-16 sm:py-20">
      <Container className="flex flex-col items-center gap-10">
        <FadeIn className="max-w-2xl text-center">
          <p className="text-balance text-lg font-medium text-foreground sm:text-xl">
            {t.socialProof.tagline}
          </p>
        </FadeIn>

        <div className="grid w-full grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
          {audiences.map((audience, i) => {
            const Icon = icons[audience.icon];
            const label = t.socialProof.audiences[i];
            return (
              <FadeIn
                key={audience.icon}
                delay={i * 0.06}
                className="flex flex-col items-center gap-3 rounded-xl border border-border bg-card/50 p-5 text-center transition-colors hover:border-brand-cyan/40"
              >
                <span className="flex size-10 items-center justify-center rounded-lg bg-secondary text-primary">
                  <Icon className="size-5" />
                </span>
                <p className="text-sm font-medium text-foreground">
                  {label.title}
                </p>
                <p className="text-xs text-muted-foreground">
                  {label.description}
                </p>
              </FadeIn>
            );
          })}
        </div>
      </Container>
    </section>
  );
}