/* eslint-disable */
// Godoy Engenharia — shared components (icons, nav, footer, whatsapp, form, placeholders, diagrams)

const { useState, useEffect, useRef } = React;

/* ─────────────────────────────────────────────
   ICONS — simple, technical, single-stroke
   ───────────────────────────────────────────── */

const GEIcon = ({ name, size = 24, stroke = 1.6 }) => {
  const common = {
    width: size,
    height: size,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: stroke,
    strokeLinecap: "round",
    strokeLinejoin: "round"
  };
  const paths = {
    panel: <g><rect x="3" y="4" width="18" height="16" rx="1" /><line x1="3" y1="9" x2="21" y2="9" /><circle cx="7" cy="6.5" r="0.5" fill="currentColor" /><circle cx="9.5" cy="6.5" r="0.5" fill="currentColor" /><line x1="6" y1="13" x2="10" y2="13" /><line x1="6" y1="16" x2="10" y2="16" /><line x1="13" y1="13" x2="18" y2="13" /><line x1="13" y1="16" x2="18" y2="16" /></g>,
    power: <g><path d="M12 3v6" /><path d="M5 9a7 7 0 1 0 14 0" /><path d="M5 9h14" /></g>,
    bolt: <g><path d="M13 3 4 14h6l-1 7 9-11h-6l1-7Z" /></g>,
    expand: <g><path d="M4 9V4h5" /><path d="M20 9V4h-5" /><path d="M4 15v5h5" /><path d="M20 15v5h-5" /></g>,
    retrofit: <g><path d="M3 12a9 9 0 0 1 15-6.7L21 8" /><path d="M21 4v4h-4" /><path d="M21 12a9 9 0 0 1-15 6.7L3 16" /><path d="M3 20v-4h4" /></g>,
    lightning: <g><path d="M12 2 4 14h6l-2 8 10-12h-6l2-8Z" /></g>,
    warehouse: <g><path d="M3 21V9l9-5 9 5v12" /><path d="M3 21h18" /><path d="M8 21v-7h8v7" /><path d="M11 14v3" /></g>,
    logistics: <g><rect x="1" y="7" width="14" height="10" /><path d="M15 10h5l3 3v4h-8" /><circle cx="6" cy="19" r="2" /><circle cx="18" cy="19" r="2" /></g>,
    arrow: <g><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></g>,
    arrowUpRight: <g><line x1="7" y1="17" x2="17" y2="7" /><polyline points="7 7 17 7 17 17" /></g>,
    flask: <g><path d="M9 3h6" /><path d="M10 3v6L4 20a2 2 0 0 0 2 3h12a2 2 0 0 0 2-3l-6-11V3" /><line x1="7" y1="15" x2="17" y2="15" /></g>,
    car: <g><path d="M3 13l2-5h14l2 5" /><rect x="2" y="13" width="20" height="6" rx="1" /><circle cx="7" cy="18" r="1.5" /><circle cx="17" cy="18" r="1.5" /></g>,
    truck: <g><rect x="1" y="6" width="14" height="11" /><path d="M15 10h5l3 3v4h-8" /><circle cx="6" cy="18" r="2" /><circle cx="18" cy="18" r="2" /></g>,
    tower: <g><path d="M6 21V3h12v18" /><line x1="6" y1="7" x2="18" y2="7" /><line x1="6" y1="12" x2="18" y2="12" /><line x1="6" y1="17" x2="18" y2="17" /><line x1="10" y1="21" x2="10" y2="17" /><line x1="14" y1="21" x2="14" y2="17" /></g>,
    rail: <g><rect x="4" y="3" width="16" height="14" rx="2" /><line x1="4" y1="11" x2="20" y2="11" /><circle cx="8" cy="14" r="1" /><circle cx="16" cy="14" r="1" /><line x1="6" y1="21" x2="10" y2="17" /><line x1="18" y1="21" x2="14" y2="17" /></g>,
    cabine: <g><rect x="3" y="3" width="18" height="18" rx="1" /><line x1="3" y1="8" x2="21" y2="8" /><polyline points="7 12 9 14 7 16" /><polyline points="17 12 15 14 17 16" /><circle cx="12" cy="14" r="1.6" fill="currentColor" /><line x1="12" y1="3" x2="12" y2="1" /></g>,
    laudo: <g><path d="M6 3h9l4 4v14H6z" /><polyline points="15 3 15 7 19 7" /><line x1="9" y1="12" x2="16" y2="12" /><line x1="9" y1="15" x2="16" y2="15" /><line x1="9" y1="18" x2="13" y2="18" /></g>,
    check: <g><polyline points="4 12 10 18 20 6" /></g>,
    star: <g fill="currentColor" stroke="none"><path d="M12 2.5l2.9 5.9 6.5.95-4.7 4.6 1.1 6.5-5.8-3.06L6.2 20.5l1.1-6.5-4.7-4.6 6.5-.95L12 2.5Z" /></g>,
    google: <g stroke="none"><path fill="#4285F4" d="M21.6 12.22c0-.64-.06-1.25-.16-1.84H12v3.48h5.38a4.6 4.6 0 0 1-1.99 3.02v2.5h3.22c1.88-1.74 2.99-4.3 2.99-7.16Z" /><path fill="#34A853" d="M12 22c2.7 0 4.96-.9 6.61-2.42l-3.22-2.5c-.9.6-2.04.95-3.39.95-2.6 0-4.8-1.76-5.59-4.12H3.09v2.59A9.99 9.99 0 0 0 12 22Z" /><path fill="#FBBC05" d="M6.41 13.91a5.99 5.99 0 0 1 0-3.82V7.5H3.09a10 10 0 0 0 0 9l3.32-2.59Z" /><path fill="#EA4335" d="M12 6.96c1.47 0 2.79.5 3.83 1.5l2.85-2.85C16.95 3.99 14.7 3.1 12 3.1A9.99 9.99 0 0 0 3.09 7.5l3.32 2.59C7.2 8.72 9.4 6.96 12 6.96Z" /></g>,
    whatsapp: <g fill="currentColor" stroke="none"><path d="M20.5 3.5A10.6 10.6 0 0 0 3.4 16.7L2 22l5.5-1.4a10.6 10.6 0 0 0 5 1.3h.1A10.6 10.6 0 0 0 23 11.3a10.5 10.5 0 0 0-2.5-7.8Zm-7.9 16.3a8.8 8.8 0 0 1-4.5-1.2l-.3-.2-3.3.9.9-3.2-.2-.3a8.8 8.8 0 1 1 7.5 4Zm4.8-6.6c-.3-.1-1.6-.8-1.8-.9-.2-.1-.4-.1-.6.1l-.8 1c-.2.2-.3.2-.5.1-.3-.1-1.2-.4-2.2-1.4-.8-.7-1.4-1.6-1.5-1.9-.2-.3 0-.4.1-.6l.4-.5.3-.4c.1-.2.1-.3 0-.5l-.8-1.9c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.3-.2.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3 4.7 4.1.7.3 1.2.5 1.6.6.7.2 1.3.2 1.7.1.5-.1 1.6-.7 1.8-1.3.2-.6.2-1.2.2-1.3-.1-.1-.3-.2-.5-.3Z" /></g>,
    linkedin: <g><rect x="3" y="3" width="18" height="18" rx="1.5" /><line x1="7" y1="10" x2="7" y2="17" /><circle cx="7" cy="7" r="0.8" fill="currentColor" /><path d="M11 17v-7M11 13a3 3 0 0 1 6 0v4" /></g>,
    instagram: <g><rect x="3" y="3" width="18" height="18" rx="4" /><circle cx="12" cy="12" r="4" /><circle cx="17.2" cy="6.8" r="0.7" fill="currentColor" /></g>,
    mail: <g><rect x="3" y="5" width="18" height="14" rx="1" /><polyline points="3 7 12 13 21 7" /></g>,
    close: <g><line x1="6" y1="6" x2="18" y2="18" /><line x1="6" y1="18" x2="18" y2="6" /></g>,
    menu: <g><line x1="4" y1="7" x2="20" y2="7" /><line x1="4" y1="12" x2="20" y2="12" /><line x1="4" y1="17" x2="20" y2="17" /></g>
  };
  return <svg {...common}>{paths[name] || null}</svg>;
};

