import { Calendar, MapPin } from "lucide-react";
import { useEffect, lazy, Suspense } from "react";
import { useUtmCapture } from "@/hooks/useUtmCapture";
import heroImageDesktop from "@/assets/optimized/hero-experts-desktop.webp";
import heroImageMobile from "@/assets/optimized/hero-experts-mobile.webp";
import logoImage from "@/assets/optimized/logo-es.webp";

const BelowFoldSections = lazy(() => import("@/components/BelowFoldSections"));

const scrollToForm = () => {
  const loadMetaPixel = (window as Window & { loadMetaPixel?: () => void }).loadMetaPixel;
  if (typeof loadMetaPixel === "function") {
    loadMetaPixel();
  }
  document.getElementById("aplicar")?.scrollIntoView({ behavior: "smooth" });
};

/* ─── Hero ─── */
const Hero = () => (
  <section className="relative min-h-screen md:min-h-[95vh] flex items-center pt-24 md:pt-32 pb-32 md:pb-40 overflow-hidden">
    {/* Desktop image: encostada na borda direita, sem fade sobre os rostos */}
    <div className="hidden md:flex absolute inset-y-0 right-0 w-[55%] lg:w-[52%] z-0 justify-end">
      <img
        src={heroImageDesktop}
        alt="Fabio Fiorini e João Kepler na Imersão Equity Sales"
        width={1080}
        height={1080}
        fetchPriority="high"
        sizes="55vw"
        className="h-full w-full object-cover object-left select-none pointer-events-none"
        style={{
          maskImage: "linear-gradient(to right, transparent 0%, black 6%)",
          WebkitMaskImage: "linear-gradient(to right, transparent 0%, black 6%)",
        }}
      />
    </div>

    <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/10 blur-[120px] rounded-full pointer-events-none" />

    <div className="container mx-auto px-8 md:px-12 max-w-7xl relative z-10">
      <div className="md:w-[75%] lg:w-[65%]">
        <div className="flex items-center gap-4 mb-12 text-sm font-medium text-muted-foreground">
          <span className="flex items-center gap-2">
            <Calendar className="w-4 h-4 text-primary" /> 26/05/26
          </span>
          <span className="w-1 h-1 bg-foreground/20 rounded-full" />
          <span className="flex items-center gap-2">
            <MapPin className="w-4 h-4 text-primary" /> SÃO PAULO - SP
          </span>
        </div>

        <img
          src={logoImage}
          alt="Logo Imersão Equity Sales"
          width={420}
          height={138}
          className="h-[80px] md:h-[140px] w-auto mb-10"
        />

        <h1 className="text-3xl md:text-5xl font-display font-bold leading-tight mb-8">
          Transforme seu time de vendas em uma{" "}
          <span className="text-gradient">operação previsível</span> e consistente.
        </h1>

        <p className="text-lg md:text-xl text-muted-foreground mb-10 max-w-2xl leading-relaxed">
          Em 1 dia intenso, você aprende a construir uma máquina de vendas que funciona sem depender de você.
        </p>

        <div className="flex flex-col items-center sm:items-start">
          <button onClick={scrollToForm} className="orange-gradient text-primary-foreground px-10 py-4 rounded-full font-bold text-base hover:scale-105 transition-transform orange-glow cursor-pointer">
            QUERO APLICAR PARA A IMERSÃO →
          </button>
          <div className="flex items-center gap-2 text-[10px] md:text-xs text-primary font-bold animate-pulse-slow tracking-widest uppercase mt-4">
            <span className="w-1.5 h-1.5 bg-primary rounded-full" />
            98% DOS INGRESSOS VENDIDOS
          </div>
        </div>

        {/* Mobile: imagem dos experts empilhada (frames horizontais) */}
        <img
          src={heroImageMobile}
          alt="Fabio Fiorini e João Kepler"
          width={900}
          height={1280}
          className="md:hidden w-full h-auto mt-12 select-none pointer-events-none"
        />
      </div>
    </div>

    {/* Marquee decorativo */}
    <div className="absolute bottom-0 left-0 right-0 overflow-hidden pointer-events-none select-none py-4 bg-primary">
      <div className="flex w-max animate-marquee whitespace-nowrap">
        {Array.from({ length: 2 }).map((_, group) => (
          <div key={group} className="flex items-center">
            {Array.from({ length: 12 }).map((_, i) => (
              <div key={i} className="flex items-center">
                <span className="font-display font-bold text-lg md:text-2xl px-4 text-black uppercase">
                  IMERSÃO EQUITY SALES •
                </span>
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ─── Problem ─── */
const qualifiers = [
  "Faturam acima de R$3 milhões/ano",
  "Têm time comercial ativo",
  "Resultados oscilam sem explicação",
  "Estão envolvidos nas vendas principais",
  "Já tentaram melhorar time e não resolveu",
  "Querem previsibilidade real",
];

const Problem = () => {
  const Check = ({ className }: { className?: string }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M20 6 9 17l-5-5"/></svg>
  );

  return (
    <section className="py-20 bg-secondary">
      <div className="container mx-auto px-6 max-w-7xl text-center">
        <span className="text-primary font-bold tracking-widest uppercase text-sm mb-4 block">​</span>
        <h2 className="text-3xl md:text-5xl font-display font-bold mb-16 whitespace-pre-line">Essa imersão é para empresários que:{"\n"}</h2>
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {qualifiers.map((item, i) => (
            <div key={i} className="glass p-8 rounded-2xl flex items-start gap-4 text-left">
              <div className="bg-primary/20 p-2 rounded-lg">
                <Check className="text-primary w-5 h-5" />
              </div>
              <span className="text-lg font-medium">{item}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ─── Page ─── */
const Index = () => {
  useUtmCapture();

  useEffect(() => {
    try {
      if (typeof window.fbq === 'function') {
        window.fbq('track', 'Lead');
      }
    } catch (err) {
      console.warn('Meta Pixel Lead event failed:', err);
    }
  }, []);

  return (
    <div className="min-h-screen bg-background selection:bg-primary selection:text-primary-foreground">
      <div className="md:hidden fixed bottom-0 left-0 right-0 p-4 z-50 bg-background/80 backdrop-blur-md border-t border-white/10 flex justify-center">
        <button onClick={scrollToForm} className="orange-gradient text-primary-foreground px-12 py-3 rounded-full font-bold text-sm tracking-wide orange-glow active:scale-95 transition-transform cursor-pointer">
          QUERO APLICAR AGORA →
        </button>
      </div>

      <Hero />
      <Problem />

      <Suspense fallback={<div className="min-h-[200px]" />}>
        <BelowFoldSections />
      </Suspense>

      <footer className="py-12 border-t border-white/10 text-center text-muted-foreground text-sm space-y-2">
        <p>© 2026 Imersão Equity Sales. Todos os direitos reservados.</p>
        <div className="flex justify-center gap-6 text-xs">
          <a href="#" className="hover:text-primary transition-colors">Termos de Uso</a>
          <a href="#" className="hover:text-primary transition-colors">Privacidade</a>
        </div>
      </footer>
    </div>
  );
};

export default Index;