/* mtz. website — fixed architectural chrome: frame, corner metadata,
   blend-mode nav, vertical label, and a full-screen mobile menu.
   Nav + corner copy come from content.json (window.mtzContent). */
function Chrome() {
  const [open, setOpen] = useState(false);
  const c = mtzContent;
  const links = c.nav;
  const go = (e, href) => { mtzScrollTo(e, href); setOpen(false); };

  return (
    <>
      <div className="mtz-chrome">
        <span className="mtz-frame mtz-frame--t"></span>
        <span className="mtz-frame mtz-frame--b"></span>
        <span className="mtz-frame mtz-frame--l"></span>
        <span className="mtz-frame mtz-frame--r"></span>

        <div className="mtz-chrome__corner mtz-chrome__tl">
          <a className="mtz-chrome__logo" href="#top" onClick={(e) => go(e, '#top')} aria-label="mtz.">
            <img src="assets/mark-white.png" alt="mtz." />
          </a>
        </div>

        <div className="mtz-chrome__corner mtz-chrome__tr">
          <nav className="mtz-chrome__nav">
            {links.map((l) => <a key={l.href} href={l.href} onClick={(e) => go(e, l.href)}>{l.label}</a>)}
          </nav>
          <button className={'mtz-burger' + (open ? ' is-open' : '')} aria-label="Menu" aria-expanded={open} onClick={() => setOpen(!open)}><span></span></button>
        </div>

        <div className="mtz-chrome__corner mtz-chrome__bl">{c.brand.location}</div>
        <div className="mtz-chrome__corner mtz-chrome__br">{c.brand.tagline}</div>
        <div className="mtz-chrome__vert">{c.brand.established}</div>
      </div>

      <div className={'mtz-menu' + (open ? ' is-open' : '')}>
        <div className="mtz-menu__panels" aria-hidden="true">
          <span></span><span></span><span></span><span></span>
        </div>
        <div className="mtz-menu__head">
          <img className="mtz-menu__logo" src="assets/mark-white.png" alt="mtz." />
          <button className="mtz-menu__close" type="button" aria-label="Fechar menu" onClick={() => setOpen(false)}>
            <span></span><span></span>
          </button>
        </div>
        <nav className="mtz-menu__nav">
          {links.map((l, i) => (
            <a key={l.href} href={l.href} onClick={(e) => go(e, l.href)}><span>0{i + 1}</span>{l.label}</a>
          ))}
        </nav>
      </div>
    </>
  );
}
window.Chrome = Chrome;