"use client";

import { motion } from "framer-motion";
import { ArrowRight, CheckCircle2, Sparkles } from "lucide-react";
import type { Locale } from "@/lib/i18n";
import { getDictionary } from "@/lib/dictionary";

interface CTAProps {
  locale: Locale;
}

export function CTA({ locale }: CTAProps) {
  const isRTL = locale === "ar";
  const dict = getDictionary(locale);
  const t = dict.landing.cta;

  return (
    <section id="cta" className="relative py-24 md:py-32 overflow-hidden" dir={isRTL ? "rtl" : "ltr"}>
      <div className="absolute inset-0 bg-gradient-to-b from-void-black via-graphite to-void-black" />

      {/* Decorative elements */}
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[500px] bg-electric-cyan/[0.03] rounded-full blur-3xl" />
      <div className="absolute inset-0 dot-grid-cyan opacity-30" />

      {/* Floating orbs */}
      <motion.div
        animate={{ y: [0, -20, 0], opacity: [0.3, 0.6, 0.3] }}
        transition={{ duration: 6, repeat: Infinity, ease: "easeInOut" }}
        className="absolute top-20 right-20 w-3 h-3 bg-electric-cyan rounded-full blur-sm"
      />
      <motion.div
        animate={{ y: [0, 15, 0], opacity: [0.2, 0.5, 0.2] }}
        transition={{ duration: 8, repeat: Infinity, ease: "easeInOut", delay: 2 }}
        className="absolute bottom-20 left-20 w-2 h-2 bg-soft-emerald rounded-full blur-sm"
      />

      <div className="container-custom relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="max-w-3xl mx-auto text-center"
        >
          {/* Icon */}
          <div className="flex justify-center mb-6">
            <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-electric-cyan/10 to-soft-emerald/10 border border-electric-cyan/10 flex items-center justify-center">
              <Sparkles size={28} className="text-electric-cyan" />
            </div>
          </div>

          <h2 className="font-space-grotesk font-bold text-3xl md:text-5xl lg:text-6xl tracking-tight mb-4">
            <span className="text-warm-white">{t.title} </span>
            <span className="text-gradient-cyan">{t.titleHighlight}</span>
          </h2>
          <p className="text-base md:text-lg text-muted-white max-w-2xl mx-auto leading-relaxed mb-8">
            {t.subtitle}
          </p>

          {/* Feature pills */}
          <div className="flex flex-wrap items-center justify-center gap-3 mb-10">
            {t.features.map((feature, i) => (
              <div key={i} className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-white/[0.03] border border-white/[0.06]">
                <CheckCircle2 size={14} className="text-soft-emerald" />
                <span className="text-xs text-muted-white">{feature}</span>
              </div>
            ))}
          </div>

          {/* Buttons */}
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <motion.a
              href="https://wakelai.com/login"
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
              className="group inline-flex items-center gap-2 px-8 py-4 rounded-xl bg-gradient-to-r from-electric-cyan to-soft-emerald text-void-black font-semibold font-space-grotesk text-lg transition-all hover:shadow-lg hover:shadow-electric-cyan/20"
            >
              {t.cta}
              <ArrowRight size={20} className={`transition-transform group-hover:translate-x-1 ${isRTL ? "rotate-180" : ""}`} />
            </motion.a>
            <a
              href="https://wa.me/966544877622"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center px-8 py-4 rounded-xl border border-white/10 text-warm-white font-medium font-space-grotesk hover:bg-white/5 transition-all"
            >
              {t.secondary}
            </a>
          </div>
        </motion.div>
      </div>
    </section>
  );
}