import { motion } from 'framer-motion';
import { Sparkles } from 'lucide-react';
import { GridBackground, ParticlesBg } from '../ui/BackgroundEffects';
import { NeonButton } from '../ui/NeonButton';

export function CtaSection() {
  return (
    <section id="cta" className="relative overflow-hidden py-24 md:py-32">
      <div className="absolute inset-0 bg-gradient-to-br from-cyan-600/25 via-void to-sky-900/20" />
      <GridBackground />
      <ParticlesBg />

      <div className="relative z-10 mx-auto max-w-4xl px-4 text-center sm:px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-4 py-1.5 text-xs font-semibold uppercase tracking-widest text-cyan-200"
        >
          <Sparkles className="h-3.5 w-3.5" />
          Enterprise onboarding
        </motion.div>
        <motion.h2
          initial={{ opacity: 0, y: 16 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ delay: 0.05 }}
          className="mt-6 font-display text-3xl font-extrabold leading-tight text-white sm:text-4xl md:text-5xl"
        >
          Transform Your Operations with{' '}
          <span className="bg-gradient-to-r from-cyan-200 to-sky-400 bg-clip-text text-transparent">Smart RFID</span>{' '}
          Technology
        </motion.h2>
        <motion.p
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
          transition={{ delay: 0.1 }}
          className="mt-5 text-slate-400 md:text-lg"
        >
          Jadwalkan demo terarah, proof-of-value terukur, dan arsitektur integrasi sesuai kebijakan IT Anda.
        </motion.p>
        <motion.div
          initial={{ opacity: 0, y: 12 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ delay: 0.15 }}
          className="mt-10 flex flex-wrap justify-center gap-4"
        >
          <NeonButton as="a" href="#contact" className="!px-10 !py-4 !text-base">
            Schedule Demo
          </NeonButton>
          <NeonButton variant="ghost" as="a" href="#contact" className="!px-10 !py-4 !text-base">
            Contact Sales
          </NeonButton>
        </motion.div>
      </div>
    </section>
  );
}
