"use client";

import Link from "next/link";
import { Menu, Sparkles, X } from "lucide-react";
import { useState } from "react";

const nav = [
  ["Tools", "/tools/"],
  ["Models", "/models/"],
  ["Pricing", "/pricing/"],
  ["Learn", "/blog/"]
];

export function SiteHeader() {
  const [open, setOpen] = useState(false);
  return (
    <header className="site-header">
      <Link className="brand" href="/" aria-label="moved home">
        <span className="brand-mark"><Sparkles size={17} /></span>
        <span>moved</span><i>.live</i>
      </Link>
      <nav className="desktop-nav" aria-label="Primary navigation">
        {nav.map(([label, href]) => <Link key={href} href={href}>{label}</Link>)}
      </nav>
      <div className="header-actions">
        <Link className="text-link desktop-only" href="/app/dashboard/">My videos</Link>
        <Link className="button button-small" href="/app/create/">Create video <span>↗</span></Link>
        <button className="menu-toggle" onClick={() => setOpen(!open)} aria-label="Toggle menu">{open ? <X /> : <Menu />}</button>
      </div>
      {open && (
        <nav className="mobile-menu" aria-label="Mobile navigation">
          {nav.map(([label, href]) => <Link key={href} href={href} onClick={() => setOpen(false)}>{label}</Link>)}
          <Link href="/app/dashboard/" onClick={() => setOpen(false)}>My videos</Link>
        </nav>
      )}
    </header>
  );
}
