'use client';

import { motion } from 'framer-motion';
import { Shield, Users, Cpu, Handshake } from 'lucide-react';
import { useReducedMotion } from '@/hooks/use-reduced-motion';

const TRUST_PILLARS = [
  {
    icon: Shield,
    title: '私有化部署',
    description: '数据不出企业，满足安全合规与数据主权要求',
  },
  {
    icon: Users,
    title: '资深团队',
    description: '核心成员来自大型 IT 企业，具备扎实的工程能力与规范化交付经验',
  },
  {
    icon: Cpu,
    title: '全栈自研',
    description: '6 款产品自主研发中，覆盖 ERP、CRM、BI 等企业核心场景',
  },
  {
    icon: Handshake,
    title: '长期陪跑',
    description: '不做完就跑，从需求理解到产品打磨，持续陪伴客户成长',
  },
];

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

  return (
    <section id="social-proof" role="region" aria-labelledby="social-proof-heading" className="py-12 md:py-16 lg:py-20 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="text-center max-w-3xl mx-auto mb-14"
        >
          <h2 id="social-proof-heading" className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] mb-4">
            值得信赖
          </h2>
          <p className="text-base text-[var(--color-text-muted)]">
            用心打磨产品，以专业赢得信赖
          </p>
        </motion.div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
          {TRUST_PILLARS.map((pillar, idx) => {
            const Icon = pillar.icon;
            return (
              <motion.div
                key={pillar.title}
                initial={shouldReduceMotion ? {} : { opacity: 0, y: 24, scale: 0.94 }}
                whileInView={{ opacity: 1, y: 0, scale: 1 }}
                viewport={{ once: true, margin: '-60px' }}
                transition={{ duration: 0.5, delay: idx * 0.1 + 0.05, ease: [0.16, 1, 0.3, 1] }}
                className="text-center p-6 md:p-8 rounded-xl bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)] hover:border-[rgba(var(--color-brand-primary-rgb),0.3)] transition-colors duration-300"
              >
                <div className="w-12 h-12 rounded-xl bg-[var(--color-brand-primary)]/5 flex items-center justify-center mx-auto mb-4">
                  <Icon className="w-5 h-5 text-[var(--color-brand-primary)]" strokeWidth={1.8} />
                </div>
                <h3 className="text-base font-semibold text-[var(--color-text-primary)] mb-2">{pillar.title}</h3>
                <p className="text-sm text-[var(--color-text-muted)] leading-relaxed">{pillar.description}</p>
              </motion.div>
            );
          })}
        </div>
      </div>
    </section>
  );
}