/* eslint-disable */
// Godoy Engenharia — pages

const { useState: useStateP, useEffect: useEffectP } = React;

/* ─────────────────────────────────────────────
   HOME
   ───────────────────────────────────────────── */

function GEHome({ go, variant, data }) {
  return (
    <main>
      {/* HERO */}
      <section className="ge-hero ge-hero--cover">
        <div className="ge-hero__cover" aria-hidden="true">
          <img
            src="img/hero/godoy-engenharia-galpao-cabos-painel-capa.webp"
            alt=""
            loading="eager"
            decoding="async"
            fetchpriority="high"
            width="1086"
            height="1448" />
          
          <div className="ge-hero__cover-grade"></div>
        </div>
        <div className="ge-hero__grid-bg" />
        <div className="ge-container">
          <div className="ge-hero__inner ge-hero__inner--cover">
            <div>
              <div className="ge-hero__tag">
                <span className="ge-hero__tag-mark" aria-hidden="true"></span>
                Atendemos todo o estado de São Paulo
              </div>
              <h1 className="ge-hero__h1">
                Sua demanda<br />
                elétrica <em>resolvida</em><br />
                com custo planejado,<br />
                qualidade e prazo.
              </h1>
              <p className="ge-hero__lede">Instalação elétrica, laudos, SPDA, projetos, cabine primária e entrada de energia com engenheiro eletricista responsável e equipe própria.</p>
              <div className="ge-hero__ctas">
                <button className="ge-btn ge-btn--primary" onClick={() => go("contato#formulario")} data-ge-cta="primary" data-ge-loc="hero">
                  Enviar demanda para orçamento <GEIcon name="arrow" size={16} />
                </button>
                <button className="ge-btn ge-btn--ghost-light" data-ge-cta="secondary" data-ge-loc="hero"
                  onClick={() => { const el = document.getElementById("ge-home-servicos"); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: "smooth" }); }}>
                  Ver serviços
                </button>
              </div>
            </div>
          </div>

          {variant === "b" &&
          <div className="ge-hero-b__marquee">
              {["Instalações industriais", "Entrada de energia", "Cabine primária", "Aumento de carga", "Manutenção", "Laudos", "SPDA", "Retrofit", "Expansão"].map((label, i) =>
            <div key={label} className="ge-hero-b__marquee-item">
                  <span className="ge-hero-b__marquee-num">{String(i + 1).padStart(2, "0")}</span>
                  {label}
                </div>
            )}
            </div>
          }
        </div>
      </section>

      {/* PILARES — Custo · Prazo · Qualidade · 20+ (docados ao hero) */}
      <section className="ge-pillars-sec ge-pillars-sec--docked" style={{ background: "var(--ge-paper)" }}>
        <div className="ge-container">
          <div className="ge-pillars ge-pillars--4">
            {[
            { t: "Custo", d: "Pensamos no custo da demanda desde o projeto, evitando desperdício, retrabalho e troca desnecessária." },
            { t: "Prazo", d: "Planejamento de compra, equipe e execução para reduzir improviso e atraso na obra." },
            { t: "Qualidade", d: "Materiais confiáveis, fornecedores homologados e especificação correta para cada instalação." },
            { t: "20+", d: "Anos de experiência comprovada na área elétrica, com equipe própria e engenheiro eletricista responsável." }].
            map((p) =>
            <div className="ge-pillar" key={p.t}>
                <h3 className="ge-pillar__title">{p.t}</h3>
                <p className="ge-pillar__body">{p.d}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* SERVICES */}
      <section id="ge-home-servicos" className="ge-section ge-section--paper">
        <div className="ge-container">
          <div className="ge-section__head">
            <div>
              <div className="ge-eyebrow">Serviços</div>
              <h2 style={{ marginTop: 16 }}>Soluções para demandas elétricas.</h2>
            </div>
            <div className="ge-section__head-meta">
              <p className="ge-section__head-desc">
                Instalação elétrica, laudos, SPDA, projetos, cabine primária e entrada de energia para empresas, condomínios e operações comerciais — com projeto técnico e com engenheiro eletricista responsável.
              </p>
            </div>
          </div>
          <div className="ge-services ge-services--lg">
            {data.services.map((s) =>
            <button className="ge-service-card" key={s.slug} onClick={() => go("servico/" + s.slug)}>
                <div className="ge-service-card__num">{s.num}</div>
                <div className="ge-service-card__icon"><GEIcon name={s.icon} size={36} stroke={1.4} /></div>
                <div className="ge-service-card__title">{s.title}</div>
                <ul className="ge-service-card__bullets">
                  {s.bullets.slice(0, 3).map((b) => <li key={b}>· {b}</li>)}
                </ul>
                <div className="ge-service-card__arrow"><GEIcon name="arrowUpRight" size={20} /></div>
              </button>
            )}
            {/* 8º card — prova técnica, fecha a grade (não é serviço navegável) */}
            <div className="ge-service-card ge-service-card--trust">
              <div className="ge-service-card__num">08</div>
              <div className="ge-service-card__icon"><GEIcon name="check" size={32} stroke={1.8} /></div>
              <div className="ge-service-card__title">CREA, ART e responsável técnico</div>
              <ul className="ge-service-card__bullets">
                <li>· Engenheiro eletricista responsável</li>
                <li>· Empresa registrada no CREA</li>
                <li>· Documentação técnica conforme escopo</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* DORES DO CLIENTE — problema real + solução técnica */}
      <section className="ge-section ge-section--paper-2">
        <div className="ge-container">
          <div className="ge-section__head">
            <div>
              <div className="ge-eyebrow">Demandas</div>
              <h2 style={{ marginTop: 16 }}>Demandas elétricas que resolvemos.</h2>
            </div>
            <p className="ge-section__head-desc">
              Atuamos desde a análise técnica até o projeto, execução, manutenção e documentação das instalações elétricas.
            </p>
          </div>
          <div className="ge-pains">
            {data.pains.map((p) =>
            <article className="ge-pain" key={p.title}>
                <div className="ge-pain__icon"><GEIcon name={p.icon} size={28} stroke={1.4} /></div>
                <h3 className="ge-pain__title">{p.title}</h3>
                <p className="ge-pain__body">{p.body}</p>
                <a className="ge-pain__cta"
              href={`mailto:${data.brand.email}?subject=${encodeURIComponent(p.title + " — Godoy Engenharia")}&body=${encodeURIComponent("Olá, equipe da Godoy Engenharia.\n\nDemanda: " + p.title + "\n\nEmpresa:\nTelefone:\nCidade da obra:\nDescrição:\n\nObrigado.")}`}
              data-ge-cta="email" data-ge-loc={`pain-${p.icon}`}>
                  {p.cta} <GEIcon name="arrow" size={14} />
                </a>
              </article>
            )}
          </div>
        </div>
      </section>

      {/* CLIENTS / OPERATIONS LOGOS — empresas e operações atendidas */}
      <section className="ge-section ge-section--paper ge-clients">
        <div className="ge-container">
          <div className="ge-section__head">
            <div>
              <div className="ge-eyebrow">Experiência</div>
              <h2 style={{ marginTop: 16 }}>Empresas e operações atendidas.</h2>
            </div>
            <p className="ge-section__head-desc">
              Atuação em projetos, instalações, laudos, manutenção e adequações elétricas para empresas, indústrias, operações logísticas, infraestrutura de transporte e ambientes corporativos.
            </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>

          <p className="ge-clients__foot">
            Experiência em diferentes ambientes técnicos, incluindo instalações industriais, operações logísticas, infraestrutura de transporte, empresas institucionais e ambientes corporativos.
          </p>
        </div>
      </section>

      {/* SEGMENTS */}
      <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)" }}>Segmentos</div>
              <h2 style={{ marginTop: 16 }}>Setores com exigência técnica alta.</h2>
            </div>
            <p className="ge-section__head-desc">
              Engenharia elétrica para operações industriais, comerciais e logísticas de alta complexidade — onde projeto, norma e responsabilidade técnica são críticos para a continuidade operacional.
            </p>
          </div>
          <div className="ge-segments">
            {data.segments.slice(0, 6).map((seg) =>
            <div className="ge-segment" key={seg.slug}>
                <div className="ge-segment__icon"><GEIcon name={seg.icon} size={32} stroke={1.4} /></div>
                <div className="ge-segment__title">{seg.name}</div>
                <div className="ge-segment__desc">{seg.desc}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* OBRAS TEASER */}
      <section className="ge-section ge-section--paper">
        <div className="ge-container">
          <div className="ge-section__head">
            <div>
              <div className="ge-eyebrow">Obras realizadas</div>
              <h2 style={{ marginTop: 16 }}>Projetos em operação.</h2>
            </div>
            <div style={{ display: "flex", justifyContent: "flex-end", alignItems: "center" }}>
              <button className="ge-btn ge-btn--ghost" onClick={() => go("obras")} data-ge-cta="cases" data-ge-loc="home">Ver todas as obras <GEIcon name="arrow" size={16} /></button>
            </div>
          </div>
          <div className="ge-obras">
            {(data.homeHighlights || data.obras.slice(0, 4)).map((h) =>
            <button className="ge-obra" key={h.title} onClick={() => go(h.route || "obras")}>
                <div className="ge-obra__media">
                  <GEPlaceholder label={h.media} img={h.img} imgAlt={h.imgAlt} imgTitle={h.title} eager={true} />
                </div>
                <div className="ge-obra__meta">
                  <span className="ge-obra__cat">{h.eyebrow}</span>
                </div>
                <div className="ge-obra__title">{h.title}</div>
                <div className="ge-obra__scope">{h.desc}</div>
              </button>
            )}
          </div>
        </div>
      </section>

      {/* TECH STACK / DIFERENCIAIS */}
      <section className="ge-section ge-section--paper-2">
        <div className="ge-container">
          <div className="ge-section__head">
            <div>
              <div className="ge-eyebrow">Por que escolher</div>
              <h2 style={{ marginTop: 16 }}>Por que escolher a Godoy Engenharia.</h2>
            </div>
            <p className="ge-section__head-desc">
              mais de 22 anos na área elétrica, equipe própria, responsabilidade técnica e foco em qualidade de energia, segurança e eficiência.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "14px 40px" }}>
            {data.homeWhy.map((w) =>
            <div key={w} style={{ display: "flex", gap: 14, alignItems: "flex-start", padding: "14px 0", borderTop: "1px solid var(--ge-line)" }}>
                <span style={{ color: "var(--ge-green)", flexShrink: 0, marginTop: 2 }}><GEIcon name="check" size={18} stroke={2.4} /></span>
                <span style={{ fontFamily: "var(--ge-display)", fontSize: 16, fontWeight: 500, color: "var(--ge-ink)", lineHeight: 1.35 }}>{w}</span>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* AVALIAÇÕES — prova social (Google) */}
      <section className="ge-section ge-reviews">
        <div className="ge-container">
          <div className="ge-reviews__head">
            <div className="ge-eyebrow">Avaliações de clientes</div>
            <h2 style={{ marginTop: 16 }}>O que dizem sobre a Godoy Engenharia</h2>
            <p className="ge-reviews__sub">
              Avaliações reais de clientes que confiaram na nossa equipe para serviços elétricos, projetos, laudos, manutenção e obras técnicas.
            </p>
            <div className="ge-reviews__score">
              <span className="ge-reviews__score-num">{data.reviews.rating}</span>
              <span className="ge-stars" aria-label={`${data.reviews.rating} de 5 estrelas`}>
                {[0, 1, 2, 3, 4].map((i) => <GEIcon key={i} name="star" size={18} />)}
              </span>
              <span className="ge-reviews__score-count">{data.reviews.count} avaliações no Google</span>
            </div>
          </div>

          <div className="ge-reviews__grid">
            {data.reviews.items.map((r) =>
            <figure className="ge-review-card" key={r.name}>
                <span className="ge-stars" aria-label="5 de 5 estrelas">
                  {[0, 1, 2, 3, 4].map((i) => <GEIcon key={i} name="star" size={16} />)}
                </span>
                <blockquote className="ge-review-card__text">{r.text}</blockquote>
                <figcaption className="ge-review-card__foot">
                  <span className="ge-review-card__name">{r.name}</span>
                  <span className="ge-review-card__source">
                    <GEIcon name="google" size={14} /> Avaliação no Google
                  </span>
                </figcaption>
              </figure>
            )}
          </div>

          <div className="ge-reviews__action">
            <a className="ge-btn ge-btn--ghost" href={data.reviews.link} target="_blank" rel="noopener" data-ge-cta="google_reviews" data-ge-loc="home-reviews">
              Ver avaliações no Google <GEIcon name="arrow" size={16} />
            </a>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="ge-section ge-section--paper" style={{ paddingTop: 0 }}>
        <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 passo</div>
              <h2 style={{ marginTop: 16 }}>Tem uma obra elétrica em andamento?</h2>
              <p className="ge-cta-block__sub">
                Envie o escopo, planta ou documentação básica do projeto. Nossa engenharia avalia e retorna com a análise técnica inicial após a leitura das informações.
              </p>
            </div>
            <div className="ge-cta-block__actions">
              <button className="ge-btn ge-btn--primary" onClick={() => go("contato")} data-ge-cta="primary" data-ge-loc="home-cta" style={{ padding: "16px 24px" }}>
                Solicitar análise técnica <GEIcon name="arrow" size={16} />
              </button>
              <a className="ge-btn ge-btn--ghost-light" data-ge-cta="secondary" data-ge-loc="home-cta"
              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.")}`}
              style={{ padding: "16px 24px", justifyContent: "center" }}>
                Enviar projeto por e-mail
              </a>
            </div>
          </div>
        </div>
      </section>
    </main>);

}

