// CORBEX Engenharia — Home page sections
const { Eyebrow, Button, FeatureCard, Stat, Badge, Card } = window.CorbexDesignSystem_40659e;
const { SectionHead, DatumStrip, LeadForm, FAQ, I } = window;

/* ---------- HERO (dark, blueprint, embedded lead form) ---------- */
function Hero() {
  return (
    <section style={{ position: "relative", overflow: "hidden", background: "var(--navy-900)" }} className="cx-blueprint-dark">
      <img src="assets/photos/engineer-site.png" alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.18 }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, rgba(12,30,48,0.96) 0%, rgba(12,30,48,0.86) 50%, rgba(12,30,48,0.7) 100%)" }} />
      <div style={{ position: "relative", maxWidth: CX.wide, margin: "0 auto", padding: "150px 32px 70px", display: "grid", gridTemplateColumns: "1.08fr 0.92fr", gap: 56, alignItems: "center" }} className="cx-hero-grid">
        <div>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 10, padding: "6px 14px", borderRadius: 999, border: "1px solid rgba(255,255,255,0.18)", background: "rgba(255,255,255,0.04)", fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", letterSpacing: "0.08em", color: "var(--navy-200)", textTransform: "uppercase" }}>
            <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--success-500)" }} /> Engenharia de Segurança · Belo Horizonte
          </div>
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: "var(--fw-black)", fontSize: "var(--text-5xl)", lineHeight: 1.02, letterSpacing: "var(--tracking-tight)", color: "#fff", margin: "22px 0 0", textWrap: "balance" }}>
            Da concepção à<br /><span style={{ color: "var(--orange-500)" }}>segurança total</span>.
          </h1>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "var(--text-lg)", lineHeight: "var(--leading-relaxed)", color: "var(--navy-200)", margin: "22px 0 0", maxWidth: 520, textWrap: "pretty" }}>
            Engenharia, conformidade e execução em um só parceiro. Eliminamos falhas antes da obra começar — protegendo pessoas, prazos e o seu maior ativo.
          </p>
          <div style={{ display: "flex", gap: 14, marginTop: 30, flexWrap: "wrap" }}>
            <a href="#servicos"><Button size="lg" iconRight={I("arrow-right")}>Conhecer os serviços</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.4)" }} iconLeft={I("message-circle")}>Falar agora</Button></a>
          </div>
          <div style={{ display: "flex", gap: 30, marginTop: 40, flexWrap: "wrap" }}>
            {[["NR-35", "Trabalho em altura"], ["NR-18", "Construção civil"], ["AVCB", "Combate a incêndio"], ["ABNT", "Normas técnicas"]].map(([k, v]) => (
              <div key={k}>
                <div style={{ fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: "var(--text-md)", color: "#fff" }}>{k}</div>
                <div style={{ fontSize: "var(--text-xs)", color: "var(--navy-300)", marginTop: 3, fontFamily: "var(--font-body)" }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="cx-hero-form">
          <LeadForm variant="panel" title="Receba seu diagnóstico em 1 dia útil" subtitle="Conte sobre sua obra. Retornamos com um plano técnico e orçamento sem compromisso." />
        </div>
      </div>
      <div style={{ position: "relative", borderTop: "1px solid rgba(255,255,255,0.1)" }}>
        <div style={{ maxWidth: CX.wide, margin: "0 auto", padding: "16px 32px" }}>
          <DatumStrip items={["Conformidade legal 100%", "Abordagem 360°", "Zero falhas toleradas", "Construtoras · Indústria · Condomínios"]} />
        </div>
      </div>
    </section>
  );
}

/* ---------- STATS (light) ---------- */
function StatsBand() {
  const stats = [
    ["360", "°", "Abordagem integrada", "Projeto → segurança → obra"],
    ["100", "%", "Conformidade legal", "NRs e normas ABNT"],
    ["5", "", "Frentes de atuação", "Da consultoria à execução"],
    ["0", "", "Falhas toleradas", "Planejamento rigoroso"],
  ];
  return (
    <section style={{ background: "var(--surface-card)", borderBottom: "1px solid var(--border-subtle)" }}>
      <div style={{ maxWidth: CX.wide, margin: "0 auto", padding: "56px 32px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 48, alignItems: "center" }} className="cx-stats-grid">
          <SectionHead eyebrow="A prática" title="Uma equipe. Três pilares. Engenharia integrada." sub="Construtoras, indústrias e condomínios escolhem a Corbex para reduzir riscos e assegurar conformidade — sem coordenar múltiplos fornecedores." max={520} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 22 }} className="cx-4col">
            {stats.map(([v, u, l, s]) => <Stat key={l} value={v} unit={u || null} label={l} sublabel={s} />)}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- SERVICES (5, light) ---------- */
function ServicesGrid() {
  const services = [
    ["S–01", "compass", "Projetos & Engenharia Consultiva", "Estudos técnicos, projetos executivos e viabilidade — a base intelectual de cada empreendimento.", ["Projetos executivos e memoriais", "Estudos de viabilidade técnica", "Planejamento e engenharia consultiva"], "projetos"],
    ["S–02", "shield-check", "Proteção Humana (NR-35)", "Linhas de vida, ancoragens e proteção contra quedas, com laudos e conformidade plena à NR-35.", ["Linhas de vida e ancoragens certificadas", "Inspeções, laudos e ART", "Conformidade NR-35"], "nr35"],
    ["S–03", "fence", "Sistemas de Proteção Coletiva", "Guarda-corpos, redes e proteções temporárias dimensionadas às NRs e normas ABNT.", ["Guarda-corpos e plataformas", "Redes e proteções temporárias", "Conformidade NR-18 / ABNT"], "coletiva"],
    ["S–04", "forklift", "Locação de Equipamentos", "Máquinas, ferramentas e equipamentos de segurança disponíveis para acelerar o seu canteiro.", ["Equipamentos prontos para uso", "Economia frente à aquisição", "Disponibilidade e agilidade"], "locacao"],
    ["S–05", "clipboard-check", "Consultoria Técnica", "Diagnósticos, laudos e assessoria para mitigar riscos e manter a obra em conformidade.", ["Diagnósticos e avaliações de risco", "Laudos e pareceres técnicos", "Assessoria e mitigação de riscos"], "consultoria"],
  ];
  return (
    <section id="servicos" style={{ background: "var(--surface-page)", borderBottom: "1px solid var(--border-subtle)", scrollMarginTop: 80 }}>
      <div style={{ maxWidth: CX.wide, margin: "0 auto", padding: "96px 32px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap" }}>
          <SectionHead eyebrow="O que fazemos" title="Engenharia de segurança, ponta a ponta." sub="Cinco frentes que cobrem todo o ciclo da obra — da concepção do projeto à proteção de quem está em campo." max={620} />
          <a href="servicos.html" style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: "var(--text-sm)", color: "var(--orange-600)", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 7, whiteSpace: "nowrap" }}>Ver todos os serviços {I("arrow-right", { style: { width: 16, height: 16 } })}</a>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20, marginTop: 44 }} className="cx-3col">
          {services.map(([n, ic, t, d, pts, slug]) => (
            <a key={t} href={`servicos.html#${slug}`} style={{ textDecoration: "none", color: "inherit", display: "block" }}>
              <div className="cx-svc-card" style={{ height: "100%", background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderTop: "4px solid var(--orange-500)", borderRadius: "var(--radius-lg)", padding: "26px 24px", display: "flex", flexDirection: "column", gap: 14, boxShadow: "var(--shadow-sm)", transition: "box-shadow var(--dur-base), transform var(--dur-base)" }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                  <div style={{ width: 46, height: 46, borderRadius: "var(--radius-md)", background: "var(--navy-100)", color: "var(--navy-700)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                    <i data-lucide={ic} style={{ width: 23, height: 23 }}></i>
                  </div>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", color: "var(--text-faint)", letterSpacing: "0.06em" }}>{n}</span>
                </div>
                <h3 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "var(--text-xl)", lineHeight: 1.2, color: "var(--text-strong)" }}>{t}</h3>
                <p style={{ margin: 0, fontFamily: "var(--font-body)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-relaxed)", color: "var(--text-body)" }}>{d}</p>
                <ul style={{ listStyle: "none", padding: 0, margin: "2px 0 0", display: "grid", gap: 8 }}>
                  {pts.map((p) => (
                    <li key={p} style={{ display: "flex", gap: 9, alignItems: "flex-start", fontFamily: "var(--font-body)", fontSize: "var(--text-sm)", color: "var(--text-body)" }}>
                      <i data-lucide="check" style={{ width: 16, height: 16, color: "var(--orange-500)", flex: "none", marginTop: 2 }}></i>{p}
                    </li>
                  ))}
                </ul>
                <span style={{ marginTop: "auto", paddingTop: 8, fontFamily: "var(--font-body)", fontWeight: 600, fontSize: "var(--text-sm)", color: "var(--orange-600)", display: "inline-flex", alignItems: "center", gap: 7 }}>Ver serviço {I("arrow-right", { style: { width: 15, height: 15 } })}</span>
              </div>
            </a>
          ))}
          <div style={{ background: "var(--navy-900)", borderRadius: "var(--radius-lg)", padding: "28px 26px", display: "flex", flexDirection: "column", justifyContent: "center", position: "relative", overflow: "hidden" }} className="cx-blueprint-dark">
            <h3 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "var(--text-2xl)", color: "#fff", lineHeight: 1.1 }}>Não sabe por onde começar?</h3>
            <p style={{ margin: "12px 0 0", fontFamily: "var(--font-body)", fontSize: "var(--text-sm)", color: "var(--navy-200)", lineHeight: 1.6 }}>Um diagnóstico técnico aponta exatamente o que sua obra precisa para estar em conformidade.</p>
            <a href="contato.html" style={{ marginTop: 20 }}><Button iconRight={I("arrow-right")}>Solicitar diagnóstico</Button></a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- PROCESS (4 steps) ---------- */
function Process() {
  const steps = [
    ["01", "search", "Diagnóstico", "Visitamos a obra, mapeamos riscos e entendemos os requisitos normativos do seu projeto."],
    ["02", "pencil-ruler", "Projeto & dimensionamento", "Engenharia rigorosa: cálculos, memoriais e ART — eliminando falhas antes da execução."],
    ["03", "hard-hat", "Implantação", "Instalação técnica de sistemas de proteção com os equipamentos e a equipe certos."],
    ["04", "shield-check", "Conformidade & laudos", "Inspeções, laudos e acompanhamento contínuo para manter a obra em conformidade."],
  ];
  return (
    <section className="cx-blueprint" style={{ borderBottom: "1px solid var(--border-subtle)" }}>
      <div style={{ maxWidth: CX.wide, margin: "0 auto", padding: "96px 32px" }}>
        <SectionHead eyebrow="Como funciona" title="Do canteiro à conformidade, sem o desgaste." sub="Um processo previsível, em quatro etapas — você sempre sabe em que ponto está o seu projeto." max={640} />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 0, marginTop: 52, position: "relative" }} className="cx-4col cx-process">
          {steps.map(([n, ic, t, d], i) => (
            <div key={n} style={{ padding: "0 26px 0 0", position: "relative" }} className="cx-process-step">
              <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 18 }}>
                <div style={{ width: 48, height: 48, borderRadius: "var(--radius-md)", background: "var(--navy-700)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}>
                  <i data-lucide={ic} style={{ width: 22, height: 22 }}></i>
                </div>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xl)", fontWeight: 700, color: "var(--orange-500)" }}>{n}</span>
              </div>
              <h3 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "var(--text-xl)", color: "var(--text-strong)" }}>{t}</h3>
              <p style={{ margin: "10px 0 0", fontFamily: "var(--font-body)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-relaxed)", color: "var(--text-body)" }}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- SPECIALTIES (image + copy rows) ---------- */
function Specialty({ flip, img, badge, title, body, points }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }} className="cx-spec-row">
      <div style={{ order: flip ? 2 : 1 }}>
        <div style={{ borderRadius: "var(--radius-xl)", overflow: "hidden", border: "1px solid var(--border-subtle)", boxShadow: "var(--shadow-md)", aspectRatio: "16/11" }}>
          <img src={img} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
        </div>
      </div>
      <div style={{ order: flip ? 1 : 2 }}>
        <Badge tone="orange" variant="solid">{badge}</Badge>
        <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "var(--text-2xl)", letterSpacing: "var(--tracking-tight)", color: "var(--text-strong)", margin: "14px 0 0" }}>{title}</h3>
        <p style={{ fontFamily: "var(--font-body)", fontSize: "var(--text-md)", lineHeight: "var(--leading-relaxed)", color: "var(--text-body)", margin: "12px 0 0", textWrap: "pretty" }}>{body}</p>
        <ul style={{ listStyle: "none", padding: 0, margin: "20px 0 0", display: "grid", gap: 11 }}>
          {points.map((p) => (
            <li key={p} style={{ display: "flex", gap: 11, alignItems: "flex-start" }}>
              <i data-lucide="check" style={{ width: 18, height: 18, color: "var(--orange-500)", flex: "none", marginTop: 2 }}></i>
              <span style={{ fontFamily: "var(--font-body)", fontSize: "var(--text-md)", color: "var(--text-body)" }}>{p}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}
function Specialties() {
  return (
    <section id="especialidades" style={{ background: "var(--surface-card)", borderBottom: "1px solid var(--border-subtle)", scrollMarginTop: 80 }}>
      <div style={{ maxWidth: CX.wide, margin: "0 auto", padding: "96px 32px" }}>
        <SectionHead align="center" max={680} eyebrow="Especialidades" title="A engenharia aplicada à proteção humana." sub="Onde o risco é maior, a precisão técnica é inegociável. Veja como a Corbex protege quem está em campo." />
        <div style={{ display: "grid", gap: 72, marginTop: 60 }}>
          <Specialty img="assets/photos/harness-beam.png" badge="NR-35" title="Ancoragem & Linhas de Vida" body="Soluções de ancoragem e sistemas de proteção para trabalho em altura, dimensionadas para a realidade estrutural de cada obra — com memorial de cálculo e responsabilidade técnica." points={["Pontos de ancoragem certificados", "Linhas de vida horizontais e verticais", "Memorial de cálculo, inspeção e ART"]} />
          <Specialty flip img="assets/photos/scaffold-workers.png" badge="Proteção Coletiva" title="Proteções Coletivas em Obra" body="Projeto, dimensionamento e implantação de sistemas de proteção coletiva em conformidade com as Normas Regulamentadoras e normas técnicas — protegendo toda a equipe simultaneamente." points={["Guarda-corpos, plataformas e bandejas", "Sistemas anti-queda de materiais", "Conformidade NR-18 / NR-35 / ABNT"]} />
        </div>
      </div>
    </section>
  );
}

/* ---------- PORTFOLIO teaser ---------- */
function Portfolio() {
  const items = [
    ["assets/photos/scaffold-workers.png", "Proteção Coletiva · Edifício Residencial", "Sistema de guarda-corpos e bandejas de proteção em torre de 22 pavimentos."],
    ["assets/illustrations/scaffold-render.png", "Projeto Executivo · Indústria", "Dimensionamento de proteções para reforma de planta industrial em operação."],
    ["assets/photos/harness-beam.png", "Linhas de Vida · NR-35", "Ancoragens e linha de vida horizontal para manutenção de cobertura metálica."],
  ];
  return (
    <section id="projetos" className="cx-blueprint" style={{ borderBottom: "1px solid var(--border-subtle)", scrollMarginTop: 80 }}>
      <div style={{ maxWidth: CX.wide, margin: "0 auto", padding: "96px 32px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap" }}>
          <SectionHead eyebrow="Projetos realizados" title="Engenharia que se prova em campo." max={560} />
          <a href="contato.html" style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: "var(--text-sm)", color: "var(--orange-600)", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 7 }}>Solicitar portfólio completo {I("arrow-right", { style: { width: 16, height: 16 } })}</a>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20, marginTop: 44 }} className="cx-3col">
          {items.map(([img, t, d]) => (
            <div key={t} className="cx-proj-card" style={{ background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "var(--shadow-sm)", transition: "box-shadow var(--dur-base), transform var(--dur-base)" }}>
              <div style={{ aspectRatio: "16/11", overflow: "hidden" }}>
                <img src={img} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              </div>
              <div style={{ padding: "20px 22px 24px" }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--orange-600)" }}>{t.split(" · ")[0]}</div>
                <h3 style={{ margin: "8px 0 0", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "var(--text-lg)", color: "var(--text-strong)" }}>{t.split(" · ")[1]}</h3>
                <p style={{ margin: "8px 0 0", fontFamily: "var(--font-body)", fontSize: "var(--text-sm)", lineHeight: 1.55, color: "var(--text-body)" }}>{d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- TESTIMONIALS (dark) ---------- */
function Testimonials() {
  const quotes = [
    ["A Corbex assumiu a engenharia de segurança da obra inteira. Reduzimos o retrabalho e passamos na fiscalização sem nenhuma pendência.", "Eng. Civil · Construtora", "Belo Horizonte / MG"],
    ["Documentação técnica impecável e prazos confiáveis. Laudos e ART sempre em dia — exatamente o que a fiscalização exige.", "Gestor de Obras · Incorporadora", "Contagem / MG"],
    ["Ter projeto, proteção coletiva e execução com um só parceiro mudou a forma como tocamos os canteiros. Menos fornecedores, mais segurança.", "Diretor Industrial", "Betim / MG"],
  ];
  return (
    <section style={{ background: "var(--navy-900)" }} className="cx-blueprint-dark">
      <div style={{ maxWidth: CX.wide, margin: "0 auto", padding: "96px 32px" }}>
        <SectionHead dark eyebrow="Confiança em obra" title="Parceiros que dormem tranquilos." max={620} />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20, marginTop: 48 }} className="cx-3col">
          {quotes.map(([q, who, where]) => (
            <div key={who} style={{ background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.1)", borderLeft: "4px solid var(--orange-500)", borderRadius: "var(--radius-lg)", padding: "28px 26px", display: "flex", flexDirection: "column", gap: 18 }}>
              <i data-lucide="quote" style={{ width: 26, height: 26, color: "var(--orange-500)" }}></i>
              <p style={{ margin: 0, fontFamily: "var(--font-body)", fontSize: "var(--text-md)", lineHeight: 1.6, color: "#fff", flex: 1 }}>{q}</p>
              <div>
                <div style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: "var(--text-sm)", color: "#fff" }}>{who}</div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", letterSpacing: "0.06em", color: "var(--navy-300)", marginTop: 3 }}>{where}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 56, paddingTop: 40, borderTop: "1px solid rgba(255,255,255,0.1)" }}>
          <div style={{ textAlign: "center", fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--navy-300)", marginBottom: 26 }}>Atende construtoras, incorporadoras e indústrias</div>
          <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", gap: "20px 48px", alignItems: "center" }}>
            {["Construtora", "Incorporadora", "Indústria", "Condomínios", "Engenharia", "Gestão de Obras"].map((n) => (
              <div key={n} style={{ display: "flex", alignItems: "center", gap: 10, opacity: 0.6, fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "var(--text-lg)", color: "#fff", letterSpacing: "-0.01em" }}>
                <span style={{ width: 12, height: 12, border: "2px solid var(--orange-500)", transform: "rotate(45deg)" }} />{n}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- HOME FAQ ---------- */
function HomeFAQ() {
  const items = [
    ["A Corbex atende todo o ciclo da obra?", "Sim. Atuamos do projeto à execução: engenharia consultiva, sistemas de proteção (coletiva e individual), locação de equipamentos e consultoria técnica. Você reduz o número de fornecedores e ganha um responsável técnico único pela segurança."],
    ["Vocês emitem laudos e ART?", "Sim. Todos os projetos de segurança são acompanhados de memorial de cálculo, laudos técnicos e Anotação de Responsabilidade Técnica (ART), garantindo respaldo legal frente a fiscalizações e à conformidade com as NRs."],
    ["Em quais normas vocês são especializados?", "Trabalhamos com as Normas Regulamentadoras aplicáveis à construção civil e à indústria — com destaque para NR-35 (trabalho em altura) e NR-18 (construção) — além das normas ABNT pertinentes e requisitos de AVCB."],
    ["Qual a região de atuação?", "Somos sediados em Belo Horizonte / MG e atendemos obras na região metropolitana e no interior do estado. Para projetos específicos, consulte disponibilidade pelo formulário ou WhatsApp."],
    ["Como funciona o orçamento?", "É gratuito e sem compromisso. A partir do seu contato fazemos um diagnóstico inicial e retornamos com um plano técnico e proposta em até 1 dia útil."],
  ];
  return (
    <section style={{ background: "var(--surface-card)", borderBottom: "1px solid var(--border-subtle)" }}>
      <div style={{ maxWidth: 920, margin: "0 auto", padding: "96px 32px" }}>
        <SectionHead align="center" eyebrow="Dúvidas frequentes" title="Tudo que você precisa saber antes de falar conosco." max={640} />
        <div style={{ marginTop: 44 }}><FAQ items={items} /></div>
      </div>
    </section>
  );
}

window.HomePage = function HomePage() {
  React.useEffect(() => { window.lucide && lucide.createIcons(); });
  return (
    <React.Fragment>
      <Header active="home" />
      <Hero />
      <StatsBand />
      <ServicesGrid />
      <Process />
      <Specialties />
      <Portfolio />
      <Testimonials />
      <HomeFAQ />
      <window.CTASection />
      <window.Footer />
      <window.WhatsAppFloat />
    </React.Fragment>
  );
};
