"use client"

import { useEffect, useRef } from "react"
import { ChevronDown } from "lucide-react"
import TypedText from "@/components/typed-text"
import { Button } from "@/components/ui/button"

interface ParallaxHeroProps {
  scrollY: number
}

export default function ParallaxHero({ scrollY }: ParallaxHeroProps) {
  const starsRef = useRef<HTMLDivElement>(null)
  const moonRef = useRef<HTMLDivElement>(null)
  const mountainsBackRef = useRef<HTMLDivElement>(null)
  const mountainsFrontRef = useRef<HTMLDivElement>(null)
  const textRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (starsRef.current) {
      starsRef.current.style.transform = `translateY(${scrollY * 0.1}px)`
    }
    if (moonRef.current) {
      moonRef.current.style.transform = `translateY(${scrollY * 0.3}px)`
    }
    if (mountainsBackRef.current) {
      mountainsBackRef.current.style.transform = `translateY(${scrollY * 0.25}px)`
    }
    if (mountainsFrontRef.current) {
      mountainsFrontRef.current.style.transform = `translateY(${scrollY * 0.15}px)`
    }
    if (textRef.current) {
      textRef.current.style.transform = `translateY(${scrollY * 0.5}px)`
      textRef.current.style.opacity = `${1 - scrollY * 0.002}`
    }
  }, [scrollY])

  return (
    <section id="home" className="relative h-screen overflow-hidden">
      {/* Stars background */}
      <div
        ref={starsRef}
        className="absolute inset-0 bg-[url('/images/stars.png')] bg-repeat z-0"
        style={{ backgroundSize: "400px 400px" }}
      ></div>

      {/* Moon */}
      <div
        ref={moonRef}
        className="absolute top-[15%] right-[15%] w-32 h-32 rounded-full bg-yellow-100 shadow-[0_0_50px_10px_rgba(255,255,200,0.8)] z-10"
      ></div>

      {/* Mountains back */}
      <div
        ref={mountainsBackRef}
        className="absolute bottom-0 w-full h-[40%] bg-[url('/images/mountains-back.png')] bg-repeat-x bg-bottom z-20"
      ></div>

      {/* Mountains front */}
      <div
        ref={mountainsFrontRef}
        className="absolute bottom-0 w-full h-[30%] bg-[url('/images/mountains-front.png')] bg-repeat-x bg-bottom z-30"
      ></div>

      {/* Content */}
      <div ref={textRef} className="relative z-40 h-full flex flex-col items-center justify-center text-center px-4">
        <div className="text-glow">
          <p className="text-2xl md:text-3xl font-medium text-white mb-2 animate-fade-in">Welcome</p>
          <h1 className="text-4xl md:text-6xl font-bold text-white mb-4 animate-fade-in-delay-1">
            <TypedText />
          </h1>
          <p className="text-xl text-gray-300 mb-8 animate-fade-in-delay-2">based in Butte, Montana - and Remotely!</p>
          <Button
            variant="glow"
            className="animate-fade-in-delay-3"
            onClick={() => {
              document.getElementById("contact")?.scrollIntoView({ behavior: "smooth" })
            }}
          >
            Hire Me
          </Button>
        </div>
      </div>

      <a
        href="#about"
        className="absolute bottom-10 left-1/2 transform -translate-x-1/2 text-white animate-bounce z-40"
        onClick={(e) => {
          e.preventDefault()
          document.getElementById("about")?.scrollIntoView({ behavior: "smooth" })
        }}
      >
        <ChevronDown size={32} className="glow-white" />
      </a>
    </section>
  )
}