/* eslint-disable */
// Godoy Engenharia — pages part 3: Informações (índice + página), FAQ, Regiões.

const { useState: useStateP3 } = React;

/* Helper: render body blocks ({ lead } | { h2 } | { p } | { ul: [] }) */
function GEBodyBlocks({ blocks }) {
  if (!blocks) return null;
  return blocks.map((b, i) => {
    if (b.lead) return <p key={i} style={{ fontSize: 20, color: "var(--ge-ink)", lineHeight: 1.55 }}>{b.lead}</p>;
    if (b.h2) return <h2 key={i}>{b.h2}</h2>;
    if (b.h3) return <h3 key={i}>{b.h3}</h3>;
    if (b.p) return <p key={i}>{b.p}</p>;
    if (b.ul) return (
      <ul key={i} style={{ display: "flex", flexDirection: "column", gap: 8, margin: "16px 0" }}>
        {b.ul.map((n) => (
          <li key={n} style={{ display: "flex", gap: 12, fontSize: 15, lineHeight: 1.5 }}>
            <span style={{ color: "var(--ge-green)", flexShrink: 0, marginTop: 4 }}><GEIcon name="check" size={16} stroke={2.4} /></span>
            {n}
          </li>
        ))}
      </ul>
    );
    return null;
  });
}

/* Helper: small related/link cards */
function GELinkCards({ items, go }) {
  const list = (items || []).filter((r) => r && (r.route || r.slug));
  if (!list.length) return null;
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 10 }}>
      {list.map((r) => (
        <button key={r.route || r.slug} onClick={() => go(r.route || ("info/" + r.slug))}
          style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10, padding: "13px 16px", background: "var(--ge-paper-2)", border: "1px solid var(--ge-line)", borderRadius: 4, cursor: "pointer", fontFamily: "var(--ge-display)", fontWeight: 600, fontSize: 14, color: "var(--ge-ink)", textAlign: "left" }}>
          {r.label} <GEIcon name="arrowUpRight" size={16} />
        </button>
      ))}
    </div>
  );
}

/* ─────────────────────────────────────────────
   INFORMAÇÕES — índice / catálogo
   ───────────────────────────────────────────── */

