"use client";

import Image from "next/image";
import Link from "next/link";
import { useState, useEffect } from "react";

export default function Nav() {
  const [scrollPosition, setScrollPosition] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      setScrollPosition(window.scrollY);
    };

    handleScroll();

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

  const opacity = Math.min(1, scrollPosition / 500);

  return (
    <nav
      style={{ backgroundColor: `rgba(0, 0, 0, ${opacity})` }}
      className="fixed top-0 z-30 flex w-full"
    >
      <div className="container flex gap-x-14 py-2">
        <Link href="/" scroll={true}>
          <Image alt="Julian Cross" src="/logo.png" width={150} height={50} />
        </Link>
        <div className="grow" />
        <Link scroll={true} href="/#releases" className="my-auto">
          Releases
        </Link>

        <Link scroll={true} href="/#tour" className="my-auto">
          Tour
        </Link>

        <Link scroll={true} href="/#gallery" className="my-auto">
          Gallery
        </Link>

        <Link scroll={true} href="/#contact" className="my-auto">
          Contact
        </Link>
      </div>
    </nav>
  );
}

these links scroll to the section in the dev environment but not in production. Anyone know how to fix that?