/* 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>
                ENGENHARIA ELÉTRICA · SÃO PAULO
              </div>
              <h1 className="ge-hero__h1">
                Engenharia<br />
                elétrica para<br />
                <em>obras</em> de alta<br />
                complexidade.
              </h1>
              <p className="ge-hero__lede">Instalação, laudo, adequação/modernização, cabine primária, manutenção e projeto para indústrias, galpões, escritórios centros logísticos de grande porte.

              </p>
              <div className="ge-hero__ctas">
                <button className="ge-btn ge-btn--primary" onClick={() => go("contato")} data-ge-cta="primary" data-ge-loc="hero">
                  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="hero"
                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.")}`}>
                  Enviar projeto para avaliação
                </a>
              </div>
              <div className="ge-hero__specs">
                <div>
                  <div className="ge-hero__spec-label">Tensão</div>
                  <div className="ge-hero__spec-value">BT · MT<small>até 36 kV</small></div>
                </div>
                <div>
                  <div className="ge-hero__spec-label">Normas</div>
                  <div className="ge-hero__spec-value">NR10<small>5410 · 5419</small></div>
                </div>
                <div>
                  <div className="ge-hero__spec-label">Responsabilidade</div>
                  <div className="ge-hero__spec-value">ART<small>CREA-SP</small></div>
                </div>
              </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>

      {/* STATS */}
      <section style={{ background: "var(--ge-paper)" }}>
        <div className="ge-container">
          <div className="ge-stats">
            {[
            { num: "08", unit: "", label: "Linhas de serviço em engenharia elétrica" },
            { num: "BT·MT", unit: "", label: "Baixa e média tensão até 36 kV" },
            { num: "ART", unit: "", label: "Responsabilidade técnica quando prevista no escopo" },
            { num: "20+", unit: "", label: "Anos de experiência em obras elétricas" }].
            map((s) =>
            <div className="ge-stat" key={s.label}>
                <div className="ge-stat__num">{s.num}{s.unit && <small>{s.unit}</small>}</div>
                <div className="ge-stat__label">{s.label}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* SERVICES */}
      <section 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 }}>Engenharia aplicada do projeto à energização.</h2>
            </div>
            <div className="ge-section__head-meta">
              <p className="ge-section__head-desc">
                Cada linha de serviço é conduzida com projeto técnico e responsabilidade de engenharia, com documentação e ART conforme o escopo contratado.
              </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>
            )}
          </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">Situações típicas</div>
              <h2 style={{ marginTop: 16 }}>Sua empresa está passando por alguma dessas situações?</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">Como trabalhamos</div>
              <h2 style={{ marginTop: 16 }}>Engenharia aplicada, do projeto à energização.</h2>
            </div>
            <p className="ge-section__head-desc">
              Quatro disciplinas integradas em cada obra. Engenharia elétrica exige projeto, norma e responsabilidade técnica registrada — desde o primeiro traço.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32 }}>
            {[
            { num: "01", title: "Engenharia de projeto", body: "Projeto executivo, diagrama unifilar, memorial de cálculo e dimensionamento normativo. Toda obra começa pelo papel." },
            { num: "02", title: "Responsabilidade técnica", body: "Responsabilidade técnica com ART quando prevista no escopo contratado. Atuação conforme NBR 5410, NBR 14039, NBR 5419 e NR-10." },
            { 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." },
            { num: "04", title: "Documentação técnica", body: "Entrega de documentação técnica conforme escopo, incluindo as built, prontuário e relatórios quando aplicável." }].
            map((step) =>
            <div key={step.num}>
                <div className="ge-mono" style={{ color: "var(--ge-green)", marginBottom: 16, fontSize: 11, letterSpacing: "0.12em" }}>{step.num}</div>
                <div style={{ fontFamily: "var(--ge-display)", fontSize: 19, fontWeight: 600, letterSpacing: "-0.015em", color: "var(--ge-ink)" }}>{step.title}</div>
                <p style={{ marginTop: 12, fontSize: 14, lineHeight: 1.55, color: "var(--ge-muted)" }}>{step.body}</p>
              </div>
            )}
          </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 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, 4);
  const waLink = `https://wa.me/${data.brand.phoneRaw}?text=${encodeURIComponent("Olá, gostaria de falar com a engenharia sobre uma demanda elétrica.")}`;
  const mailLink = `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\nEmpresa:\nTelefone:\nCidade da obra:\nTipo de serviço:\n\nObrigado.")}`;

  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: "rgba(255,255,255,0.4)" }}>Serviços</span>
            <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.hero}</h1>
            </div>
            <p className="ge-pagehero__sub">{lp ? lp.desc : svc.lede}</p>
          </div>
          {lp &&
          <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={"landing-" + slug}>
                <GEIcon name="whatsapp" size={18} /> Falar com engenharia
              </a>
              <a className="ge-btn ge-btn--ghost-light" href={mailLink} data-ge-cta="secondary" data-ge-loc={"landing-" + 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 }}>Outros 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 }}>Tem um projeto desse porte?</div>
                <button className="ge-btn ge-btn--primary" onClick={() => go("contato")} style={{ width: "100%", justifyContent: "center" }}>Solicitar análise</button>
              </div>
            </aside>

            <div>
              <h2>Escopo principal</h2>
              <p>{lp ? lp.short : svc.short}</p>
              <ul className="ge-svc-detail__bullets">
                {svc.bullets.map((b) =>
                <li key={b}>
                    <span className="ge-svc-detail__bullets-dot" />
                    {b}
                  </li>
                )}
              </ul>

              <div className="ge-svc-detail__meta">
                <div>
                  <h3>Normas e referências</h3>
                  <ul className="ge-svc-detail__norms-list">
                    {svc.norms.map((n) => <li key={n}>{n}</li>)}
                  </ul>
                </div>
                <div>
                  <h3>Documentação</h3>
                  <ul className="ge-svc-detail__norms-list">
                    {svc.docs.map((d) => <li key={d}>{d}</li>)}
                  </ul>
                </div>
              </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={`https://wa.me/${data.brand.phoneRaw}`} target="_blank" rel="noopener">
                  <GEIcon name="whatsapp" size={16} /> Falar com engenharia
                </a>
              </div>

              <GEAccordion label="Ver escopo técnico">
                <div className="ge-svc-detail__scope">
                  {svc.scope.map((item) =>
                  <div className="ge-svc-detail__scope-item" key={item.title}>
                      <strong>{item.title}</strong>
                      {item.body}
                    </div>
                  )}
                </div>
              </GEAccordion>

              <h3>Representação técnica do serviço</h3>
              <div className="ge-svc-detail__diagram">
                {svc.img ?
                <picture>
                    <source media="(max-width: 640px)" srcSet={`img/mobile/${svc.img}.webp`} type="image/webp" />
                    <source media="(max-width: 1100px)" srcSet={`img/servicos/${svc.img}.webp`} type="image/webp" />
                    <img
                    src={`img/hero/${svc.img}.webp`}
                    alt={svc.imgAlt || svc.title}
                    title={svc.imgTitle || svc.title}
                    width="1254"
                    height="1254"
                    loading="lazy"
                    decoding="async"
                    style={{ display: "block", width: "100%", height: "auto" }} />
                  </picture> :
                svc.slug === "spda-aterramento" ? <GEDiagramSpda /> :
                svc.slug === "instalacoes-eletricas" ? <GEDiagramGalpao /> :
                <GEDiagramUnifilar />}
              </div>

              <h3>Como começa um projeto</h3>
              <ol className="ge-svc-detail__flow">
                {[
                ["01", "Contato do cliente", "O cliente entra em contato com a Godoy Engenharia e apresenta a necessidade técnica: obra, projeto, manutenção, laudo, adequação, entrada de energia, cabine primária, SPDA ou inspeção elétrica."],
                ["02", "Análise inicial da demanda", "Nossa equipe avalia as informações recebidas, entende o objetivo do cliente, verifica documentos disponíveis e identifica o melhor caminho técnico para avançar."],
                ["03", "Visita técnica, quando necessária", "Quando o serviço exige avaliação presencial, realizamos visita técnica para levantar condições existentes, verificar quadros, infraestrutura, entrada de energia, cabines, cargas ou pontos críticos da instalação."],
                ["04", "Proposta técnica e comercial", "Com base nas informações recebidas e/ou no levantamento em campo, elaboramos uma proposta com escopo definido, premissas técnicas, prazo estimado e condições comerciais."],
                ["05", "Projeto executivo ou planejamento de execução", "Após a aprovação, desenvolvemos o projeto executivo, quando aplicável, ou o planejamento de execução do serviço, com etapas, cronograma, equipe envolvida e documentação necessária."],
                ["06", "Execução do serviço", "A obra, manutenção, inspeção, laudo ou adequação é realizada com equipe técnica, seguindo o escopo aprovado, as normas aplicáveis e os critérios de segurança."],
                ["07", "Entrega, validação e documentação", "Após a conclusão, o serviço é entregue para avaliação do cliente. Em seguida, entregamos a documentação técnica aplicável e emitimos ART quando prevista no escopo contratado."]].
                map(([n, t, b]) =>
                <li key={n}>
                    <div className="ge-svc-detail__flow-num ge-mono">{n}</div>
                    <div>
                      <div className="ge-svc-detail__flow-title">{t}</div>
                      <div className="ge-svc-detail__flow-body">{b}</div>
                    </div>
                  </li>
                )}
              </ol>
            </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 }}>Pronto para iniciar a engenharia desse projeto?</h2>
              <p className="ge-cta-block__sub">Análise técnica inicial sem custo. Envie a documentação básica e nossa engenharia retorna 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")} style={{ padding: "16px 24px" }}>Solicitar análise técnica <GEIcon name="arrow" size={16} /></button>
              <a className="ge-btn ge-btn--ghost-light" href={`https://wa.me/${data.brand.phoneRaw}`} target="_blank" rel="noopener" style={{ padding: "16px 24px", justifyContent: "center" }}>
                <GEIcon name="whatsapp" size={18} /> Falar com engenharia
              </a>
            </div>
          </div>
        </div>
      </section>
    </main>);

}

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