import { motion } from 'framer-motion';

const testimonials = [
  {
    name: "田中 健太",
    company: "株式会社ABC",
    position: "マーケティング部長",
    content: "AliSurveyの直感的な操作感に驚きました。これまでIT部門に依頼していたアンケート作成を、マーケティングチーム内で完結できるようになり、作業効率が格段に向上しました。",
    avatar: "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Middle%20aged%20Japanese%20businessman%20smile&sign=753057963873d8d3eaec44917a19d62f"
  },
  {
    name: "鈴木 美玲",
    company: "デザイン事務所DEF",
    position: "代表取締役",
    content: "顧客満足度調査を効率よく実施できるようになりました。デザインカスタマイズ機能も充実していて、自分たちのブランドに合わせたアンケートを作成できる点が非常に魅力的です。",
    avatar: "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Japanese%20female%20designer%20professional%20look&sign=0c57ddb3fbc04b1fa0b374f9dfacdfdd"
  },
  {
    name: "佐藤 明",
    company: "大学 経済学部",
    position: "准教授",
    content: "学術研究のためのアンケート調査に使用しています。高度な条件表示機能と詳細なデータ分析ができるため、複雑な研究デザインにも十分対応できます。学生のアルバイトにも簡単に操作してもらえます。",
    avatar: "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Japanese%20university%20professor%20serious%20expression&sign=f364a27a1ded38fb623a950e768190db"
  }
];

export default function Testimonials() {
  return (
    <section id="testimonials" className="py-20 bg-gray-50">
      <div className="container mx-auto px-4 md:px-8">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            顧客の声
          </h2>
          <p className="text-gray-700">
            AliSurveyをご利用いただいている顧客の声をご紹介します。
          </p>
        </div>
        
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {testimonials.map((testimonial, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              className="bg-white p-8 rounded-2xl shadow-sm"
            >
              <div className="flex items-center mb-4">
                {[1, 2, 3, 4, 5].map((i) => (
                  <i key={i} className="fa-solid fa-star text-yellow-400"></i>
                ))}
              </div>
              
              <p className="text-gray-700 mb-6 italic">"{testimonial.content}"</p>
              
              <div className="flex items-center">
                <img 
                  src={testimonial.avatar} 
                  alt={testimonial.name} 
                  className="w-12 h-12 rounded-full object-cover mr-4"
                />
                <div>
                  <h4 className="font-bold text-gray-900">{testimonial.name}</h4>
                  <p className="text-sm text-gray-600">{testimonial.position}, {testimonial.company}</p>
                </div>
              </div>
            </motion.div>
          ))}
        </div>
        
        <div className="mt-16 text-center">
          <div className="inline-flex items-center justify-center space-x-12">
            {[1, 2, 3, 4].map((i) => (
              <div key={i} className="opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition-all">
                <img 
                  src={`https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Japanese%20company%20logo%20simple%20design&sign=d07c387595cd76e07532ca1d17df694e`} 
                  alt="顧客企業" 
                  className="h-8 object-contain"
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}