/* mtz. website — composition + motion init + content loading.
   All editable copy lives in content.json; it is fetched before the first
   render and exposed as window.mtzContent. rt() turns *palavra* into a serif
   emphasis <em> and \n into <br>, so the JSON stays plain, owner-friendly text. */

/* Rich text: "*palavra*" -> <em> (serif accent), "\n" -> <br>. Returns nodes. */
window.rt = function (str) {
  if (str == null) return null;
  var out = [];
  String(str).split('\n').forEach(function (line, li) {
    if (li > 0) out.push(React.createElement('br', { key: 'br' + li }));
    line.split(/(\*[^*]+\*)/g).forEach(function (part, pi) {
      if (!part) return;
      if (part.charAt(0) === '*' && part.charAt(part.length - 1) === '*') {
        out.push(React.createElement('em', { key: li + '_' + pi }, part.slice(1, -1)));
      } else {
        out.push(part);
      }
    });
  });
  return out;
};

/* Eyebrow helper: a leading "(00)" / "(sobre)" is rendered in the brand-colored
   <b>, matching the mono index tic; the rest keeps *palavra* emphasis. */
window.eb = function (str) {
  if (str == null) return null;
  var m = String(str).match(/^(\([^)]*\))\s*([\s\S]*)$/);
  if (m) return [React.createElement('b', { key: 'b' }, m[1]), ' '].concat(window.rt(m[2]));
  return window.rt(str);
};

/* Smooth-scroll to an in-page anchor through the motion layer (Lenis-style),
   falling back to native smooth scroll. Shared by the chrome nav, the mobile
   menu and the footer links so every in-page jump glides the same way. */
window.mtzScrollTo = function (e, href) {
  if (!href || href.charAt(0) !== '#') return;
  if (e) e.preventDefault();
  var el = document.querySelector(href);
  if (!el) return;
  var y = el.getBoundingClientRect().top + window.scrollY - 24;
  if (window.mtzScroll) window.mtzScroll.to(y);
  else window.scrollTo({ top: y, behavior: 'smooth' });
};

function App() {
  React.useEffect(() => {
    const id = requestAnimationFrame(() => { if (window.mtzScroll) window.mtzScroll.init(); });
    return () => cancelAnimationFrame(id);
  }, []);
  return (
    <>
      <Chrome />
      <main>
        <Hero />
        <Manifesto />
        <Services />
        <Marquee />
        <Work />
        <Stats />
        <Quote />
        <Contact />
      </main>
      <Footer />
    </>
  );
}

function mtzRender() {
  if (window.__mtzNoDS) return;
  ReactDOM.createRoot(document.getElementById('root')).render(<App />);
}

/* Load the editable content first, then mount. The intro overlay covers this
   short gap. If content.json is missing or malformed, surface a clear message
   (and lift the intro) so the site owner knows exactly what to fix. */
fetch('content.json', { cache: 'no-cache' })
  .then((r) => { if (!r.ok) throw new Error('HTTP ' + r.status); return r.json(); })
  .then((data) => { window.mtzContent = data; mtzRender(); })
  .catch((err) => {
    console.error('[mtz] Falha ao carregar content.json:', err);
    const root = document.getElementById('root');
    if (root) root.innerHTML = '<div style="min-height:100vh;display:flex;align-items:center;justify-content:center;font-family:var(--font-sans);color:var(--text-secondary);text-align:center;padding:2rem;line-height:1.6;">'
      + '<div><div style="font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-700);margin-bottom:1rem;">mtz.</div>'
      + 'Não foi possível ler o <b>content.json</b>.<br>Confira a formatação do arquivo (aspas e vírgulas).</div></div>';
    document.documentElement.classList.remove('mtz-intro-lock');
    const intro = document.getElementById('mtz-intro');
    if (intro && intro.parentNode) intro.parentNode.removeChild(intro);
  });