novalon-website/src/components/ui/product-card.tsx

'use client';

import { ArrowUpRight, Database, Users, TrendingUp, FileText, Truck, Building2 } from 'lucide-react';
import { Card } from '@/components/ui/card';
import type { LucideIcon } from 'lucide-react';

interface ProductCardProps {
  title: string;
  description: string;
  href: string;
  index: number;
  status?: '研发中' | '内测中' | '已发布';
}

const productIcons: LucideIcon[] = [Database, Users, FileText, TrendingUp, Truck, Building2];

const PRODUCT_COLORS = [
  { bg: 'rgba(var(--color-brand-rgb), 0.08)', text: 'var(--color-brand)', border: 'rgba(var(--color-brand-rgb), 0.12)' },
  { bg: 'rgba(var(--color-accent-blue-rgb), 0.08)', text: 'var(--color-accent-blue)', border: 'rgba(var(--color-accent-blue-rgb), 0.12)' },
  { bg: 'rgba(var(--color-accent-purple-rgb), 0.08)', text: 'var(--color-accent-purple)', border: 'rgba(var(--color-accent-purple-rgb), 0.12)' },
  { bg: 'rgba(var(--color-accent-cyan-rgb), 0.08)', text: 'var(--color-accent-cyan)', border: 'rgba(var(--color-accent-cyan-rgb), 0.12)' },
  { bg: 'rgba(var(--color-brand-rgb), 0.08)', text: 'var(--color-brand)', border: 'rgba(var(--color-brand-rgb), 0.12)' },
  { bg: 'rgba(var(--color-accent-blue-rgb), 0.08)', text: 'var(--color-accent-blue)', border: 'rgba(var(--color-accent-blue-rgb), 0.12)' },
] as const;

const productConfig: { icon: LucideIcon; color: { bg: string; text: string; border: string } }[] = productIcons.map((icon, i) => ({
  icon,
  color: PRODUCT_COLORS[i % PRODUCT_COLORS.length] ?? PRODUCT_COLORS[0],
}));

const defaultConfig = {
  icon: Database,
  color: PRODUCT_COLORS[0],
};

const statusConfig = {
  '研发中': { bg: 'rgba(var(--color-brand-rgb), 0.06)', text: 'var(--color-brand)', border: 'rgba(var(--color-brand-rgb), 0.12)' },
  '内测中': { bg: 'rgba(var(--color-warning-rgb), 0.06)', text: 'var(--color-warning)', border: 'rgba(var(--color-warning-rgb), 0.12)' },
  '已发布': { bg: 'rgba(var(--color-success-rgb), 0.06)', text: 'var(--color-success)', border: 'rgba(var(--color-success-rgb), 0.12)' },
} as const;

export function ProductCard({ title, description, href, index, status }: ProductCardProps) {
  const config = productConfig[index] ?? defaultConfig;
  const IconComponent = config.icon;
  const statusStyle = status ? statusConfig[status] : null;

  return (
    <a href={href}>
      <Card className="group h-full relative overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg">
        {/* 产品图标 */}
        <div className="flex items-start justify-between mb-4">
          <div
            className="w-11 h-11 rounded-xl flex items-center justify-center flex-shrink-0"
            style={{ backgroundColor: config.color.bg }}
          >
            <IconComponent
              className="w-5 h-5"
              style={{ color: config.color.text }}
              strokeWidth={1.8}
            />
          </div>

          {/* 状态标签 + 序号 */}
          <div className="flex items-center gap-2 flex-shrink-0">
            {status && statusStyle && (
              <span
                className="text-[10px] font-medium px-2 py-0.5 rounded-full border whitespace-nowrap"
                style={{
                  backgroundColor: statusStyle.bg,
                  color: statusStyle.text,
                  borderColor: statusStyle.border,
                }}
              >
                {status}
              </span>
            )}
            <span className="text-xs font-mono tracking-widest text-[var(--color-text-subtle)]">
              {String(index + 1).padStart(2, '0')}
            </span>
          </div>
        </div>

        {/* 标题 */}
        <h3 className="text-base font-semibold mb-2 leading-snug tracking-tight text-[var(--color-text-primary)] group-hover:text-[var(--color-brand)] transition-colors">
          {title}
        </h3>

        {/* 描述 */}
        <p className="text-sm text-[var(--color-text-muted)] leading-relaxed line-clamp-3 mb-4">
          {description}
        </p>

        {/* 研发中/内测中 提示 */}
        {(status === '研发中' || status === '内测中') && (
          <div className="flex items-center gap-1.5 text-xs text-[var(--color-brand)]/70 mb-4 px-3 py-2 rounded-lg bg-[var(--color-brand-bg)]/50">
            <svg className="w-3.5 h-3.5 animate-spin" viewBox="0 0 24 24" fill="none">
              <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeDasharray="32 16" />
            </svg>
            <span>{status === '研发中' ? '正在积极开发中，欢迎提前交流需求' : '即将上线，欢迎预约内测体验'}</span>
          </div>
        )}

        {/* CTA 链接 */}
        <div className="flex items-center gap-1.5 text-sm font-medium text-[var(--color-text-subtle)] group-hover:text-[var(--color-brand)] transition-colors min-h-[44px] mt-auto">
          <span>{status === '研发中' ? '了解规划' : status === '内测中' ? '申请内测' : '了解更多'}</span>
          <ArrowUpRight className="w-4 h-4" strokeWidth={2} />
        </div>
      </Card>
    </a>
  );
}