import { motion } from 'framer-motion';

export default function PricingSection() {
  return (
    <section id="pricing" className="py-20 bg-white">
      <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 mb-8">
            ご自身のニーズに合ったプランをお選びください。
            全てのプランで14日間無料トライアルが利用可能です。
          </p>
          
          <div className="inline-flex bg-gray-100 p-1 rounded-lg">
            <button className="px-6 py-2 rounded-lg bg-white shadow-sm text-gray-900 font-medium">
             月額
            </button>
            <button className="px-6 py-2 rounded-lg text-gray-600">
              年額 <span className="text-xs bg-red-100 text-red-600 px-2 py-0.5 rounded ml-1">2ヶ月無料</span>
            </button>
          </div>
        </div>
        
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
          {/* スタータープラン */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow"
          >
            <div className="p-8">
              <h3 className="text-xl font-bold text-gray-900 mb-2">スターター</h3>
              <p className="text-gray-600 mb-6">小規模ビジネスや個人向け</p>
              
              <div className="mb-6">
                <span className="text-4xl font-bold text-gray-900">¥2,980</span>
                <span className="text-gray-500">/月</span>
              </div>
              
              <button className="w-full py-3 border border-blue-600 text-blue-600 font-medium rounded-lg hover:bg-blue-50 transition-colors mb-8">
                無料で始める
              </button>
              
              <ul className="space-y-3">
                {[
                  "月間5アンケート作成",
                  "最大100件/月回答収集",
                  "基本テンプレート（20種類）",
                  "基本フォームコンポーネント（10種類）",
                  "基本データ分析",
                  "CSVエクスポート",
                  "メールサポート"
                ].map((feature, i) => (
                  <li key={i} className="flex items-start">
                    <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                    <span className="text-gray-700">{feature}</span>
                  </li>
                ))}
              </ul>
            </div>
          </motion.div>
          
          {/* ビジネスプラン */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="bg-gradient-to-b from-blue-50 to-white border-2 border-blue-600 rounded-2xl overflow-hidden shadow-lg transform scale-105 z-10"
          >
            <div className="bg-blue-600 text-white text-center py-2 text-sm font-medium">
              人気の選択
            </div>
            <div className="p-8">
              <h3 className="text-xl font-bold text-gray-900 mb-2">ビジネス</h3>
              <p className="text-gray-600 mb-6">中小企業向け</p>
              
              <div className="mb-6">
                <span className="text-4xl font-bold text-gray-900">¥7,980</span>
                <span className="text-gray-500">/月</span>
              </div>
              
              <button className="w-full py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors mb-8">
                無料で始める
              </button>
              
              <ul className="space-y-3">
                {[
                  "月間20アンケート作成",
                  "最大1,000件/月回答収集",
                  "全テンプレート（50種類）",
                  "全フォームコンポーネント（20種類）",
                  "詳細データ分析とグラフ",
                  "Excel/PDF/CSVエクスポート",
                  "優先メールサポート",
                  "条件表示設定",
                  "基本アクセス制限",
                  "ブランドカスタマイズ"
                ].map((feature, i) => (
                  <li key={i} className="flex items-start">
                    <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                    <span className="text-gray-700">{feature}</span>
                  </li>
                ))}
              </ul>
            </div>
          </motion.div>
          
          {/* エンタープライズプラン */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.4 }}
            className="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow"
          >
            <div className="p-8">
              <h3 className="text-xl font-bold text-gray-900 mb-2">エンタープライズ</h3>
              <p className="text-gray-600 mb-6">大企業や高度なニーズ向け</p>
              
              <div className="mb-6">
                <span className="text-4xl font-bold text-gray-900">お問い合わせ</span>
              </div>
              
              <button className="w-full py-3 border border-blue-600 text-blue-600 font-medium rounded-lg hover:bg-blue-50 transition-colors mb-8">
                資料請求
              </button>
              
              <ul className="space-y-3">
                {[
                  "無制限アンケート作成",
                  "無制限回答収集",
                  "カスタムテンプレート作成",
                  "全フォームコンポーネント（20+種類）",
                  "高度なデータ分析レポート",
                  "APIアクセス",
                  "専属アカウントマネージャー",
                  "すべてのアクセス制限機能",
                  "詳細なブランドカスタマイズ",
                  "SSO統合"
                ].map((feature, i) => (
                  <li key={i} className="flex items-start">
                    <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                    <span className="text-gray-700">{feature}</span>
                  </li>
                ))}
              </ul>
            </div>
          </motion.div>
        </div>
        
        <div className="mt-12 text-center">
          <p className="text-gray-600 mb-4">
            上記以外のニーズがある場合は、カスタムプランもご用意しています。
          </p>
          <a href="#contact" className="text-blue-600 font-medium hover:underline">
            カスタムプランについて <i className="fa-solid fa-arrow-right ml-1"></i>
          </a>
        </div>
      </div>
    </section>
  );
}