import { Link } from "@tanstack/react-router";
import { useState } from "react";
import { Menu, X, User } from "lucide-react";
import { Logo } from "./Logo";

const nav = [
  { to: "/ofertas", label: "Ofertas" },
  { to: "/como-investir", label: "Como Investir" },
  { to: "/blog", label: "Blog" },
] as const;

export function Header() {
  const [open, setOpen] = useState(false);
  return (
    <header className="ink-section sticky top-0 z-50 border-b border-white/5 backdrop-blur-md">
      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
        <Logo />
        <nav className="hidden items-center gap-8 md:flex">
          {nav.map((n) => (
            <Link
              key={n.to}
              to={n.to}
              className="text-sm text-white/80 transition hover:text-white"
              activeProps={{ className: "text-white" }}
            >
              {n.label}
            </Link>
          ))}
          <a
            href="https://www.platform.investplus.vc/auth/login"
            className="inline-flex items-center gap-2 text-sm text-white/80 hover:text-white"
          >
            <User className="size-4" /> Login
          </a>
          <a
            href="https://www.platform.investplus.vc/auth/register"
            className="brand-gradient rounded-full px-5 py-2 text-sm font-semibold text-[oklch(0.15_0.02_250)] transition hover:opacity-90"
          >
            Cadastrar
          </a>
        </nav>
        <button
          className="md:hidden text-white"
          onClick={() => setOpen((v) => !v)}
          aria-label="Abrir menu"
        >
          {open ? <X /> : <Menu />}
        </button>
      </div>
      {open && (
        <div className="border-t border-white/5 md:hidden">
          <div className="mx-auto flex max-w-7xl flex-col gap-4 px-4 py-4">
            {nav.map((n) => (
              <Link key={n.to} to={n.to} onClick={() => setOpen(false)} className="text-white/80">
                {n.label}
              </Link>
            ))}
            <a href="https://www.platform.investplus.vc/auth/login" className="text-white/80">Login</a>
            <a
              href="https://www.platform.investplus.vc/auth/register"
              className="brand-gradient inline-flex w-fit rounded-full px-5 py-2 text-sm font-semibold text-[oklch(0.15_0.02_250)]"
            >
              Cadastrar
            </a>
          </div>
        </div>
      )}
    </header>
  );
}