<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora de Orçamento — Imperatriz High-Ticket</title>

<!--
═══════════════════════════════════════════════════════════════════════════════
CALCULADORA DE ORÇAMENTO AO VIVO — Imperatriz High-Ticket
Travessia Imperatriz Tata Gonçalves

COMO USAR:
1. Abre esse arquivo no Chrome/Safari/Firefox (clique duplo, sem servidor)
2. Compartilha a tela no Zoom/Meet durante a reunião
3. Marca/desmarca componentes ao vivo
4. Ajusta sliders de complexidade e prazo
5. Botão "Salvar como PDF" abre o print nativo
6. Botão "Copiar resumo" cola bullets prontos pra mandar no WhatsApp

═══════════════════════════════════════════════════════════════════════════════
VARIÁVEIS CONFIGURÁVEIS — AJUSTE AQUI SEM MEXER NO CÓDIGO:

NOME_MENTORADA      → muda no <h1> e no rodapé
NICHO               → muda no subtítulo
COMPONENTES         → bloco <div class="componentes"> abaixo
                      cada <div class="item"> tem data-valor="VALOR_BASE"
STACK_BONUS         → bloco <div class="bonus"> abaixo
ANCORAGEM_MULTIPLIER → JS variável window.CONFIG.ancoragemMultiplier (3 a 4)
PARCELAMENTOS       → JS variável window.CONFIG.parcelas

═══════════════════════════════════════════════════════════════════════════════
-->

<style>
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bordeaux: #6E1423;
  --bordeaux-dark: #4A0E18;
  --dourado: #D6A648;
  --dourado-claro: #E8C77F;
  --preto: #1A1A1A;
  --branco: #FFFFFF;
  --cinza-claro: #F5F1EC;
  --cinza-borda: #E2DAD0;
  --verde: #2A7F3E;
  --cinza-texto: #5C5C5C;
  --sombra: rgba(110, 20, 35, 0.08);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--preto);
  background: var(--cinza-claro);
  padding: 24px 16px;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--branco);
  border-radius: 16px;
  box-shadow: 0 8px 32px var(--sombra);
  overflow: hidden;
}

header {
  background: linear-gradient(135deg, var(--bordeaux) 0%, var(--bordeaux-dark) 100%);
  color: var(--branco);
  padding: 32px 40px;
  border-bottom: 4px solid var(--dourado);
}

header h1 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}

header .subtitulo {
  font-size: 18px;
  opacity: 0.9;
  color: var(--dourado-claro);
}

.cliente-bar {
  display: flex;
  gap: 24px;
  padding: 20px 40px;
  background: var(--branco);
  border-bottom: 1px solid var(--cinza-borda);
  flex-wrap: wrap;
}

.cliente-bar label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--cinza-texto);
}

.cliente-bar input[type="text"] {
  font-size: 18px;
  padding: 8px 14px;
  border: 2px solid var(--cinza-borda);
  border-radius: 8px;
  font-family: inherit;
  min-width: 260px;
  font-weight: 500;
  color: var(--preto);
}

.cliente-bar input[type="text"]:focus {
  outline: none;
  border-color: var(--dourado);
}

.cliente-bar .data {
  font-size: 18px;
  color: var(--preto);
  font-weight: 500;
}

main {
  padding: 32px 40px;
}

section { margin-bottom: 36px; }

h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--bordeaux);
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--dourado);
  display: flex;
  align-items: center;
  gap: 12px;
}

h2 .numero {
  background: var(--dourado);
  color: var(--branco);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
}

/* SLIDERS */
.sliders {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

.slider-box {
  background: var(--cinza-claro);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--cinza-borda);
}

.slider-box label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--bordeaux);
  margin-bottom: 8px;
}

.slider-box .valor-atual {
  font-size: 28px;
  font-weight: 700;
  color: var(--preto);
  margin-bottom: 12px;
}

.slider-box input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: var(--cinza-borda);
  border-radius: 4px;
  outline: none;
}

