'use client'

import { motion } from 'framer-motion'
import { Target, Eye, Heart, Star } from 'lucide-react'

export function MissionVisionEN() {
  const coreValues = [
    {
      icon: Target,
      title: "Mission",
      content: "Military-grade Technology Empowers Physical Economy<br/>AI Drives Universal Business Connectivity",
      color: "from-orange-500 to-red-500"
    },
    {
      icon: Eye,
      title: "Vision", 
      content: "One Baima Family Worldwide<br/>Grow Wealth Together, Spend Together",
      color: "from-blue-500 to-indigo-600"
    },
    {
      icon: Heart,
      title: "Values",
      content: "Co-create · Share · Prosper Together",
      color: "from-green-500 to-emerald-600"
    }
  ]

  return (
    <section className="py-24 bg-gradient-to-br from-[#0A1931] via-[#0d1f45] to-[#050A14] relative overflow-hidden">
      {/* 背景装饰 */}
      <div className="absolute inset-0">
        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-[#FF6600] rounded-full blur-[150px] opacity-10"></div>
        <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-[#185ADB] rounded-full blur-[150px] opacity-10"></div>
      </div>

      <div className="container mx-auto px-4 relative z-10">
        {/* 标题 */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="text-center mb-16"
        >
          <h2 className="text-3xl md:text-5xl font-black text-white mb-4">
            Our Beliefs
          </h2>
          <p className="text-gray-400 text-lg max-w-2xl mx-auto">
            Staying True to Our Original Aspiration, Advancing with Determination - Baima Home Builds a Better Future Together
          </p>
        </motion.div>

        {/* 三大核心支柱 */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {coreValues.map((item, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: index * 0.2 }}
              className="group"
            >
              <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-8 border border-white/10 hover:border-[#FF6600]/50 transition-all duration-500 h-full">
                {/* 图标 */}
                <div className={`w-20 h-20 mx-auto mb-6 rounded-2xl bg-gradient-to-r ${item.color} flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300`}>
                  <item.icon className="w-10 h-10 text-white" />
                </div>

                {/* 标题 */}
                <h3 className="text-2xl font-bold text-white text-center mb-6">
                  {item.title}
                </h3>

                {/* 内容 */}
                <div 
                  className="text-center text-gray-300 leading-loose text-lg"
                  dangerouslySetInnerHTML={{ __html: item.content }}
                />

                {/* 装饰线 */}
                <div className="mt-6 flex justify-center">
                  <div className={`w-16 h-1 bg-gradient-to-r ${item.color} rounded-full opacity-50`}></div>
                </div>
              </div>
            </motion.div>
          ))}
        </div>

        {/* 底部标语 */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ delay: 0.5 }}
          className="mt-16 text-center"
        >
          <div className="inline-flex items-center gap-4 bg-[#FF6600]/10 backdrop-blur-sm px-8 py-4 rounded-full border border-[#FF6600]/20">
            <Star className="w-6 h-6 text-[#FF6600]" />
            <span className="text-[#FF6600] font-bold text-lg">
              Digital Intelligence Connects Businesses, Creates Better Future
            </span>
            <Star className="w-6 h-6 text-[#FF6600]" />
          </div>
        </motion.div>
      </div>
    </section>
  )
}