"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { NavAuthButton } from "./NavAuthButton";

function navLinkClass(pathname: string, href: string) {
  const isActive = pathname === href || pathname.startsWith(href + "/");
  const base = "text-sm px-3 py-1.5 rounded-full border transition-all duration-150";
  return isActive
    ? `${base} font-semibold text-rose-600 border-transparent`
    : `${base} font-medium text-rose-500 border-transparent hover:border-rose-300 hover:bg-rose-50 hover:text-rose-600`;
}

export function MarketingNav() {
  const pathname = usePathname();

  return (
    <header className="sticky top-0 z-50 bg-white/95 backdrop-blur-md border-b border-rose-100 shadow-sm">
      <div className="max-w-5xl mx-auto px-5 py-3.5 flex items-center gap-3">
        {/* Logo */}
        <Link href="/" className="flex items-center gap-2 group shrink-0">
          <span className="text-2xl transition-transform duration-200 group-hover:scale-110">🌸</span>
          <span
            className="text-xl font-bold text-gray-900 tracking-tight"
            style={{ fontFamily: "var(--font-caveat)" }}
          >
            Tia
          </span>
        </Link>

        {/* Center nav — grows to fill space, links pushed right via ml-auto */}
        <nav className="flex items-center gap-0.5 ml-auto mr-2">
          {/* About — always visible, including mobile */}
          <Link href="/about" className={navLinkClass(pathname, "/about")}>
            About
          </Link>
          {/* Blog — desktop only */}
          <Link
            href="/blog"
            className={`hidden sm:inline-flex ${navLinkClass(pathname, "/blog")}`}
          >
            Blog
          </Link>
        </nav>

        <NavAuthButton />
      </div>
    </header>
  );
}