'use client'

import { motion } from 'framer-motion'
import { Diamond, Truck, Eye, Coins } from 'lucide-react'

const infraItems = [
  {
    icon: Diamond,
    title: "智慧会员体系",
    description: "一次注册，全城打通<br/>全平台消费数据互通"
  },
  {
    icon: Truck,
    title: "供应链赋能",
    description: "积分当钱花，进货更便宜<br/>源头工厂直供去库存"
  },
  {
    icon: Eye,
    title: "智能巡店系统",
    description: "手机看店，AI管店<br/>客流热力图实时分析"
  },
  {
    icon: Coins,
    title: "数智积分体系",
    description: "基于真实消费产生<br/>拒绝泡沫，价值恒定"
  }
]

export function Infrastructure() {
  return (
    <section className="py-12 md:py-16 lg:py-20 bg-[#F4F7FB]">
      <div className="container px-4 md:px-6 mx-auto">
        {/* Section Header - 响应式 */}
        <div className="text-center mb-10 md:mb-16">
          <h2 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold text-[#0A1931] mb-3 md:mb-4">
            统一高效的生态基础设施
          </h2>
          {/* 已移除：为上市合规打造的底层架构 */}
        </div>

        {/* Grid - 响应式布局 */}
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
          {infraItems.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 }}
              className="bg-white p-4 md:p-6 lg:p-8 text-center rounded-lg md:rounded-xl border-b-4 border-transparent hover:border-[#FF6600] hover:shadow-lg transition-all duration-300"
            >
              {/* Icon - 响应式 */}
              <div className="w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 bg-[#0A1931]/5 rounded-lg md:rounded-xl flex items-center justify-center mx-auto mb-4 md:mb-6">
                <item.icon className="w-5 h-5 sm:w-6 sm:h-6 md:w-8 md:h-8 text-[#185ADB]" />
              </div>
              {/* Title - 响应式 */}
              <h3 className="text-sm sm:text-base md:text-lg font-bold text-[#0A1931] mb-2 md:mb-3">
                {item.title}
              </h3>
              {/* Description - 响应式 */}
              <p className="text-xs sm:text-sm text-gray-500 leading-relaxed" 
                 dangerouslySetInnerHTML={{ __html: item.description }}>
              </p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  )
}