// CORBEX Engenharia — shared components across all pages
const { Eyebrow, Button, IconButton, Badge, Input, Select, Checkbox } = window.CorbexDesignSystem_40659e;

const CX = {
  wide: "var(--container-wide)",
  phone: "(31) 98430-3845",
  phone2: "(31) 98230-0453",
  wa: "5531984303845",
  email: "contato@corbexengenharia.com.br",
  site: "www.corbexengenharia.com.br",
  addr: "Belo Horizonte · Minas Gerais",
};
window.CX = CX;

const I = (n, props = {}) => <i data-lucide={n} style={{ width: 18, height: 18, display: "inline-flex", ...(props.style || {}) }} {...props}></i>;
window.I = I;

/* ---------- Section heading device ---------- */
function SectionHead({ eyebrow, title, sub, dark = false, align = "left", max = 720, accent }) {
  return (
    <div style={{ maxWidth: max, margin: align === "center" ? "0 auto" : undefined, textAlign: align }}>
      <div style={{ display: "inline-flex", justifyContent: align === "center" ? "center" : "flex-start" }}>
        <Eyebrow color={dark ? "var(--orange-400)" : "var(--orange-500)"}>{eyebrow}</Eyebrow>
      </div>
      <h2 style={{
        fontFamily: "var(--font-display)", fontWeight: "var(--fw-black)",
        fontSize: "var(--text-3xl)", lineHeight: "var(--leading-snug)",
        letterSpacing: "var(--tracking-tight)", margin: "14px 0 0",
        color: dark ? "#fff" : "var(--text-strong)", textWrap: "balance",
      }}>{title}</h2>
      {sub && <p style={{
        fontFamily: "var(--font-body)", fontSize: "var(--text-lg)", lineHeight: "var(--leading-relaxed)",
        margin: "16px 0 0", color: dark ? "var(--navy-200)" : "var(--text-body)", textWrap: "pretty",
      }}>{sub}</p>}
    </div>
  );
}
window.SectionHead = SectionHead;

/* ---------- Datum strip (engineering caption line) ---------- */
function DatumStrip({ items, dark = true }) {
  return (
    <div style={{
      display: "flex", flexWrap: "wrap", gap: "8px 36px", alignItems: "center",
      fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", letterSpacing: "0.08em",
      textTransform: "uppercase", color: dark ? "var(--navy-300)" : "var(--text-muted)",
    }}>
      {items.map((t, i) => (
        <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
          <span style={{ width: 6, height: 6, background: "var(--orange-500)", transform: "rotate(45deg)", flex: "none" }} />
          {t}
        </span>
      ))}
    </div>
  );
}
window.DatumStrip = DatumStrip;

