xiaso-flnxi-website/components/TechSpecs.tsx

'use client'

import { Server, Container, HardDrive, Lock, Cloud, Code } from 'lucide-react'

const specs = [
  {
    category: '部署方式',
    icon: Container,
    items: [
      { label: '容器化部署', value: 'Docker' },
      { label: '一键安装', value: '支持' },
      { label: '自动更新', value: '支持' },
      { label: '跨平台', value: 'Linux / macOS / Windows' },
    ],
  },
  {
    category: '存储要求',
    icon: HardDrive,
    items: [
      { label: '存储类型', value: 'NAS设备' },
      { label: '最小空间', value: '100GB起' },
      { label: '推荐配置', value: '1TB+' },
      { label: '存储协议', value: 'NFS / SMB / iSCSI' },
    ],
  },
  {
    category: '系统要求',
    icon: Server,
    items: [
      { label: 'CPU', value: '2核心+' },
      { label: '内存', value: '4GB+' },
      { label: '数据库', value: 'PostgreSQL 14+' },
      { label: 'Docker版本', value: '20.10+' },
    ],
  },
  {
    category: '安全特性',
    icon: Lock,
    items: [
      { label: '数据加密', value: 'AES-256' },
      { label: '访问控制', value: '多级权限' },
      { label: '日志审计', value: '完整记录' },
      { label: '备份策略', value: '自动备份' },
    ],
  },
]

const advantages = [
  {
    icon: Cloud,
    title: '私有化部署',
    description: '数据完全掌控在企业手中，无需担心隐私泄露',
  },
  {
    icon: Code,
    title: '使用权销售',
    description: '购买即获得永久使用权，不开放源码，保证系统稳定性',
  },
  {
    icon: Server,
    title: '充分利用现有设备',
    description: '基于企业现有NAS设备，无需额外购置存储服务器',
  },
]

export default function TechSpecs() {
  return (
    <section id="specs" className="py-24 bg-apple-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="text-center mb-16">
          <h2 className="text-base text-apple-blue font-semibold tracking-wide uppercase mb-3">
            技术规格
          </h2>
          <h3 className="text-4xl sm:text-5xl font-bold text-apple-gray-900 mb-4">
            专业可靠的技术架构
          </h3>
          <p className="text-xl text-apple-gray-600 max-w-2xl mx-auto">
            企业级标准，满足各种业务场景需求
          </p>
        </div>

        {/* Specs Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
          {specs.map((spec, index) => {
            const Icon = spec.icon
            return (
              <div
                key={spec.category}
                className="bg-white rounded-2xl p-6 apple-shadow hover:apple-shadow-lg transition-all duration-300"
                style={{
                  animation: 'slideUp 0.6s ease-out',
                  animationDelay: `${index * 0.1}s`,
                }}
              >
                {/* Icon & Title */}
                <div className="flex items-center space-x-3 mb-6">
                  <div className="p-2 bg-apple-blue/10 rounded-lg">
                    <Icon className="w-6 h-6 text-apple-blue" />
                  </div>
                  <h4 className="text-lg font-semibold text-apple-gray-900">
                    {spec.category}
                  </h4>
                </div>

                {/* Specs List */}
                <div className="space-y-3">
                  {spec.items.map((item) => (
                    <div key={item.label} className="flex flex-col">
                      <span className="text-xs text-apple-gray-500 mb-1">
                        {item.label}
                      </span>
                      <span className="text-sm font-medium text-apple-gray-900">
                        {item.value}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            )
          })}
        </div>

        {/* Advantages */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {advantages.map((advantage, index) => {
            const Icon = advantage.icon
            return (
              <div
                key={advantage.title}
                className="relative group bg-white rounded-2xl p-8 apple-shadow hover:apple-shadow-lg transition-all duration-300 overflow-hidden"
                style={{
                  animation: 'scaleIn 0.5s ease-out',
                  animationDelay: `${index * 0.15}s`,
                }}
              >
                {/* Background Gradient */}
                <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-apple-blue/20 to-purple-500/20 rounded-full blur-2xl -z-10 group-hover:scale-150 transition-transform duration-500" />

                {/* Icon */}
                <div className="inline-flex p-4 bg-gradient-to-br from-apple-blue to-blue-600 rounded-2xl mb-4 group-hover:scale-110 transition-transform duration-300">
                  <Icon className="w-8 h-8 text-white" />
                </div>

                {/* Content */}
                <h4 className="text-xl font-semibold text-apple-gray-900 mb-3">
                  {advantage.title}
                </h4>
                <p className="text-apple-gray-600 leading-relaxed">
                  {advantage.description}
                </p>
              </div>
            )
          })}
        </div>

        {/* Docker Badge */}
        <div className="mt-16 text-center">
          <div className="inline-flex items-center space-x-4 bg-white px-8 py-4 rounded-2xl apple-shadow">
            <div className="text-4xl">🐳</div>
            <div className="text-left">
              <div className="text-sm text-apple-gray-500">Powered by</div>
              <div className="text-lg font-semibold text-apple-gray-900">Docker容器化技术</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}