"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 + "/");
  // border-transparent always reserves the border space → no layout shift on hover
  const base = "font-fraunces text-sm px-3 py-1.5 rounded-full border transition-all duration-150";
  return isActive
    ? `${base} font-medium text-rose-600 border-transparent`
    : `${base} font-normal text-gray-600 border-transparent hover:border-rose-300 hover:bg-rose-50 hover:text-rose-500`;
}

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">
      {/*
        Mobile  → flex: [Logo] ····ml-auto···· [About] [Auth]
        Desktop → 3-col grid: [Logo] [About · Blog] [Auth]
      */}
      <div className="max-w-5xl mx-auto px-5 py-3.5 flex items-center gap-2 sm:grid sm:grid-cols-[1fr_auto_1fr]">

        {/* 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>

        {/* Nav links
            ml-auto on mobile (flex) pushes links to right, next to auth button
            sm:ml-0 cancels that in grid mode (centering is handled by the grid) */}
        <nav className="flex items-center gap-0.5 ml-auto sm:ml-0">
          <Link href="/about" className={navLinkClass(pathname, "/about")}>
            About
          </Link>
          <Link
            href="/blog"
            className={`hidden sm:inline-flex ${navLinkClass(pathname, "/blog")}`}
          >
            Blog
          </Link>
        </nav>

        {/* Auth button — justify-end so it hugs the right edge in grid col 3 */}
        <div className="hidden sm:flex sm:justify-end">
          <NavAuthButton />
        </div>
        {/* On mobile the auth button sits outside the grid, after the nav */}
        <div className="sm:hidden shrink-0">
          <NavAuthButton />
        </div>

      </div>
    </header>
  );
}