/* ---------- Header (sticky, transparent over dark hero -> frosted) ---------- */
function Header({ active = "home" }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menu, setMenu] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const light = !scrolled; // light text over dark hero
  const links = [
    ["Início", "index.html", "home"],
    ["Serviços", "servicos.html", "servicos"],
    ["Especialidades", "index.html#especialidades", "esp"],
    ["Projetos", "index.html#projetos", "proj"],
    ["Contato", "contato.html", "contato"],
  ];
  return (
    <header style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 60,
      background: scrolled ? "rgba(255,255,255,0.9)" : "transparent",
      backdropFilter: scrolled ? "saturate(140%) blur(12px)" : "none",
      WebkitBackdropFilter: scrolled ? "saturate(140%) blur(12px)" : "none",
      borderBottom: `1px solid ${scrolled ? "var(--border-subtle)" : "transparent"}`,
      transition: "background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard)",
    }}>
      <div style={{
        maxWidth: CX.wide, margin: "0 auto", padding: "14px 32px",
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24,
      }}>
        <a href="index.html" style={{ display: "flex", flex: "none" }}>
          <img src={light ? "assets/logo/corbex-logo-white.png" : "assets/logo/corbex-logo.png"}
            alt="Corbex Engenharia de Segurança" style={{ height: 48, width: "auto", display: "block" }} />
        </a>
        <nav style={{ display: "flex", alignItems: "center", gap: 30 }} className="cx-desktop-nav">
          {links.map(([l, href, id]) => (
            <a key={l} href={href} style={{
              fontFamily: "var(--font-body)", fontWeight: "var(--fw-medium)",
              fontSize: "var(--text-sm)", textDecoration: "none", letterSpacing: "0.01em",
              color: light ? (active === id ? "#fff" : "rgba(255,255,255,0.78)") : (active === id ? "var(--orange-600)" : "var(--text-strong)"),
              borderBottom: active === id ? "2px solid var(--orange-500)" : "2px solid transparent",
              paddingBottom: 3, transition: "color var(--dur-fast)",
            }}>{l}</a>
          ))}
        </nav>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }} className="cx-desktop-nav">
          <a href="contato.html" style={{
            height: 42, padding: "0 18px", display: "inline-flex", alignItems: "center",
            background: "var(--action-bg)", color: "#fff", borderRadius: "var(--radius-md)",
            fontFamily: "var(--font-body)", fontWeight: "var(--fw-semibold)", fontSize: "var(--text-sm)",
            textDecoration: "none", boxShadow: scrolled ? "var(--shadow-sm)" : "none",
          }}>Solicitar diagnóstico</a>
        </div>
        <button aria-label="Menu" onClick={() => setMenu((m) => !m)} className="cx-mobile-burger" style={{
          display: "none", width: 44, height: 44, alignItems: "center", justifyContent: "center",
          background: "transparent", border: "none", cursor: "pointer",
          color: light ? "#fff" : "var(--navy-700)",
        }}>
          <i data-lucide={menu ? "x" : "menu"} style={{ width: 24, height: 24 }}></i>
        </button>
      </div>
      {menu && (
        <div className="cx-mobile-menu" style={{
          display: "none", background: "var(--navy-900)", borderTop: "1px solid var(--border-inverse)",
          padding: "12px 24px 22px",
        }}>
          {links.map(([l, href]) => (
            <a key={l} href={href} onClick={() => setMenu(false)} style={{
              display: "block", padding: "13px 4px", color: "#fff", textDecoration: "none",
              fontFamily: "var(--font-body)", fontWeight: 500, fontSize: "var(--text-md)",
              borderBottom: "1px solid var(--border-inverse)",
            }}>{l}</a>
          ))}
          <a href="contato.html" style={{
            marginTop: 16, height: 48, display: "flex", alignItems: "center", justifyContent: "center",
            background: "var(--action-bg)", color: "#fff", borderRadius: "var(--radius-md)",
            fontFamily: "var(--font-body)", fontWeight: 600, textDecoration: "none",
          }}>Solicitar diagnóstico</a>
        </div>
      )}
    </header>
  );
}
window.Header = Header;

