'use client';
import Image from "next/image";
import { useState, useEffect, useRef } from "react";
import { CustomButton } from "./ThemeButtons";
import Link from "next/link";
import Typewriter from "./Typewriter";
import { Spotlight } from "@/components/ui/spotlight";
import { revealElement } from "@/animations/common";
// import { Link } from "lucide-react";


const HeroImage = () => {

const [offset, setOffset] = useState({ x: 0, y: 0 });

  const handleMouseMove = (e: MouseEvent) => {
    const x = (e.clientX / window.innerWidth - 0.5) * 10; // adjust 30 for movement
    const y = (e.clientY / window.innerHeight - 0.5) * 30;
    setOffset({ x, y });
  };

  useEffect(() => {
    window.addEventListener("mousemove", handleMouseMove);
    return () => window.removeEventListener("mousemove", handleMouseMove);
  }, []);
  
  const heroRef = useRef<HTMLElement>(null);

  useEffect(() => {
    if (!heroRef.current) return;

    const heading = heroRef.current.querySelector<HTMLElement>("h1");
    const paragraph = heroRef.current.querySelector<HTMLElement>("p");
    const leftImage = heroRef.current.querySelector<HTMLElement>(".left-image");
    const rightImage = heroRef.current.querySelector<HTMLElement>(".right-image");
    const buttons = heroRef.current.querySelectorAll<HTMLElement>(".flex button, .flex a, .typewriter");
    const typewriter = heroRef.current.querySelectorAll<HTMLElement>(".typewriter");

    // Staggered reveal
    if (heading) revealElement(heading, { direction: "up", duration: 1 });
    if (paragraph) revealElement(paragraph, { direction: "up", duration: 1, delay: 0.3 });
    if (leftImage) revealElement(leftImage, { direction: "left", duration: 1, delay: 0.6 });
    if (rightImage) revealElement(rightImage, { direction: "right", duration: 1, delay: 0.8 });
    if (buttons) revealElement(buttons, { direction: "up", duration: 0.8, delay: 1, stagger: 0.2});
    if (typewriter) revealElement(buttons, { direction: "up", duration: 0.8, delay: 1.2, stagger: 0.3});
  }, []);

  return (
     <section ref={heroRef} className="relative min-h-screen flex items-center justify-center overflow-hidden bg-black">
      <Spotlight className="-left-3/5 rotate-100"/>
      <Spotlight className="-left-1/12 w-[80vw] rotate-120"/>
      <Image
        src="/hero.jpg"
        alt=""
        fill
        priority
        className="object-cover"
      />

    {/* <div className="absolute inset-0 bg-black/40" /> */}

    <div className="relative z-10 max-w-3xl text-center px-6 md:mt-24 -mt-30">
      <h1 className="text-white opacity-0">Where Brands Meet Influencers</h1>
      <p className="text-white/80 mt-4 text-2xl max-w-xl mx-auto opacity-0">
        Reach targeted audiences through vetted
influencers who create authentic content to promote your brand and increase conversions.
      </p>
      
      <div className="md:mt-44 mt-13 flex justify-center gap-4 opacity-0">
        {/* <CustomButton variant="neumorphic">Explore platform</CustomButton> */}
        <CustomButton asChild variant="neumorphic">
          <Link href="https://massvo.digitzcloud.com/">Explore platform</Link>
        </CustomButton>
        <CustomButton asChild variant="darkshadow">
          <Link href="https://massvo.digitzcloud.com/auth/signup">Registered now</Link>
        </CustomButton>
      </div>
    </div>

    <div className="absolute right-0 xl:bottom-0 lg:top-auto top-20 hidden md:block">
      {/* IMAGE + TYPEWRITER WRAPPER */}
      <div className="relative">
        {/* Typewriter overlay */}
        <div className="absolute top-15 left-30 z-20 rotate-3 opacity-0 typewriter">
          <Typewriter words={["Hey! What's Up?", "Need help?"]} />
        </div>

        {/* Image */}
        <Image
          src="/woman.png"
          alt=""
          width={500}
          height={700}
          priority
          className="right-image opacity-0"
        />
      </div>
    </div>

    <Image
      src="/man.png"
      alt=""
      width={500}
      height={700}
      priority
      className="absolute -left-2 -bottom-10 left-image opacity-0 "
      style={{
          transform: `translate(${offset.x}px, ${offset.y}px)`
        }}
    />
  </section>
  )
}

export default HeroImage