'use client'

import { ArrowRight, Play, Zap, Shield, DollarSign, Sparkles } from 'lucide-react'

export default function Hero() {
  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-b from-apple-gray-50 to-white">
      {/* Background Elements */}
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute top-1/4 -left-20 w-96 h-96 bg-apple-blue/10 rounded-full blur-3xl animate-float" />
        <div className="absolute bottom-1/4 -right-20 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-float" style={{ animationDelay: '1s' }} />
      </div>

      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-32 pb-20 text-center">
        {/* Badge */}
        <div className="inline-flex items-center space-x-2 bg-gradient-to-r from-green-500 to-emerald-600 px-6 py-3 rounded-full apple-shadow mb-8 animate-fade-in">
          <span className="w-2 h-2 bg-white rounded-full animate-pulse" />
          <span className="text-sm text-white font-semibold">
            🎉 免费版开放体验 · 10人团队免费用 · 升级解锁无限制
          </span>
        </div>

        {/* Main Heading */}
        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-apple-gray-900 mb-4 animate-slide-up leading-tight">
          电商素材管理，终于<span className="text-gradient">简单了</span>
        </h1>
        <h2 className="text-2xl sm:text-3xl lg:text-4xl font-semibold mb-6 animate-slide-up text-apple-gray-700" style={{ animationDelay: '0.1s' }}>
          免费版立即试用 · 付费版解锁全部能力
        </h2>

        {/* Description */}
        <p className="text-base sm:text-lg text-apple-gray-600 max-w-3xl mx-auto mb-8 leading-relaxed animate-slide-up" style={{ animationDelay: '0.2s' }}>
          <span className="text-green-600 font-semibold">免费版永久使用（10人+100素材）</span>
          <span className="text-apple-gray-700"> · </span>
          <span className="text-apple-blue font-semibold">付费版无限制（推广期超值特惠）</span>
          <br />
          基于NAS私有化部署，数据100%掌控，10分钟快速上线
        </p>

        {/* Key Features Badges */}
        <div className="flex flex-wrap items-center justify-center gap-3 mb-10 animate-slide-up" style={{ animationDelay: '0.25s' }}>
          <div className="flex items-center space-x-2 bg-green-50 px-4 py-2 rounded-full border border-green-200">
            <Sparkles className="w-4 h-4 text-green-600" />
            <span className="text-sm font-medium text-green-700">免费版永久可用</span>
          </div>
          <div className="flex items-center space-x-2 bg-blue-50 px-4 py-2 rounded-full border border-blue-200">
            <Zap className="w-4 h-4 text-blue-600" />
            <span className="text-sm font-medium text-blue-700">10分钟部署</span>
          </div>
          <div className="flex items-center space-x-2 bg-purple-50 px-4 py-2 rounded-full border border-purple-200">
            <Shield className="w-4 h-4 text-purple-600" />
            <span className="text-sm font-medium text-purple-700">数据私有化</span>
          </div>
          <div className="flex items-center space-x-2 bg-orange-50 px-4 py-2 rounded-full border border-orange-200">
            <DollarSign className="w-4 h-4 text-orange-600" />
            <span className="text-sm font-medium text-orange-700">一次付费永久用</span>
          </div>
        </div>

        {/* CTA Buttons */}
        <div className="flex flex-col sm:flex-row items-center justify-center gap-4 animate-slide-up" style={{ animationDelay: '0.3s' }}>
          <a
            href="http://sc.flnxi.com"
            target="_blank"
            rel="noopener noreferrer"
            className="group px-8 py-4 bg-gradient-to-r from-green-500 to-emerald-600 text-white rounded-full text-lg font-semibold button-hover apple-shadow-lg flex items-center space-x-2 w-full sm:w-auto justify-center"
          >
            <span>免费体验 (10人100素材)</span>
            <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
          </a>
          <a
            href="#system-features"
            className="group px-8 py-4 bg-apple-blue text-white rounded-full text-lg font-semibold button-hover apple-shadow-lg flex items-center space-x-2 w-full sm:w-auto justify-center"
          >
            <Zap className="w-5 h-5" />
            <span>查看系统功能</span>
          </a>
        </div>

        {/* Stats */}
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-6 max-w-4xl mx-auto mt-16 animate-fade-in" style={{ animationDelay: '0.4s' }}>
          <div className="text-center bg-white rounded-2xl p-6 apple-shadow-sm hover:apple-shadow transition-all">
            <div className="text-3xl sm:text-4xl font-bold text-green-600 mb-2">免费版</div>
            <div className="text-xs sm:text-sm text-apple-gray-600">0成本试用</div>
          </div>
          <div className="text-center bg-white rounded-2xl p-6 apple-shadow-sm hover:apple-shadow transition-all">
            <div className="text-3xl sm:text-4xl font-bold text-apple-blue mb-2">10分钟</div>
            <div className="text-xs sm:text-sm text-apple-gray-600">快速部署</div>
          </div>
          <div className="text-center bg-white rounded-2xl p-6 apple-shadow-sm hover:apple-shadow transition-all">
            <div className="text-3xl sm:text-4xl font-bold text-purple-600 mb-2">100%</div>
            <div className="text-xs sm:text-sm text-apple-gray-600">数据私有化</div>
          </div>
          <div className="text-center bg-white rounded-2xl p-6 apple-shadow-sm hover:apple-shadow transition-all">
            <div className="text-3xl sm:text-4xl font-bold text-orange-600 mb-2">买断制</div>
            <div className="text-xs sm:text-sm text-apple-gray-600">一次付费</div>
          </div>
        </div>
      </div>

      {/* Scroll Indicator */}
      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
        <div className="w-6 h-10 border-2 border-apple-gray-300 rounded-full flex items-start justify-center p-2">
          <div className="w-1.5 h-3 bg-apple-gray-400 rounded-full" />
        </div>
      </div>
    </section>
  )
}