import { useTranslations } from "next-intl";
import { Quote } from "lucide-react";

export function Testimonials() {
  const t = useTranslations("testimonials");

  const items = [
    { nameKey: "t1Name", roleKey: "t1Role", textKey: "t1Text", initials: "ع" },
    { nameKey: "t2Name", roleKey: "t2Role", textKey: "t2Text", initials: "س" },
    { nameKey: "t3Name", roleKey: "t3Role", textKey: "t3Text", initials: "م" },
  ] as const;

  return (
    <section className="bg-brand-700 py-20 sm:py-28">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="mx-auto max-w-2xl text-center">
          <span className="inline-flex items-center gap-1.5 rounded-full border border-white/20 bg-white/10 px-3 py-1 text-xs font-semibold text-white/80">
            {t("badge")}
          </span>
          <h2 className="mt-4 text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
            {t("title")}
          </h2>
          <p className="mt-4 text-lg text-white/60">{t("subtitle")}</p>
        </div>

        <div className="mt-16 grid gap-6 sm:grid-cols-3">
          {items.map(({ nameKey, roleKey, textKey, initials }) => (
            <div
              key={nameKey}
              className="relative flex flex-col rounded-2xl bg-white/10 p-6 backdrop-blur-sm"
            >
              <Quote className="mb-4 h-6 w-6 text-white/30" />
              <p className="flex-1 text-sm leading-relaxed text-white/80">{t(textKey)}</p>
              <div className="mt-6 flex items-center gap-3">
                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white/20 text-sm font-bold text-white">
                  {initials}
                </div>
                <div>
                  <div className="text-sm font-semibold text-white">{t(nameKey)}</div>
                  <div className="text-xs text-white/50">{t(roleKey)}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
