'use client';

import { useRef, useState, useEffect } from 'react';
import { motion, useScroll, useTransform, useInView } from 'framer-motion';
import { StaticLink } from '@/components/ui/static-link';
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
import { Badge } from '@/components/ui/badge';
import {
  ArrowRight, ArrowUpRight, ChevronDown,
  Target, Briefcase, Cpu, Brain,
  BarChart3,
  Building2, Factory, ShoppingBag, Heart,
  GraduationCap, Globe2,
  Quote, CheckCircle2,
  Sparkles, Zap, TrendingUp, TrendingDown, Minus, Award,
} from 'lucide-react';
import { useReducedMotion } from '@/hooks/use-reduced-motion';
import { cn } from '@/lib/utils';
import { GrainOverlay, FloatingInkParticles, SectionLabel, EASE_OUT } from '@/components/ui/page-decoration';

const HOME_PARTICLES = [
  { x: 12, y: 28, scale: 0.8, duration: 10, delay: 0, size: 3 },
  { x: 78, y: 55, scale: 0.6, duration: 12, delay: 1.5, size: 2 },
  { x: 42, y: 38, scale: 1.0, duration: 9, delay: 0.8, size: 4 },
  { x: 88, y: 22, scale: 0.7, duration: 11, delay: 2.2, size: 2.5 },
  { x: 22, y: 72, scale: 0.9, duration: 8.5, delay: 1.0, size: 3.5 },
  { x: 62, y: 48, scale: 0.55, duration: 13, delay: 2.8, size: 2 },
  { x: 55, y: 18, scale: 0.65, duration: 10.5, delay: 3.2, size: 2.5 },
  { x: 32, y: 62, scale: 0.75, duration: 9.5, delay: 0.5, size: 3 },
];
const EASE_SPRING = { type: 'spring', stiffness: 300, damping: 30 } as const;

const SERVICES = [
  {
    number: '01',
    title: '战略咨询',
    subtitle: 'Strategy Consulting',
    desc: '数字化转型战略规划与落地路径设计，让技术投资真正驱动业务增长。从愿景制定到执行落地，陪伴企业穿越转型周期。',
    href: '/services/consulting',
    icon: <Target className="w-7 h-7" />,
    colorClass: 'text-brand',
    bgClass: 'bg-brand-soft',
    borderClass: 'group-hover:border-brand/30',
    highlights: ['数字化成熟度评估', '转型路线图设计', '组织变革管理', '技术选型顾问'],
    metrics: [
      { value: '200+', label: '战略项目' },
      { value: '95%', label: '落地成功率' },
    ],
  },
  {
    number: '02',
    title: '企业软件',
    subtitle: 'Enterprise Software',
    desc: 'ERP、CRM、BI 等核心系统的评估、实施与定制化开发。基于行业最佳实践，打造适配企业实际的数字化底座。',
    href: '/products',
    icon: <Briefcase className="w-7 h-7" />,
    colorClass: 'text-accent-blue',
    bgClass: 'bg-accent-blue-soft',
    borderClass: 'group-hover:border-accent-blue/30',
    highlights: ['ERP 实施与优化', 'CRM 客户关系管理', 'BI 商业智能', '低代码平台'],
    metrics: [
      { value: '300+', label: '系统实施' },
      { value: '85%', label: '准时交付' },
    ],
  },
  {
    number: '03',
    title: '技术服务',
    subtitle: 'Technology Services',
    desc: '系统集成、数据中台、云原生架构设计与技术外包服务。以工程化能力保障系统的稳定性、可扩展性与持续迭代。',
    href: '/services',
    icon: <Cpu className="w-7 h-7" />,
    colorClass: 'text-accent-teal',
    bgClass: 'bg-accent-teal-soft',
    borderClass: 'group-hover:border-accent-teal/30',
    highlights: ['系统集成与架构', '数据中台建设', '云原生迁移', '研发效能提升'],
    metrics: [
      { value: '500+', label: '技术项目' },
      { value: '99.9%', label: '系统可用性' },
    ],
  },
  {
    number: '04',
    title: 'AI 赋能',
    subtitle: 'AI Empowerment',
    desc: 'AI 成熟度评估、场景落地与大模型应用开发。帮助企业找到 AI 与业务的最佳结合点，实现智能化升级。',
    href: '/services/ai',
    icon: <Brain className="w-7 h-7" />,
    colorClass: 'text-accent-amber',
    bgClass: 'bg-accent-amber-soft',
    borderClass: 'group-hover:border-accent-amber/30',
    highlights: ['AI 战略规划', '大模型应用开发', '智能流程自动化', '数据治理'],
    metrics: [
      { value: '50+', label: 'AI 项目' },
      { value: '3x', label: '效率提升' },
    ],
  },
];

const INDUSTRIES = [
  { icon: <Factory className="w-6 h-6" />, name: '智能制造', desc: '工业4.0、智能工厂、供应链数字化', count: '120+', colorClass: 'text-brand', bgClass: 'bg-brand/10', gradientClass: 'from-brand/30' },
  { icon: <ShoppingBag className="w-6 h-6" />, name: '贸易零售', desc: '全渠道零售、会员体系、数字营销', count: '80+', colorClass: 'text-accent-blue', bgClass: 'bg-accent-blue/10', gradientClass: 'from-accent-blue/30' },
  { icon: <Heart className="w-6 h-6" />, name: '医疗健康', desc: '医院信息化、医疗数据合规、智慧医疗', count: '60+', colorClass: 'text-accent-teal', bgClass: 'bg-accent-teal/10', gradientClass: 'from-accent-teal/30' },
  { icon: <GraduationCap className="w-6 h-6" />, name: '教育科技', desc: '在线教育、学习管理、教育数字化', count: '50+', colorClass: 'text-accent-amber', bgClass: 'bg-accent-amber/10', gradientClass: 'from-accent-amber/30' },
  { icon: <Building2 className="w-6 h-6" />, name: '金融服务', desc: '金融科技、风控合规、数据中台', count: '40+', colorClass: 'text-brand', bgClass: 'bg-brand/10', gradientClass: 'from-brand/30' },
  { icon: <Globe2 className="w-6 h-6" />, name: '跨境电商', desc: '独立站、跨境支付、全球化运营', count: '30+', colorClass: 'text-accent-blue', bgClass: 'bg-accent-blue/10', gradientClass: 'from-accent-blue/30' },
];

