import { ArrowRight, Phone, Sparkles } from "lucide-react";
import { Reveal } from "./Reveal";

export function CtaBanner() {
  return (
    <section id="contact" className="mx-auto max-w-7xl px-4 py-20 md:px-8">
      <Reveal>
        <div className="relative overflow-hidden rounded-[2rem] border border-primary/30 bg-gradient-navy p-8 md:p-16 shadow-glow">
          <div className="absolute inset-0 grid-pattern opacity-20" />
          <div className="absolute -top-24 -right-24 h-72 w-72 rounded-full bg-primary opacity-30 blur-3xl animate-[float_8s_ease-in-out_infinite]" />
          <div className="absolute -bottom-24 -left-24 h-72 w-72 rounded-full bg-[color:var(--gold)] opacity-20 blur-3xl animate-[float_10s_ease-in-out_infinite]" />
          <div className="relative grid gap-8 md:grid-cols-2 md:items-center">
            <div className="text-white">
              <div className="inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/10 px-3 py-1 text-xs font-semibold backdrop-blur">
                <Sparkles className="h-3 w-3" /> Limited Seats — New Batch Starting Soon
              </div>
              <h3 className="mt-4 text-3xl font-bold md:text-5xl leading-tight">
                Start Your <span className="text-gradient-primary">Trading Journey</span> Today
              </h3>
              <p className="mt-4 text-white/80">
                Learn Crypto, Forex & Options Trading with live mentorship and practical market sessions.
              </p>
              <p className="mt-2 text-white/70" lang="bn">
                আজই শুরু করুন আপনার ট্রেডিং জার্নি — লাইভ ক্লাস ও এক্সপার্ট গাইডেন্স সহ।
              </p>
            </div>
            <div className="flex flex-col gap-3 md:items-end">
              <a href="https://wa.me/917029490341" target="_blank" rel="noreferrer" className="group inline-flex items-center justify-center gap-2 rounded-full bg-white px-8 py-4 text-base font-bold text-foreground shadow-soft transition-all hover:scale-105 hover-bounce">
                Enroll Now <ArrowRight className="h-5 w-5 transition-transform group-hover:translate-x-1" />
              </a>
              <a href="https://chat.whatsapp.com/LgHUxIFP8rPEgoQ2aJmVzR?mlu=4&s=cl&p=a" target="_blank" rel="noreferrer" className="inline-flex items-center justify-center gap-2 rounded-full border border-white/30 bg-white/10 px-6 py-3 text-sm font-bold text-white backdrop-blur transition-all hover:bg-white/20">
                <Sparkles className="h-4 w-4" /> Join Free WhatsApp Group
              </a>
              <a href="tel:+917029490341" className="inline-flex items-center gap-2 text-sm text-white/80 hover:text-white">
                <Phone className="h-4 w-4 text-primary" /> +91 70294 90341
              </a>
            </div>
          </div>
        </div>
      </Reveal>
    </section>
  );
}
