import { motion, useScroll, useTransform } from "framer-motion";
import { Phone, Mail, ArrowRight } from "lucide-react";
import { useLanguage } from "@/contexts/LanguageContext";
import { useRef } from "react";

const CTABand = () => {
  const { t } = useLanguage();
  const sectionRef = useRef<HTMLElement>(null);
  const { scrollYProgress } = useScroll({
    target: sectionRef,
    offset: ["start end", "end start"],
  });

  const contentY = useTransform(scrollYProgress, [0, 1], ["0%", "-6%"]);

  return (
    <section
      ref={sectionRef}
      className="relative overflow-hidden"
      style={{ height: "clamp(500px, 55vh, 700px)" }}
    >
      {/* Video Background */}
      <video
        autoPlay
        muted
        loop
        playsInline
        className="absolute inset-0 w-full h-full object-cover"
        style={{ filter: "brightness(0.55) contrast(1.1) saturate(1.05)" }}
      >
        <source src="/video_cta.mp4" type="video/mp4" />
      </video>

      {/* Subtle vignette */}
      <div
        className="absolute inset-0 z-[1] pointer-events-none"
        style={{
          background:
            "radial-gradient(ellipse at 50% 50%, transparent 40%, hsl(0 0% 0% / 0.5) 100%)",
        }}
      />

      {/* Top edge fade */}
      <div
        className="absolute top-0 left-0 right-0 h-32 z-[1] pointer-events-none"
        style={{
          background: "linear-gradient(to bottom, hsl(0 0% 2% / 0.6), transparent)",
        }}
      />

      {/* Bottom edge fade */}
      <div
        className="absolute bottom-0 left-0 right-0 h-24 z-[1] pointer-events-none"
        style={{
          background: "linear-gradient(to top, hsl(0 0% 2% / 0.7), transparent)",
        }}
      />

      {/* Top accent line */}
      <div className="absolute top-0 left-0 right-0 h-px z-[2]" style={{
        background: "linear-gradient(90deg, transparent 15%, hsl(0 0% 100% / 0.08) 35%, hsl(0 100% 50% / 0.15) 50%, hsl(0 0% 100% / 0.08) 65%, transparent 85%)",
      }} />

      {/* Content */}
      <motion.div
        className="relative z-10 h-full flex items-center justify-center"
        style={{ y: contentY }}
      >
        <div className="max-w-2xl mx-auto text-center px-6">
          {/* Glass panel */}
          <div
            className="rounded-2xl px-8 py-14 md:px-14 md:py-16 relative overflow-hidden"
            style={{
              background: "linear-gradient(160deg, hsl(0 0% 0% / 0.45) 0%, hsl(0 0% 0% / 0.55) 100%)",
              border: "1px solid hsl(0 0% 100% / 0.1)",
              backdropFilter: "blur(28px) saturate(1.3)",
              WebkitBackdropFilter: "blur(28px) saturate(1.3)",
              boxShadow: "0 24px 80px hsl(0 0% 0% / 0.5), inset 0 1px 0 hsl(0 0% 100% / 0.07)",
            }}
          >
            {/* Panel top accent */}
            <div className="absolute top-0 left-[10%] right-[10%] h-px" style={{
              background: "linear-gradient(90deg, transparent, hsl(0 100% 50% / 0.25), transparent)",
            }} />

            {/* Eyebrow */}
            <motion.div
              initial={{ opacity: 0, y: 16 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8 }}
            >
              <span className="inline-flex items-center gap-4 mb-8">
                <span className="block h-px w-6" style={{ background: "hsl(0 100% 50% / 0.4)" }} />
                <span
                  className="text-[10px] md:text-[11px] tracking-[0.35em] font-semibold uppercase"
                  style={{ color: "hsl(var(--brand-red))" }}
                >
                  {t("cta.eyebrow") || "Let's Work Together"}
                </span>
                <span className="block h-px w-6" style={{ background: "hsl(0 100% 50% / 0.4)" }} />
              </span>
            </motion.div>

            {/* Headline */}
            <motion.h2
              initial={{ opacity: 0, y: 24 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.1, duration: 0.8 }}
              className="font-display text-3xl md:text-4xl lg:text-5xl text-foreground mb-5"
              style={{ lineHeight: 1.1, letterSpacing: "0.01em" }}
            >
              {t("cta.title")}
            </motion.h2>

            {/* Subheading */}
            <motion.p
              initial={{ opacity: 0, y: 16 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.2, duration: 0.8 }}
              className="text-muted-foreground text-sm md:text-base leading-relaxed max-w-md mx-auto mb-10"
              style={{ letterSpacing: "0.02em" }}
            >
              {t("cta.subtitle")}
            </motion.p>

            {/* Buttons */}
            <motion.div
              initial={{ opacity: 0, y: 16 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.35, duration: 0.8 }}
              className="flex flex-col sm:flex-row items-center justify-center gap-4"
            >
              <a
                href="tel:+15162721560"
                className="group relative inline-flex items-center gap-2.5 rounded-xl px-8 py-3.5 font-semibold text-sm tracking-[0.08em] uppercase transition-all duration-500"
                style={{
                  background: "linear-gradient(135deg, hsl(var(--brand-red)), hsl(var(--brand-red-glow)))",
                  color: "hsl(var(--primary-foreground))",
                  boxShadow: "0 6px 24px hsl(0 100% 50% / 0.3), inset 0 1px 0 hsl(0 0% 100% / 0.12)",
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.boxShadow = "0 10px 40px hsl(0 100% 50% / 0.45), inset 0 1px 0 hsl(0 0% 100% / 0.18)";
                  e.currentTarget.style.transform = "translateY(-2px)";
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.boxShadow = "0 6px 24px hsl(0 100% 50% / 0.3), inset 0 1px 0 hsl(0 0% 100% / 0.12)";
                  e.currentTarget.style.transform = "translateY(0)";
                }}
              >
                <Phone className="w-4 h-4" />
                +1 (516) 272-1560
                <ArrowRight className="w-4 h-4 opacity-0 -ml-2 group-hover:opacity-100 group-hover:ml-0 transition-all duration-300" />
              </a>

              <a
                href="mailto:iloveprintingny@gmail.com"
                className="group relative inline-flex items-center gap-2.5 rounded-xl px-8 py-3.5 font-semibold text-sm tracking-[0.08em] uppercase text-foreground transition-all duration-500"
                style={{
                  background: "hsl(0 0% 100% / 0.06)",
                  border: "1px solid hsl(0 0% 100% / 0.14)",
                  backdropFilter: "blur(8px)",
                  boxShadow: "0 4px 16px hsl(0 0% 0% / 0.3), inset 0 1px 0 hsl(0 0% 100% / 0.05)",
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.borderColor = "hsl(0 100% 50% / 0.3)";
                  e.currentTarget.style.boxShadow = "0 8px 32px hsl(0 0% 0% / 0.4), 0 0 20px -6px hsl(0 100% 50% / 0.12), inset 0 1px 0 hsl(0 0% 100% / 0.08)";
                  e.currentTarget.style.transform = "translateY(-2px)";
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.borderColor = "hsl(0 0% 100% / 0.14)";
                  e.currentTarget.style.boxShadow = "0 4px 16px hsl(0 0% 0% / 0.3), inset 0 1px 0 hsl(0 0% 100% / 0.05)";
                  e.currentTarget.style.transform = "translateY(0)";
                }}
              >
                <Mail className="w-4 h-4" />
                {t("contact.emailUs")}
              </a>
            </motion.div>
          </div>
        </div>
      </motion.div>
    </section>
  );
};

export default CTABand;
