songs2vid/components/LandingNavbar.tsx

"use client";

import { useState } from "react";
import { Logo } from "@/components/Logo";
import { MobileMenuButton, MobileSidebar, sidebarLinkClass } from "@/components/MobileSidebar";
import { DOCS_URL, WEBSITE_URL } from "@/lib/plans";

const NAV_LINKS = [
  { href: "#benefits", label: "Benefits", kind: "anchor" as const },
  { href: "#download", label: "Download", kind: "anchor" as const },
  { href: `${DOCS_URL}/docs/intro`, label: "Docs", kind: "external" as const },
  { href: WEBSITE_URL, label: "Hosted", kind: "external" as const },
  { href: "#support", label: "Support", kind: "anchor" as const },
] as const;

function NavAnchor({
  href,
  label,
  onNavigate,
  className = "text-base font-medium text-gray-300 transition-colors duration-200 hover:text-white",
}: {
  href: string;
  label: string;
  onNavigate?: () => void;
  className?: string;
}) {
  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
    e.preventDefault();
    const id = href.replace("#", "");
    document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
    window.history.pushState(null, "", href);
    onNavigate?.();
  };

  return (
    <a href={href} onClick={handleClick} className={className}>
      {label}
    </a>
  );
}

function ExternalLink({
  href,
  label,
  onNavigate,
  className = "text-base font-medium text-gray-300 transition-colors duration-200 hover:text-white",
}: {
  href: string;
  label: string;
  onNavigate?: () => void;
  className?: string;
}) {
  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      onClick={() => onNavigate?.()}
      className={className}
    >
      {label}
    </a>
  );
}

export function LandingNavbar() {
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <>
      <header className="group absolute left-0 right-0 top-0 z-20 bg-transparent transition-all duration-300 hover:bg-black/70 hover:backdrop-blur-md">
        <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
          <Logo size="md" />

          <div className="flex items-center gap-4">
            <nav className="hidden items-center gap-10 sm:flex">
              {NAV_LINKS.map((link) =>
                link.kind === "external" ? (
                  <ExternalLink key={link.href} href={link.href} label={link.label} />
                ) : (
                  <NavAnchor key={link.href} href={link.href} label={link.label} />
                ),
              )}
            </nav>

            <MobileMenuButton
              open={menuOpen}
              onClick={() => setMenuOpen((prev) => !prev)}
            />
          </div>
        </div>
      </header>

      <MobileSidebar open={menuOpen} onClose={() => setMenuOpen(false)} title="Menu">
        {NAV_LINKS.map((link) =>
          link.kind === "external" ? (
            <ExternalLink
              key={link.href}
              href={link.href}
              label={link.label}
              onNavigate={() => setMenuOpen(false)}
              className={sidebarLinkClass()}
            />
          ) : (
            <NavAnchor
              key={link.href}
              href={link.href}
              label={link.label}
              onNavigate={() => setMenuOpen(false)}
              className={sidebarLinkClass()}
            />
          ),
        )}
      </MobileSidebar>
    </>
  );
}