/* global React, HeroDashboard, BrandMark, HeaderLogo,
   Visual_Cliente360, Visual_CRM, Visual_Propostas, Visual_Contratos,
   Visual_Financeiro, Visual_Projetos, Visual_Templates,
   Visual_Equipe, Visual_ANM */

const { useState: useStateS } = React;

/* ============================================================
   1. Header
   ============================================================ */
function Header() {
  return (
    <header className="header" id="top">
      <div className="container header-inner">
        <a href="index.html#top" className="header-logo" aria-label="MinerSuite — início">
          <BrandMark size={24} />
          <span>Miner<span className="suite">Suite</span></span>
        </a>
        <nav className="header-nav" aria-label="Navegação principal">
          <a href="sobre.html">Sobre</a>
          <a href="planos.html">Planos</a>
          <a href="blog.html">Blog</a>
          <a href="contato.html">Contato</a>
        </nav>
        <div className="header-cta">
          <a
            href="https://app.minersuite.com.br"
            target="_blank"
            rel="noopener"
            className="header-access"
            aria-label="Acessar o sistema ou criar cadastro"
            title="Acessar o sistema · Criar cadastro"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" />
              <polyline points="10 17 15 12 10 7" />
              <line x1="15" y1="12" x2="3" y2="12" />
            </svg>
            <span>Acessar · Cadastrar</span>
          </a>
          <a href="contato.html" className="btn btn--ink btn--sm">
            Solicitar demonstração
            <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </header>
  );
}

/* ============================================================
   2. Hero
   ============================================================ */
