"use client"

import { useEffect, useState } from "react"
import { Zap, Sparkles } from "lucide-react"
import { Button } from "@/components/ui/button"

export default function HeroSection() {
  const [displayText, setDisplayText] = useState("")
  const fullText = "构建数字未来，连接无限可能"

  useEffect(() => {
    let index = 0
    const timer = setInterval(() => {
      if (index < fullText.length) {
        setDisplayText(fullText.slice(0, index + 1))
        index++
      } else {
        clearInterval(timer)
      }
    }, 150)

    return () => clearInterval(timer)
  }, [])

  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
      {/* Soft Background Gradient */}
      <div className="absolute inset-0 bg-gradient-to-br from-blue-50 via-white to-purple-50">
        <div className="absolute inset-0 bg-gradient-to-r from-blue-100/30 via-purple-100/30 to-pink-100/30 animate-pulse"></div>
      </div>

      {/* Subtle Pattern */}
      <div className="absolute inset-0 opacity-10">
        <div className="soft-pattern"></div>
      </div>

      {/* Content */}
      <div className="relative z-20 text-center px-4 max-w-6xl mx-auto">
        <div className="mb-12">
          {/* Soft glowing orb behind text */}
          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-gradient-to-r from-blue-200/20 via-purple-200/20 to-pink-200/20 rounded-full blur-3xl animate-pulse"></div>

          <h1 className="text-4xl md:text-6xl lg:text-8xl font-bold mb-8 relative">
            <span className="bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent drop-shadow-sm font-mono">
              {displayText}
              <span className="animate-ping">|</span>
            </span>
          </h1>

          <div className="relative mb-12">
            <p className="text-xl md:text-3xl text-gray-600 mb-8 leading-relaxed font-mono">
              <span className="text-blue-600 font-semibold">Web开发</span> |
              <span className="text-purple-600 font-semibold"> 服务器架构</span> |
              <span className="text-pink-600 font-semibold"> 网络解决方案</span>
            </p>
          </div>
        </div>

        <div className="flex flex-col sm:flex-row gap-6 justify-center items-center">
          <Button
            className="glass-button-white bg-white/40 backdrop-blur-xl border border-white/50 text-gray-800 font-bold px-10 py-4 rounded-2xl shadow-lg hover:shadow-xl hover:-translate-y-2 transition-all duration-500 text-lg font-mono group"
            onClick={() =>
              window.open(
                "mailto:zichen.hao@entalnet.com?subject=项目合作咨询&body=您好，我想了解更多关于项目合作的信息。",
                "_blank",
              )
            }
          >
            <Zap className="mr-3 group-hover:animate-spin" size={24} />
            开始合作
            <Sparkles className="ml-3 group-hover:animate-pulse" size={20} />
          </Button>
        </div>

        {/* Soft Floating Elements */}
        <div className="absolute top-20 left-10 w-3 h-3 bg-blue-400 rounded-full animate-bounce shadow-lg opacity-60"></div>
        <div className="absolute top-40 right-20 w-4 h-4 bg-purple-400 rounded-full animate-bounce delay-500 shadow-lg opacity-60"></div>
        <div className="absolute bottom-20 left-20 w-2 h-2 bg-pink-400 rounded-full animate-bounce delay-1000 shadow-lg opacity-60"></div>
        <div className="absolute top-60 right-40 w-3 h-3 bg-indigo-400 rounded-full animate-bounce delay-1500 shadow-lg opacity-60"></div>
      </div>
    </section>
  )
}