/* ─────────────────────────────────────────────
   PLACEHOLDER MEDIA
   ───────────────────────────────────────────── */

function GEPlaceholder({ label, corner, dark = false, children, style, img, imgAlt, imgTitle, imgW, imgH, eager = false }) {
  // If a real image basename is provided, render an SEO <picture> tag.
  // Files are expected at /img/{hero,servicos,mobile,thumbs}/{img}.webp
  // If the file doesn't exist yet (placeholder photos), fall back to a clean label.
  const [imgFailed, setImgFailed] = useState(false);
  // Retry transient load failures (server hiccups under concurrent load)
  // with a small backoff before showing the text fallback.
  const [retry, setRetry] = useState(0);
  const MAX_RETRIES = 4;
  const handleError = () => {
    if (retry < MAX_RETRIES) {
      const next = retry + 1;
      setTimeout(() => setRetry(next), 400 * next);
    } else {
      setImgFailed(true);
    }
  };
  const bust = retry > 0 ? `?r=${retry}` : "";
  if (img && !imgFailed) {
    return (
      <figure className={"ge-ph ge-ph--img" + (dark ? " ge-ph--dark" : "")} style={style}>
        {corner ? <div className="ge-ph__corner">{corner}</div> : null}
        <picture key={retry}>
          <source media="(max-width: 640px)" srcSet={`img/mobile/${img}.webp${bust}`} type="image/webp" />
          <source media="(max-width: 1100px)" srcSet={`img/servicos/${img}.webp${bust}`} type="image/webp" />
          <img
            src={`img/hero/${img}.webp${bust}`}
            alt={imgAlt || label}
            title={imgTitle || imgAlt || label}
            width={imgW || 1672}
            height={imgH || 941}
            loading={eager ? "eager" : "lazy"}
            decoding="async"
            fetchpriority={eager ? "high" : "auto"}
            className="ge-ph__img"
            onError={handleError} />
          
        </picture>
        {imgTitle ? <figcaption className="ge-ph__caption">{imgTitle}</figcaption> : null}
      </figure>);

  }
  return (
    <div className={"ge-ph" + (dark ? " ge-ph--dark" : "")} style={style}>
      {corner ? <div className="ge-ph__corner">{corner}</div> : null}
      {children}
      <div className="ge-ph__label">[ {label} ]</div>
    </div>);

}

/* ─────────────────────────────────────────────
   TECHNICAL DIAGRAMS (SVG) — used in hero / scope
   ───────────────────────────────────────────── */

function GEDiagramUnifilar() {
  // Single-line diagram: utility → meter → main breaker → busbar → loads
  return (
    <svg className="ge-diagram" viewBox="0 0 480 600" preserveAspectRatio="xMidYMid meet">
      <defs>
        <marker id="ge-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M0,0 L10,5 L0,10 z" fill="rgba(255,255,255,0.4)" />
        </marker>
      </defs>
      {/* Utility source */}
      <g>
        <circle cx="240" cy="50" r="20" className="ge-diagram__line" strokeWidth="1.4" />
        <text x="240" y="54" textAnchor="middle" className="ge-diagram__label-strong">~</text>
        <text x="240" y="92" textAnchor="middle">Concessionária · 13,8 kV</text>
      </g>
      <line x1="240" y1="70" x2="240" y2="120" className="ge-diagram__line" strokeWidth="1.4" />
      {/* Meter */}
      <g>
        <rect x="210" y="120" width="60" height="40" className="ge-diagram__line" strokeWidth="1.4" />
        <text x="240" y="144" textAnchor="middle" className="ge-diagram__label-strong">kWh</text>
        <text x="290" y="144">Medição MT</text>
      </g>
      <line x1="240" y1="160" x2="240" y2="200" className="ge-diagram__line" strokeWidth="1.4" />
      {/* Main breaker */}
      <g>
        <line x1="240" y1="200" x2="240" y2="230" className="ge-diagram__line" strokeWidth="1.4" />
        <line x1="240" y1="200" x2="260" y2="220" className="ge-diagram__green" strokeWidth="1.8" />
        <circle cx="240" cy="200" r="2.5" className="ge-diagram__dot" />
        <circle cx="240" cy="230" r="2.5" className="ge-diagram__dot" />
        <text x="290" y="218">Disjuntor geral</text>
      </g>
      <line x1="240" y1="230" x2="240" y2="280" className="ge-diagram__line" strokeWidth="1.4" />
      {/* Transformer */}
      <g>
        <circle cx="240" cy="295" r="14" className="ge-diagram__line" strokeWidth="1.4" />
        <circle cx="240" cy="315" r="14" className="ge-diagram__line" strokeWidth="1.4" />
        <text x="290" y="312">Trafo 1.000 kVA</text>
        <text x="290" y="326">13,8 kV / 380 V</text>
      </g>
      <line x1="240" y1="329" x2="240" y2="370" className="ge-diagram__line" strokeWidth="1.4" />
      {/* Busbar */}
      <line x1="80" y1="370" x2="400" y2="370" className="ge-diagram__green" strokeWidth="2.4" />
      <text x="80" y="362">Barramento principal — 380 V</text>
      {/* Loads */}
      {[100, 180, 260, 340].map((x, i) =>
      <g key={i}>
          <line x1={x} y1="370" x2={x} y2="420" className="ge-diagram__line" strokeWidth="1.4" />
          <rect x={x - 16} y="420" width="32" height="24" className="ge-diagram__line" strokeWidth="1.4" />
          <text x={x} y="436" textAnchor="middle" className="ge-diagram__label-strong">{["Q1", "Q2", "Q3", "Q4"][i]}</text>
          <text x={x} y="464" textAnchor="middle">{["Força", "Ilum.", "CCM", "Reserva"][i]}</text>
          <text x={x} y="480" textAnchor="middle">{["250 A", "100 A", "400 A", "150 A"][i]}</text>
        </g>
      )}
      {/* Side legends */}
      <g>
        <text x="20" y="540" className="ge-diagram__label-strong">DIAGRAMA UNIFILAR</text>
        <text x="20" y="558">PROJ. GE-2026/14 · REV. 02</text>
        <text x="20" y="574">ENG. RESP. CREA-SP · ART QUANDO PREVISTA</text>
      </g>
      <g>
        <text x="460" y="540" textAnchor="end">NBR 14039</text>
        <text x="460" y="558" textAnchor="end">NBR 5410</text>
        <text x="460" y="574" textAnchor="end">NR-10</text>
      </g>
    </svg>);

}