function GEInformacoes({ go, data }) {
  const groups = data.infoIndex || [];
  return (
    <main>
      <section className="ge-pagehero ge-pagehero--cover">
        <div className="ge-pagehero__cover" aria-hidden="true">
          <img src="img/hero/godoy-engenharia-instalacao-eletrica-industrial-completa.webp" alt="" loading="eager" decoding="async" />
          <div className="ge-pagehero__cover-grade"></div>
        </div>
        <div className="ge-hero__grid-bg" />
        <div className="ge-container">
          <div className="ge-pagehero__crumb">
            <button onClick={() => go("home")} style={{ background: "none", border: "none", color: "inherit", font: "inherit", cursor: "pointer", padding: 0, letterSpacing: "inherit", textTransform: "inherit" }}>Início</button>
            <span>/</span>
            <span style={{ color: "#fff" }}>Informações</span>
          </div>
          <div className="ge-pagehero__inner">
            <div>
              <div className="ge-mono" style={{ color: "var(--ge-green-bright)", marginBottom: 16 }}>INFORMAÇÕES TÉCNICAS</div>
              <h1>Informações técnicas de engenharia elétrica.</h1>
            </div>
            <p className="ge-pagehero__sub">
              Conteúdos para entender SPDA, laudos, NR-10, termografia, cabine primária, entrada de energia, projetos, QGBT, manutenção e engenharia elétrica para empresas.
            </p>
          </div>
        </div>
      </section>

      <section className="ge-section ge-section--paper">
        <div className="ge-container">
          <div style={{ display: "flex", flexDirection: "column", gap: 48 }}>
            {groups.map((g, gi) => (
              <div key={g.group}>
                <div style={{ display: "flex", alignItems: "baseline", gap: 12, paddingBottom: 14, marginBottom: 20, borderBottom: "1px solid var(--ge-line)" }}>
                  <span className="ge-mono" style={{ color: "var(--ge-green)", fontSize: 11 }}>{String(gi + 1).padStart(2, "0")}</span>
                  <h2 style={{ fontSize: 22, letterSpacing: "-0.02em" }}>{g.group}</h2>
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 10 }}>
                  {g.items.map((it) => it.built ? (
                    <button key={it.slug} onClick={() => go(it.route || ("info/" + it.slug))}
                      style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10, padding: "14px 16px", background: "var(--ge-paper-2)", border: "1px solid var(--ge-line)", borderRadius: 4, cursor: "pointer", textAlign: "left" }}>
                      <span style={{ fontFamily: "var(--ge-display)", fontWeight: 600, fontSize: 14, color: "var(--ge-ink)" }}>{it.label}</span>
                      <GEIcon name="arrowUpRight" size={16} />
                    </button>
                  ) : (
                    <div key={it.slug}
                      style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10, padding: "14px 16px", background: "transparent", border: "1px dashed var(--ge-line)", borderRadius: 4 }}>
                      <span style={{ fontFamily: "var(--ge-display)", fontWeight: 500, fontSize: 14, color: "var(--ge-muted)" }}>{it.label}</span>
                      <span className="ge-mono" style={{ fontSize: 9, color: "var(--ge-muted)", letterSpacing: "0.1em", border: "1px solid var(--ge-line)", padding: "2px 6px" }}>EM BREVE</span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 56, padding: 32, background: "var(--ge-ink)", color: "#fff", borderRadius: 4, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
            <div>
              <div className="ge-mono" style={{ color: "var(--ge-green-bright)", marginBottom: 8 }}>PRECISA DE UMA AVALIAÇÃO?</div>
              <div style={{ fontFamily: "var(--ge-display)", fontSize: 22, fontWeight: 600 }}>Fale com a engenharia sobre sua demanda.</div>
            </div>
            <button className="ge-btn ge-btn--primary" onClick={() => go("contato#formulario")}>Enviar demanda para orçamento <GEIcon name="arrow" size={16} /></button>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ─────────────────────────────────────────────
   INFORMAÇÕES — página de conteúdo
   ───────────────────────────────────────────── */

function GEInfoPage({ slug, go, data }) {
  const ip = (data.infoPages && data.infoPages[slug]) || null;
  const waLink = `https://wa.me/${data.brand.phoneRaw}?text=${encodeURIComponent("Olá, gostaria de falar com a engenharia da Godoy.")}`;

  if (!ip) {
    return (
      <main>
        <section className="ge-section" style={{ minHeight: "56vh", display: "flex", alignItems: "center" }}>
          <div className="ge-container" style={{ textAlign: "center", maxWidth: 640, marginInline: "auto" }}>
            <div className="ge-eyebrow" style={{ justifyContent: "center" }}>Informações</div>
            <h1 style={{ marginTop: 12 }}>Conteúdo técnico em produção</h1>
            <p style={{ color: "var(--ge-muted)", marginTop: 14, fontSize: 17 }}>Este conteúdo está sendo preparado pela equipe de engenharia. Enquanto isso, veja os temas disponíveis ou fale com a engenharia.</p>
            <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap", marginTop: 24 }}>
              <button className="ge-btn ge-btn--primary" onClick={() => go("informacoes")}>Ver Informações</button>
              <button className="ge-btn ge-btn--ghost" onClick={() => go("contato")}>Falar com engenharia</button>
            </div>
          </div>
        </section>
      </main>
    );
  }

  return (
    <main>
      <section className="ge-pagehero ge-pagehero--cover" style={{ paddingBottom: 56 }}>
        <div className="ge-pagehero__cover" aria-hidden="true">
          <img src="img/hero/godoy-engenharia-instalacao-eletrica-industrial-completa.webp" alt="" loading="eager" decoding="async" />
          <div className="ge-pagehero__cover-grade"></div>
        </div>
        <div className="ge-hero__grid-bg" />
        <div className="ge-container" style={{ maxWidth: 880 }}>
          <div className="ge-pagehero__crumb">
            <button onClick={() => go("home")} style={{ background: "none", border: "none", color: "inherit", font: "inherit", cursor: "pointer", padding: 0, letterSpacing: "inherit", textTransform: "inherit" }}>Início</button>
            <span>/</span>
            <button onClick={() => go("informacoes")} style={{ background: "none", border: "none", color: "inherit", font: "inherit", cursor: "pointer", padding: 0, letterSpacing: "inherit", textTransform: "inherit" }}>Informações</button>
            <span>/</span>
            <span style={{ color: "#fff" }}>{ip.eyebrow}</span>
          </div>
          <div className="ge-mono" style={{ color: "var(--ge-green-bright)", marginBottom: 16 }}>{ip.eyebrow}</div>
          <h1 style={{ maxWidth: 820, fontSize: "clamp(30px, 3.4vw, 48px)" }}>{ip.h1}</h1>
        </div>
      </section>

      <section className="ge-section ge-section--paper" style={{ paddingTop: 64 }}>
        <div className="ge-container">
          <div className="ge-info-figure" style={{ maxWidth: 880, margin: "0 auto 48px" }}>
            <GEPlaceholder label={ip.eyebrow} img={ip.photo} imgAlt={ip.imgAlt} imgTitle={ip.h1} eager />
          </div>

          <article className="ge-post">
            <GEBodyBlocks blocks={ip.body} />

            {ip.landing &&
              (() => {
                const isInstitucional = ip.landing.route === "quem-somos" || ip.landing.route === "empresa";
                return (
              <div style={{ margin: "32px 0", padding: "16px 18px", background: "var(--ge-paper-2)", borderLeft: "2px solid var(--ge-green)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
                <span style={{ fontSize: 15, color: "var(--ge-ink)" }}>{isInstitucional ? "Página relacionada: " : "Página de serviço relacionada: "}<strong>{ip.landing.label}</strong></span>
                <button className="ge-btn ge-btn--ghost" onClick={() => go(isInstitucional ? "quem-somos" : ip.landing.route)}>{isInstitucional ? "Conhecer a empresa" : "Ver serviço"} <GEIcon name="arrow" size={15} /></button>
              </div>
                );
              })()
            }

            {ip.related && ip.related.length > 0 &&
              <div style={{ marginTop: 8 }}>
                <h3>Serviços relacionados</h3>
                <GELinkCards items={ip.related} go={go} />
              </div>
            }

            {ip.faq && ip.faq.length > 0 &&
              <div style={{ marginTop: 40 }}>
                <h3>Perguntas frequentes</h3>
                <div style={{ marginTop: 8 }}>
                  {ip.faq.map((f) =>
                    <GEAccordion key={f.q} label={f.q}>
                      <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--ge-muted)" }}>{f.a}</p>
                    </GEAccordion>
                  )}
                </div>
              </div>
            }

            <div style={{ marginTop: 48, padding: 32, background: "var(--ge-ink)", color: "#fff", borderRadius: 4, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
              <div>
                <div className="ge-mono" style={{ color: "var(--ge-green-bright)", marginBottom: 8 }}>FALE COM A ENGENHARIA</div>
                <div style={{ fontFamily: "var(--ge-display)", fontSize: 21, fontWeight: 600, maxWidth: 460 }}>{ip.ctaTitle}</div>
                {ip.ctaText && <p style={{ fontSize: 14, color: "rgba(255,255,255,0.6)", marginTop: 10, maxWidth: 480, lineHeight: 1.5 }}>{ip.ctaText}</p>}
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                <button className="ge-btn ge-btn--primary" onClick={() => go("contato#formulario")}>{ip.ctaLabel || "Enviar demanda para orçamento"} <GEIcon name="arrow" size={16} /></button>
                <a className="ge-btn ge-btn--ghost-light" href={waLink} target="_blank" rel="noopener" data-ge-cta="whatsapp" data-ge-loc={"info-" + slug} style={{ justifyContent: "center", borderColor: "rgba(255,255,255,0.18)", color: "#fff" }}>
                  <GEIcon name="whatsapp" size={16} /> WhatsApp
                </a>
              </div>
            </div>
          </article>
        </div>
      </section>
    </main>
  );
}

/* ─────────────────────────────────────────────
   FAQ GERAL
   ───────────────────────────────────────────── */

function GEFAQ({ go, data }) {
  const groups = data.faqGeneral || [];
  return (
    <main>
      <section className="ge-pagehero ge-pagehero--cover">
        <div className="ge-pagehero__cover" aria-hidden="true">
          <img src="img/hero/godoy-engenharia-laudo-eletrico.webp" alt="" loading="eager" decoding="async" />
          <div className="ge-pagehero__cover-grade"></div>
        </div>
        <div className="ge-hero__grid-bg" />
        <div className="ge-container">
          <div className="ge-pagehero__crumb">
            <button onClick={() => go("home")} style={{ background: "none", border: "none", color: "inherit", font: "inherit", cursor: "pointer", padding: 0, letterSpacing: "inherit", textTransform: "inherit" }}>Início</button>
            <span>/</span>
            <span style={{ color: "#fff" }}>FAQ</span>
          </div>
          <div className="ge-pagehero__inner">
            <div>
              <div className="ge-mono" style={{ color: "var(--ge-green-bright)", marginBottom: 16 }}>PERGUNTAS FREQUENTES</div>
              <h1>Perguntas frequentes sobre engenharia elétrica para empresas.</h1>
            </div>
            <p className="ge-pagehero__sub">
              Dúvidas comuns sobre projeto, laudo, SPDA, cabine primária, entrada de energia, instalação industrial e comercial, condomínios, ART e NR-10.
            </p>
          </div>
        </div>
      </section>

      <section className="ge-section ge-section--paper">
        <div className="ge-container" style={{ maxWidth: 880 }}>
          {groups.map((g, gi) => (
            <div key={g.group} style={{ marginBottom: 40 }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginBottom: 12 }}>
                <span className="ge-mono" style={{ color: "var(--ge-green)", fontSize: 11 }}>{String(gi + 1).padStart(2, "0")}</span>
                <h2 style={{ fontSize: 22, letterSpacing: "-0.02em" }}>{g.group}</h2>
              </div>
              {g.items.map((f) =>
                <GEAccordion key={f.q} label={f.q}>
                  <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--ge-muted)" }}>{f.a}</p>
                </GEAccordion>
              )}
            </div>
          ))}

          <div style={{ marginTop: 24, padding: 32, background: "var(--ge-ink)", color: "#fff", borderRadius: 4, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
            <div>
              <div className="ge-mono" style={{ color: "var(--ge-green-bright)", marginBottom: 8 }}>NÃO ENCONTROU SUA DÚVIDA?</div>
              <div style={{ fontFamily: "var(--ge-display)", fontSize: 22, fontWeight: 600 }}>Fale direto com a engenharia.</div>
            </div>
            <a className="ge-btn ge-btn--primary" href={`https://wa.me/${data.brand.phoneRaw}`} target="_blank" rel="noopener" data-ge-cta="whatsapp" data-ge-loc="faq">
              <GEIcon name="whatsapp" size={18} /> Falar pelo WhatsApp
            </a>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ─────────────────────────────────────────────
   REGIÕES ATENDIDAS — página mãe
   ───────────────────────────────────────────── */

function GERegioes({ go, data }) {
  const r = data.regioes || {};
  return (
    <main>
      <section className="ge-pagehero ge-pagehero--cover">
        <div className="ge-pagehero__cover" aria-hidden="true">
          <img src="img/obra-logistica.webp" alt="" loading="eager" decoding="async" />
          <div className="ge-pagehero__cover-grade"></div>
        </div>
        <div className="ge-hero__grid-bg" />
        <div className="ge-container">
          <div className="ge-pagehero__crumb">
            <button onClick={() => go("home")} style={{ background: "none", border: "none", color: "inherit", font: "inherit", cursor: "pointer", padding: 0, letterSpacing: "inherit", textTransform: "inherit" }}>Início</button>
            <span>/</span>
            <span style={{ color: "#fff" }}>Regiões atendidas</span>
          </div>
          <div className="ge-pagehero__inner">
            <div>
              <div className="ge-mono" style={{ color: "var(--ge-green-bright)", marginBottom: 16 }}>REGIÕES ATENDIDAS</div>
              <h1>Engenharia elétrica em todo o estado de São Paulo.</h1>
            </div>
            <p className="ge-pagehero__sub">{r.intro}</p>
          </div>
        </div>
      </section>

      <section className="ge-section ge-section--paper">
        <div className="ge-container">
          <div className="ge-eyebrow">Polos atendidos</div>
          <h2 style={{ marginTop: 16, marginBottom: 24 }}>Principais regiões e polos.</h2>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 48 }}>
            {(r.polos || []).map((p) =>
              <span key={p} className="ge-mono" style={{ padding: "8px 13px", background: "var(--ge-paper-2)", border: "1px solid var(--ge-line)", fontSize: 11, letterSpacing: "0.04em" }}>{p}</span>
            )}
          </div>

          <div className="ge-eyebrow">Páginas regionais</div>
          <h2 style={{ marginTop: 16, marginBottom: 24 }}>Regiões estratégicas.</h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))", gap: 10, marginBottom: 48 }}>
            {(r.estrategicas || []).map((c) =>
              <button key={c.slug} onClick={() => go("regiao/" + c.slug)}
                style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10, padding: "14px 16px", background: "var(--ge-paper-2)", border: "1px solid var(--ge-line)", borderRadius: 4, cursor: "pointer", textAlign: "left" }}>
                <span style={{ fontFamily: "var(--ge-display)", fontWeight: 600, fontSize: 14, color: "var(--ge-ink)" }}>{c.label}</span>
                <GEIcon name="arrowUpRight" size={16} />
              </button>
            )}
          </div>

          <div className="ge-eyebrow">Cobertura completa</div>
          <h2 style={{ marginTop: 16, marginBottom: 8 }}>Todos os municípios do estado de São Paulo.</h2>
          <p style={{ fontSize: 15, color: "var(--ge-muted)", maxWidth: 720, marginBottom: 24, lineHeight: 1.6 }}>
            A Godoy Engenharia atende demandas elétricas em todo o estado de São Paulo. Veja abaixo a lista completa dos {(r.municipios || []).length} municípios paulistas — projeto, laudo, SPDA, cabine primária, entrada de energia e instalações conforme o escopo de cada obra.
          </p>
          <div className="ge-municipios" aria-label="Municípios atendidos no estado de São Paulo">
            {(r.municipios || []).map((c) =>
              <span key={c} className="ge-municipios__item">{c}</span>
            )}
          </div>
          <p style={{ fontSize: 14, color: "var(--ge-muted)", marginTop: 20 }}>Atendimento em todo o estado de São Paulo, conforme o escopo do projeto.</p>

          <div style={{ marginTop: 48, padding: 32, background: "var(--ge-ink)", color: "#fff", borderRadius: 4, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
            <div>
              <div className="ge-mono" style={{ color: "var(--ge-green-bright)", marginBottom: 8 }}>SUA REGIÃO ESTÁ NA LISTA?</div>
              <div style={{ fontFamily: "var(--ge-display)", fontSize: 22, fontWeight: 600 }}>Fale com a engenharia sobre sua obra.</div>
            </div>
            <button className="ge-btn ge-btn--primary" onClick={() => go("contato#formulario")}>Enviar demanda para orçamento <GEIcon name="arrow" size={16} /></button>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ─────────────────────────────────────────────
   REGIÃO — página de cidade (genérica)
   ───────────────────────────────────────────── */

function GERegiaoPage({ slug, go, data }) {
  const r = data.regioes || {};
  const rp = (data.regioesPages || {})[slug] || null;
  const city = (r.estrategicas || []).find((c) => c.slug === slug);
  const label = (rp && rp.label) || (city ? city.label : "São Paulo e região");
  const services = data.services || [];
  const waLink = `https://wa.me/${data.brand.phoneRaw}?text=${encodeURIComponent("Olá, preciso de engenharia elétrica em " + label + ".")}`;

  return (
    <main>
      <section className="ge-pagehero ge-pagehero--cover">
        <div className="ge-pagehero__cover" aria-hidden="true">
          <img src="img/obra-logistica.webp" alt="" loading="eager" decoding="async" />
          <div className="ge-pagehero__cover-grade"></div>
        </div>
        <div className="ge-hero__grid-bg" />
        <div className="ge-container">
          <div className="ge-pagehero__crumb">
            <button onClick={() => go("home")} style={{ background: "none", border: "none", color: "inherit", font: "inherit", cursor: "pointer", padding: 0, letterSpacing: "inherit", textTransform: "inherit" }}>Início</button>
            <span>/</span>
            <button onClick={() => go("regioes-atendidas")} style={{ background: "none", border: "none", color: "inherit", font: "inherit", cursor: "pointer", padding: 0, letterSpacing: "inherit", textTransform: "inherit" }}>Regiões atendidas</button>
            <span>/</span>
            <span style={{ color: "#fff" }}>{label}</span>
          </div>
          <div className="ge-pagehero__inner">
            <div>
              <div className="ge-mono" style={{ color: "var(--ge-green-bright)", marginBottom: 16 }}>REGIÃO ATENDIDA</div>
              <h1>Engenharia elétrica em {label}</h1>
            </div>
            <p className="ge-pagehero__sub">
              {(rp && rp.sub) || ("Projetos, laudos, SPDA, cabine primária, entrada de energia e instalações elétricas para empresas, indústrias, comércios e condomínios em " + label + ".")}
            </p>
          </div>
          <div className="ge-hero__ctas" style={{ marginTop: 32 }}>
            <button className="ge-btn ge-btn--primary" onClick={() => go("contato#formulario")}>Enviar demanda para orçamento <GEIcon name="arrow" size={16} /></button>
            <a className="ge-btn ge-btn--ghost-light" href={waLink} target="_blank" rel="noopener" data-ge-cta="whatsapp" data-ge-loc={"regiao-" + slug}>
              <GEIcon name="whatsapp" size={16} /> WhatsApp
            </a>
          </div>
        </div>
      </section>

      <section className="ge-section ge-section--paper">
        <div className="ge-container" style={{ maxWidth: 880 }}>
          <p style={{ fontSize: 18, lineHeight: 1.6, marginBottom: 28 }}>
            {(rp && rp.intro) || ("A Godoy Engenharia atende empresas, indústrias, condomínios e comércios em " + label + ", com foco em reduzir risco técnico, organizar documentação, apoiar expansões e manter a operação funcionando com segurança.")}
          </p>
          {rp && rp.context &&
          <p style={{ fontSize: 16, lineHeight: 1.65, marginBottom: 28, color: "var(--ge-muted)" }}>{rp.context}</p>
          }
          {rp && Array.isArray(rp.segs) && rp.segs.length > 0 &&
          <div style={{ marginBottom: 36 }}>
            <div className="ge-eyebrow">Perfis atendidos em {label}</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 14 }}>
              {rp.segs.map((s) =>
              <span key={s} style={{ fontSize: 13, color: "var(--ge-ink)", fontFamily: "var(--ge-display)", fontWeight: 500, padding: "6px 12px", background: "var(--ge-paper-2)", border: "1px solid var(--ge-line)", borderRadius: 999 }}>{s}</span>
              )}
            </div>
          </div>
          }
          <h2>Serviços de engenharia elétrica em {label}</h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))", gap: 10, marginTop: 16 }}>
            {services.map((s) =>
              <button key={s.slug} onClick={() => go("servico/" + s.slug)}
                style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10, padding: "14px 16px", background: "var(--ge-paper-2)", border: "1px solid var(--ge-line)", borderRadius: 4, cursor: "pointer", textAlign: "left" }}>
                <span style={{ fontFamily: "var(--ge-display)", fontWeight: 600, fontSize: 14, color: "var(--ge-ink)" }}>{s.title}</span>
                <GEIcon name="arrowUpRight" size={16} />
              </button>
            )}
          </div>

          <div style={{ marginTop: 40, display: "flex", gap: 12, flexWrap: "wrap" }}>
            <button className="ge-btn ge-btn--primary" onClick={() => go("contato")}>Solicitar avaliação técnica <GEIcon name="arrow" size={16} /></button>
            <button className="ge-btn ge-btn--ghost" onClick={() => go("regioes-atendidas")}>Ver todas as regiões</button>
          </div>

          {rp && Array.isArray(rp.faq) && rp.faq.length > 0 &&
          <div style={{ marginTop: 56 }}>
            <div className="ge-eyebrow">Dúvidas frequentes</div>
            <h2 style={{ marginTop: 14, marginBottom: 8 }}>Engenharia elétrica em {label}</h2>
            <div>
              {rp.faq.map((f, i) =>
              <div key={i} style={{ borderTop: "1px solid var(--ge-line)", padding: "18px 0" }}>
                <div style={{ fontFamily: "var(--ge-display)", fontWeight: 600, fontSize: 17, color: "var(--ge-ink)", marginBottom: 8 }}>{f.q}</div>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--ge-muted)", margin: 0 }}>{f.a}</p>
              </div>
              )}
            </div>
          </div>
          }
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { GEBodyBlocks, GELinkCards, GEInformacoes, GEInfoPage, GEFAQ, GERegioes, GERegiaoPage });