const STATS = [
  { value: 500, suffix: '+', label: '企业客户', sub: '累计服务', trend: '23% YoY', trendDir: 'up' as const, highlight: '制造业与零售业为主力军' },
  { value: 12, suffix: '年', label: '行业经验', sub: '深耕积累', trend: 'since 2014', trendDir: 'neutral' as const, highlight: '跨越四轮技术变革周期' },
  { value: 98, suffix: '%', label: '客户满意度', sub: '持续服务', trend: '97%续约率', trendDir: 'up' as const, highlight: '80%客户合作超过3年' },
  { value: 200, suffix: '+', label: '专业顾问', sub: '技术专家', trend: '年均增长30人', trendDir: 'up' as const, highlight: '10年以上资深顾问占40%' },
];

const CASES = [
  {
    industry: '智能制造',
    title: '大型制造企业 ERP 全面升级项目',
    challenge: '该企业原有 ERP 系统已运行 8 年，无法支撑新业务模式，数据孤岛严重，决策效率低下。',
    solution: '采用分步迁移策略，以数据中台为核心，重构业务流程，实现从生产到财务的全链路数字化。',
    result: '项目一次性上线成功，业务中断时间控制在 48 小时内，关键指标全面超越预期。',
    metrics: [
      { value: '40%', label: '生产效率提升' },
      { value: '25%', label: '库存成本下降' },
      { value: '99.5%', label: '数据准确率' },
    ],
    quote: '睿新团队不仅完成了系统升级，更帮助我们建立了数据驱动的运营体系，这是超出预期的价值。',
    author: 'CTO',
    company: '某上市制造企业',
    colorClass: 'text-brand',
    bgClass: 'bg-brand',
  },
  {
    industry: '贸易零售',
    title: '连锁零售全渠道数字化升级',
    challenge: '线上线下渠道割裂，会员体系不统一，库存数据不同步，导致客户体验差、运营成本高。',
    solution: '构建全渠道中台，打通会员、库存、订单、营销体系，实现线上线下一体化运营。',
    result: '6 个月内完成 200+ 门店的系统切换，营收实现快速增长，会员复购率显著提升。',
    metrics: [
      { value: '25%', label: '营收增长' },
      { value: '50%', label: '库存周转优化' },
      { value: '3x', label: '会员复购率' },
    ],
    quote: '从咨询到落地，睿新团队展现出了超出预期的专业能力和责任心，是值得信赖的合作伙伴。',
    author: 'CEO',
    company: '某区域零售龙头',
    colorClass: 'text-accent-blue',
    bgClass: 'bg-accent-blue',
  },
];

const INSIGHTS = [
  {
    category: '研究报告',
    date: '2026.06.15',
    title: '2026 中国企业数字化转型趋势报告',
    excerpt: '基于 500+ 企业调研数据，深度解析制造、零售、医疗三大行业数字化成熟度与关键趋势。报告共 120 页，包含 23 个行业标杆案例。',
    readTime: '12 分钟',
    featured: true,
  },
  {
    category: '行业洞察',
    date: '2026.05.28',
    title: 'AI 浪潮下的企业数字化升级路径',
    excerpt: '探讨企业如何在 AI 时代找到最适合的技术投入方向，避免盲目跟风，实现务实落地。',
    readTime: '8 分钟',
    featured: false,
  },
  {
    category: '实践指南',
    date: '2026.04.20',
    title: 'ERP 选型避坑指南：从需求到落地全流程',
    excerpt: '总结 200+ ERP 实施项目经验，给出完整的选型方法论与风险控制框架。',
    readTime: '15 分钟',
    featured: false,
  },
];

const APPROACH = [
  {
    step: '01',
    title: '诊断评估',
    desc: '全面调研企业现状，识别数字化痛点与机会点，输出可执行的转型路线图。',
    duration: '2-4 周',
    deliverables: ['现状评估报告', '转型路线图', '优先级排序'],
    icon: <Sparkles className="w-6 h-6" />,
  },
  {
    step: '02',
    title: '方案设计',
    desc: '基于行业最佳实践与企业实际，定制技术架构与实施计划，确保方案可落地、可演进。',
    duration: '4-6 周',
    deliverables: ['技术架构设计', '实施计划', '成本收益分析'],
    icon: <Zap className="w-6 h-6" />,
  },
  {
    step: '03',
    title: '交付落地',
    desc: '以敏捷迭代方式推进项目实施，全程透明沟通，确保质量、进度与成本可控。',
    duration: '3-9 月',
    deliverables: ['系统上线', '知识转移', '运维手册'],
    icon: <TrendingUp className="w-6 h-6" />,
  },
  {
    step: '04',
    title: '持续运营',
    desc: '项目交付后提供持续的技术支持与优化建议，陪伴企业数字化能力持续成长。',
    duration: '长期陪伴',
    deliverables: ['运维支持', '持续优化', '定期复盘'],
    icon: <Award className="w-6 h-6" />,
  },
];