function GEDiagramGalpao() {
  // Top-down warehouse layout with electrical zones
  return (
    <svg className="ge-diagram" viewBox="0 0 480 600" preserveAspectRatio="xMidYMid meet">
      {/* outer building */}
      <rect x="40" y="80" width="400" height="440" className="ge-diagram__line" strokeWidth="1.6" />
      <text x="40" y="68" className="ge-diagram__label-strong">PLANTA — GALPÃO INDUSTRIAL 4.500 m²</text>

      {/* grid */}
      {[120, 200, 280, 360, 440].map((x) =>
      <line key={"v" + x} x1={x} y1="80" x2={x} y2="520" stroke="rgba(255,255,255,0.08)" strokeDasharray="2 4" />
      )}
      {[140, 220, 300, 380, 460].map((y) =>
      <line key={"h" + y} x1="40" y1={y} x2="440" y2={y} stroke="rgba(255,255,255,0.08)" strokeDasharray="2 4" />
      )}

      {/* Sala elétrica */}
      <g>
        <rect x="40" y="80" width="120" height="60" className="ge-diagram__line" strokeWidth="1.4" fill="rgba(45,212,126,0.06)" />
        <text x="100" y="106" textAnchor="middle" className="ge-diagram__label-strong">SALA ELÉTRICA</text>
        <text x="100" y="122" textAnchor="middle">CCM · QGBT · UPS</text>
      </g>

      {/* Production bays */}
      {[0, 1, 2].map((i) =>
      <g key={i}>
          <rect x={70 + i * 120} y={180} width="90" height="120" className="ge-diagram__line" strokeWidth="1.2" strokeDasharray="3 3" />
          <text x={115 + i * 120} y={246} textAnchor="middle">BAY {String(i + 1).padStart(2, "0")}</text>
        </g>
      )}

      {/* Bandejamento horizontal (green line) */}
      <g>
        <line x1="60" y1="160" x2="420" y2="160" className="ge-diagram__green" strokeWidth="2" />
        <text x="430" y="164" textAnchor="end" className="ge-diagram__label-strong" fill="#2dd47e">EC-01 · BANDEJAMENTO ALIMENTADORES</text>
      </g>

      {/* Vertical risers */}
      {[120, 240, 360].map((x, i) =>
      <g key={"r" + x}>
          <line x1={x} y1="160" x2={x} y2={340 + i * 20} className="ge-diagram__green" strokeWidth="1.6" />
          <circle cx={x} cy="160" r="3" className="ge-diagram__dot" />
          <rect x={x - 18} y={340 + i * 20} width="36" height="22" className="ge-diagram__line" strokeWidth="1.2" />
          <text x={x} y={356 + i * 20} textAnchor="middle" className="ge-diagram__label-strong">Q{i + 1}</text>
        </g>
      )}

      {/* Doca / acesso */}
      <g>
        <rect x="380" y="430" width="60" height="90" className="ge-diagram__line" strokeWidth="1.2" />
        <text x="410" y="478" textAnchor="middle">DOCA</text>
      </g>

      {/* SPDA marker */}
      <g>
        <circle cx="440" cy="80" r="6" fill="none" className="ge-diagram__green" strokeWidth="1.8" />
        <line x1="440" y1="68" x2="440" y2="76" className="ge-diagram__green" strokeWidth="1.6" />
        <text x="440" y="56" textAnchor="end">SPDA</text>
      </g>
      <g>
        <circle cx="40" cy="520" r="6" fill="none" className="ge-diagram__green" strokeWidth="1.8" />
        <line x1="40" y1="520" x2="40" y2="540" className="ge-diagram__green" strokeWidth="1.6" />
        <text x="40" y="556">ATERRAMENTO · R &lt; 10 Ω</text>
      </g>

      {/* Footer */}
      <g>
        <text x="40" y="560">ESCALA 1:200 · PROJ. GE-2026/22</text>
        <text x="440" y="560" textAnchor="end">REV. 03 · 14/05/2026</text>
      </g>
    </svg>);

}

