/* eslint-disable */
// Godoy Engenharia — pages part 2 (Quem somos, Segmentos, Obras, Blog, Post, Contato)

/* ─────────────────────────────────────────────
   QUEM SOMOS
   ───────────────────────────────────────────── */

function GEQuemSomos({ go, data }) {
  return (
    <main>
      <section className="ge-pagehero ge-pagehero--cover">
        <div className="ge-pagehero__cover" aria-hidden="true">
          <img src="img/equipe-2.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" }}>Empresa</span>
          </div>
          <div className="ge-pagehero__inner">
            <div>
              <div className="ge-mono" style={{ color: "var(--ge-green-bright)", marginBottom: 16 }}>EMPRESA · CREA-SP</div>
              <h1>Engenharia que entende obra, custo e execução.</h1>
            </div>
            <p className="ge-pagehero__sub">Mais de 22 anos na área elétrica, equipe própria, engenheiro eletricista responsável e responsabilidade técnica formal em todo projeto e obra.</p>
          </div>
        </div>
      </section>

      <section className="ge-section ge-section--paper">
        <div className="ge-container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }}>
            <div style={{ position: "sticky", top: 100 }}>
              <div className="ge-eyebrow">Quem somos</div>
              <h2 style={{ marginTop: 16, fontSize: 36 }}>mais de 22 anos na área elétrica empresarial.</h2>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginTop: 28 }}>
                {[["22", "anos de experiência"], ["Equipe", "própria e qualificada"], ["ART", "conforme escopo"]].map(([n, l]) =>
                <div key={l} style={{ paddingTop: 14, borderTop: "1px solid var(--ge-line)" }}>
                    <div style={{ fontFamily: "var(--ge-display)", fontSize: 26, fontWeight: 700, color: "var(--ge-green)", letterSpacing: "-0.02em" }}>{n}</div>
                    <div style={{ fontSize: 12, color: "var(--ge-muted)", marginTop: 4, lineHeight: 1.3 }}>{l}</div>
                  </div>
                )}
              </div>
            </div>
            <div>
              <p style={{ fontSize: 18, lineHeight: 1.6, marginBottom: 20 }}>
                A Godoy Engenharia atua com visão completa da demanda elétrica: projeto, orçamento, materiais, fornecedores, execução, laudo e documentação técnica. Essa experiência permite planejar melhor a obra, reduzir retrabalho, especificar materiais corretos e entregar soluções com responsabilidade técnica.
              </p>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--ge-muted)", marginBottom: 20 }}>
                A empresa conta com equipe própria, profissionais qualificados, treinamentos de segurança, estrutura técnica e experiência em obras que exigem planejamento, documentação e execução com padrão técnico. Mais do que executar instalações, a Godoy atua para reduzir riscos, organizar documentação, apoiar expansões e manter operações funcionando com segurança.
              </p>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--ge-muted)", marginBottom: 20 }}>
                Também trabalhamos com foco em qualidade de energia, eficiência energética, sustentabilidade e soluções alinhadas às exigências de empresas que buscam fornecedores técnicos, responsáveis e preparados.
              </p>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--ge-muted)", padding: "16px 18px", background: "var(--ge-paper-2)", borderLeft: "2px solid var(--ge-green)" }}>
                Em 2026, a Godoy Engenharia expande sua atuação com a Godoy Energy, frente em desenvolvimento voltada à eletromobilidade e soluções de energia limpa. Este site mantém foco em engenharia elétrica para empresas, indústrias, comércios e condomínios.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="ge-section ge-section--ink">
        <div className="ge-container">
          <div className="ge-section__head">
            <div>
              <div className="ge-eyebrow" style={{ color: "var(--ge-green-bright)" }}>Como atuamos</div>
              <h2 style={{ marginTop: 16 }}>Quatro princípios técnicos.</h2>
            </div>
            <p className="ge-section__head-desc">
              Eles definem o que aceitamos como projeto, como organizamos a obra e o que entregamos ao final.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 0, border: "1px solid rgba(255,255,255,0.08)" }}>
            {[
              { num: "01", title: "Projeto antes da obra", body: "Toda obra começa com projeto executivo, memorial de cálculo e diagrama unifilar revisado. O projeto é a base de todo o restante." },
              { num: "02", title: "Responsabilidade técnica", body: "Responsabilidade técnica com ART quando prevista no escopo contratado — sustentação técnica do projeto e da operação da planta." },
              { num: "03", title: "Execução conforme planejamento", body: "Execução conduzida por equipe técnica conforme a necessidade do serviço, com treinamento NR-10 e procedimento padrão." },
              { num: "04", title: "Documentação técnica ao fim", body: "Documentação técnica conforme escopo: as built, prontuário das instalações, relatórios e ART quando prevista." },
            ].map((p) => (
              <div key={p.num} style={{ padding: 40, borderRight: "1px solid rgba(255,255,255,0.08)", borderBottom: "1px solid rgba(255,255,255,0.08)" }}>
                <div className="ge-mono" style={{ color: "var(--ge-green-bright)", marginBottom: 16 }}>{p.num}</div>
                <div style={{ fontFamily: "var(--ge-display)", fontSize: 22, fontWeight: 600, color: "#fff", letterSpacing: "-0.02em", marginBottom: 12 }}>{p.title}</div>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: "rgba(255,255,255,0.65)" }}>{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="ge-section ge-section--paper">
        <div className="ge-container">
          <div className="ge-section__head">
            <div>
              <div className="ge-eyebrow">Capacidade técnica</div>
              <h2 style={{ marginTop: 16 }}>Onde nossa engenharia opera.</h2>
            </div>
            <p className="ge-section__head-desc">
              Ambiente fabril em operação, projetos com janela técnica restrita, obras de expansão sem parada total — esse é o nosso terreno.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
            {[
              { title: "Tensão", value: "BT e MT (até 36 kV)", body: "Entradas em BT, entradas em MT 13,8 kV, cabines primárias de alvenaria e blindadas até 36 kV." },
              { title: "Porte", value: "Diferentes portes", body: "Galpões, pavilhões, plantas e centros de distribuição de diferentes portes." },
              { title: "Janela", value: "Janelas reduzidas", body: "Planejamento de obra com paradas operacionais mínimas, faseamento e comissionamento por etapas." },
              { title: "Compatibilização", value: "Projeto coordenado", body: "Coordenação com civil, hidráulica e mecânica via projeto compatibilizado." },
              { title: "Documentação", value: "Conforme escopo", body: "Documentação técnica conforme escopo: as built, prontuário, relatórios e ART quando prevista." },
              { title: "Cobertura", value: "Todo o estado de SP", body: "Atendimento a empresas, indústrias, comércios, condomínios e galpões em todo o estado de São Paulo." },
            ].map((c) => (
              <div key={c.title} style={{ padding: "24px 0", borderTop: "1px solid var(--ge-line)" }}>
                <div className="ge-mono" style={{ color: "var(--ge-muted)", marginBottom: 12 }}>{c.title}</div>
                <div style={{ fontFamily: "var(--ge-display)", fontSize: 24, fontWeight: 600, color: "var(--ge-ink)", letterSpacing: "-0.02em", marginBottom: 12 }}>{c.value}</div>
                <p style={{ fontSize: 14, color: "var(--ge-muted)", lineHeight: 1.5 }}>{c.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="ge-section ge-section--paper-2 ge-clients">
        <div className="ge-container">
          <div className="ge-section__head">
            <div>
              <div className="ge-eyebrow">Clientes e obras</div>
              <h2 style={{ marginTop: 16 }}>Empresas e operações atendidas.</h2>
            </div>
            <p className="ge-section__head-desc">
              Experiência com empresas, indústrias e operações de referência — incluindo nomes como Metrô, ArcelorMittal e Sabesp — em projetos, instalações, laudos, SPDA, cabine primária e entrada de energia.
            </p>
          </div>
          <ul className="ge-clients__grid" aria-label="Empresas e operações atendidas">
            {data.clients.map((c) =>
            <li className="ge-clients__cell" key={c.name}>
                <img src={`img/clientes/${c.file}`} alt={`Logo ${c.name}`} title={c.name} loading="lazy" decoding="async" width="180" height="70" className="ge-clients__logo" />
              </li>
            )}
          </ul>
        </div>
      </section>

      <section className="ge-section ge-section--paper">
        <div className="ge-container">
          <div className="ge-cta-block">
            <div className="ge-cta-block__bg" />
            <div className="ge-cta-block__content">
              <div className="ge-eyebrow" style={{ color: "var(--ge-green-bright)" }}>Fale com a engenharia</div>
              <h2 style={{ marginTop: 16 }}>Precisa de engenharia elétrica para sua operação?</h2>
              <p className="ge-cta-block__sub">Projetos, laudos, SPDA, cabine primária, entrada de energia e instalações para empresas, indústrias, comércios e condomínios.</p>
            </div>
            <div className="ge-cta-block__actions">
              <button className="ge-btn ge-btn--primary" onClick={() => go("contato#formulario")} style={{ padding: "16px 24px" }}>Enviar demanda para orçamento <GEIcon name="arrow" size={16} /></button>
              <button className="ge-btn ge-btn--ghost-light" onClick={() => go("obras")} style={{ padding: "16px 24px", justifyContent: "center" }}>Ver obras realizadas</button>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ─────────────────────────────────────────────
   SEGMENTOS
   ───────────────────────────────────────────── */

function GESegmentos({ go, data }) {
  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" }}>Segmentos atendidos</span>
          </div>
          <div className="ge-pagehero__inner">
            <div>
              <div className="ge-mono" style={{ color: "var(--ge-green-bright)", marginBottom: 16 }}>SEGMENTOS</div>
              <h1>Setores industriais, comerciais e logísticos atendidos pela engenharia.</h1>
            </div>
            <p className="ge-pagehero__sub">
              Engenharia elétrica aplicada a setores onde projeto, norma e responsabilidade técnica são críticos para a continuidade operacional.
            </p>
          </div>
        </div>
      </section>

      <section className="ge-section ge-section--paper">
        <div className="ge-container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
            {data.segments.map((seg, i) => (
              <div key={seg.slug} style={{ background: "var(--ge-paper)", border: "1px solid var(--ge-line)", borderRadius: 6, padding: 36, display: "grid", gridTemplateColumns: "auto 1fr", gap: 24, alignItems: "start" }}>
                <div style={{ width: 56, height: 56, background: "var(--ge-ink)", color: "var(--ge-green-bright)", borderRadius: 4, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                  <GEIcon name={seg.icon} size={28} stroke={1.4}/>
                </div>
                <div>
                  <div className="ge-mono" style={{ color: "var(--ge-muted)", marginBottom: 8 }}>{String(i+1).padStart(2,"0")} · Segmento</div>
                  <div style={{ fontFamily: "var(--ge-display)", fontSize: 26, fontWeight: 600, letterSpacing: "-0.02em", color: "var(--ge-ink)", marginBottom: 12 }}>{seg.name}</div>
                  <p style={{ fontSize: 15, color: "var(--ge-muted)", lineHeight: 1.55, marginBottom: 16 }}>{seg.desc}</p>
                  <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                    {["Instalações elétricas", "Cabine primária", "Manutenção", "SPDA"].map((t) => (
                      <span key={t} className="ge-mono" style={{ padding: "4px 8px", background: "var(--ge-paper-2)", border: "1px solid var(--ge-line)", fontSize: 10 }}>{t}</span>
                    ))}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="ge-section ge-section--paper-2">
        <div className="ge-container" style={{ maxWidth: 880, textAlign: "center" }}>
          <div className="ge-eyebrow" style={{ justifyContent: "center" }}>Capacidade</div>
          <h2 style={{ marginTop: 16, fontSize: 36 }}>Engenharia para operações de alta complexidade.</h2>
          <p style={{ marginTop: 20, fontSize: 16, color: "var(--ge-muted)", lineHeight: 1.6 }}>
            Cada segmento atendido recebe projeto técnico, responsabilidade de engenharia e documentação conforme o escopo contratado. Trabalhamos com tensões em BT e MT até 36 kV, em cabines primárias de alvenaria e blindadas, sempre conforme NBR 5410, NBR 14039, NBR 5419 e NR-10.
          </p>
          <div style={{ marginTop: 40, display: "flex", justifyContent: "center", gap: 12, flexWrap: "wrap" }}>
            <button className="ge-btn ge-btn--primary" onClick={() => go("obras")}>Ver obras realizadas <GEIcon name="arrow" size={16}/></button>
            <button className="ge-btn ge-btn--ghost" onClick={() => go("contato")}>Solicitar análise técnica</button>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ─────────────────────────────────────────────
   OBRAS
   ───────────────────────────────────────────── */

function GEObras({ go, data }) {
  const [filter, setFilter] = useStateP("Todas");
  const cats = ["Todas", ...Array.from(new Set(data.obras.map((o) => o.cat)))];
  const filtered = filter === "Todas" ? data.obras : data.obras.filter((o) => o.cat === filter);

  return (
    <main>
      <section className="ge-pagehero ge-pagehero--cover">
        <div className="ge-pagehero__cover" aria-hidden="true">
          <img src="img/equipe-campo.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" }}>Obras realizadas</span>
          </div>
          <div className="ge-pagehero__inner">
            <div>
              <div className="ge-mono" style={{ color: "var(--ge-green-bright)", marginBottom: 16 }}>OBRAS REALIZADAS</div>
              <h1>Obras que comprovam experiência.</h1>
            </div>
            <p className="ge-pagehero__sub">
              Cases técnicos em instalações, laudos, entrada de energia, cabine primária, SPDA, manutenção, retrofit e adequações.
            </p>
          </div>
        </div>
      </section>

      <section className="ge-section ge-section--paper" style={{ paddingTop: 72 }}>
        <div className="ge-container">
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 48, paddingBottom: 24, borderBottom: "1px solid var(--ge-line)" }}>
            {cats.map((c) => (
              <button key={c} onClick={() => setFilter(c)}
                className="ge-mono"
                style={{
                  padding: "8px 14px",
                  border: "1px solid " + (filter === c ? "var(--ge-ink)" : "var(--ge-line)"),
                  background: filter === c ? "var(--ge-ink)" : "transparent",
                  color: filter === c ? "#fff" : "var(--ge-ink)",
                  cursor: "pointer", fontSize: 10, letterSpacing: "0.1em",
                  borderRadius: 2,
                }}
              >
                {c}
              </button>
            ))}
            <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 8, color: "var(--ge-muted)" }} className="ge-mono">
              {filtered.length} {filtered.length === 1 ? "OBRA" : "OBRAS"}
            </div>
          </div>

          <div className="ge-cases">
            {filtered.map((o, idx) => (
              <article className="ge-case" key={o.slug}>
                <div className="ge-case__media">
                  <GEPlaceholder dark label={o.media} corner={String(idx+1).padStart(2,"0")} img={o.img} imgAlt={o.imgAlt} imgTitle={o.imgTitle}/>
                </div>
                <div className="ge-case__body">
                  <div className="ge-case__head">
                    <span className="ge-case__num ge-mono">CASE {String(idx+1).padStart(2,"0")}</span>
                    <span className="ge-case__cat ge-mono">{o.cat}</span>
                  </div>
                  <h2 className="ge-case__title">{o.title}</h2>

                  {o.resumo && <p className="ge-case__resumo">{o.resumo}</p>}

                  {o.segmento && (
                    <div className="ge-case__field">
                      <div className="ge-case__label ge-mono">Segmento</div>
                      <div className="ge-case__value">{o.segmento}</div>
                    </div>
                  )}

                  <div className="ge-case__field">
                    <div className="ge-case__label ge-mono">Tipo de cliente</div>
                    <div className="ge-case__value">{o.clienteTipo || "—"}</div>
                  </div>

                  <div className="ge-case__field">
                    <div className="ge-case__label ge-mono">Problema inicial</div>
                    <div className="ge-case__value">{o.problema || o.scope}</div>
                  </div>

                  <div className="ge-case__field">
                    <div className="ge-case__label ge-mono">Escopo executado</div>
                    {Array.isArray(o.escopo) ? (
                      <ul className="ge-case__list">
                        {o.escopo.map((e) => <li key={e}>· {e}</li>)}
                      </ul>
                    ) : (
                      <div className="ge-case__value">{o.scope}</div>
                    )}
                  </div>

                  <div className="ge-case__grid">
                    <div className="ge-case__field">
                      <div className="ge-case__label ge-mono">Normas envolvidas</div>
                      <div className="ge-case__norms">
                        {(o.normas || []).map((n) => <span key={n} className="ge-mono">{n}</span>)}
                      </div>
                    </div>
                    <div className="ge-case__field">
                      <div className="ge-case__label ge-mono">Prazo</div>
                      <div className="ge-case__value" style={{ fontSize: 13 }}>Prazo definido conforme escopo e condições da operação.</div>
                    </div>
                  </div>

                  {o.resultado && (
                    <div className="ge-case__field ge-case__result">
                      <div className="ge-case__label ge-mono">Resultado</div>
                      <div className="ge-case__value">{o.resultado}</div>
                    </div>
                  )}

                  <div className="ge-case__cta">
                    <div className="ge-case__cta-q">{o.cta || "Tem uma demanda parecida?"}</div>
                    <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
                      <button className="ge-btn ge-btn--primary" onClick={() => go("contato")} data-ge-cta="primary" data-ge-loc={`case-${o.slug}`}>
                        Solicitar análise técnica <GEIcon name="arrow" size={16}/>
                      </button>
                      <a className="ge-btn ge-btn--ghost" data-ge-cta="secondary" data-ge-loc={`case-${o.slug}`}
                         href={`mailto:${data.brand.email}?subject=${encodeURIComponent("Demanda parecida com: " + o.title + " — Godoy Engenharia")}&body=${encodeURIComponent("Olá, equipe da Godoy Engenharia.\n\nTenho uma demanda parecida com o case: " + o.title + ".\n\nEmpresa:\nTelefone:\nCidade da obra:\nDescrição:\n\nObrigado.")}`}>
                        Enviar projeto por e-mail
                      </a>
                    </div>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* CREDIBILIDADE — empresas e operações atendidas, ao final da página */}
      <section className="ge-section ge-section--paper-2 ge-clients">
        <div className="ge-container">
          <div className="ge-section__head">
            <div>
              <div className="ge-eyebrow">Credibilidade</div>
              <h2 style={{ marginTop: 16 }}>Empresas e operações atendidas.</h2>
            </div>
            <p className="ge-section__head-desc">
              Experiência em demandas elétricas para operações que exigem planejamento, documentação e responsabilidade técnica — incluindo nomes como Metrô, Sabesp e ArcelorMittal.
            </p>
          </div>
          <ul className="ge-clients__grid" aria-label="Empresas e operações atendidas">
            {data.clients.map((c) =>
            <li className="ge-clients__cell" key={c.name}>
                <img src={`img/clientes/${c.file}`} alt={`Logo ${c.name}`} title={c.name} loading="lazy" decoding="async" width="180" height="70" className="ge-clients__logo" />
              </li>
            )}
          </ul>
        </div>
      </section>

      <section className="ge-section ge-section--paper-2">
        <div className="ge-container">
          <div className="ge-cta-block">
            <div className="ge-cta-block__bg"/>
            <div className="ge-cta-block__content">
              <div className="ge-eyebrow" style={{ color: "var(--ge-green-bright)" }}>Próximo case</div>
              <h2 style={{ marginTop: 16 }}>Seu projeto pode entrar nesta lista.</h2>
              <p className="ge-cta-block__sub">Análise técnica inicial, projeto executivo e execução com responsabilidade técnica registrada.</p>
            </div>
            <div className="ge-cta-block__actions">
              <button className="ge-btn ge-btn--primary" onClick={() => go("contato")} style={{ padding: "16px 24px" }}>Solicitar análise técnica <GEIcon name="arrow" size={16}/></button>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ─────────────────────────────────────────────
   BLOG LIST
   ───────────────────────────────────────────── */

function GEBlog({ go, data }) {
  const featured = data.posts[0];
  const rest = data.posts.slice(1);
  return (
    <main>
      <section className="ge-pagehero ge-pagehero--cover">
        <div className="ge-pagehero__cover" aria-hidden="true">
          <img src="img/hero/godoy-engenharia-laudo-termografia-painel-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" }}>Blog técnico</span>
          </div>
          <div className="ge-pagehero__inner">
            <div>
              <div className="ge-mono" style={{ color: "var(--ge-green-bright)", marginBottom: 16 }}>CONHECIMENTO</div>
              <h1>Blog técnico de engenharia elétrica.</h1>
            </div>
            <p className="ge-pagehero__sub">
              Artigos sobre projeto, norma, retrofit, entrada de energia, SPDA e tudo o que envolve obra elétrica em operação industrial, comercial e logística.
            </p>
          </div>
        </div>
      </section>

      <section className="ge-section ge-section--paper">
        <div className="ge-container">
          {/* Featured */}
          <button className="ge-obra" onClick={() => go("blog/" + featured.slug)} style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 48, alignItems: "center", marginBottom: 80 }}>
            <div className="ge-obra__media" style={{ aspectRatio: "16/10" }}>
              <GEPlaceholder label={"Artigo destaque · " + featured.cat} corner={featured.date} img={featured.img} imgAlt={featured.imgAlt} imgTitle={featured.imgTitle}/>
            </div>
            <div>
              <div className="ge-blog-card__meta">{featured.cat} · {featured.date} · {featured.readMin} min</div>
              <div style={{ fontFamily: "var(--ge-display)", fontSize: 36, fontWeight: 600, letterSpacing: "-0.025em", lineHeight: 1.1, marginTop: 12 }}>{featured.title}</div>
              <p style={{ fontSize: 16, color: "var(--ge-muted)", lineHeight: 1.55, marginTop: 16 }}>{featured.excerpt}</p>
              <div style={{ marginTop: 24 }}>
                <span className="ge-btn ge-btn--ghost">Ler artigo <GEIcon name="arrow" size={16}/></span>
              </div>
            </div>
          </button>

          <div className="ge-blog-list">
            {rest.map((p) => (
              <button className="ge-blog-card" key={p.slug} onClick={() => go("blog/" + p.slug)}>
                <div className="ge-blog-card__media">
                  <GEPlaceholder label={p.cat} corner={p.date} img={p.img} imgAlt={p.imgAlt} imgTitle={p.imgTitle}/>
                </div>
                <div className="ge-blog-card__meta">{p.cat} · {p.readMin} min</div>
                <div className="ge-blog-card__title">{p.title}</div>
                <div className="ge-blog-card__excerpt">{p.excerpt}</div>
              </button>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

/* ─────────────────────────────────────────────
   BLOG POST
   ───────────────────────────────────────────── */

function GEPost({ slug, go, data }) {
  const post = data.posts.find((p) => p.slug === slug);
  const content = (typeof window !== "undefined" && window.GE_BLOG && window.GE_BLOG[slug]) || null;
  if (!post) return <main><div className="ge-container" style={{ padding: "120px 0" }}>Post não encontrado.</div></main>;
  return (
    <main>
      <section className="ge-pagehero" style={{ paddingBottom: 64 }}>
        <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("blog")} style={{ background: "none", border: "none", color: "inherit", font: "inherit", cursor: "pointer", padding: 0, letterSpacing: "inherit", textTransform: "inherit" }}>Blog</button>
            <span>/</span>
            <span style={{ color: "#fff" }}>{post.cat}</span>
          </div>
          <div className="ge-mono" style={{ color: "var(--ge-green-bright)", marginBottom: 16 }}>{post.cat} · {post.date} · {post.readMin} MIN</div>
          <h1 style={{ maxWidth: 800, fontSize: "clamp(36px, 4vw, 56px)" }}>{post.title}</h1>
          <p className="ge-pagehero__sub" style={{ marginTop: 20, maxWidth: 720 }}>{post.excerpt}</p>
        </div>
      </section>

      <section className="ge-section ge-section--paper" style={{ paddingTop: 80 }}>
        <div className="ge-container">
          <div style={{ maxWidth: 880, margin: "0 auto", aspectRatio: "16/8", marginBottom: 56 }}>
            <GEPlaceholder label={"Imagem ilustrativa · " + post.cat} corner={post.date} img={post.img} imgAlt={post.imgAlt} imgTitle={post.imgTitle} eager/>
          </div>

          <article className="ge-post">
            {content ? content.body.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;
            }) : (
              <p style={{ fontSize: 20, color: "var(--ge-ink)", lineHeight: 1.5 }}>Conteúdo técnico em produção pela equipe de engenharia.</p>
            )}

            <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 }}>FALE COM A ENGENHARIA</div>
                <div style={{ fontFamily: "var(--ge-display)", fontSize: 22, fontWeight: 600 }}>{content && content.cta ? content.cta : "Conte um pouco do seu projeto."}</div>
              </div>
              <button className="ge-btn ge-btn--primary" onClick={() => go("contato")}>Solicitar análise <GEIcon name="arrow" size={16}/></button>
            </div>
          </article>
        </div>
      </section>
    </main>
  );
}

/* ─────────────────────────────────────────────
   CONTATO
   ───────────────────────────────────────────── */

function GEContato({ go, data, onSent, lp }) {
  return (
    <main>
      <section className="ge-pagehero ge-pagehero--cover">
        <div className="ge-pagehero__cover" aria-hidden="true">
          <img src="img/equipe.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" }}>{lp ? lp.crumb : "Contato"}</span>
          </div>
          <div className="ge-pagehero__inner">
            <div>
              <div className="ge-mono" style={{ color: "var(--ge-green-bright)", marginBottom: 16 }}>{lp ? lp.eyebrow : "ENVIAR DEMANDA"}</div>
              <h1>{lp ? lp.h1 : "Envie sua demanda elétrica."}</h1>
            </div>
            <p className="ge-pagehero__sub">
              {lp ? lp.short : "Anexe projeto, escopo, fotos ou descreva a necessidade. Retornamos com direcionamento técnico para orçamento."}
            </p>
          </div>
        </div>
      </section>

      <section className="ge-section ge-section--paper">
        <div className="ge-container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 80, alignItems: "start" }}>
            <aside>
              <div className="ge-eyebrow">Contato direto</div>
              <h2 style={{ marginTop: 16, fontSize: 32, marginBottom: 32 }}>Ou fale com a engenharia agora.</h2>

              <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
                <div>
                  <div className="ge-mono" style={{ color: "var(--ge-muted)", marginBottom: 6 }}>TELEFONE / WHATSAPP</div>
                  <a href={`tel:+${data.brand.phoneRaw}`} style={{ fontFamily: "var(--ge-display)", fontSize: 22, fontWeight: 600, color: "var(--ge-ink)" }}>{data.brand.phone}</a>
                </div>
                <div>
                  <div className="ge-mono" style={{ color: "var(--ge-muted)", marginBottom: 6 }}>E-MAIL</div>
                  <a href={`mailto:${data.brand.email}`} style={{ fontFamily: "var(--ge-display)", fontSize: 18, fontWeight: 600, color: "var(--ge-ink)" }}>{data.brand.email}</a>
                </div>
                <div>
                  <div className="ge-mono" style={{ color: "var(--ge-muted)", marginBottom: 6 }}>SEDE</div>
                  <div style={{ fontSize: 15, color: "var(--ge-ink)" }}>{data.brand.city}</div>
                </div>
                <div>
                  <div className="ge-mono" style={{ color: "var(--ge-muted)", marginBottom: 6 }}>ÁREA DE ATENDIMENTO</div>
                  <div style={{ fontSize: 15, color: "var(--ge-ink)" }}>{data.brand.coverage}</div>
                </div>
              </div>

              <div style={{ marginTop: 40, padding: 24, background: "var(--ge-ink)", color: "#fff", borderRadius: 4 }}>
                <div className="ge-mono" style={{ color: "var(--ge-green-bright)", marginBottom: 12 }}>CONTATO DIRETO</div>
                <a href={`https://wa.me/${data.brand.phoneRaw}?text=${encodeURIComponent("Olá, gostaria de falar com a engenharia sobre uma demanda elétrica.")}`} target="_blank" rel="noopener" data-ge-cta="whatsapp" data-ge-loc="contact-page" className="ge-btn ge-btn--primary" style={{ width: "100%", justifyContent: "center" }}>
                  <GEIcon name="whatsapp" size={18}/> Falar com engenharia
                </a>
                <a href={`mailto:${data.brand.email}?subject=${encodeURIComponent("Envio de projeto para avaliação — Godoy Engenharia")}&body=${encodeURIComponent("Olá, equipe da Godoy Engenharia.\n\nSegue em anexo o projeto/escopo para avaliação técnica.\n\nDados iniciais:\nEmpresa:\nTelefone:\nCidade da obra:\nTipo de serviço:\n\nObrigado.")}`} data-ge-cta="email" data-ge-loc="contact-page" className="ge-btn ge-btn--ghost-light" style={{ width: "100%", justifyContent: "center", marginTop: 10, borderColor: "rgba(255,255,255,0.18)", color: "#fff" }}>
                  Enviar projeto por e-mail
                </a>
                <p style={{ fontSize: 12, color: "rgba(255,255,255,0.55)", marginTop: 14, lineHeight: 1.5 }}>Para enviar planta, escopo ou arquivo técnico em anexo, use o e-mail. O WhatsApp é mais rápido para alinhamento inicial.</p>
              </div>

              <div style={{ marginTop: 32, paddingTop: 24, borderTop: "1px solid var(--ge-line)" }}>
                <div className="ge-mono" style={{ color: "var(--ge-muted)", marginBottom: 16 }}>O QUE ANEXAR (OPCIONAL)</div>
                <ul style={{ fontSize: 14, lineHeight: 1.7, color: "var(--ge-muted)" }}>
                  <li>· Planta da edificação ou layout previsto</li>
                  <li>· Conta de energia recente (mostra demanda atual)</li>
                  <li>· Projeto elétrico atual, se existir</li>
                  <li>· Lista de equipamentos / cargas previstas</li>
                </ul>
              </div>
            </aside>

            <div id="formulario" style={{ background: "var(--ge-paper-2)", padding: 40, borderRadius: 6, border: "1px solid var(--ge-line)", scrollMarginTop: 96 }}>
              <div className="ge-eyebrow">Formulário</div>
              <h2 style={{ marginTop: 12, fontSize: 28, marginBottom: 8 }}>Envie sua demanda elétrica.</h2>
              <p style={{ fontSize: 14, color: "var(--ge-muted)", lineHeight: 1.55, marginBottom: 24 }}>
                Envie as informações disponíveis. Pode ser projeto, escopo, foto da instalação, demanda técnica ou descrição do problema. A equipe da Godoy Engenharia retorna com direcionamento técnico para orçamento.
              </p>
              <GEForm onSent={onSent} go={go}/>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { GEQuemSomos, GESegmentos, GEObras, GEBlog, GEPost, GEContato, GEPolitica });

/* ─────────────────────────────────────────────
   POLÍTICA DE PRIVACIDADE
   ───────────────────────────────────────────── */

function GEPolitica({ go, data }) {
  return (
    <main>
      <section className="ge-pagehero">
        <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" }}>Política de Privacidade</span>
          </div>
          <div className="ge-pagehero__inner">
            <div>
              <div className="ge-mono" style={{ color: "var(--ge-green-bright)", marginBottom: 16 }}>LGPD</div>
              <h1>Política de Privacidade.</h1>
            </div>
            <p className="ge-pagehero__sub">
              Como a Godoy Engenharia trata os dados informados pelo visitante ao entrar em contato pelo site, formulário, WhatsApp ou e-mail.
            </p>
          </div>
        </div>
      </section>

      <section className="ge-section ge-section--paper">
        <div className="ge-container" style={{ maxWidth: 820 }}>
          <article className="ge-post">
            <h2>Dados coletados</h2>
            <p>O site da Godoy Engenharia coleta apenas os dados informados voluntariamente pelo visitante ao preencher o formulário de contato, enviar e-mail ou abrir conversa pelo WhatsApp: nome da empresa, telefone, e-mail, mensagem e, opcionalmente, arquivos técnicos anexados (projeto, planta, escopo, fotos da instalação).</p>

            <h2>Finalidade do uso</h2>
            <p>Os dados são utilizados exclusivamente para:</p>
            <ul style={{ display: "flex", flexDirection: "column", gap: 8, margin: "16px 0" }}>
              {[
                "Retorno comercial e técnico sobre a demanda apresentada;",
                "Elaboração de proposta técnica e comercial, quando aplicável;",
                "Comunicação relacionada ao serviço solicitado;",
                "Cumprimento de obrigações legais e regulatórias.",
              ].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>

            <h2>Armazenamento e compartilhamento</h2>
            <p>Os dados ficam armazenados em ambiente controlado da Godoy Engenharia, com acesso restrito à equipe técnica e comercial. Não compartilhamos dados com terceiros para fins de marketing. Eventuais ferramentas de análise (Google Analytics, Google Tag Manager) podem ser utilizadas para mensurar a navegação e a origem do acesso, sem identificação pessoal.</p>

            <h2>Cookies e ferramentas de análise</h2>
            <p>O site pode utilizar cookies para fins de análise estatística e mensuração de campanhas (Google Analytics 4, Google Ads, Google Tag Manager). Esses recursos coletam informações agregadas e anônimas sobre o uso do site. Você pode desativar cookies nas configurações do seu navegador.</p>

            <h2>Direitos do titular</h2>
            <p>Em conformidade com a LGPD (Lei nº 13.709/2018), o titular dos dados pode, a qualquer momento, solicitar:</p>
            <ul style={{ display: "flex", flexDirection: "column", gap: 8, margin: "16px 0" }}>
              {[
                "Confirmação da existência de tratamento dos dados;",
                "Acesso aos dados;",
                "Correção de dados incompletos, inexatos ou desatualizados;",
                "Anonimização, bloqueio ou eliminação de dados desnecessários;",
                "Revogação do consentimento.",
              ].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>

            <h2>Canal de contato</h2>
            <p>Para exercer seus direitos ou esclarecer dúvidas sobre o tratamento de dados, entre em contato pelo e-mail <a href={`mailto:${data.brand.email}`} style={{ color: "var(--ge-green)", textDecoration: "underline" }}>{data.brand.email}</a>.</p>

            <h2>Atualização da política</h2>
            <p>Esta Política de Privacidade pode ser atualizada periodicamente. A versão mais recente está sempre disponível nesta página.</p>

            <p style={{ marginTop: 32, fontSize: 13, color: "var(--ge-muted)" }}>Última atualização: maio de 2026.</p>
          </article>
        </div>
      </section>
    </main>
  );
}