"use client";

import { motion } from "framer-motion";
import { useTranslation } from "@/lib/i18n/context";
import { MessageCircle } from "lucide-react";

export function VideoCTA() {
  const { t, dir } = useTranslation();

  return (
    <section className="relative w-full h-[60vh] md:h-[70vh] min-h-[500px] overflow-hidden flex items-center justify-center" dir={dir}>
      
      {/* Video Background */}
      <div className="absolute inset-0 w-full h-full z-0 overflow-hidden pointer-events-none">
        {/* We scale the iframe up to ensure it covers the container without black bars */}
        <iframe
          src="https://www.youtube.com/embed/4w-kfClz9p4?autoplay=1&mute=1&loop=1&playlist=4w-kfClz9p4&controls=0&showinfo=0&rel=0&modestbranding=1"
          title="UNIPAM Video Background"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          className="absolute top-1/2 left-1/2 w-[300vw] h-[300vw] md:w-[150vw] md:h-[150vw] lg:w-[120vw] lg:h-[120vw] -translate-x-1/2 -translate-y-1/2 object-cover"
          style={{ border: "none" }}
        />
      </div>

      {/* Overlay to ensure text readability */}
      <div className="absolute inset-0 bg-dark-text/60 z-10" />

      {/* Content */}
      <div className="relative z-20 max-w-4xl mx-auto px-4 text-center">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8 }}
          className="space-y-6"
        >
          <h2 className="text-4xl md:text-5xl lg:text-6xl font-black text-white leading-tight drop-shadow-lg">
            {t.videoCta.title}
          </h2>
          
          <p className="text-xl md:text-2xl text-white/90 font-medium drop-shadow-md">
            {t.videoCta.subtitle}
          </p>

          <div className="pt-8 flex justify-center">
            <button
              onClick={() => {
                const msg = `Hello, I'm interested in learning more about UNIPAM.`;
                window.open(`https://wa.me/905352534344?text=${encodeURIComponent(msg)}`, "_blank");
              }}
              className="inline-flex items-center gap-3 px-8 py-5 rounded-full bg-[#25D366] text-white font-bold text-lg hover:bg-[#128C7E] transition-all duration-300 shadow-xl shadow-[#25D366]/30 hover:-translate-y-1"
            >
              <MessageCircle size={28} />
              {t.videoCta.button}
            </button>
          </div>
        </motion.div>
      </div>

    </section>
  );
}