function GEDiagramSpda() {
  return (
    <svg className="ge-diagram" viewBox="0 0 480 600" preserveAspectRatio="xMidYMid meet">
      <text x="40" y="48" className="ge-diagram__label-strong">SPDA — GAIOLA DE FARADAY</text>
      <text x="40" y="64">NBR 5419 · NÍVEL DE PROTEÇÃO III</text>
      {/* Building silhouette */}
      <polygon points="80,420 240,300 400,420 400,500 80,500" className="ge-diagram__line" strokeWidth="1.6" fill="rgba(255,255,255,0.02)" />
      {/* Captors */}
      {[120, 180, 240, 300, 360].map((x) =>
      <g key={x}>
          <line x1={x} y1={420 - Math.abs(x - 240) * 0.75} x2={x} y2={400 - Math.abs(x - 240) * 0.75} className="ge-diagram__green" strokeWidth="1.6" />
          <circle cx={x} cy={400 - Math.abs(x - 240) * 0.75} r="3" className="ge-diagram__dot" />
        </g>
      )}
      {/* Mesh */}
      <polyline points="120,420 180,375 240,300 300,375 360,420" className="ge-diagram__green" strokeWidth="1.4" fill="none" />
      <polyline points="120,420 180,420 240,420 300,420 360,420" className="ge-diagram__green" strokeWidth="1.4" fill="none" />
      {/* Descidas */}
      <line x1="100" y1="430" x2="100" y2="540" className="ge-diagram__green" strokeWidth="1.8" />
      <line x1="380" y1="430" x2="380" y2="540" className="ge-diagram__green" strokeWidth="1.8" />
      {/* Caixa de inspeção */}
      <rect x="86" y="540" width="28" height="18" className="ge-diagram__line" strokeWidth="1.4" />
      <rect x="366" y="540" width="28" height="18" className="ge-diagram__line" strokeWidth="1.4" />
      <text x="100" y="572" textAnchor="middle">CX. INSP.</text>
      <text x="380" y="572" textAnchor="middle">CX. INSP.</text>
      {/* Aterramento */}
      <line x1="60" y1="565" x2="420" y2="565" className="ge-diagram__green" strokeWidth="1.4" strokeDasharray="2 3" />
      <text x="240" y="580" textAnchor="middle">MALHA DE ATERRAMENTO PERIMETRAL</text>

      {/* Side annotations */}
      <text x="60" y="120">CAPTORES</text>
      <text x="60" y="136" className="ge-diagram__label-strong">FRANKLIN · h=300 mm</text>
      <text x="60" y="170">MALHA</text>
      <text x="60" y="186" className="ge-diagram__label-strong">CU NU 35 mm²</text>
      <text x="60" y="220">DESCIDAS</text>
      <text x="60" y="236" className="ge-diagram__label-strong">CU NU 50 mm²</text>
      <text x="60" y="270">RESISTÊNCIA</text>
      <text x="60" y="286" className="ge-diagram__label-strong" fill="#2dd47e">&lt; 5 Ω</text>
    </svg>);

}

/* ─────────────────────────────────────────────
   NAV
   ───────────────────────────────────────────── */

function GENav({ route, go, services, brand }) {
  const [openMenu, setOpenMenu] = useState(false);
  const [openMobile, setOpenMobile] = useState(false);
  const [openMobileSvc, setOpenMobileSvc] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const ref = useRef(null);
  const isService = route.startsWith("servico/");

  useEffect(() => {
    const onClickOutside = (e) => {
      if (ref.current && !ref.current.contains(e.target)) setOpenMenu(false);
    };
    document.addEventListener("mousedown", onClickOutside);
    return () => document.removeEventListener("mousedown", onClickOutside);
  }, []);

  // Lock body scroll when mobile menu open
  useEffect(() => {
    document.body.style.overflow = openMobile ? "hidden" : "";
    return () => {document.body.style.overflow = "";};
  }, [openMobile]);

  // Sombra/realce do header ao rolar a página
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const navigate = (path) => {
    setOpenMenu(false);
    setOpenMobile(false);
    setOpenMobileSvc(false);
    go(path);
  };

  return (
    <nav className={"ge-nav" + (scrolled ? " is-scrolled" : "")}>
      <div className="ge-container ge-nav__inner">
        <button className="ge-nav__brand" onClick={() => navigate("home")} style={{ background: "none", border: "none", padding: 0, cursor: "pointer" }} aria-label="Godoy Engenharia — Início">
          <img src="assets/logo-horizontal.webp" alt="Godoy Engenharia" />
        </button>
        <div className="ge-nav__links" ref={ref}>
          <button className={"ge-nav__link" + (route === "home" ? " is-active" : "")} onClick={() => navigate("home")}>Início</button>
          <button className={"ge-nav__link" + (route === "quem-somos" ? " is-active" : "")} onClick={() => navigate("quem-somos")}>Empresa</button>
          <div className="ge-nav__group" onMouseLeave={() => setOpenMenu(false)}>
            <button
              className={"ge-nav__link" + (isService || openMenu ? " is-active" : "")}
              onClick={() => setOpenMenu((v) => !v)}
              onMouseEnter={() => setOpenMenu(true)}
              aria-expanded={openMenu}
              data-ge-cta="menu_services"
              data-ge-loc="header">
              Serviços <span style={{ marginLeft: 4, fontSize: 10, opacity: 0.7 }}>▾</span></button>
            <div className={"ge-nav__menu" + (openMenu ? " is-open" : "")}>
              {services.map((s) =>
              <button key={s.slug} className="ge-nav__menu-item" onClick={() => navigate("servico/" + s.slug)}>
                  <span className="ge-nav__menu-item-title">{s.title}</span>
                  <span className="ge-nav__menu-item-desc">{s.short.slice(0, 84)}{s.short.length > 84 ? "…" : ""}</span>
                </button>
              )}
            </div>
          </div>
          <button className={"ge-nav__link" + (route === "obras" ? " is-active" : "")} onClick={() => navigate("obras")}>Obras realizadas</button>
          <button className={"ge-nav__link" + ((route === "informacoes" || route.startsWith("info/")) ? " is-active" : "")} onClick={() => navigate("informacoes")}>Informações</button>
          <button className={"ge-nav__link" + (route === "faq" ? " is-active" : "")} onClick={() => navigate("faq")}>FAQ</button>
          <button className={"ge-nav__link" + (route.startsWith("blog") ? " is-active" : "")} onClick={() => navigate("blog")}>Blog</button>
          <button className={"ge-nav__link" + (route === "contato" ? " is-active" : "")} onClick={() => navigate("contato")}>Contato</button>
          <a
            className="ge-btn ge-btn--ghost ge-nav__cta-secondary"
            data-ge-cta="email"
            data-ge-loc="header"
            href={`mailto:contato@godoyeng.com.br?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.")}`}
            style={{ padding: "9px 14px", fontSize: "12px", fontFamily: "Manrope" }}>
            <GEIcon name="mail" size={14} stroke={1.7} /> contato@godoyeng.com.br
          </a>
          <a
            className="ge-nav__phone ge-nav__cta-secondary"
            data-ge-cta="whatsapp"
            data-ge-loc="header"
            href={`https://wa.me/${brand.phoneRaw}?text=${encodeURIComponent("Olá, gostaria de falar com a engenharia sobre uma demanda elétrica.")}`}
            target="_blank"
            rel="noopener"
            aria-label={`WhatsApp ${brand.phone}`}>
            <GEIcon name="whatsapp" size={15} stroke={1.7} />
            <span style={{ fontSize: "12px", fontFamily: "Manrope" }}>{brand.phone}</span>
          </a>
        </div>

        {/* Mobile hamburger */}
        <button className="ge-nav__hamburger" onClick={() => setOpenMobile((v) => !v)} aria-label={openMobile ? "Fechar menu" : "Abrir menu"} aria-expanded={openMobile}>
          <GEIcon name={openMobile ? "close" : "menu"} size={22} stroke={1.8} />
        </button>
      </div>

      {/* Mobile menu overlay — portal no body para escapar do containing block do nav (backdrop-filter) */}
      {ReactDOM.createPortal(
        <div className={"ge-nav__mobile" + (openMobile ? " is-open" : "")} role="dialog" aria-hidden={!openMobile}>
        <div className="ge-nav__mobile-inner">
          <button className="ge-nav__mobile-link" onClick={() => navigate("home")}>Início</button>
          <button className="ge-nav__mobile-link" onClick={() => navigate("quem-somos")}>Empresa</button>
          <button className="ge-nav__mobile-link ge-nav__mobile-link--toggle" onClick={() => setOpenMobileSvc((v) => !v)} aria-expanded={openMobileSvc} data-ge-cta="menu_services" data-ge-loc="mobile-menu">
            Serviços <span style={{ fontSize: 12, opacity: 0.6 }}>{openMobileSvc ? "▴" : "▾"}</span>
          </button>
          {openMobileSvc &&
            <div className="ge-nav__mobile-sub">
              {services.map((s) =>
              <button key={s.slug} onClick={() => navigate("servico/" + s.slug)}>{s.title}</button>
              )}
            </div>
            }
          <button className="ge-nav__mobile-link" onClick={() => navigate("obras")}>Obras realizadas</button>
          <button className="ge-nav__mobile-link" onClick={() => navigate("informacoes")}>Informações</button>
          <button className="ge-nav__mobile-link" onClick={() => navigate("faq")}>FAQ</button>
          <button className="ge-nav__mobile-link" onClick={() => navigate("blog")}>Blog</button>
          <button className="ge-nav__mobile-link" onClick={() => navigate("contato")}>Contato</button>
          <div style={{ marginTop: 20, paddingTop: 20, borderTop: "1px solid var(--ge-line)", display: "flex", flexDirection: "column", gap: 10 }}>
            <button className="ge-btn ge-btn--primary" style={{ width: "100%", justifyContent: "center" }} onClick={() => navigate("contato")} data-ge-cta="menu_contact" data-ge-loc="mobile-menu">Falar com engenharia</button>
            <a className="ge-btn ge-btn--ghost" style={{ width: "100%", justifyContent: "center" }} data-ge-cta="phone" data-ge-loc="mobile-menu"
              href={`tel:+${brand.phoneRaw}`} onClick={() => setOpenMobile(false)}>
              <GEIcon name="whatsapp" size={16} stroke={1.7} /> {brand.phone}
            </a>
            <a className="ge-btn ge-btn--ghost" style={{ width: "100%", justifyContent: "center" }} data-ge-cta="email" data-ge-loc="mobile-menu"
              href={`mailto:contato@godoyeng.com.br?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.")}`}
              onClick={() => setOpenMobile(false)}>
              <GEIcon name="mail" size={16} stroke={1.7} /> contato@godoyeng.com.br
            </a>
          </div>
        </div>
        </div>,
        document.body
      )}
    </nav>);

}

