import { motion } from 'framer-motion';
import FeatureCard from './FeatureCard';
import feature1Image from '../assets/images/t.png';
import feature2Image from '../assets/images/t2.png';
import feature3Image from '../assets/images/t3.png';
import feature4Image from '../assets/images/t4.png';
import feature5Image from '../assets/images/t5.png';
import feature6Image from '../assets/images/t6.png';

export default function FeatureSection() {
  // 製品機能データ
  const features = [
    {
      title: "直感的なアンケート作成",
      description: "ドラッグ＆ドロップ操作で簡単にアンケートを作成。20種類以上のコンポーネントであらゆるニーズに対応。",
      icon: "fa-magic",
      imageUrl: feature1Image
    },
    {
      title: "豊富なテンプレート",
      description: "業界別のプリセットテンプレートを提供。すぐに使えるだけでなく、独自のテンプレートも作成可能。",
      icon: "fa-file-alt",
      imageUrl: feature2Image
    },
    {
      title: "高度な条件表示設定",
      description: "回答に応じて質問を動的に表示/非表示。複雑なロジックも直感的に設定可能。",
      icon: "fa-sitemap",
      imageUrl: feature3Image
    },
    {
      title: "多様なアクセス制限",
      description: "IP、デバイス、回答回数、時間制限など、必要な制限を設定してデータの信頼性を確保。",
      icon: "fa-shield-alt",
      imageUrl: feature4Image
    },
    {
      title: "リアルタイムデータ分析",
      description: "回答をリアルタイムで集計し、グラフ（棒グラフ、折れ線グラフ、円グラフ）で視覚化。",
      icon: "fa-chart-pie",
      imageUrl: feature5Image
    },
    {
      title: "柔軟なデータ管理",
      description: "収集したデータの編集、エクスポート、印刷、添付ファイルの一括ダウンロードに対応。",
      icon: "fa-database",
      imageUrl: feature6Image
    }
  ];

  return (
    <section id="features" className="py-20 bg-white dark:bg-gray-900">
      <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-6">
            AliSurveyの特徴
          </h2>
          <p className="text-lg text-gray-700">
            アンケート作成からデータ収集、分析まで、すべてのプロセスを簡単かつ効率的に行えます。
          </p>
        </div>
        
        {/* 機能カードグリッド */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {features.map((feature, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              className="group"
            >
              <FeatureCard {...feature} />
            </motion.div>
          ))}
        </div>
        
        {/* 追加の機能強調 */}
        {/* <div className="mt-24">
          <div className="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-2xl overflow-hidden">
            <div className="grid grid-cols-1 md:grid-cols-2">
              <div className="p-8 md:p-12 flex flex-col justify-center relative">
                <div 
                  className="absolute inset-0 z-10 opacity-10"
                  style={{
                    backgroundImage: `radial-gradient(#416DE8 50%, transparent 50%)`,
                    backgroundSize: `60px 60px`,
                  }}
                ></div>
                <h3 className="text-2xl md:text-3xl font-bold text-white mb-4">
                  ブランドに合わせたアンケートカスタマイズ
                </h3>
                <p className="text-blue-100 mb-6">
                  ヘッダー画像、背景画像、色、ボタンテキストなどを自由にカスタマイズ。
                  企業のブランドイメージに合わせたアンケートを作成できます。
                </p>
                <ul className="space-y-3">
                  {[
                    "企業ロゴやカラーテーマの適用",
                    "カスタム送信メッセージとリダイレクト設定",
                    "モバイルフレンドリーなレスポンシブデザイン",
                    "回収センターでアンケートを簡単に復元"
                  ].map((item, i) => (
                    <li key={i} className="flex items-center text-white">
                      <i className="fa-solid fa-check-circle mr-2"></i>
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
              <div className="bg-gray-100 p-4 md:p-8 flex items-center justify-center">
                <img 
                  src="https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_4_3&prompt=Survey%20customization%20interface%20Japanese%20design%20tools%20brand%20colors&sign=9512c3b4c76e5a0413e8a1275d960909" 
                  alt="アンケートカスタマイズ" 
                  className="rounded-xl shadow-lg max-w-full h-auto"
                />
              </div>
            </div>
          </div>
        </div> */}
      </div>
    </section>
  );
}