function useCountUp(target: number, start: boolean, duration: number = 2000) {
  const [count, setCount] = useState(0);
  const prefersReducedMotion = useReducedMotion();

  useEffect(() => {
    if (!start || prefersReducedMotion) {
      setCount(target);
      return;
    }

    const startTime = performance.now();
    let animationId: number;

    const animate = (currentTime: number) => {
      const elapsed = currentTime - startTime;
      const progress = Math.min(elapsed / duration, 1);
      const easeOutQuart = 1 - Math.pow(1 - progress, 4);
      setCount(Math.floor(target * easeOutQuart));

      if (progress < 1) {
        animationId = requestAnimationFrame(animate);
      } else {
        setCount(target);
      }
    };

    animationId = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(animationId);
  }, [target, start, duration, prefersReducedMotion]);

  return count;
}

function GridLines() {
  return (
    <div className="absolute inset-0 pointer-events-none opacity-[0.04]">
      <div
        className="w-full h-full"
        style={{
          backgroundImage: `
            linear-gradient(rgba(255,255,255,1) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px)
          `,
          backgroundSize: '140px 140px',
        }}
      />
    </div>
  );
}

function DiagonalLines({ className = '' }: { className?: string }) {
  return (
    <div className={cn('absolute pointer-events-none opacity-[0.06]', className)}>
      <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
        <line x1="0" y1="100" x2="100" y2="0" stroke="white" strokeWidth="0.5" />
        <line x1="0" y1="80" x2="80" y2="0" stroke="white" strokeWidth="0.5" />
        <line x1="20" y1="100" x2="100" y2="20" stroke="white" strokeWidth="0.5" />
      </svg>
    </div>
  );
}

function StatItem({ value, suffix, label, sub, start, delay, trend, trendDir, highlight }: { value: number; suffix: string; label: string; sub: string; start: boolean; delay: number; trend?: string; trendDir?: 'up' | 'down' | 'neutral'; highlight?: string }) {
  const count = useCountUp(value, start);
  const TrendIcon = trendDir === 'up' ? TrendingUp : trendDir === 'down' ? TrendingDown : Minus;
  const trendColor = trendDir === 'up' ? 'text-success' : trendDir === 'down' ? 'text-error' : 'text-dark-text-muted';
  return (
    <ScrollReveal delay={delay}>
      <div className="relative group">
        <div className="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tighter mb-4">
          <span className="text-white">{count}</span>
          <span className="font-bold text-brand">{suffix}</span>
        </div>
        <div className="flex items-center gap-4 mb-3">
          <div className="w-10 h-px bg-brand" />
          <div>
            <div className="text-white font-semibold text-base">{label}</div>
            <div className="text-sm text-dark-text-muted mt-0.5">{sub}</div>
          </div>
        </div>
        {trend && (
          <div className={`flex items-center gap-1.5 text-xs font-medium ${trendColor} mb-2`}>
            <TrendIcon className="w-3.5 h-3.5" />
            <span>{trend}</span>
          </div>
        )}
        {highlight && (
          <div className="text-xs text-dark-text-muted/80 leading-relaxed max-w-[180px]">
            {highlight}
          </div>
        )}
      </div>
    </ScrollReveal>
  );
}

function MagneticButton({ children, href, variant = 'primary', className }: { children: React.ReactNode; href: string; variant?: 'primary' | 'secondary'; className?: string }) {
  const ref = useRef<HTMLAnchorElement>(null);
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (e: React.MouseEvent) => {
    if (!ref.current) return;
    const rect = ref.current.getBoundingClientRect();
    const x = (e.clientX - rect.left - rect.width / 2) * 0.15;
    const y = (e.clientY - rect.top - rect.height / 2) * 0.15;
    setPosition({ x, y });
  };

  const handleMouseLeave = () => {
    setPosition({ x: 0, y: 0 });
  };

  return (
    <motion.a
      ref={ref}
      href={href}
      animate={{ x: position.x, y: position.y }}
      transition={{ type: 'spring', stiffness: 150, damping: 15, mass: 0.1 }}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      className={cn(
        'group relative inline-flex items-center gap-3 px-12 py-6 font-semibold text-base overflow-hidden transition-transform duration-200',
        variant === 'primary'
          ? 'bg-brand text-white'
          : 'text-white border border-white/20 hover:border-white/40 hover:bg-white/5',
        className
      )}
    >
      {variant === 'primary' && (
        <div className="absolute inset-0 bg-black/20 translate-y-full group-hover:translate-y-0 transition-transform duration-500 ease-out" />
      )}
      <span className="relative z-10">{children}</span>
      <ArrowRight className="w-5 h-5 relative z-10 transition-transform duration-500 group-hover:translate-x-2" />
    </motion.a>
  );
}