/* ─────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────── */

function GEFooter({ go, services, brand }) {
  return (
    <footer className="ge-footer">
      <div className="ge-container">
        <div className="ge-footer__grid">
          <div>
            <div style={{ marginBottom: 24, display: "flex", alignItems: "center", width: "fit-content" }}>
              <img src="assets/logo-horizontal-white.webp" alt="Godoy Engenharia" style={{ height: 72, width: "auto", display: "block" }} />
            </div>
            <p style={{ fontSize: 14, lineHeight: 1.6, color: "rgba(255,255,255,0.55)", maxWidth: 360 }}>
              Engenharia elétrica para demandas empresariais em todo o estado de São Paulo — projeto, laudo, SPDA, cabine primária, entrada de energia e instalações com responsabilidade técnica.
            </p>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 20 }}>
              <span className="ge-footer__norm-label ge-mono">NORMAS</span>
              {["NBR 5410", "NBR 14039", "NBR 5419", "NR-10"].map((n) =>
              <span key={n} className="ge-mono" style={{ padding: "5px 9px", border: "1px solid rgba(255,255,255,0.14)", color: "rgba(255,255,255,0.7)", fontSize: 10 }}>{n}</span>
              )}
            </div>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 8, alignItems: "center" }}>
              <span className="ge-footer__norm-label ge-mono">RESPONSABILIDADE</span>
              {["ART", "CREA-SP"].map((n) =>
              <span key={n} className="ge-mono" style={{ padding: "5px 9px", border: "1px solid rgba(46,138,82,0.4)", color: "var(--ge-green-bright)", fontSize: 10 }}>{n}</span>
              )}
            </div>
          </div>
          <div>
            <div className="ge-footer__col-title">Serviços</div>
            {services.map((s) =>
            <button key={s.slug} onClick={() => go("servico/" + s.slug)}>{s.title}</button>
            )}
            <button onClick={() => go("informacoes")}>Informações técnicas</button>
          </div>
          <div>
            <div className="ge-footer__col-title">Empresa</div>
            <button onClick={() => go("quem-somos")}>Empresa</button>
            <button onClick={() => go("obras")}>Obras realizadas</button>
            <button onClick={() => go("informacoes")}>Informações</button>
            <button onClick={() => go("faq")}>FAQ</button>
            <button onClick={() => go("blog")}>Blog</button>
            <button onClick={() => go("regioes-atendidas")}>Regiões atendidas</button>
            <button onClick={() => go("contato")}>Contato</button>
          </div>
          <div>
            <div className="ge-footer__col-title">Contato</div>
            <a href={`tel:+${brand.phoneRaw}`}>{brand.phone}</a>
            <a href={`mailto:${brand.email}`} data-ge-cta="email" data-ge-loc="footer">{brand.email}</a>
            <div style={{ marginTop: 12, color: "rgba(255,255,255,0.55)", lineHeight: 1.6 }}>
              {brand.city}<br />
              {brand.coverage}
            </div>
            <div style={{ marginTop: 20 }}>
              <a href={`https://wa.me/${brand.phoneRaw}`} target="_blank" rel="noopener" data-ge-cta="whatsapp" data-ge-loc="footer" style={{ display: "inline-flex", alignItems: "center", gap: 8, color: "var(--ge-green-bright)", fontFamily: "var(--ge-display)", fontWeight: 600 }}>
                <GEIcon name="whatsapp" size={18} /> Falar com engenharia
              </a>
            </div>
            <div className="ge-footer__social">
              <div className="ge-footer__social-label ge-mono">Canais institucionais</div>
              <ul className="ge-footer__social-list">
                <li>
                  <a href={`mailto:${brand.email}`} data-ge-cta="email" data-ge-loc="footer-social" aria-label="E-mail institucional">
                    <GEIcon name="mail" size={16} stroke={1.6} />
                    <span className="ge-footer__social-kind">E-mail</span>
                    <span className="ge-footer__social-handle">{brand.email}</span>
                  </a>
                </li>
                <li>
                  <a href={brand.linkedin} target="_blank" rel="noopener" data-ge-cta="linkedin" data-ge-loc="footer-social" aria-label="LinkedIn da Godoy Engenharia">
                    <GEIcon name="linkedin" size={16} stroke={1.6} />
                    <span className="ge-footer__social-kind">LinkedIn</span>
                    <span className="ge-footer__social-handle">Godoy Engenharia</span>
                  </a>
                </li>
                <li>
                  <a href={brand.instagram} target="_blank" rel="noopener" data-ge-cta="instagram" data-ge-loc="footer-social" aria-label="Instagram da Godoy Engenharia">
                    <GEIcon name="instagram" size={16} stroke={1.6} />
                    <span className="ge-footer__social-kind">Instagram</span>
                    <span className="ge-footer__social-handle">@engenhariagodoy</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div className="ge-footer__bottom">
          <div className="ge-footer__legal">
            <div className="ge-footer__institutional">Godoy Engenharia | CNPJ 20.845.829/0001-00 | CREA-SP 2328912-SP</div>
            <div>© 2026 Godoy Engenharia. Todos os direitos reservados.</div>
          </div>
          <div style={{ display: "flex", gap: 24, alignItems: "center" }}>
            <button onClick={() => go("politica-de-privacidade")} style={{ background: "none", border: "none", color: "inherit", font: "inherit", cursor: "pointer", padding: 0 }}>Política de Privacidade</button>
            <span>{brand.domain}</span>
          </div>
        </div>
      </div>
    </footer>);

}

