"use client"

const testimonials = [
  "Clean, fast, and well documented.",
  "Best developer experience I've had in years.",
  "Went from zero to production in minutes.",
  "The documentation is a joy to read.",
  "Scales effortlessly with my needs.",
  "Exactly what I needed for my project.",
]

function MarqueeContent() {
  return (
    <>
      {testimonials.map((testimonial, index) => (
        <span
          key={index}
          className="home-marquee-item mx-4 flex shrink-0 items-center gap-2 rounded-full border border-slate-200 bg-white px-6 py-3 text-sm text-slate-600 shadow-sm"
        >
          {testimonial}
        </span>
      ))}
    </>
  )
}

export function HomeMarquee() {
  return (
    <section className="home-marquee relative left-1/2 w-screen -translate-x-1/2 overflow-hidden border-y border-slate-200 bg-slate-50 py-8">
      <div className="home-marquee-track flex w-max animate-marquee">
        <MarqueeContent />
        <MarqueeContent />
      </div>
    </section>
  )
}