import Link from "next/link";
import { Button } from "@/components/ui/button";
import { ArrowRight, Building2 } from "lucide-react";

export function CTA() {
  return (
    <section className="py-20 sm:py-28 bg-gradient-to-br from-navy-900 via-navy-800 to-navy-950 relative overflow-hidden">
      {/* Background decoration */}
      <div className="absolute inset-0 opacity-20">
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full bg-gold-500/10 blur-3xl" />
      </div>

      <div className="relative mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 text-center">
        <div className="flex justify-center mb-6">
          <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gold-500/10 border border-gold-500/20">
            <Building2 className="h-7 w-7 text-gold-400" />
          </div>
        </div>

        <h2 className="text-2xl sm:text-4xl lg:text-5xl font-bold text-white mb-6 leading-tight">
          Ready to 10x your
          <br />
          <span className="text-transparent bg-clip-text bg-gradient-to-r from-gold-300 to-gold-500">
            disposition workflow?
          </span>
        </h2>

        <p className="text-base sm:text-lg text-navy-300 max-w-2xl mx-auto mb-8 sm:mb-10 leading-relaxed px-2 sm:px-0">
          Join hundreds of CRE brokers and agents who&apos;ve replaced spreadsheets and manual 
          emails with CREdispo&apos;s intelligent matching and automated outreach.
        </p>

        <div className="flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 px-4 sm:px-0">
          <Link href="/signup" className="w-full sm:w-auto">
            <Button variant="gold" size="xl" className="group w-full sm:w-auto active:scale-[0.98] glow-gold">
              Start Your Free Trial
              <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
            </Button>
          </Link>
          <Link href="/login" className="w-full sm:w-auto">
            <Button
              variant="outline"
              size="xl"
              className="border-navy-600 text-white hover:bg-navy-800 hover:text-white w-full sm:w-auto"
            >
              Log In to Dashboard
            </Button>
          </Link>
        </div>

        <p className="text-sm text-navy-500 mt-6">
          14-day free trial • No credit card required • Cancel anytime
        </p>
      </div>
    </section>
  );
}
