/* global React */
(function () {
const { Reveal, navigate } = window;
const { useState } = React;

const SERVICES = [
  {
    n: '01',
    title: 'Licitações públicas',
    tag: 'Edital → Proposta vencedora',
    desc: 'Análise integral do edital, montagem de proposta técnica e comercial, composições SINAPI/SICRO, BDI auditado, defesa de preços e acompanhamento até a homologação.',
    deliverables: [
      'Planilha orçamentária completa',
      'Memorial descritivo de cálculo',
      'BDI detalhado por etapa',
      'Defesa de preços inexequíveis',
      'Cronograma físico-financeiro',
    ],
  },
  {
    n: '02',
    title: 'Orçamentos em BIM',
    tag: 'Modelo 3D → Quantitativos',
    desc: 'Modelagem BIM (Revit/Navisworks) com classificação por NBR 15965 e extração automatizada de quantitativos. Federamos disciplinas e cruzamos com composições para entregar orçamento rastreável até o elemento 3D.',
    deliverables: [
      'Modelo federado parametrizado',
      'Tabelas de quantitativos por disciplina',
      'Compatibilização entre projetos',
      'Cronograma 4D opcional',
    ],
  },
  {
    n: '03',
    title: 'Planilhas automatizadas',
    tag: 'Excel inteligente',
    desc: 'Modelos parametrizados que recalculam BDI, encargos sociais, leis sociais e composições em tempo real. Substitui processos manuais propensos a erro de digitação.',
    deliverables: [
      'Planilha master parametrizada',
      'Templates por tipo de obra',
      'Treinamento da equipe interna',
      'Suporte técnico contínuo',
    ],
  },
  {
    n: '04',
    title: 'Auditoria de orçamentos',
    tag: 'Revisão técnica independente',
    desc: 'Análise crítica de orçamentos elaborados por terceiros: jogo de planilha, sobreposição de itens, BDI distorcido, composições incompatíveis. Entregamos parecer técnico com fundamentação.',
    deliverables: [
      'Parecer técnico circunstanciado',
      'Recálculo paralelo do orçamento',
      'Mapa de divergências',
      'Defesa em caso de impugnação',
    ],
  },
  {
    n: '05',
    title: 'Proposta Técnicas para licitação',
    tag: 'Documentação que pontua',
    desc: 'Elaboração da Proposta Técnica em certames do tipo "técnica e preço". Estruturamos metodologia de execução, plano de trabalho, atestados, qualificação da equipe e plano de gestão da qualidade encaixados item a item nos critérios de pontuação do edital.',
    deliverables: [
      'Metodologia de execução por item pontuável',
      'Plano de trabalho com cronograma e marcos',
      'Dossiê de atestados e currículos formatados',
      'Plano de qualidade, segurança e ambiental',
      'Checklist de envelope e anexos do edital',
    ],
  },
  {
    n: '06',
    title: 'Consultoria contínua',
    tag: 'Time terceirizado',
    desc: 'Fee mensal — atuamos como o setor de orçamentos terceirizado da construtora. Atendemos demandas pontuais, revisamos planilhas internas e participamos de reuniões técnicas.',
    deliverables: [
      'Horas técnicas mensais',
      'SLA de resposta < 24h',
      'Reuniões semanais',
      'Acesso à ferramenta interna',
    ],
  },
];

function ServicesPage() {
  const [open, setOpen] = useState(0);
  return (
    <main>
      <section className="page-header">
        <div className="container">
          <span className="eyebrow">Serviços · 6 frentes</span>
          <h1 className="display h-xxl">Engenharia de <em>custos</em> ponta a ponta.</h1>
          <p className="lede">
            Da fase de edital ao último tijolo. Cada serviço pode ser contratado avulso ou
            empacotado em consultoria contínua — você paga só pelo que precisa.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="serv-list">
            {SERVICES.map((s, i) => (
              <div
                key={i}
                className={'serv' + (open === i ? ' open' : '')}
                onClick={() => setOpen(open === i ? -1 : i)}
              >
                <div className="serv-head">
                  <div className="serv-num">{s.n}</div>
                  <h3 className="serv-title">{s.title}</h3>
                  <span className="serv-tag">{s.tag}</span>
                  <div className="serv-toggle">+</div>
                </div>
                <div className="serv-body">
                  <div className="serv-body-inner">
                    <div></div>
                    <p>{s.desc}</p>
                    <div>
                      <div className="muted-meta" style={{ marginBottom: 8 }}>Entregáveis</div>
                      <ul className="serv-deliverables">
                        {s.deliverables.map((d, k) => <li key={k}>{d}</li>)}
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing principle */}
      <section className="section">
        <div className="container">
          <Reveal>
            <div className="split">
              <div className="split-sticky">
                <span className="section-label">Como cobramos</span>
                <h2 className="display h-l">Sem <em>letra miúda.</em></h2>
              </div>
              <div>
                {[
                  { t: 'Por projeto', d: 'Orçamento avulso de obra. Valor fechado em função de área, complexidade e prazo. Sem surpresa no fim.' },
                  { t: 'Por planilha auditada', d: 'Auditoria de orçamento de terceiros. Cobrado por item — quanto maior a planilha, melhor o desconto unitário.' },
                  { t: 'Fee mensal', d: 'Consultoria contínua. Pacote de horas técnicas + SLA de resposta. Reservado a construtoras com fluxo recorrente.' },
                ].map((m, i) => (
                  <div key={i} style={{ padding: '24px 0', borderBottom: '1px solid var(--line)', display: 'grid', gridTemplateColumns: '180px 1fr', gap: 32 }}>
                    <h3 style={{ fontFamily: 'var(--display)', fontSize: 28, margin: 0, fontStyle: 'italic', color: 'var(--orange)' }}>{m.t}</h3>
                    <p style={{ margin: 0, color: 'var(--ink-soft)', fontSize: 15, lineHeight: 1.55 }}>{m.d}</p>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {window.SiteCTA && <window.SiteCTA />}
    </main>
  );
}

window.ServicesPage = ServicesPage;
})();