'use client';

/**
 * ServiceCTASection - 行动号召区域
 *
 * 朱砂红渐变背景，配合 FloatingElement 装饰圆形，
 * InkReveal 包裹标题，FadeUp 包裹描述和按钮组。
 * 主按钮链接到联系页，次按钮链接到服务列表页。
 */
import { Phone } from 'lucide-react';
import { InkReveal, FadeUp, FloatingElement, RippleButton } from '@/lib/animations';

export function ServiceCTASection() {
  return (
    <section className="relative py-24 md:py-32 bg-gradient-to-r from-[#C41E3A] to-[#E85D75] overflow-hidden">
      {/* 右上角装饰圆形 */}
      <FloatingElement amplitude={8} duration={5} delay={0.5} className="absolute -top-20 -right-20 pointer-events-none">
        <div className="w-[280px] h-[280px] bg-white/10 rounded-full" />
      </FloatingElement>

      {/* 左下角装饰圆形 */}
      <FloatingElement amplitude={6} duration={4} delay={1} className="absolute -bottom-16 -left-16 pointer-events-none">
        <div className="w-[220px] h-[220px] bg-white/10 rounded-full" />
      </FloatingElement>

      <div className="container-wide">
        <div className="max-w-3xl mx-auto text-center">
          {/* 标题 */}
          <InkReveal delay={0}>
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
              免费获取企业数字化诊断报告
            </h2>
          </InkReveal>

          {/* 描述文字 */}
          <FadeUp delay={0.15}>
            <p className="text-lg text-white/90 mb-10">
              我们的专家团队将为您量身定制数字化转型方案，助力企业降本增效
            </p>
          </FadeUp>

          {/* 按钮组 */}
          <FadeUp delay={0.3}>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <RippleButton
                href="/contact"
                rippleColor="rgba(196, 30, 58, 0.3)"
                className="bg-white text-[#C41E3A] px-8 py-4 rounded-lg text-lg font-semibold inline-flex items-center justify-center w-full sm:w-auto"
              >
                免费获取
              </RippleButton>

              <RippleButton
                href="/contact"
                rippleColor="rgba(255, 255, 255, 0.2)"
                className="bg-transparent border-2 border-white text-white px-8 py-4 rounded-lg text-lg font-semibold inline-flex items-center justify-center w-full sm:w-auto"
              >
                预约演示
              </RippleButton>

              <RippleButton
                href="tel:+8613800138000"
                rippleColor="rgba(255, 255, 255, 0.2)"
                className="bg-transparent border-2 border-white text-white px-8 py-4 rounded-lg text-lg font-semibold inline-flex items-center justify-center w-full sm:w-auto"
              >
                <Phone className="w-4 h-4 mr-2" />
                电话咨询
              </RippleButton>
            </div>
          </FadeUp>
        </div>
      </div>
    </section>
  );
}