import { ProductList } from '@/components/products/ProductList'
import { Button } from '@/components/ui/button'
import Link from 'next/link'
import { ArrowRight } from 'lucide-react'

export default function ProductsPage() {
  return (
    <div className="min-h-screen bg-white pt-24 pb-20">
      <div className="container mx-auto px-4 md:px-6">
        {/* Page Header */}
        <div className="max-w-3xl mx-auto text-center mb-16">
          <h1 className="text-4xl md:text-5xl font-bold text-secondary mb-6">
            产品服务
          </h1>
          <p className="text-lg text-muted-foreground leading-relaxed">
            基于军工级技术底座，我们构建了从支付结算、私域运营到异业联盟的完整生态闭环，
            助力小微企业在 AI 时代实现数字化升级与业绩倍增。
          </p>
        </div>

        {/* Navigation Tabs */}
        <div className="sticky top-20 z-40 bg-white/95 backdrop-blur-md py-4 mb-8 border-b border-gray-100 hidden md:block">
           <nav className="flex justify-center gap-8">
             <a href="#fintech" className="text-sm font-medium text-muted-foreground hover:text-primary transition-colors">金融科技</a>
             <a href="#ai" className="text-sm font-medium text-muted-foreground hover:text-primary transition-colors">私域运营</a>
             <a href="#alliance" className="text-sm font-medium text-muted-foreground hover:text-primary transition-colors">异业联盟</a>
             <a href="#infrastructure" className="text-sm font-medium text-muted-foreground hover:text-primary transition-colors">生态基建</a>
           </nav>
        </div>

        <ProductList />

        {/* CTA */}
        <div className="mt-24 text-center bg-accent rounded-2xl p-12">
          <h2 className="text-3xl font-bold text-secondary mb-4">准备好升级您的商业模式了吗？</h2>
          <p className="text-muted-foreground mb-8 max-w-2xl mx-auto">
            立即接入白马家园生态，开启数智化转型之旅。
          </p>
          <div className="flex justify-center gap-4">
            <Button size="lg" asChild className="bg-primary hover:bg-primary/90 text-white rounded-full px-8">
              <Link href="/contact">
                立即咨询 <ArrowRight className="ml-2 h-4 w-4" />
              </Link>
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}