novalon-website/src/components/detail-v2/detail-cta-section-v2.tsx

'use client';

import { motion } from 'framer-motion';
import { ArrowRight, MessageCircle, Download } from 'lucide-react';
import type { HeroTheme } from '@/lib/constants/hero-themes';
import { DESIGN_SYSTEM } from '@/lib/constants/design-system';

interface DetailCTASectionV2Props {
  theme: HeroTheme;
  title?: string;
  description?: string;
  primaryAction: { label: string; href: string };
  secondaryAction?: { label: string; href: string };
}

export function DetailCTASectionV2({
  theme,
  title = '准备好开始了吗？',
  description = '联系我们，获取专属方案和报价',
  primaryAction,
  secondaryAction,
}: DetailCTASectionV2Props) {
  return (
    <section
      className="relative py-24 lg:py-32 overflow-hidden"
      style={{
        background: `linear-gradient(135deg, ${theme.gradientFrom}, ${theme.gradientTo})`,
      }}
    >
      <div className="absolute inset-0">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,_rgba(255,255,255,0.05)_0%,_transparent_60%)]" />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_50%,_rgba(196,30,58,0.08)_0%,_transparent_50%)]" />
        <div
          className="absolute inset-0 opacity-[0.02]"
          style={{
            backgroundImage: `url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 20c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10-4.477-10-10-10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
          }}
        />
      </div>

      <div className="container-wide relative">
        <motion.div
          initial={{ opacity: 0, y: 32 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-100px' }}
          transition={{ duration: 0.8, ease: [0.4, 0, 0.2, 1] }}
          className="max-w-3xl mx-auto text-center"
        >
          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm text-white/90 text-sm font-medium mb-6 border border-white/20">
            <MessageCircle className="w-4 h-4" />
            免费咨询
          </div>

          <h2 className={`${DESIGN_SYSTEM.typography.hero.title} text-white mb-6`}>
            {title}
          </h2>
          
          <p className="text-lg md:text-xl text-white/70 mb-12 max-w-2xl mx-auto leading-relaxed">
            {description}
          </p>

          <div className="flex flex-col sm:flex-row items-center justify-center gap-5">
            <motion.a
              href={primaryAction.href}
              whileHover={{ scale: 1.02, y: -2 }}
              whileTap={{ scale: 0.98 }}
              className="group relative inline-flex items-center gap-3 px-10 py-4 bg-white text-gray-900 font-bold rounded-xl shadow-2xl hover:shadow-3xl transition-all duration-300"
            >
              <span>{primaryAction.label}</span>
              <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
              <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-white to-gray-50 opacity-0 group-hover:opacity-100 transition-opacity" />
            </motion.a>

            {secondaryAction && (
              <a
                href={secondaryAction.href}
                className="group inline-flex items-center gap-2.5 px-8 py-4 text-white font-semibold rounded-xl border-2 border-white/25 hover:bg-white/10 hover:border-white/40 backdrop-blur-sm transition-all duration-300"
              >
                <Download className="w-5 h-5 group-hover:animate-bounce" />
                {secondaryAction.label}
              </a>
            )}
          </div>

          <motion.p
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            transition={{ delay: 0.5, duration: 0.6 }}
            className="mt-10 text-sm text-white/50"
          >
            平均响应时间 &lt; 2小时 · 7×24小时技术支持 · 无需预付费用
          </motion.p>
        </motion.div>
      </div>
    </section>
  );
}