/* ---------- Reusable lead form ---------- */
function LeadForm({ variant = "panel", title = "Solicite um diagnóstico", subtitle }) {
  const dark = variant === "panel";
  const [sent, setSent] = React.useState(false);
  const [touched, setTouched] = React.useState(false);
  const [f, setF] = React.useState({ nome: "", email: "", tel: "", servico: "Proteção coletiva", msg: "" });
  const set = (k) => (e) => setF((s) => ({ ...s, [k]: e.target.value }));
  const emailOk = /^[^@]+@[^@]+\.[^@]+$/.test(f.email);
  const emailErr = touched && !emailOk ? "Informe um e-mail válido" : null;
  // Native POST to /send.php (PHP handles delivery). Block submit only when invalid.
  const submit = (e) => { setTouched(true); if (!(f.nome && emailOk)) { e.preventDefault(); } };
  React.useEffect(() => { window.lucide && lucide.createIcons(); });

  return (
    <div style={{
      background: dark ? "rgba(12,30,48,0.72)" : "var(--surface-card)",
      backdropFilter: dark ? "blur(8px)" : "none",
      border: dark ? "1px solid rgba(255,255,255,0.14)" : "1px solid var(--border-subtle)",
      borderTop: "4px solid var(--orange-500)",
      borderRadius: "var(--radius-xl)", padding: "26px 26px 28px",
      boxShadow: dark ? "0 24px 56px rgba(0,0,0,0.4)" : "var(--shadow-lg)",
    }}>
      {sent ? (
        <div style={{ textAlign: "center", padding: "18px 4px 10px" }}>
          <div style={{ width: 60, height: 60, borderRadius: "50%", background: dark ? "rgba(46,139,87,0.2)" : "var(--success-100)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 16px" }}>
            <i data-lucide="check" style={{ width: 28, height: 28, color: dark ? "#7bd6a3" : "var(--success-600)" }}></i>
          </div>
          <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "var(--text-xl)", margin: 0, color: dark ? "#fff" : "var(--text-strong)" }}>Solicitação enviada</h3>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "var(--text-sm)", margin: "10px 0 0", color: dark ? "var(--navy-200)" : "var(--text-body)" }}>
            Obrigado, {f.nome.split(" ")[0] || "—"}. Nossa equipe de engenharia retorna em até 1 dia útil.
          </p>
        </div>
      ) : (
        <form action="/send.php" method="post" onSubmit={submit}>
          <input type="hidden" name="origem" defaultValue={typeof document !== "undefined" ? document.title : ""} />
          <input type="text" name="website" tabIndex={-1} autoComplete="off" aria-hidden="true" style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0 }} />
          <div style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: "var(--text-2xs)", letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--orange-400)" }}>Orçamento sem compromisso</div>
          <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "var(--text-xl)", margin: "8px 0 0", color: dark ? "#fff" : "var(--text-strong)", lineHeight: 1.15 }}>{title}</h3>
          {subtitle && <p style={{ fontFamily: "var(--font-body)", fontSize: "var(--text-sm)", margin: "8px 0 0", color: dark ? "var(--navy-200)" : "var(--text-muted)" }}>{subtitle}</p>}
          <div style={{ display: "grid", gap: 13, marginTop: 18 }} className={dark ? "cx-form-dark" : ""}>
            <Input name="nome" label="Nome" placeholder="Seu nome" value={f.nome} onChange={set("nome")} required />
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 13 }} className="cx-form-2col">
              <Input name="email" label="E-mail" type="email" placeholder="voce@empresa.com.br" value={f.email} onChange={set("email")} error={emailErr} required />
              <Input name="telefone" label="Telefone / WhatsApp" placeholder="(31) 90000-0000" value={f.tel} onChange={set("tel")} />
            </div>
            <Select name="servico" label="Serviço de interesse" value={f.servico} onChange={set("servico")}>
              <option>Projetos & engenharia consultiva</option>
              <option>Proteção coletiva</option>
              <option>Linhas de vida (NR-35)</option>
              <option>Locação de equipamentos</option>
              <option>Consultoria técnica</option>
            </Select>
            <div>
              <label style={{ display: "block", fontFamily: "var(--font-body)", fontWeight: 600, fontSize: "var(--text-sm)", marginBottom: 6, color: dark ? "var(--navy-100)" : "var(--text-strong)" }}>Mensagem</label>
              <textarea name="mensagem" value={f.msg} onChange={set("msg")} placeholder="Descreva sua obra, prazo e necessidade" rows={variant === "panel" ? 2 : 4} style={{
                width: "100%", resize: "vertical", padding: "11px 13px", borderRadius: "var(--radius-md)",
                border: "1px solid var(--border-default)", fontFamily: "var(--font-body)", fontSize: "var(--text-md)",
                color: "var(--text-body)", background: "var(--white)", boxSizing: "border-box",
              }} />
            </div>
          </div>
          <button type="submit" style={{
            marginTop: 16, width: "100%", height: 52, border: "none", cursor: "pointer",
            background: "var(--action-bg)", color: "#fff", borderRadius: "var(--radius-md)",
            fontFamily: "var(--font-body)", fontWeight: 600, fontSize: "var(--text-md)",
            display: "flex", alignItems: "center", justifyContent: "center", gap: 9,
          }}>
            Enviar solicitação <i data-lucide="arrow-right" style={{ width: 18, height: 18 }}></i>
          </button>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "var(--text-2xs)", margin: "12px 0 0", color: dark ? "var(--navy-300)" : "var(--text-muted)", display: "flex", gap: 7, alignItems: "center" }}>
            <i data-lucide="lock" style={{ width: 13, height: 13 }}></i> Resposta em até 1 dia útil · Seus dados estão protegidos
          </p>
        </form>
      )}
    </div>
  );
}
window.LeadForm = LeadForm;

