"use client"

import { useGSAP } from '@gsap/react'
import gsap from 'gsap'
import Image from 'next/image'
import React, { useRef, useState } from 'react'

const Hero = () => {
  const lettersRef = useRef([])
  const odysseyRef = useRef(null)
  const outerDivRef = useRef(null)
  const innerDivRef = useRef(null)
  const [currentImageIndex, setCurrentImageIndex] = useState(0)

  const images = ["/astro1.jpg", "/astro2.jpeg", "/astro3.jpeg", "/astro5.jpg",]

  useGSAP(() => {
    const tl = gsap.timeline()

    const changeSlide = () => {
      tl.to(innerDivRef.current, {
        x: "-100%",
        duration: 1,
        ease: "power2.inOut",
        delay: 5,
        onComplete: () => {
          setCurrentImageIndex((prev) => (prev + 1) % images.length)
          gsap.set(innerDivRef.current, {x: "100%"})
        }
      })

      tl.to(innerDivRef.current, {
        x: "0%",
        duration: 1,
        ease: "power2.inOut"
      })
    }

    const interval = setInterval(changeSlide, 2000);
    changeSlide()

    tl.to(lettersRef.current, {
      x: 0,
      opacity: 1,
      stagger: 0.1,
      duration: 1
    }).to(odysseyRef.current, {
      x: 0,
      opacity: 1,
      duration: 1
    }).to(outerDivRef.current, {
      y: 0,
      opacity: 1,
      scale: 1,
      duration: 1.2
    })
  }, [])

  return (
    <div className='w-full min-h-screen overflow-hidden bg-cover bg-center' style={{backgroundImage: "url(/astro4.jpeg)"}}>
        <div className='absolute inset-0 w-full h-full bg-cover bg-center top-0 z-[4]' style={{backgroundImage: "url(/astronobg.png)"}}/>
      <div className='absolute transform  top-[5vh] lg:top-[-5vh] right-0 inline-flex'>
        <div className='text-[30vw] lg:text-[300px] font-bold text-white flex flex-col'>
          <div className='flex'>
          {'OCEAN'.split("").map((letter, index) => (
            <span key={index} ref={(el) => (lettersRef.current[index] = el)} className='inline-block opacity-0 translate-x-[200px]'>
              {letter}
            </span>
          ))}
          </div>
          <h3 ref={odysseyRef} className='text-[12vw] lg:text-8xl font-semibold opacity-0 translate-x-[200px] text-white absolute bottom-0 right-[-4px]'>ODYSSEY</h3>
        </div>
      </div>

      <div ref={outerDivRef} className='absolute bottom-[5vh] right-[10vw] outerdiv flex overflow-hidden h-[32vh] w-[38vw] rounded-xl bg-white/10 backdrop-blur-lg'>
        <div ref={innerDivRef} className='flex relative innerdiv flex-row w-full h-full items-center p-3'>
          <div className='h-full w-[100%] rounded-xl'>
            <img src={images[currentImageIndex]} className='object-cover rounded-xl w-full h-full' />
          </div>
          <div className='absolute h-full w-full pr-[20%]'>
            <h2 className='text-white absolute top-[10%] left-[2%] max-w-[20%] text-[8vw] lg:text-6xl font-bold'>
              THE BEST
            </h2>
            <h2 className='text-white absolute top-[40%] right-[70%] lg:right-[10%] text-right max-w-[20%] text-[6vw] lg:text-4xl font-bold'>
              IN THE WORLD
            </h2>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Hero