import Link from 'next/link'
import { prisma } from '@/lib/prisma'
import { ComponentCard } from '@/components/ComponentCard'

export default async function Home() {
  // 获取每种配件类型的前几个商品
  const componentTypes = await prisma.componentType.findMany({
    include: {
      components: {
        take: 6,
        orderBy: {
          createdAt: 'desc'
        }
      }
    }
  })

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Hero Section */}
      <section className="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h1 className="text-4xl md:text-6xl font-bold mb-6">
            欢迎来到PC DIY商城
          </h1>
          <p className="text-xl md:text-2xl mb-8">
            专业的电脑配件在线选购平台，让您轻松打造梦想主机
          </p>
          <div className="space-x-4">
            <Link
              href="/components"
              className="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors"
            >
              立即选购
            </Link>
            <Link
              href="/build"
              className="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition-colors"
            >
              在线装机
            </Link>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-center mb-12">为什么选择我们</h2>
          <div className="grid md:grid-cols-3 gap-8">
            <div className="text-center">
              <div className="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <span className="text-2xl">🔧</span>
              </div>
              <h3 className="text-xl font-semibold mb-2">专业配件</h3>
              <p className="text-gray-600">
                提供CPU、内存、硬盘、主板、显卡、机箱等全系列配件
              </p>
            </div>
            <div className="text-center">
              <div className="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <span className="text-2xl">💰</span>
              </div>
              <h3 className="text-xl font-semibold mb-2">价格优势</h3>
              <p className="text-gray-600">
                多品牌选择，不同价位满足各种预算需求
              </p>
            </div>
            <div className="text-center">
              <div className="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <span className="text-2xl">🚀</span>
              </div>
              <h3 className="text-xl font-semibold mb-2">在线装机</h3>
              <p className="text-gray-600">
                智能配置推荐，一站式完成整机搭配
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Product Categories */}
      <section className="py-16 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-center mb-12">热门配件</h2>
          
          {componentTypes.map((type) => (
            <div key={type.id} className="mb-12">
              <div className="flex justify-between items-center mb-6">
                <h3 className="text-2xl font-semibold">{type.name}</h3>
                <Link
                  href={`/components?type=${type.id}`}
                  className="text-blue-600 hover:text-blue-800"
                >
                  查看更多 →
                </Link>
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {type.components.map((component) => (
                  <ComponentCard key={component.id} component={component} />
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 bg-gray-800 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl font-bold mb-4">准备开始装机了吗？</h2>
          <p className="text-xl mb-8">
            注册账号，享受更多服务和优惠
          </p>
          <Link
            href="/register"
            className="bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors"
          >
            立即注册
          </Link>
        </div>
      </section>
    </div>
  )
}