"use client"

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

export function CtaBanner() {
  return (
    <section className="mx-auto max-w-7xl px-4 sm:px-6 pb-16 sm:pb-24">
      <motion.div
        initial={{ opacity: 0, y: 30 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.6 }}
        className="relative overflow-hidden rounded-3xl border border-indigo-500/20 bg-gradient-to-br from-indigo-600/20 via-[#16161f] to-violet-600/20 p-8 sm:p-12 text-center"
      >
        {/* Glow blobs */}
        <div className="absolute -top-20 left-1/2 -translate-x-1/2 h-60 w-60 rounded-full bg-indigo-600/30 blur-3xl pointer-events-none" />
        <div className="absolute -bottom-20 left-1/3 h-40 w-40 rounded-full bg-violet-600/20 blur-3xl pointer-events-none" />
        <div className="absolute -bottom-10 right-1/3 h-40 w-40 rounded-full bg-indigo-600/20 blur-3xl pointer-events-none" />

        <div className="relative">
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ delay: 0.1 }}
          >
            <p className="text-xs font-semibold uppercase tracking-widest text-indigo-400 mb-4">Get started today</p>
            <h2 className="text-2xl sm:text-4xl lg:text-5xl font-bold text-white">
              Stop managing rentals<br />the hard way
            </h2>
            <p className="mt-5 text-base sm:text-lg text-white/60 max-w-xl mx-auto">
              Join 200+ landlords who replaced their spreadsheets with Property Management Network. Free plan, no credit card.
            </p>

            <div className="mt-8 flex flex-col sm:flex-row items-center justify-center gap-3">
              <Link
                href="/signup"
                className="flex w-full sm:w-auto items-center justify-center gap-2 rounded-xl bg-indigo-600 px-6 sm:px-8 py-3.5 sm:py-4 text-sm font-semibold text-white hover:bg-indigo-500 transition-all hover:shadow-xl hover:shadow-indigo-500/30 hover:-translate-y-0.5"
              >
                Create your free account <ArrowRight className="h-4 w-4" />
              </Link>
              <Link
                href="/login"
                className="w-full sm:w-auto rounded-xl border border-white/10 px-6 sm:px-8 py-3.5 sm:py-4 text-sm font-medium text-white/60 hover:text-white hover:bg-white/[0.05] transition text-center"
              >
                Already have an account?
              </Link>
            </div>

            <div className="mt-6 flex flex-wrap items-center justify-center gap-x-4 sm:gap-x-6 gap-y-2 text-xs text-white/40">
              {[
                "Free plan forever",
                "30-day money-back on paid plans",
                "No credit card required",
                "Cancel anytime",
              ].map((t) => (
                <div key={t} className="flex items-center gap-1.5">
                  <CheckCircle2 className="h-3.5 w-3.5 text-emerald-400" />
                  {t}
                </div>
              ))}
            </div>
          </motion.div>
        </div>
      </motion.div>
    </section>
  )
}