/**
 * CTA 区 - 渐变卡片行动号召（注册入口）
 */
import Link from 'next/link';
import { useTranslations } from 'next-intl';

export function CtaSection() {
  const t = useTranslations('cta');

  return (
    <section className="py-[30px] pb-14">
      <div className="mx-auto max-w-[820px] px-6">
        <div
          className="rounded-2xl border border-[rgba(124,92,255,.4)] bg-brand-card px-9 py-[46px] text-center"
          style={{
            background:
              'linear-gradient(130deg, rgba(124,92,255,.2), rgba(0,229,160,.08)), #121831',
          }}
        >
          <h2 className="text-[clamp(22px,3vw,30px)] font-extrabold">{t('h2')}</h2>
          <p className="mt-2.5 text-brand-muted">{t('p')}</p>
          <Link
            href="?auth=register"
            scroll={false}
            className="mt-6 inline-flex items-center gap-2 rounded-[10px] bg-gradient-to-br from-brand-purple to-brand-purple-d px-[18px] py-[9px] text-sm font-semibold text-white shadow-[0_4px_20px_rgba(124,92,255,.35)] transition-all hover:-translate-y-px hover:shadow-[0_6px_28px_rgba(124,92,255,.5)]"
          >
            {t('btn')}
          </Link>
        </div>
      </div>
    </section>
  );
}