'use client';

import { useEffect, useState, useRef } from 'react';
import { TestimonialCard } from '@/components/ui/testimonial-card';

interface Testimonial {
  id: string;
  quote: string;
  author: string;
  position: string;
  company: string;
  avatarUrl?: string;
  rating?: number;
}

const MOCK_TESTIMONIALS: Testimonial[] = [
  {
    id: '1',
    quote: '睿新致远的团队非常专业，他们不仅理解我们的业务需求，还能提供超出预期的技术解决方案。数字化转型后，我们的运营效率提升了40%。',
    author: '张总',
    position: '总经理',
    company: '某制造企业',
    avatarUrl: '/testimonials/avatar-1.jpg',
    rating: 5,
  },
  {
    id: '2',
    quote: '选择睿新致远是我们最正确的决定。他们的数据中台解决方案帮助我们实现了数据资产的统一管理，决策效率大幅提升。',
    author: '李经理',
    position: '信息部经理',
    company: '某零售集团',
    avatarUrl: '/testimonials/avatar-2.jpg',
    rating: 5,
  },
  {
    id: '3',
    quote: '从需求分析到系统上线，睿新致远的团队都表现出极高的专业素养。他们的ERP系统让我们的业务流程更加标准化、透明化。',
    author: '王总监',
    position: '运营总监',
    company: '某物流企业',
    avatarUrl: '/testimonials/avatar-3.jpg',
    rating: 5,
  },
];

export function TestimonialsSection() {
  const [isVisible, setIsVisible] = useState(false);
  const sectionRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry?.isIntersecting) {
          setIsVisible(true);
        }
      },
      { threshold: 0.1 }
    );

    if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }

    return () => observer.disconnect();
  }, []);

  return (
    <section
      id="testimonials"
      ref={sectionRef}
      className="py-24 bg-white"
    >
      <div className="container-wide">
        <div
          className={`
            text-center mb-16
            opacity-0 translate-y-4
            ${isVisible ? 'animate-fade-in-up' : ''}
          `}
        >
          <h2 className="text-3xl sm:text-4xl font-semibold text-[#171717] mb-4">
            客户评价
          </h2>
          <p className="text-lg text-[#737373] max-w-2xl mx-auto">
            听听我们的客户怎么说
          </p>
        </div>

        <div
          className={`
            grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8
            opacity-0 translate-y-4
            ${isVisible ? 'animate-fade-in-up stagger-1' : ''}
          `}
        >
          {MOCK_TESTIMONIALS.map((testimonial) => (
            <TestimonialCard key={testimonial.id} {...testimonial} />
          ))}
        </div>
      </div>
    </section>
  );
}