/* global React, AREAS, FOUNDERS, PARTNERS, ALL_PARTNERS, ASSOCIATES, STAFF, POSTS */
const { useState, useEffect, useRef } = React;

// ===== Helpers =====
function Headline({ first, second }) {
  return (
    <h1 className="hero__title">
      <span className="hero__title-line">{first}</span>
      <span className="hero__title-line">{second}</span>
    </h1>
  );
}

function ModeToggle({ mode, setMode, inline }) {
  if (inline) {
    return (
      <div className="mode-toggle mode-toggle--inline" role="tablist" aria-label="Estilo visual">
        <button type="button" role="tab" aria-pressed={mode === "tradicional"} onClick={() => setMode("tradicional")}>Tradicional</button>
        <button type="button" role="tab" aria-pressed={mode === "moderno"}     onClick={() => setMode("moderno")}>Moderno</button>
      </div>
    );
  }
  return null;
}

// ===== Topbar (estilo V2: contatos + idioma + estilo) =====
function Topbar({ mode, setMode, lang, setLang }) {
  return (
    <div className="topbar">
      <div className="topbar__cities">
        <span className="topbar__city"><span className="topbar__dot"></span>Santa Maria · RS</span>
        <span className="topbar__city"><span className="topbar__dot"></span>Porto Alegre · RS</span>
      </div>
      <div className="topbar__contact">
        <a href="tel:+555530256100" className="topbar__link">(55) 3025.6100</a>
        <a href="mailto:contato@mmtadvogados.com.br" className="topbar__link">contato@mmtadvogados.com.br</a>
      </div>
      <div className="topbar__right">
        <a href="#login" className="topbar__link topbar__link--client">Área do Cliente</a>
        <span className="topbar__sep">·</span>
        <ModeToggle mode={mode} setMode={setMode} inline />
      </div>
    </div>
  );
}

// ===== Nav (estilo V2: logo + tagline esq · links centrais · CTA direita) =====
function Nav({ mode, setMode }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);
  const close = () => setMenuOpen(false);
  const links = [
    { href: "#top",       label: "Início" },
    { href: "#manifesto", label: "Quem Somos" },
    { href: "#areas",     label: "Áreas de Atuação" },
    { href: "#socios",    label: "Equipe" },
    { href: "#analises",  label: "Publicações" },
    { href: "#contato",   label: "Contato" },
  ];
  return (
    <React.Fragment>
      <nav className={"nav nav--v2" + (scrolled ? " scrolled" : "")}>
        <a href="#top" className="nav__brand" aria-label="MMT Advogados">
          <img src="assets/logos/origens-4-black-on-white.png" alt="MMT — Martini, Medeiros & Tonetto Advogados Associados" />
        </a>
        <div className="nav__center">
          {links.map((l, i) => (
            <a key={l.href} href={l.href} className={"nav__link" + (i === 0 ? " nav__link--active" : "")}>{l.label}</a>
          ))}
        </div>
        <div className="nav__right">
          <div className="nav__toggles" role="group" aria-label="Estilo visual">
            <button type="button" className={"nav__toggle" + (mode === "tradicional" ? " active" : "")} aria-pressed={mode === "tradicional"} onClick={() => setMode("tradicional")} title="Modo tradicional">T</button>
            <button type="button" className={"nav__toggle" + (mode === "moderno" ? " active" : "")} aria-pressed={mode === "moderno"} onClick={() => setMode("moderno")} title="Modo moderno">M</button>
          </div>
          <a href="#contato" className="nav__cta">Entre em contato</a>
          <button
            type="button"
            className={"nav__burger" + (menuOpen ? " open" : "")}
            aria-label={menuOpen ? "Fechar menu" : "Abrir menu"}
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen(!menuOpen)}
          >
            <span></span><span></span><span></span>
          </button>
        </div>
      </nav>
      <div
        className={"nav-drawer" + (menuOpen ? " open" : "")}
        role="dialog"
        aria-modal="true"
        aria-hidden={!menuOpen}
      >
        <div className="nav-drawer__inner">
          <div className="nav-drawer__meta">
            <strong>EST. 2001</strong> · Santa Maria · Porto Alegre
          </div>
          <nav className="nav-drawer__links">
            {links.map(l => (
              <a key={l.href} href={l.href} onClick={close}>{l.label}</a>
            ))}
          </nav>
          <a href="#contato" onClick={close} className="nav-drawer__cta">
            Agendar consulta →
          </a>
          <div className="nav-drawer__modes">
            <span className="nav-drawer__modes-label">Estilo visual</span>
            <div className="nav-drawer__modes-row">
              <button
                type="button"
                aria-pressed={mode === "tradicional"}
                onClick={() => setMode("tradicional")}
              >Tradicional</button>
              <button
                type="button"
                aria-pressed={mode === "moderno"}
                onClick={() => setMode("moderno")}
              >Moderno</button>
            </div>
          </div>
          <div className="nav-drawer__contact">
            <div><strong>Santa Maria</strong> · (55) 3025-6100</div>
            <div><strong>Porto Alegre</strong> · (51) 3025-6100</div>
            <div>contato@mmtadvogados.com.br</div>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}