/* ---------- CTA band (dark, photo + scrim) ---------- */
function CTASection() {
  return (
    <section style={{ position: "relative", overflow: "hidden", background: "var(--navy-900)" }}>
      <img src="assets/photos/handshake-site.png" alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.26 }} />
      <div style={{ position: "absolute", inset: 0, background: "var(--scrim-navy-side)" }} />
      <div style={{ position: "relative", maxWidth: CX.wide, margin: "0 auto", padding: "92px 32px", display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 22 }}>
        <Eyebrow color="var(--orange-400)">Vamos conversar</Eyebrow>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: "var(--fw-black)", fontSize: "var(--text-4xl)", letterSpacing: "var(--tracking-tight)", color: "#fff", margin: 0, maxWidth: 760, lineHeight: 1.08, textWrap: "balance" }}>
            Construa o seu próximo projeto sobre uma base de segurança total.
          </h2>
        <p style={{ fontFamily: "var(--font-body)", fontSize: "var(--text-lg)", color: "var(--navy-200)", margin: 0, maxWidth: 600 }}>
            Receba um diagnóstico técnico e um orçamento sem compromisso. Engenharia, conformidade e execução em um só parceiro.
          </p>
        <div style={{ display: "flex", gap: 14, marginTop: 6, flexWrap: "wrap" }}>
          <a href="contato.html"><Button size="lg" iconRight={I("arrow-right")}>Solicitar diagnóstico</Button></a>
          <a href={`https://wa.me/${CX.wa}`} target="_blank" rel="noopener">
            <Button size="lg" variant="outline" style={{ color: "#fff", borderColor: "rgba(255,255,255,0.45)" }} iconLeft={I("message-circle")}>WhatsApp {CX.phone}</Button>
          </a>
        </div>
      </div>
    </section>
  );
}
window.CTASection = CTASection;

