import { motion } from "framer-motion";
import mainImage from '../assets/images/main.png';
import mobileImage from '../assets/images/mobile.png';

export default function Hero() {
    return (
        <section
            className="pt-32 pb-20 md:pt-40 md:pb-32 bg-gradient-to-br from-blue-50 to-indigo-50">
            <div className="container mx-auto px-4 md:px-8">
                <div className="flex flex-col md:flex-row items-center mb-12 md:mb-0">
                    {}
                    <div className="md:w-1/2">
                        <motion.div
                            initial={{
                                opacity: 0,
                                y: 20
                            }}
                            animate={{
                                opacity: 1,
                                y: 0
                            }}
                            transition={{
                                duration: 0.6
                            }}>
                            <div className="inline-block px-4 py-1 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-sm font-medium">
                                アンケート作成を革命化
                            </div>
                            <h1 className="text-4xl xl:text-5xl 2xl:text-6xl font-bold text-gray-900 mb-6" style={{ lineHeight: '1.1em' }}>
                                フォームは簡単に<br />
                                共有は一瞬で<br />
                                <span className="bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">あとは分析に力を注ごう</span>
                            </h1>
                            <p className="text-lg md:text-xl text-gray-700 mb-8 max-w-lg">
                                20種類以上のコンポーネント。<br />
                                ドラッグ＆ドロップで直感的にアンケート作成。<br />
                                QRコードで即時共有、効率的な運用を実現します。​</p>
                        </motion.div>
                    </div>
                    {}
                    <div className="md:w-1/2">
                        <motion.div
                            initial={{
                                opacity: 0,
                                x: 20
                            }}
                            animate={{
                                opacity: 1,
                                x: 0
                            }}
                            transition={{
                                duration: 0.6,
                                delay: 0.2
                            }}>
                            <div className="relative">
                                {/*  rotate-1 hover:rotate-0 */}
                                <div className="relative rounded-2xl overflow-hidden shadow-2xl transform transition-transform duration-500 p-6 bg-gradient-to-r from-blue-600 to-indigo-100">
                                    {/* 海浪效果容器 */}
                                    <div className="absolute inset-0 overflow-hidden ocean-waves">
                                        {/* 背景波浪层 */}
                                        <div className="absolute bottom-0 w-[200%] h-full ocean-wave-back"></div>
                                        {/* 前景波浪层 */}
                                        <div className="absolute bottom-0 w-[200%] h-full ocean-wave-front"></div>
                                    </div>
                                    <img
                                        src={mainImage}
                                        alt="AliSurveyダッシュボード"
                                        className="w-full h-auto rounded-xl relative z-10"
                                        />
                                </div>
                                <motion.div
                                    initial={{
                                        opacity: 0,
                                        y: 40 // 从下方开始
                                    }}
                                    animate={{
                                        opacity: 1,
                                        y: 0 // 向上移动到目标位置
                                    }}
                                    transition={{
                                        duration: 0.6,
                                        delay: 0.2 // 稍晚于背景图出现，形成层次感
                                    }}
                                    className="absolute -right-5 top-1/3 transform -translate-y-1/2 z-20 hidden lg:block"
                                >
                                    <div className="relative">
                                        <div className="w-32 xl:w-40 2xl:w-48 h-auto rounded-3xl bg-gradient-to-r from-indigo-100/30 to-blue-200/30 p-1 transform rotate-3 transition-transform hover:rotate-0 duration-500">
                                            <img
                                                src={mobileImage}
                                                alt="AliSurveyモバイル"
                                                className="w-full h-auto rounded-2xl shadow-2xl "
                                            />
                                        </div>
                                        {/* 装饰性亮点 */}
                                        <div className="absolute -top-3 -right-3 w-12 h-12 bg-white rounded-full opacity-70 blur-md animate-pulse"></div>
                                    </div>
                                </motion.div>
                                {/* <div className="absolute -bottom-6 -left-6 bg-white p-4 rounded-xl shadow-lg transform hover:scale-105 transition-transform">
                                    <div className="flex items-center">
                                        <div className="bg-green-100 p-2 rounded-lg">
                                            <i className="fa-solid fa-chart-line text-green-600 text-xl"></i>
                                        </div>
                                        <div className="ml-3">
                                            <p className="text-sm font-medium text-gray-900">データ分析</p>
                                            <p className="text-2xl font-bold text-gray-900">リアルタイム</p>
                                        </div>
                                    </div>
                                </div>
                                <div className="absolute -top-6 -right-6 bg-white p-4 rounded-xl shadow-lg transform hover:scale-105 transition-transform">
                                    <div className="flex items-center">
                                        <div className="bg-blue-100 p-2 rounded-lg">
                                            <i className="fa-solid fa-magic text-blue-600 text-xl"></i>
                                        </div>
                                        <div className="ml-3">
                                            <p className="text-sm font-medium text-gray-900">作成時間</p>
                                            <p className="text-2xl font-bold text-gray-900">90％削減</p>
                                        </div>
                                    </div>
                                </div> */}

                            </div>
                        </motion.div>
                    </div>
                </div>
                <div>
                    <div className="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
                        <a target='_blank'
                            href="https://alisurvey.alicorns.co.jp"
                            className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg text-lg font-medium transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-1">無料で始める <i className="fa-solid fa-arrow-right ml-2"></i>
                        </a>
                        <a target='_blank'
                            href="https://alisurvey.alicorns.co.jp?for=demo"
                            className="bg-white hover:bg-gray-50 text-blue-600 border border-blue-600 px-8 py-4 rounded-lg text-lg font-medium transition-all">
                            <i className="fa-solid fa-play-circle mr-2"></i>デモを見る
                                            </a>
                    </div>
                    {/* <div className="mt-10 flex items-center">
                        <div className="flex -space-x-2">
                            {[1, 2, 3, 4].map(i => <img
                                key={i}
                                src={`https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Japanese%20business%20person%20avatar&sign=c0224456042d7467b42e4fe01b6bb356`}
                                alt="顧客"
                                className="w-10 h-10 rounded-full border-2 border-white" />)}
                        </div>
                        <div className="ml-4">
                            <div className="flex items-center">
                                {[1, 2, 3, 4, 5].map(i => <i key={i} className="fa-solid fa-star text-yellow-400 text-sm"></i>)}
                            </div>
                            <p className="text-sm text-gray-600">500社以上の企業が信頼</p>
                        </div>
                    </div> */}
                </div>
            </div>
            
            <style>{`
                .ocean-wave-back,
                .ocean-wave-front {
                    left: 0;
                    background-repeat: repeat-x;
                    background-position-y: bottom;
                    animation-timing-function: linear;
                    animation-iteration-count: infinite;
                    will-change: transform;
                }

                /* 背景波浪层样式 */
                .ocean-wave-back {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='0.2' d='M0,70 C300,50 300,90 600,70 C900,50 900,90 1200,70 L1200,100 L0,100 Z'/%3E%3C/svg%3E");
                    background-size: 600px 100%;
                    animation-name: wave-flow-back;
                    animation-duration: 20s;
                }

                /* 前景波浪层样式 */
                .ocean-wave-front {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='0.4' d='M0,40 C300,60 300,20 600,40 C900,60 900,20 1200,40 L1200,100 L0,100 Z'/%3E%3C/svg%3E");
                    background-size: 600px 100%
                    animation-name: wave-flow-front;
                    animation-duration: 10s;
                    animation-delay: -2s;
                }

                /* 背景层波浪动画 - 修改位移量 */
                @keyframes wave-flow-back {
                0% {
                    transform: translateX(0);
                }
                100% {
                    transform: translateX(-600px);
                }
                }

                /* 前景层波浪动画 - 修改位移量 */
                @keyframes wave-flow-front {
                0% {
                    transform: translateX(0);
                }
                100% {
                    transform: translateX(-600px);
                }
                }
            `}</style>
        </section>
    );
}