function Hero() {
  return (
    <section className="hero" id="produto">
      <div className="container hero-grid">
        <div className="hero-text">
          <div className="eyebrow" style={{ color: "var(--ms-gold-soft)" }}>
            PLATAFORMA SAAS · CONSULTORIAS EM MINERAÇÃO
          </div>
          <h1>
            Gestão completa para <span className="gold">consultorias em mineração.</span>
          </h1>
          <p className="lede">
            Centralize clientes, oportunidades, propostas, contratos, financeiro
            e projetos técnicos em uma única plataforma desenvolvida para a
            rotina do setor mineral.
          </p>
          <div className="hero-ctas">
            <a href="contato.html" className="btn btn--primary">
              Solicitar demonstração
              <span className="arrow">→</span>
            </a>
            <a href="#modulos" className="btn btn--ghost btn--on-dark">
              Conhecer módulos
            </a>
          </div>
          <div className="hero-meta">
            <div>
              <span className="label">FOCO</span>
              <span className="value">Operação técnica e comercial</span>
            </div>
            <div>
              <span className="label">MÓDULOS</span>
              <span className="value">9 integrados</span>
            </div>
            <div>
              <span className="label">ESTRUTURA</span>
              <span className="value">Multiempresa · multiusuário</span>
            </div>
          </div>
        </div>
        <div className="hero-visual">
          <HeroDashboard />
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   3. Problem section
   ============================================================ */
const PAINS = [
  {
    title: "Propostas e contratos sem rastreabilidade.",
    sample: "PRP-2024-0218.docx · enviada?",
  },
  {
    title: "Clientes e oportunidades espalhados em planilhas.",
    sample: "clientes_ativos_v7_FINAL.xlsx",
  },
  {
    title: "Financeiro desconectado dos contratos.",
    sample: "controle_parcelas_julho.xlsx",
  },
  {
    title: "Projetos técnicos sem visão gerencial.",
    sample: "/Projetos/2024/Aurélia/v3/...",
  },
  {
    title: "Equipe sem clareza de prioridades.",
    sample: "WhatsApp · pendências",
  },
  {
    title: "Documentos e templates sem padronização.",
    sample: "modelo_proposta_v9_revMC.docx",
  },
];

function Problem() {
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">O PROBLEMA · 01</span>
          <h2>Sua consultoria cresceu, mas a gestão continua espalhada?</h2>
          <p className="lede">
            Consultorias em mineração lidam diariamente com clientes, propostas,
            contratos, cobranças, documentos, projetos técnicos, responsáveis,
            prazos internos e informações da ANM. Quando tudo fica dividido
            entre planilhas, pastas, mensagens e arquivos locais, a operação
            perde produtividade e controle.
          </p>
        </div>
        <div className="problem-grid">
          {PAINS.map((p, i) => (
            <article key={i} className="pain-card">
              <span className="idx">DOR · {String(i + 1).padStart(2, "0")}</span>
              <h3>{p.title}</h3>
              <div className="scribble">
                <s>{p.sample}</s>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   4. Solution
   ============================================================ */
function Solution() {
  const pillars = [
    "Agenda",         "Projeto",         "CRM",
    "Cliente 360º",   "Financeiro",      "Minerário",
    "Nova Proposta",  "Novo Contrato",   "Histórico",
  ];
  return (
    <section className="section solution">
      <div className="container">
        <div className="solution-grid">
          <div className="section-head" style={{ marginBottom: 0 }}>
            <span className="eyebrow">A SOLUÇÃO · 02</span>
            <h2>Uma plataforma operacional para consultorias em mineração.</h2>
            <p className="lede">
              O MinerSuite organiza a rotina comercial, técnica e financeira da
              consultoria em um ambiente único. Da entrada de uma oportunidade
              até a execução do projeto técnico, o sistema conecta informações,
              reduz retrabalho e melhora a gestão da operação.
            </p>
          </div>
          <div className="solution-pillars">
            {pillars.map((p, i) => (
              <div key={i} className="p">
                <div className="num">M.{String(i + 1).padStart(2, "0")}</div>
                <div className="lbl">{p}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   5. Modules — interactive tabs
   ============================================================ */
const MODULES = [
  {
    id: "M.01",
    name: "Agenda colaborativa",
    short: "Agenda",
    desc: "Calendário operacional integrado a clientes, projetos e processos minerários. Reuniões, prazos, contratos e protocolos em uma agenda única, com RSVP, convites externos, comentários, menções e alertas de conflito.",
    feats: ["Views mês · semana · dia · lista", "RSVP interno e convites externos", "Comentários e menções @usuário", "Alerta de conflito de horário"],
    Visual: Visual_Agenda,
  },
  {
    id: "M.02",
    name: "Projeto",
    short: "Projeto",
    desc: "Organize projetos técnicos em Kanban, acompanhe tarefas, checklists, histórico, responsáveis, prazos internos, carga de trabalho e progresso da equipe.",
    feats: ["Kanban por projeto", "Tarefas e checklists", "Prazos internos", "Carga por responsável"],
    Visual: Visual_Projetos,
  },
  {
    id: "M.03",
    name: "CRM para consultorias em mineração",
    short: "CRM",
    desc: "Controle oportunidades, interações, tarefas, origem de leads, funil de vendas, responsáveis, ganhos por mês e indicadores comerciais.",
    feats: ["Funil de vendas", "Origem de leads", "Tarefas comerciais", "Indicadores por mês"],
    Visual: Visual_CRM,
  },
  {
    id: "M.04",
    name: "Cliente 360º",
    short: "Cliente 360º",
    desc: "Ficha completa do cliente com contatos, histórico de interações, documentos, processos minerários vinculados, oportunidades, propostas, contratos, cobranças e projetos.",
    feats: ["Histórico unificado", "Processos minerários vinculados", "Documentos centralizados", "Cobranças vinculadas"],
    Visual: Visual_Cliente360,
  },
  {
    id: "M.05",
    name: "Financeiro da consultoria",
    short: "Financeiro",
    desc: "Controle receitas, parcelas, recebimentos, despesas, movimentos, categorias, fluxo de caixa, inadimplência e margem por projeto.",
    feats: ["Fluxo de caixa", "Recebimentos e despesas", "Margem por projeto", "Inadimplência por contrato"],
    Visual: Visual_Financeiro,
  },
  {
    id: "M.06",
    name: "Minerário",
    short: "Minerário",
    desc: "Base preparada para trabalhar com microdados minerários indexados, apoiando consultas, organização e relacionamento de processos e informações da carteira mineral dentro da plataforma.",
    feats: ["Microdados indexados", "Consulta integrada", "Vínculo com clientes", "Apoio à carteira minerária"],
    Visual: Visual_ANM,
  },
  {
    id: "M.07",
    name: "Nova Proposta",
    short: "Nova Proposta",
    desc: "Crie, acompanhe e gerencie propostas profissionais com status, histórico de transições, itens, versões, snapshots e geração de documentos DOCX.",
    feats: ["Versões e snapshots", "Histórico de status", "Itens estruturados", "Exportação DOCX"],
    Visual: Visual_Propostas,
  },
  {
    id: "M.08",
    name: "Novo Contrato",
    short: "Novo Contrato",
    desc: "Gerencie contratos com parcelas previstas, renovação, encerramento, histórico de status e vínculos com propostas, oportunidades, projetos e processos minerários.",
    feats: ["Parcelas previstas", "Renovação e encerramento", "Vínculo com propostas", "Vínculo com processos minerários"],
    Visual: Visual_Contratos,
  },
  {
    id: "M.09",
    name: "Histórico",
    short: "Histórico",
    desc: "Linha do tempo unificada das alterações na operação: propostas, contratos, projetos, eventos e RSVPs. Cada ação registra autor, data, valor anterior e novo — rastreabilidade e auditoria em um único lugar.",
    feats: ["Log por entidade", "Autor das alterações", "Valor antigo · novo", "Filtros por tipo e data"],
    Visual: Visual_Historico,
  },
];

function Modules() {
  const [active, setActive] = useStateS(0);
  const mod = MODULES[active];
  const V = mod.Visual;
  return (
    <section className="section modules" id="modulos">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">MÓDULOS · 03</span>
          <h2>Nove módulos integrados, organizados na ordem da rotina.</h2>
          <p className="lede">
            Cada módulo do MinerSuite resolve um pedaço concreto da operação
            de uma consultoria mineral — da agenda do dia ao histórico
            completo das ações.
          </p>
        </div>

        <div className="modules-tabs">
          <div className="module-list" role="tablist" aria-label="Módulos do MinerSuite">
            {MODULES.map((m, i) => (
              <button
                key={m.id}
                className="module-tab"
                role="tab"
                aria-selected={i === active}
                onClick={() => setActive(i)}
              >
                <span className="id">{m.id}</span>
                <span className="name">{m.short}</span>
                <span className="chev">→</span>
              </button>
            ))}
          </div>

          <div className="module-panel" role="tabpanel" key={mod.id}>
            <div className="fade-in" style={{ display: "grid", gap: 24 }}>
              <div className="mp-head">
                <BrandMark size={28} gold />
                <div>
                  <div className="mp-id">{mod.id} · MÓDULO</div>
                  <div className="mp-name">{mod.name}</div>
                </div>
              </div>
              <p className="mp-desc">{mod.desc}</p>
              <div className="mp-feats">
                {mod.feats.map((f, i) => <span key={i}>{f}</span>)}
              </div>
              <V />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   6. Differentials
   ============================================================ */
const DIFFS = [
  { t: "Plataforma especializada", p: "Construída para a realidade operacional de consultorias em mineração — não um CRM genérico adaptado." },
  { t: "Linguagem do setor mineral", p: "Vocabulário, estrutura de dados e módulos alinhados ao dia a dia técnico e regulatório da consultoria." },
  { t: "Integração ponta a ponta", p: "Comercial, contratos, financeiro, projetos técnicos e agenda no mesmo ambiente, conectados por vínculos diretos." },
  { t: "Projetos técnicos em Kanban", p: "Gestão de projetos com tarefas, checklists, prazos internos e visão de carga por responsável." },
  { t: "Financeiro vinculado aos contratos", p: "Parcelas previstas, recebimentos, inadimplência e margem por projeto rastreáveis até o contrato." },
  { t: "Agenda colaborativa integrada", p: "Reuniões, prazos, contratos e protocolos com RSVP, convites externos, comentários, menções e alerta de conflito." },
  { t: "Documentos configuráveis", p: "Dados da empresa, papéis, cabeçalhos e modelos parametrizados para geração de documentos da consultoria." },
  { t: "Multiempresa e permissões", p: "Estrutura SaaS preparada para organizações com múltiplas unidades, papéis e níveis de acesso." },
  { t: "Interface técnica e objetiva", p: "Visual limpo, denso de informação e otimizado para profissionais que passam o dia no sistema." },
];

function Differentials() {
  return (
    <section className="section diff" id="diferenciais">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">DIFERENCIAIS · 04</span>
          <h2>Feito para a realidade de quem trabalha com mineração.</h2>
          <p className="lede">
            Não tentamos transformar a consultoria mineral em outra coisa.
            Estruturamos a plataforma a partir da forma como ela já opera.
          </p>
        </div>
        <div className="diff-grid">
          {DIFFS.map((d, i) => (
            <article key={i} className="diff-cell">
              <span className="n">{String(i + 1).padStart(2, "0")}</span>
              <h4>{d.t}</h4>
              <p>{d.p}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   7. Workflow timeline
   ============================================================ */
const FLOW = [
  { n: "01", t: "Cadastro do cliente",            m: "CLIENTE 360" },
  { n: "02", t: "Registro da oportunidade",       m: "CRM" },
  { n: "03", t: "Geração da proposta",            m: "PROPOSTAS" },
  { n: "04", t: "Aprovação e contrato",           m: "CONTRATOS" },
  { n: "05", t: "Geração do financeiro",          m: "FINANCEIRO" },
  { n: "06", t: "Criação do projeto técnico",     m: "PROJETOS" },
  { n: "07", t: "Execução · tarefas e checklist", m: "EQUIPE" },
  { n: "08", t: "Acompanhamento gerencial",       m: "PAINEL" },
];

function Workflow() {
  return (
    <section className="section workflow">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow" style={{ color: "var(--ms-gold-soft)" }}>FLUXO DE TRABALHO · 05</span>
          <h2 style={{ color: "var(--ms-paper)" }}>Da oportunidade ao projeto técnico.</h2>
          <p className="lede" style={{ color: "rgba(246,244,238,0.74)" }}>
            O MinerSuite conecta cada etapa da operação, mantendo histórico,
            vínculos e indicadores em um único ambiente.
          </p>
        </div>
        <div className="flow-track">
          <div className="flow-line" />
          <div className="flow-steps">
            {FLOW.map((s) => (
              <div className="flow-step" key={s.n}>
                <div className="dot">{s.n}</div>
                <div className="step-name">{s.t}</div>
                <div className="step-meta">{s.m}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   8. KPI Dashboard
   ============================================================ */
const KPIS = [
  { k: "Contratos ativos",   v: "58",          s: "+6 no mês",        trend: [3,5,6,4,7,8,9,7,8,10,11,12], badge: "12M" },
  { k: "Propostas em aberto", v: "24",         s: "9 aguardando análise", trend: [5,6,4,7,5,8,9,6,10,11,8,12], badge: "STATUS" },
  { k: "Parcelas vencidas",  v: "3",           s: "R$ 18.200 em risco", trend: [1,2,1,2,3,2,4,3,2,3,3,3], badge: "ATENÇÃO", danger: true },
  { k: "Valor a receber",    v: "R$ 482.300",  s: "12 parcelas · 30 dias", trend: [4,6,8,7,9,10,8,11,9,12,10,11], badge: "30 DIAS", gold: true },
  { k: "Projetos ativos",    v: "41",          s: "18 em execução · 23 backlog", trend: [3,5,6,8,7,9,10,9,12,11,10,12], badge: "AGORA" },
  { k: "Projetos críticos",  v: "6",           s: "prazo interno em risco", trend: [2,3,2,4,5,4,6,5,4,6,5,6], badge: "PRIORID.", danger: true },
  { k: "Projetos vencidos",  v: "2",           s: "fora do prazo interno", trend: [1,1,2,1,2,3,2,1,2,2,1,2], badge: "ATRASO", danger: true },
  { k: "Concluídos no mês",  v: "11",          s: "+3 vs. mês anterior", trend: [4,5,3,6,5,7,8,7,9,8,10,11], badge: "MAIO", gold: true },
  { k: "Margem média",       v: "38,4%",       s: "por projeto técnico",  trend: [6,7,8,7,9,8,10,9,8,10,9,11], badge: "12M" },
];

const WORKLOAD = [
  { who: "Marília C.",  role: "LÍDER TÉCNICO",      pct: 92, n: 92, sev: "crit" },
  { who: "Rafael T.",   role: "GEÓLOGO SÊNIOR",     pct: 78, n: 78, sev: "high" },
  { who: "Beatriz O.",  role: "COORD. COMERCIAL",   pct: 64, n: 64, sev: "" },
  { who: "João P.",     role: "COLABORADOR TÉCNICO",pct: 48, n: 48, sev: "ok" },
  { who: "Luana D.",    role: "ANALISTA ANM",        pct: 55, n: 55, sev: "" },
];

function KPISection() {
  return (
    <section className="section kpi-section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">PAINEL · 06</span>
          <h2>Indicadores para decidir com mais segurança.</h2>
          <p className="lede">
            Acompanhe a saúde comercial, financeira e operacional da consultoria
            com dashboards objetivos e indicadores conectados aos módulos do
            sistema.
          </p>
        </div>

        <div className="kpi-board">
          {KPIS.map((k, i) => (
            <article key={i} className={"kpi-card" + (k.gold ? " gold" : "") + (k.danger ? " danger" : "")}>
              <div className="head">
                <span>{k.k}</span>
                <span className="badge">{k.badge}</span>
              </div>
              <div className="v">{k.v}</div>
              <div className="sub">{k.s}</div>
              <div className="trend" aria-hidden="true">
                {k.trend.map((t, j) => (
                  <i key={j} style={{ height: (t / 12) * 100 + "%" }} />
                ))}
              </div>
            </article>
          ))}
        </div>

        <div className="workload">
          <div className="workload-head">
            <div>
              <h4>Carga de trabalho por responsável</h4>
              <span className="eyebrow" style={{ fontSize: 10, marginTop: 4 }}>EQUIPE · MAIO/2026</span>
            </div>
            <span className="tag mono">5 ATIVOS</span>
          </div>
          <div className="workload-list">
            {WORKLOAD.map((w) => (
              <div key={w.who} className={"workload-row " + w.sev}>
                <div className="who">
                  <span className="avatar">{w.who.split(" ").map(s => s[0]).join("").slice(0, 2)}</span>
                  <span>
                    {w.who}
                    <span className="role">{w.role}</span>
                  </span>
                </div>
                <div className="bar"><span style={{ width: w.pct + "%" }} /></div>
                <span className="pct">{w.n}%</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   9. Multiempresa & permissões
   ============================================================ */
const ROLES = [
  { r: "Super admin",          d: "Visão e administração da plataforma como um todo." },
  { r: "Admin da organização", d: "Configuração da consultoria, equipe, integrações e papéis." },
  { r: "Gerente",              d: "Acompanhamento comercial, financeiro e operacional da consultoria." },
  { r: "Líder técnico",        d: "Distribuição de tarefas, prazos e acompanhamento dos projetos técnicos." },
  { r: "Colaborador",          d: "Execução das tarefas atribuídas, com acesso aos seus projetos e checklists." },
  { r: "Visualizador",         d: "Acesso somente leitura a clientes, propostas, contratos e projetos." },
];

function Multiempresa() {
  return (
    <section className="section multi">
      <div className="container multi-grid">
        <div>
          <span className="eyebrow" style={{ color: "var(--ms-gold-soft)" }}>MULTIEMPRESA · 07</span>
          <h2 style={{ color: "var(--ms-paper)", marginTop: 16 }}>
            Estrutura SaaS preparada para crescer.
          </h2>
          <p className="lede" style={{ color: "rgba(246,244,238,0.78)", marginTop: 20 }}>
            O MinerSuite já nasce com base multiempresa, controle de
            organizações, usuários, projetos e permissões por papel. A
            plataforma permite diferentes níveis de acesso, com perfis
            adequados à hierarquia da consultoria.
          </p>
          <div className="hero-meta" style={{ marginTop: 32, paddingTop: 32, borderColor: "rgba(246,244,238,0.10)" }}>
            <div>
              <span className="label" style={{ color: "var(--ms-gold-soft)" }}>BASE</span>
              <span className="value">Multiempresa</span>
            </div>
            <div>
              <span className="label" style={{ color: "var(--ms-gold-soft)" }}>ACESSO</span>
              <span className="value">Cookie HttpOnly</span>
            </div>
            <div>
              <span className="label" style={{ color: "var(--ms-gold-soft)" }}>PERFIS</span>
              <span className="value">6 papéis padrão</span>
            </div>
          </div>
        </div>
        <div className="role-list">
          {ROLES.map((r) => (
            <div key={r.r} className="role-row">
              <span className="r">{r.r}</span>
              <span className="desc">{r.d}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   10. Para quem é
   ============================================================ */
const AUDIENCE = [
  { n: "P.01", t: "Consultorias em mineração em fase de crescimento." },
  { n: "P.02", t: "Escritórios que querem sair das planilhas dispersas." },
  { n: "P.03", t: "Empresas que precisam controlar propostas, contratos e financeiro." },
  { n: "P.04", t: "Equipes técnicas que executam projetos minerários." },
  { n: "P.05", t: "Gestores que precisam acompanhar produtividade e prazos internos." },
];

function ParaQuem() {
  return (
    <section className="section section--ink" id="para-quem">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">PARA QUEM É · 07</span>
          <h2>Para consultorias que precisam transformar operação em gestão.</h2>
        </div>
        <div className="audience-grid">
          {AUDIENCE.map((a) => (
            <article key={a.n} className="aud-cell">
              <span className="n">{a.n}</span>
              <h4>{a.t}</h4>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   11. Tecnologia
   ============================================================ */
function Sobre() {
  return (
    <section className="section sobre" id="sobre">
      <div className="container sobre-grid">
        <div>
          <span className="eyebrow">SOBRE · 08</span>
          <h2 style={{ marginTop: 16 }}>
            Construído por dentro da rotina de uma consultoria mineral.
          </h2>
          <p className="lede" style={{ marginTop: 20 }}>
            O MinerSuite nasceu da observação direta da operação de
            consultorias em mineração: a entrada de oportunidades, a geração
            de propostas, a formalização do contrato, o controle financeiro e
            a execução dos projetos técnicos. Cada módulo da plataforma
            resolve uma etapa concreta dessa rotina.
          </p>
          <div className="sobre-quote">
            Da oportunidade mineral ao projeto técnico, tudo sob controle.
          </div>
          <div className="sobre-meta">
            <div className="cell">
              <span className="k">FOCO</span>
              <span className="v">Setor mineral</span>
              <span className="sub">Plataforma especializada em consultorias em mineração.</span>
            </div>
            <div className="cell gold">
              <span className="k">MÓDULOS</span>
              <span className="v">9 integrados</span>
              <span className="sub">Da agenda do dia ao histórico completo das ações.</span>
            </div>
            <div className="cell">
              <span className="k">BASE</span>
              <span className="v">SaaS · multiempresa</span>
              <span className="sub">Organizações, papéis e permissões por usuário.</span>
            </div>
            <div className="cell">
              <span className="k">CONSTRUÇÃO</span>
              <span className="v">Direto do setor</span>
              <span className="sub">Vocabulário e fluxos alinhados ao dia a dia técnico.</span>
            </div>
          </div>
        </div>

        <div className="brand-composition" aria-hidden="true">
          <div className="tile">
            <span className="k">MISSÃO</span>
            <span className="v">Profissionalizar a gestão da consultoria mineral.</span>
          </div>
          <div className="tile gold">
            <span className="k">DIREÇÃO</span>
            <span className="v">Operação técnica em primeiro lugar.</span>
          </div>
          <div className="tile empty"></div>
          <div className="tile soft">
            <span className="k">MÉTODO</span>
            <span className="v">Módulos integrados, sem retrabalho.</span>
          </div>
          <div className="tile">
            <span className="k">VISÃO</span>
            <span className="v">Da oportunidade ao projeto técnico, conectado.</span>
          </div>
          <div className="tile">
            <span className="k">PRÁTICA</span>
            <span className="v">Interface densa e objetiva, para uso diário.</span>
          </div>
          <div className="tile empty"></div>
          <div className="tile">
            <span className="k">SETOR</span>
            <span className="v">Consultorias em mineração.</span>
          </div>
          <div className="tile">
            <span className="k">PRINCÍPIO</span>
            <span className="v">Controle sem complicar a rotina.</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Planos
   ============================================================ */
const PLANOS = [
  {
    id: "P.01",
    name: "Starter",
    desc: "Para engenheiros autônomos ou consultorias em fase inicial que precisam organizar clientes, propostas e projetos técnicos com mais controle.",
    price: "197",
    per: "/mês",
    priceYear: "R$ 1.970/ano",
    users: "1 usuário",
    extraUser: "Usuário adicional: não disponível",
    feats: [
      "Cadastro de clientes",
      "Cliente 360 básico",
      "CRM simples",
      "Propostas comerciais",
      "Geração de documentos DOCX",
      "Projetos básicos",
      "Tarefas simples",
      "Templates básicos",
      "Dashboard inicial",
    ],
    cta: "Começar com Starter",
  },
  {
    id: "P.02",
    name: "Essencial",
    desc: "Para consultorias que querem sair das planilhas dispersas e organizar clientes, oportunidades, propostas e projetos técnicos.",
    price: "397",
    per: "/mês",
    priceYear: "R$ 3.970/ano",
    users: "Até 3 usuários",
    extraUser: "Usuário adicional: R$ 69/mês",
    feats: [
      "Cliente 360",
      "CRM para oportunidades",
      "Propostas comerciais",
      "Geração de documentos DOCX",
      "Contratos básicos",
      "Projetos em Kanban",
      "Tarefas e checklists",
      "Templates básicos",
      "Dashboard inicial",
      "Dados da empresa nos documentos",
    ],
    cta: "Solicitar demonstração",
  },
  {
    id: "P.03",
    name: "Profissional",
    desc: "Para consultorias em operação ativa que precisam integrar comercial, contratos, financeiro e projetos técnicos.",
    price: "797",
    per: "/mês",
    priceYear: "R$ 7.970/ano",
    users: "Até 5 usuários",
    extraUser: "Usuário adicional: R$ 89/mês",
    featured: true,
    feats: [
      "Tudo do Essencial",
      "Financeiro completo",
      "Receitas, despesas e recebimentos",
      "Fluxo de caixa",
      "Inadimplência",
      "Margem por projeto",
      "Contratos avançados",
      "Histórico de status",
      "Analytics de CRM",
      "Analytics de propostas",
      "Dashboard gerencial de projetos",
      "Carga de trabalho por responsável",
      "Templates avançados",
    ],
    cta: "Solicitar demonstração",
  },
  {
    id: "P.04",
    name: "Business",
    desc: "Para consultorias estruturadas, com equipe, responsabilidades internas e necessidade de gestão operacional mais completa.",
    price: "1.497",
    per: "/mês",
    priceYear: "R$ 14.970/ano",
    users: "Até 10 usuários",
    extraUser: "Usuário adicional: R$ 99/mês",
    feats: [
      "Tudo do Profissional",
      "Gestão de usuários e equipe",
      "Papéis e permissões",
      "Organização da empresa",
      "Projetos com responsáveis",
      "Indicadores de projetos críticos",
      "Controle administrativo",
      "Estrutura multiempresa",
      "Perfil da organização",
      "Melhor acompanhamento gerencial",
    ],
    cta: "Falar com a equipe",
  },
  {
    id: "P.05",
    name: "Enterprise",
    desc: "Para operações com necessidades específicas de usuários, estrutura, limites, condições comerciais ou configuração.",
    price: "Sob consulta",
    per: "Plano anual sob consulta",
    priceYear: "Plano anual sob consulta",
    users: "Personalizado",
    extraUser: "Usuário adicional: sob consulta",
    feats: [
      "Tudo do Business",
      "Condições comerciais personalizadas",
      "Usuários conforme necessidade",
      "Estrutura por organização",
      "Configuração conforme escopo",
      "Acompanhamento comercial dedicado",
      "Limites e recursos conforme negociação",
    ],
    cta: "Falar com vendas",
  },
];

function PlanCard({ p }) {
  return (
    <article className={"plan" + (p.featured ? " featured" : "")}>
      {p.featured && <span className="plan-tag">Recomendado</span>}
      <div>
        <div className="plan-id">{p.id} · PLANO</div>
        <div className="plan-name" style={{ marginTop: 6 }}>{p.name}</div>
      </div>
      <p className="plan-desc">{p.desc}</p>
      <div>
        <div className="plan-price">
          {p.price === "Sob consulta" ? (
            <span className="amount" style={{ fontSize: 22 }}>Sob consulta</span>
          ) : (
            <>
              <span className="currency">R$</span>
              <span className="amount">{p.price}</span>
              <span className="per">{p.per}</span>
            </>
          )}
        </div>
        <div className="plan-price-year">ou {p.priceYear}</div>
      </div>
      <div className="plan-meta-stack">
        <div className="plan-users">{p.users}</div>
        <div className="plan-extra-user">{p.extraUser}</div>
      </div>
      <ul className="plan-feats">
        {p.feats.map((f, i) => <li key={i}>{f}</li>)}
      </ul>
      <a href="contato.html" className={"btn plan-cta " + (p.featured ? "btn--primary" : "btn--ink")}>
        {p.cta}
        <span className="arrow">→</span>
      </a>
    </article>
  );
}

function Planos() {
  return (
    <section className="section planos" id="planos">
      <div className="container">
        <div className="section-head section-head--center">
          <span className="eyebrow">PLANOS · 09</span>
          <h2>Planos para diferentes estágios da sua consultoria.</h2>
          <p className="lede">
            Comece organizando clientes, propostas e projetos técnicos. Evolua
            para contratos, financeiro, equipe e gestão operacional completa.
          </p>
        </div>
        <div className="planos-grid">
          {PLANOS.map((p) => <PlanCard key={p.id} p={p} />)}
        </div>
        <div className="planos-foot">
          <p className="planos-note">
            Valores públicos mensais e anuais. Condições comerciais podem ser
            tratadas na demonstração.
          </p>
          <a href="planos.html" className="btn btn--ghost">
            Ver todos os planos
            <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Blog
   ============================================================ */
const POSTS = [
  {
    cat: "GESTÃO",
    slug: "estruturar-financeiro-consultoria-mineral",
    date: "18 MAI · 2026",
    title: "Como estruturar o financeiro de uma consultoria mineral conectado aos contratos.",
    excerpt: "Como mapear parcelas previstas, inadimplência e margem por projeto sem multiplicar planilhas.",
    deco: (
      <svg width="160" height="100" viewBox="0 0 160 100" aria-hidden="true">
        {[12, 28, 22, 40, 32, 56, 48, 64, 52, 72].map((h, i) =>
          <rect key={i} x={10 + i * 14} y={90 - h} width="10" height={h} rx="1" fill={i === 7 ? "#C9A24A" : "rgba(246,244,238,0.32)"} />
        )}
      </svg>
    ),
  },
  {
    cat: "OPERAÇÃO",
    slug: "templates-projeto-padronizando-execucao",
    date: "11 MAI · 2026",
    title: "Templates de projeto: padronizando a execução técnica em consultorias minerais.",
    excerpt: "Por que tarefas e checklists padrão reduzem retrabalho em projetos de pesquisa mineral.",
    deco: (
      <svg width="160" height="100" viewBox="0 0 160 100" aria-hidden="true">
        {[0, 1, 2].map((i) => (
          <g key={i} transform={`translate(${i * 50}, 10)`}>
            <rect x="0" y="0" width="42" height="80" rx="4" fill="rgba(246,244,238,0.06)" stroke="rgba(246,244,238,0.18)" />
            <rect x="6" y="10" width="30" height="3" rx="1" fill="rgba(246,244,238,0.4)" />
            <rect x="6" y="18" width="22" height="3" rx="1" fill="rgba(246,244,238,0.25)" />
            <rect x="6" y="30" width="10" height="10" rx="1" fill={i === 1 ? "#C9A24A" : "rgba(246,244,238,0.2)"} />
            <rect x="20" y="34" width="16" height="2" rx="1" fill="rgba(246,244,238,0.3)" />
            <rect x="6" y="46" width="10" height="10" rx="1" fill="rgba(246,244,238,0.2)" />
            <rect x="20" y="50" width="16" height="2" rx="1" fill="rgba(246,244,238,0.3)" />
          </g>
        ))}
      </svg>
    ),
  },
  {
    cat: "DADOS ANM",
    slug: "microdados-anm-inteligencia-mineraria",
    date: "02 MAI · 2026",
    title: "Microdados ANM como base de inteligência minerária para consultorias.",
    excerpt: "Como organizar e relacionar informações de processos minerários dentro da plataforma de gestão.",
    deco: (
      <svg width="160" height="100" viewBox="0 0 160 100" aria-hidden="true">
        <g stroke="rgba(246,244,238,0.18)" fill="none">
          <circle cx="80" cy="50" r="38" />
          <circle cx="80" cy="50" r="26" />
          <circle cx="80" cy="50" r="14" />
        </g>
        <circle cx="80" cy="50" r="3" fill="#C9A24A" />
        <circle cx="118" cy="50" r="3" fill="#F6F4EE" />
        <circle cx="42" cy="50" r="3" fill="#F6F4EE" />
        <circle cx="100" cy="28" r="3" fill="#F6F4EE" />
        <circle cx="60" cy="72" r="3" fill="#F6F4EE" />
        <circle cx="106" cy="76" r="3" fill="rgba(246,244,238,0.6)" />
        <circle cx="54" cy="28" r="3" fill="rgba(246,244,238,0.6)" />
      </svg>
    ),
  },
];

function Blog() {
  return (
    <section className="section blog" id="blog">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">BLOG · 10</span>
          <h2>Conteúdo técnico para consultorias em mineração.</h2>
          <p className="lede">
            Artigos sobre gestão operacional, propostas, contratos, projetos
            técnicos e organização de carteira minerária — escritos a partir
            da rotina real do setor.
          </p>
        </div>
        <div className="blog-grid">
          {POSTS.map((p, i) => (
            <a key={i} href={"blog.html#" + (p.slug || "")} className="blog-card">
              <div className="blog-cover">
                <span className="label">{p.cat}</span>
                <div className="deco">{p.deco}</div>
              </div>
              <div className="blog-body">
                <span className="date">{p.date}</span>
                <h4>{p.title}</h4>
                <p>{p.excerpt}</p>
                <span className="read">
                  Ler artigo <span className="arrow">→</span>
                </span>
              </div>
            </a>
          ))}
        </div>
        <div className="planos-foot" style={{ marginTop: 32, justifyContent: "center" }}>
          <a href="blog.html" className="btn btn--ink">
            Ver todos os artigos
            <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Tecnologia
   ============================================================ */
function Tecnologia() {
  const items = [
    { k: "Backend",       v: "Node.js · Express" },
    { k: "Banco de dados", v: "SQLite · WAL mode" },
    { k: "Frontend",      v: "HTML, CSS e JS" },
    { k: "Autenticação",  v: "Sessão · cookie HttpOnly" },
    { k: "API",           v: "REST versionada" },
    { k: "Arquitetura",   v: "Leve · estável · evolutiva" },
  ];
  return (
    <section className="section tech">
      <div className="container tech-inner">
        <div>
          <span className="eyebrow">TECNOLOGIA · 10</span>
          <h2 style={{ marginTop: 16 }}>Base técnica simples, estável e eficiente.</h2>
          <p className="lede" style={{ marginTop: 20 }}>
            O MinerSuite utiliza uma arquitetura leve e robusta, pensada para
            consultorias que precisam de uma plataforma confiável, com
            performance previsível e baixo custo operacional.
          </p>
        </div>
        <div className="tech-stack">
          {items.map((i) => (
            <div key={i.k} className="item">
              <span className="k">{i.k}</span>
              <span className="v">{i.v}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   12. CTA Final
   ============================================================ */
function CTAFinal() {
  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 · 11</span>
          <h2>
            Organize sua consultoria em mineração com inteligência, controle e
            <span style={{ color: "var(--ms-gold)" }}> produtividade.</span>
          </h2>
          <p className="lede">
            Centralize clientes, propostas, contratos, financeiro e projetos
            técnicos em uma plataforma criada para a rotina do setor mineral.
          </p>
          <div className="cta-buttons">
            <a href="contato.html" className="btn btn--primary">
              Solicitar demonstração
              <span className="arrow">→</span>
            </a>
            <a href="contato.html" className="btn btn--ghost btn--on-dark">
              Falar com a equipe
            </a>
            <a href="contato.html" className="btn btn--ghost btn--on-dark">
              Entrar na lista de espera
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   13. Footer
   ============================================================ */
function Footer() {
  return (
    <footer className="footer" id="contato">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <a href="index.html#top" className="header-logo" style={{ color: "var(--ms-paper)" }}>
              <BrandMark size={26} />
              <span style={{ fontSize: 17 }}>Miner<span className="suite">Suite</span></span>
            </a>
            <p className="tag-line">
              Gestão completa para consultorias em mineração.
            </p>
          </div>
          <div>
            <h5>PRODUTO</h5>
            <ul>
              <li><a href="index.html#produto">Visão geral</a></li>
              <li><a href="index.html#modulos">Módulos</a></li>
              <li><a href="index.html#diferenciais">Diferenciais</a></li>
              <li><a href="contato.html">Demonstração</a></li>
            </ul>
          </div>
          <div>
            <h5>EMPRESA</h5>
            <ul>
              <li><a href="sobre.html">Sobre</a></li>
              <li><a href="planos.html">Planos</a></li>
              <li><a href="blog.html">Blog</a></li>
              <li><a href="index.html#para-quem">Para quem é</a></li>
            </ul>
          </div>
          <div>
            <h5>CONTATO</h5>
            <ul>
              <li><a href="contato.html">Falar com a equipe</a></li>
              <li><a href="mailto:contato@minersuite.com.br">contato@minersuite.com.br</a></li>
              <li><a href="contato.html">Solicitar demonstração</a></li>
              <li><a href="#privacidade">Política de privacidade</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <small>© 2026 · MINERSUITE · GESTÃO PARA CONSULTORIAS EM MINERAÇÃO</small>
          <small>v1.0 · DIREÇÃO MÓDULOS · GRID VAZADO</small>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Header, Hero, Problem, Solution, Modules, Differentials,
  Workflow, KPISection, Multiempresa, ParaQuem,
  Sobre, Planos, Blog, Tecnologia, CTAFinal, Footer,
  PLANOS, PlanCard
});