// ===== Chapter Rail =====
function ChapterRail({ section }) {
  const [progress, setProgress] = useState(0);
  useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const p = (h.scrollTop / (h.scrollHeight - h.clientHeight)) * 100;
      setProgress(p);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const onDark = section === "areas";
  return (
    <aside className="rail">
      <div className="rail__label" data-on-dark={onDark}>
        {section}
      </div>
      <div className="rail__progress" style={{ "--p": progress + "%" }}></div>
    </aside>
  );
}

// ===== Hero =====
function Hero() {
  return (
    <section className="hero hero--v2" id="top">
      <div className="wrap">
        <div className="hero__grid">
          <div className="hero__title-wrap reveal">
            <div className="hero__since">
              <span className="hero__since-line"></span>
              <span className="hero__since-text">Desde 2001 · Santa Maria · Porto Alegre</span>
            </div>
            <Headline
              first="Nós gostamos"
              second={<>de <em>desafios.</em></>}
            />
            <p className="hero__second">
              Por isso, cada caso encontra<br/>o escritório inteiro.
            </p>
          </div>
          <div className="hero__media reveal" data-d="2">
            <div className="hero__seal-panel">
              <image-slot
                id="hero-main"
                src="assets/photos/sede.jpeg"
                placeholder="FOTO INSTITUCIONAL — sede"
                shape="rect"
              ></image-slot>
            </div>
            <div className="hero__media-caption">SEDE · SANTA MARIA / RS</div>
          </div>
        </div>

        <div className="hero__bottom reveal" data-d="3">
          <p className="hero__bottom-body">
            Os casos chegam mais complexos. A integração entre áreas virou
            requisito técnico. O cliente cobra profundidade antes de pressa —
            e por isso, desde 2001, construímos treze especialidades integradas em
            duas sedes do Rio Grande do Sul, com atendimento direto em
            diversos estados do Brasil.
          </p>
          <div className="hero__actions">
            <a href="#areas" className="btn btn--primary">Conhecer as especialidades</a>
            <a href="#contato" className="btn">Agendar diagnóstico</a>
          </div>
        </div>
      </div>

      <div className="hero-strip reveal" data-d="4">
        <div className="hero-strip__cell">
          <image-slot id="hero-strip-1" src="assets/photos/fachada-santa-maria.jpeg" placeholder="FACHADA · Santa Maria" shape="rect"></image-slot>
        </div>
        <div className="hero-strip__cell">
          <image-slot id="hero-strip-2" src="assets/photos/biblioteca.jpg" placeholder="AUDITÓRIO · acervo técnico" shape="rect"></image-slot>
        </div>
        <div className="hero-strip__cell">
          <image-slot id="hero-strip-3" src="assets/photos/sala-reuniao.jpeg" placeholder="SALA DE REUNIÕES" shape="rect"></image-slot>
        </div>
      </div>
    </section>
  );
}

