import { Button } from "@/components/ui/button";
import { Sparkles, Users, ChevronDown, ArrowRight, Globe } from "lucide-react";

import { useRef, useEffect } from "react";
import heroBackground from "@/assets/hero-room-couple-1920x1080.jpg";
import tvScreenContent from "@/assets/tv-screen-content.png";

import plixcineLogo from "@/assets/plixcine-logo.png";

import plixcineLogoMobile from "@/assets/plixcine-logo-mobile.png";
import plixcineLogoTablet from "@/assets/plixcine-logo-tablet.png";
import plixcineLogoDesktop from "@/assets/plixcine-logo-desktop.png";
import LiveViewersIndicator from "./LiveViewersIndicator";

import { triggerConfetti } from "@/lib/confetti";


const Hero = () => {
  const ref = useRef<HTMLElement>(null);
  const spotlightRef = useRef<HTMLDivElement>(null);
  const tvGlassRef = useRef<HTMLDivElement>(null);
  const rafRef = useRef<number | null>(null);
  
  // Spotlight cursor effect
  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      // Avoid React re-renders on every mousemove (can stutter video on some devices/browsers)
      if (rafRef.current) cancelAnimationFrame(rafRef.current);
      rafRef.current = requestAnimationFrame(() => {
        // Respect reduced motion
        if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;

        const el = spotlightRef.current;
        if (!el) return;
        el.style.left = `${e.clientX}px`;
        el.style.top = `${e.clientY}px`;

        // Tiny parallax on the TV glass reflection to feel 3D
        const tv = tvGlassRef.current;
        if (tv) {
          const cx = window.innerWidth / 2;
          const cy = window.innerHeight / 2;
          const nx = (e.clientX - cx) / cx; // -1..1
          const ny = (e.clientY - cy) / cy; // -1..1
          const max = 8; // px
          const px = Math.max(-1, Math.min(1, nx)) * max;
          const py = Math.max(-1, Math.min(1, ny)) * max;
          tv.style.setProperty("--tv-parallax-x", `${px.toFixed(2)}px`);
          tv.style.setProperty("--tv-parallax-y", `${py.toFixed(2)}px`);
        }
      });
    };

    window.addEventListener("mousemove", handleMouseMove, { passive: true });
    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
      if (rafRef.current) cancelAnimationFrame(rafRef.current);
    };
  }, []);

  return (
    <section ref={ref} className="relative min-h-[85svh] md:min-h-[88vh] w-full flex items-start sm:items-center justify-center overflow-hidden m-0 p-0" aria-label="Hero - Página inicial">
      <div 
        ref={spotlightRef}
        className="fixed pointer-events-none z-50 hidden md:block"
        style={{
          left: 0,
          top: 0,
          width: '400px',
          height: '400px',
          background: 'radial-gradient(circle, hsl(0 72% 51% / 0.12) 0%, transparent 60%)',
          transform: 'translate(-50%, -50%)',
          transition: 'left 0.1s ease-out, top 0.1s ease-out',
        }}
      />
      

       {/* Animated Gradient Background Layer removed to eliminate highlight/patches */}

         {/* Luxury room grading removed for clean background */}
      
       {/* Background Image (parallax removed) */}
      <div className="absolute inset-0 z-0 m-0 p-0 bg-black">
         <img
           src={heroBackground}
           alt="Sala de home cinema premium com casal assistindo TV com logo PlixCine na tela, iluminação vermelha suave e vista da cidade"
           loading="eager"
           {...{ fetchpriority: "high" } as any}
           className="absolute inset-0 w-full h-full object-cover object-[35%_center] sm:object-[40%_center] md:object-[82%_center] lg:object-center hero-bg-image m-0 p-0 opacity-60"
           style={{
             backfaceVisibility: "hidden",
             WebkitBackfaceVisibility: "hidden",
           }}
         />
         {/* TV screen content overlay - mirrors bg cropping so logo stays inside the TV */}
         <img
           src={tvScreenContent}
           alt=""
           aria-hidden="true"
           loading="eager"
           className="hidden md:block absolute inset-0 w-full h-full object-cover md:object-[82%_center] lg:object-center pointer-events-none opacity-90"
         />
         {/* Readability overlays: top/bottom gradient + center darken for text contrast */}
          <div className="absolute inset-0 bg-black/45 sm:bg-black/40 pointer-events-none z-[1]" aria-hidden="true" />
          <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,hsl(0_0%_0%/0.55)_0%,hsl(0_0%_0%/0.25)_55%,transparent_85%)] pointer-events-none z-[1]" aria-hidden="true" />
          <div className="absolute inset-x-0 top-0 h-40 sm:h-52 md:h-64 bg-gradient-to-b from-black/95 via-black/60 to-transparent pointer-events-none z-[1]" aria-hidden="true" />
          <div className="absolute inset-x-0 bottom-0 h-40 sm:h-52 md:h-64 bg-gradient-to-t from-black via-black/70 to-transparent pointer-events-none z-[1]" aria-hidden="true" />
      </div>

      {/* Top bar (Netflix style) — logo + language switcher aligned */}
      <div className="absolute top-0 inset-x-0 z-30 flex items-center justify-between pl-0 pr-3 sm:pr-6 md:pr-10 mt-0 sm:-mt-1 md:-mt-2">
        <a href="#inicio" aria-label="PlixCine - Início" className="select-none flex items-center">
          <picture>
            <source media="(max-width: 639px)" srcSet={plixcineLogoMobile} />
            <source media="(min-width: 640px) and (max-width: 1023px)" srcSet={plixcineLogoTablet} />
            <source media="(min-width: 1024px)" srcSet={plixcineLogoDesktop} />
            <img
              src={plixcineLogoDesktop}
              alt="PlixCine"
              width={900}
              height={400}
              loading="eager"
              decoding="async"
              fetchPriority="high"
              className="h-20 sm:h-20 md:h-20 lg:h-24 xl:h-28 w-auto drop-shadow-[0_2px_12px_rgba(0,0,0,0.7)] transition-transform duration-300 hover:scale-105 will-change-transform"
              style={{
                imageRendering: "auto",
                WebkitBackfaceVisibility: "hidden",
                backfaceVisibility: "hidden",
                transform: "translateZ(0)",
              }}
            />
          </picture>
        </a>

        <div className="relative inline-flex items-center gap-2 bg-black/60 backdrop-blur-sm border border-white/30 rounded px-2.5 py-1.5 sm:px-3 sm:py-2 text-white hover:border-white/60 transition-colors">
          <Globe className="w-3.5 h-3.5 sm:w-4 sm:h-4 pointer-events-none" aria-hidden="true" />
          <select
            aria-label="Selecionar idioma"
            defaultValue="pt-BR"
            className="bg-transparent appearance-none pr-5 text-xs sm:text-sm font-medium cursor-pointer focus:outline-none"
            onChange={(e) => {
              e.currentTarget.blur();
            }}
          >
            <option value="pt-BR" className="bg-black text-white">Português</option>
            <option value="en" className="bg-black text-white">English</option>
            <option value="es" className="bg-black text-white">Español</option>
            <option value="fr" className="bg-black text-white">Français</option>
            <option value="de" className="bg-black text-white">Deutsch</option>
            <option value="it" className="bg-black text-white">Italiano</option>
            <option value="ja" className="bg-black text-white">日本語</option>
            <option value="zh-CN" className="bg-black text-white">中文</option>
            <option value="ar" className="bg-black text-white">العربية</option>
            <option value="ru" className="bg-black text-white">Русский</option>
          </select>
          <ChevronDown className="w-3 h-3 sm:w-3.5 sm:h-3.5 absolute right-2 sm:right-2.5 pointer-events-none" aria-hidden="true" />
        </div>
      </div>

      {/* Content */}
      <div 
        className="container relative z-10 px-4 sm:px-6 md:px-8 lg:px-10 pt-20 pb-4 mx-auto text-center"
      >
        <div className="max-w-xl sm:max-w-2xl md:max-w-3xl lg:max-w-4xl xl:max-w-5xl mx-auto flex flex-col items-center space-y-4">

          
          {/* Main Title */}
          <h1 
            className="text-[1.35rem] sm:text-[1.7rem] md:text-[2.15rem] lg:text-[2.65rem] xl:text-[3.25rem] font-extrabold tracking-tight leading-tight px-2 sm:px-1 text-white max-w-[95%] sm:max-w-none mx-auto text-balance"
          >
            <span className="block drop-shadow-[0_2px_20px_rgba(0,0,0,0.85)]">
              Seu streaming em uma assinatura. Planos a partir de{" "}
              <span className="text-primary">R$29,00</span>.
            </span>
            <span className="block mt-2 sm:mt-3 text-[0.9rem] sm:text-[1rem] md:text-[1.1rem] lg:text-[1.3rem] font-medium text-white/85 drop-shadow-[0_2px_12px_rgba(0,0,0,0.8)]">
              Assista canais ao vivo, filmes, séries e conteúdo infantil com acesso pelo P2Player no Windows e P2Turbo no Android.
            </span>
          </h1>

          {/* Video Embed */}
          <div 
            className="w-full max-w-[260px] sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl mx-auto md:mt-10 lg:mt-14"
          >
            <div className="relative group">
              <div className="absolute -inset-3 sm:-inset-4 rounded-2xl bg-gradient-to-r from-primary/30 via-primary/10 to-primary/30 blur-2xl opacity-60 group-hover:opacity-90 transition-opacity duration-700 pointer-events-none" aria-hidden="true" />
              <div className="relative aspect-[16/9] w-full rounded-2xl overflow-hidden bg-black ring-1 ring-white/10 shadow-[0_25px_80px_-15px_rgba(0,0,0,0.8),0_0_0_1px_hsl(var(--primary)/0.25)_inset,0_0_60px_-10px_hsl(var(--primary)/0.4)] flex items-center justify-center transition-transform duration-500 hover:-translate-y-1 isolate">
                <div className="absolute inset-0 bg-black z-0" aria-hidden="true" />
                <iframe
                  src="https://www.youtube-nocookie.com/embed/9J3L0Wawvkk?rel=0&modestbranding=1&playsinline=1"
                  title="PlixCine - Vídeo de apresentação"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                  allowFullScreen
                  loading="lazy"
                  style={{ backgroundColor: "#000" }}
                  className="absolute inset-0 w-full h-full z-10 bg-black"
                />
                <div className="absolute inset-0 pointer-events-none rounded-2xl bg-gradient-to-b from-white/[0.06] via-transparent to-transparent z-20" aria-hidden="true" />
              </div>
            </div>
          </div>

          {/* CTA abaixo da VSL */}
          <a
            href="https://wa.me/message/X7EDTROYZVEAL1"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center justify-center gap-2 px-6 py-3 sm:px-8 sm:py-4 bg-primary hover:bg-primary/90 text-primary-foreground font-bold text-sm sm:text-base rounded-full transition-all duration-300 hover:scale-105 md:mt-8"
          >
            <span>QUERO VER OS PLANOS</span>
            <ArrowRight className="w-4 h-4 sm:w-5 sm:h-5" />
          </a>
        </div>
      </div>

    </section>
  );
};

export default Hero;