.slider-box input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: var(--bordeaux);
  border: 3px solid var(--dourado);
  border-radius: 50%;
  cursor: pointer;
}

.slider-box input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: var(--bordeaux);
  border: 3px solid var(--dourado);
  border-radius: 50%;
  cursor: pointer;
  border-width: 3px;
}

.slider-box input[type="number"] {
  width: 100%;
  font-size: 18px;
  padding: 8px 12px;
  border: 2px solid var(--cinza-borda);
  border-radius: 8px;
  font-family: inherit;
  margin-top: 8px;
}

.slider-box input[type="number"]:focus {
  outline: none;
  border-color: var(--dourado);
}

.slider-box .escala {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--cinza-texto);
  margin-top: 6px;
}

/* COMPONENTES (checkboxes) */
.componentes, .bonus {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid var(--cinza-borda);
  border-radius: 10px;
  background: var(--branco);
  transition: all 0.15s ease;
  cursor: pointer;
}

.item:hover {
  border-color: var(--dourado);
  background: var(--cinza-claro);
}

.item.ativo {
  border-color: var(--bordeaux);
  background: linear-gradient(90deg, rgba(110, 20, 35, 0.04) 0%, rgba(214, 166, 72, 0.04) 100%);
}

.item label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 18px;
  cursor: pointer;
  flex: 1;
}

.item input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--bordeaux);
  cursor: pointer;
}

.item .nome-componente { font-weight: 500; }

.item .desc {
  display: block;
  font-size: 14px;
  color: var(--cinza-texto);
  margin-top: 2px;
}

.item .valor {
  font-size: 18px;
  font-weight: 700;
  color: var(--bordeaux);
  white-space: nowrap;
}

.item.bonus-item .valor {
  color: var(--dourado);
}

.item.bonus-item .badge {
  display: inline-block;
  background: var(--dourado);
  color: var(--preto);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* SUPORTE PÓS */
.suporte-box {
  background: var(--cinza-claro);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--cinza-borda);
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.suporte-box label.toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}

.suporte-box input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--bordeaux);
}

.suporte-box .meses-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cinza-texto);
  font-size: 16px;
}

.suporte-box input[type="number"] {
  width: 80px;
  font-size: 18px;
  padding: 8px 12px;
  border: 2px solid var(--cinza-borda);
  border-radius: 8px;
  font-family: inherit;
  text-align: center;
}

