"use client";

import Link from "next/link";
import { useState } from "react";
import { Logo } from "./Logo";
import { contact } from "@/lib/contact";

const links = [
  { href: "/yarismalar/hands-on-challenge", label: "Hands-On" },
  { href: "/yarismalar/ideathon", label: "Ideathon" },
  { href: "/yarismalar/robo-soccer", label: "Robo Soccer" },
  { href: "/hakkimizda", label: "Hakkımızda" },
  { href: "/iletisim", label: "İletişim" },
];

export function Nav() {
  const [open, setOpen] = useState(false);
  return (
    <header className="sticky top-0 z-40 border-b-2 border-neutral-900 bg-white">
      <div className="mx-auto flex max-w-[1400px] items-center justify-between px-6 py-3 md:px-10">
        <Logo />
        <nav className="hidden items-center gap-7 text-sm font-black uppercase tracking-wider md:flex">
          {links.map((l) => (
            <Link
              key={l.href}
              href={l.href}
              className="text-neutral-700 transition hover:text-violet-700"
            >
              {l.label}
            </Link>
          ))}
        </nav>
        <div className="flex items-center gap-2">
          <Link
            href="/sponsor"
            className="hidden items-center gap-1 bg-violet-700 px-4 py-2.5 text-xs font-black uppercase tracking-wider text-white transition hover:bg-violet-800 md:inline-flex"
          >
            Sponsor Ol →
          </Link>
          <a
            href={contact.whatsapp.url}
            target="_blank"
            rel="noreferrer noopener"
            className="hidden items-center gap-1 border-2 border-neutral-900 px-4 py-2 text-xs font-black uppercase tracking-wider text-neutral-900 transition hover:bg-yellow-300 md:inline-flex"
          >
            Topluluk
          </a>
          <button
            type="button"
            aria-label="Menü"
            aria-expanded={open}
            onClick={() => setOpen((v) => !v)}
            className="inline-flex size-10 items-center justify-center border-2 border-neutral-900 md:hidden"
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
              {open ? (
                <path
                  d="M6 6l12 12M18 6L6 18"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                />
              ) : (
                <path
                  d="M4 7h16M4 12h16M4 17h16"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                />
              )}
            </svg>
          </button>
        </div>
      </div>
      {open && (
        <div className="border-t-2 border-neutral-900 md:hidden">
          <div className="mx-auto flex max-w-[1400px] flex-col divide-y-2 divide-neutral-900 px-6 md:px-10">
            {links.map((l) => (
              <Link
                key={l.href}
                href={l.href}
                onClick={() => setOpen(false)}
                className="py-4 text-sm font-black uppercase tracking-wider text-neutral-900 hover:text-violet-700"
              >
                {l.label}
              </Link>
            ))}
            <Link
              href="/sponsor"
              onClick={() => setOpen(false)}
              className="py-4 text-sm font-black uppercase tracking-wider text-violet-700"
            >
              Sponsor Ol →
            </Link>
          </div>
        </div>
      )}
    </header>
  );
}
