import { reviews, googleReviewsUrl } from "@/lib/site-config";

function Stars({ count }: { count: number }) {
  return (
    <div aria-label={`${count} out of 5 stars`} className="flex gap-0.5">
      {Array.from({ length: 5 }).map((_, index) => (
        <span
          key={index}
          className={
            index < count ? "text-amber-400" : "text-slate-300"
          }
        >
          ★
        </span>
      ))}
    </div>
  );
}

export function ReviewsSection() {
  return (
    <section
      id="reviews"
      className="bg-emerald-50 py-10 sm:py-12 md:py-16 border-t border-emerald-100"
    >
      <div className="mx-auto max-w-6xl px-4 md:px-6">
        <div className="mb-6 flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
          <div>
            <h2 className="text-2xl font-semibold tracking-tight text-emerald-950 sm:text-3xl">
              Trusted by clients across the DMV
            </h2>
            <p className="mt-3 max-w-xl text-sm text-emerald-900/80 sm:text-base">
              Clients choose Ghion Financial for our responsiveness,
              attention to detail, and clear explanations at every step of
              the process.
            </p>
          </div>
          <a
            href={googleReviewsUrl}
            target="_blank"
            rel="noreferrer"
            className="text-xs font-semibold text-emerald-700 hover:underline"
          >
            Read more reviews on Google →
          </a>
        </div>
        <div className="grid gap-4 md:grid-cols-3">
          {reviews.map((review) => (
            <figure
              key={review.id}
              className="flex h-full flex-col justify-between rounded-2xl border border-emerald-100 bg-white p-5 shadow-sm"
            >
              <div className="space-y-2">
                <Stars count={review.rating} />
                <blockquote className="text-sm text-slate-700">
                  “{review.quote}”
                </blockquote>
              </div>
              <figcaption className="mt-4 text-sm font-semibold text-slate-900">
                {review.name}
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

