"use client"

import { useEffect, useState } from "react"
import clsx from "clsx"

import { Header_darkbg } from "@/components/Header_darkbg"

export function HomeStickyHeader() {
  const [scrolled, setScrolled] = useState(false)

  useEffect(() => {
    const handleScroll = () => {
      const heroThreshold = window.innerHeight * 0.8
      setScrolled(window.scrollY > heroThreshold)
    }

    handleScroll()
    window.addEventListener("scroll", handleScroll)

    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

  return (
    <div
      className={clsx(
        "sticky top-0 z-30 transition-all duration-300",
        scrolled && "bg-black/40 backdrop-blur-md",
      )}
    >
      <Header_darkbg />
    </div>
  )
}
