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

const VALUES = [
  { n: '01', t: 'Rastreabilidade', d: 'Cada centavo na planilha tem fonte SINAPI, SICRO, composição própria auditada ou cotação de mercado documentada.' },
  { n: '02', t: 'Previsibilidade', d: 'Prazos honestos, escopo claro, sem aditivo de orçamento. O que mandamos é o que entregamos.' },
  { n: '03', t: 'Confidencialidade', d: 'NDA padrão em todo contrato. Seu edital, suas composições, seus números ficam só entre nós.' },
  { n: '04', t: 'Engenharia, não vendas', d: 'Nosso atendimento técnico é feito por engenheiros não por SDR. Você fala direto com o especialista.' },
  { n: '05', t: 'Atualização constante', d: 'Bases SINAPI/SICRO sincronizadas mensalmente. Tabelas regionais quando o projeto exige.' },
  { n: '06', t: 'Defesa pós-entrega', d: 'O serviço não acaba na planilha. Acompanhamos diligências, recursos e defesa de preço inexequível.' },
];

const TIMELINE = [
  { y: '2025', t: 'BIM como padrão', d: 'Toda a equipe técnica certificada em Revit. Migramos modelo de orçamento manual para extração via BIM federado.' },
  { y: '2026', t: 'Fundação', d: 'Eng. Nikolas Marx inicia operação como consultoria autônoma em orçamentos de obras, atendendo construtoras de pequeno porte em BH-MG.' },

];

function AboutPage() {
  return (
    <main>
      <section className="page-header">
        <div className="container">
          <span className="eyebrow">Sobre nós · Desde 2025</span>
          <h1 className="display h-xxl">Engenheiros que <em>orçam.</em><br/>Não vendedores que <em>estimam.</em></h1>
          <p className="lede">
            A Perfect Consulting nasceu da frustração de ver obras saindo do prazo
            e do orçamento por causa de planilhas mal feitas no princípio. Em 2 anos,
            orçamos R$ 1.3 bilhoes em obras.
          </p>
        </div>
      </section>

      {/* Manifesto bloco grande */}
      <section className="section">
        <div className="container">
          <Reveal>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'start' }} className="about-manifesto">
              <div>
                <span className="section-label">Nosso manifesto</span>
                <h2 className="display h-xl">
                  Mitigando <em>riscos,</em><br/>
                  maximizando <em>resultados.</em>
                </h2>
              </div>
              <div style={{ paddingTop: 8 }}>
                <p style={{ fontSize: 18, lineHeight: 1.65, color: 'var(--ink-soft)', margin: '0 0 18px' }}>
                  Orçamento de obra não é planilha, é <strong style={{ color: 'var(--ink)' }}>contrato de risco.</strong> Cada item subdimensionado vira aditivo. Cada item sobrestimado faz você perder a licitação.
                </p>
                <p style={{ fontSize: 18, lineHeight: 1.65, color: 'var(--ink-soft)', margin: '0 0 18px' }}>
                  A gente entende que do outro lado da planilha existem garantias bancárias, reputação técnica e equipes esperando para mobilizar. Por isso tratamos cada composição como decisão de engenharia, não como célula de Excel.
                </p>
                <p style={{ fontSize: 18, lineHeight: 1.65, color: 'var(--ink-soft)', margin: 0 }}>
                  Mitigar risco é nosso trabalho, maximizar resultado é o seu. E a gente entrega o orçamento que torna isso possível.
                </p>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Foto da equipe / instalação */}
      <section className="section section--tight">
        <div className="container">
          <Reveal>
            <img
              src="images/equipe-reuniao_rev1.png"
              alt="Equipe técnica Perfect Consulting em reunião"
              style={{ width: '100%', height: 460, objectFit: 'cover', borderRadius: 4, display: 'block' }}
            />
          </Reveal>
        </div>
      </section>

      {/* Values */}
      <section className="section">
        <div className="container">
          <Reveal>
            <div style={{ marginBottom: 36 }}>
              <span className="section-label">Nossos valores</span>
              <h2 className="display h-xl">Seis princípios.<br/>Não <em>negociáveis.</em></h2>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div className="values-grid">
              {VALUES.map((v, i) => (
                <div key={i} className="value">
                  <div className="value-num">{v.n}</div>
                  <h3 className="value-title">{v.t}</h3>
                  <p className="value-desc">{v.d}</p>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      {/* Timeline */}
      <section className="section">
        <div className="container">
          <Reveal>
            <div className="split">
              <div className="split-sticky">
                <span className="section-label">Linha do tempo</span>
                <h2 className="display h-xl">2 anos.<br/><em>Sem atalho.</em></h2>
              </div>
              <div>
                {TIMELINE.map((t, i) => (
                  <Reveal key={i} as="div" className="timeline" delay={i * 50}>
                    <div className="tl-year">{t.y}</div>
                    <div className="tl-body">
                      <h3>{t.t}</h3>
                      <p>{t.d}</p>
                    </div>
                  </Reveal>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Por que acreditar — acompanha o tema */}
      <section style={{ background: 'var(--bg-elev)', borderTop: '1px solid var(--line)', padding: '80px 0 0' }}>
        <div className="container">

          {/* Cabeçalho + texto */}
          <Reveal>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'start', paddingBottom: 64 }} className="about-manifesto">
              <div>
                <span className="section-label">Por que acreditar</span>
                <h2 className="display h-xl" style={{ marginTop: 16 }}>
                  Time enxuto.<br/><em>Acesso direto.</em>
                </h2>
              </div>
              <div style={{ paddingTop: 8 }}>
                <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink-soft)', margin: '0 0 20px' }}>
                  Somos <strong style={{ color: 'var(--ink)' }}>dois engenheiros civis sócios</strong> com total capacidade e longa experiência em orçamentos de obras e automação de processos técnicos. Não temos SDR e não terceirizamos o trabalho técnico.
                </p>
                <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink-soft)', margin: 0 }}>
                  Você conversa direto com quem vai abrir sua planilha. Esse é o nosso diferencial e o motivo de a gente preferir mostrar como trabalhamos a colecionar conquistas.
                </p>
              </div>
            </div>
          </Reveal>

          {/* Grid de credenciais */}
          <Reveal delay={100}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderTop: '1px solid var(--line)', borderLeft: '1px solid var(--line)' }}>
              {[
                { l: 'Registro profissional', v: 'CREA ativo' },
                { l: 'Confidencialidade',     v: 'NDA em todo contrato' },
                { l: 'Equipe técnica',         v: '2 engenheiros sócios' },
                { l: 'Especialização',          v: 'Orçamentos & Automações' },
              ].map((c, i) => (
                <div key={i} style={{ padding: '32px 28px', borderRight: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 12 }}>{c.l}</div>
                  <div style={{ fontFamily: 'var(--display)', fontSize: 22, lineHeight: 1.15, letterSpacing: '-0.01em', color: 'var(--ink)' }}>{c.v}</div>
                </div>
              ))}
            </div>
          </Reveal>

          {/* Tagline final */}
          <Reveal delay={160}>
            <div style={{ padding: '28px 0', borderTop: '1px solid var(--line)', fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.04em', color: 'var(--muted)', lineHeight: 1.6 }}>
              Antes de fechar, peça referências, peça pra ver uma planilha entregue, marque uma call técnica. Esse é o jeito mais honesto de avaliar a gente.
            </div>
          </Reveal>

        </div>
      </section>

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

window.AboutPage = AboutPage;
})();