'use client';

import { useEffect, useRef, useState } from 'react';
import { motion } from 'framer-motion';
import { ChallengeCard } from '@/components/ui/challenge-card';
import { useReducedMotion } from '@/hooks/use-reduced-motion';

const CHALLENGES = [
  {
    id: 'data-isolation',
    title: '数据孤岛',
    description: '各部门系统独立运行，数据无法互通共享，导致决策信息碎片化，影响整体运营效率。',
    scenario: 'isolation' as const,
    href: '/solutions/data-integration',
  },
  {
    id: 'growth-bottleneck',
    title: '增长瓶颈',
    description: '业务规模扩大但管理手段滞后，流程效率低下，难以支撑持续增长的业务需求。',
    scenario: 'growth' as const,
    href: '/solutions/growth-enablement',
  },
  {
    id: 'compliance-risk',
    title: '合规风险',
    description: '行业监管日趋严格，传统手工操作难以满足合规要求，数据安全和审计面临挑战。',
    scenario: 'compliance' as const,
    href: '/solutions/compliance-management',
  },
];

export function ChallengeSection() {
  const [isVisible, setIsVisible] = useState(false);
  const sectionRef = useRef<HTMLElement>(null);
  const shouldReduceMotion = useReducedMotion();

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

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

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

  return (
    <section
      id="challenges"
      ref={sectionRef}
      className="bg-white py-16 md:py-24"
    >
      <div className="container-wide">
        <motion.div
          initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
          animate={isVisible ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
          className="mb-12"
        >
          <h2 className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
            您的挑战，我们的使命
          </h2>
          <p className="text-lg text-[#595959] max-w-2xl">
            深入理解企业数字化进程中的核心痛点，提供针对性解决方案
          </p>
        </motion.div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {CHALLENGES.map((challenge, index) => (
            <ChallengeCard
              key={challenge.id}
              title={challenge.title}
              description={challenge.description}
              scenario={challenge.scenario}
              href={challenge.href}
              index={index}
            />
          ))}
        </div>
      </div>
    </section>
  );
}