/* ---------- Footer ---------- */
function Footer() {
  const col = (title, items) => (
    <div>
      <div style={{ color: "#fff", fontWeight: 600, fontSize: "var(--text-sm)", marginBottom: 14, fontFamily: "var(--font-body)" }}>{title}</div>
      <div style={{ display: "grid", gap: 9 }}>
        {items.map(([t, href]) => (
          <a key={t} href={href || "#"} style={{ color: "var(--navy-200)", textDecoration: "none", fontSize: "var(--text-sm)", fontFamily: "var(--font-body)" }}>{t}</a>
        ))}
      </div>
    </div>
  );
  return (
    <footer style={{ background: "var(--navy-900)", color: "var(--navy-200)", borderTop: "1px solid var(--border-inverse)" }}>
      <div style={{ maxWidth: CX.wide, margin: "0 auto", padding: "60px 32px 40px", display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1.2fr", gap: 40 }} className="cx-foot-grid">
        <div>
          <img src="assets/logo/corbex-logo-white.png" alt="Corbex" style={{ height: 56, width: "auto" }} />
          <p style={{ fontFamily: "var(--font-body)", fontSize: "var(--text-sm)", lineHeight: 1.6, marginTop: 16, maxWidth: 300, color: "var(--navy-200)" }}>
            Engenharia de segurança integrada — gestão de riscos, conformidade e proteção em todas as etapas do ciclo de vida da obra.
          </p>
          <div style={{ display: "flex", gap: 16, marginTop: 14, fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", letterSpacing: "0.06em", color: "var(--navy-300)" }}>
            <span>NR-35</span><span>NR-18</span><span>AVCB</span><span>ABNT</span>
          </div>
        </div>
        {col("Navegação", [["Início", "index.html"], ["Serviços", "servicos.html"], ["Especialidades", "index.html#especialidades"], ["Projetos", "index.html#projetos"], ["Contato", "contato.html"]])}
        {col("Serviços", [["Projetos & Consultoria", "servicos.html#projetos"], ["Proteção Humana (NR-35)", "servicos.html#nr35"], ["Proteção Coletiva", "servicos.html#coletiva"], ["Locação de Equipamentos", "servicos.html#locacao"], ["Consultoria Técnica", "servicos.html#consultoria"]])}
        <div>
          <div style={{ color: "#fff", fontWeight: 600, fontSize: "var(--text-sm)", marginBottom: 14, fontFamily: "var(--font-body)" }}>Contato</div>
          <div style={{ display: "grid", gap: 11, fontSize: "var(--text-sm)", fontFamily: "var(--font-body)" }}>
            <a href={`https://wa.me/${CX.wa}`} style={{ display: "flex", gap: 9, alignItems: "center", color: "var(--navy-200)", textDecoration: "none" }}>{I("message-circle", { style: { width: 16, height: 16, color: "var(--orange-400)" } })} {CX.phone}</a>
            <a href={`mailto:${CX.email}`} style={{ display: "flex", gap: 9, alignItems: "center", color: "var(--navy-200)", textDecoration: "none" }}>{I("mail", { style: { width: 16, height: 16, color: "var(--orange-400)" } })} {CX.email}</a>
            <span style={{ display: "flex", gap: 9, alignItems: "center" }}>{I("map-pin", { style: { width: 16, height: 16, color: "var(--orange-400)" } })} {CX.addr}</span>
            <span style={{ display: "flex", gap: 9, alignItems: "center" }}>{I("clock", { style: { width: 16, height: 16, color: "var(--orange-400)" } })} Seg–Sex, 08h–18h</span>
          </div>
        </div>
      </div>
      <div style={{ borderTop: "1px solid var(--border-inverse)" }}>
        <div style={{ maxWidth: CX.wide, margin: "0 auto", padding: "18px 32px", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 10, fontSize: "var(--text-xs)", color: "var(--navy-300)", fontFamily: "var(--font-body)" }}>
          <span>© 2026 Corbex Engenharia de Segurança · Belo Horizonte / MG</span>
          <span style={{ fontFamily: "var(--font-mono)", letterSpacing: "0.06em" }}>DA CONCEPÇÃO À SEGURANÇA TOTAL</span>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;

/* ---------- Floating WhatsApp ---------- */
function WhatsAppFloat() {
  const [hov, setHov] = React.useState(false);
  return (
    <a href={`https://wa.me/${CX.wa}`} target="_blank" rel="noopener" aria-label="Falar no WhatsApp"
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{
        position: "fixed", right: 22, bottom: 22, zIndex: 70, display: "inline-flex", alignItems: "center", gap: 10,
        height: 56, padding: hov ? "0 22px 0 16px" : "0 16px", borderRadius: 999,
        background: "#1FA855", color: "#fff", textDecoration: "none",
        boxShadow: "0 10px 30px rgba(31,168,85,0.45)", fontFamily: "var(--font-body)", fontWeight: 600, fontSize: "var(--text-sm)",
        transition: "padding var(--dur-base) var(--ease-standard)",
      }}>
      <i data-lucide="message-circle" style={{ width: 26, height: 26, flex: "none" }}></i>
      {hov && <span style={{ whiteSpace: "nowrap" }}>Fale conosco</span>}
    </a>
  );
}
window.WhatsAppFloat = WhatsAppFloat;

/* ---------- FAQ accordion ---------- */
function FAQ({ items }) {
  const [open, setOpen] = React.useState(0);
  return (
    <div style={{ display: "grid", gap: 12 }}>
      {items.map(([q, a], i) => {
        const isOpen = open === i;
        return (
          <div key={i} style={{ background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", overflow: "hidden", borderLeft: isOpen ? "4px solid var(--orange-500)" : "1px solid var(--border-subtle)" }}>
            <button onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen} style={{
              width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16,
              padding: "20px 22px", background: "transparent", border: "none", cursor: "pointer", textAlign: "left",
              fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "var(--text-lg)", color: "var(--text-strong)",
            }}>
              {q}
              <i data-lucide={isOpen ? "minus" : "plus"} style={{ width: 20, height: 20, color: "var(--orange-500)", flex: "none" }}></i>
            </button>
            {isOpen && <div style={{ padding: "0 22px 22px", fontFamily: "var(--font-body)", fontSize: "var(--text-md)", lineHeight: "var(--leading-relaxed)", color: "var(--text-body)", maxWidth: 760 }}>{a}</div>}
          </div>
        );
      })}
    </div>
  );
}
window.FAQ = FAQ;
