'use client';

import React from 'react';
import { Star } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Marquee } from '@/components/ui/marquee-01-utils/marquee';

interface Review {
  name: string;
  location: string;
  service: string;
  body: string;
  profile: string;
}

const row1Reviews: Review[] = [
  {
    name: 'Sarah Al-Mansoor',
    location: 'Dubai Marina',
    service: 'Signature Gel Manicure',
    body: '“The professional arrived right on time at my penthouse in Marina. Completely sterile tools, impeccable gel finish, and saved me 2 hours of salon traffic!”',
    profile: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=120&auto=format&fit=crop&q=80',
  },
  {
    name: 'Elena Rostova',
    location: 'Downtown Dubai',
    service: 'Deep Tissue Massage',
    body: '“Hands down the most luxurious doorstep massage experience. Professional therapist brought a heated massage table and soothing aromatherapy oils.”',
    profile: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=120&auto=format&fit=crop&q=80',
  },
  {
    name: 'Mariam Al-Qasimi',
    location: 'Al Majaz, Sharjah',
    service: 'HydraFacial Glow',
    body: '“Flawless skincare treatment in the comfort of my home. My skin is glowing for my sister’s wedding. Transparent upfront pricing with zero hidden fees.”',
    profile: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=120&auto=format&fit=crop&q=80',
  },
  {
    name: 'Jessica Taylor',
    location: 'Palm Jumeirah',
    service: 'Signature Blowout & Style',
    body: '“Booked at 9 AM and the stylist was at my door by 9:30 AM. Super polite, background-checked, and my hair stayed voluminous all weekend.”',
    profile: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=120&auto=format&fit=crop&q=80',
  },
  {
    name: 'Nadine Kabbara',
    location: 'Jumeirah Golf Estates',
    service: 'Classic Lash Extensions',
    body: '“The convenience of having a master lash technician come to your home is unbeatable. Light, natural lashes that lasted over 4 weeks!”',
    profile: 'https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?w=120&auto=format&fit=crop&q=80',
  },
];

const row2Reviews: Review[] = [
  {
    name: 'Nour Hammoud',
    location: 'Corniche, Ajman',
    service: 'Spa Pedicure & Scrub',
    body: '“Finally a reliable, on-demand salon service that covers Ajman with the same 5-star quality as Downtown. Will definitely be rebooking weekly!”',
    profile: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=120&auto=format&fit=crop&q=80',
  },
  {
    name: 'Chloe Dupont',
    location: 'Jumeirah 1',
    service: 'Lash Lift & Brow Lamination',
    body: '“Top 1% verified artists is definitely not an exaggeration. The precision and attention to hygiene exceeded top five-star salon standards.”',
    profile: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?w=120&auto=format&fit=crop&q=80',
  },
  {
    name: 'Fatima Al-Nuaimi',
    location: 'Business Bay',
    service: 'Full Body Scrub & Massage',
    body: '“The matching speed was unbelievable. Within 25 minutes an expert therapist arrived with organic botanical products. Truly 5-star treatment!”',
    profile: 'https://images.unsplash.com/photo-1567532939604-b6b5b0db2604?w=120&auto=format&fit=crop&q=80',
  },
  {
    name: 'Hana Zeidan',
    location: 'Al Barsha, Dubai',
    service: 'Bridal Makeup & Styling',
    body: '“The glam team was punctual, talented, and calm during a busy wedding morning. My makeup looked HD-ready under every light.”',
    profile: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=120&auto=format&fit=crop&q=80',
  },
  {
    name: 'Lina Al-Hassan',
    location: 'Al Taawun, Sharjah',
    service: 'Hot Stone Therapy',
    body: '“Pure bliss after a long working week. The booking process took 30 seconds and the therapist was exceptionally courteous and professional.”',
    profile: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=120&auto=format&fit=crop&q=80',
  },
];

function ReviewCard({ profile, name, location, service, body }: Review) {
  return (
    <Card className="relative h-full w-[310px] sm:w-[350px] cursor-pointer overflow-hidden border border-zinc-200/80 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-2xs hover:shadow-md hover:shadow-black/5 dark:hover:shadow-black/20 hover:-translate-y-0.5 hover:border-zinc-300 dark:hover:border-zinc-700 transition-all duration-200 p-4.5 rounded-2xl select-none group shrink-0">
      <CardContent className="p-0 flex flex-col gap-2.5">
        <div className="flex items-center justify-between gap-2">
          <div className="flex items-center gap-2.5 min-w-0">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              className="rounded-full w-9 h-9 object-cover border border-zinc-200/80 dark:border-zinc-700 shrink-0"
              alt={name}
              src={profile}
              onError={(e) => {
                const target = e.currentTarget;
                if (!target.src.includes('fallback-placeholder.svg')) {
                  target.src = '/images/fallback-placeholder.svg';
                }
              }}
            />
            <div className="flex flex-col min-w-0">
              <p className="text-xs font-bold text-zinc-900 dark:text-white truncate">{name}</p>
              <p className="text-[10px] font-medium text-zinc-400 dark:text-zinc-500 truncate">
                {location} • <span className="text-zinc-500 dark:text-zinc-400 font-semibold">{service}</span>
              </p>
            </div>
          </div>

          {/* 5 Yellow Stars for Rating */}
          <div className="flex items-center gap-0.5 shrink-0" aria-label="5 out of 5 stars">
            {Array.from({ length: 5 }).map((_, i) => (
              <Star
                key={i}
                className="w-3 h-3 fill-amber-400 text-amber-400"
              />
            ))}
          </div>
        </div>

        <p className="text-xs text-zinc-600 dark:text-zinc-300 leading-relaxed line-clamp-3">
          {body}
        </p>
      </CardContent>
    </Card>
  );
}

export default function TestimonialMarquee() {
  return (
    <div className="relative flex w-full flex-col items-center justify-center overflow-hidden py-2">
      {/* Row 1 (LTR) — Slower relaxed pace */}
      <Marquee pauseOnHover className="[--duration:85s] mb-1">
        {row1Reviews.map((review, idx) => (
          <ReviewCard key={`r1-${idx}`} {...review} />
        ))}
      </Marquee>

      {/* Row 2 (Reverse RTL) — Slower relaxed pace */}
      <Marquee reverse pauseOnHover className="[--duration:85s]">
        {row2Reviews.map((review, idx) => (
          <ReviewCard key={`r2-${idx}`} {...review} />
        ))}
      </Marquee>

      {/* Left and Right edge fade masks */}
      <div className="pointer-events-none absolute inset-y-0 start-0 w-20 sm:w-40 bg-gradient-to-r from-surface-soft to-transparent z-10" />
      <div className="pointer-events-none absolute inset-y-0 end-0 w-20 sm:w-40 bg-gradient-to-l from-surface-soft to-transparent z-10" />
    </div>
  );
}