'use client';

import { motion } from 'framer-motion';
import { useInView } from 'framer-motion';
import { useRef } from 'react';
import { StaticLink } from '@/components/ui/static-link';
import { RippleButton } from '@/components/ui/ripple-button';
import { COMPANY_INFO } from '@/lib/constants';
import { ArrowRight, CheckCircle2 } from 'lucide-react';
import { useReducedMotion } from '@/hooks/use-reduced-motion';

const VALUES = [
  { title: '务实', description: '不追逐风口，只做真正为客户创造价值的事。' },
  { title: '陪伴', description: '交付只是开始，长期陪跑才是我们的承诺。' },
  { title: '专业', description: '用扎实的工程能力和行业经验赢得信任。' },
];

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

  return (
    <section id="about" role="region" aria-labelledby="about-heading" className="py-24 bg-[#FAFAFA] relative" ref={ref}>
      {/* 网格背景 */}
      <div className="absolute inset-0 bg-[linear-gradient(rgba(28,28,28,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(28,28,28,0.02)_1px,transparent_1px)] bg-size-[40px_40px]" />

      <div className="container-wide relative z-10">
        <motion.div
          initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6 }}
          className="max-w-4xl mx-auto"
        >
          {/* 标题 */}
          <div className="text-center mb-12">
            <h2 id="about-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
              关于 <span className="tracking-tight font-brand text-[#C41E3A]" style={{ fontWeight: 'normal', WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale', textRendering: 'optimizeLegibility' }}>{COMPANY_INFO.shortName}</span>
            </h2>
            <p className="text-lg text-[#5C5C5C] mb-8">
              {COMPANY_INFO.slogan}
            </p>
          </div>

          {/* 品牌理念引用 */}
          <motion.div
            initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6, delay: 0.1 }}
            className="bg-white rounded-2xl p-8 mb-12 border border-[#E5E5E5]"
          >
            <p className="text-lg text-[#5C5C5C] leading-relaxed text-center mb-6">
              &ldquo;企业需要的，不是一个高高在上的&lsquo;专家&rsquo;，也不是一个做完就跑的&lsquo;卖家&rsquo;，而是一个能坐下来、一起想办法的同行者。&rdquo;
            </p>
            <p className="text-[#1C1C1C] font-medium text-center">
              我们只做一件事：成为您数字化转型路上，信得过的成长伙伴。
            </p>
          </motion.div>

          {/* 核心价值观 */}
          <motion.div
            initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6, delay: 0.15 }}
            className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16"
          >
            {VALUES.map((value) => (
              <div
                key={value.title}
                className="bg-white rounded-xl p-6 border border-[#E5E5E5] text-center"
              >
                <div className="w-10 h-10 bg-[#C41E3A]/10 rounded-full flex items-center justify-center mx-auto mb-3">
                  <CheckCircle2 className="w-5 h-5 text-[#C41E3A]" />
                </div>
                <h3 className="text-lg font-bold text-[#1C1C1C] mb-2">{value.title}</h3>
                <p className="text-sm text-[#5C5C5C] leading-relaxed">{value.description}</p>
              </div>
            ))}
          </motion.div>

          {/* CTA */}
          <motion.div
            initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6, delay: 0.5 }}
            className="text-center"
          >
            <StaticLink href="/about">
              <RippleButton className="inline-flex items-center gap-2 px-6 py-2.5 border border-[#E5E5E5] rounded-lg text-sm font-medium text-[#1C1C1C] hover:border-[#C41E3A] hover:text-[#C41E3A] transition-colors">
                了解更多关于我们
                <ArrowRight className="w-4 h-4" />
              </RippleButton>
            </StaticLink>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
}