import { Link } from "wouter";
import { ArrowRight, FileText, MessageCircle } from "lucide-react";
import { useLanguage } from "@/contexts/LanguageContext";
import { trackCTAClick, trackPhoneClick, trackWhatsAppClick } from "@/lib/analytics";

export default function CTABanner() {
  const { t, lang } = useLanguage();

  return (
    <section className="relative py-16 lg:py-20 overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-r from-teal-dark via-teal to-teal-dark" />
      <div className="absolute inset-0 opacity-10" style={{
        backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`
      }} />

      <div className="container relative text-center">
        <h2 className="font-heading font-bold text-3xl lg:text-4xl text-white mb-4">
          {t("cta.title")}
        </h2>
        <p className="text-white/80 text-lg max-w-2xl mx-auto mb-8">
          {t("cta.subtitle")}
        </p>
        <div className="flex flex-wrap justify-center gap-4">
          <button
            onClick={() => {
              trackCTAClick("Request Quote", "cta-banner");
              window.dispatchEvent(new CustomEvent("open-quote-modal"));
            }}
            className="inline-flex items-center gap-2 bg-white text-teal-dark font-semibold px-8 py-3.5 rounded-md hover:bg-white/90 transition-all duration-200 hover:shadow-lg group"
          >
            <FileText className="w-4 h-4" />
            {lang === "ar" ? "طلب عرض أسعار" : "Request a Quote"}
          </button>
          <a
            href="https://wa.me/971553288217"
            target="_blank"
            rel="noopener noreferrer"
            onClick={() => trackWhatsAppClick()}
            className="inline-flex items-center gap-2 bg-[#25D366] text-white font-semibold px-8 py-3.5 rounded-md hover:bg-[#20BD5A] transition-all duration-200 hover:shadow-lg"
          >
            <MessageCircle className="w-4 h-4" />
            {lang === "ar" ? "تواصل عبر واتساب" : "WhatsApp Us"}
          </a>
          <a
            href="tel:+97148814928"
            onClick={() => trackPhoneClick("+97148814928")}
            className="inline-flex items-center gap-2 bg-transparent border-2 border-white/40 text-white font-semibold px-8 py-3.5 rounded-md hover:bg-white/10 hover:border-white/60 transition-all duration-200"
          >
            {lang === "ar" ? <>اتصل بنا <span dir="ltr">+971 4 881 4928</span></> : "Call +971 4 881 4928"}
          </a>
        </div>
      </div>
    </section>
  );
}
