lh-website/src/components/about/ApplicationScenarios.tsx

import { BookOpen, Headphones, FileText, BarChart3, ClipboardCheck, FileSearch, Sparkles } from 'lucide-react';
import { applicationScenarios } from '@/data/mockData';

const iconMap: Record<string, React.ReactNode> = {
  BookOpen: <BookOpen className="w-6 h-6" />,
  Headphones: <Headphones className="w-6 h-6" />,
  FileText: <FileText className="w-6 h-6" />,
  BarChart3: <BarChart3 className="w-6 h-6" />,
  ClipboardCheck: <ClipboardCheck className="w-6 h-6" />,
  FileSearch: <FileSearch className="w-6 h-6" />,
};

export function ApplicationScenarios() {
  return (
    <section className="py-20 bg-deep-space-50 relative overflow-hidden">
      <div className="absolute top-0 left-1/4 w-96 h-96 bg-glow-green/5 rounded-full blur-3xl" />
      <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-tech-cyan-500/5 rounded-full blur-3xl" />
      
      <div className="container mx-auto px-4 md:px-6 relative z-10">
        <div className="text-center mb-16">
          <span className="inline-block text-glow-green text-sm font-medium mb-3 tracking-wider uppercase">
            全行业场景落地
          </span>
          <h2 className="text-3xl md:text-4xl font-bold text-deep-space-900 mb-4">
            赋能千行百业数字化转型
          </h2>
          <p className="text-deep-space-500 text-lg max-w-3xl mx-auto">
            平台通用性强、适配场景广，可快速搭建各类企业AI应用，助力企业实现智能化升级。
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {applicationScenarios.map((scenario) => (
            <div
              key={scenario.id}
              className="group bg-white rounded-xl p-6 hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-deep-space-100 relative overflow-hidden"
            >
              <div className="absolute top-0 right-0 w-24 h-24 bg-gradient-to-br from-glow-green/5 to-transparent rounded-bl-full" />
              <div className="flex items-start gap-4">
                <div className="w-12 h-12 bg-gradient-to-br from-glow-green/10 to-tech-cyan-500/10 rounded-lg flex items-center justify-center text-glow-green flex-shrink-0 group-hover:scale-110 transition-transform shadow-sm">
                  {iconMap[scenario.icon]}
                </div>
                <div className="flex-1">
                  <div className="flex items-center gap-2 mb-2">
                    <h3 className="text-lg font-semibold text-deep-space-900">
                      {scenario.name}
                    </h3>
                    <Sparkles className="w-4 h-4 text-glow-green" />
                  </div>
                  <p className="text-deep-space-500 text-sm mb-4 leading-relaxed">
                    {scenario.description}
                  </p>
                  <div className="flex flex-wrap gap-2">
                    {scenario.industries.map((industry) => (
                      <span
                        key={industry}
                        className="px-3 py-1 text-xs font-medium text-glow-green bg-glow-green/10 rounded-full border border-glow-green/20"
                      >
                        {industry}
                      </span>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-16 text-center">
          <div className="inline-flex items-center gap-4 bg-white rounded-full px-8 py-4 shadow-lg">
            <div className="flex -space-x-3">
              {['电', '政', '制', '金', '办'].map((char, i) => (
                <div
                  key={i}
                  className="w-10 h-10 rounded-full bg-gradient-to-br from-glow-green to-tech-cyan-500 flex items-center justify-center text-white text-sm font-bold border-2 border-white"
                >
                  {char}
                </div>
              ))}
            </div>
            <span className="text-deep-space-600">覆盖电力、政务、制造、金融、办公等全行业</span>
          </div>
        </div>
      </div>
    </section>
  );
}