import { Star } from "lucide-react";
import type { Stat, Testimonial } from "@/lib/contentTypes";
import Reveal from "./ui/Reveal";
import SectionHeading from "./ui/SectionHeading";

const avatarTones = [
  "linear-gradient(135deg, #3a3f42, #17191b)",
  "linear-gradient(135deg, #2e3235, #141618)",
  "linear-gradient(160deg, #383d40, #181a1c)",
  "linear-gradient(200deg, #33373a, #151719)",
];

/** Kartu testimoni klien + baris statistik. */
export default function Testimonials({
  testimonials,
  stats,
}: {
  testimonials: Testimonial[];
  stats: Stat[];
}) {
  return (
    <section
      id="testimoni"
      className="border-y border-line bg-surface/40"
    >
      <div className="mx-auto max-w-6xl px-5 py-24 md:px-8 md:py-32">
        <SectionHeading
          label="Ulasan Klien"
          title="Kata mereka yang telah bekerja sama"
          description="Kepercayaan klien adalah portofolio terbesar kami. Ini pengalaman mereka selama berkolaborasi dengan tim Velo."
        />

        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
          {testimonials.map((t, i) => (
            <Reveal key={t.name} delay={(i % 4) * 0.08}>
              <figure className="flex h-full flex-col justify-between rounded-3xl border border-line bg-ink/60 p-6 transition-colors hover:border-line-2">
                <div>
                  <div className="flex items-center gap-1">
                    {Array.from({ length: 5 }).map((_, s) => (
                      <Star key={s} size={13} className="fill-fg text-fg" />
                    ))}
                    <span className="ml-1.5 font-accent text-xs text-mist">
                      {t.rating}
                    </span>
                  </div>
                  <blockquote className="mt-4 text-[13px] leading-relaxed text-fog">
                    &ldquo;{t.quote}&rdquo;
                  </blockquote>
                </div>
                <figcaption className="mt-6 flex items-center gap-3 border-t border-line pt-5">
                  <span
                    className="grid size-10 shrink-0 place-items-center rounded-full font-accent text-xs font-semibold text-fg"
                    style={{ background: avatarTones[t.tone % avatarTones.length] }}
                  >
                    {t.initials}
                  </span>
                  <div>
                    <p className="text-sm font-semibold text-fg">{t.name}</p>
                    <p className="mt-0.5 text-[11px] text-mist">{t.role}</p>
                  </div>
                </figcaption>
              </figure>
            </Reveal>
          ))}
        </div>

        {/* Statistik */}
        <Reveal className="mt-16">
          <div className="grid divide-line rounded-3xl border border-line bg-ink/60 sm:grid-cols-3 sm:divide-x">
            {stats.map((stat) => (
              <div key={stat.label} className="px-6 py-9 text-center">
                <p className="font-accent text-4xl font-semibold tracking-tight text-fg md:text-5xl">
                  {stat.value}
                </p>
                <p className="mt-2 text-[13px] text-fog">{stat.label}</p>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}