'use client';

import { useEffect, useRef, useState } from 'react';
import { motion } from 'framer-motion';
import { Button } from '@/components/ui/button';
import { COMPANY_INFO, STATS } from '@/lib/constants';
import { ArrowRight, Shield, Zap, Award } from 'lucide-react';

const features = [
  { icon: Shield, text: '安全可靠' },
  { icon: Zap, text: '高效便捷' },
  { icon: Award, text: '专业服务' },
];

export function HeroSection() {
  const [isVisible, setIsVisible] = useState(false);
  const sectionRef = useRef<HTMLElement>(null);
  const [statsVisible, setStatsVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
        }
      },
      { threshold: 0.1 }
    );

    if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }

    return () => observer.disconnect();
  }, []);

  useEffect(() => {
    const statsEl = document.getElementById('stats-section');
    if (!statsEl) return;
    
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setStatsVisible(true);
        }
      },
      { threshold: 0.5 }
    );

    observer.observe(statsEl);
    return () => observer.disconnect();
  }, []);

  const handleScrollTo = (id: string) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return (
    <section 
      id="home" 
      ref={sectionRef}
      className="relative min-h-screen flex items-center pt-16 overflow-hidden bg-gradient-to-b from-[#F5F7FA] to-white"
    >
      <div className="absolute inset-0 pointer-events-none overflow-hidden">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[600px] bg-[radial-gradient(ellipse_at_center,rgba(0,94,184,0.05)_0%,transparent_60%)]" />
        
        <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[600px] h-[400px] bg-[radial-gradient(ellipse_at_center,rgba(196,30,58,0.04)_0%,transparent_50%)]" />
      </div>

      <div className="container-wide py-24 md:py-32 lg:py-40 relative z-10">
        <div className="max-w-4xl mx-auto text-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={isVisible ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6 }}
            className="mb-8"
          >
            <span className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-[#005EB8]/30 bg-[#E8F4FD] text-[#005EB8] text-sm font-medium">
              数字印章 · 智连未来
            </span>
          </motion.div>

          <motion.h1
            initial={{ opacity: 0, y: 20 }}
            animate={isVisible ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.1 }}
            className="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight mb-6"
          >
            <span className="text-[#1A1A2E]">{COMPANY_INFO.shortName}</span>
          </motion.h1>
          
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={isVisible ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.15 }}
            className="text-xl sm:text-2xl text-[#4A5568] mb-4"
          >
            企业数字化转型服务商
          </motion.p>

          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={isVisible ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="text-lg text-[#718096] mb-10 max-w-2xl mx-auto leading-relaxed"
          >
            融合金融科技专业品质与中国传统美学，为您打造卓越的数字体验
          </motion.p>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={isVisible ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.3 }}
            className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-8"
          >
            <Button 
              size="lg"
              onClick={() => handleScrollTo('contact')}
              className="min-w-[180px]"
            >
              立即咨询
              <ArrowRight className="w-4 h-4 ml-2" />
            </Button>
            <Button 
              size="lg"
              variant="outline"
              onClick={() => handleScrollTo('about')}
              className="min-w-[180px]"
            >
              了解更多
            </Button>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={isVisible ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.35 }}
            className="flex flex-wrap gap-4 justify-center mb-16"
          >
            {features.map((feature, index) => (
              <div 
                key={index} 
                className="flex items-center gap-2 px-4 py-2 rounded-full bg-white border border-[#E2E8F0] transition-all duration-300 hover:border-[#005EB8] hover:shadow-md"
              >
                <feature.icon className="w-4 h-4 text-[#005EB8]" />
                <span className="text-sm text-[#4A5568]">{feature.text}</span>
              </div>
            ))}
          </motion.div>

          <motion.div
            id="stats-section"
            initial={{ opacity: 0, y: 20 }}
            animate={isVisible ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.4 }}
            className="pt-16 border-t border-[#E2E8F0]"
          >
            <div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
              {STATS.map((stat, index) => (
                <StatItem 
                  key={stat.label} 
                  stat={stat} 
                  index={index}
                  shouldAnimate={statsVisible}
                />
              ))}
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}

function StatItem({ stat, index, shouldAnimate }: { 
  stat: { value: string; label: string }; 
  index: number;
  shouldAnimate: boolean;
}) {
  const numericValue = parseInt(stat.value.replace(/\D/g, ''));
  const suffix = stat.value.replace(/[\d]/g, '');

  return (
    <motion.div 
      className="group cursor-default text-center"
      initial={{ opacity: 0, y: 20 }}
      animate={shouldAnimate ? { opacity: 1, y: 0 } : {}}
      transition={{ duration: 0.5, delay: index * 0.1 }}
    >
      <div className="text-4xl sm:text-5xl font-bold text-[#C41E3A] mb-3">
        {shouldAnimate ? (
          <AnimatedCounter value={numericValue} suffix={suffix} />
        ) : (
          <span className="text-[#CBD5E0]">0{suffix}</span>
        )}
      </div>
      <div className="text-sm text-[#718096] group-hover:text-[#4A5568] transition-colors">
        {stat.label}
      </div>
    </motion.div>
  );
}

function AnimatedCounter({ value, suffix }: { value: number; suffix: string }) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const duration = 2000;
    const steps = 60;
    const increment = value / steps;
    let current = 0;
    
    const timer = setInterval(() => {
      current += increment;
      if (current >= value) {
        setCount(value);
        clearInterval(timer);
      } else {
        setCount(Math.floor(current));
      }
    }, duration / steps);

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

  return <>{count}{suffix}</>;
}
