"use client"

import { motion } from "framer-motion"
import Link from "next/link"
import { ArrowRight } from "lucide-react"

export default function PricingCTA() {
  return (
    <section className="relative py-28 overflow-hidden">
      
      {/* Background */}
      <div className="absolute inset-0 bg-gradient-to-br from-blue-600 to-indigo-700" />
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-white/10 blur-[120px] rounded-full" />

      <div className="relative max-w-4xl mx-auto px-6 text-center text-white">
        
        {/* Title */}
        <motion.h2
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          viewport={{ once: true }}
          className="text-4xl md:text-5xl font-bold mb-6"
        >
          Prêt à optimiser votre restaurant ?
        </motion.h2>

        {/* Subtitle */}
        <motion.p
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2, duration: 0.6 }}
          viewport={{ once: true }}
          className="text-lg md:text-xl text-white/90 mb-12"
        >
          Rejoignez les restaurants qui augmentent leur rentabilité et simplifient leur gestion avec Optimiz Tech.
        </motion.p>

        {/* Buttons */}
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.4, duration: 0.6 }}
          viewport={{ once: true }}
          className="flex flex-col sm:flex-row justify-center gap-6"
        >
          <Link href="/contact">
            <button className="group bg-white text-blue-700 px-8 py-4 rounded-2xl font-semibold text-lg hover:bg-gray-100 transition-all duration-300 flex items-center justify-center gap-2 shadow-lg">
              Demander une démo
              <ArrowRight
                size={20}
                className="group-hover:translate-x-1 transition-transform duration-300"
              />
            </button>
          </Link>

          <Link href="/contact">
            <button className="bg-white/20 backdrop-blur-lg border border-white/30 px-8 py-4 rounded-2xl font-semibold text-lg hover:bg-white/30 transition-all duration-300">
              Contacter l’équipe
            </button>
          </Link>
        </motion.div>

      </div>
    </section>
  )
}