import { notFound } from 'next/navigation';
import { PRODUCTS } from '@/lib/constants';
import { Button } from '@/components/ui/button';
import { ArrowLeft, CheckCircle2, Zap, Target, Layers, CreditCard, ArrowRight } from 'lucide-react';
import Link from 'next/link';

export async function generateStaticParams() {
  return PRODUCTS.map((product) => ({
    id: product.id,
  }));
}

export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const product = PRODUCTS.find((p) => p.id === id);
  
  if (!product) {
    return {
      title: '产品未找到',
    };
  }

  return {
    title: `${product.title} - 睿新致远`,
    description: product.description,
  };
}

export default async function ProductDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const product = PRODUCTS.find((p) => p.id === id);

  if (!product) {
    notFound();
  }

  return (
    <div className="min-h-screen bg-white">
      <div className="relative overflow-hidden bg-gradient-to-b from-[#FAFAFA] to-white">
        <div className="container-wide relative z-10 pt-32 pb-20">
          <Link
            href="/#products"
            className="inline-flex items-center text-[#5C5C5C] hover:text-[#C41E3A] transition-colors mb-6"
          >
            <ArrowLeft className="w-4 h-4 mr-2" />
            返回产品列表
          </Link>
          <div className="max-w-4xl">
            <div className="inline-block px-4 py-2 bg-[#C41E3A]/10 rounded-full text-[#C41E3A] text-sm mb-6">
              {product.category}
            </div>
            <h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
              {product.title}
            </h1>
            <p className="text-xl text-[#5C5C5C] leading-relaxed">
              {product.description}
            </p>
          </div>
        </div>
      </div>

      <div className="container-wide relative z-10 py-16">
        <div className="max-w-4xl">
          <section className="mb-16">
            <h2 className="text-3xl font-bold text-[#1C1C1C] mb-6">产品概述</h2>
            <p className="text-lg text-[#5C5C5C] leading-relaxed">
              {product.overview}
            </p>
          </section>

          <section className="mb-16">
            <h2 className="text-3xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
              <Zap className="w-8 h-8 text-[#C41E3A]" />
              核心功能
            </h2>
            <div className="grid md:grid-cols-2 gap-4">
              {product.features.map((feature, index) => (
                <div
                  key={index}
                  className="flex items-start gap-3 p-4 bg-[#F5F7FA] rounded-lg hover:bg-[#FFFBF5] transition-colors"
                >
                  <div className="w-6 h-6 bg-[#C41E3A] rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                    <CheckCircle2 className="w-4 h-4 text-white" />
                  </div>
                  <span className="text-[#1C1C1C]">{feature}</span>
                </div>
              ))}
            </div>
          </section>

          <section className="mb-16">
            <h2 className="text-3xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
              <Target className="w-8 h-8 text-[#C41E3A]" />
              产品优势
            </h2>
            <div className="space-y-4">
              {product.benefits.map((benefit, index) => (
                <div
                  key={index}
                  className="flex items-start gap-3 p-4 bg-gradient-to-r from-[#FFFBF5] to-transparent rounded-lg border-l-4 border-[#C41E3A]"
                >
                  <div className="w-8 h-8 bg-[#C41E3A] rounded-lg flex items-center justify-center flex-shrink-0">
                    <Target className="w-4 h-4 text-white" />
                  </div>
                  <span className="text-[#1C1C1C] font-medium">{benefit}</span>
                </div>
              ))}
            </div>
          </section>

          <section className="mb-16">
            <h2 className="text-3xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
              <Layers className="w-8 h-8 text-[#C41E3A]" />
              实施流程
            </h2>
            <div className="space-y-4">
              {product.process.map((step, index) => (
                <div key={index} className="flex items-start gap-4">
                  <div className="w-10 h-10 bg-[#C41E3A] rounded-full flex items-center justify-center flex-shrink-0 text-white font-bold">
                    {index + 1}
                  </div>
                  <div className="flex-1 pb-4">
                    <p className="text-[#1C1C1C] font-medium">{step}</p>
                    {index < product.process.length - 1 && (
                      <div className="absolute left-5 top-10 w-0.5 h-8 bg-[#C41E3A]/20" />
                    )}
                  </div>
                </div>
              ))}
            </div>
          </section>

          <section className="mb-16">
            <h2 className="text-3xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
              <Layers className="w-8 h-8 text-[#C41E3A]" />
              技术规格
            </h2>
            <div className="grid md:grid-cols-2 gap-4">
              {product.specs.map((spec, index) => (
                <div
                  key={index}
                  className="flex items-center gap-3 p-4 bg-[#F5F7FA] rounded-lg"
                >
                  <div className="w-2 h-2 bg-[#C41E3A] rounded-full" />
                  <span className="text-[#1C1C1C]">{spec}</span>
                </div>
              ))}
            </div>
          </section>

          <section className="mb-16">
            <h2 className="text-3xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
              <CreditCard className="w-8 h-8 text-[#C41E3A]" />
              价格方案
            </h2>
            <div className="grid md:grid-cols-3 gap-6">
              <div className="p-6 bg-[#F5F7FA] rounded-lg border-2 border-transparent hover:border-[#C41E3A] transition-colors">
                <h3 className="text-xl font-semibold text-[#1C1C1C] mb-2">基础版</h3>
                <p className="text-3xl font-bold text-[#C41E3A] mb-4">{product.pricing.base}</p>
                <ul className="space-y-2 text-sm text-[#5C5C5C]">
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-[#C41E3A]" />
                    基础功能模块
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-[#C41E3A]" />
                    邮件支持
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-[#C41E3A]" />
                    标准报表
                  </li>
                </ul>
              </div>
              <div className="p-6 bg-gradient-to-br from-[#C41E3A] to-[#A01830] rounded-lg text-white relative overflow-hidden">
                <div className="absolute top-4 right-4 bg-white/20 px-3 py-1 rounded-full text-xs">
                  推荐
                </div>
                <h3 className="text-xl font-semibold mb-2">标准版</h3>
                <p className="text-3xl font-bold mb-4">{product.pricing.standard}</p>
                <ul className="space-y-2 text-sm">
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4" />
                    全部功能模块
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4" />
                    电话支持
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4" />
                    自定义报表
                  </li>
                </ul>
              </div>
              <div className="p-6 bg-[#F5F7FA] rounded-lg border-2 border-transparent hover:border-[#C41E3A] transition-colors">
                <h3 className="text-xl font-semibold text-[#1C1C1C] mb-2">企业版</h3>
                <p className="text-3xl font-bold text-[#C41E3A] mb-4">{product.pricing.enterprise}</p>
                <ul className="space-y-2 text-sm text-[#5C5C5C]">
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-[#C41E3A]" />
                    全部功能模块
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-[#C41E3A]" />
                    专属客服
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-[#C41E3A]" />
                    定制开发
                  </li>
                </ul>
              </div>
            </div>
          </section>

          <div className="flex justify-center gap-4 pt-8 border-t border-[#E5E5E5]">
            <Button variant="outline" size="lg" asChild>
              <Link href="/#contact">
                联系我们
              </Link>
            </Button>
            <Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white" asChild>
              <Link href="/#contact">
                立即咨询
                <ArrowRight className="ml-2 w-4 h-4" />
              </Link>
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}