'use client';

import { motion } from 'framer-motion';
import {
  CheckCircle2,
  Zap,
  Clock,
  Users,
  Award,
  TrendingUp,
  type LucideIcon,
} from 'lucide-react';
import type { Service } from '@/lib/constants/services';

interface ServiceValueSectionProps {
  service: Service;
}

export function ServiceValueSection({ service }: ServiceValueSectionProps) {
  const icons: LucideIcon[] = [Zap, Clock, Users, Award, TrendingUp];

  return (
    <section className="relative bg-white py-20 sm:py-28 md:py-36 overflow-hidden">
      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative">
        <motion.div
          initial={{ opacity: 0, y: 32 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-120px' }}
          transition={{ duration: 0.3, ease: [0.22, 1, 0.36, 1] }}
          className="mb-16 sm:mb-20"
        >
          <div className="flex items-center gap-3 mb-6">
            <div className="w-10 h-px bg-brand" />
            <span className="text-[13px] tracking-[0.12em] font-semibold text-brand">
              服务能力
            </span>
          </div>
          <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black text-ink tracking-tight leading-[0.95] max-w-3xl">
            为什么选择我们的{service.title}？
          </h2>
          <p className="text-lg text-text-secondary max-w-2xl mt-6 leading-relaxed">
            {service.overview}
          </p>
        </motion.div>

        {/* 核心能力 */}
        <div className="mb-16">
          <div className="flex items-center gap-3 mb-6">
            <div className="w-10 h-px bg-brand" />
            <span className="text-[13px] tracking-[0.12em] font-semibold text-brand">
              核心能力
            </span>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {service.features.map((feature, index) => {
              const Icon = icons[index % icons.length]!;
              return (
                <motion.div
                  key={feature}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{
                    delay: index * 0.06,
                    duration: 0.3,
                    ease: [0.22, 1, 0.36, 1],
                  }}
                  className="bain-card p-6"
                >
                  <div className="flex items-center gap-4">
                    <div className={`shrink-0 w-11 h-11 flex items-center justify-center ${
                      index === 0
                        ? 'bg-brand text-white'
                        : 'bg-bg-secondary text-text-secondary'
                    }`}>
                      <Icon className="w-5 h-5" />
                    </div>
                    <p className="text-sm font-medium text-text-secondary leading-relaxed">
                      {feature.split('：')[1] || feature}
                    </p>
                  </div>
                </motion.div>
              );
            })}
          </div>
        </div>

        {/* 服务优势 + 服务流程：不对称布局 */}
        <div className="asymmetric-wide-narrow">
          {/* 服务优势 */}
          <div>
            <div className="flex items-center gap-3 mb-6">
              <div className="w-10 h-px bg-brand" />
              <span className="text-[13px] tracking-[0.12em] font-semibold text-brand">
                服务优势
              </span>
            </div>
            <div className="space-y-4">
              {service.benefits.map((benefit, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, x: -20 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  transition={{
                    delay: index * 0.06,
                    duration: 0.3,
                    ease: [0.22, 1, 0.36, 1],
                  }}
                  className="bain-card p-5 flex items-start gap-3"
                >
                  <CheckCircle2 className="w-5 h-5 text-brand mt-0.5 shrink-0" />
                  <p className="text-sm font-medium text-text-secondary leading-relaxed">{benefit}</p>
                </motion.div>
              ))}
            </div>
          </div>

          {/* 服务流程 */}
          {service.process && service.process.length > 0 && (
            <div>
              <div className="flex items-center gap-3 mb-6">
                <div className="w-10 h-px bg-brand" />
                <span className="text-[13px] tracking-[0.12em] font-semibold text-brand">
                  服务流程
                </span>
              </div>
              <div className="space-y-4">
                {service.process.map((step, index) => (
                  <motion.div
                    key={step}
                    initial={{ opacity: 0, x: 20 }}
                    whileInView={{ opacity: 1, x: 0 }}
                    viewport={{ once: true }}
                    transition={{
                      delay: index * 0.06,
                      duration: 0.3,
                      ease: [0.22, 1, 0.36, 1],
                    }}
                    className="bain-card p-5"
                  >
                    <div className="flex items-start gap-3">
                      <div className="w-6 h-6 rounded-full bg-brand text-white flex items-center justify-center shrink-0 mt-0.5">
                        <span className="text-xs font-bold">{index + 1}</span>
                      </div>
                      <div>
                        <h4 className="font-bold text-ink text-sm mb-1">
                          {step.split('：')[0]}
                        </h4>
                        <p className="text-xs text-text-secondary leading-relaxed">
                          {step.split('：')[1] || step}
                        </p>
                      </div>
                    </div>
                  </motion.div>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}