a97a02cf-6585-4cd6-94f9-c90f6a08bd94/src/tag/Tag.tsx

'use client';

import { useState } from 'react';

interface Testimonial {
  id: string;
  author: string;
  role: string;
  company: string;
  excerpt: string;
  fullText: string;
  avatar?: string;
}

interface TagProps {
  testimonials?: Testimonial[];
}

const defaultTestimonials: Testimonial[] = [
  {
    id: '1',
    author: 'Sarah Johnson',
    role: 'Product Manager',
    company: 'TechCorp',
    excerpt: 'Amazing experience working with this team.',
    fullText: 'This has been an absolutely transformative experience. The team went above and beyond to ensure our project succeeded. Their attention to detail and commitment to excellence is unmatched. I would highly recommend them to anyone looking for top-tier service.',
    avatar: '👩‍💼',
  },
  {
    id: '2',
    author: 'Michael Chen',
    role: 'CEO',
    company: 'StartupXYZ',
    excerpt: 'Exceeded all our expectations.',
    fullText: 'From day one, they demonstrated exceptional professionalism and expertise. They understood our vision and delivered results that surpassed our expectations. The collaboration was seamless and the outcomes were outstanding. Truly a game-changer for our business.',
    avatar: '👨‍💼',
  },
  {
    id: '3',
    author: 'Emily Rodriguez',
    role: 'Design Lead',
    company: 'Creative Studios',
    excerpt: 'Best decision we made this year.',
    fullText: 'Working with this team was the best decision we made all year. Their innovative approach and creative solutions transformed our project completely. They were responsive, professional, and genuinely invested in our success. I cannot recommend them highly enough.',
    avatar: '👩‍🎨',
  },
  {
    id: '4',
    author: 'David Park',
    role: 'Operations Director',
    company: 'Global Solutions Inc',
    excerpt: 'Incredible attention to detail.',
    fullText: 'The level of detail and care they put into every aspect of the project was incredible. They anticipated our needs, solved problems proactively, and delivered exceptional results on time and within budget. Their expertise and dedication made all the difference.',
    avatar: '👨‍💼',
  },
];

export default function Tag({ testimonials = defaultTestimonials }: TagProps) {
  const [flipped, setFlipped] = useState<Record<string, boolean>>({});

  const toggleFlip = (id: string) => {
    setFlipped((prev) => ({
      ...prev,
      [id]: !prev[id],
    }));
  };

  return (
    <div className="w-full py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-6xl mx-auto">
        <div className="text-center mb-12">
          <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
            What Our Clients Say
          </h2>
          <p className="text-lg text-gray-600">
            Hover over cards to see full testimonials
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {testimonials.map((testimonial) => (
            <div
              key={testimonial.id}
              className="h-80 cursor-pointer perspective"
              onClick={() => toggleFlip(testimonial.id)}
            >
              <div
                className="relative w-full h-full transition-transform duration-500 transform-gpu"
                style={{
                  transformStyle: 'preserve-3d',
                  transform: flipped[testimonial.id]
                    ? 'rotateY(180deg)'
                    : 'rotateY(0deg)',
                }}
              >
                {/* Front of card */}
                <div
                  className="absolute w-full h-full bg-white rounded-lg shadow-lg p-6 flex flex-col justify-between border border-gray-200"
                  style={{
                    backfaceVisibility: 'hidden',
                  }}
                >
                  <div>
                    <div className="flex items-center gap-4 mb-4">
                      <div className="text-4xl">{testimonial.avatar}</div>
                      <div>
                        <h3 className="font-semibold text-gray-900 text-sm">
                          {testimonial.author}
                        </h3>
                        <p className="text-xs text-gray-600">
                          {testimonial.role}
                        </p>
                        <p className="text-xs text-gray-500">
                          {testimonial.company}
                        </p>
                      </div>
                    </div>
                    <p className="text-gray-700 text-sm leading-relaxed">
                      "{testimonial.excerpt}"
                    </p>
                  </div>
                  <div className="flex gap-1">
                    {[...Array(5)].map((_, i) => (
                      <span key={i} className="text-yellow-400">
                        ★
                      </span>
                    ))}
                  </div>
                </div>

                {/* Back of card */}
                <div
                  className="absolute w-full h-full bg-gradient-to-br from-blue-600 to-blue-800 rounded-lg shadow-lg p-6 flex flex-col justify-center border border-blue-700"
                  style={{
                    backfaceVisibility: 'hidden',
                    transform: 'rotateY(180deg)',
                  }}
                >
                  <p className="text-white text-sm leading-relaxed font-medium">
                    {testimonial.fullText}
                  </p>
                  <p className="text-blue-100 text-xs mt-4 font-semibold">
                    — {testimonial.author}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}