/* eslint-disable @next/next/no-img-element */
"use client";
import { useRef, useState } from "react";
import gsap from "gsap";
import { useGSAP } from "@gsap/react";
import { SplitText } from "gsap/SplitText";

gsap.registerPlugin(SplitText);

const MobileAnimatedHeroSection = () => {
  const [imageLoaded, setImageLoaded] = useState(false);
  const titleRef = useRef<HTMLHeadingElement>(null);
  const addressRef = useRef<HTMLParagraphElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const overlayRef = useRef<HTMLDivElement>(null);
  const textContainerRef = useRef<HTMLDivElement>(null);

  // Phase 1: Set initial states immediately on mount (CSS handles initial opacity, GSAP ensures transform states)
  useGSAP(() => {
    if (!overlayRef.current) return;

    // Set initial transform states for overlay (CSS handles opacity)
    gsap.set(overlayRef.current, {
      scale: 1.1,
      filter: "blur(8px)",
    });
  }, []); // Run immediately on mount

  // Phase 2: Run animations after image loads
  useGSAP(() => {
    if (
      !imageLoaded ||
      !titleRef.current ||
      !addressRef.current ||
      !overlayRef.current ||
      !textContainerRef.current
    )
      return;

    // Split title and address into words
    const titleSplit = new SplitText(titleRef.current, { type: "words" });
    const addressSplit = new SplitText(addressRef.current, { type: "words" });

    // Set initial states for split words
    gsap.set(titleSplit.words, {
      opacity: 0,
      y: 45,
      scale: 1.08,
      filter: "blur(2px)",
    });

    gsap.set(addressSplit.words, {
      opacity: 0,
      y: 20,
      scale: 1.08,
      filter: "blur(2px)",
    });

    // Ensure text container is visible (in case it was hidden)
    gsap.set(textContainerRef.current, { opacity: 1 });

    // Create timeline with premium delay
    const timeline = gsap.timeline({ delay: 0.2 });

    // Cinematic gradient overlay animation - syncs with title
    timeline.to(overlayRef.current, {
      opacity: 1,
      scale: 1,
      filter: "blur(0px)",
      duration: 2,
      ease: "power2.out",
    });

    // Animate title words - starts slightly after overlay begins (premium sync)
    timeline.to(
      titleSplit.words,
      {
        opacity: 1,
        y: 0,
        scale: 1,
        filter: "blur(0px)",
        duration: 1,
        ease: "power3.out",
        stagger: 0.38,
      },
      "-=1.8" // Start 1.8s after overlay begins (creates elegant sync)
    );

    // Animate address words (starts slightly after title begins)
    timeline.to(
      addressSplit.words,
      {
        opacity: 1,
        y: 0,
        scale: 1,
        filter: "blur(0px)",
        duration: 1.6,
        ease: "power3.out",
        stagger: 0.28,
      },
      "-=1.2"
    );

    // Cleanup function
    return () => {
      titleSplit.revert();
      addressSplit.revert();
    };
  }, [imageLoaded]);

  const handleImageLoad = () => {
    setImageLoaded(true);
  };

  return (
    <section className="relative w-full">
      {/* Image Hero Section */}
      <div ref={containerRef} className="relative h-screen w-full">
        {/* bg image */}
        <div className="absolute inset-0 w-full h-full">
          <img
            src="/images/properties/background/background.png"
            alt="navana property image"
            className="w-full h-full object-cover object-center"
            onLoad={handleImageLoad}
          />
          {/* Cinematic gradient overlay - bottom-focused for text contrast */}
          <div
            ref={overlayRef}
            className="bg-overlay absolute inset-0 w-full h-full bg-gradient-to-t from-black/70 via-black/40 to-transparent opacity-0"
          ></div>
        </div>

        {/* title and address - positioned at 60% from top */}
        <div
          ref={textContainerRef}
          className="absolute top-[60%] left-1/2 -translate-x-1/2 -translate-y-1/2 z-10 w-full flex justify-center px-4 opacity-0"
        >
          <div className="space-y-2">
            <h2
              ref={titleRef}
              className="font-light text-[40px] min-[420px]:text-[44px] md:text-5xl text-slate-100 font-creato whitespace-nowrap"
            >
              Lunaris By Navana
            </h2>
            <p
              ref={addressRef}
              className="text-[18px] min-[420px]:text-[19px] md:text-xl text-slate-100 leading-relaxed tracking-wide"
            >
              Plot-008, Road-505G, Sector-16, Jolshiri
            </p>
          </div>
        </div>
      </div>

      {/* Paragraph section - below image with proper spacing */}
      <div className="w-full px-4 py-[8dvh] md:flex lg:flex-col md:items-end lg:items-center justify-center gap-x-8 lg:gap-x-12 bg-white">
        <p className="text-[clamp(14px, 1.5vw, 16px)] text-[#888888] leading-relaxed tracking-wide md:w-8/12 lg:w-4/12 text-left">
          Nestled in the heart of Uttara, Sector 03, Lunaris by Navana embodies
          distinguished living at its finest. With timeless design, masterful
          craftsmanship, and a coveted address, it reimagines modern
          sophistication for those who live with an elevated sense of taste..
        </p>
        <div className="pt-6 md:w-3/12 lg:w-4/12">
          <button
            onClick={() => console.log("Button clicked")}
            className="w-full py-4 bg-[#333333] text-white hover:scale-105 transition-transform duration-700 ease-in-out cursor-pointer rounded-sm"
          >
            Download Brochure
          </button>
        </div>
      </div>
    </section>
  );
};

export default MobileAnimatedHeroSection;