'use client';

import { motion, 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, Target, HeartHandshake, Award } from 'lucide-react';
import { useReducedMotion } from '@/hooks/use-reduced-motion';
import { InkReveal, BlurReveal, StaggerContainer, StaggerItem } from '@/lib/animations';
import { TextReveal } from '@/components/ui/scroll-animations';

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

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-[#F5F5F5] 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">
        {/* 标题 - InkReveal 墨迹揭示 */}
        <InkReveal className="max-w-4xl mx-auto">
          <div className="text-center mb-12">
            <div className="w-16 h-1 bg-[var(--color-brand-primary)] rounded-full mb-6" />
            <h2 id="about-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
              关于 <span className="tracking-tight text-[var(--color-brand-primary)]" style={{ fontFamily: "var(--font-aoyagi-reisho), 'Ma Shan Zheng', 'ZCOOL XiaoWei', 'STKaiti', 'KaiTi', serif", 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>
        </InkReveal>

        {/* 品牌理念 - TextReveal 逐词揭示 */}
        <TextReveal
          text="企业需要的，不是一个高高在上的专家，也不是一个做完就跑的卖家，而是一个能坐下来、一起想办法的同行者。"
          className="text-center text-lg text-[#5C5C5C] leading-relaxed mb-8 max-w-3xl mx-auto"
          delay={0.1}
        />

        {/* 核心理念强调 - BlurReveal */}
        <BlurReveal delay={0.3} className="bg-white rounded-2xl p-8 mb-12 border border-[#E5E5E5]">
          <p className="text-[#1C1C1C] font-medium text-center text-lg">
            我们只做一件事：成为您数字化转型路上，信得过的成长伙伴。
          </p>
        </BlurReveal>

        {/* 核心价值观 - StaggerContainer 交错入场 */}
        <StaggerContainer className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16" staggerDelay={0.15}>
          {VALUES.map((value) => {
            const Icon = value.icon;
            return (
              <StaggerItem key={value.title}>
                <div className="bg-white rounded-xl p-6 border border-[#E5E5E5] text-center hover:border-[var(--color-brand-primary)]/20 hover:shadow-md transition-all duration-300">
                  <div className="w-10 h-10 bg-[var(--color-brand-primary)]/10 rounded-full flex items-center justify-center mx-auto mb-3">
                    <Icon className="w-5 h-5 text-[var(--color-brand-primary)]" />
                  </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>
              </StaggerItem>
            );
          })}
        </StaggerContainer>

        {/* 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-[var(--color-brand-primary)] hover:text-[var(--color-brand-primary)] transition-colors">
              了解更多关于我们
              <ArrowRight className="w-4 h-4" />
            </RippleButton>
          </StaticLink>
        </motion.div>
      </div>
    </section>
  );
}