'use client'

import { motion } from 'framer-motion'
import { Button } from '@/components/ui/button'
import { CreditCard, Users, Network, Database } from 'lucide-react'

// 根据框图重构四大核心板块
const products = [
  {
    title: '高效安全的金融科技支撑',
    enTitle: 'Fintech Support',
    description: '收单-分销-结算一体化，多通道AI路由，保障资金安全与高效分账。',
    icon: CreditCard,
    color: 'bg-gradient-to-br from-[#0A1931] to-[#185ADB]',
    features: [
      { title: "白马智付", desc: "锁粉 / 自动分佣 / AI路由" },
      { title: "智能设备", desc: "智慧收银系统 / 支持绿色积分 / 智能监控巡店" },
      { title: "支付能力", desc: "主扫、被扫模式全支持 / 强大技术底座" }
    ]
  },
  {
    title: '简单易用的私域运营工具',
    enTitle: 'Private Domain Tools',
    description: 'AI驱动的私域流量运营神器，让获客、留存、转化变得简单高效。',
    icon: Users,
    color: 'bg-gradient-to-br from-[#FF6600] to-[#FF8C00]',
    features: [
      { title: "AI数字人", desc: "AI直播/AI导购/AI客服/AI私域" },
      { title: "积分权益", desc: "兑换AI直播 / 营销获客权益" },
      { title: "企微私域", desc: "AI数字员工自动实现：社群运营/维护/导购/客服" }
    ]
  },
  {
    title: '轻松锁客的异业联盟系统',
    enTitle: 'Alliance System',
    description: '打破单打独斗，通过异业联盟锁定客户终身价值，实现跨界收益。',
    icon: Network,
    color: 'bg-gradient-to-br from-[#185ADB] to-[#0A1931]',
    features: [
      { title: "锁定客户", desc: "扫码即锁定推荐关系，终身享受消费分佣" },
      { title: "跨界分佣", desc: "赚360行的钱 / 跨门店收益" },
      { title: "供应链分佣", desc: "分享优质供应链商品获利" }
    ]
  },
  {
    title: '统一高效的生态基础设施',
    enTitle: 'Ecological Infrastructure',
    description: '为小微企业提供完整的数智化基建，打通会员、资产与供应链。',
    icon: Database,
    color: 'bg-gradient-to-br from-[#059669] to-[#10B981]',
    features: [
      { title: "会员系统", desc: "跨平台生态融合 / 统一身份" },
      { title: "数字资产体系", desc: "RWA资产 / 积分、抵用券、金币等" },
      { title: "供应链资源", desc: "稳定安全靠谱" }
    ]
  }
]

export function ProductPreview() {
  return (
    <section className="py-12 md:py-20 lg:py-24 bg-white">
      <div className="container px-4 md:px-6 mx-auto">
        {/* Section Header */}
        <div className="text-center mb-10 md:mb-16">
          <motion.h2 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-[#0A1931] mb-3 md:mb-4"
          >
            AI时代小微创业 + 消费循环生态圈
          </motion.h2>
          <motion.p 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.1 }}
            className="text-sm sm:text-base md:text-lg text-gray-500 px-4"
          >
            四大核心数智化产品矩阵，全方位赋能实体商业
          </motion.p>
        </div>

        {/* Product Cards Grid - 2x2 Layout recommended for 4 items */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 lg:gap-10">
          {products.map((product, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              className="group h-full"
            >
              <div className="card-hover bg-white rounded-xl md:rounded-2xl overflow-hidden border border-gray-100 h-full flex flex-col">
                {/* Header with Icon */}
                <div className="p-6 md:p-8 flex items-start justify-between border-b border-gray-50 bg-gray-50/50">
                  <div>
                    <h3 className="text-xl md:text-2xl font-bold text-[#0A1931] mb-1">
                      {product.title}
                    </h3>
                    <span className="text-xs font-semibold text-[#FF6600] uppercase tracking-wider">
                      {product.enTitle}
                    </span>
                  </div>
                  <div className={`w-12 h-12 md:w-14 md:h-14 rounded-xl flex items-center justify-center text-white shadow-md ${product.color}`}>
                    <product.icon className="w-6 h-6 md:w-7 md:h-7" />
                  </div>
                </div>
                
                {/* Content */}
                <div className="p-6 md:p-8 flex-grow flex flex-col">
                  <p className="text-sm text-gray-500 mb-6 leading-relaxed">
                    {product.description}
                  </p>
                  
                  {/* Features List */}
                  <ul className="space-y-3 md:space-y-4 mb-8 flex-grow">
                    {product.features.map((feature, fIndex) => (
                      <li key={fIndex} className="flex items-start text-sm">
                        <span className="w-1.5 h-1.5 bg-[#FF6600] rounded-full mr-3 mt-1.5 shrink-0"></span>
                        <div className="flex-1">
                          <strong className="text-[#0A1931] block mb-0.5">{feature.title}</strong>
                          <span className="text-gray-500 text-xs md:text-sm">{feature.desc}</span>
                        </div>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  )
}