export function SpotlightTestimonial() {
  return (
    <section className="bg-[#111111] px-8 py-24 text-[#FAFAF8]">
      <div className="mx-auto max-w-3xl text-center">
        <span className="font-mono text-[11px] uppercase tracking-[0.2em] text-[#FAFAF8]/45">
          Customer spotlight
        </span>

        <blockquote
          className="mx-auto mt-8 max-w-[22ch] leading-[1.08] tracking-[-0.02em] sm:max-w-[26ch]"
          style={{
            fontFamily: "'Instrument Serif', Georgia, serif",
            fontSize: "clamp(30px, 5vw, 56px)",
          }}
        >
          “It&apos;s the first component library that made our product feel{" "}
          <span className="italic text-[#a7f3d0]">expensive</span>.”
        </blockquote>

        <div className="mt-10 flex items-center justify-center gap-4">
          <span className="grid h-12 w-12 place-items-center rounded-full bg-gradient-to-br from-[#34d399] to-[#2A3D2F] text-[15px] font-medium text-[#FAFAF8]">
            EH
          </span>
          <div className="text-left">
            <div className="text-[15px] font-medium">Elena Hartmann</div>
            <div className="font-mono text-[12px] text-[#FAFAF8]/55">
              VP Product · Lumen Labs
            </div>
          </div>
        </div>

        <div className="mt-10 flex items-center justify-center gap-1.5">
          {[0, 1, 2, 3].map((i) => (
            <span
              key={i}
              className={`h-1.5 rounded-full transition-all ${
                i === 1 ? "w-6 bg-[#FAFAF8]" : "w-1.5 bg-[#FAFAF8]/30"
              }`}
            />
          ))}
        </div>
      </div>
    </section>
  );
}
Spotlight Testimonial
