"use client";

import { useState } from "react";
import { usePathname } from "next/navigation";
import { Menu, X } from "lucide-react";

import NavLinks from "@/components/navigation/NavLinks";
import SiteLogo from "@/components/navigation/SiteLogo";
import GetStartedButton from "@/components/navigation/GetStartedButton";

const Navbar = () => {
  const [menuOpen, setMenuOpen] = useState(false);
  const pathname = usePathname();

  const isGetStartedPage = pathname === "/get-started";
  const isHeroOrAboutPage = pathname === "/" || pathname === "/about";
  const isAboutPage = pathname === "/about";

  return (
    <header
      className={`relative z-50 ${
        isHeroOrAboutPage ? "bg-transparent" : "bg-[var(--color-1)]"
      }`}
    >
      <nav className="flex items-center h-[75px] px-6 md:px-12 relative">
        <div className="flex-shrink-0" onClick={() => setMenuOpen(false)}>
          <SiteLogo />
        </div>

        <div className="hidden min-[828px]:flex min-[870px]:hidden items-center gap-6 ml-auto">
          <NavLinks mobile={true} onLinkClick={() => setMenuOpen(false)} />
          {!isGetStartedPage && <GetStartedButton />}
        </div>

        <div
          className={`hidden min-[870px]:flex ${
            isGetStartedPage
              ? "absolute left-1/2 transform -translate-x-1/2"
              : "flex-1 justify-center transform -translate-x-[7.5%]"
          }`}
        >
          <NavLinks onLinkClick={() => setMenuOpen(false)} />
        </div>

        <div className="hidden min-[870px]:flex flex-shrink-0">
          {!isGetStartedPage && <GetStartedButton />}
        </div>

        <button
          onClick={() => setMenuOpen(!menuOpen)}
          className="min-[828px]:hidden absolute right-6 top-1/2 transform -translate-y-1/2 p-2 text-[var(--color-8)]"
          aria-label="Toggle menu"
        >
          {menuOpen ? <X size={26} /> : <Menu size={26} />}
        </button>
      </nav>

      {menuOpen && (
        <div className="min-[828px]:hidden bg-[var(--color-1)] border-t border-[var(--color-2)]">
          <div className="flex flex-col items-center py-4 space-y-4">
            <NavLinks mobile={true} onLinkClick={() => setMenuOpen(false)} />
          </div>
        </div>
      )}

      <div
        className="absolute left-0 right-0 h-[3px] mx-auto w-[87.5%]"
        style={{
          background: `${
            isAboutPage
              ? "color-mix(in srgb, var(--color-2) 50%, transparent)"
              : "var(--color-2)"
          }`,
        }}
      />
    </header>
  );
};

export default Navbar;