const NAV_LINKS = [
  { href: "#about", label: "About", num: "01" },
  { href: "#services", label: "Services", num: "02" },
  { href: "#works", label: "Works", num: "03" },
  { href: "#process", label: "Process", num: "04" },
  { href: "#contact", label: "Contact", num: "05" },
];

function FujiMark({ size = 22, color = "var(--ink)", accent = "var(--accent)" }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none">
      <path d="M2 20 L9 8 L11.5 12 L13.5 9 L17 14 L19 12 L22 20 Z"
            fill={color} />
      <path d="M9 8 L11.5 12 L13.5 9 L15 11 L13 11 L11.5 9.5 Z" fill={accent} />
    </svg>
  );
}

function Nav() {
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    if (open) document.body.style.overflow = 'hidden';
    else document.body.style.overflow = '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  return (
    <>
      <nav className="nav">
        <a href="#top" className="nav__brand" onClick={() => setOpen(false)}>
          <span className="mark"><FujiMark /></span>
          <span className="wm">FUJI<small>web studio</small></span>
        </a>
        <div className="nav__links">
          {NAV_LINKS.map(l => (
            <a key={l.href} href={l.href}>
              <span style={{opacity: 0.5, marginRight: 6}}>{l.num}</span>{l.label}
            </a>
          ))}
        </div>
        <a href="#contact" className="nav__cta">
          <span className="dot"></span>
          ご相談する
        </a>
        <button className="nav__menu-btn" onClick={() => setOpen(o => !o)} aria-label="menu">
          <span style={{transform: open ? 'translateY(2.5px) rotate(45deg)' : 'none', transition: '.2s'}}></span>
          <span style={{transform: open ? 'translateY(-3px) rotate(-45deg)' : 'none', transition: '.2s'}}></span>
        </button>
      </nav>
      <div className={`mobile-menu ${open ? 'open' : ''}`}>
        {NAV_LINKS.map(l => (
          <a key={l.href} href={l.href} onClick={() => setOpen(false)}>
            <span>{l.label}</span>
            <span className="mono">{l.num} →</span>
          </a>
        ))}
        <a href="#contact" onClick={() => setOpen(false)} style={{borderBottom: 0, marginTop: 8}}>
          <span style={{color: 'var(--accent)'}}>ご相談する</span>
          <span className="mono">CONTACT →</span>
        </a>
      </div>
    </>
  );
}

Object.assign(window, { Nav, FujiMark });