function HeroSection() {
  const containerRef = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ['start start', 'end start'],
  });
  const y = useTransform(scrollYProgress, [0, 1], [0, 220]);
  const opacity = useTransform(scrollYProgress, [0, 0.7], [1, 0.15]);
  const gridY = useTransform(scrollYProgress, [0, 1], [0, -80]);
  const scale = useTransform(scrollYProgress, [0, 1], [1, 1.05]);

  return (
    <section
      ref={containerRef}
      className="relative min-h-screen flex items-center overflow-hidden bg-ink"
    >
      <GrainOverlay />
      <FloatingInkParticles particles={HOME_PARTICLES} />

      <div className="absolute inset-0 pointer-events-none">
        <motion.div style={{ y: gridY, scale }} className="absolute inset-0 opacity-[0.035]">
          <GridLines />
        </motion.div>

        <div
          className="absolute top-0 right-0 w-[45%] h-full"
          style={{
            background: 'linear-gradient(145deg, transparent 20%, rgba(196, 30, 58, 0.03) 100%)',
            clipPath: 'polygon(30% 0, 100% 0, 100% 100%, 0% 100%)',
          }}
        />

        <div
          className="absolute bottom-0 left-0 w-[55%] h-full"
          style={{
            background: 'linear-gradient(215deg, transparent 30%, rgba(30, 58, 95, 0.02) 100%)',
            clipPath: 'polygon(0 0, 70% 0, 100% 100%, 0 100%)',
          }}
        />

        <div className="absolute bottom-0 left-0 w-full h-2/5 bg-gradient-to-t from-ink to-transparent" />

        <div className="absolute top-24 right-[22%] w-[380px] h-[380px] rounded-full opacity-[0.04] blur-3xl bg-brand" />
        <div className="absolute bottom-32 left-[15%] w-[280px] h-[280px] rounded-full opacity-[0.025] blur-3xl bg-blue-500" />

        <DiagonalLines className="top-0 right-0 w-[40%] h-full opacity-50" />
        <DiagonalLines className="bottom-0 left-0 w-[35%] h-full rotate-180 opacity-30" />
      </div>

      <motion.div
        style={{ y, opacity }}
        className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-28 sm:py-36 md:py-44 lg:py-56"
      >
        <div className="grid lg:grid-cols-12 gap-12 items-end">
          <div className="lg:col-span-9">
            <motion.div
              initial={{ opacity: 0, x: -50 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 1.1, ease: EASE_OUT }}
              className="mb-14"
            >
              <SectionLabel>Digital Transformation Partner</SectionLabel>
            </motion.div>

            <motion.h1
              initial={{ opacity: 0, y: 70 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 1.2, delay: 0.15, ease: EASE_OUT }}
              className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-[9rem] font-bold text-white leading-[0.92] tracking-tighter mb-10 sm:mb-12 md:mb-16"
            >
              <div className="block">以战略远见</div>
              <div className="block mt-5">
                <span>驱动数字化</span>
                <span className="relative inline-block ml-4">
                  <span className="relative text-brand font-extrabold">
                    未来
                    <motion.span
                      className="absolute -bottom-3 left-0 w-full h-[3px] bg-brand"
                      style={{ transformOrigin: 'left' }}
                      initial={{ scaleX: 0 }}
                      animate={{ scaleX: 1 }}
                      transition={{ duration: 0.9, delay: 1.3, ease: EASE_OUT }}
                    />
                  </span>
                </span>
              </div>
            </motion.h1>

            <motion.p
              initial={{ opacity: 0, y: 50 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 1, delay: 0.45, ease: EASE_OUT }}
              className="text-lg sm:text-xl lg:text-2xl text-dark-text-secondary max-w-2xl leading-relaxed mb-10 sm:mb-12 md:mb-16"
            >
              睿新致远 — 专注于为中型及成长型企业提供从战略咨询到技术落地的全链路数字化服务。
              我们以务实的方法和深度的行业洞见，帮助您构建面向未来的数字竞争力。
            </motion.p>

            <motion.div
              initial={{ opacity: 0, y: 50 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 1, delay: 0.6, ease: EASE_OUT }}
              className="flex flex-col sm:flex-row gap-4 sm:gap-6"
            >
              <MagneticButton href="/contact">预约咨询</MagneticButton>
              <StaticLink
                href="/services"
                className="group inline-flex items-center justify-center gap-3 px-8 sm:px-12 py-5 sm:py-6 text-white font-medium text-base border border-white/20 hover:border-white/40 hover:bg-white/5 transition-all duration-400 w-full sm:w-auto"
              >
                了解我们的服务
                <ArrowUpRight className="w-5 h-5 transition-all duration-400 group-hover:translate-x-1 group-hover:-translate-y-1" />
              </StaticLink>
            </motion.div>
          </div>

          <motion.div
            initial={{ opacity: 0, x: 60 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 1.2, delay: 0.75, ease: EASE_OUT }}
            className="hidden lg:block lg:col-span-3"
          >
            <div className="relative">
              <div className="absolute -top-10 -left-10 w-24 h-24 border-l-[3px] border-t-[3px] border-brand" />
              <div className="absolute -bottom-10 -right-10 w-24 h-24 border-r-[3px] border-b-[3px] border-brand" />
              <div className="border border-white/10 p-12 relative overflow-hidden bg-ink-light/70 backdrop-blur-sm">
                <div className="absolute top-0 right-0 w-32 h-32 opacity-20 blur-2xl bg-brand" />

                <div className="relative z-10">
                  <div className="text-[10px] tracking-[0.35em] uppercase text-dark-text-muted mb-7 font-semibold">
                    EST. 2014
                  </div>
                  <div className="text-6xl font-bold text-white mb-3 tracking-tight">
                    12<span className="text-brand">年</span>
                  </div>
                  <div className="text-sm text-dark-text-secondary mb-10">深耕企业数字化服务</div>
                  <div className="space-y-5 pt-8 border-t border-white/10">
                    <div className="flex justify-between items-center text-sm">
                      <span className="text-dark-text-muted">服务企业</span>
                      <span className="text-white font-bold">500+</span>
                    </div>
                    <div className="flex justify-between items-center text-sm">
                      <span className="text-dark-text-muted">专业团队</span>
                      <span className="text-white font-bold">200+</span>
                    </div>
                    <div className="flex justify-between items-center text-sm">
                      <span className="text-dark-text-muted">行业覆盖</span>
                      <span className="text-white font-bold">6+</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </motion.div>

      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 1.5, delay: 1.5 }}
        className="absolute left-1/2 -translate-x-1/2 flex flex-col items-center gap-5 bottom-[calc(5rem+env(safe-area-inset-bottom,0px))] md:bottom-20"
      >
        <span className="text-[11px] text-gray-600 tracking-[0.45em] uppercase font-semibold">
          Scroll to explore
        </span>
        <motion.div
          animate={{ y: [0, 14, 0] }}
          transition={{ duration: 2.5, repeat: Infinity, ease: 'easeInOut' }}
        >
          <ChevronDown className="w-6 h-6 text-gray-500" />
        </motion.div>
      </motion.div>
    </section>
  );
}

