interface ProductItem {
  id: string;
  title: string;
  desc: string;
}

interface ProductsSectionProps {
  title: string;
  items: ProductItem[];
}

export default function ProductsSection({ title, items }: ProductsSectionProps) {
  return (
    <section className="py-8 sm:py-12 md:py-16 bg-gray-50">
      <div className="max-w-6xl mx-auto px-4">
        <div className="text-center mb-8 sm:mb-12">
          <h2 className="text-2xl sm:text-3xl font-bold">{title}</h2>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
          {items.map((product, index) => (
            <div
              key={index}
              className="bg-white rounded-lg shadow-lg overflow-hidden"
            >
              <div className="h-24 sm:h-32 bg-gray-400 relative">
                <div className="absolute top-2 sm:top-4 left-2 sm:left-4 bg-blue-600 text-white px-2 sm:px-3 py-1 rounded text-xs sm:text-sm">
                  AWS
                </div>
              </div>
              <div className="p-4 sm:p-6">
                <div className="text-orange-500 font-bold text-base sm:text-lg mb-2">
                  {product.id}
                </div>
                <h3 className="font-bold text-base sm:text-lg mb-2 sm:mb-3">
                  {product.title}
                </h3>
                <p className="text-gray-600 text-xs sm:text-sm mb-3 sm:mb-4 leading-relaxed">
                  {product.desc}
                </p>
                <button className="bg-orange-500 text-white px-3 sm:px-4 py-2 rounded text-xs sm:text-sm hover:bg-orange-600 w-full sm:w-auto">
                  立即咨询
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}