"use client";

import { StarIcon } from "lucide-react";

import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Typography } from "@/components/ui/typography";
import { useTranslation } from "@/hooks/useTranslation";

import { Section } from "./Section";
import { SectionHeading } from "./SectionHeading";
import { TESTIMONIALS } from "./lib/content";

/** Customer reviews — profile initials stand in until real avatars exist. */
export function TestimonialsSection() {
  const { t } = useTranslation();

  return (
    <Section className="bg-white">
      <div className="flex flex-col gap-10">
        <SectionHeading
          eyebrow={t("home.testimonials.eyebrow")}
          title={t("home.testimonials.title")}
          subtitle={t("home.testimonials.subtitle")}
        />

        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
          {TESTIMONIALS.map((key) => {
            const name = t(`home.testimonials.items.${key}.name`);
            return (
              <div
                key={key}
                className="flex flex-col gap-4 rounded-[20px] border border-border bg-white p-6 shadow-xs"
              >
                <div className="flex gap-0.5 text-primary-amber">
                  {Array.from({ length: 5 }).map((_, i) => (
                    <StarIcon key={i} className="size-4 fill-primary-amber" />
                  ))}
                </div>
                <Typography variant="body" color="secondary" className="flex-1">
                  {`“${t(`home.testimonials.items.${key}.quote`)}”`}
                </Typography>
                <div className="flex items-center gap-3">
                  <Avatar>
                    <AvatarFallback>{name.trim().charAt(0)}</AvatarFallback>
                  </Avatar>
                  <div className="flex min-w-0 flex-col">
                    <Typography
                      as="span"
                      variant="body"
                      className="font-semibold"
                    >
                      {name}
                    </Typography>
                    <Typography as="span" variant="caption" color="secondary">
                      {t(`home.testimonials.items.${key}.role`)}
                    </Typography>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </Section>
  );
}