function StatsSection() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: '-120px' });

  return (
    <section
      ref={ref}
      className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-ink-light"
    >
      <GrainOverlay />

      <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
      <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />

      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
        <div className="grid lg:grid-cols-12 gap-10 sm:gap-12 md:gap-16 items-start">
          <ScrollReveal className="lg:col-span-5">
            <SectionLabel>Proven Results</SectionLabel>
            <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight mb-8">
              用数据说话<br />的专业实力
            </h2>
            <p className="text-dark-text-secondary leading-relaxed text-lg">
              十二年深耕，五百余家企业的共同选择。我们用实实在在的业务成果，赢得客户的长期信赖与持续合作。
            </p>
          </ScrollReveal>

          <div className="lg:col-span-7">
            <div className="grid grid-cols-2 gap-x-14 gap-y-16 relative">
              <div className="absolute top-0 bottom-0 left-1/2 w-px bg-white/[0.06]" />
              <div className="absolute top-1/2 left-0 right-0 h-px bg-white/[0.06]" />
              {STATS.map((stat, i) => (
                <StatItem key={i} {...stat} start={isInView} delay={0.15 + i * 0.12} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ServicesSection() {
  return (
    <section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-ink">
      <GrainOverlay />

      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
        <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-8 sm:gap-10 md:gap-12 mb-16 sm:mb-20 md:mb-28">
          <ScrollReveal className="lg:max-w-3xl">
            <SectionLabel>Our Services</SectionLabel>
            <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
              四位一体的数字化服务体系
            </h2>
          </ScrollReveal>
          <ScrollReveal delay={0.1}>
            <p className="text-dark-text-secondary max-w-md leading-relaxed text-lg">
              从战略规划到技术落地，为企业数字化转型提供全链路专业服务，每一步都有资深专家陪伴。
            </p>
          </ScrollReveal>
        </div>

        <StaggerReveal
          className="grid md:grid-cols-2 gap-px bg-white/10"
          staggerDelay={0.1}
          delayChildren={0.05}
        >
          {SERVICES.map((service, i) => (
            <a
              key={i}
              href={service.href}
              className={cn(
                'group relative block p-8 sm:p-10 md:p-12 lg:p-14 transition-all duration-600 hover:bg-white/[0.02] overflow-hidden bg-ink',
                service.borderClass
              )}
            >
              <div className={cn(
                'absolute top-0 left-0 h-full w-1 scale-y-0 group-hover:scale-y-100 transition-transform duration-700 origin-top',
              )} style={{ backgroundColor: 'currentColor', color: service.colorClass.includes('brand') ? '#C41E3A' : service.colorClass.includes('blue') ? '#3b82f6' : service.colorClass.includes('teal') ? '#0d9488' : '#d97706' }} />

              <div className="absolute top-8 right-8 w-40 h-40 rounded-full opacity-0 group-hover:opacity-100 blur-3xl transition-opacity duration-700" style={{ backgroundColor: service.colorClass.includes('brand') ? 'rgba(196, 30, 58, 0.03)' : service.colorClass.includes('blue') ? 'rgba(59, 130, 246, 0.025)' : service.colorClass.includes('teal') ? 'rgba(13, 148, 136, 0.025)' : 'rgba(217, 119, 6, 0.025)' }} />

              <div className="relative z-10">
                <div className="flex items-start justify-between mb-10">
                  <motion.div
                    whileHover={{ scale: 1.08, y: -3 }}
                    transition={EASE_SPRING}
                    className={cn('w-14 h-14 flex items-center justify-center rounded-xl', service.bgClass, service.colorClass)}
                  >
                    {service.icon}
                  </motion.div>
                  <span className="text-8xl font-bold text-white/[0.05] group-hover:text-white/[0.1] transition-all duration-500 tracking-tighter leading-none">
                    {service.number}
                  </span>
                </div>

                <div className="mb-7">
                  <div className="text-[11px] tracking-[0.35em] uppercase text-dark-text-muted mb-3 font-semibold">
                    {service.subtitle}
                  </div>
                  <h3 className="text-2xl lg:text-3xl font-bold text-white group-hover:translate-x-1.5 transition-transform duration-500">
                    {service.title}
                  </h3>
                </div>

                <p className="text-dark-text-secondary leading-relaxed mb-9 text-[15px]">
                  {service.desc}
                </p>

                <div className="flex flex-wrap gap-2.5 mb-10">
                  {service.highlights.map((h, j) => (
                    <span
                      key={j}
                      className="px-3.5 py-1.5 text-xs text-dark-text-muted border border-white/10 group-hover:border-white/20 group-hover:text-dark-text-secondary transition-all duration-300 font-medium rounded-md"
                    >
                      {h}
                    </span>
                  ))}
                </div>

                <div className="flex items-center gap-8 pt-7 border-t border-white/[0.06]">
                  {service.metrics.map((m, j) => (
                    <div key={j}>
                      <div className="text-2xl font-bold text-white">{m.value}</div>
                      <div className="text-xs text-dark-text-muted mt-1">{m.label}</div>
                    </div>
                  ))}
                </div>

                <motion.div
                  className={cn('inline-flex items-center gap-2.5 text-sm font-bold mt-10', service.colorClass)}
                  whileHover={{ x: 6 }}
                  transition={EASE_SPRING}
                >
                  <span>了解详情</span>
                  <ArrowRight className="w-4 h-4" />
                </motion.div>
              </div>
            </a>
          ))}
        </StaggerReveal>
      </div>
    </section>
  );
}

function IndustriesSection() {
  return (
    <section
      className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-ink-light"
    >
      <GrainOverlay />
      <DiagonalLines className="bottom-0 left-0 w-[30%] h-[50%]" />

      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
        <div className="grid lg:grid-cols-12 gap-10 sm:gap-12 md:gap-16 mb-16 sm:mb-20 md:mb-24">
          <ScrollReveal className="lg:col-span-4">
            <SectionLabel>Industries</SectionLabel>
            <h2 className="text-3xl md:text-4xl font-bold text-white tracking-tight leading-tight mb-8">
              深耕六大<br />核心行业
            </h2>
            <p className="text-dark-text-secondary leading-relaxed mb-10 text-lg">
              专注垂直领域，积累丰富的行业 Know-How，提供更贴合业务实际的解决方案。
              每一个行业都有专属的专家团队与成熟的方法论。
            </p>
            <a
              href="/solutions"
              className="group inline-flex items-center gap-3 text-white font-bold text-base"
            >
              查看全部行业方案
              <ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-2 text-brand" />
            </a>
          </ScrollReveal>

          <div className="lg:col-span-8">
            <StaggerReveal
              className="grid sm:grid-cols-2 lg:grid-cols-3 gap-px bg-white/10"
              staggerDelay={0.08}
              delayChildren={0.05}
            >
              {INDUSTRIES.map((ind, i) => (
                <div
                  key={i}
                  className="group p-10 lg:p-12 transition-all duration-500 hover:bg-white/[0.03] cursor-pointer relative overflow-hidden bg-ink-light"
                >
                  <div className="absolute top-0 right-0 w-28 h-28 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                    <div className={cn('absolute top-0 right-0 w-full h-full bg-gradient-135', ind.gradientClass, 'to-transparent')} />
                  </div>

                  <motion.div
                    whileHover={{ scale: 1.15, y: -3 }}
                    transition={EASE_SPRING}
                    className={cn('w-14 h-14 flex items-center justify-center mb-8 relative z-10 bg-white/[0.04]', ind.colorClass)}
                  >
                    {ind.icon}
                  </motion.div>
                  <div className="flex items-center gap-3 mb-4 relative z-10">
                    <h3 className="text-lg font-bold text-white">{ind.name}</h3>
                    <Badge variant="outline" className={cn(ind.colorClass, 'border-current')}>
                      {ind.count} 案例
                    </Badge>
                  </div>
                  <p className="text-sm text-dark-text-muted leading-relaxed relative z-10">{ind.desc}</p>
                </div>
              ))}
            </StaggerReveal>
          </div>
        </div>
      </div>
    </section>
  );
}

function CasesSection() {
  return (
    <section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-ink">
      <GrainOverlay />

      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
        <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-8 sm:gap-10 mb-16 sm:mb-20 md:mb-28">
          <ScrollReveal className="md:max-w-3xl">
            <SectionLabel>Case Studies</SectionLabel>
            <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight">
              可衡量的业务成果
            </h2>
          </ScrollReveal>
          <ScrollReveal delay={0.1}>
            <a
              href="/cases"
              className="group inline-flex items-center gap-3 text-white font-bold text-base"
            >
              查看全部案例
              <ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-2 text-brand" />
            </a>
          </ScrollReveal>
        </div>

        <div className="space-y-16">
          {CASES.map((caseItem, i) => (
            <ScrollReveal key={i} delay={i * 0.15}>
              <article className="group relative overflow-hidden border border-white/10 hover:border-white/20 transition-all duration-600">
                <div className="grid lg:grid-cols-5 gap-0">
                  <div className="lg:col-span-3 p-14 lg:p-20 relative bg-ink-light">
                    <div className={cn(
                      'absolute top-0 left-0 w-full h-1 scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left',
                      caseItem.bgClass
                    )} />

                    <div className="absolute bottom-0 right-0 w-48 h-48 rounded-full opacity-0 group-hover:opacity-[0.08] blur-3xl transition-opacity duration-700" style={{ backgroundColor: 'currentColor' }} />

                    <div className="relative z-10">
                      <div className="flex items-center gap-5 mb-12">
                        <Badge className={cn(caseItem.bgClass, 'text-white border-transparent')}>
                          {caseItem.industry}
                        </Badge>
                        <span className="text-[11px] text-dark-text-muted tracking-wide font-semibold">
                          CASE #{String(i + 1).padStart(2, '0')}
                        </span>
                      </div>

                      <h3 className={cn(
                        'text-2xl lg:text-3xl font-bold mb-12 leading-tight transition-colors duration-400',
                        'text-white group-hover:text-brand'
                      )}>
                        {caseItem.title}
                      </h3>

                      <div className="space-y-10">
                        <div>
                          <div className="flex items-center gap-3 mb-4">
                            <div className={cn('w-2.5 h-2.5 rounded-full', caseItem.bgClass)} />
                            <span className={cn('text-sm font-bold', caseItem.colorClass)}>挑战</span>
                          </div>
                          <p className="text-dark-text-secondary leading-relaxed pl-5.5">{caseItem.challenge}</p>
                        </div>
                        <div>
                          <div className="flex items-center gap-3 mb-4">
                            <div className={cn('w-2.5 h-2.5 rounded-full', caseItem.bgClass)} />
                            <span className={cn('text-sm font-bold', caseItem.colorClass)}>方案</span>
                          </div>
                          <p className="text-dark-text-secondary leading-relaxed pl-5.5">{caseItem.solution}</p>
                        </div>
                        <div>
                          <div className="flex items-center gap-3 mb-4">
                            <div className={cn('w-2.5 h-2.5 rounded-full', caseItem.bgClass)} />
                            <span className={cn('text-sm font-bold', caseItem.colorClass)}>成果</span>
                          </div>
                          <p className="text-dark-text-secondary leading-relaxed pl-5.5">{caseItem.result}</p>
                        </div>
                      </div>

                      <div className="flex items-start gap-5 mt-14 pt-12 border-t border-white/10">
                        <Quote className={cn('w-10 h-10 shrink-0 mt-0.5 opacity-50', caseItem.colorClass)} />
                        <div>
                          <p className="text-dark-text-secondary italic leading-relaxed mb-5">
                            &ldquo;{caseItem.quote}&rdquo;
                          </p>
                          <p className="text-sm text-dark-text-muted">
                            — {caseItem.author}，{caseItem.company}
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div className="lg:col-span-2 p-14 lg:p-20 flex flex-col justify-center relative bg-ink-lighter">
                    <div className="text-[11px] text-dark-text-muted mb-12 tracking-[0.25em] uppercase font-bold">
                      Key Results
                    </div>
                    <div className="space-y-12">
                      {caseItem.metrics.map((metric, j) => (
                        <div key={j} className="group/metric">
                          <motion.div
                            className="text-5xl lg:text-6xl font-bold text-white mb-4"
                            whileInView={{ x: 0, opacity: 1 }}
                            initial={{ x: -20, opacity: 0 }}
                            viewport={{ once: true }}
                            transition={{ duration: 0.6, delay: 0.2 + j * 0.1, ease: EASE_OUT }}
                          >
                            {metric.value}
                          </motion.div>
                          <div className="flex items-center gap-4">
                            <div className={cn('w-12 h-px', caseItem.bgClass)} />
                            <div className="text-dark-text-secondary font-medium">{metric.label}</div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </article>
            </ScrollReveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ApproachSection() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: '-100px' });

  return (
    <section
      ref={ref}
      className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-ink-light"
    >
      <GrainOverlay />

      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
        <ScrollReveal className="mb-16 sm:mb-20 md:mb-28 max-w-3xl">
          <SectionLabel>Our Approach</SectionLabel>
          <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight mb-8">
            四步交付法，<br />确保每一个项目成功落地
          </h2>
          <p className="text-dark-text-secondary leading-relaxed text-lg">
            基于 500+ 项目经验沉淀的方法论体系。从诊断评估到持续运营，每一步都有清晰的目标和交付物，让数字化转型可见、可控、可衡量。
          </p>
        </ScrollReveal>

        <div className="relative">
          <div className="absolute top-[115px] left-0 right-0 h-px hidden lg:block bg-brand/30" />

          <StaggerReveal
            className="grid md:grid-cols-2 lg:grid-cols-4 gap-px bg-white/10"
            staggerDelay={0.12}
            delayChildren={0.1}
          >
            {APPROACH.map((step, i) => (
              <div
                key={i}
                className="relative h-full p-8 sm:p-10 md:p-12 lg:p-14 border-t-2 border-transparent hover:border-brand transition-all duration-500 group bg-ink-light"
              >
                <div className="absolute -top-[2px] left-0 w-full flex justify-center hidden lg:flex">
                  <motion.div
                    initial={false}
                    animate={isInView ? { scale: 1 } : { scale: 0 }}
                    transition={{ duration: 0.5, delay: 0.3 + i * 0.12, ease: EASE_OUT }}
                    className="w-5 h-5 rounded-full -mt-[9px] border-2 border-brand bg-ink-light"
                  />
                </div>

                <div className="flex items-center gap-5 mb-10">
                  <motion.div
                    whileHover={{ scale: 1.1, rotate: -5 }}
                    transition={EASE_SPRING}
                    className="w-14 h-14 flex items-center justify-center bg-brand-soft text-brand"
                  >
                    {step.icon}
                  </motion.div>
                  <span className="text-6xl font-bold tracking-tight text-brand">
                    {step.step}
                  </span>
                </div>
                <h3 className="text-xl font-bold text-white mb-4">{step.title}</h3>
                <p className="text-dark-text-muted text-sm leading-relaxed mb-10">{step.desc}</p>

                <div className="pt-6 border-t border-white/5">
                  <div className="text-[11px] text-gray-600 mb-5 uppercase tracking-wider font-bold">
                    交付物
                  </div>
                  <ul className="space-y-3.5">
                    {step.deliverables.map((d, j) => (
                      <li key={j} className="flex items-center gap-3 text-sm text-dark-text-secondary">
                        <CheckCircle2 className="w-4 h-4 text-brand" />
                        {d}
                      </li>
                    ))}
                  </ul>
                </div>

                <div className="mt-10 inline-block px-4 py-2 text-xs text-dark-text-muted border border-white/10 font-semibold">
                  周期：{step.duration}
                </div>
              </div>
            ))}
          </StaggerReveal>
        </div>
      </div>
    </section>
  );
}

function InsightsSection() {
  return (
    <section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-ink">
      <GrainOverlay />
      <DiagonalLines className="top-0 right-0 w-[25%] h-[40%]" />

      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
        <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-8 sm:gap-10 mb-16 sm:mb-20 md:mb-28">
          <ScrollReveal>
            <SectionLabel>Insights</SectionLabel>
            <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight">
              思想领导力
            </h2>
          </ScrollReveal>
          <ScrollReveal delay={0.1}>
            <a
              href="/news"
              className="group inline-flex items-center gap-3 text-white font-bold text-base"
            >
              查看全部
              <ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-2 text-brand" />
            </a>
          </ScrollReveal>
        </div>

        <StaggerReveal
          className="grid lg:grid-cols-3 gap-px bg-white/10"
          staggerDelay={0.1}
          delayChildren={0.05}
        >
          {INSIGHTS.map((insight, i) => (
            <article
              key={i}
              className="group cursor-pointer h-full flex flex-col bg-ink"
            >
              <div
                className={cn('relative overflow-hidden bg-ink-light', insight.featured ? 'aspect-[16/9]' : 'aspect-[16/10]')}
              >
                <div className="absolute inset-0 flex items-center justify-center transition-transform duration-700 group-hover:scale-110">
                  <BarChart3 className="w-32 h-32 text-white/[0.04]" />
                </div>
                <div className="absolute inset-0 bg-gradient-to-t from-black/75 via-transparent to-transparent" />
                <div className="absolute top-6 left-6">
                  <Badge
                    variant={insight.featured ? 'default' : 'outline'}
                    className={insight.featured ? 'bg-brand text-white border-transparent' : 'bg-white/12 text-white border-transparent'}
                  >
                    {insight.category}
                  </Badge>
                </div>
                {insight.featured && (
                  <div className="absolute top-6 right-6">
                    <Badge variant="outline" className="bg-white/10 backdrop-blur-sm text-white border-white/20">
                      精选推荐
                    </Badge>
                  </div>
                )}
              </div>

              <div className="p-10 lg:p-12 flex-1 flex flex-col">
                <div className="flex items-center gap-5 mb-6 text-sm text-dark-text-muted">
                  <span>{insight.date}</span>
                  <span className="w-1 h-1 rounded-full bg-gray-700" />
                  <span>{insight.readTime}阅读</span>
                </div>
                <h3
                  className={cn(
                    'font-bold mb-6 leading-snug transition-colors duration-400 text-white group-hover:text-brand',
                    insight.featured ? 'text-2xl' : 'text-xl'
                  )}
                >
                  {insight.title}
                </h3>
                <p className="text-dark-text-muted leading-relaxed flex-1">
                  {insight.excerpt}
                </p>
                <div className="mt-10 pt-8 border-t border-white/[0.06]">
                  <span className="inline-flex items-center gap-2.5 text-sm font-bold text-brand">
                    阅读全文
                    <ArrowRight className="w-4 h-4 transition-transform duration-400 group-hover:translate-x-2" />
                  </span>
                </div>
              </div>
            </article>
          ))}
        </StaggerReveal>
      </div>
    </section>
  );
}

function CTASection() {
  return (
    <section
      className="relative py-24 sm:py-32 md:py-40 lg:py-52 overflow-hidden bg-ink-light"
    >
      <GrainOverlay />
      <FloatingInkParticles particles={HOME_PARTICLES} />

      <div className="absolute inset-0 pointer-events-none">
        <div
          className="absolute -top-1/3 -right-1/4 w-3/4 h-full"
          style={{
            background: 'radial-gradient(ellipse at center, rgba(196, 30, 58, 0.03) 0%, transparent 60%)',
          }}
        />
        <div
          className="absolute -bottom-1/3 -left-1/4 w-3/4 h-full"
          style={{
            background: 'radial-gradient(ellipse at center, rgba(30, 58, 95, 0.02) 0%, transparent 60%)',
          }}
        />
        <DiagonalLines className="top-0 left-0 w-full h-full opacity-[0.02]" />

        <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
        <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
      </div>

      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
        <ScrollReveal className="max-w-4xl mx-auto text-center">
          <div className="flex items-center justify-center gap-5 mb-12">
            <div className="w-14 h-px bg-brand/60" />
            <span className="text-[11px] tracking-[0.45em] uppercase font-bold text-brand">
              Let&rsquo;s Talk
            </span>
            <div className="w-14 h-px bg-brand/60" />
          </div>
          <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold text-white tracking-tight leading-tight mb-10 sm:mb-12 md:mb-14">
            准备好开启您的
            <br />
            <span className="relative inline-block mt-5">
              <span className="text-brand font-extrabold">数字化转型</span>
              <svg
                className="absolute -bottom-5 left-0 w-full"
                height="18"
                viewBox="0 0 400 18"
                fill="none"
                preserveAspectRatio="none"
              >
                <path
                  d="M0 9 Q 100 0, 200 9 T 400 9"
                  stroke="#C41E3A"
                  strokeWidth="3"
                  fill="none"
                  strokeLinecap="round"
                />
              </svg>
            </span>
            之旅了吗？
          </h2>
          <p className="text-lg sm:text-xl lg:text-2xl text-dark-text-secondary mb-10 sm:mb-12 md:mb-16 max-w-2xl mx-auto leading-relaxed">
            与我们的专家团队交流，获取针对您业务的专属数字化建议与实施路径。
            首次咨询完全免费，无任何商业承诺。
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4 sm:gap-6">
            <MagneticButton href="/contact" className="w-full sm:w-auto">立即预约咨询</MagneticButton>
            <StaticLink
              href="/about"
              className="group inline-flex items-center justify-center gap-4 px-8 sm:px-14 py-5 sm:py-7 text-white font-medium text-base sm:text-lg border border-white/20 hover:border-white/40 hover:bg-white/5 transition-all duration-400 w-full sm:w-auto"
            >
              了解更多
              <ArrowUpRight className="w-5 h-5 transition-all duration-400 group-hover:translate-x-1 group-hover:-translate-y-1" />
            </StaticLink>
          </div>
        </ScrollReveal>
      </div>
    </section>
  );
}

export default function HomeContentV11() {
  return (
    <main>
      <HeroSection />
      <StatsSection />
      <ServicesSection />
      <IndustriesSection />
      <CasesSection />
      <ApproachSection />
      <InsightsSection />
      <CTASection />
    </main>
  );
}