import { useRef, useState, useEffect } from "react";
import { motion, useScroll, useTransform } from "framer-motion";
import { RemessasHeroMessage } from "./remessas/RemessasHeroMessage";
import { RemessasContent } from "./remessas/RemessasContent";
import { useIsMobile } from "@/hooks/use-mobile";
import backRoxo from "@/assets/back-roxo.webp";
import backRoxoMobile from "@/assets/back-roxo-mobile.webp";
import cryptoCoins from "@/assets/crypto-coins.webp";
import cryptoCoinsMobile from "@/assets/crypto-coins-mobile.webp";

export const RemessasSection = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const [isVisible, setIsVisible] = useState(false);
  const isMobile = useIsMobile();

  // Lazy loading: só carrega o vídeo quando a seção estiver visível
  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => setIsVisible(entry.isIntersecting),
      { threshold: 0.1 }
    );
    if (containerRef.current) observer.observe(containerRef.current);
    return () => observer.disconnect();
  }, []);

  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start start", "end end"],
  });

  // Content phase animations - faster transition
  const contentOpacity = useTransform(scrollYProgress, [0.5, 0.7], [0, 1]);
  const contentY = useTransform(scrollYProgress, [0.5, 0.7], [60, 0]);

  // Mobile: layout simples sem sticky/parallax - conteúdo sequencial
  if (isMobile) {
    return (
      <section
        ref={containerRef}
        id="remessas"
        className="relative min-h-screen"
      >
        {/* Gradient overlay - substituindo background pesado no mobile */}
        <div className="absolute inset-0 bg-gradient-to-b from-purple-950 via-purple-900/40 to-background z-[1]" />

        {/* Content - flows naturally with page scroll, NOT overlapping */}
        <div className="relative z-20">
          {/* Hero section - mobile specific layout */}
          <div className="min-h-[60vh] flex flex-col items-center justify-center py-12 px-4 text-center">
            {/* Hero com moedas crypto e texto */}
            <div className="relative w-full flex flex-col items-center">
              {/* Moedas crypto grandes - versão mobile otimizada */}
              <div className="relative mb-6 w-full flex justify-center pointer-events-none">
                <div className="absolute inset-0 scale-[1.2] bg-purple-500/20 blur-[80px] rounded-full" />
                
                <img
                  src={cryptoCoinsMobile}
                  alt="Moedas de criptomoedas em destaque sobre fundo roxo"
                  width="320"
                  height="240"
                  loading="eager"
                  fetchPriority="high"
                  decoding="async"
                  className="relative z-20 w-[90%] max-w-[320px] h-auto"
                  style={{ 
                    filter: "drop-shadow(0 16px 40px rgba(168, 85, 247, 0.4))"
                  }}
                />
              </div>

              {/* Title sobre as moedas */}
              <div className="relative -mt-16 z-30 text-center">
                <h2 className="font-display text-4xl font-bold leading-tight drop-shadow-2xl mb-4">
                  <span className="text-white">O Futuro do Câmbio</span>
                  <br />
                  <span className="bg-gradient-to-r from-purple-400 via-pink-500 to-purple-400 bg-clip-text text-transparent text-5xl">
                    é Digital
                  </span>
                </h2>

                {/* Subtitle */}
                <p className="text-lg text-purple-200 max-w-md drop-shadow-lg px-4 text-center">
                  Conheça soluções digitais para remessas internacionais por meio de parceiros especializados em stablecoins.
                </p>
              </div>
            </div>
          </div>

          {/* Content section - comes AFTER hero, NOT overlapping */}
          <div className="container mx-auto px-4 py-12 pb-24">
            <RemessasContent scrollYProgress={scrollYProgress} />
          </div>
        </div>
      </section>
    );
  }

  // Desktop: layout com sticky/parallax
  return (
    <section
      ref={containerRef}
      id="remessas"
      className="relative h-[300vh]"
    >
      {/* Sticky viewport */}
      <div className="sticky top-0 h-screen w-full overflow-hidden">
        {/* Background roxo - versão desktop otimizada */}
        <div className="absolute inset-0 z-0">
          <img
            src={backRoxo}
            alt="Fundo abstrato roxo com elementos digitais"
            width="1920"
            height="1080"
            loading="lazy"
            decoding="async"
            className="h-full w-full object-cover"
          />
        </div>

        {/* Gradient overlay */}
        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-purple-900/20 to-background z-[1]" />

        {/* Phase 1 & 2: Hero Message with zoom effect */}
        <RemessasHeroMessage scrollYProgress={scrollYProgress} />

        {/* Phase 3: Informative Content - no internal scroll */}
        <motion.div
          className="absolute inset-0 z-20 flex items-start justify-center pt-24 overflow-hidden"
          style={{
            opacity: contentOpacity,
            y: contentY,
          }}
        >
          <div className="container mx-auto px-4">
            <RemessasContent scrollYProgress={scrollYProgress} />
          </div>
        </motion.div>
      </div>
    </section>
  );
};

export default RemessasSection;