'use client'

import { motion } from 'framer-motion'
import Image from 'next/image'
import { ArrowRight } from 'lucide-react'
import Link from 'next/link'

export function Hero() {
  return (
    <section className="relative w-full min-h-screen flex items-center justify-center overflow-hidden bg-[#050A14] pt-16">
      {/* Background Gradient */}
      <div className="absolute inset-0 bg-gradient-to-br from-[#0A1931] via-[#0d1f45] to-[#050A14]"></div>
      
      {/* Grid Effect */}
      <div className="absolute inset-0 opacity-20">
        <svg className="w-full h-full hidden sm:block">
          <defs>
            <pattern id="grid-blue" width="60" height="60" patternUnits="userSpaceOnUse">
              <path d="M 60 0 L 0 0 0 60" fill="none" stroke="white" strokeWidth="0.5" strokeOpacity="0.3"/>
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#grid-blue)" />
        </svg>
      </div>
      
      {/* Glow Effects */}
      <div className="absolute top-1/4 left-1/4 w-64 h-64 md:w-96 md:h-96 bg-[#185ADB] rounded-full blur-[100px] md:blur-[150px] opacity-20 animate-pulse hidden sm:block"></div>
      <div className="absolute bottom-1/4 right-1/4 w-48 h-48 md:w-80 md:h-80 bg-[#FF6600] rounded-full blur-[80px] md:blur-[120px] opacity-15 hidden sm:block"></div>

      <div className="container relative z-10 px-4 md:px-6 mx-auto">
        <div className="max-w-5xl mx-auto text-center mb-3">
          
          {/* Logo */}
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="mb-6 md:mb-10"
          >
            <div className="relative h-16 w-auto aspect-[2/1] mx-auto sm:h-20 md:h-28">
              <Image
                src="/baima-logo.png"
                alt="白马家园 Logo"
                fill
                className="object-contain"
                priority
              />
            </div>
          </motion.div>

          {/* Tags - 放大并突出 */}
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="flex flex-wrap justify-center gap-3 md:gap-4 mb-8 md:mb-10"
          >
            {[
              "小微企业数智化升级",
              "AI + Fintech 生态圈", 
              "军工技术赋能"
            ].map((tag, index) => (
              <span 
                key={index}
                className="px-4 py-2 md:px-5 md:py-2.5 bg-white/10 border border-white/20 rounded-full text-sm md:text-base font-bold text-white backdrop-blur-sm shadow-lg"
              >
                {tag}
              </span>
            ))}
          </motion.div>

          {/* Headline - 超大号字体，核心卖点突出 */}
          <motion.h1 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.1 }}
            className="text-3xl sm:text-5xl md:text-6xl lg:text-7xl font-black text-white mb-6 md:mb-8 leading-tight"
          >
            <span className="block mb-2 text-xl sm:text-2xl md:text-3xl font-light text-gray-300">
              实体商业的
            </span>
            <span className="text-[#FF6600] text-4xl sm:text-6xl md:text-7xl lg:text-8xl block">
              AI 数智增长引擎
            </span>
          </motion.h1>

          {/* Subheadline - 核心价值主张，大字展示 */}
          <motion.p 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="text-xl sm:text-2xl md:text-3xl font-bold text-[#FF6600] mb-6 md:mb-8 tracking-wide"
          >
            支付即锁粉 · 让利即引流 · 跨界即分润
          </motion.p>

          {/* Description */}
          <motion.p 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.3 }}
            className="text-base sm:text-lg md:text-xl text-gray-300 mb-10 md:mb-12 max-w-4xl mx-auto leading-relaxed font-medium"
          >
            连接 <span className="text-white font-bold">120,000+</span> 实体商户，重构线下流量价值闭环。<br className="hidden sm:block"/>
            军工技术赋能 · 人工智能驱动万商互联
          </motion.p>

          {/* CTA Button - 超大醒目按钮 */}
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
          >
            <Link 
              href="/contact#form"
              className="group relative inline-flex items-center gap-3 px-8 py-4 md:px-10 md:py-5 bg-gradient-to-r from-[#FF6600] to-[#FF8C00] text-lg md:text-xl font-black rounded-full shadow-2xl shadow-[#FF6600]/50 transition-all duration-300 hover:scale-105 hover:shadow-[#FF6600]/70"
            >
              <span className="text-lg md:text-xl">立即加入白马联盟</span>
              <ArrowRight className="w-6 h-6 md:w-7 md:h-7 transition-transform group-hover:translate-x-1" />
            </Link>
          </motion.div>
        </div>
      </div>

      {/* Scroll Indicator */}
      <motion.div 
        animate={{ y: [0, 10, 0] }}
        transition={{ duration: 2, repeat: Infinity }}
        className="absolute bottom-4 md:bottom-8 left-1/2 -translate-x-1/2 text-white/30 hidden sm:block"
      >
        <div className="w-6 h-10 md:w-7 md:h-12 border-2 border-current rounded-full flex items-start justify-center p-1.5 md:p-2">
          <div className="w-1.5 h-2 md:w-2 md:h-3 bg-current rounded-full"></div>
        </div>
      </motion.div>
    </section>
  )
}