'use client'

import { motion } from 'framer-motion'
import { 
  CreditCard, 
  Smartphone, 
  Bot, 
  Users, 
  Network, 
  ShoppingBag, 
  LayoutGrid, 
  Coins,
  Shield,
  Camera,
  Share2,
  Gift
} from 'lucide-react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

// 完全基于框图重构的数据结构
const categories = [
  {
    id: "fintech",
    title: "高效安全的金融科技支撑",
    subtitle: "收单-分销-结算 一体化解决方案",
    items: [
      {
        title: "白马智付",
        icon: CreditCard,
        features: [
          "强大的技术能力，保障交易稳定",
          "多通道AI路由，智能选择最优通道",
          "AI智慧收款码：支持输入文本",
          "核心功能：锁粉、自动分佣"
        ]
      },
      {
        title: "智能设备",
        icon: Smartphone,
        features: [
          "智慧收银系统硬件支持",
          "全场景支付：支持主扫、被扫",
          "绿色积分：支持积分抵扣支付",
          "设备联网与远程管理"
        ]
      }
    ]
  },
  {
    id: "ai",
    title: "简单易用的私域运营工具",
    subtitle: "AI赋能，让私域运营自动化、智能化",
    items: [
      {
        title: "AI营销数字人",
        icon: Bot,
        features: [
          "数字员工：全天候导购、客服",
          "AI直播：自动讲解商品，提升转化",
          "AI营销获客：智能生成内容引流"
        ]
      },
      {
        title: "积分与消费券体系",
        icon: Gift,
        features: [
          "消费券：可从供应商进货，可流转他人",
          "积分权益：兑换AI数字人/直播权益",
          "企微私域运营：无缝打通微信生态"
        ]
      }
    ]
  },
  {
    id: "alliance",
    title: "轻松锁客的异业联盟系统",
    subtitle: "打破孤岛，实现跨界收益最大化",
    items: [
      {
        title: "锁定客户终身价值",
        icon: Users,
        features: [
          "一次锁定，终身受益",
          "赚360行的钱：跨行业收益共享",
          "客户在联盟内任何消费均有关联"
        ]
      },
      {
        title: "全维度分佣机制",
        icon: Network,
        features: [
          "赚其他门店的分佣收益",
          "赚其他供应链的分佣收益",
          "构建真正的利益共同体"
        ]
      }
    ]
  },
  {
    id: "infrastructure",
    title: "统一高效的生态基础设施",
    subtitle: "以上生态均对外开放，共建数智化底座",
    items: [
      {
        title: "核心系统基建",
        icon: LayoutGrid,
        features: [
          "统一会员系统：跨平台生态融合",
          "专业小微数智化系统：积分支付年费",
          "涵盖：收银/会员/营销/外卖/进销存/连锁等"
        ]
      },
      {
        title: "数字资产体系 (RWA)",
        icon: Coins,
        features: [
          "RWA数字资产化",
          "资产转换：积分、抵用券、金币互转",
          "数字藏品与RWA权益绑定"
        ]
      },
      {
        title: "供应链与监控",
        icon: Shield,
        features: [
          "供应链资源：稳定、安全、靠谱",
          "智能监控巡店设备：远程管理门店",
          "供应链陆续招募中"
        ]
      }
    ]
  }
]

export function ProductList() {
  return (
    <div className="space-y-24 py-12">
      {categories.map((category, catIndex) => (
        <section key={category.id} id={category.id} className="scroll-mt-24">
          {/* Section Header */}
          <div className="flex flex-col md:flex-row md:items-center gap-4 md:gap-6 mb-12">
            <div className="w-12 h-12 md:w-16 md:h-16 flex items-center justify-center bg-[#FF6600] text-white text-xl md:text-2xl font-bold rounded-2xl shadow-lg shrink-0">
              0{catIndex + 1}
            </div>
            <div>
              <h2 className="text-2xl md:text-3xl font-bold text-[#0A1931] mb-2">{category.title}</h2>
              <p className="text-sm md:text-base text-gray-500 font-medium">{category.subtitle}</p>
            </div>
          </div>

          {/* Products Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
            {category.items.map((item, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
              >
                <Card className="h-full border-0 shadow-md hover:shadow-xl transition-all duration-300 bg-white group hover:-translate-y-1">
                  <CardHeader className="flex flex-row items-center gap-4 pb-4 border-b border-gray-50">
                    <div className="w-12 h-12 bg-[#0A1931]/5 rounded-xl flex items-center justify-center text-[#FF6600] group-hover:bg-[#FF6600] group-hover:text-white transition-colors duration-300">
                      <item.icon className="w-6 h-6" />
                    </div>
                    <CardTitle className="text-lg font-bold text-[#0A1931]">{item.title}</CardTitle>
                  </CardHeader>
                  <CardContent className="pt-6">
                    <ul className="space-y-3">
                      {item.features.map((feature, fIndex) => (
                        <li key={fIndex} className="flex items-start text-sm text-gray-600">
                          <span className="w-1.5 h-1.5 bg-[#185ADB] rounded-full mr-3 mt-1.5 shrink-0"></span>
                          <span className="leading-relaxed">{feature}</span>
                        </li>
                      ))}
                    </ul>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </section>
      ))}
    </div>
  )
}
