// Sobre page
function SobrePage() {
  return (
    <>
      <section className="hero-page">
        <div className="grid-bg" />
        <div className="wrap">
          <div className="crumbs"><a href="#/home">Home</a> / Sobre</div>
          <h1 className="h-display">Gente que entende de<br/>tecnologia — e de comércio.</h1>
          <p className="lede">Desde 2018 ajudando pequenas e médias empresas de Rio Branco e região a organizarem a operação e reduzirem problemas do dia a dia.</p>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="about-intro">
            <div>
              <span className="eyebrow">Nossa história</span>
              <h2 className="h-section" style={{ marginTop: 16 }}>Uma empresa pequena, com foco grande no cliente.</h2>
              <p className="lede" style={{ marginTop: 20 }}>
                A 8Bits Tecnologia nasceu em novembro de 2018 com uma ideia simples: oferecer
                suporte técnico e soluções de sistema que realmente funcionem no balcão,
                sem promessa que não se cumpre.
              </p>
              <p className="lede" style={{ marginTop: 16 }}>
                Somos uma equipe enxuta, de dois técnicos, que atende pessoalmente cada cliente.
                Implantamos ERP, resolvemos TI e configuramos automação para comércios em geral,
                material de construção, distribuidoras e prestadores de serviço.
              </p>
            </div>
            <div>
              <div className="about-quote">
                "A gente gosta de resolver o problema, não de contornar.
                Se precisa voltar na mesma questão duas semanas depois, alguma coisa ficou mal feita."
                <cite>— Thiago Gadelha, fundador</cite>
              </div>
            </div>
          </div>

          <div className="about-stats">
            <div className="stat">
              <div className="big">2009</div>
              <div className="lbl">Primeiros atendimentos</div>
            </div>
            <div className="stat">
              <div className="big">2018</div>
              <div className="lbl">Fundação formal da 8Bits</div>
            </div>
            <div className="stat">
              <div className="big">AC</div>
              <div className="lbl">Rio Branco · Aeroporto Velho</div>
            </div>
          </div>
        </div>
      </section>

      <section className="timeline-wrap">
        <div className="wrap">
          <div className="section-head" style={{ marginBottom: 0 }}>
            <div className="left">
              <span className="eyebrow">Linha do tempo</span>
              <h2 className="h-section" style={{ marginTop: 16 }}>De um técnico sozinho à 8Bits de hoje.</h2>
              <p className="lede" style={{ marginTop: 16 }}>
                Cada marco representa uma entrega real, não um slogan. Esta é a trajetória
                que construiu a forma como atendemos.
              </p>
            </div>
          </div>

          <div className="timeline">
            <div className="tl-item">
              <div className="tl-year">2009<span className="y-sub">Início da jornada</span></div>
              <div className="tl-body">
                <h3 className="tl-title">O primeiro atendimento</h3>
                <p className="tl-desc">
                  Com 4 anos de experiência em manutenção de computadores e infraestrutura,
                  começo a atender pessoalmente os primeiros clientes em Rio Branco. Nascia,
                  na prática, o jeito 8Bits de trabalhar.
                </p>
                <span className="tl-tag">Manutenção · Infra</span>
              </div>
            </div>

            <div className="tl-item">
              <div className="tl-year">2012<span className="y-sub">Crescimento</span></div>
              <div className="tl-body">
                <h3 className="tl-title">+40 empresas com contrato ativo</h3>
                <p className="tl-desc">
                  A carteira cresce para mais de quarenta empresas em contrato mensal de
                  prestação de serviço. O trabalho deixa de ser pontual — vira relacionamento.
                </p>
                <span className="tl-tag">Contratos recorrentes</span>
              </div>
            </div>

            <div className="tl-item">
              <div className="tl-year">2015<span className="y-sub">Equipe</span></div>
              <div className="tl-body">
                <h3 className="tl-title">Estrutura ampliada</h3>
                <p className="tl-desc">
                  Chegam os primeiros colaboradores e adicionamos a venda de equipamentos
                  e acessórios ao portfólio. O cliente agora resolve o suporte e a compra
                  no mesmo lugar.
                </p>
                <span className="tl-tag">Equipe · Vendas</span>
              </div>
            </div>

            <div className="tl-item milestone">
              <div className="tl-year">2018<span className="y-sub">CNPJ · Fundação</span></div>
              <div className="tl-body">
                <h3 className="tl-title">Nasce oficialmente a 8Bits Tecnologia</h3>
                <p className="tl-desc">
                  Em 23 de novembro de 2018, formalizamos a operação. Chegam também os
                  primeiros projetos de implantação de sistemas ERP — um novo capítulo
                  para a empresa e para os clientes.
                </p>
                <span className="tl-tag">Fundação · ERP</span>
              </div>
            </div>

            <div className="tl-item">
              <div className="tl-year">2020<span className="y-sub">Novas frentes</span></div>
              <div className="tl-body">
                <h3 className="tl-title">Expansão para automação comercial</h3>
                <p className="tl-desc">
                  PDV, impressoras fiscais, leitores e balanças passam a fazer parte
                  da rotina. A loja do cliente começa a operar de ponta a ponta com a gente.
                </p>
                <span className="tl-tag">Automação · PDV</span>
              </div>
            </div>

            <div className="tl-item">
              <div className="tl-year">2022<span className="y-sub">Consolidação</span></div>
              <div className="tl-body">
                <h3 className="tl-title">Foco nas pequenas e médias empresas</h3>
                <p className="tl-desc">
                  Consolidamos o posicionamento: tecnologia sob medida para quem tem
                  operação real rodando todos os dias — comércio, material de construção
                  e distribuidoras.
                </p>
                <span className="tl-tag">PME · Posicionamento</span>
              </div>
            </div>

            <div className="tl-item">
              <div className="tl-year">2024<span className="y-sub">Especialização</span></div>
              <div className="tl-body">
                <h3 className="tl-title">Certificados digitais e suporte especializado</h3>
                <p className="tl-desc">
                  Ampliamos os serviços fiscais e começamos a emitir e gerenciar
                  certificados digitais diretamente para os clientes — menos correria,
                  mais segurança.
                </p>
                <span className="tl-tag">Fiscal · Certificados</span>
              </div>
            </div>

            <div className="tl-item">
              <div className="tl-year">2025<span className="y-sub">Ponto Eletrônico</span></div>
              <div className="tl-body">
                <h3 className="tl-title">Soluções de gestão de pessoas</h3>
                <p className="tl-desc">
                  Entra no portfólio a solução de Ponto Eletrônico, integrada à rotina
                  administrativa dos clientes. Um passo além do balcão — cuidando também
                  da equipe que faz o negócio funcionar.
                </p>
                <span className="tl-tag">Ponto Eletrônico · RH</span>
              </div>
            </div>

            <div className="tl-item future">
              <div className="tl-year">2026<span className="y-sub">Em curso</span></div>
              <div className="tl-body">
                <h3 className="tl-title">Soluções próprias e novos projetos</h3>
                <p className="tl-desc">
                  Começa a fase de desenvolver produtos e ferramentas da casa — tudo
                  baseado no que aprendemos atendendo centenas de empresas reais.
                  O próximo capítulo está sendo escrito agora.
                </p>
                <span className="tl-tag">Em desenvolvimento</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="diff-wrap">
        <div className="wrap">
          <div className="section-head">
            <div className="left">
              <span className="eyebrow">Como trabalhamos</span>
              <h2 className="h-section">Atendimento direto. Sem intermediário, sem roteiro pronto.</h2>
            </div>
          </div>
          <div className="diff-grid">
            <div className="diff-item">
              <div className="big">→</div>
              <h4>Atendimento próximo</h4>
              <p>Você fala com quem vai resolver. Nada de passar por três níveis de atendimento antes de explicar o problema.</p>
            </div>
            <div className="diff-item">
              <div className="big">→</div>
              <h4>Prática antes de teoria</h4>
              <p>Anos em campo, dentro de empresas reais, vendo o que funciona e o que só atrapalha a operação.</p>
            </div>
            <div className="diff-item">
              <div className="big">→</div>
              <h4>Documentado e claro</h4>
              <p>O que foi feito fica anotado. Se precisar de outro técnico algum dia, a história está registrada.</p>
            </div>
            <div className="diff-item">
              <div className="big">→</div>
              <h4>Escopo honesto</h4>
              <p>Se não é a nossa especialidade, a gente diz. E quando possível, indica alguém que consegue atender.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="about-who">
            <div>
              <span className="eyebrow">Quem atendemos</span>
              <h2 className="h-section" style={{ marginTop: 16 }}>Negócios que precisam da operação rodando o dia inteiro.</h2>
              <p className="lede" style={{ marginTop: 20 }}>
                Trabalhamos melhor com quem usa ERP e emite nota fiscal todos os dias —
                onde a parada de sistema custa venda perdida.
              </p>
            </div>
            <div className="segments">
              <div className="seg"><span className="pxnum">01</span><div><strong>Comércio em geral</strong><span>Lojas de varejo com caixa e estoque ativos.</span></div></div>
              <div className="seg"><span className="pxnum">02</span><div><strong>Material de construção</strong><span>Alta variedade de produto, NCM e tributação específica.</span></div></div>
              <div className="seg"><span className="pxnum">03</span><div><strong>Distribuidoras</strong><span>Logística, separação, emissão em volume.</span></div></div>
              <div className="seg"><span className="pxnum">04</span><div><strong>Pequenas e médias empresas</strong><span>Estrutura enxuta que precisa de TI sem peso.</span></div></div>
            </div>
          </div>

          <div style={{ marginTop: 64 }}>
            <span className="eyebrow">Por trás do atendimento</span>
            <h3 style={{ fontSize: 28, margin: "12px 0 24px", letterSpacing: "-0.01em" }}>Quem fala com você.</h3>
            <div className="founder">
              <div className="avatar">TG</div>
              <div>
                <h4>Thiago Gadelha</h4>
                <div className="role">Fundador · Técnico responsável</div>
                <p>Coordena os atendimentos e as implantações de ERP. Se você chamou a 8Bits, provavelmente é ele quem vai responder do outro lado.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <FinalCTA />
    </>
  );
}

Object.assign(window, { SobrePage });