import { motion } from 'framer-motion';
import FeatureCard from './FeatureCard';
import detail1Image from '../assets/images/d1.png';
import detail2Image from '../assets/images/d2.png';
import detail3Image from '../assets/images/d3.png';

export default function FeatureDetail() {
  return (
    <section id="details" className="py-20 bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">豊富な機能で業務を効率化</h2>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
            多様な機能を通じて、あらゆるアンケートニーズにお応えします
          </p>
        </div>
        
        {/* 機能詳細1 */}
        <div className="flex flex-col md:flex-row items-center mb-20">
          <div className="md:w-1/2 mb-10 md:mb-0 md:pr-12">
            <h3 className="text-2xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">直感的なアンケート作成</h3>
            <ul className="space-y-4">
              <li className="flex items-start">
                <i className="fa-solid fa-check-circle text-green-500 mt-1 mr-3"></i>
                <span>ドラッグ&ドロップ操作で簡単にアンケートを作成</span>
              </li>
              <li className="flex items-start">
                <i className="fa-solid fa-check-circle text-green-500 mt-1 mr-3"></i>
                <span>事前設定されたテンプレートを使用して即座に開始</span>
              </li>
              <li className="flex items-start">
                <i className="fa-solid fa-check-circle text-green-500 mt-1 mr-3"></i>
                <span>テキストを一括インポートしてクイック作成</span>
              </li>
              <li className="flex items-start">
                <i className="fa-solid fa-check-circle text-green-500 mt-1 mr-3"></i>
                <span>20種類以上のコンポーネントで多様な質問形式に対応</span>
              </li>
            </ul>
          </div>
          <div className="md:w-1/2">
            <div className="bg-white p-4 rounded-xl shadow-xl">
              <img 
                src={detail1Image}
                alt="ドラッグ&ドロップアンケート作成" 
                className="rounded-lg w-full h-auto"
              />
            </div>
          </div>
        </div>
        
        {/* 機能詳細2 */}
        <div className="flex flex-col md:flex-row-reverse items-center mb-20">
          <div className="md:w-1/2 mb-10 md:mb-0 md:pl-12">
            <h3 className="text-2xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">多様なアクセス制限設定</h3>
            <ul className="space-y-4">
              <li className="flex items-start">
                <i className="fa-solid fa-check-circle text-green-500 mt-1 mr-3"></i>
                <span>IPアドレスによるアクセス制限</span>
              </li>
              <li className="flex items-start">
                <i className="fa-solid fa-check-circle text-green-500 mt-1 mr-3"></i>
                <span>デバイスごとの回答回数制限</span>
              </li>
              <li className="flex items-start">
                <i className="fa-solid fa-check-circle text-green-500 mt-1 mr-3"></i>
                <span>時間帯によるアクセス許可設定</span>
              </li>
              <li className="flex items-start">
                <i className="fa-solid fa-check-circle text-green-500 mt-1 mr-3"></i>
                <span>パスワードによるアンケート保護</span>
              </li>
            </ul>
          </div>
          <div className="md:w-1/2">
            <div className="bg-white p-4 rounded-xl shadow-xl">
              <img 
                src={detail2Image}
                alt="アクセス制限設定" 
                className="rounded-lg w-full h-auto"
              />
            </div>
          </div>
        </div>
        
        {/* 機能詳細3 */}
        <div className="flex flex-col md:flex-row items-center">
          <div className="md:w-1/2 mb-10 md:mb-0 md:pr-12">
            <h3 className="text-2xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">充実したデータ分析機能</h3>
            <ul className="space-y-4">
              <li className="flex items-start">
                <i className="fa-solid fa-check-circle text-green-500 mt-1 mr-3"></i>
                <span>リアルタイムでの回答データ集計とグラフ表示</span>
              </li>
              <li className="flex items-start">
                <i className="fa-solid fa-check-circle text-green-500 mt-1 mr-3"></i>
                <span>データの追加、編集、エクスポート、印刷機能</span>
              </li>
              <li className="flex items-start">
                <i className="fa-solid fa-check-circle text-green-500 mt-1 mr-3"></i>
                <span>回答データのエクセルやCSV形式でのエクスポート</span>
              </li>
              <li className="flex items-start">
                <i className="fa-solid fa-check-circle text-green-500 mt-1 mr-3"></i>
                <span>統計グラフのPNG画像としてのエクスポート</span>
              </li>
            </ul>
          </div>
          <div className="md:w-1/2">
            <div className="bg-white p-4 rounded-xl shadow-xl">
              <img 
                src={detail3Image} 
                alt="データ分析ダッシュボード" 
                className="rounded-lg w-full h-auto"
              />
            </div>
          </div>
        </div>

        <div className="mt-20 text-center">
          <p className="text-gray-600 mb-4">
            上記以外のニーズがある場合は、カスタムプランもご用意しています。
          </p>
          <a href="/contact/?subject=AliSurvey-%E3%82%A2%E3%83%B3%E3%82%B1%E3%83%BC%E3%83%88%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0" className="text-blue-600 font-medium hover:underline">
            カスタムプランについて <i className="fa-solid fa-arrow-right ml-1"></i>
          </a>
        </div>
      </div>
    </section>
  );
}