import Link from 'next/link';

export function CtaSection({ tel }: { tel?: string | null }) {
  return (
    <section className="relative overflow-hidden bg-slate-950 py-24">
      {/* 渐变底 */}
      <div className="absolute inset-0 bg-gradient-to-br from-slate-900 via-[#0a0e27] to-black" />
      {/* 辉光 */}
      <div className="absolute left-1/2 top-0 h-72 w-[600px] -translate-x-1/2 rounded-full bg-brand-600/20 blur-[120px]" />
      <div className="absolute bottom-0 right-1/4 h-56 w-56 rounded-full bg-brand-500/10 blur-[100px]" />

      <div className="container-page relative text-center">
        <h2 className="text-3xl font-bold text-white sm:text-4xl">
          让物业管理像发微信一样简单
        </h2>
        <p className="mt-4 text-lg text-brand-200">
          懂物业，更懂&ldquo;省&rdquo;心。立即预约演示，体验智慧物业管理的便捷与高效。
        </p>
        <div className="mt-8 flex flex-col items-center justify-center gap-4 sm:flex-row">
          <Link
            href="/contact"
            className="rounded-lg bg-white px-8 py-3.5 text-base font-semibold text-brand-700 shadow-xl transition-all hover:scale-105"
          >
            预约演示
          </Link>
          <Link
            href="/products"
            className="rounded-lg border border-white/20 px-8 py-3.5 text-base font-medium text-white transition-colors hover:bg-white/10"
          >
            查看产品方案
          </Link>
        </div>
        {tel && (
          <p className="mt-6 text-sm text-brand-300">
            或拨打咨询电话 <span className="font-semibold text-white">{tel}</span>
          </p>
        )}
      </div>
    </section>
  );
}