"use client";

import { Quote } from "lucide-react";
import { InfiniteMovingCards } from "@/components/ui/infinite-moving-cards";

const testimonials = [
  {
    quote: "Top up diamond cuma 5 detik langsung masuk! Harga juga paling murah dibanding kompetitor. Langganan terus di sini. ⭐⭐⭐⭐⭐",
    name: "Rifky A.",
    title: "Mobile Legends — 2 jam lalu",
  },
  {
    quote: "Beli Genesis Crystal buat pull karakter 5 star. Prosesnya instant, CS nya juga ramah banget. Highly recommended! ⭐⭐⭐⭐⭐",
    name: "Sari W.",
    title: "Genshin Impact — 5 jam lalu",
  },
  {
    quote: "Udah berkali-kali top up VP di sini, ga pernah kecewa. Website nya gampang dipake dan harga bersaing. TOP! ⭐⭐⭐⭐⭐",
    name: "Dimas P.",
    title: "Valorant — 1 hari lalu",
  },
  {
    quote: "Pertama kali top up diamond FF di sini, langsung auto jadi langganan. Proses cepat dan aman! ⭐⭐⭐⭐⭐",
    name: "Ayu L.",
    title: "Free Fire — 1 hari lalu",
  },
  {
    quote: "UC langsung masuk dalam hitungan detik. Pembayaran gampang, bisa pake QRIS. TOP banget! ⭐⭐⭐⭐",
    name: "Budi S.",
    title: "PUBG Mobile — 2 hari lalu",
  },
  {
    quote: "Beli voucher Netflix di sini murah banget! Prosesnya cepat dan bisa langsung dipake. Recommended! ⭐⭐⭐⭐⭐",
    name: "Mega R.",
    title: "Netflix Premium — 3 hari lalu",
  },
  {
    quote: "Website top up paling rapih dan cepat yang pernah gue pake. Harga diamond ML paling murah sih di sini. 🔥⭐⭐⭐⭐⭐",
    name: "Farhan K.",
    title: "Mobile Legends — 4 hari lalu",
  },
  {
    quote: "Proses cepat, harga murah, dan CS responsif. Ga ada alasan buat pindah ke tempat lain. Mantap {process.env.NEXT_PUBLIC_APP_NAME}! ⭐⭐⭐⭐⭐",
    name: "Rina M.",
    title: "Honkai Star Rail — 5 hari lalu",
  },
];

export default function TestimonialSection() {
  return (
    <section className="mt-16 mb-8">
      <div className="text-center mb-8">
        <div className="flex items-center justify-center gap-2.5 mb-2">
          <div className="w-8 h-8 rounded-lg bg-secondary/20 flex items-center justify-center">
            <Quote className="text-secondary" size={18} />
          </div>
          <h2 className="font-heading text-xl md:text-2xl font-bold text-white uppercase tracking-wide">
            Testimoni Pelanggan
          </h2>
        </div>
        <p className="text-sm text-muted">
          Apa kata mereka tentang {process.env.NEXT_PUBLIC_APP_NAME}
        </p>
      </div>

      <InfiniteMovingCards
        items={testimonials}
        direction="right"
        speed="slow"
        pauseOnHover={true}
      />
    </section>
  );
}