CTA Banner Section

'use client'

import { motion } from 'framer-motion'
import { useRef } from 'react'
import { useInView } from 'framer-motion'
import { ArrowRight, Sparkles } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'

export function CTABannerSection() {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true })

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.2,
        delayChildren: 0.1,
      },
    },
  }

  const itemVariants = {
    hidden: { opacity: 0, y: 30 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        type: 'spring',
        stiffness: 100,
        damping: 15,
      },
    },
  }

  return (
    <div ref={ref} className="w-full px-4 py-16">
      <div className="mx-auto max-w-4xl">
        <motion.div
          variants={containerVariants}
          initial="hidden"
          animate={isInView ? 'visible' : 'hidden'}
        >
          <Card className="relative overflow-hidden  bg-gradient-to-br from-[var(--card-bg)] to-[var(--card-bg)]/80">
            <div className="absolute inset-0 bg-gradient-to-r from-accent/5 to-transparent" />
            <CardContent className="relative p-8 sm:p-12">
              <motion.div variants={itemVariants} className="mb-6 text-center">
                <motion.div
                  initial={{ scale: 0, rotate: -180 }}
                  animate={isInView ? { scale: 1, rotate: 0 } : { scale: 0, rotate: -180 }}
                  transition={{ delay: 0.3, type: 'spring' }}
                  className="mb-4 inline-flex rounded-full bg-accent/10 p-3"
                >
                  <Sparkles className="h-6 w-6 text-accent" />
                </motion.div>
                <h2 className="mb-4 text-3xl font-bold sm:text-4xl md:text-5xl">
                  Ready to Get Started?
                </h2>
                <p className="mx-auto max-w-2xl text-base text-[var(--foreground)]/70 sm:text-lg">
                  Join thousands of developers building amazing interfaces with our animation library.
                  Start today and transform your user experience.
                </p>
              </motion.div>

              <motion.div
                variants={itemVariants}
                className="flex flex-col items-center justify-center gap-4 sm:flex-row"
              >
                <Button size="lg" className="gap-2">
                  Get Started
                  <motion.div
                    animate={{ x: [0, 4, 0] }}
                    transition={{ duration: 1.5, repeat: Infinity }}
                  >
                    <ArrowRight className="h-4 w-4" />
                  </motion.div>
                </Button>
                <Button size="lg" variant="outline">
                  View Documentation
                </Button>
              </motion.div>

              <motion.div
                variants={itemVariants}
                className="mt-8 flex flex-wrap items-center justify-center gap-6 text-sm text-[var(--foreground)]/60"
              >
                <div className="flex items-center gap-2">
                  <div className="h-2 w-2 rounded-full bg-green-500" />
                  <span>Free Forever</span>
                </div>
                <div className="h-4 w-px bg-[var(--border)]" />
                <div className="flex items-center gap-2">
                  <div className="h-2 w-2 rounded-full bg-blue-500" />
                  <span>No Credit Card</span>
                </div>
                <div className="h-4 w-px bg-[var(--border)]" />
                <div className="flex items-center gap-2">
                  <div className="h-2 w-2 rounded-full bg-slate-500" />
                  <span>Open Source</span>
                </div>
              </motion.div>
            </CardContent>
          </Card>
        </motion.div>
      </div>
    </div>
  )
}