import { Star, Quote } from "lucide-react";
import { SectionHeading } from "../common/SectionHeading";
import { testimonials } from "@/content/testimonials";

export function Testimonials() {
  return (
    <section className="py-16 md:py-24 bg-slate-50 border-t border-b border-border">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <SectionHeading
          eyebrow="Opinie Klientów"
          title="Co mówią o nas nasi klienci?"
          subtitle="Zadowolenie klientów to nasz najwyższy cel. Zobacz opinie osób, które zaufały naszym montażystom i serwisantom."
          align="center"
        />

        {/* Testimonials Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {testimonials.map((test, idx) => (
            <div
              key={idx}
              className="relative p-8 rounded-xl bg-white border border-border hover:shadow-md transition-shadow flex flex-col justify-between"
            >
              {/* Quote icon background decoration */}
              <Quote className="absolute top-6 right-6 size-12 text-slate-100 -z-0" />

              <div className="relative z-10 flex flex-col gap-4">
                {/* Stars */}
                <div className="flex gap-1 mb-4">
                  {Array.from({ length: test.rating }).map((_, iIdx) => (
                    <Star key={iIdx} className="size-4 fill-yellow-400 text-yellow-400" />
                  ))}
                </div>

                {/* Review Text */}
                <p className="text-sm md:text-base text-primary italic leading-relaxed">
                  &ldquo;{test.text}&rdquo;
                </p>
              </div>

              {/* Reviewer Details */}
              <div className="relative z-10 border-t border-slate-100 mt-6 pt-4 flex justify-between items-center text-xs">
                <span className="font-bold text-primary font-heading">
                  {test.name}
                </span>
                {test.source && (
                  <span className="px-2.5 py-1 rounded bg-slate-100 text-text-muted font-medium">
                    {test.source}
                  </span>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}