DoTouchAI/apps/web/src/components/ModelsSection.tsx

/**
 * 模型展示区 - 4 张模型卡片（USD 单价）+ 汇率提示
 */
import Link from 'next/link';
import { useLocale, useTranslations } from 'next-intl';
import { FxPrice } from './FxPrice';

type ModelCard = {
  id: string;
  nameKey: string;
  shortKey: string;
  tagKey: string;
  tagClass: string;
  usdIn: number;
  usdOut: number;
};

const tagStyles = {
  purple: 'text-brand-purple-l bg-[rgba(124,92,255,.12)] border-[rgba(124,92,255,.35)]',
  green: 'text-brand-green-l bg-[rgba(0,229,160,.1)] border-[rgba(0,229,160,.3)]',
  gold: 'text-brand-gold bg-[rgba(255,194,77,.1)] border-[rgba(255,194,77,.3)]',
  gray: 'text-brand-muted bg-[rgba(154,163,192,.1)] border-[rgba(154,163,192,.3)]',
} as const;

const models: ModelCard[] = [
  { id: 'glm-5.2', nameKey: 'glm_name', shortKey: 'glm_short', tagKey: 'tag_flagship', tagClass: tagStyles.purple, usdIn: 0.98, usdOut: 3.08 },
  { id: 'deepseek-v4', nameKey: 'dsv4_name', shortKey: 'dsv4_short', tagKey: 'tag_best', tagClass: tagStyles.green, usdIn: 0.14, usdOut: 0.28 },
  { id: 'deepseek-v4-pro', nameKey: 'dsv4p_name', shortKey: 'dsv4p_short', tagKey: 'tag_reasoning', tagClass: tagStyles.gold, usdIn: 0.3, usdOut: 0.6 },
  { id: 'qwen-max', nameKey: 'qwen_name', shortKey: 'qwen_short', tagKey: 'tag_enterprise', tagClass: tagStyles.gray, usdIn: 1.96, usdOut: 7.84 },
];

export function ModelsSection() {
  const t = useTranslations('models');
  const locale = useLocale();

  return (
    <section className="mt-[60px] border-y border-white/[0.08] bg-brand-bg2 py-[30px] pb-14">
      <div className="mx-auto max-w-[1160px] px-6">
        <div className="mx-auto mb-9 max-w-[640px] text-center">
          <div className="mb-1.5 text-xs font-bold uppercase tracking-[2px] text-brand-purple-l">
            {t('kicker')}
          </div>
          <h2 className="mb-1.5 text-[22px] font-extrabold">{t('h2')}</h2>
          <p className="text-sm text-brand-muted">{t('p')}</p>
          <Link
            href={`/${locale}/pricing`}
            className="mt-3.5 inline-block text-sm font-semibold text-brand-purple-l"
          >
            {t('more')}
          </Link>
        </div>

        <div className="grid grid-cols-[repeat(auto-fit,minmax(240px,1fr))] gap-[18px]">
          {models.map((m) => (
            <Link
              key={m.id}
              href={`/${locale}/models`}
              className="rounded-2xl border border-white/[0.08] bg-brand-card p-6 transition-all duration-200 hover:-translate-y-[3px] hover:border-[rgba(124,92,255,.5)] hover:shadow-[0_10px_34px_rgba(11,16,32,.6)]"
            >
              <div className="flex items-center justify-between">
                <b className="text-base">{t(m.nameKey)}</b>
                <span className={`inline-block rounded-full border px-2.5 py-0.5 text-[11px] ${m.tagClass}`}>
                  {t(m.tagKey)}
                </span>
              </div>
              <p className="mt-1.5 min-h-[34px] text-[12.5px] text-brand-muted">{t(m.shortKey)}</p>
              <div className="mt-3 text-xs text-brand-muted">
                {t('price_in')}{' '}
                <span className="font-semibold text-brand-text">
                  <FxPrice usd={m.usdIn} showUsd />
                </span>
              </div>
              <div className="text-xs text-brand-muted">
                {t('price_out')}{' '}
                <span className="font-semibold text-brand-text">
                  <FxPrice usd={m.usdOut} showUsd />
                </span>
              </div>
              <div className="mt-3 text-[13px] font-semibold text-brand-purple-l">
                {t('see_detail')}
              </div>
            </Link>
          ))}
        </div>

        <div className="mx-auto mt-5 flex max-w-[560px] items-center gap-3 rounded-xl border border-[rgba(255,194,77,.3)] bg-[rgba(255,194,77,.08)] px-[18px] py-[14px] text-[13.5px] text-brand-gold">
          {t('rate_note')}
        </div>
      </div>
    </section>
  );
}