"use client";

import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";

const QUOTES = [
  {
    quote:
      "Finally a component library that doesn't look like every other component library. The Editorial system alone saved me a month.",
    name: "Lena Voss",
    title: "Design Engineer · Form Studio",
  },
  {
    quote:
      "Bought the bundle on Tuesday. Shipped a client site on Friday. The CLI is the reason I'll never write a button from scratch again.",
    name: "Marcus Renn",
    title: "Independent developer",
  },
  {
    quote:
      "The taste level is what I'm actually paying for. Velynkit looks like something I'd be proud to ship — and that's rare.",
    name: "Aoife Murray",
    title: "CTO · Northwind Labs",
  },
];

export function TestimonialCarousel() {
  const [i, setI] = useState(0);

  useEffect(() => {
    const t = setInterval(() => setI((v) => (v + 1) % QUOTES.length), 6000);
    return () => clearInterval(t);
  }, []);

  return (
    <section className="bg-[#F4F3EF] text-[#111111] py-20 px-8">
      <div className="max-w-3xl mx-auto text-center">
        <span className="inline-block font-mono text-[11px] uppercase tracking-[0.14em] text-[#6B6B66] mb-8">
          What people say
        </span>

        <div className="relative min-h-[260px]">
          <AnimatePresence mode="wait">
            <motion.figure
              key={i}
              initial={{ opacity: 0, y: 12 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -12 }}
              transition={{ duration: 0.5, ease: [0.2, 0.7, 0.2, 1] }}
            >
              <blockquote
                className="text-[28px] leading-[1.25] tracking-[-0.01em]"
                style={{ fontFamily: "'Instrument Serif', Georgia, serif" }}
              >
                &ldquo;{QUOTES[i].quote}&rdquo;
              </blockquote>
              <figcaption className="mt-8">
                <div className="text-[14px] font-medium">{QUOTES[i].name}</div>
                <div className="font-mono text-[11px] uppercase tracking-[0.1em] text-[#6B6B66] mt-1">
                  {QUOTES[i].title}
                </div>
              </figcaption>
            </motion.figure>
          </AnimatePresence>
        </div>

        <div className="flex gap-2 justify-center mt-10">
          {QUOTES.map((_, idx) => (
            <button
              key={idx}
              type="button"
              onClick={() => setI(idx)}
              aria-label={`Go to quote ${idx + 1}`}
              className={`h-1.5 rounded-full transition-all ${
                idx === i ? "bg-[#111111] w-8" : "bg-[#1111111A] w-1.5"
              }`}
            />
          ))}
        </div>
      </div>
    </section>
  );
}
Testimonial Carousel

Dependencies
