'use client';

import { useEffect, useRef, useState } from 'react';
import { motion } from 'framer-motion';
import { RippleButton, SealButton } from '@/components/ui/ripple-button';
import { GradientText, MagneticButton, BlurReveal, CounterWithEffect } from '@/lib/animations';
import { InkBackground } from '@/components/ui/ink-decoration';
import { DataParticleFlow } from '@/components/effects/data-particle-flow';
import { SubtleDots } from '@/components/effects/subtle-dots';
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' });
    }
  };

  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, id: string) => {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      handleScrollTo(id);
    }
  };

  return (
    <section 
      id="home" 
      ref={sectionRef}
      aria-labelledby="hero-heading"
      className="relative min-h-screen flex items-center pt-16 overflow-hidden bg-linear-to-b from-[#FAFAFA] to-white"
    >
      <InkBackground />
      <DataParticleFlow
        particleCount={60}
        color="#C41E3A"
        intensity="subtle"
        shape="square"
        effect="pulse"
      />
      <SubtleDots color="#C41E3A" count={8} />

      <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, scale: 0.95 }}
            animate={isVisible ? { opacity: 1, y: 0, scale: 1 } : {}}
            transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
            className="mb-8"
          >
            <span className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-[#1C1C1C]/20 bg-[#F5F5F5] text-[#1C1C1C] text-sm font-medium">
              智连未来，成长伙伴
            </span>
          </motion.div>

          <motion.h1
            id="hero-heading"
            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 tracking-tight mb-6 font-calligraphy"
            style={{ 
              fontWeight: 'normal',
              WebkitFontSmoothing: 'antialiased',
              MozOsxFontSmoothing: 'grayscale',
              textRendering: 'optimizeLegibility'
            }}
          >
            {COMPANY_INFO.shortName}
          </motion.h1>
          
          <BlurReveal delay={0.3}>
            <p className="text-xl sm:text-2xl text-[#4A5568] mb-4">
              <GradientText colors={['#C41E3A', '#E04A68', '#C41E3A']} duration={4}>
                企业数字化转型服务商
              </GradientText>
            </p>
          </BlurReveal>

          <BlurReveal delay={0.4}>
            <p className="text-lg text-[#718096] mb-10 max-w-2xl mx-auto leading-relaxed">
              以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者
            </p>
          </BlurReveal>

          <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"
          >
            <MagneticButton strength={0.4}>
              <SealButton 
                size="lg"
                onClick={() => handleScrollTo('contact')}
                onKeyDown={(e) => handleKeyDown(e, 'contact')}
                className="min-w-45"
              >
                立即咨询
                <ArrowRight className="w-4 h-4 ml-2" />
              </SealButton>
            </MagneticButton>
            <MagneticButton strength={0.4}>
              <RippleButton 
                size="lg"
                variant="outline"
                onClick={() => handleScrollTo('about')}
                onKeyDown={(e) => handleKeyDown(e, 'about')}
                className="min-w-45"
              >
                了解更多
              </RippleButton>
            </MagneticButton>
          </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) => (
              <motion.div 
                key={index}
                initial={{ opacity: 0, scale: 0.9 }}
                animate={isVisible ? { opacity: 1, scale: 1 } : {}}
                transition={{ duration: 0.4, delay: 0.4 + index * 0.1 }}
                whileHover={{ scale: 1.05, y: -2 }}
                className="flex items-center gap-2 px-4 py-2 rounded-full bg-[#FAFAFA] border border-[#E5E5E5] transition-all duration-300 hover:border-[#1C1C1C] hover:shadow-md cursor-default"
              >
                <feature.icon className="w-4 h-4 text-[#C41E3A]" />
                <span className="text-sm text-[#3D3D3D]">{feature.text}</span>
              </motion.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, scale: 0.9 }}
      animate={shouldAnimate ? { opacity: 1, y: 0, scale: 1 } : {}}
      transition={{ duration: 0.5, delay: index * 0.1, type: 'spring', stiffness: 100 }}
      whileHover={{ scale: 1.05, y: -5 }}
    >
      <div className="text-4xl sm:text-5xl font-bold text-[#C41E3A] mb-3">
        {shouldAnimate ? (
          <CounterWithEffect 
            end={numericValue} 
            suffix={suffix} 
            effect="bounce"
            duration={2000}
          />
        ) : (
          <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>
  );
}