/* RESULTADO */
.resultado {
  background: linear-gradient(135deg, var(--preto) 0%, #2A2A2A 100%);
  color: var(--branco);
  padding: 32px 40px;
  border-radius: 16px;
  margin-top: 32px;
}

.linha-empilhado {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.linha-empilhado .label { font-size: 18px; opacity: 0.85; }

.linha-empilhado .valor-empilhado {
  font-size: 32px;
  font-weight: 700;
  color: var(--dourado-claro);
  text-decoration: line-through;
  text-decoration-color: rgba(214, 166, 72, 0.5);
  text-decoration-thickness: 2px;
}

.linha-final {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 16px;
  padding-top: 16px;
}

.linha-final .label {
  font-size: 22px;
  font-weight: 600;
  color: var(--branco);
}

.linha-final .valor-final {
  font-size: 48px;
  font-weight: 700;
  color: var(--dourado);
  letter-spacing: -1px;
}

.economia {
  text-align: right;
  margin-top: 8px;
  font-size: 16px;
  color: var(--dourado-claro);
  font-weight: 500;
}

/* PARCELAMENTO */
.parcelamento {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}

.parcela-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(214, 166, 72, 0.3);
  padding: 16px;
  border-radius: 10px;
  text-align: center;
}

.parcela-card .titulo {
  font-size: 14px;
  color: var(--dourado-claro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.parcela-card .valor-parcela {
  font-size: 24px;
  font-weight: 700;
  color: var(--branco);
}

.parcela-card .descricao {
  font-size: 13px;
  opacity: 0.7;
  margin-top: 4px;
}

/* AÇÕES */
.acoes {
  display: flex;
  gap: 14px;
  padding: 24px 40px 40px;
  flex-wrap: wrap;
}

button {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: 10px;
  border: 2px solid var(--bordeaux);
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

button.primary {
  background: var(--bordeaux);
  color: var(--branco);
}

button.primary:hover {
  background: var(--bordeaux-dark);
  transform: translateY(-1px);
}

button.secondary {
  background: var(--branco);
  color: var(--bordeaux);
}

button.secondary:hover {
  background: var(--cinza-claro);
  border-color: var(--dourado);
}

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--verde);
  color: var(--branco);
  padding: 14px 20px;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(42, 127, 62, 0.4);
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 1000;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

footer {
  text-align: center;
  padding: 16px;
  font-size: 14px;
  color: var(--cinza-texto);
}

/* RESPONSIVO */
@media (max-width: 768px) {
  body { padding: 12px 8px; font-size: 16px; }
  header, main, .acoes, .cliente-bar { padding-left: 20px; padding-right: 20px; }
  header h1 { font-size: 24px; }
  .sliders, .parcelamento { grid-template-columns: 1fr; }
  .linha-final .valor-final { font-size: 36px; }
  .resultado { padding: 24px 20px; }
}

/* IMPRESSÃO */
@media print {
  body { background: white; padding: 0; }
  .container { box-shadow: none; }
  .sliders, .acoes, button { display: none !important; }
  .item { break-inside: avoid; }
  header { background: var(--bordeaux) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .resultado { background: var(--preto) !important; color: var(--branco) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
</style>
</head>
<body>

<div class="container">

<header>
  <h1 id="titulo-mentorada">Orçamento Personalizado — {{NOME_MENTORADA}}</h1>
  <div class="subtitulo" id="subtitulo-nicho">{{NICHO}} · Solução sob medida</div>
</header>

<div class="cliente-bar">
  <label>
    Cliente:
    <input type="text" id="cliente" placeholder="Nome do cliente / empresa">
  </label>
  <label>
    Data:
    <span class="data" id="data-hoje"></span>
  </label>
</div>

<main>

  <section>
    <h2><span class="numero">1</span> Ajustes do projeto</h2>
    <div class="sliders">
      <div class="slider-box">
        <label for="complexidade">Complexidade</label>
        <div class="valor-atual" id="complexidade-label">Média</div>
        <input type="range" id="complexidade" min="1" max="5" value="3" step="1">
        <div class="escala">
          <span>1 Simples</span>
          <span>3 Média</span>
          <span>5 Alta</span>
        </div>
      </div>

      <div class="slider-box">
        <label for="prazo">Prazo (semanas)</label>
        <div class="valor-atual"><span id="prazo-label">8</span> semanas</div>
        <input type="range" id="prazo" min="2" max="24" value="8" step="1">
        <div class="escala">
          <span>2</span>
          <span>12</span>
          <span>24</span>
        </div>
      </div>

      <div class="slider-box">
        <label for="entregas">Telas / módulos / entregas</label>
        <div class="valor-atual"><span id="entregas-label">4</span> entregas</div>
        <input type="range" id="entregas" min="1" max="20" value="4" step="1">
        <div class="escala">
          <span>1</span>
          <span>10</span>
          <span>20</span>
        </div>
      </div>
    </div>
  </section>

  <section>
    <h2><span class="numero">2</span> Componentes da solução</h2>
    <div class="componentes" id="lista-componentes">
      <!-- Cada item: data-valor = valor base em R$ que pode ser modificado pela mentorada -->
      <div class="item ativo" data-valor="8000">
        <label>
          <input type="checkbox" checked>
          <span>
            <span class="nome-componente">Componente 1 — Núcleo da solução</span>
            <span class="desc">Entrega principal, peça central que resolve a dor maior</span>
          </span>
        </label>
        <span class="valor">R$ 8.000</span>
      </div>

      <div class="item ativo" data-valor="6000">
        <label>
          <input type="checkbox" checked>
          <span>
            <span class="nome-componente">Componente 2 — Integração</span>
            <span class="desc">Conecta a solução ao stack atual do cliente</span>
          </span>
        </label>
        <span class="valor">R$ 6.000</span>
      </div>

      <div class="item ativo" data-valor="5000">
        <label>
          <input type="checkbox" checked>
          <span>
            <span class="nome-componente">Componente 3 — Painel / Dashboard</span>
            <span class="desc">Visibilidade dos números pro time decidir por dado</span>
          </span>
        </label>
        <span class="valor">R$ 5.000</span>
      </div>

      <div class="item ativo" data-valor="4000">
        <label>
          <input type="checkbox" checked>
          <span>
            <span class="nome-componente">Componente 4 — Treinamento do time</span>
            <span class="desc">Operação autônoma sem depender de mim</span>
          </span>
        </label>
        <span class="valor">R$ 4.000</span>
      </div>

      <div class="item" data-valor="3000">
        <label>
          <input type="checkbox">
          <span>
            <span class="nome-componente">Componente 5 — Migração de dados</span>
            <span class="desc">Importação completa do legado, validado item a item</span>
          </span>
        </label>
        <span class="valor">R$ 3.000</span>
      </div>

      <div class="item" data-valor="2500">
        <label>
          <input type="checkbox">
          <span>
            <span class="nome-componente">Componente 6 — Documentação técnica</span>
            <span class="desc">Manual operacional + diagramas + runbook</span>
          </span>
        </label>
        <span class="valor">R$ 2.500</span>
      </div>
    </div>
  </section>

  <section>
    <h2><span class="numero">3</span> Bônus do stack de valor</h2>
    <div class="bonus" id="lista-bonus">
      <div class="item bonus-item ativo" data-valor="3000">
        <label>
          <input type="checkbox" checked>
          <span>
            <span class="nome-componente">Bônus 1 — Sessão estratégica de kick-off <span class="badge">Bônus</span></span>
            <span class="desc">2h de alinhamento pra calibrar entrega às metas reais</span>
          </span>
        </label>
        <span class="valor">R$ 3.000</span>
      </div>

      <div class="item bonus-item ativo" data-valor="2000">
        <label>
          <input type="checkbox" checked>
          <span>
            <span class="nome-componente">Bônus 2 — Vídeos de treinamento sob medida <span class="badge">Bônus</span></span>
            <span class="desc">Materiais reaproveitáveis pra time atual e futuro</span>
          </span>
        </label>
        <span class="valor">R$ 2.000</span>
      </div>

      <div class="item bonus-item" data-valor="1500">
        <label>
          <input type="checkbox">
          <span>
            <span class="nome-componente">Bônus 3 — Auditoria pós-90 dias <span class="badge">Bônus</span></span>
            <span class="desc">Revisão de uso + ajustes finos depois da curva de adoção</span>
          </span>
        </label>
        <span class="valor">R$ 1.500</span>
      </div>
    </div>
  </section>

  <section>
    <h2><span class="numero">4</span> Suporte pós-entrega</h2>
    <div class="suporte-box">
      <label class="toggle">
        <input type="checkbox" id="suporte-toggle" checked>
        Incluir suporte continuado
      </label>
      <div class="meses-wrap">
        Duração:
        <input type="number" id="suporte-meses" min="1" max="24" value="3">
        meses
      </div>
      <div class="meses-wrap">
        R$ <input type="number" id="suporte-valor-mes" min="0" step="100" value="1500"> / mês
      </div>
    </div>
  </section>

  <section class="resultado">
    <div class="linha-empilhado">
      <span class="label">Valor de ancoragem (mercado, peça por peça)</span>
      <span class="valor-empilhado" id="valor-ancoragem">R$ 0</span>
    </div>

    <div class="linha-empilhado">
      <span class="label">Stack empilhado neste projeto</span>
      <span class="valor-empilhado" style="text-decoration:none; color:var(--branco); opacity:0.85" id="valor-empilhado">R$ 0</span>
    </div>

    <div class="linha-final">
      <span class="label">Investimento final do projeto</span>
      <span class="valor-final" id="valor-final">R$ 0</span>
    </div>

    <div class="economia" id="economia">Você economiza R$ 0 (0%)</div>

    <div class="parcelamento">
      <div class="parcela-card">
        <div class="titulo">À vista no PIX</div>
        <div class="valor-parcela" id="parcela-pix">R$ 0</div>
        <div class="descricao">10% de desconto</div>
      </div>
      <div class="parcela-card">
        <div class="titulo">3x sem juros</div>
        <div class="valor-parcela" id="parcela-3x">R$ 0</div>
        <div class="descricao">no cartão ou boleto</div>
      </div>
      <div class="parcela-card">
        <div class="titulo">6x sem juros</div>
        <div class="valor-parcela" id="parcela-6x">R$ 0</div>
        <div class="descricao">no cartão</div>
      </div>
    </div>
  </section>

</main>

<div class="acoes">
  <button class="primary" onclick="window.print()">Salvar como PDF</button>
  <button class="secondary" onclick="copiarResumo()">Copiar resumo</button>
  <button class="secondary" onclick="zerar()">Resetar campos</button>
</div>

<footer>
  Calculadora Imperatriz High-Ticket · Travessia Imperatriz Tata Goncalves
</footer>

</div>

<div class="toast" id="toast">Resumo copiado pro clipboard</div>

<script>
// ═══════════════════════════════════════════════════════════════════════
// CONFIG — ajustável pela mentorada via comentário no topo do arquivo
// ═══════════════════════════════════════════════════════════════════════
window.CONFIG = {
  ancoragemMultiplier: 3.0,   // valor empilhado x ancoragem (3x a 4x)
  descontoPix: 0.10,          // 10% de desconto à vista
  parcelas: [3, 6, 12]        // parcelamentos exibidos
};

// ═══════════════════════════════════════════════════════════════════════
// DATA DE HOJE
// ═══════════════════════════════════════════════════════════════════════
const hoje = new Date();
document.getElementById('data-hoje').textContent =
  hoje.toLocaleDateString('pt-BR', { day: '2-digit', month: 'long', year: 'numeric' });

// ═══════════════════════════════════════════════════════════════════════
// FORMATAÇÃO DE MOEDA
// ═══════════════════════════════════════════════════════════════════════
function brl(valor) {
  return 'R$ ' + Math.round(valor).toLocaleString('pt-BR');
}

// ═══════════════════════════════════════════════════════════════════════
// LABEL DE COMPLEXIDADE
// ═══════════════════════════════════════════════════════════════════════
const labelsComplexidade = {
  1: 'Simples',
  2: 'Baixa',
  3: 'Média',
  4: 'Alta',
  5: 'Crítica'
};

// ═══════════════════════════════════════════════════════════════════════
// MULTIPLICADORES DERIVADOS
// ═══════════════════════════════════════════════════════════════════════
function multiplicadorComplexidade(nivel) {
  // 1 = 0.75x | 3 = 1.0x | 5 = 1.40x
  return 0.75 + (nivel - 1) * 0.1625;
}

function multiplicadorEntregas(qtd) {
  // 4 entregas = 1.0x ; cada entrega acima/abaixo soma 0.05x
  return 1 + (qtd - 4) * 0.05;
}

function multiplicadorPrazo(semanas) {
  // prazo curto encarece (urgência), prazo longo dilui
  // 8 semanas = 1.0x ; 2 semanas = 1.30x ; 24 semanas = 0.85x
  if (semanas <= 8) return 1 + (8 - semanas) * 0.04;
  return 1 - (semanas - 8) * 0.01;
}

// ═══════════════════════════════════════════════════════════════════════
// CÁLCULO PRINCIPAL
// ═══════════════════════════════════════════════════════════════════════
function recalcular() {
  const complexidade = parseInt(document.getElementById('complexidade').value);
  const prazo = parseInt(document.getElementById('prazo').value);
  const entregas = parseInt(document.getElementById('entregas').value);

  document.getElementById('complexidade-label').textContent = labelsComplexidade[complexidade];
  document.getElementById('prazo-label').textContent = prazo;
  document.getElementById('entregas-label').textContent = entregas;

  const multC = multiplicadorComplexidade(complexidade);
  const multE = multiplicadorEntregas(entregas);
  const multP = multiplicadorPrazo(prazo);
  const multiplicadorTotal = multC * multE * multP;

  // soma componentes marcados
  let stackEmpilhado = 0;
  document.querySelectorAll('#lista-componentes .item').forEach(item => {
    const check = item.querySelector('input[type="checkbox"]');
    const valorBase = parseInt(item.dataset.valor);
    const valorAjustado = valorBase * multiplicadorTotal;
    item.querySelector('.valor').textContent = brl(valorAjustado);
    item.classList.toggle('ativo', check.checked);
    if (check.checked) stackEmpilhado += valorAjustado;
  });

  // soma bônus
  let bonusTotal = 0;
  document.querySelectorAll('#lista-bonus .item').forEach(item => {
    const check = item.querySelector('input[type="checkbox"]');
    const valorBase = parseInt(item.dataset.valor);
    item.querySelector('.valor').textContent = brl(valorBase);
    item.classList.toggle('ativo', check.checked);
    if (check.checked) bonusTotal += valorBase;
  });

  // suporte pós-entrega
  const suporteAtivo = document.getElementById('suporte-toggle').checked;
  const suporteMeses = parseInt(document.getElementById('suporte-meses').value) || 0;
  const suporteValorMes = parseInt(document.getElementById('suporte-valor-mes').value) || 0;
  const suporteTotal = suporteAtivo ? suporteMeses * suporteValorMes : 0;

  const empilhadoTotal = stackEmpilhado + bonusTotal + suporteTotal;
  const ancoragem = empilhadoTotal * window.CONFIG.ancoragemMultiplier;
  const valorFinal = empilhadoTotal;
  const economia = ancoragem - valorFinal;
  const economiaPct = ancoragem > 0 ? Math.round((economia / ancoragem) * 100) : 0;

  document.getElementById('valor-ancoragem').textContent = brl(ancoragem);
  document.getElementById('valor-empilhado').textContent = brl(empilhadoTotal);
  document.getElementById('valor-final').textContent = brl(valorFinal);
  document.getElementById('economia').textContent =
    'Você economiza ' + brl(economia) + ' (' + economiaPct + '%)';

  // parcelamentos
  document.getElementById('parcela-pix').textContent =
    brl(valorFinal * (1 - window.CONFIG.descontoPix));
  document.getElementById('parcela-3x').textContent =
    '3x de ' + brl(valorFinal / 3);
  document.getElementById('parcela-6x').textContent =
    '6x de ' + brl(valorFinal / 6);

  // guarda estado pra função copiarResumo
  window._estadoAtual = {
    cliente: document.getElementById('cliente').value || '[cliente]',
    complexidade: labelsComplexidade[complexidade],
    prazo, entregas,
    componentes: [],
    bonus: [],
    suporte: suporteAtivo ? `${suporteMeses} meses x ${brl(suporteValorMes)}` : null,
    ancoragem, empilhadoTotal, valorFinal, economia, economiaPct
  };

  document.querySelectorAll('#lista-componentes .item.ativo').forEach(item => {
    window._estadoAtual.componentes.push({
      nome: item.querySelector('.nome-componente').textContent.split(' — ')[1] ||
            item.querySelector('.nome-componente').textContent,
      valor: parseInt(item.dataset.valor) * multiplicadorTotal
    });
  });

  document.querySelectorAll('#lista-bonus .item.ativo').forEach(item => {
    window._estadoAtual.bonus.push({
      nome: item.querySelector('.nome-componente').firstChild.textContent.trim(),
      valor: parseInt(item.dataset.valor)
    });
  });
}

// ═══════════════════════════════════════════════════════════════════════
// COPIAR RESUMO (pra colar em proposta / WhatsApp)
// ═══════════════════════════════════════════════════════════════════════
function copiarResumo() {
  const e = window._estadoAtual;
  if (!e) { recalcular(); return copiarResumo(); }

  let txt = '═══ ORÇAMENTO ═══\n';
  txt += 'Cliente: ' + e.cliente + '\n';
  txt += 'Data: ' + hoje.toLocaleDateString('pt-BR') + '\n\n';
  txt += 'Complexidade: ' + e.complexidade + '\n';
  txt += 'Prazo: ' + e.prazo + ' semanas\n';
  txt += 'Entregas: ' + e.entregas + '\n\n';
  txt += 'COMPONENTES:\n';
  e.componentes.forEach(c => { txt += '  • ' + c.nome + ' — ' + brl(c.valor) + '\n'; });
  if (e.bonus.length) {
    txt += '\nBÔNUS:\n';
    e.bonus.forEach(b => { txt += '  • ' + b.nome + ' — ' + brl(b.valor) + '\n'; });
  }
  if (e.suporte) txt += '\nSuporte: ' + e.suporte + '\n';
  txt += '\n─── VALORES ───\n';
  txt += 'Ancoragem (mercado): ' + brl(e.ancoragem) + '\n';
  txt += 'Investimento final:  ' + brl(e.valorFinal) + '\n';
  txt += 'Economia: ' + brl(e.economia) + ' (' + e.economiaPct + '%)\n\n';
  txt += '─── PAGAMENTO ───\n';
  txt += 'À vista PIX (10% off): ' + brl(e.valorFinal * 0.9) + '\n';
  txt += '3x sem juros: ' + brl(e.valorFinal / 3) + '\n';
  txt += '6x sem juros: ' + brl(e.valorFinal / 6) + '\n';

  navigator.clipboard.writeText(txt).then(() => {
    const toast = document.getElementById('toast');
    toast.classList.add('show');
    setTimeout(() => toast.classList.remove('show'), 2200);
  }).catch(err => {
    // fallback se clipboard API indisponível
    const ta = document.createElement('textarea');
    ta.value = txt;
    document.body.appendChild(ta);
    ta.select();
    try { document.execCommand('copy'); } catch (e) {}
    document.body.removeChild(ta);
    const toast = document.getElementById('toast');
    toast.classList.add('show');
    setTimeout(() => toast.classList.remove('show'), 2200);
  });
}

// ═══════════════════════════════════════════════════════════════════════
// RESETAR CAMPOS
// ═══════════════════════════════════════════════════════════════════════
function zerar() {
  document.getElementById('cliente').value = '';
  document.getElementById('complexidade').value = 3;
  document.getElementById('prazo').value = 8;
  document.getElementById('entregas').value = 4;
  document.getElementById('suporte-toggle').checked = true;
  document.getElementById('suporte-meses').value = 3;
  document.getElementById('suporte-valor-mes').value = 1500;
  document.querySelectorAll('#lista-componentes .item').forEach((item, i) => {
    item.querySelector('input[type="checkbox"]').checked = i < 4;
  });
  document.querySelectorAll('#lista-bonus .item').forEach((item, i) => {
    item.querySelector('input[type="checkbox"]').checked = i < 2;
  });
  recalcular();
}

// ═══════════════════════════════════════════════════════════════════════
// LISTENERS — TUDO EM TEMPO REAL
// ═══════════════════════════════════════════════════════════════════════
document.querySelectorAll('input[type="range"], input[type="checkbox"], input[type="number"]')
  .forEach(el => el.addEventListener('input', recalcular));

document.getElementById('cliente').addEventListener('input', () => {
  if (window._estadoAtual) window._estadoAtual.cliente =
    document.getElementById('cliente').value || '[cliente]';
});

// click no item inteiro toggla o checkbox
document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', (e) => {
    if (e.target.tagName === 'INPUT') return;
    const check = item.querySelector('input[type="checkbox"]');
    check.checked = !check.checked;
    recalcular();
  });
});

// primeira renderização
recalcular();
</script>

</body>
</html>
