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

export function StickyMapSection() {
  const containerRef = useRef<HTMLDivElement>(null)
  const [scrollProgress, setScrollProgress] = useState(0)
  const [mapFixed, setMapFixed] = useState(false)

  useEffect(() => {
    const handleScroll = () => {
      if (!containerRef.current) return

      const rect = containerRef.current.getBoundingClientRect()
      const containerHeight = containerRef.current.offsetHeight
      const viewportHeight = window.innerHeight

      const scrolled = -rect.top
      const totalScrollable = containerHeight - viewportHeight
      const progress = Math.max(0, Math.min(1, scrolled / totalScrollable))

      setScrollProgress(progress)
      setMapFixed(progress > 0.22)
    }

    window.addEventListener("scroll", handleScroll, { passive: true })
    handleScroll()

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

  const scalePhase = Math.min(1, scrollProgress / 0.22)
  const contentPhase = Math.max(0, (scrollProgress - 0.4) / 0.2)

  const mapScale = 0.7 + scalePhase * 0.3
  const titleOpacity = 1 - scalePhase

  return (
    <div ref={containerRef} className="relative" style={{ height: "300vh" }}>
      <div
        className={`${mapFixed ? "fixed" : "sticky"} top-0 h-screen w-full overflow-hidden`}
        style={{ zIndex: mapFixed ? 0 : 1 }}
      >
        <div
          className="absolute inset-0 flex items-center justify-center"
          style={{
            transform: `scale(${mapScale})`,
          }}
        >
          <div className="relative w-full h-full">
            <img
              src="/images/arai-map-for-book-update-1024x786.jpg"
              alt="The Realm of Arai"
              className="w-full h-full object-contain"
            />
          </div>
        </div>

        <div className="absolute inset-0 bg-[#1a2424]/70" style={{ opacity: contentPhase * 0.9 }} />

        <div
          className="absolute inset-0 flex flex-col items-center justify-center z-10 pointer-events-none"
          style={{ opacity: titleOpacity }}
        >
          <span className="text-amber-500/60 text-xs tracking-[0.3em] uppercase mb-4">Explore</span>
          <h2 className="font-serif text-4xl md:text-6xl lg:text-7xl text-amber-100/90 tracking-wide text-center">
            The Realm of Arai
          </h2>
          <p className="mt-6 text-amber-200/40 text-sm italic tracking-wide">Scroll to explore</p>
        </div>

        <div
          className="absolute inset-0 flex items-center justify-center z-20"
          style={{
            opacity: contentPhase,
            transform: `translateY(${(1 - contentPhase) * 30}px)`,
          }}
        >
          <div className="max-w-5xl mx-auto px-8 text-center">
            <span
              className="inline-block text-amber-400/70 text-xs tracking-[0.4em] uppercase mb-6"
              style={{
                opacity: contentPhase,
                transform: `translateY(${(1 - contentPhase) * 20}px)`,
                transition: "transform 0.3s ease-out",
              }}
            >
              The World Awaits
            </span>

            <h3
              className="font-serif text-4xl md:text-6xl lg:text-7xl text-amber-100 tracking-wide mb-8"
              style={{
                textShadow: "0 4px 30px rgba(0,0,0,0.8), 0 0 60px rgba(0,0,0,0.5)",
              }}
            >
              Welcome to Arai
            </h3>

            <div className="w-24 h-px bg-gradient-to-r from-transparent via-amber-500/50 to-transparent mx-auto mb-8" />

            <p
              className="text-amber-100/80 leading-relaxed text-lg md:text-xl max-w-3xl mx-auto mb-6"
              style={{
                textShadow: "0 2px 20px rgba(0,0,0,0.9)",
              }}
            >
              A realm where ancient magic flows through the veins of the land itself. From the frozen Wastes in the
              north to the mysterious forests of Erothel, every corner holds secrets waiting to be discovered.
            </p>

            <p
              className="text-amber-200/60 leading-relaxed text-base md:text-lg max-w-2xl mx-auto"
              style={{
                textShadow: "0 2px 20px rgba(0,0,0,0.9)",
              }}
            >
              Kingdoms rise and fall, alliances shift like sand, and in the shadows, forces older than memory stir once
              more.
            </p>

            <div className="mt-12 flex flex-wrap justify-center gap-6 md:gap-10">
              {["12 Regions", "Ancient Magic", "Dark Prophecies"].map((tag, i) => (
                <span
                  key={tag}
                  className="text-amber-300/60 text-sm tracking-widest uppercase"
                  style={{
                    opacity: contentPhase,
                    transform: `translateY(${(1 - contentPhase) * (20 + i * 10)}px)`,
                    textShadow: "0 2px 15px rgba(0,0,0,0.9)",
                  }}
                >
                  {tag}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