// ===== Manifesto =====
function Manifesto() {
  return (
    <section className="section" id="manifesto" data-screen-label="Escritório">
      <div className="wrap">
        <div className="manifesto">
          <aside className="manifesto__rail reveal">
            <div className="chapter-mark">/ 01 · O Escritório</div>
            <h2 className="manifesto__heading" style={{marginTop: 28}}>
              Construímos<br/><em>desde 2001.</em>
            </h2>
          </aside>
          <div className="manifesto__body reveal" data-d="2">
            <p>
              <em>Vinte e cinco anos atrás</em>, os sócios fundadores decidiram
              que não dava mais para tratar caso complexo com cabeça simples.
              Que a especialização sem integração entregava metade do que o
              cliente precisava. Que o escritório que valia o tempo do cliente
              era o que punha mais de uma área na mesma mesa — antes do
              problema cobrar isso na hora errada.
            </p>
            <p>
              Hoje somos <em>treze especialidades técnicas</em>, onze sócios e cerca
              de quarenta e cinco profissionais entre as duas sedes. Continuamos
              recusando a lógica de balcão. Cada caso entra pela porta de uma
              área e é examinado pelas que vizinham — porque é assim que o
              problema real costuma se apresentar.
            </p>
            <blockquote className="manifesto__pullquote">
              Quando o problema extravasa a área que abriu a conversa, as
              demais já estão na mesma mesa. É a única forma honesta de
              entregar o que prometemos: profundidade antes de pressa.
            </blockquote>
            <p>
              Atendemos clientes em <em>diversos estados do Brasil</em>, de
              forma direta a partir do Rio Grande do Sul ou em parceria com
              escritórios correspondentes nas demais praças. O padrão técnico
              é o mesmo onde quer que o caso esteja.
            </p>
            <p>
              Não prometemos resultado — construímos a posição mais defensável
              dentro do problema trazido, calibrada ao cenário do cliente e
              fundamentada em precedente. É razoável esperar isso de quem
              assina parecer há vinte e cinco anos.
            </p>
            <div style={{marginTop: 40}}>
              <a href="#socios" className="btn btn--ghost">Conheça quem assina o trabalho</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== Numbers =====
function Numbers() {
  return (
    <section className="section section--tight" data-screen-label="Números">
      <div className="wrap">
        <div className="numbers reveal">
          <div className="number">
            <div className="number__index">/ A · Tempo</div>
            <div className="number__value">25<sup>+</sup></div>
            <p className="number__label">anos sem interromper a operação — temporadas inteiras de jurisprudência atravessadas com o mesmo padrão.</p>
            <div className="number__mono">2001 — 2026</div>
          </div>
          <div className="number">
            <div className="number__index">/ B · Alcance</div>
            <div className="number__value"><em>Brasil</em></div>
            <p className="number__label">estados atendidos com o mesmo método técnico — direto do RS ou via correspondentes selecionados.</p>
            <div className="number__mono">RS · SC · PR · SP · demais UFs</div>
          </div>
          <div className="number">
            <div className="number__index">/ C · Equipe</div>
            <div className="number__value">45<sup>+</sup></div>
            <p className="number__label">profissionais distribuídos em onze sócios, treze associados e retaguarda — sem terceirização técnica.</p>
            <div className="number__mono">full-service · treze especialidades</div>
          </div>
          <div className="number">
            <div className="number__index">/ D · Cidades</div>
            <div className="number__value">02</div>
            <p className="number__label">operações próprias no Rio Grande do Sul. Mesma equipe, mesmo método, dois endereços.</p>
            <div className="number__mono">SM · sede / POA · unidade</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== Marquee compacto de nomes (teaser dinâmico) =====
function AreasNameMarquee() {
  // Duplicate names twice for seamless infinite loop on translateX(-50%)
  const names = AREAS.concat(AREAS);
  return (
    <section className="name-marquee" aria-label="Áreas de atuação — role abaixo para explorar">
      <div className="wrap">
        <div className="name-marquee__hint">
          <span className="name-marquee__hint-text">Role para explorar</span>
          <span className="name-marquee__hint-line"></span>
        </div>
      </div>
      <div className="name-marquee__viewport">
        <div className="name-marquee__track">
          {names.map((a, i) => (
            <a
              key={a.slug + "-" + i}
              href={"areas/" + a.slug + ".html"}
              className="name-marquee__item"
              aria-hidden={i >= AREAS.length}
            >
              <span className="name-marquee__name">{a.title}</span>
              <span className="name-marquee__diamond">◆</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== Áreas — Grid fixo clicável (acesso rápido) =====
function AreasHorizontal() {
  return (
    <section className="areas-grid-sec" id="areas" data-screen-label="Áreas">
      <div className="wrap">
        <div className="areas-grid-sec__head reveal">
          <div>
            <div className="chapter-mark">/ 02 · Áreas de Atuação</div>
            <h2 className="serif-h2" style={{marginTop: 24}}>
              Treze especialidades,<br/><em>um padrão.</em>
            </h2>
          </div>
          <p className="areas-grid-sec__sub">
            Cada especialidade opera com profundidade técnica antes da ação. Quando
            um caso atravessa mais de uma área, todas estão na mesma mesa —
            sem reencaminhamento, sem perda de contexto, sem retrabalho
            cobrado do cliente.
          </p>
        </div>
      </div>
      <div className="wrap">
        <div className="areas-grid">
          {AREAS.map(a => (
            <a key={a.slug} href={"areas/" + a.slug + ".html"} className="area-grid-card">
              <div className="area-grid-card__num">/ {a.num}</div>
              <h3 className="area-grid-card__title">
                {a.title}<br/><em>{a.italic}</em>
              </h3>
              <p className="area-grid-card__desc">{a.desc}</p>
              <span className="area-grid-card__cta">Conhecer a área →</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== Locations =====
function Locations() {
  return (
    <section className="section section--tight" data-screen-label="Sedes">
      <div className="wrap" style={{marginBottom: 60}}>
        <div className="sec-head reveal">
          <div>
            <div className="chapter-mark">/ 03 · Onde Estamos</div>
            <h2 className="serif-h2" style={{marginTop: 24}}>
              Duas sedes,<br/><em>uma operação.</em>
            </h2>
          </div>
          <p className="sec-head__sub">
            Atendimento agendado em Santa Maria (sede), Porto Alegre (unidade)
            ou por videoconferência. As duas operações compartilham equipe e
            processo — não são escritórios separados.
          </p>
        </div>
      </div>

      <div className="locations reveal" data-d="2">
        <div className="location">
          <div className="location__img">
            <image-slot
              id="loc-sm"
              src="assets/photos/santa-maria-loc.jpg"
              placeholder="FACHADA — Santa Maria"
              shape="rect"
            ></image-slot>
          </div>
          <div>
            <div className="location__meta">SEDE · SANTA MARIA / RS</div>
            <h3 className="location__name" style={{marginTop: 16}}>
              Santa <em>Maria</em>
            </h3>
            <p className="location__addr" style={{marginTop: 20}}>
              <strong>Av. Osvaldo Cruz, 268</strong><br/>
              N. Sra. das Dores — 97095-470
            </p>
          </div>
          <div className="location__phone">(55) 3025-6100</div>
        </div>

        <div className="location">
          <div className="location__img">
            <image-slot
              id="loc-poa"
              src="assets/photos/poa-aereo.jpg"
              placeholder="FACHADA — Porto Alegre"
              shape="rect"
            ></image-slot>
          </div>
          <div>
            <div className="location__meta">UNIDADE · PORTO ALEGRE / RS</div>
            <h3 className="location__name" style={{marginTop: 16}}>
              Porto <em>Alegre</em>
            </h3>
            <p className="location__addr" style={{marginTop: 20}}>
              <strong>Rua Dezessete de Junho, 423/202</strong><br/>
              Menino Deus
            </p>
          </div>
          <div className="location__phone">(51) 3025-6100</div>
        </div>
      </div>
    </section>
  );
}

// ===== Partners gallery (3 blocos: sócios, associados, estagiários+admin) =====
function Partners() {
  const [open, setOpen] = useState(null);
  const all = ALL_PARTNERS;
  return (
    <section className="section section--tight" id="socios" data-screen-label="Sócios">
      <div className="wrap" style={{marginBottom: 60}}>
        <div className="sec-head reveal">
          <div>
            <div className="chapter-mark">/ 04 · Quem assina o trabalho</div>
            <h2 className="serif-h2" style={{marginTop: 24}}>
              Onze <em>sócios.</em>
            </h2>
          </div>
          <p className="sec-head__sub">
            Quatro fundadores e sete sócios coordenam as treze especialidades
            técnicos. Toda assinatura técnica passa por um deles. Clique em
            um cartão para ver a biografia.
          </p>
        </div>
      </div>

      <div className="partners">
        {all.map((p, i) => (
          <div
            key={p.initials}
            className={"partner-card" + (open === i ? " open" : "")}
            role="button"
            tabIndex={0}
            aria-expanded={open === i}
            onClick={() => setOpen(open === i ? null : i)}
            onKeyDown={(e) => {
              if (e.key === "Enter" || e.key === " ") {
                e.preventDefault();
                setOpen(open === i ? null : i);
              }
            }}
          >
            <div className="partner-card__portrait">
              <span className="partner-card__num">/ {p.num}</span>
              {p.role === "Sócio Fundador" && <span className="partner-card__role-tag">Fundador</span>}
              <image-slot
                id={"p-" + p.initials}
                src={p.photo}
                placeholder={"Retrato · " + p.name}
                shape="rect"
              ></image-slot>
            </div>
            <div className="partner-card__meta">
              <h3 className="partner-card__name">{p.name}</h3>
              <div className="partner-card__nucleo">{p.nucleo}</div>
              <div className="partner-card__oab">{p.oab}</div>
            </div>
            {open === i && (
              <div className="partner-card__bio">
                {p.bio}
                <a
                  href={"equipe/" + p.slug + ".html"}
                  className="partner-card__bio-link"
                  onClick={(e) => e.stopPropagation()}
                >
                  Ver perfil completo →
                </a>
              </div>
            )}
          </div>
        ))}
      </div>

      {/* === Advogados associados === */}
      <div className="wrap" style={{marginTop: 96, marginBottom: 40}}>
        <div className="sec-head reveal">
          <div>
            <div className="chapter-mark">/ 04b · Advogados Associados</div>
            <h2 className="serif-h3" style={{marginTop: 16}}>
              Treze <em>advogados</em> associados.
            </h2>
          </div>
          <p className="sec-head__sub">
            Operação técnica conduzida em conjunto com os sócios — cada
            associado responde por uma especialidade específica.
          </p>
        </div>
      </div>
      <div className="associates">
        {ASSOCIATES.map((a) => (
          <div key={a.initials} className="associate-card">
            <div className="associate-card__portrait">
              <image-slot
                id={"a-" + a.initials}
                src={a.photo}
                placeholder={"Retrato · " + a.name}
                shape="rect"
              ></image-slot>
            </div>
            <div className="associate-card__name">{a.name}</div>
            <div className="associate-card__nucleo">{a.nucleo}</div>
          </div>
        ))}
      </div>

      {/* === Estagiários + Administração === */}
      <div className="wrap" style={{marginTop: 96, marginBottom: 40}}>
        <div className="sec-head reveal">
          <div>
            <div className="chapter-mark">/ 04c · Estagiários e Administração</div>
            <h2 className="serif-h3" style={{marginTop: 16}}>
              <em>Quem</em> sustenta a operação.
            </h2>
          </div>
          <p className="sec-head__sub">
            Equipe de retaguarda — estagiários por especialidade, administração,
            financeiro, operações e arquivo.
          </p>
        </div>
      </div>
      <div className="wrap">
        <div className="staff-grid">
          {STAFF.map((g) => (
            <div key={g.group} className="staff-group">
              <h4 className="staff-group__title">{g.group}</h4>
              <ul className="staff-group__list">
                {g.members.map((m) => (
                  <li key={m.name}>
                    {m.name}
                    {m.role && <span className="staff-group__role"> · {m.role}</span>}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== Analyses TOC =====
function Analyses() {
  return (
    <section className="section section--paper2" id="analises" data-screen-label="Análises">
      <div className="wrap">
        <div className="sec-head reveal" style={{marginBottom: 56}}>
          <div>
            <div className="chapter-mark">/ 05 · Análises Técnicas</div>
            <h2 className="serif-h2" style={{marginTop: 24}}>
              Volume <em>XXIV.</em>
            </h2>
          </div>
          <p className="sec-head__sub">
            Comentários técnicos sobre legislação, jurisprudência e regulamentação,
            assinados pelos sócios. Sem promessa de resultado, sem caso de cliente —
            análise pura.
          </p>
        </div>

        <div className="toc">
          {POSTS.slice()
            .sort((a, b) => (b.iso_date || "").localeCompare(a.iso_date || ""))
            .slice(0, 6)
            .map((p) => (
              <a key={p.slug || p.title} href={"analises/" + p.slug + ".html"} className="toc-row">
                <div className="toc-row__num">{p.num}</div>
                <div className="toc-row__cat">{p.cat}</div>
                <div className="toc-row__title">{p.title}</div>
                <div className="toc-row__author">{p.author}</div>
                <div className="toc-row__date">{p.date}</div>
              </a>
            ))}
        </div>

        <div style={{marginTop: 56, textAlign: "right"}}>
          <a href="blog.html" className="btn btn--ghost">Arquivo completo de análises</a>
        </div>
      </div>
    </section>
  );
}

// ===== CTA =====
function Cta() {
  return (
    <section className="cta-final" id="contato" data-screen-label="Agendar">
      <div className="reveal">
        <span className="cta-final__line"></span>
        <h2 className="cta-final__title">
          Estruture<br/>seu <em>caso</em><br/>com o MMT.
        </h2>
        <p className="cta-final__sub">
          A pergunta não é se vale a pena conversar — é qual formato funciona
          melhor agora. Diagnóstico inicial em trinta minutos para mapear o
          problema, ou reunião estratégica com um dos sócios responsáveis pelo
          especialidade do seu caso. Atendimento em Santa Maria, Porto Alegre ou por
          videoconferência. Sem ligações de retorno automáticas.
        </p>
        <div className="cta-final__actions">
          <a href="mailto:contato@mmtadvogados.com.br?subject=Diagnóstico%20inicial" className="btn btn--primary">Diagnóstico em 30 min</a>
          <a href="mailto:contato@mmtadvogados.com.br?subject=Reunião%20estratégica" className="btn">Reunião com sócio</a>
        </div>
      </div>
    </section>
  );
}

// ===== Footer =====
function Footer() {
  return (
    <footer className="footer">
      <div className="footer__grid">
        <div className="footer__brand-block">
          <img src="assets/logos/origens-6-white-on-black.png" alt="MMT" />
          <p className="footer__brand-tagline">
            Martini, Medeiros &amp; Tonetto Advogados Associados — Sociedade
            de Advogados.
          </p>
        </div>
        <div>
          <div className="footer__col-title">Áreas</div>
          <ul className="footer__list">
            {AREAS.map(a => <li key={a.slug}><a href={"#area-" + a.slug}>{a.title}</a></li>)}
          </ul>
        </div>
        <div>
          <div className="footer__col-title">Escritório</div>
          <ul className="footer__list">
            <li><a href="#manifesto">Quem somos</a></li>
            <li><a href="#socios">Sócios</a></li>
            <li><a href="#analises">Análises</a></li>
            <li><a href="#contato">Contato</a></li>
            <li><a href="#privacidade">Política de Privacidade</a></li>
          </ul>
        </div>
        <div className="footer__contact">
          <div className="footer__contact-block">
            <strong>Sede — Santa Maria</strong>
            Av. Osvaldo Cruz, 268<br/>
            N. Sra. das Dores · 97095-470<br/>
            (55) 3025-6100
          </div>
          <div className="footer__contact-block">
            <strong>Unidade — Porto Alegre</strong>
            Rua Dezessete de Junho, 423/202<br/>
            Menino Deus<br/>
            (51) 3025-6100
          </div>
          <div className="footer__contact-block">
            <strong>E-mail</strong>
            contato@mmtadvogados.com.br
          </div>
        </div>
      </div>
      <div className="footer__legal">
        <div>
          © 2026 Martini, Medeiros &amp; Tonetto Advogados Associados S/S<br/>
          CNPJ 07.667.294/0001-59 · OAB/RS 2.606
        </div>
        <div className="footer__mantra">Nós gostamos de desafios.</div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Nav, ChapterRail, Hero, Manifesto, Numbers, AreasHorizontal, AreasNameMarquee,
  Locations, Partners, Analyses, Cta, Footer, ModeToggle, Topbar
});
