"use client";

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

export function AboutVideoCTA() {
  const { dir } = useTranslation();

  return (
    <section className="relative w-full h-[60vh] md:h-[80vh] 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">
        <iframe
          src="https://www.youtube.com/embed/Fsr0qC5legU?autoplay=1&mute=1&loop=1&playlist=Fsr0qC5legU&controls=0&showinfo=0&rel=0&modestbranding=1"
          title="UNIPAM Brand Video"
          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 */}
      <div className="absolute inset-0 bg-dark-text/40 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 }}
        >
          <div className="flex justify-center">
            <button
              onClick={() => {
                const msg = `Hello, I'm interested in UNIPAM products.`;
                window.open(`https://wa.me/905352534344?text=${encodeURIComponent(msg)}`, "_blank");
              }}
              className="w-20 h-20 md:w-24 md:h-24 rounded-full bg-[#25D366] text-white flex items-center justify-center transition-all duration-300 shadow-2xl shadow-[#25D366]/40 hover:scale-110 hover:bg-[#128C7E] animate-bounce-slow"
              aria-label="Contact via WhatsApp"
            >
              <MessageCircle size={40} className="md:w-12 md:h-12" />
            </button>
          </div>
        </motion.div>
      </div>

      <style jsx>{`
        @keyframes bounce-slow {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-10px); }
        }
        .animate-bounce-slow {
          animation: bounce-slow 3s ease-in-out infinite;
        }
      `}</style>
    </section>
  );
}