import { motion } from 'framer-motion';
import { Sparkles } from 'lucide-react';
import type { ReactNode } from 'react';

interface InlineCTAProps {
  text: string;
  subtext?: string;
  icon?: ReactNode;
}

export default function InlineCTA({ text, subtext, icon }: InlineCTAProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5 }}
      className="flex flex-col items-center gap-3 mt-16"
    >
      <a
        href="#oferta"
        onClick={() => {
          if (typeof window !== 'undefined' && 'fbq' in window) {
            (window as any).fbq('track', 'InitiateCheckout');
          }
        }}
        className="h-16 px-10 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 text-white font-bold text-lg flex items-center justify-center gap-3 hover:scale-105 hover:shadow-2xl transition-all shadow-xl shadow-pink-500/30 animate-pulse-slow"
      >
        {text} {icon ?? <Sparkles className="w-5 h-5" />}
      </a>
      {subtext && <span className="text-indigo-500 text-sm font-semibold">{subtext}</span>}
    </motion.div>
  );
}
