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

const { useState: useStateP } = React;

/* ============================================================
   Hero — Planos
   ============================================================ */
function PlanosHero() {
  return (
    <section className="planos-hero" id="top">
      <div className="container">
        <div className="planos-hero-inner">
          <div style={{ display: "grid", gap: 24 }}>
            <span className="eyebrow" style={{ color: "var(--ms-gold-soft)" }}>
              PLANOS · MINERSUITE
            </span>
            <h1>
              Planos <span className="gold">MinerSuite.</span>
            </h1>
            <p className="lede">
              Escolha o plano mais adequado para organizar clientes, propostas,
              contratos, financeiro e projetos técnicos da sua consultoria em
              mineração.
            </p>
            <p className="sub">
              O MinerSuite foi desenvolvido para consultorias que precisam
              transformar uma operação espalhada em planilhas, arquivos e
              controles manuais em uma gestão integrada, técnica e produtiva.
            </p>
            <div className="planos-hero-ctas">
              <a href="contato.html" className="btn btn--primary">
                Solicitar demonstração
                <span className="arrow">→</span>
              </a>
              <a href="#comparar" className="btn btn--ghost btn--on-dark">
                Comparar planos
              </a>
            </div>
          </div>
          <div className="planos-hero-meta">
            <div className="m">
              <span className="k">PLANOS</span>
              <span className="v">5 opções</span>
              <span className="s">Do Starter ao Enterprise.</span>
            </div>
            <div className="m">
              <span className="k">USUÁRIOS</span>
              <span className="v">1 · 3 · 5 · 10 · sob consulta</span>
              <span className="s">Escala conforme o porte da consultoria.</span>
            </div>
            <div className="m">
              <span className="k">COBRANÇA</span>
              <span className="v">Mensal ou anual</span>
              <span className="s">Plano anual com desconto público.</span>
            </div>
            <div className="m">
              <span className="k">EVOLUÇÃO</span>
              <span className="v">Upgrade flexível</span>
              <span className="s">Mude de plano conforme a operação cresce.</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Full plan cards — reuses PLANOS from sections.jsx
   ============================================================ */
function FullPlans() {
  return (
    <section className="section planos" id="cards">
      <div className="container">
        <div className="section-head section-head--center">
          <span className="eyebrow">CARDS COMPLETOS · 01</span>
          <h2>Cinco planos, do Starter ao Enterprise.</h2>
          <p className="lede">
            Toda a base de gestão da consultoria já vem desde o plano inicial.
            Os planos superiores adicionam financeiro completo, gestão de
            equipe e estrutura multiempresa.
          </p>
        </div>
        <div className="planos-grid">
          {PLANOS.map((p) => <PlanCard key={p.id} p={p} />)}
        </div>
        <div className="planos-foot" style={{ justifyContent: "center" }}>
          <p className="planos-note">
            Valores públicos mensais e anuais. Condições comerciais podem ser
            tratadas na demonstração.
          </p>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Comparison table
   ============================================================ */
const COMPARE_ROWS = [
  ["Valor mensal",           "R$ 197/mês",          "R$ 397/mês",        "R$ 797/mês",         "R$ 1.497/mês",         "Sob consulta"],
  ["Valor anual",            "R$ 1.970/ano",        "R$ 3.970/ano",      "R$ 7.970/ano",       "R$ 14.970/ano",        "Sob consulta"],
  ["Usuários incluídos",     "1",                   "Até 3",             "Até 5",              "Até 10",               "Personalizado"],
  ["Usuário adicional",      ["no", "Não disponível"], "R$ 69/mês",      "R$ 89/mês",          "R$ 99/mês",            "Sob consulta"],
  ["Cliente 360",            ["basico", "Básico"],  "ok",                "ok",                 "ok",                   "ok"],
  ["CRM",                    ["basico", "Simples"], "ok",                "ok",                 "ok",                   "ok"],
  ["Propostas comerciais",   "ok",                  "ok",                "ok",                 "ok",                   "ok"],
  ["Geração de DOCX",        "ok",                  "ok",                "ok",                 "ok",                   "ok"],
  ["Contratos",              "no",                  ["basico", "Básico"], "Avançado",          "Avançado",             "Personalizado"],
  ["Financeiro",             "no",                  ["basico", "Básico"], "Completo",          "Completo",             "Personalizado"],
  ["Projetos Kanban",        ["basico", "Básico"],  "ok",                "ok",                 "ok",                   "ok"],
  ["Tarefas e checklists",   ["basico", "Básico"],  "ok",                "ok",                 "ok",                   "ok"],
  ["Templates de projeto",   ["basico", "Básico"],  ["basico", "Básico"], "Avançado",          "Avançado",             "Personalizado"],
  ["Dashboards",             ["basico", "Inicial"], ["basico", "Inicial"], "Gerencial",        "Gerencial",            "Personalizado"],
  ["Gestão de equipe",       "no",                  ["basico", "Básica"], ["partial", "Parcial"], "Completa",          "Personalizada"],
  ["Papéis e permissões",    "no",                  "no",                ["partial", "Parcial"], "Completo",          "Personalizado"],
  ["Estrutura multiempresa", "no",                  "no",                "no",                 "ok",                   "ok"],
  ["Microdados ANM",         "Consulta de apoio",   "Consulta de apoio", "Consulta de apoio",  "Consulta de apoio",    "Conforme escopo"],
];

function Cell({ v }) {
  if (v === "ok") {
    return <span className="cell-val"><span className="dot" />Sim</span>;
  }
  if (v === "no") {
    return <span className="cell-val no"><span className="dot" />Não</span>;
  }
  if (Array.isArray(v)) {
    const [kind, label] = v;
    return <span className={"cell-val " + kind}><span className="dot" />{label}</span>;
  }
  return <span className="cell-val"><span className="dot" />{v}</span>;
}

function ComparisonTable() {
  return (
    <section className="section compare" id="comparar">
      <div className="container">
        <div className="section-head section-head--center">
          <span className="eyebrow">COMPARATIVO · 02</span>
          <h2>Compare os planos.</h2>
          <p className="lede">
            Escolha a estrutura mais adequada para o estágio atual da sua
            consultoria.
          </p>
        </div>
        <div className="compare-wrap">
          <table className="compare-table">
            <thead>
              <tr>
                <th style={{ width: 220 }}>Recurso</th>
                <th>
                  <span className="col-id">P.01</span>
                  Starter
                </th>
                <th>
                  <span className="col-id">P.02</span>
                  Essencial
                </th>
                <th className="is-featured is-recommended-badge">
                  <span className="col-id">P.03</span>
                  Profissional
                </th>
                <th>
                  <span className="col-id">P.04</span>
                  Business
                </th>
                <th>
                  <span className="col-id">P.05</span>
                  Enterprise
                </th>
              </tr>
            </thead>
            <tbody>
              {COMPARE_ROWS.map((row, i) => (
                <tr key={i}>
                  <td>{row[0]}</td>
                  <td><Cell v={row[1]} /></td>
                  <td><Cell v={row[2]} /></td>
                  <td className="is-featured-col"><Cell v={row[3]} /></td>
                  <td><Cell v={row[4]} /></td>
                  <td><Cell v={row[5]} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <p className="compare-hint">↔ Arraste a tabela para ver todas as colunas</p>
      </div>
    </section>
  );
}

/* ============================================================
   Qual plano escolher?
   ============================================================ */
function QualEscolher() {
  return (
    <section className="section qual">
      <div className="container">
        <div className="section-head section-head--center">
          <span className="eyebrow">RECOMENDAÇÃO · 03</span>
          <h2>Qual plano escolher?</h2>
          <p className="lede">
            Um guia rápido para identificar o plano alinhado ao estágio atual
            da sua consultoria.
          </p>
        </div>
        <div className="qual-grid">
          <article className="qual-card soft">
            <span className="label">RECOMENDADO · ENG. AUTÔNOMO</span>
            <h3>Escolha o Starter se</h3>
            <p>
              Você atua sozinho ou está começando a estruturar a gestão da
              consultoria, com foco em clientes, propostas e projetos básicos.
            </p>
            <span className="pick">→ STARTER · R$ 197/MÊS · 1 USUÁRIO</span>
          </article>
          <article className="qual-card soft">
            <span className="label">RECOMENDADO · ESTÁGIO INICIAL</span>
            <h3>Escolha o Essencial se</h3>
            <p>
              Sua consultoria está organizando a operação, saindo de planilhas
              e precisa centralizar clientes, oportunidades, propostas e
              projetos técnicos.
            </p>
            <span className="pick">→ ESSENCIAL · R$ 397/MÊS · 3 USUÁRIOS</span>
          </article>
          <article className="qual-card gold">
            <span className="label">RECOMENDADO · OPERAÇÃO ATIVA</span>
            <h3>Escolha o Profissional se</h3>
            <p>
              Você já tem equipe, contratos ativos, financeiro a controlar e
              precisa acompanhar projetos, receitas, inadimplência e margem
              por projeto.
            </p>
            <span className="pick">→ PROFISSIONAL · R$ 797/MÊS · 5 USUÁRIOS</span>
          </article>
          <article className="qual-card">
            <span className="label">RECOMENDADO · OPERAÇÃO ESTRUTURADA</span>
            <h3>Escolha o Business se</h3>
            <p>
              Sua consultoria possui operação mais estruturada, mais usuários,
              responsabilidades internas, gestão de equipe e necessidade de
              permissões.
            </p>
            <span className="pick">→ BUSINESS · R$ 1.497/MÊS · 10 USUÁRIOS</span>
          </article>
          <article className="qual-card">
            <span className="label">RECOMENDADO · ESCOPO PERSONALIZADO</span>
            <h3>Escolha o Enterprise se</h3>
            <p>
              Sua operação precisa de condições comerciais, limites, usuários
              ou estrutura definidos conforme escopo.
            </p>
            <span className="pick">→ ENTERPRISE · SOB CONSULTA</span>
          </article>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   FAQ — accordion
   ============================================================ */
const FAQS = [
  {
    q: "O MinerSuite é um sistema de monitoramento de processos?",
    a: "Não. O MinerSuite é uma plataforma de gestão para consultorias em mineração. Ele organiza clientes, propostas, contratos, financeiro, projetos técnicos, equipe e dados relacionados à operação da consultoria.",
  },
  {
    q: "Os valores incluem implantação?",
    a: "Os valores exibidos são referentes à assinatura dos planos. Condições comerciais, configurações iniciais e planos anuais são tratados durante a demonstração.",
  },
  {
    q: "Existe desconto no plano anual?",
    a: "Sim. Os planos Starter, Essencial, Profissional e Business possuem valor anual com desconto em relação à cobrança mensal.",
  },
  {
    q: "Posso adicionar mais usuários?",
    a: "Sim, exceto no plano Starter. No plano Essencial, o usuário adicional custa R$ 69/mês. No Profissional, R$ 89/mês. No Business, R$ 99/mês. No Enterprise, as condições são personalizadas.",
  },
  {
    q: "Posso mudar de plano depois?",
    a: "Sim. A consultoria pode evoluir de plano conforme o crescimento da operação, aumento da equipe e necessidade de novos recursos.",
  },
  {
    q: "Existe plano personalizado?",
    a: "Sim. O plano Enterprise é indicado para empresas que precisam de condições específicas, maior número de usuários ou estrutura comercial personalizada.",
  },
];

function FAQ() {
  const [open, setOpen] = useStateP(0);
  return (
    <section className="section faq">
      <div className="container">
        <div className="section-head section-head--center">
          <span className="eyebrow">PERGUNTAS FREQUENTES · 04</span>
          <h2>Tudo o que você precisa saber sobre os planos.</h2>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className="faq-item">
                <button
                  className="faq-q"
                  aria-expanded={isOpen}
                  onClick={() => setOpen(isOpen ? -1 : i)}
                >
                  <span style={{ display: "flex", alignItems: "center", flex: 1 }}>
                    <span className="num">{String(i + 1).padStart(2, "0")}</span>
                    <span>{f.q}</span>
                  </span>
                  <span className="toggle" aria-hidden="true"></span>
                </button>
                {isOpen && <div className="faq-a">{f.a}</div>}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   CTA Final — planos
   ============================================================ */
function PlanosCTAFinal() {
  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 · 05
          </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 vendas
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Page
   ============================================================ */
function PlanosPage() {
  return (
    <>
      <Header />
      <main>
        <PlanosHero />
        <FullPlans />
        <ComparisonTable />
        <QualEscolher />
        <FAQ />
        <PlanosCTAFinal />
      </main>
      <Footer />
    </>
  );
}

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