"use client";

import React from "react";
import { Star, Quote, CheckCircle2 } from "lucide-react";

const REVIEWS = [
  {
    quote: "Diverse Stationery saved our school office over R15,000 on Typek paper and filing folders. Delivery arrived in Sandton in less than 24 hours!",
    name: "Melanie du Plessis",
    role: "School Administrator, Johannesburg",
    rating: 5,
  },
  {
    quote: "Finding the Casio FX-82ZA calculator and full Grade 10 stationery list in one single online cart made back-to-school so stress-free. 10/10 service!",
    name: "Sipho Khumalo",
    role: "Parent, Durban",
    rating: 5,
  },
  {
    quote: "We order monthly office consumables and HP toner cartridges for our Cape Town firm. Excellent VAT invoices, transparent pricing, and crisp customer support.",
    name: "David van der Merwe",
    role: "Operations Manager, Bellville",
    rating: 5,
  },
];

export const CustomerReviews: React.FC = () => {
  return (
    <section className="py-14 bg-slate-900 text-white border-b border-slate-800">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center max-w-2xl mx-auto mb-10">
          <span className="text-xs font-bold uppercase tracking-wider text-amber-400 bg-amber-400/10 px-3 py-1 rounded-full border border-amber-400/20">
            Trusted Across Mzansi
          </span>
          <h2 className="text-2xl sm:text-3xl font-extrabold text-white mt-3">
            Loved by Parents, Teachers & SA Businesses
          </h2>
          <p className="text-xs sm:text-sm text-slate-300 mt-1">
            Over 12,000+ satisfied customers nationwide count on Diverse Stationery for school and work essentials.
          </p>
        </div>

        <div className="grid md:grid-cols-3 gap-6">
          {REVIEWS.map((r, i) => (
            <div
              key={i}
              className="p-6 bg-slate-800/80 rounded-3xl border border-slate-700/80 shadow-lg flex flex-col justify-between relative"
            >
              <Quote className="w-8 h-8 text-amber-500/20 absolute top-4 right-4" />

              <div className="space-y-3">
                <div className="flex text-amber-400 gap-1">
                  {[...Array(r.rating)].map((_, s) => (
                    <Star key={s} className="w-4 h-4 fill-amber-400" />
                  ))}
                </div>
                <p className="text-xs sm:text-sm text-slate-200 leading-relaxed italic">
                  &ldquo;{r.quote}&rdquo;
                </p>
              </div>

              <div className="mt-6 pt-4 border-t border-slate-700/60 flex items-center justify-between">
                <div>
                  <h4 className="font-extrabold text-xs text-white">{r.name}</h4>
                  <p className="text-[11px] text-slate-400">{r.role}</p>
                </div>
                <span className="inline-flex items-center gap-1 text-[10px] text-emerald-400 bg-emerald-950/60 border border-emerald-800/60 px-2 py-0.5 rounded-full font-bold">
                  <CheckCircle2 className="w-3 h-3" /> Verified Buyer
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};