import { useEffect, useRef } from 'react';
import { motion, useInView, useAnimation } from 'framer-motion';
import { ArrowDown, TrendingUp, Users, Building2, Award } from 'lucide-react';
import { COMPANY_INFO, COMPANY_STATS } from '../lib/constants';

/**
 * 数字递增动画组件
 */
const CountUpNumber: React.FC<{
  value: string;
  suffix?: string;
  duration?: number;
}> = ({ value, suffix = '', duration = 2 }) => {
  const ref = useRef<HTMLSpanElement>(null);
  const isInView = useInView(ref, { once: true });
  const controls = useAnimation();

  useEffect(() => {
    if (isInView && ref.current) {
      const numValue = parseInt(value.replace(/[^0-9]/g, ''));
      const hasPlus = value.includes('+');
      const hasYi = value.includes('亿');

      controls.start({
        opacity: [0, 1],
        scale: [0.5, 1.2, 1],
      });

      // 数字递增动画
      let current = 0;
      const increment = numValue / (duration * 60);
      const timer = setInterval(() => {
        current += increment;
        if (current >= numValue) {
          current = numValue;
          clearInterval(timer);
        }
        let display = Math.floor(current);
        if (hasYi) {
          display = Math.floor(current);
        }
        ref.current.textContent = display.toLocaleString() + (hasPlus ? '+' : '') + (hasYi ? '亿' : suffix);
      }, 1000 / 60);

      return () => clearInterval(timer);
    }
  }, [isInView, value, suffix, duration, controls]);

  return (
    <motion.span
      ref={ref}
      className="text-3xl md:text-4xl font-bold text-accent"
      initial={{ opacity: 0, scale: 0.5 }}
      animate={isInView ? { opacity: 1, scale: 1 } : {}}
      transition={{ duration: 0.5 }}
    >
      0
    </motion.span>
  );
};

/**
 * 统计数据项组件
 */
const StatItem: React.FC<{
  icon: React.ComponentType<{ size?: number; className?: string }>;
  label: string;
  value: string;
  suffix?: string;
}> = ({ icon: Icon, label, value, suffix }) => (
  <motion.div
    className="flex items-center gap-4 p-4 bg-white/10 rounded-xl backdrop-blur-sm"
    whileHover={{ scale: 1.02, backgroundColor: 'rgba(255,255,255,0.15)' }}
    transition={{ duration: 0.2 }}
  >
    <div className="flex items-center justify-center w-12 h-12 rounded-lg bg-accent/20">
      <Icon size={24} className="text-accent" />
    </div>
    <div>
      <div className="flex items-baseline gap-1">
        <CountUpNumber value={value} suffix={suffix} />
      </div>
      <p className="text-sm text-gray-300">{label}</p>
    </div>
  </motion.div>
);

/**
 * Hero 组件 - 首页大图区域
 */
