'use client';
import React from 'react';
import Image from 'next/image';

const TestimonialCard = ({ name, role, text, image }: { name: string; role: string; text: string; image: string }) => (
  <div className="bg-white p-6 md:p-8 rounded-[12px] shadow-[0_4px_20px_rgba(0,0,0,0.03)] border border-gray-100 flex flex-col gap-6 relative group hover:shadow-[0_8px_30px_rgba(0,0,0,0.06)] transition-all duration-500 w-[280px] md:w-auto min-w-[280px] md:min-w-0 snap-start flex-shrink-0 md:flex-shrink">
    <div className="flex justify-between items-start w-full">
      <div className="flex items-center gap-3 md:gap-4">
        <div className="relative w-10 h-10 md:w-12 md:h-12 rounded-full overflow-hidden flex-shrink-0">
          <Image
            src={image}
            alt={name}
            fill
            className="object-cover"
          />
        </div>
        <div className="flex flex-col gap-0.5">
          <h4 className="font-bold text-[#1E1B4B] text-[15px] md:text-[17px] leading-tight">{name}</h4>
          <p className="text-gray-400 text-[11px] md:text-[12px] font-medium">{role}</p>
        </div>
      </div>
      
      {/* Quote Icon */}
      <div className="text-[#7F00FF] flex-shrink-0 mt-1">
        <svg width="24" height="18" viewBox="0 0 40 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg" className="rotate-180">
          <path d="M0 15.7895V0H14.7368V15.7895C14.7368 23.6316 10.5263 28.4211 4.21053 30L2.10526 25.2632C5.78947 23.6842 7.36842 21.0526 7.36842 17.3684H0V15.7895ZM25.2632 15.7895V0H40V15.7895C40 23.6316 35.7895 28.4211 29.4737 30L27.3684 25.2632C31.0526 23.6842 32.6316 21.0526 32.6316 17.3684H25.2632V15.7895Z" />
        </svg>
      </div>
    </div>
    
    <p className="text-[#151515] leading-[1.8] text-[12px] md:text-[13px] font-medium">
      {text}
    </p>
  </div>
);

const Testimonials: React.FC = () => {
  const testimonials = [
    {
      name: "Maxin Will",
      role: "Product Manager",
      image: "/shirt-confident-retro-man-happiness_1187-6055 2.png",
      text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua quis nostrud exercitation ullamcoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua quis nostrud exercitation ullamco"
    },
    {
      name: "Maxin Will",
      role: "Product Manager",
      image: "/shirt-confident-retro-man-happiness_1187-6055 2.png",
      text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua quis nostrud exercitation ullamcoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua quis nostrud exercitation ullamco"
    },
    {
      name: "Maxin Will",
      role: "Product Manager",
      image: "/shirt-confident-retro-man-happiness_1187-6055 2.png",
      text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua quis nostrud exercitation ullamcoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua quis nostrud exercitation ullamco"
    }
  ];

  return (
    <section className="bg-[#F8F9FF] py-10 md:py-32 overflow-hidden font-sans tracking-tight px-4 sm:px-6 lg:px-[100px]">
      <div className="container mx-auto max-w-[1280px]">
        <h2 className="text-4xl md:text-5xl lg:text-[56px] font-medium text-[#1E1B4B] tracking-tight text-center mb-10 md:mb-16">
          Client Success Stories
        </h2>

        <div className="flex md:grid md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8 mb-8 md:mb-12 overflow-x-auto pb-4 md:pb-0 md:overflow-x-visible snap-x snap-mandatory scrollbar-hide">
          {testimonials.map((t, idx) => (
            <TestimonialCard key={idx} {...t} />
          ))}
        </div>

        {/* Carousel Dots */}
        <div className="flex justify-center gap-2">
          <div className="w-2 h-2 rounded-full bg-gray-300" />
          <div className="w-2 h-2 rounded-full bg-gray-900" />
          <div className="w-2 h-2 rounded-full bg-gray-300" />
        </div>
      </div>
    </section>
  );
};

export default Testimonials;