'use client';

/**
 * TestimonialsSection
 *
 * Infinite marquee testimonial section placed right before the footer.
 * Features:
 * - 5 yellow stars ratings replacing usernames
 * - Verified client reviews from Dubai, Sharjah, and Ajman
 * - Smooth infinite bi-directional marquee with pause-on-hover
 * - Full dark mode support
 */

import React from 'react';
import { Sparkles, Star } from 'lucide-react';
import TestimonialMarquee from '@/components/ui/marquee-01';

interface TestimonialsSectionProps {
  locale?: string;
}

export function TestimonialsSection({ locale = 'en' }: TestimonialsSectionProps) {
  const isAr = locale === 'ar';

  return (
    <section className="relative py-20 md:py-28 bg-surface-soft dark:bg-zinc-950 border-t border-border dark:border-zinc-900 overflow-hidden transition-colors duration-200">
      {/* Background subtle grid texture */}
      <div className="pointer-events-none absolute inset-0 -z-10 bg-[linear-gradient(to_right,#f8fafc_1px,transparent_1px),linear-gradient(to_bottom,#f8fafc_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,#18181b_1px,transparent_1px),linear-gradient(to_bottom,#18181b_1px,transparent_1px)] bg-[size:56px_56px] [mask-image:radial-gradient(ellipse_80%_60%_at_50%_0%,#000_60%,transparent_100%)]" />

      <div className="container mx-auto px-4 lg:px-8 mb-10 text-center">
        {/* Top Pill Badge */}
        <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full border border-zinc-200/80 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-2xs text-zinc-700 dark:text-zinc-300 text-xs font-semibold mb-4">
          <Sparkles className="w-3.5 h-3.5 text-brand-500 shrink-0" />
          <span>{isAr ? 'تجارب وآراء العملاء الحقيقية' : 'Real Client Experiences'}</span>
        </div>

        {/* Heading */}
        <h2 className="text-3xl sm:text-4xl lg:text-5xl font-black text-zinc-950 dark:text-white tracking-tight mb-4">
          {isAr ? 'الخيار المفضل لآلاف العملاء في الإمارات' : 'Loved by thousands across the UAE'}
        </h2>

        {/* Subtitle with Average Rating */}
        <div className="flex flex-wrap items-center justify-center gap-2 text-sm text-zinc-500 dark:text-zinc-400 max-w-2xl mx-auto">
          <span>
            {isAr
              ? 'موثوق من أكثر من 10,000 عميل في دبي والشارقة وعجمان مع'
              : 'Trusted by 10,000+ happy clients in Dubai, Sharjah, and Ajman with'}
          </span>
          <span className="inline-flex items-center gap-1 font-bold text-zinc-900 dark:text-white bg-white dark:bg-zinc-900 px-2 py-0.5 rounded-full border border-zinc-200 dark:border-zinc-800 shadow-2xs">
            <Star className="w-3.5 h-3.5 fill-amber-400 text-amber-400" />
            <span>{isAr ? 'تقييم عام 4.9 / 5' : '4.9 / 5 Average Rating'}</span>
          </span>
        </div>
      </div>

      {/* Full-width Marquee Carousel */}
      <div className="w-full">
        <TestimonialMarquee />
      </div>
    </section>
  );
}

export default TestimonialsSection;