export const Hero: React.FC = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const statsRef = useRef<HTMLDivElement>(null);

  // 滚动到指定区域
  const scrollToSection = (sectionId: string) => {
    const element = document.getElementById(sectionId);
    if (element) {
      const offset = 80;
      const elementPosition = element.getBoundingClientRect().top;
      const offsetPosition = elementPosition + window.pageYOffset - offset;

      window.scrollTo({
        top: offsetPosition,
        behavior: 'smooth',
      });
    }
  };

  return (
    <section
      ref={containerRef}
      className="relative min-h-screen flex items-center overflow-hidden"
      role="banner"
    >
      {/* 背景层 */}
      <div className="absolute inset-0 z-0">
        {/* 图片背景 */}
        <div
          className="absolute inset-0 bg-cover bg-center bg-no-repeat"
          style={{ backgroundImage: 'url(/images/hero-building.jpg)' }}
        />
        {/* 渐变遮罩 - 确保文字可读性 */}
        <div className="absolute inset-0 bg-gradient-to-br from-primary-dark/90 via-primary/80 to-primary/70" />
        {/* 装饰性图案 */}
        <div className="absolute inset-0 opacity-10">
          <div className="absolute top-0 right-0 w-[800px] h-[800px] rounded-full bg-white/5 blur-3xl -translate-y-1/2 translate-x-1/2" />
          <div className="absolute bottom-0 left-0 w-[600px] h-[600px] rounded-full bg-accent/10 blur-3xl translate-y-1/2 -translate-x-1/2" />
        </div>
        {/* 网格图案 */}
        <div
          className="absolute inset-0 opacity-5"
          style={{
            backgroundImage: `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
                             linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`,
            backgroundSize: '50px 50px',
          }}
        />
      </div>

      {/* 主内容区域 */}
      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
          {/* 左侧内容 */}
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, ease: 'easeOut' }}
          >
            {/* 企业标语 */}
            <motion.h1
              className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-tight"
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2, duration: 0.6 }}
            >
              {COMPANY_INFO.slogan}
            </motion.h1>

            {/* 企业名称 */}
            <motion.p
              className="mt-6 text-2xl sm:text-3xl font-semibold text-accent"
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.4, duration: 0.6 }}
            >
              {COMPANY_INFO.fullName}
            </motion.p>

            {/* 企业简介 */}
            <motion.p
              className="mt-6 text-lg text-gray-200 leading-relaxed max-w-xl"
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.6, duration: 0.6 }}
            >
              {COMPANY_INFO.description}
            </motion.p>

            {/* CTA 按钮组 */}
            <motion.div
              className="mt-8 flex flex-wrap gap-4"
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.8, duration: 0.6 }}
            >
              <motion.button
                onClick={() => scrollToSection('about')}
                className="inline-flex items-center gap-2 px-8 py-4 bg-accent text-primary-dark font-semibold rounded-lg shadow-lg shadow-accent/25 hover:shadow-xl hover:shadow-accent/30 transition-all duration-300"
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.98 }}
              >
                了解更多
                <ArrowDown size={20} />
              </motion.button>
              <motion.button
                onClick={() => scrollToSection('contact')}
                className="inline-flex items-center gap-2 px-8 py-4 border-2 border-white/30 text-white font-semibold rounded-lg hover:bg-white/10 transition-all duration-300"
                whileHover={{ scale: 1.05, borderColor: 'rgba(255,255,255,0.5)' }}
                whileTap={{ scale: 0.98 }}
              >
                联系我们
              </motion.button>
            </motion.div>
          </motion.div>

          {/* 右侧统计数据 */}
          <motion.div
            ref={statsRef}
            className="space-y-4"
            initial={{ opacity: 0, x: 50 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: 0.4, duration: 0.8, ease: 'easeOut' }}
          >
            <motion.h2
              className="text-xl font-semibold text-white mb-6"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 0.6 }}
            >
              核心数据
            </motion.h2>

            <div className="grid grid-cols-2 gap-4">
              {/* 成立年限 */}
              <StatItem
                icon={Award}
                label={COMPANY_STATS[0].label}
                value={COMPANY_STATS[0].value}
                suffix={COMPANY_STATS[0].suffix}
              />
              {/* 员工数量 */}
              <StatItem
                icon={Users}
                label={COMPANY_STATS[1].label}
                value={COMPANY_STATS[1].value}
                suffix={COMPANY_STATS[1].suffix}
              />
              {/* 服务客户 */}
              <StatItem
                icon={Building2}
                label={COMPANY_STATS[2].label}
                value={COMPANY_STATS[2].value}
                suffix={COMPANY_STATS[2].suffix}
              />
              {/* 管理资产 */}
              <StatItem
                icon={TrendingUp}
                label={COMPANY_STATS[3].label}
                value={COMPANY_STATS[3].value}
                suffix={COMPANY_STATS[3].suffix}
              />
            </div>

            {/* 额外说明 */}
            <motion.p
              className="mt-6 text-sm text-gray-400 text-center"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 1 }}
            >
              数据截至 2025 年 12 月
            </motion.p>
          </motion.div>
        </div>
      </div>

      {/* 底部装饰 */}
      <motion.div
        className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-background to-transparent"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 1.2 }}
      />

      {/* 滚动提示 */}
      <motion.div
        className="absolute bottom-8 left-1/2 -translate-x-1/2"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1, y: [0, 10, 0] }}
        transition={{ delay: 1.5, duration: 2, repeat: Infinity }}
      >
        <button
          onClick={() => scrollToSection('about')}
          className="flex flex-col items-center gap-2 text-white/60 hover:text-accent transition-colors duration-300"
          aria-label="向下滚动"
        >
          <span className="text-xs uppercase tracking-wider">Scroll</span>
          <ArrowDown size={20} />
        </button>
      </motion.div>
    </section>
  );
};

export default Hero;
