import { useState } from "react";
import { Link } from "@tanstack/react-router";
import { MessageCircle, Menu, X, LogIn, UserPlus } from "lucide-react";
import logo from "@/assets/ararabot-logo.png";

export const WHATSAPP_URL =
  "https://wa.me/5554981122381?text=Quero%20automatizar%20meus%20agendamentos%20com%20a%20Ararabot";

export function Nav() {
  const [open, setOpen] = useState(false);
  const links: { href: string; label: string; to?: string }[] = [
    { href: "/", label: "Agendamentos" },
    { href: "/crm", label: "CRM WhatsApp" },
    { href: "/atendentes-ia", label: "Atendentes de IA" },
    { href: "/casos-de-sucesso", label: "Casos de Sucesso" },
    { href: "/comparacao", label: "Comparar" },
    { href: "/blog", label: "Blog" },
  ];
  return (
    <header className="sticky top-0 z-50 glass">
      <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
        <Link to="/" className="flex items-center gap-2" onClick={() => setOpen(false)}>
          <img src={logo} alt="Ararabot logo" className="h-10 w-auto" />
          <span className="sr-only">ararabot</span>
        </Link>
        <nav className="hidden items-center gap-8 text-sm md:flex">
          {links.map((l) => (
            <a key={l.href} href={l.href} className="text-muted-foreground hover:text-foreground transition">
              {l.label}
            </a>
          ))}
        </nav>
        <div className="flex items-center gap-2">
          <a
            href="https://crm.ararabot.com.br/"
            target="_blank"
            rel="noopener"
            className="hidden md:inline-flex items-center gap-2 rounded-full bg-gradient-neon px-4 py-2.5 text-sm font-semibold text-neon-foreground shadow-neon hover:scale-[1.03] transition"
          >
            <LogIn className="h-4 w-4" /> Entrar
          </a>
          <a
            href="https://crm.ararabot.com.br/register"
            target="_blank"
            rel="noopener"
            className="hidden md:inline-flex items-center gap-2 rounded-full border border-border bg-card/70 px-4 py-2.5 text-sm font-semibold text-foreground shadow-sm hover:bg-card hover:scale-[1.03] transition"
          >
            <UserPlus className="h-4 w-4" /> Cadastrar
          </a>
          <a
            href={WHATSAPP_URL}
            target="_blank"
            rel="noopener"
            className="hidden md:inline-flex items-center gap-2 rounded-full border border-border bg-card/70 px-5 py-2.5 text-sm font-semibold text-foreground shadow-sm hover:bg-card hover:scale-[1.03] transition"
          >
            <MessageCircle className="h-4 w-4" /> Falar agora
          </a>
          <button
            type="button"
            aria-label={open ? "Fechar menu" : "Abrir menu"}
            aria-expanded={open}
            onClick={() => setOpen((v) => !v)}
            className="inline-flex items-center justify-center rounded-full border border-border bg-card/50 p-2.5 md:hidden"
          >
            {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
          </button>
        </div>
      </div>
      {open && (
        <div className="border-t border-border/60 bg-background/95 backdrop-blur md:hidden">
          <nav className="mx-auto flex max-w-7xl flex-col gap-1 px-6 py-4 text-sm">
            {links.map((l) => (
              <a
                key={l.href}
                href={l.href}
                onClick={() => setOpen(false)}
                className="rounded-lg px-3 py-3 text-muted-foreground hover:bg-card hover:text-foreground transition"
              >
                {l.label}
              </a>
            ))}
            <a
              href="https://crm.ararabot.com.br/"
              target="_blank"
              rel="noopener"
              onClick={() => setOpen(false)}
              className="mt-2 inline-flex items-center justify-center gap-2 rounded-full bg-gradient-neon px-5 py-3 text-sm font-semibold text-neon-foreground shadow-neon"
            >
              <LogIn className="h-4 w-4" /> Entrar
            </a>
            <a
              href="https://crm.ararabot.com.br/register"
              target="_blank"
              rel="noopener"
              onClick={() => setOpen(false)}
              className="inline-flex items-center justify-center gap-2 rounded-full border border-border bg-card/70 px-5 py-3 text-sm font-semibold text-foreground shadow-sm"
            >
              <UserPlus className="h-4 w-4" /> Cadastrar
            </a>
            <a
              href={WHATSAPP_URL}
              target="_blank"
              rel="noopener"
              onClick={() => setOpen(false)}
              className="inline-flex items-center justify-center gap-2 rounded-full border border-border bg-card/70 px-5 py-3 text-sm font-semibold text-foreground shadow-sm"
            >
              <MessageCircle className="h-4 w-4" /> Falar agora
            </a>
          </nav>
        </div>
      )}
    </header>
  );
}