/* ─────────────────────────────────────────────
   WHATSAPP FLOATING
   ───────────────────────────────────────────── */

function GEWhatsApp({ brand }) {
  const [open, setOpen] = useState(false);
  const [copied, setCopied] = useState(false);
  const msg = encodeURIComponent("Olá, gostaria de falar com a engenharia sobre uma demanda elétrica.");
  const isMobile = typeof navigator !== "undefined" && /android|iphone|ipad|ipod|mobile/i.test(navigator.userAgent || "");
  // wa.me on mobile (opens app), web.whatsapp.com on desktop (works even without app)
  const link = isMobile ?
  `https://wa.me/${brand.phoneRaw}?text=${msg}` :
  `https://web.whatsapp.com/send?phone=${brand.phoneRaw}&text=${msg}`;
  const fallbackLink = `https://wa.me/${brand.phoneRaw}?text=${msg}`;

  const copyPhone = async (e) => {
    e.preventDefault();
    try {
      await navigator.clipboard.writeText(brand.phone);
    } catch (err) {
      // fallback for older browsers
      const ta = document.createElement("textarea");
      ta.value = brand.phone;
      document.body.appendChild(ta);
      ta.select();
      try {document.execCommand("copy");} catch (_) {}
      document.body.removeChild(ta);
    }
    setCopied(true);
    setTimeout(() => setCopied(false), 2200);
  };

  const mailHref = `mailto:${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 (
    <div className="ge-wa">
      {open &&
      <div className="ge-wa__modal" role="dialog" aria-label="Falar com a engenharia">
          <div className="ge-wa__head">
            <div className="ge-wa__avatar">GE</div>
            <div>
              <div className="ge-wa__head-name">Godoy Engenharia</div>
              <div className="ge-wa__head-status">Engenharia · atende em horário comercial</div>
            </div>
            <button className="ge-wa__close" onClick={() => setOpen(false)} aria-label="Fechar">
              <GEIcon name="close" size={14} stroke={2} />
            </button>
          </div>
          <div className="ge-wa__body">
            <div className="ge-wa__bubble">
              Olá! Aqui é da Godoy Engenharia. Conte um pouco da sua demanda elétrica — escopo, porte e localização — que a engenharia retorna com a análise técnica inicial.
              <small>agora</small>
            </div>
          </div>
          <div className="ge-wa__cta">
            <a href={link} target="_blank" rel="noopener" data-ge-cta="whatsapp" data-ge-loc="floating">
              <GEIcon name="whatsapp" size={18} /> Abrir WhatsApp
            </a>
          </div>
          <div className="ge-wa__fallback">
            <div className="ge-wa__fallback-hint">
              Se o WhatsApp não abrir no seu navegador, copie o número ou envie um e-mail.
            </div>
            <div className="ge-wa__fallback-row">
              <button className="ge-wa__copy" onClick={copyPhone} aria-live="polite">
                <span className="ge-wa__copy-num">{brand.phone}</span>
                <span className="ge-wa__copy-action">{copied ? "Copiado!" : "Copiar"}</span>
              </button>
            </div>
            <div className="ge-wa__fallback-row">
              <a href={mailHref} className="ge-wa__alt" data-ge-cta="email" data-ge-loc="floating-fallback">
                <GEIcon name="mail" size={14} stroke={1.7} /> Enviar projeto por e-mail
              </a>
              <a href={fallbackLink} target="_blank" rel="noopener" className="ge-wa__alt" data-ge-cta="whatsapp" data-ge-loc="floating-fallback">
                <GEIcon name="arrowUpRight" size={14} /> wa.me direto
              </a>
            </div>
          </div>
        </div>
      }
      <button className="ge-wa__btn" onClick={() => setOpen((v) => !v)} aria-label="Falar com engenharia" data-ge-cta="whatsapp" data-ge-loc="floating-button">
        <GEIcon name="whatsapp" size={22} />
        <span style={{ fontFamily: "Manrope" }}>Falar com engenharia</span>
      </button>
    </div>);

}

/* ─────────────────────────────────────────────
   FORM — qualifier lead
   ───────────────────────────────────────────── */

// ── Regras de anexo (devem espelhar send-form.php) ───────────────
const GE_MAX_FILES    = 10;
const GE_MAX_PER_FILE = 10 * 1024 * 1024; // 10 MB por arquivo
const GE_MAX_TOTAL    = 25 * 1024 * 1024; // 25 MB no total
const GE_ALLOWED_EXT  = ["pdf","dwg","dxf","doc","docx","xls","xlsx","csv","ppt","pptx","zip","rar","7z","jpg","jpeg","png","webp","txt","rtf"];
const GE_BLOCKED_EXT  = ["exe","bat","cmd","sh","php","phtml","js","html","htm","msi","com","scr","vbs","jar","py","ps1"];
const GE_ACCEPT       = ".pdf,.dwg,.dxf,.doc,.docx,.xls,.xlsx,.csv,.ppt,.pptx,.zip,.rar,.7z,.jpg,.jpeg,.png,.webp,.txt,.rtf";

const geExtOf = (n) => (String(n).split(".").pop() || "").toLowerCase();
const geFmtBytes = (b) => b >= 1024 * 1024 ? (b / (1024 * 1024)).toFixed(1) + " MB" : Math.max(1, Math.round(b / 1024)) + " KB";

function GEForm({ onSent, go, compact = false }) {
  const [data, setData] = useState({
    company: "", phone: "", email: "", message: "", files: [], consent: true
  });
  const [errors, setErrors] = useState({});
  const [sending, setSending] = useState(false);
  const fileRef = useRef(null);

  // Endpoint real de envio. Default: /send-form.php (PHP na Hostinger).
  // Pode ser sobrescrito por window.GE_FORM_ENDPOINT no index.html.
  const FORM_ENDPOINT = typeof window !== "undefined" && window.GE_FORM_ENDPOINT || "/send-form.php";

  // Honeypot anti-spam (campo oculto; preenchido apenas por bots)
  const hpRef = useRef(null);

  const update = (k) => (e) => {
    if (e.target.type === "checkbox") setData({ ...data, [k]: e.target.checked });else
    setData({ ...data, [k]: e.target.value });
  };

  // Seleção de anexos (múltiplos) com validação client-side
  const onFiles = (e) => {
    const list = Array.from(e.target.files || []);
    const clearInput = () => { if (fileRef.current) fileRef.current.value = ""; };

    if (list.length === 0) {
      setData((d) => ({ ...d, files: [] }));
      setErrors((er) => ({ ...er, files: undefined }));
      return;
    }
    // Quantidade
    if (list.length > GE_MAX_FILES) {
      setErrors((er) => ({ ...er, files: "Máximo de 10 arquivos por envio. Compacte os arquivos em ZIP ou RAR e tente novamente, ou envie pelo WhatsApp." }));
      clearInput(); setData((d) => ({ ...d, files: [] }));
      return;
    }
    // Extensão (bloqueia perigosas e qualquer não permitida)
    for (const f of list) {
      const ext = geExtOf(f.name);
      if (!ext || GE_BLOCKED_EXT.includes(ext) || !GE_ALLOWED_EXT.includes(ext)) {
        setErrors((er) => ({ ...er, files: "Tipo de arquivo não permitido. Compacte os arquivos em ZIP ou RAR e tente novamente, ou envie pelo WhatsApp." }));
        clearInput(); setData((d) => ({ ...d, files: [] }));
        return;
      }
    }
    // Tamanho por arquivo e total
    let total = 0;
    for (const f of list) {
      total += f.size;
      if (f.size > GE_MAX_PER_FILE || total > GE_MAX_TOTAL) {
        setErrors((er) => ({ ...er, files: "Os arquivos excedem o limite permitido. Compacte e envie por e-mail ou WhatsApp." }));
        clearInput(); setData((d) => ({ ...d, files: [] }));
        return;
      }
    }
    setErrors((er) => ({ ...er, files: undefined }));
    setData((d) => ({ ...d, files: list }));
  };

  const removeFile = (idx) => {
    setData((d) => ({ ...d, files: d.files.filter((_, i) => i !== idx) }));
    setErrors((er) => ({ ...er, files: undefined }));
    if (fileRef.current) fileRef.current.value = "";
  };

  const validate = () => {
    const e = {};
    if (!data.company.trim()) e.company = "obrigatório";
    if (!data.phone.trim()) e.phone = "obrigatório";
    if (!data.email.trim() || !/^[^@]+@[^@]+\.[^@]+$/.test(data.email)) e.email = "e-mail inválido";
    if (!data.message.trim()) e.message = "obrigatório";
    if (!data.consent) e.consent = "necessário";
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const submit = async (ev) => {
    ev.preventDefault();
    if (!validate()) return;
    setSending(true);

    // Monta payload (FormData — chaves simples em inglês para evitar o
    // mangling do PHP, que troca espaços/pontos por "_" nos nomes de $_POST).
    const fd = new FormData();
    fd.append("company", data.company);
    fd.append("phone", data.phone);
    fd.append("email", data.email);
    fd.append("message", data.message);
    fd.append("origin", typeof location !== "undefined" ? location.href : "");
    // honeypot (vazio para humanos)
    fd.append("website", hpRef.current ? hpRef.current.value : "");
    // Anexos múltiplos — mesmo nome de campo do PHP ($_FILES['anexos'])
    for (const f of data.files) fd.append("anexos[]", f, f.name);

    let ok = false;
    try {
      const res = await fetch(FORM_ENDPOINT, {
        method: "POST",
        body: fd,
        headers: { "Accept": "application/json" }
      });
      // Considera sucesso somente se o backend confirmar { ok: true }
      let json = null;
      try {json = await res.json();} catch (_) {json = null;}
      ok = res.ok && json && json.ok === true;
    } catch (err) {
      ok = false;
    }

    // dataLayer form_submit dispara SOMENTE após envio real confirmado
    if (ok) {
      try {
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
          event: "form_submit",
          form_name: "contato_godoy",
          page_url: location.href,
          page_title: document.title
        });
      } catch (err) {}
      // Google Ads — conversão de Envio de Formulário
      try {
        if (typeof window.gtag === "function") {
          window.gtag("event", "conversion", { send_to: "AW-736387313/36TbCIPcpbUcEPHBkd8C" });
        }
      } catch (err) {}
    }

    setSending(false);
    if (ok) {
      onSent && onSent(data);
      setData({ company: "", phone: "", email: "", message: "", files: [], consent: true });
      if (fileRef.current) fileRef.current.value = "";
    } else {
      setErrors({ submit: "Não foi possível enviar sua mensagem. Tente novamente ou fale pelo WhatsApp." });
    }
  };

  return (
    <form className="ge-form" onSubmit={submit} noValidate action="/send-form.php" method="POST" encType="multipart/form-data">
      <div className={"ge-field ge-field--full" + (errors.company ? " has-error" : "")}>
        <label>Nome da empresa *</label>
        <input value={data.company} onChange={update("company")} placeholder="Razão social ou nome fantasia" autoComplete="organization" />
        {errors.company && <span className="ge-field__error">{errors.company}</span>}
      </div>
      <div className={"ge-field" + (errors.phone ? " has-error" : "")}>
        <label>Telefone / WhatsApp *</label>
        <input value={data.phone} onChange={update("phone")} placeholder="(11) 9 0000-0000" type="tel" inputMode="tel" autoComplete="tel" />
        {errors.phone && <span className="ge-field__error">{errors.phone}</span>}
      </div>
      <div className={"ge-field" + (errors.email ? " has-error" : "")}>
        <label>E-mail *</label>
        <input type="email" inputMode="email" autoComplete="email" value={data.email} onChange={update("email")} placeholder="nome@empresa.com.br" />
        {errors.email && <span className="ge-field__error">{errors.email}</span>}
      </div>
      <div className={"ge-field ge-field--full" + (errors.message ? " has-error" : "")}>
        <label>Mensagem *</label>
        <textarea value={data.message} onChange={update("message")} placeholder="Descreva sua demanda: instalação elétrica, cabine primária, entrada de energia, manutenção, laudo, SPDA, retrofit ou outro serviço."></textarea>
        {errors.message && <span className="ge-field__error">{errors.message}</span>}
      </div>
      <div className="ge-field ge-field--full">
        <label>Anexar projetos, escopos ou arquivos técnicos <span style={{ color: "var(--ge-muted)", fontWeight: 400, textTransform: "none", letterSpacing: 0 }}>(opcional)</span></label>
        <label className={"ge-file" + (errors.files ? " has-error" : "")}>
          <input ref={fileRef} type="file" multiple onChange={onFiles} accept={GE_ACCEPT} />
          <span className="ge-file__inner">
            <GEIcon name="arrowUpRight" size={16} />
            {data.files.length
              ? data.files.length + (data.files.length === 1 ? " arquivo selecionado" : " arquivos selecionados")
              : "Selecionar arquivos (PDF, DWG, Word, Excel, ZIP, RAR, imagens ou documentos técnicos)"}
          </span>
        </label>
        {data.files.length > 0 &&
        <ul className="ge-file__list">
          {data.files.map((f, i) =>
          <li key={i} className="ge-file__item">
            <span className="ge-file__name">{f.name}</span>
            <span className="ge-file__size">{geFmtBytes(f.size)}</span>
            <button type="button" className="ge-file__remove" onClick={() => removeFile(i)} aria-label={"Remover " + f.name}>×</button>
          </li>
          )}
        </ul>
        }
        {errors.files
          ? <span className="ge-field__error" style={{ display: "block", marginTop: 8 }}>{errors.files}</span>
          : <span className="ge-file__support">Você pode anexar plantas, fotos, planilhas, memoriais, escopos ou projetos técnicos. Para muitos arquivos, envie em ZIP ou RAR.</span>}
      </div>
      <div className="ge-form__consent ge-field--full">
        <input type="checkbox" id="consent" checked={data.consent} onChange={update("consent")} />
        <label htmlFor="consent" style={{ textTransform: "none", letterSpacing: 0, fontSize: 13, color: "var(--ge-muted)", fontFamily: "var(--ge-body)" }}>
          Ao enviar este formulário, você concorda com o uso dos dados informados para retorno comercial e técnico da Godoy Engenharia, conforme nossa <a href="/politica-de-privacidade" onClick={(e) => {if (go) {e.preventDefault();go("politica-de-privacidade");}}} style={{ color: "var(--ge-green)", textDecoration: "underline" }}>Política de Privacidade</a>. {errors.consent && <span className="ge-field__error" style={{ marginLeft: 8 }}>{errors.consent}</span>}
        </label>
      </div>
      <div className="ge-field--full" style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 8 }}>
        {errors.submit &&
        <div className="ge-form__submit-error" role="alert">{errors.submit}</div>
        }
        <div style={{ display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
          <button type="submit" className="ge-btn ge-btn--primary" disabled={sending}>
            {sending ? "Enviando…" : "Enviar demanda"} {!sending && <GEIcon name="arrow" size={16} />}
          </button>
        </div>
      </div>

      {/* Honeypot anti-spam — invisível para humanos */}
      <div aria-hidden="true" style={{ position: "absolute", left: "-9999px", width: 1, height: 1, overflow: "hidden" }}>
        <label htmlFor="ge-website">Não preencha este campo</label>
        <input id="ge-website" ref={hpRef} type="text" name="website" tabIndex={-1} autoComplete="off" />
      </div>
    </form>);

}

/* ─────────────────────────────────────────────
   TOAST
   ───────────────────────────────────────────── */

function GEToast({ message, onDone }) {
  useEffect(() => {
    if (!message) return;
    const t = setTimeout(() => onDone(), 4000);
    return () => clearTimeout(t);
  }, [message]);
  if (!message) return null;
  return (
    <div className="ge-toast">
      <GEIcon name="check" size={18} stroke={2.4} />
      {message}
    </div>);

}

/* ─────────────────────────────────────────────
   ACCORDION
   ───────────────────────────────────────────── */

function GEAccordion({ label, children, defaultOpen = false }) {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <div className={"ge-accordion" + (open ? " is-open" : "")}>
      <button className="ge-accordion__head" onClick={() => setOpen((v) => !v)} aria-expanded={open}>
        <span className="ge-accordion__label">{label}</span>
        <span className="ge-accordion__chev" aria-hidden="true">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square">
            <path d="M5 9l7 7 7-7" />
          </svg>
        </span>
      </button>
      <div className="ge-accordion__body" hidden={!open}>
        {children}
      </div>
    </div>);

}

/* expose */
Object.assign(window, {
  GEIcon, GEPlaceholder,
  GEDiagramUnifilar, GEDiagramGalpao, GEDiagramSpda,
  GENav, GEFooter, GEWhatsApp, GEForm, GEToast,
  GEAccordion
});