import { Link } from "react-router"
import { Zap, MessageCircle, Shield, Clock } from "lucide-react"

export function CTASection() {
  return (
    <section className="py-24 px-4 relative overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-br from-[#f97316]/5 via-transparent to-[#22c55e]/5" />
      <div className="max-w-4xl mx-auto text-center relative z-10">
        <div className="glass-card p-10 md:p-16">
          <Zap className="w-12 h-12 text-[#f97316] mx-auto mb-6" />
          <h2 className="text-4xl md:text-5xl font-bold mb-4">Ready to Upgrade Your Digital Experience?</h2>
          <p className="text-slate-400 text-lg max-w-2xl mx-auto mb-8">
            Join 10,000+ customers who trust Subscription Hero for premium digital subscriptions at unbeatable prices. Save up to 96% on your favorite tools.
          </p>
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-8">
            <Link to="/shop" className="btn-primary text-lg px-10 py-4 inline-flex items-center gap-2">
              <Zap className="w-5 h-5" /> Start Saving Today
            </Link>
            <a href="https://wa.me/917038146526" target="_blank" rel="noopener noreferrer nofollow" className="px-10 py-4 rounded-full border border-white/20 hover:bg-white/5 transition-all flex items-center gap-2">
              <MessageCircle className="w-5 h-5 text-[#22c55e]" /> Chat on WhatsApp
            </a>
          </div>
          <div className="flex flex-wrap items-center justify-center gap-6 text-sm text-slate-500">
            <div className="flex items-center gap-1.5"><Shield className="w-4 h-4 text-[#22c55e]" />Secure Payments</div>
            <div className="flex items-center gap-1.5"><Clock className="w-4 h-4 text-[#22c55e]" />Instant Delivery</div>
            <div className="flex items-center gap-1.5"><Zap className="w-4 h-4 text-[#22c55e]" />24H Refund</div>
          </div>
        </div>
      </div>
    </section>
  )
}