/* global React, ReactDOM, Header, Footer, BrandMark */

/* ============================================================
   Hero — Sobre
   ============================================================ */
function SobreHero() {
  return (
    <section className="sobre-hero" id="top">
      <div className="container">
        <div className="sobre-hero-inner">
          <div style={{ display: "grid", gap: 24 }}>
            <span className="eyebrow" style={{ color: "var(--ms-gold-soft)" }}>
              SOBRE · MINERSUITE
            </span>
            <h1>
              Construído por dentro da rotina de uma <span className="gold">consultoria mineral.</span>
            </h1>
            <p className="lede">
              O MinerSuite não nasceu numa prancheta de software house. Nasceu
              da rotina real de um engenheiro de minas atuando como consultor,
              tentando organizar a própria empresa enquanto entregava projetos
              técnicos para o setor mineral.
            </p>
          </div>
          <aside className="sobre-hero-aside">
            <p className="quote">
              “O sistema que eu precisava para gerir a consultoria não existia.
              Então comecei a construir.”
            </p>
            <span className="attrib">
              ORIGEM · FUNDADOR · ENG. DE MINAS · CONSULTOR
            </span>
          </aside>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Story — chapters
   ============================================================ */
function Story() {
  return (
    <section className="section story" id="historia">
      <div className="container">
        <div className="section-head section-head--center" style={{ marginBottom: 16 }}>
          <span className="eyebrow">A HISTÓRIA · 01</span>
          <h2>De uma planilha frustrada a uma plataforma operacional.</h2>
          <p className="lede">
            Três capítulos resumem como o MinerSuite saiu de um problema
            pessoal e virou a base de operação para outras consultorias em
            mineração.
          </p>
        </div>

        {/* Chapter 01 — O começo */}
        <article className="chapter">
          <div className="chapter-left">
            <span className="chapter-id">CAP. 01 · 2022</span>
            <h3 className="chapter-title">O começo.</h3>
            <span className="chapter-tag">CONSULTORIA INDIVIDUAL</span>
          </div>
          <div className="chapter-body">
            <p className="lede">
              Um engenheiro de minas atendendo clientes do setor: relatórios
              de pesquisa, planos de aproveitamento, RALs anuais, processos
              ANM e propostas comerciais.
            </p>
            <p>
              No papel, a operação parecia simples: poucos clientes, contratos
              pontuais, projetos técnicos com prazo definido. Na prática, cada
              novo projeto fazia a operação interna inchar. Mais e-mails para
              acompanhar. Mais propostas para versionar. Mais pastas para
              organizar. Mais arquivos com nomes parecidos espalhados pelo
              desktop.
            </p>
            <p>
              A consultoria crescia. A gestão da consultoria, não.
            </p>
            <div className="aside">
              ROTINA · CLIENTES · PROPOSTAS · RAL · PAE · ANM · COBRANÇAS · PROJETOS · TUDO EM PASTAS
            </div>
          </div>
        </article>

        {/* Chapter 02 — A dificuldade */}
        <article className="chapter">
          <div className="chapter-left">
            <span className="chapter-id">CAP. 02 · 2023</span>
            <h3 className="chapter-title">A dificuldade.</h3>
            <span className="chapter-tag">PLANILHAS NÃO BASTAM</span>
          </div>
          <div className="chapter-body">
            <p className="lede">
              Em algum momento, a operação técnica passou a competir com a
              operação de gestão. E perder.
            </p>
            <p>
              Propostas reaproveitadas de versões antigas, sem clareza de qual
              era a versão final. Contratos arquivados num lugar, parcelas
              previstas em outro, recebimentos num terceiro. Projetos técnicos
              avançando com responsáveis e prazos que só existiam na cabeça
              das pessoas. Informações da ANM dispersas em planilhas e
              capturas de tela.
            </p>
            <p>
              O CRM genérico do mercado não entendia processos minerários.
              O ERP genérico não entendia projetos técnicos. As ferramentas
              de tarefas não entendiam contratos com parcelas previstas.
              Nada estava errado, mas nada estava certo.
            </p>
            <div className="pain-list">
              <div className="item">
                <span className="k">DOR · 01</span>
                <span className="v">proposta_aurelia_v9_FINAL_revMC.docx</span>
              </div>
              <div className="item">
                <span className="k">DOR · 02</span>
                <span className="v">clientes_ativos_mai_2023.xlsx</span>
              </div>
              <div className="item">
                <span className="k">DOR · 03</span>
                <span className="v">controle_parcelas_julho.xlsx</span>
              </div>
              <div className="item">
                <span className="k">DOR · 04</span>
                <span className="v">/Projetos/2023/Aurélia/v3/...</span>
              </div>
              <div className="item">
                <span className="k">DOR · 05</span>
                <span className="v">Onde estava o contrato mesmo?</span>
              </div>
            </div>
          </div>
        </article>

        {/* Chapter 03 — A decisão */}
        <article className="chapter">
          <div className="chapter-left">
            <span className="chapter-id">CAP. 03 · 2024 →</span>
            <h3 className="chapter-title">A decisão.</h3>
            <span className="chapter-tag">CONSTRUIR POR DENTRO</span>
          </div>
          <div className="chapter-body">
            <p className="lede">
              A escolha foi construir o sistema que faltava. Começando pelo
              que doía mais e abrindo módulos conforme a rotina exigia.
            </p>
            <p>
              Primeiro, um gerador de propostas com versões e snapshots, para
              acabar com o problema do <i>v9_FINAL_revMC</i>. Depois, um
              cadastro de clientes que conversasse com os processos ANM
              vinculados. Em seguida, os contratos puxando parcelas, o
              financeiro puxando contratos, os projetos técnicos puxando
              tarefas, e a equipe puxando responsáveis.
            </p>
            <p>
              Quando percebemos, tínhamos uma plataforma. Não um software
              vendido como mineração. Um software pensado, conversado e
              construído com mineração.
            </p>
            <p>
              É essa plataforma que hoje chamamos de <strong>MinerSuite</strong> —
              gestão completa para consultorias em mineração, construída de
              dentro do setor.
            </p>
          </div>
        </article>
      </div>
    </section>
  );
}

/* ============================================================
   Principles
   ============================================================ */
const PRINCIPLES = [
  {
    n: "P.01",
    t: "Especialização antes de generalização",
    p: "Não tentamos servir todo mundo. Servimos consultorias em mineração — e isso aparece em cada tela, vocabulário e fluxo.",
  },
  {
    n: "P.02",
    t: "Operação técnica em primeiro lugar",
    p: "A plataforma é construída a partir de como o trabalho acontece, não de como o catálogo de funcionalidades fica bonito.",
  },
  {
    n: "P.03",
    t: "Integração ponta a ponta",
    p: "Comercial, contratos, financeiro, projetos e agenda em um único ambiente, conectados por vínculos diretos entre os módulos.",
  },
  {
    n: "P.04",
    t: "Construído com o setor, não para o setor",
    p: "Cada módulo passou pela mão de quem entrega o serviço. Vocabulário, estrutura e cadência alinhados à rotina mineral.",
  },
  {
    n: "P.05",
    t: "Densidade sem ruído",
    p: "Interface técnica, objetiva e densa de informação, sem firulas. Quem passa o dia no sistema agradece.",
  },
  {
    n: "P.06",
    t: "Evolução contínua e responsável",
    p: "Módulos novos entram quando há clareza de problema, não quando há pressa de feature. A base se mantém estável.",
  },
];

function Principles() {
  return (
    <section className="section principles">
      <div className="container">
        <div className="section-head section-head--center">
          <span className="eyebrow">PRINCÍPIOS · 02</span>
          <h2>O que orienta cada decisão do produto.</h2>
          <p className="lede">
            Os princípios abaixo definem o que entra na plataforma, o que
            permanece simples e o que continuamos recusando.
          </p>
        </div>
        <div className="principles-grid">
          {PRINCIPLES.map((p) => (
            <article key={p.n} className="principle-cell">
              <span className="n">{p.n}</span>
              <h3>{p.t}</h3>
              <p>{p.p}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Timeline
   ============================================================ */
const TIMELINE = [
  {
    date: "2022 · ORIGEM",
    t: "A primeira consultoria começa a operar.",
    p: "Engenheiro de minas atuando como consultor: propostas, contratos, projetos técnicos, processos ANM. A operação cresce — e a gestão começa a ficar pesada.",
  },
  {
    date: "2023 · DIAGNÓSTICO",
    t: "A dor da gestão dispersa fica clara.",
    p: "Planilhas, pastas, mensagens e arquivos espalhados. Sem CRM que entenda mineração. Sem ERP que entenda projeto técnico. Sem ferramenta única.",
  },
  {
    date: "2024 · PRIMEIRO MÓDULO",
    t: "Geração de propostas com versões e snapshots.",
    p: "O primeiro componente do MinerSuite resolve o problema mais sentido: rastreabilidade de propostas comerciais. A semente da plataforma.",
  },
  {
    date: "2024 · CLIENTES E PROCESSOS",
    t: "Cliente 360 conectado a processos ANM.",
    p: "Cadastro de clientes com histórico de interações, documentos e vínculos com processos minerários. A consultoria passa a enxergar a carteira por inteiro.",
  },
  {
    date: "2025 · CONTRATOS E FINANCEIRO",
    t: "Contratos puxando parcelas, financeiro puxando contratos.",
    p: "Operação comercial e financeira deixam de ser silos. Margem por projeto, inadimplência e fluxo de caixa entram no painel.",
  },
  {
    date: "2025 · PROJETOS E EQUIPE",
    t: "Projetos técnicos em Kanban, templates e equipe.",
    p: "A execução técnica entra no sistema com checklists, prazos internos, responsáveis e carga de trabalho por pessoa.",
  },
  {
    date: "2026 · AGENDA COLABORATIVA",
    t: "Camada colaborativa: agenda, RSVP, comentários e menções.",
    p: "Reuniões, prazos e protocolos passam a viver dentro da plataforma. Convites externos, comentários em eventos, menções e alertas de conflito.",
    active: true,
  },
  {
    date: "PRÓXIMOS PASSOS",
    t: "Camada SaaS e abertura para consultorias parceiras.",
    p: "MinerSuite abre para outras consultorias em mineração que enfrentam a mesma dor. Multiempresa, planos públicos e demonstração comercial estruturada.",
    future: true,
  },
];

function Timeline() {
  return (
    <section className="section timeline-section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow" style={{ color: "var(--ms-gold-soft)" }}>LINHA DO TEMPO · 03</span>
          <h2 style={{ color: "var(--ms-paper)" }}>Como a plataforma evoluiu — sem pressa de feature.</h2>
          <p className="lede" style={{ color: "rgba(246,244,238,0.74)" }}>
            Cada marco resolveu um problema concreto da consultoria antes de
            virar funcionalidade do produto.
          </p>
        </div>
        <div className="timeline">
          {TIMELINE.map((tl, i) => (
            <article key={i} className={"tl-item" + (tl.active ? " active" : "") + (tl.future ? " future" : "")}>
              <span className="date">{tl.date}</span>
              <h4>{tl.t}</h4>
              <p>{tl.p}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Stats band
   ============================================================ */
function Stats() {
  return (
    <section className="section stats">
      <div className="container">
        <div className="section-head" style={{ marginBottom: 32 }}>
          <span className="eyebrow" style={{ color: "var(--ms-gold-soft)" }}>O QUE ENTREGAMOS · 04</span>
          <h2 style={{ color: "var(--ms-paper)" }}>Resultado do trabalho até aqui.</h2>
        </div>
        <div className="stats-grid">
          <div className="stat-cell">
            <span className="k">MÓDULOS INTEGRADOS</span>
            <span className="v">9</span>
            <span className="sub">Da agenda ao histórico completo das ações.</span>
          </div>
          <div className="stat-cell">
            <span className="k">ANOS DE CONSTRUÇÃO</span>
            <span className="v">4</span>
            <span className="sub">A plataforma evolui desde 2022.</span>
          </div>
          <div className="stat-cell">
            <span className="k">FOCO DE SETOR</span>
            <span className="v">100%</span>
            <span className="sub">Apenas consultorias em mineração.</span>
          </div>
          <div className="stat-cell">
            <span className="k">ARQUITETURA</span>
            <span className="v">SaaS</span>
            <span className="sub">Multiempresa, papéis e permissões.</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Modules summary (10)
   ============================================================ */
const MODS_SUMMARY = [
  { id: "M.01", t: "Agenda",        p: "Calendário colaborativo com RSVP, comentários e menções." },
  { id: "M.02", t: "Projeto",       p: "Kanban, tarefas, checklists e carga por responsável." },
  { id: "M.03", t: "CRM",           p: "Oportunidades, funil e indicadores comerciais." },
  { id: "M.04", t: "Cliente 360º",  p: "Cadastro completo + processos minerários vinculados." },
  { id: "M.05", t: "Financeiro",    p: "Receitas, despesas, inadimplência e margem por projeto." },
  { id: "M.06", t: "Minerário",     p: "Microdados indexados como base de apoio." },
  { id: "M.07", t: "Nova Proposta", p: "Versões, snapshots e geração de DOCX." },
  { id: "M.08", t: "Novo Contrato", p: "Parcelas, renovação e vínculos diretos." },
  { id: "M.09", t: "Histórico",     p: "Linha do tempo unificada das alterações." },
];

function ModulesSummary() {
  return (
    <section className="section modules-summary">
      <div className="container">
        <div className="section-head section-head--center">
          <span className="eyebrow">MÓDULOS · 05</span>
          <h2>Nove módulos. Um único sistema.</h2>
          <p className="lede">
            A plataforma conecta cada etapa da rotina da consultoria mineral
            em uma operação contínua. Da oportunidade ao projeto técnico,
            da reunião ao recebimento.
          </p>
        </div>
        <div className="modules-grid-summary">
          {MODS_SUMMARY.map((m) => (
            <div key={m.id} className="module-summary-cell">
              <span className="id">{m.id}</span>
              <h4>{m.t}</h4>
              <p>{m.p}</p>
            </div>
          ))}
        </div>
        <div className="planos-foot" style={{ marginTop: 32 }}>
          <p className="planos-note">
            Cada módulo é coberto desde o plano inicial. Os planos superiores
            adicionam financeiro completo, equipe e estrutura multiempresa.
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a href="index.html#modulos" className="btn btn--ghost">Detalhes dos módulos<span className="arrow">→</span></a>
            <a href="planos.html" className="btn btn--ink">Ver planos<span className="arrow">→</span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   CTA Final
   ============================================================ */
function SobreCTAFinal() {
  return (
    <section className="section cta-final" id="demonstracao">
      <div className="container">
        <div className="cta-final-inner">
          <span className="eyebrow" style={{ color: "var(--ms-gold-soft)" }}>
            PRÓXIMO PASSO
          </span>
          <h2>
            Faça parte das consultorias que estão organizando a operação <span style={{ color: "var(--ms-gold)" }}>por dentro.</span>
          </h2>
          <p className="lede">
            Se a sua consultoria em mineração vive a dor que originou o
            MinerSuite, faz sentido conversar. Vamos mostrar a plataforma
            aplicada à sua rotina.
          </p>
          <div className="cta-buttons">
            <a href="contato.html" className="btn btn--primary">
              Solicitar demonstração
              <span className="arrow">→</span>
            </a>
            <a href="planos.html" className="btn btn--ghost btn--on-dark">
              Ver planos
            </a>
            <a href="index.html#modulos" className="btn btn--ghost btn--on-dark">
              Conhecer módulos
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Page
   ============================================================ */
function SobrePage() {
  return (
    <>
      <Header />
      <main>
        <SobreHero />
        <Story />
        <Principles />
        <Timeline />
        <Stats />
        <ModulesSummary />
        <SobreCTAFinal />
      </main>
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<SobrePage />);