/* ─────────────────────────────────────────────
   SERVICE DETAIL — landing-page style
   ───────────────────────────────────────────── */

function GEListBlock({ title, items }) {
  if (!items || !items.length) return null;
  return (
    <div style={{ marginTop: 8 }}>
      <h2>{title}</h2>
      <ul className="ge-svc-detail__bullets">
        {items.map((b) =>
        <li key={b}>
            <span className="ge-svc-detail__bullets-dot" />
            {b}
          </li>
        )}
      </ul>
    </div>);

}

function GEServicePage({ slug, go, data, lp }) {
  const svc = data.services.find((s) => s.slug === slug);
  if (!svc) return <main><div className="ge-container" style={{ padding: "120px 0" }}>Serviço não encontrado.</div></main>;
  const others = data.services.filter((s) => s.slug !== slug).slice(0, 6);
  const img = svc.img || svc.photo;
  const waLink = `https://wa.me/${data.brand.phoneRaw}?text=${encodeURIComponent("Olá, gostaria de falar com a engenharia sobre " + svc.title + ".")}`;
  const mailLink = `mailto:${data.brand.email}?subject=${encodeURIComponent(svc.title + " — Godoy Engenharia")}&body=${encodeURIComponent("Olá, equipe da Godoy Engenharia.\n\nDemanda: " + svc.title + "\n\nEmpresa:\nTelefone:\nCidade da obra:\nDescrição:\n\nObrigado.")}`;
  const related = (svc.related || []).filter((r) => r && r.route);

  return (
    <main>
      <section className="ge-pagehero ge-pagehero--cover">
        {(svc.img || (lp && lp.photo)) &&
          <div className="ge-pagehero__cover" aria-hidden="true">
            <img src={`img/hero/${lp ? lp.photo : svc.img}.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("home")} style={{ background: "none", border: "none", color: "rgba(255,255,255,0.4)", font: "inherit", cursor: "pointer", padding: 0, letterSpacing: "inherit", textTransform: "inherit" }}>Serviços</button>
            <span>/</span>
            <span style={{ color: "#fff" }}>{lp ? lp.crumb : svc.title}</span>
          </div>
          <div className="ge-pagehero__inner">
            <div>
              <div className="ge-mono" style={{ color: "var(--ge-green-bright)", marginBottom: 16 }}>{lp ? lp.eyebrow : `SERVIÇO · ${svc.num}`}</div>
              <h1>{lp ? lp.h1 : svc.title}</h1>
            </div>
            <p className="ge-pagehero__sub">{lp ? lp.desc : svc.lede}</p>
          </div>
          <div className="ge-hero__ctas" style={{ marginTop: 32 }}>
            <a className="ge-btn ge-btn--primary" href={waLink} target="_blank" rel="noopener" data-ge-cta="whatsapp" data-ge-loc={"servico-" + slug}>
              <GEIcon name="whatsapp" size={18} /> Falar no WhatsApp
            </a>
            <a className="ge-btn ge-btn--ghost-light" href={mailLink} data-ge-cta="email" data-ge-loc={"servico-" + slug}>
              Enviar projeto por e-mail
            </a>
          </div>
        </div>
      </section>

      <section className="ge-section ge-section--paper">
        <div className="ge-container">
          <div className="ge-svc-detail">
            <aside className="ge-svc-detail__side">
              <div className="ge-mono" style={{ color: "var(--ge-muted)", marginBottom: 16 }}>Serviços</div>
              <div className="ge-svc-detail__nav">
                <button className="is-active">{svc.title}</button>
                {others.map((o) =>
                <button key={o.slug} onClick={() => go("servico/" + o.slug)}>{o.title}</button>
                )}
              </div>
              <div style={{ marginTop: 32, padding: 20, background: "var(--ge-ink)", color: "#fff", borderRadius: 4 }}>
                <div className="ge-mono" style={{ color: "var(--ge-green-bright)", marginBottom: 12 }}>Análise técnica</div>
                <div style={{ fontFamily: "var(--ge-display)", fontSize: 18, fontWeight: 600, lineHeight: 1.25, marginBottom: 16 }}>Conte sua demanda para a engenharia.</div>
                <button className="ge-btn ge-btn--primary" onClick={() => go("contato")} style={{ width: "100%", justifyContent: "center" }}>Solicitar análise</button>
              </div>
            </aside>

            <div>
              <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--ge-ink)", marginBottom: 8 }}>{lp ? lp.short : svc.short}</p>

              <GEListBlock title="Quando sua empresa precisa" items={svc.whenNeed} />
              <GEListBlock title="O que fazemos" items={svc.whatWeDo} />

              {img &&
              <div className="ge-svc-detail__diagram" style={{ margin: "12px 0 8px" }}>
                  <picture>
                    <source media="(max-width: 640px)" srcSet={`img/mobile/${img}.webp`} type="image/webp" />
                    <source media="(max-width: 1100px)" srcSet={`img/servicos/${img}.webp`} type="image/webp" />
                    <img src={`img/hero/${img}.webp`} alt={svc.imgAlt || svc.title} title={svc.title} width="1254" height="1254" loading="lazy" decoding="async" style={{ display: "block", width: "100%", height: "auto" }} />
                  </picture>
                </div>
              }

              <GEListBlock title="Riscos de não agir" items={svc.risks} />

              {svc.norms && svc.norms.length > 0 &&
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8, alignItems: "center", margin: "8px 0 24px" }}>
                  <span className="ge-mono" style={{ color: "var(--ge-muted)", fontSize: 11, marginRight: 4 }}>NORMAS</span>
                  {svc.norms.map((n) =>
                  <span key={n} className="ge-mono" style={{ padding: "5px 9px", background: "var(--ge-paper-2)", border: "1px solid var(--ge-line)", fontSize: 10, letterSpacing: "0.06em" }}>{n}</span>
                  )}
                </div>
              }

              <div className="ge-svc-detail__cta-row">
                <button className="ge-btn ge-btn--primary" onClick={() => go("contato")}>
                  {svc.cta} <GEIcon name="arrow" size={16} />
                </button>
                <a className="ge-btn ge-btn--ghost" href={waLink} target="_blank" rel="noopener" data-ge-cta="whatsapp" data-ge-loc={"servico-mid-" + slug}>
                  <GEIcon name="whatsapp" size={16} /> Falar com engenharia
                </a>
              </div>

              {related.length > 0 &&
              <div style={{ marginTop: 8 }}>
                  <h3>Serviços relacionados</h3>
                  <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 10 }}>
                    {related.map((r) =>
                    <button key={r.route} onClick={() => go(r.route)} 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", fontFamily: "var(--ge-display)", fontWeight: 600, fontSize: 14, color: "var(--ge-ink)", textAlign: "left" }}>
                        {r.label} <GEIcon name="arrowUpRight" size={16} />
                      </button>
                    )}
                  </div>
                </div>
              }

              {svc.segs && svc.segs.length > 0 &&
              <div style={{ marginTop: 32 }}>
                  <h3>Segmentos atendidos</h3>
                  <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                    {svc.segs.map((s) =>
                    <span key={s} className="ge-mono" style={{ padding: "7px 12px", background: "var(--ge-paper-2)", border: "1px solid var(--ge-line)", fontSize: 11, letterSpacing: "0.04em" }}>{s}</span>
                    )}
                  </div>
                </div>
              }

              {svc.faq && svc.faq.length > 0 &&
              <div style={{ marginTop: 40 }}>
                  <h3>Perguntas frequentes</h3>
                  <div style={{ marginTop: 8 }}>
                    {svc.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>
          </div>
        </div>
      </section>

      {/* CTA */}
      <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)" }}>{svc.title}</div>
              <h2 style={{ marginTop: 16 }}>{svc.cta}?</h2>
              <p className="ge-cta-block__sub">Envie informações sobre a operação, o imóvel ou a exigência recebida. A engenharia retorna com a análise técnica inicial.</p>
            </div>
            <div className="ge-cta-block__actions">
              <button className="ge-btn ge-btn--primary" onClick={() => go("contato")} style={{ padding: "16px 24px" }}>Falar com engenharia <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={"servico-cta-" + slug} style={{ padding: "16px 24px", justifyContent: "center" }}>
                <GEIcon name="whatsapp" size={18} /> WhatsApp
              </a>
            </div>
          </div>
        </div>
      </section>
    </main>);

}

Object.assign(window, { GEHome, GEServicePage, GEListBlock });