/* global React, ReactDOM, AREAS, POSTS, ALL_PARTNERS, ModeToggle */
const { useState, useEffect } = React;

// Nav idêntica ao home (estilo V2: logo + links centrais + CTA direita).
// Diferença mínima: âncoras apontam para index.html#... porque blog está na raiz.
function SubpageNav({ 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: "index.html#top",       label: "Início" },
    { href: "index.html#manifesto", label: "Quem Somos" },
    { href: "index.html#areas",     label: "Áreas de Atuação" },
    { href: "index.html#socios",    label: "Equipe" },
    { href: "blog.html",            label: "Publicações" },
    { href: "#contato",             label: "Contato" },
  ];
  return (
    <React.Fragment>
      <nav className={"nav nav--v2" + (scrolled ? " scrolled" : "")}>
        <a href="index.html" 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 => <a key={l.href} href={l.href} className="nav__link">{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">
          <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">Entre em contato →</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>
  );
}

function BlogHero({ count }) {
  return (
    <section className="subpage-hero blog-hero">
      <div className="wrap">
        <nav className="breadcrumb" aria-label="Breadcrumb">
          <a href="index.html">MMT</a>
          <span>/</span>
          <span className="breadcrumb__current">Análises Técnicas</span>
        </nav>
        <div className="blog-hero__inner">
          <div className="chapter-mark">/ Arquivo de Análises</div>
          <h1 className="blog-hero__title">
            Análises <em>técnicas.</em>
          </h1>
          <p className="blog-hero__lead">
            Comentários 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 className="blog-hero__count">
            {count} {count === 1 ? "análise arquivada" : "análises arquivadas"}
          </div>
        </div>
      </div>
    </section>
  );
}

function BlogFilters({ areas, active, setActive }) {
  return (
    <div className="blog-filters-wrap">
      <div className="wrap">
        <div className="blog-filters" role="tablist" aria-label="Filtrar por área">
          <button
            type="button"
            role="tab"
            aria-selected={active === "all"}
            className={"blog-filter" + (active === "all" ? " active" : "")}
            onClick={() => setActive("all")}
          >
            Todas
          </button>
          {areas.map(a => (
            <button
              key={a.slug}
              type="button"
              role="tab"
              aria-selected={active === a.slug}
              className={"blog-filter" + (active === a.slug ? " active" : "")}
              onClick={() => setActive(a.slug)}
            >
              {a.title}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

function BlogGrid({ posts }) {
  if (!posts.length) {
    return (
      <div className="wrap">
        <div className="blog-empty">
          Nenhuma análise publicada nesta área ainda.
        </div>
      </div>
    );
  }
  return (
    <div className="wrap">
      <div className="blog-grid">
        {posts.map(p => (
          <a key={p.slug} href={"analises/" + p.slug + ".html"} className="blog-card">
            <div className="blog-card__head">
              <div className="blog-card__num">{p.num}</div>
              <div className="blog-card__cat">{p.cat}</div>
            </div>
            <h2 className="blog-card__title">{p.title}</h2>
            {p.subtitle && <p className="blog-card__subtitle">{p.subtitle}</p>}
            <div className="blog-card__meta">
              <span className="blog-card__author">{p.author}</span>
              <span className="blog-card__sep">·</span>
              <span className="blog-card__date">{p.date}</span>
              {p.read_time && (
                <React.Fragment>
                  <span className="blog-card__sep">·</span>
                  <span className="blog-card__read">{p.read_time}</span>
                </React.Fragment>
              )}
            </div>
            <span className="blog-card__cta">Ler análise →</span>
          </a>
        ))}
      </div>
    </div>
  );
}

function BlogCta() {
  return (
    <section className="cta-final" id="contato">
      <div>
        <span className="cta-final__line"></span>
        <h2 className="cta-final__title">
          Quer conversar<br/>sobre <em>seu caso?</em>
        </h2>
        <p className="cta-final__sub">
          Diagnóstico inicial em trinta minutos ou reunião estratégica com o
          sócio responsável pela especialidade. Atendimento em Santa Maria, Porto
          Alegre ou por videoconferência.
        </p>
        <div className="cta-final__actions">
          <a href="mailto:contato@mmtadvogados.com.br?subject=Diagn%C3%B3stico" className="btn btn--primary">Diagnóstico em 30 min</a>
          <a href="mailto:contato@mmtadvogados.com.br?subject=Reuni%C3%A3o" className="btn">Reunião com sócio</a>
        </div>
      </div>
    </section>
  );
}

function SubpageFooter() {
  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={"areas/" + a.slug + ".html"}>{a.title}</a></li>)}
          </ul>
        </div>
        <div>
          <div className="footer__col-title">Escritório</div>
          <ul className="footer__list">
            <li><a href="index.html#manifesto">Quem somos</a></li>
            <li><a href="index.html#socios">Sócios</a></li>
            <li><a href="blog.html">Análises</a></li>
            <li><a href="#contato">Contato</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>
  );
}

function BlogPage() {
  // Lê filtro inicial do query string (?area=slug)
  const initial = (() => {
    try {
      const params = new URLSearchParams(window.location.search);
      const a = params.get("area");
      if (a && AREAS.some(x => x.slug === a)) return a;
    } catch (e) {}
    return "all";
  })();
  const [active, setActive] = useState(initial);
  const [mode, setModeState] = useState(() =>
    (typeof localStorage !== "undefined" && localStorage.getItem("mmt-mode")) || "moderno"
  );
  const setMode = (m) => {
    setModeState(m);
    try { localStorage.setItem("mmt-mode", m); } catch (e) {}
  };
  useEffect(() => { document.body.dataset.mode = mode; }, [mode]);
  useEffect(() => { document.title = "Análises Técnicas — MMT Advogados"; }, []);

  // Sincroniza filtro com query string (sem recarregar)
  useEffect(() => {
    try {
      const url = new URL(window.location.href);
      if (active === "all") url.searchParams.delete("area");
      else url.searchParams.set("area", active);
      window.history.replaceState({}, "", url.toString());
    } catch (e) {}
  }, [active]);

  const sorted = (typeof POSTS !== "undefined" ? POSTS : [])
    .slice()
    .sort((a, b) => (b.iso_date || "").localeCompare(a.iso_date || ""));
  const filtered = active === "all"
    ? sorted
    : sorted.filter(p => p.area_slug === active);

  return (
    <React.Fragment>
      <SubpageNav mode={mode} setMode={setMode} />
      <main>
        <BlogHero count={sorted.length} />
        <BlogFilters areas={AREAS} active={active} setActive={setActive} />
        <section className="section section--tight">
          <BlogGrid posts={filtered} />
        </section>
        <BlogCta />
      </main>
      <SubpageFooter />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<BlogPage />);