"use client";

import { useState } from "react";
import { Logo } from "./Logo";
import MagneticButton from "./cinematic/MagneticButton";

const navItems = [
  { href: "#home", label: "Home" },
  { href: "#about", label: "Sobre" },
  { href: "#skills", label: "Habilidades" },
  { href: "#experience", label: "Experiencia" },
  { href: "#projects", label: "Projetos" },
  { href: "#modalities", label: "Contratacao" },
  { href: "#contact", label: "Contato" },
];

export function Header() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  return (
    <header className="ds-section-dark fixed inset-x-0 top-0 z-50 h-[52px] w-full border-b border-[rgba(255,255,255,0.06)] bg-[var(--ink)]/95 px-sp-6 backdrop-blur-xl lg:px-sp-16">
      <div className="ds-section-shell flex h-full items-center justify-between">
        <a href="#home" className="flex items-center gap-3 no-underline">
          <Logo variant="mark" size="sm" theme="dark" className="shrink-0" />
          <span className="font-display text-sm font-extrabold tracking-tight text-white">
            evandro<span className="text-[var(--slash)]">.dev.br</span>
          </span>
        </a>

        <nav className="hidden items-center lg:flex">
          <ul className="flex list-none items-center gap-sp-2">
            {navItems.map((item) => (
              <li key={item.href}>
                <MagneticButton
                  as="a"
                  href={item.href}
                  className="ds-link rounded-sm px-sp-3 py-sp-2 text-white/85 transition-colors hover:bg-white/10 hover:text-white"
                  strength={0.15}
                >
                  {item.label}
                </MagneticButton>
              </li>
            ))}
          </ul>
        </nav>

        <div className="flex items-center gap-sp-4">
          <span className="ds-metric hidden rounded-full border border-white/10 px-[10px] py-1 text-white/40 lg:inline-flex">
            v1.0 / 2026
          </span>
          <MagneticButton
            as="a"
            href="/Profile.pdf"
            download="Evandro_Fonseca_Junior_CV.pdf"
            className="ds-link ds-link-accent hidden rounded-sm font-semibold transition-shadow hover:shadow-[0_0_0_1px_rgba(232,255,0,.8),0_8px_24px_rgba(232,255,0,.35)] lg:inline-flex"
            strength={0.2}
          >
            Download CV
          </MagneticButton>
          <button
            type="button"
            className="flex h-8 w-8 flex-col items-center justify-center gap-sp-2 border-none bg-transparent lg:hidden"
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            aria-label="Menu"
            aria-expanded={mobileMenuOpen}
          >
            <span
              className={`h-0.5 w-5 bg-white transition-transform duration-300 ${mobileMenuOpen ? "translate-y-[6px] rotate-45" : ""}`}
            />
            <span
              className={`h-0.5 w-5 bg-white transition-opacity duration-300 ${mobileMenuOpen ? "opacity-0" : ""}`}
            />
            <span
              className={`h-0.5 w-5 bg-white transition-transform duration-300 ${mobileMenuOpen ? "-translate-y-[6px] -rotate-45" : ""}`}
            />
          </button>
        </div>
      </div>

      <div
        className={`absolute inset-x-0 top-[52px] overflow-hidden border-b border-[rgba(255,255,255,0.06)] bg-[var(--ink)]/98 px-sp-6 backdrop-blur-xl transition-all duration-300 lg:hidden lg:px-sp-16 ${mobileMenuOpen ? "max-h-[420px] opacity-100" : "max-h-0 opacity-0"}`}
      >
        <div className="ds-section-shell flex flex-col py-sp-6">
          <nav className="mb-sp-6">
            <ul className="flex list-none flex-col gap-sp-2">
              {navItems.map((item) => (
                <li key={item.href}>
                  <MagneticButton
                    as="a"
                    href={item.href}
                    className="ds-link block rounded-sm py-sp-3 text-white/85 transition-all hover:pl-sp-2 hover:text-white"
                    onClick={() => setMobileMenuOpen(false)}
                    strength={0.15}
                  >
                    {item.label}
                  </MagneticButton>
                </li>
              ))}
              <li>
                <MagneticButton
                  as="a"
                  href="/Profile.pdf"
                  download="Evandro_Fonseca_Junior_CV.pdf"
                  className="ds-link ds-link-accent mt-sp-2 inline-flex rounded-sm font-semibold"
                  strength={0.15}
                >
                  Download CV
                </MagneticButton>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </header>
  );
}