'use client';

import { motion } from 'framer-motion';
import {
  CheckCircle2,
  Lightbulb,
  Target,
  TrendingUp,
} from 'lucide-react';
import type { Solution } from '@/lib/constants/solutions';

interface SolutionValueSectionProps {
  solution: Solution;
}

export function SolutionValueSection({ solution }: SolutionValueSectionProps) {
  return (
    <section className="relative bg-bg-primary 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.8, 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">
            为<span className="text-brand">{solution.industry}</span>量身定制
          </h2>
          <p className="text-lg text-text-secondary max-w-2xl mt-6 leading-relaxed">
            {solution.description}
          </p>
        </motion.div>

        {/* 痛点 + 方案：不对称布局 */}
        <div className="asymmetric-wide-narrow mb-16">
          {/* 行业痛点 */}
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true, margin: '-80px' }}
            transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
          >
            <div className="bain-card p-8">
              <h3 className="text-xl font-bold text-ink mb-6 flex items-center gap-3">
                <span className="w-10 h-10 flex items-center justify-center bg-brand text-white">
                  <Target className="w-5 h-5" />
                </span>
                行业痛点挑战
              </h3>
              <ul className="space-y-4">
                {solution.challenges.map((challenge, index) => (
                  <motion.li
                    key={index}
                    initial={{ opacity: 0, y: 15 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{
                      delay: index * 0.08,
                      duration: 0.45,
                      ease: [0.22, 1, 0.36, 1],
                    }}
                    className="flex items-start gap-3 text-text-secondary"
                  >
                    <span className="w-1.5 h-1.5 rounded-full bg-brand mt-2 shrink-0" />
                    <span className="text-sm leading-relaxed">{challenge}</span>
                  </motion.li>
                ))}
              </ul>
            </div>
          </motion.div>

          {/* 解决方案 */}
          <motion.div
            initial={{ opacity: 0, x: 30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true, margin: '-80px' }}
            transition={{ duration: 0.7, delay: 0.15, ease: [0.22, 1, 0.36, 1] }}
          >
            <div className="bain-card p-8">
              <h3 className="text-xl font-bold text-ink mb-6 flex items-center gap-3">
                <span className="w-10 h-10 flex items-center justify-center bg-accent-blue text-white">
                  <Lightbulb className="w-5 h-5" />
                </span>
                睿新致远解决方案
              </h3>
              <ul className="space-y-4">
                {solution.solutions.map((solutionItem, index) => (
                  <motion.li
                    key={index}
                    initial={{ opacity: 0, y: 15 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{
                      delay: 0.25 + index * 0.08,
                      duration: 0.45,
                      ease: [0.22, 1, 0.36, 1],
                    }}
                    className="flex items-start gap-3 text-text-secondary"
                  >
                    <CheckCircle2 className="w-4 h-4 text-accent-blue mt-0.5 shrink-0" />
                    <span className="text-sm leading-relaxed">{solutionItem}</span>
                  </motion.li>
                ))}
              </ul>
            </div>
          </motion.div>
        </div>

        {/* 价值主张 */}
        {solution.valueProposition && (
          <motion.div
            initial={{ opacity: 0, y: 32 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, margin: '-80px' }}
            transition={{ duration: 0.75, delay: 0.3 }}
          >
            <div className="mb-12">
              <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>
              <h3 className="text-2xl sm:text-3xl md:text-4xl font-black text-ink tracking-tight leading-[0.95]">
                {solution.valueProposition.headline}
              </h3>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {solution.valueProposition.points.map((point, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{
                    delay: index * 0.08,
                    duration: 0.5,
                    ease: [0.22, 1, 0.36, 1],
                  }}
                  className="bain-card p-7"
                >
                  <div className="w-12 h-12 flex items-center justify-center bg-accent-blue text-white mb-5">
                    <TrendingUp className="w-6 h-6" />
                  </div>
                  <h4 className="text-lg font-bold text-ink mb-2">{point.title}</h4>
                  <p className="text-sm text-text-secondary leading-relaxed">{point.description}</p>
                </motion.div>
              ))}
            </div>
          </motion.div>
        )}

        {/* 产品组合 */}
        {solution.suiteCombination && (
          <motion.div
            initial={{ opacity: 0, y: 32 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, margin: '-80px' }}
            transition={{ duration: 0.75, delay: 0.4 }}
            className="mt-20"
          >
            <div className="mb-12">
              <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>
              <h3 className="text-2xl sm:text-3xl font-black text-ink tracking-tight leading-[0.95]">
                推荐搭配方案
              </h3>
            </div>

            <div className="bain-card p-8 sm:p-10">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
                <div>
                  <h4 className="text-sm font-bold text-ink mb-5 flex items-center gap-2.5">
                    <span className="w-8 h-8 flex items-center justify-center bg-brand text-white text-xs font-bold">
                      核
                    </span>
                    核心产品组合
                  </h4>
                  <div className="flex flex-wrap gap-3">
                    {solution.suiteCombination.primaryProducts.map((product) => (
                      <span
                        key={product}
                        className="px-4 py-2 bg-brand-soft/50 text-brand text-sm font-semibold border border-brand/20"
                      >
                        {product}
                      </span>
                    ))}
                  </div>
                </div>

                <div>
                  <h4 className="text-sm font-bold text-ink mb-5 flex items-center gap-2.5">
                    <span className="w-8 h-8 flex items-center justify-center bg-accent-blue text-white text-xs font-bold">
                      配
                    </span>
                    配套专业服务
                  </h4>
                  <div className="flex flex-wrap gap-3">
                    {solution.suiteCombination.complementaryServices.map((service) => (
                      <span
                        key={service}
                        className="px-4 py-2 bg-blue-50 text-blue-700 text-sm font-semibold border border-blue-200"
                      >
                        {service}
                      </span>
                    ))}
                  </div>
                </div>
              </div>

              <p className="mt-8 p-5 bg-bg-secondary text-sm text-text-secondary leading-relaxed">
                <strong className="text-ink">组合逻辑：</strong>{solution.suiteCombination.rationale}
              </p>
            </div>
          </motion.div>
        )}
      </div>
    </section>
  );
}