novalon-website/src/components/detail/detail-solution-value.tsx

'use client';

import { motion } from 'framer-motion';
import { AlertTriangle, CheckCircle2, ArrowRight, Package, Wrench } from 'lucide-react';
import type { Solution } from '@/lib/constants/solutions';
import { PRODUCTS } from '@/lib/constants/products';
import { SERVICES } from '@/lib/constants/services';

interface SolutionValueSectionProps {
  solution: Solution;
}

export function SolutionValueSection({ solution }: SolutionValueSectionProps) {
  const primaryProducts = solution.suiteCombination.primaryProducts
    .map((id) => PRODUCTS.find((p) => p.id === id))
    .filter(Boolean);

  const complementaryServices = solution.suiteCombination.complementaryServices
    .map((id) => SERVICES.find((s) => s.id === id))
    .filter(Boolean);

  return (
    <section className="bg-white py-16 lg:py-20">
      <div className="container-wide">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
          className="mb-12 text-center"
        >
          <h2 className="text-2xl font-bold text-gray-900 lg:text-3xl">
            {solution.valueProposition.headline}
          </h2>
        </motion.div>

        <div className="mb-12 grid grid-cols-1 gap-6 md:grid-cols-3">
          {solution.valueProposition.points.map((point, index) => (
            <motion.div
              key={point.title}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.4, delay: index * 0.1 }}
              className="rounded-xl border border-gray-100 bg-gray-50/50 p-6 text-center"
            >
              <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-[#C41E3A]/10 text-[#C41E3A]">
                <span className="text-lg">{point.icon}</span>
              </div>
              <h3 className="mb-2 text-base font-semibold text-gray-900">{point.title}</h3>
              <p className="text-sm leading-relaxed text-gray-600">{point.description}</p>
            </motion.div>
          ))}
        </div>

        <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
          >
            <h3 className="mb-4 flex items-center gap-2 text-lg font-bold text-gray-900">
              <AlertTriangle className="h-5 w-5 text-orange-500" />
              行业挑战
            </h3>
            <ul className="space-y-3">
              {solution.challenges.map((challenge, index) => (
                <motion.li
                  key={challenge}
                  initial={{ opacity: 0, x: -10 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.3, delay: index * 0.05 }}
                  className="flex items-start gap-2 text-sm text-gray-700"
                >
                  <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-orange-400" />
                  {challenge}
                </motion.li>
              ))}
            </ul>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, x: 20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.15 }}
          >
            <h3 className="mb-4 flex items-center gap-2 text-lg font-bold text-gray-900">
              <CheckCircle2 className="h-5 w-5 text-green-500" />
              解决方案
            </h3>
            <ul className="space-y-3">
              {solution.solutions.map((sol, index) => (
                <motion.li
                  key={sol}
                  initial={{ opacity: 0, x: 10 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.3, delay: index * 0.05 }}
                  className="flex items-start gap-2 text-sm text-gray-700"
                >
                  <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-green-500" />
                  {sol}
                </motion.li>
              ))}
            </ul>
          </motion.div>
        </div>

        {(primaryProducts.length > 0 || complementaryServices.length > 0) && (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="mt-12 rounded-2xl bg-gradient-to-br from-gray-50 to-gray-100 p-8"
          >
            <h3 className="mb-2 text-lg font-bold text-gray-900">推荐套装组合</h3>
            <p className="mb-6 text-sm leading-relaxed text-gray-600">
              {solution.suiteCombination.rationale}
            </p>

            <div className="flex flex-wrap items-center gap-4">
              {primaryProducts.map((product) =>
                product ? (
                  <a
                    key={product.id}
                    href={`/products/${product.id}`}
                    className="inline-flex items-center gap-2 rounded-lg border border-blue-200 bg-white px-4 py-2 text-sm font-medium text-blue-700 transition-all hover:bg-blue-50 hover:border-blue-300"
                  >
                    <Package className="h-4 w-4" />
                    {product.title}
                    <ArrowRight className="h-3 w-3" />
                  </a>
                ) : null,
              )}
              {complementaryServices.map((service) =>
                service ? (
                  <a
                    key={service.id}
                    href={`/services/${service.id}`}
                    className="inline-flex items-center gap-2 rounded-lg border border-purple-200 bg-white px-4 py-2 text-sm font-medium text-purple-700 transition-all hover:bg-purple-50 hover:border-purple-300"
                  >
                    <Wrench className="h-4 w-4" />
                    {service.title}
                    <ArrowRight className="h-3 w-3" />
                  </a>
                ) : null,
              )}
            </div>
          </motion.div>
        )}
      </div>
    </section>
  );
}