whispering-tree/components/shared/Navbar.tsx

"use client";

import Image from "next/image";
import { useEffect, useRef, useState } from "react";
import { gsap } from "gsap";
import Button from "./Button";
import SmoothScrollLink from "@/components/ui/smooth-scroll-link";
import Link from "next/link";
import { usePageTransition } from "@/layout/Layout";

const Navbar = () => {
  const navbarRef = useRef<HTMLDivElement>(null);
  const [scrolled, setScrolled] = useState(false);
  const [showNavbar, setShowNavbar] = useState(true);
  const { startTransition } = usePageTransition();

  const [lastScrollY, setLastScrollY] = useState(0);

  // ── GSAP: Initial slide-in ─────────────────────────────────────
  useEffect(() => {
    const el = navbarRef.current;
    if (!el) return;

    // Start off-screen
    gsap.set(el, { yPercent: -100, opacity: 0 });

    // Animate in
    gsap.to(el, {
      yPercent: 0,
      opacity: 1,
      duration: 1.2,
      ease: "expo.out",
    });
  }, []);

  // ── Scroll: Hide/show + background ─────────────────────────────
  useEffect(() => {
    const handleScroll = () => {
      const currentScroll = window.scrollY;

      // Hide on scroll down
      if (currentScroll > lastScrollY && currentScroll > 100) {
        setShowNavbar(false);
      } else {
        setShowNavbar(true);
      }

      setScrolled(currentScroll > 30);
      setLastScrollY(currentScroll);
    };

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

  const navLinks = [
    { label: "Home", href: "#home" },
    { label: "About Us", href: "#about" },
    { label: "Benefits", href: "#benefits" },
    { label: "How it works", href: "/#how-it-works" },
    { label: "FAQ", href: "#faq" },
  ];

  return (
    <header
      ref={navbarRef}
      className={`tab:block fixed top-0 right-0 left-0 z-50 sm:hidden ${showNavbar ? "translate-y-0" : "-translate-y-full"} ${
        scrolled
          ? "top-0 border-white/30 bg-white/40 shadow-xs backdrop-blur-md"
          : "top-6 border-transparent bg-transparent"
      } `.trim()}
    >
      <nav className="mx-auto flex h-[75px] w-full max-w-[1420px] items-center justify-between px-6 py-3 transition-all duration-300">
        {/* Logo */}
        <div
          onClick={() => startTransition(`/`)}
          className="h-10 w-36 cursor-pointer"
        >
          <Image
            src={
              scrolled
                ? "/images/svg/dark-logo.svg"
                : "/images/svg/whispering-logo.svg"
            }
            width={144}
            height={40}
            alt="Whispering Tree"
            className="h-full w-full object-contain"
          />
        </div>

        {/* Desktop Links */}
        <div className="tab:flex hidden">
          <ul className="flex items-center gap-6">
            {navLinks.map((link) => (
              <li key={link.href} className="flex items-center justify-center">
                <SmoothScrollLink href={link.href} scrolled={scrolled}>
                  {link.label}
                </SmoothScrollLink>
              </li>
            ))}
          </ul>
        </div>

        {/* CTA */}
        <Button text="Book a Demo" />
      </nav>
    </header>
  );
};

export default Navbar;