"use client";

import { useEffect } from "react";

export default function ScillySmoothScroll() {
  useEffect(() => {
    const handleAnchorClick = (e: MouseEvent) => {
      const target = e.target as HTMLElement;
      const anchor = target.closest("a");
      if (!anchor) return;

      const href = anchor.getAttribute("href");
      
      if (href && href.startsWith("#") && href.length > 1) {
        const id = href.substring(1);
        const element = document.getElementById(id);
        if (element) {
          e.preventDefault();
          
          // Using native smooth scroll for "just smooth" feel
          element.scrollIntoView({
            behavior: "smooth",
            block: "start",
          });
          
          window.history.pushState(null, "", href);
        }
      }
    };

    document.addEventListener("click", handleAnchorClick, { capture: true });
    return () => document.removeEventListener("click", handleAnchorClick, { capture: true });
  }, []);

  return null;
}