'use client';

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#consulting',
  },
  {
    id: 'growth-bottleneck',
    title: '增长瓶颈',
    description: '业务规模扩大但管理手段滞后，流程效率低下，难以支撑持续增长的业务需求。',
    scenario: 'growth' as const,
    href: '/solutions#tech',
  },
  {
    id: 'compliance-risk',
    title: '合规风险',
    description: '行业监管日趋严格，传统手工操作难以满足合规要求，数据安全和审计面临挑战。',
    scenario: 'compliance' as const,
    href: '/solutions#accompany',
  },
];

export function ChallengeSection() {
  const shouldReduceMotion = useReducedMotion();

  return (
    <section id="challenges" className="relative py-20 md:py-28 bg-[var(--color-bg-section)]">
      <div className="container-wide">
        <motion.div
          initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-100px' }}
          transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
          className="mb-14"
        >
          <div className="flex items-center gap-4 mb-4">
            <div className="h-px flex-1 bg-[var(--color-border-primary)]" />
            <span className="text-xs font-mono tracking-widest text-[var(--color-text-subtle)]">CHALLENGES</span>
            <div className="h-px flex-1 bg-[var(--color-border-primary)]" />
          </div>
          <h2 className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] text-center">
            您的挑战，我们的<span className="text-[var(--color-brand-primary)] font-calligraphy">使命</span>
          </h2>
          <p className="text-base text-[var(--color-text-muted)] text-center mt-4 max-w-xl mx-auto">
            深入理解企业数字化进程中的核心痛点，提供针对性解决方案
          </p>
        </motion.div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
          {CHALLENGES.map((challenge, index) => (
            <motion.div
              key={challenge.id}
              initial={shouldReduceMotion ? {} : { opacity: 0, x: index === 0 ? -32 : index === 1 ? 0 : 32 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true, margin: '-80px' }}
              transition={{ duration: 0.55, delay: index * 0.12, ease: [0.16, 1, 0.3, 1] }}
            >
              <ChallengeCard
                title={challenge.title}
                description={challenge.description}
                scenario={challenge.scenario}
                href={challenge.href}
                index={index}
              />
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}
