import { motion } from 'framer-motion';

export default function CTA() {
  return (
    <section className="py-24 relative overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-r from-blue-600 to-indigo-700 z-0"></div>
      <div 
        className="absolute inset-0 z-10 opacity-10"
        style={{
          backgroundImage: `radial-gradient(#416DE8 50%, transparent 50%)`,
          backgroundSize: `60px 60px`,
        }}
      ></div>
      <div className="container mx-auto px-4 md:px-6 relative z-20">
        <div className="max-w-3xl mx-auto text-center">
          <motion.h2
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="text-4xl md:text-5xl font-bold text-white mb-6 leading-tight"
          >
            今日からアンケート作成を簡単に
          </motion.h2>
          
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.1 }}
            className="text-xl text-blue-100 mb-10"
          >
            無料で始められます。クレジットカードは不要です。
          </motion.p>
          
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="flex flex-col sm:flex-row gap-4 justify-center"
          >
            <a 
              href="https://alisurvey.alicorns.co.jp" target='_blank'
              className="px-8 py-5 bg-white text-blue-600 font-bold rounded-xl shadow-xl hover:shadow-2xl transition-all text-center text-lg"
            >
              無料で始める <i className="fa-solid fa-arrow-right ml-2"></i>
            </a>
            <a target='_blank'
              href="https://alisurvey.alicorns.co.jp?for=demo"
              className="px-8 py-5 bg-transparent border-2 border-white text-white font-bold rounded-xl hover:bg-white/10 transition-all flex items-center justify-center gap-2 text-lg"
            >
              <i className="fa-solid fa-play-circle"></i> デモを見る
            </a>
          </motion.div>
          
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.3 }}
            className="text-blue-100 text-sm mt-6"
          >
            アカウント作成することで、利用規約とプライバシーポリシーに同意したものとみなされます。
          </motion.p>
        </div>
      </div>
    </section>
  );
}