/* Regras — long-scroll page · Grupo Mirandas */

function RuleSection({ ix, eyebrow, title, lede, children, id }){
  return (
    <section className="rule-section" id={id}>
      <div className="rule-eb"><span className="num">CAP / {ix}</span><span className="bar"></span><span>{eyebrow}</span></div>
      <h3>{title}</h3>
      {lede && <p className="rule-lede">{lede}</p>}
      {children}
    </section>
  );
}

function KpisRule(){
  return (
    <div>
      <div className="r-kpis">
        <div className="r-kpi">
          <span className="corner tl"></span><span className="corner br"></span>
          <span className="ix">K · 01</span>
          <span className="role">Closers · Comercial</span>
          <span className="num">15<span className="u">%</span></span>
          <div>
            <div className="lab">Close Rate</div>
            <div className="blurb">Conversão de oportunidades qualificadas em contrato fechado. Cada ponto percentual vale dezenas de milhões.</div>
          </div>
        </div>
        <div className="r-kpi">
          <span className="corner tl"></span><span className="corner br"></span>
          <span className="ix">K · 02</span>
          <span className="role">Growth · Marketing</span>
          <span className="num">1.700</span>
          <div>
            <div className="lab">Leads qualificados / mês</div>
            <div className="blurb">Volume sustentado de oportunidades reais — entregues, não prometidos. O combustível do funil inteiro.</div>
          </div>
        </div>
        <div className="r-kpi">
          <span className="corner tl"></span><span className="corner br"></span>
          <span className="ix">K · 03</span>
          <span className="role">CS · Customer Success</span>
          <span className="num">9,8<span className="u">%</span></span>
          <div>
            <div className="lab">Inadimplência (teto)</div>
            <div className="blurb">A diferença entre vender e receber. Margem mora aqui — onde o líquido nasce ou morre.</div>
          </div>
        </div>
      </div>
      <div className="equation">
        <span className="seq">SUM · 2027</span>
        <span className="eq">
          <b>15%</b><span className="op">×</span><b>1.700</b><span className="op">×</span><b>(1 − 9,8%)</b><span className="op">·</span><span>12 meses</span>
        </span>
        <span className="total">= R$ 400.000.000</span>
      </div>
    </div>
  );
}

function PathsRule(){
  return (
    <div className="paths">
      <div className="path solo">
        <span className="tag">Caminho A · Individual</span>
        <div className="badge">01</div>
        <h4>Bate sua meta.<br/><span className="turq">Embarca sozinho.</span></h4>
        <div className="desc">Você atinge 1.000 pontos no ano. Não importa o que o time entregou, não importa o cenário macro. Sua suíte está garantida.</div>
        <div className="formula">
          <div><span className="k">Critério</span> &nbsp; <span className="v">≥ 1.000 pts individuais</span></div>
          <div><span className="k">Cabine</span> &nbsp;&nbsp; <span className="v">Suíte garantida</span></div>
          <div><span className="k">Dependência</span> &nbsp; <span className="v">Nenhuma</span></div>
        </div>
      </div>
      <div className="path-divider">
        <div className="line"></div>
        <div className="or">OU</div>
        <div className="line"></div>
      </div>
      <div className="path">
        <span className="tag">Caminho B · Coletivo</span>
        <div className="badge">02</div>
        <h4>Time bate <span className="turq">R$400M</span>.<br/>Todo mundo embarca.</h4>
        <div className="desc">Se a empresa fechar o ano em meta coletiva e você tiver entregue o mínimo, está dentro — cabine conforme pontuação.</div>
        <div className="formula">
          <div><span className="k">Critério A</span> &nbsp; <span className="v">Receita ≥ R$400M</span></div>
          <div><span className="k">Critério B</span> &nbsp; <span className="v">Você ≥ 200 pts</span></div>
          <div><span className="k">Cabine</span> &nbsp;&nbsp;&nbsp; <span className="v">Conforme pontuação</span></div>
        </div>
      </div>
    </div>
  );
}

function CabinesRule(){
  const rows = [
    { cls:'suite', tier:'Convés 04 · Topo', name:'Suíte', range:'1.000+ pts', fill:100, ix:'SUITE / 01', icon:(
      <svg viewBox="0 0 40 40" fill="none">
        <path d="M8 28 L8 22 L14 17 L20 22 L26 17 L32 22 L32 28 Z" stroke="currentColor" strokeWidth="1.5"/>
        <circle cx="14" cy="14" r="1.2" fill="currentColor" stroke="none"/>
        <circle cx="20" cy="18" r="1.2" fill="currentColor" stroke="none"/>
        <circle cx="26" cy="14" r="1.2" fill="currentColor" stroke="none"/>
        <path d="M6 30 L34 30" stroke="currentColor" strokeWidth="1.5"/>
      </svg>
    )},
    { cls:'premium', tier:'Convés 03', name:'Premium', range:'700 — 999 pts', fill:75, ix:'PREM / 02', icon:(
      <svg viewBox="0 0 40 40" fill="none">
        <path d="M20 8 L23 17 L32 17 L25 23 L28 32 L20 26 L12 32 L15 23 L8 17 L17 17 Z" stroke="currentColor" strokeWidth="1.4"/>
      </svg>
    )},
    { cls:'vista', tier:'Convés 02', name:'Vista Mar', range:'400 — 699 pts', fill:50, ix:'VIST / 03', icon:(
      <svg viewBox="0 0 40 40" fill="none">
        <path d="M6 16 Q12 12, 18 16 T30 16 T34 16" stroke="currentColor" strokeWidth="1.4"/>
        <path d="M6 22 Q12 18, 18 22 T30 22 T34 22" stroke="currentColor" strokeWidth="1.4"/>
        <path d="M6 28 Q12 24, 18 28 T30 28 T34 28" stroke="currentColor" strokeWidth="1.4"/>
      </svg>
    )},
    { cls:'interna', tier:'Convés 01', name:'Interna', range:'200 — 399 pts', fill:25, ix:'INTR / 04', icon:(
      <svg viewBox="0 0 40 40" fill="none">
        <path d="M20 6 L20 22" stroke="currentColor" strokeWidth="1.4"/>
        <circle cx="20" cy="24" r="6" stroke="currentColor" strokeWidth="1.4"/>
        <path d="M14 24 L26 24" stroke="currentColor" strokeWidth="1.4"/>
        <path d="M16 9 Q20 13 24 9" stroke="currentColor" strokeWidth="1.4"/>
      </svg>
    )},
  ];
  return (
    <div className="cabin-rows">
      {rows.map(r => (
        <div key={r.cls} className={`cabin ${r.cls}`}>
          <div className="glyph">{r.icon}</div>
          <div className="name-row">
            <span className="tier">{r.tier}</span>
            <span className="name">{r.name}</span>
          </div>
          <span className="range">{r.range}</span>
          <div className="bar"><div className="fill" style={{ width: r.fill + '%' }}></div></div>
          <span className="index">{r.ix}</span>
        </div>
      ))}
    </div>
  );
}

function ScoringClosers(){
  return (
    <div className="scoring-layout">
      <div className="scoring">
        <div className="row head"><span>#</span><span>Critério</span><span>Métrica</span><span>Pontos</span></div>
        <div className="row"><span className="ix">01</span><span className="cond">R$ 1M líquido vendido<small>Acumulável · cada milhão entregue conta</small></span><span className="threshold">por R$1M</span><span className="pts">+10</span></div>
        <div className="row"><span className="ix">02</span><span className="cond">Mês acima da meta<small>Mês com fechamento ≥ R$6M líquido</small></span><span className="threshold">≥ R$6M / mês</span><span className="pts">+50</span></div>
        <div className="row super"><span className="ix">03</span><span className="cond">Mês acima da supermeta<small>Mês com fechamento ≥ R$12M — duplica a meta</small></span><span className="threshold">≥ R$12M / mês</span><span className="pts">+100</span></div>
        <div className="row"><span className="ix">04</span><span className="cond">Close Rate alvo<small>Conversão mensal entre 12% e 15%</small></span><span className="threshold">12% — 15%</span><span className="pts">+50</span></div>
        <div className="row super"><span className="ix">05</span><span className="cond">Close Rate elite<small>Conversão mensal acima de 15%</small></span><span className="threshold">&gt; 15%</span><span className="pts">+100</span></div>
        <div className="row"><span className="ix">06</span><span className="cond">Close Rate base<small>Conversão mensal entre 8% e 12% — pontua, mas abaixo da meta</small></span><span className="threshold">8% — 12%</span><span className="pts">+20</span></div>
        <div className="row zona"><span className="ix">07</span><span className="cond">Zona Morta · CR<small>Close rate abaixo de 5% — não pontua CR</small></span><span className="threshold">&lt; 5%</span><span className="pts">0 PTS</span></div>
        <div className="row zona"><span className="ix">08</span><span className="cond">Zona Morta · Volume<small>Mês abaixo de R$2M — não pontua nada, fica fora</small></span><span className="threshold">&lt; R$2M / mês</span><span className="pts">0 PTS</span></div>
      </div>
      <div className="role-card-side">
        <div className="label">Time</div>
        <div className="name">Closers</div>
        <div className="count">CLR · 06 colaboradores</div>
        <div className="meta">
          <div className="line"><span className="k">Teto mensal</span><span className="v">+250 pts</span></div>
          <div className="line"><span className="k">Teto anual</span><span className="v">2.000 pts</span></div>
          <div className="line"><span className="k">Mínimo coletivo</span><span className="v">≥ 200 pts</span></div>
          <div className="line"><span className="k">Para Suíte</span><span className="v">1.000 pts</span></div>
        </div>
        <div className="note">Valor <b>LÍQUIDO</b> = vendido − inadimplência da sua carteira. CS não pontua sozinho aqui: você herda o que perdeu.</div>
      </div>
    </div>
  );
}

function ScoringGrowth(){
  return (
    <div className="scoring-layout">
      <div className="scoring">
        <div className="row head"><span>#</span><span>Critério</span><span>Métrica</span><span>Pontos</span></div>
        <div className="row zona"><span className="ix">01</span><span className="cond">Zona Morta<small>Volume insuficiente para sustentar funil — não pontua</small></span><span className="threshold">&lt; 700 leads</span><span className="pts">0 PTS</span></div>
        <div className="row"><span className="ix">02</span><span className="cond">Volume na meta<small>Entrega entre 1.500 e 1.699 leads qualificados</small></span><span className="threshold">1.500 — 1.699</span><span className="pts">+75</span></div>
        <div className="row super"><span className="ix">03</span><span className="cond">Volume supermeta<small>1.700 leads ou mais — combustível para o close rate elite</small></span><span className="threshold">≥ 1.700</span><span className="pts">+150</span></div>
        <div className="row"><span className="ix">04</span><span className="cond">Operação CD31<small>Vendas oriundas da estrutura CD31 — ≥ 15 / mês</small></span><span className="threshold">≥ 15 vendas</span><span className="pts">+30</span></div>
      </div>
      <div className="role-card-side">
        <div className="label">Time</div>
        <div className="name">Growth</div>
        <div className="count">GRW · 04 colaboradores</div>
        <div className="meta">
          <div className="line"><span className="k">Teto mensal</span><span className="v">+180 pts</span></div>
          <div className="line"><span className="k">Teto anual</span><span className="v">1.800 pts</span></div>
          <div className="line"><span className="k">Mínimo coletivo</span><span className="v">≥ 200 pts</span></div>
          <div className="line"><span className="k">Para Suíte</span><span className="v">1.000 pts</span></div>
        </div>
        <div className="note">Lead sem qualificação não conta. Volume <b>entregue</b>, não prometido. CD31 é bônus de canal — não substitui base.</div>
      </div>
    </div>
  );
}

function ScoringCS(){
  return (
    <div className="scoring-layout">
      <div className="scoring">
        <div className="row head"><span>#</span><span>Critério</span><span>Métrica</span><span>Pontos</span></div>
        <div className="row"><span className="ix">01</span><span className="cond">Inadimplência na meta<small>Teto operacional — o líquido continua de pé</small></span><span className="threshold">≤ 9,8%</span><span className="pts">+75</span></div>
        <div className="row super"><span className="ix">02</span><span className="cond">Inadimplência supermeta<small>Cobrança elite — recupera margem para a empresa inteira</small></span><span className="threshold">≤ 5,0%</span><span className="pts">+150</span></div>
        <div className="row"><span className="ix">03</span><span className="cond">Conformidade 100%<small>Todos os processos críticos executados no mês — sem atraso</small></span><span className="threshold">100%</span><span className="pts">+50</span></div>
        <div className="row zona"><span className="ix">04</span><span className="cond">Zona Morta<small>Inadimplência fora de controle — não pontua, contamina o time</small></span><span className="threshold">&gt; 15%</span><span className="pts">0 PTS</span></div>
      </div>
      <div className="role-card-side">
        <div className="label">Time</div>
        <div className="name">CS</div>
        <div className="count">CST · 03 colaboradores</div>
        <div className="meta">
          <div className="line"><span className="k">Teto mensal</span><span className="v">+200 pts</span></div>
          <div className="line"><span className="k">Teto anual</span><span className="v">1.900 pts</span></div>
          <div className="line"><span className="k">Mínimo coletivo</span><span className="v">≥ 200 pts</span></div>
          <div className="line"><span className="k">Para Suíte</span><span className="v">1.000 pts</span></div>
        </div>
        <div className="note">Inadimplência alta <b>tira pontos do Closer</b>. Cada R$ não recebido vira líquido perdido na carteira de quem vendeu.</div>
      </div>
    </div>
  );
}

function DepsRule(){
  return (
    <div className="deps-wrap">
      <div className="deps-diagram">
        <svg viewBox="0 0 560 560">
          <circle cx="280" cy="280" r="260" className="node-ring"/>
          <circle cx="280" cy="280" r="180" className="node-ring" strokeDasharray="2 6"/>
          <text x="280" y="270" className="center-label">R$ 400M</text>
          <text x="280" y="290" className="center-sub">Receita 2027</text>
          <line x1="240" y1="298" x2="320" y2="298" stroke="rgba(201,169,97,.4)" strokeWidth="1"/>
          <text x="280" y="318" className="center-sub">Eixo do programa</text>
          <path d="M 280 60 Q 480 100 500 280" className="arrow-line"/>
          <path d="M 500 280 Q 480 460 280 500" className="arrow-line"/>
          <path d="M 280 500 Q 80 460 60 280" className="arrow-line"/>
          <path d="M 60 280 Q 80 100 280 60" className="arrow-line"/>
          <path d="M 280 60 Q 280 280 280 500" className="arrow-line" strokeDasharray="2 5"/>
          <path d="M 60 280 Q 280 280 500 280" className="arrow-line" strokeDasharray="2 5"/>
          <polygon points="495,280 502,272 502,288" className="arrow-head"/>
          <polygon points="280,495 272,502 288,502" className="arrow-head"/>
          <polygon points="65,280 58,272 58,288" className="arrow-head"/>
          <polygon points="280,65 272,58 288,58" className="arrow-head"/>
          <g>
            <circle cx="280" cy="60" r="46" className="node-bg"/>
            <text x="280" y="58" className="node-label">Closers</text>
            <text x="280" y="76" className="node-sub">06 · Vendas</text>
          </g>
          <g>
            <circle cx="500" cy="280" r="46" className="node-bg"/>
            <text x="500" y="278" className="node-label">CS</text>
            <text x="500" y="296" className="node-sub">03 · Cobrança</text>
          </g>
          <g>
            <circle cx="280" cy="500" r="46" className="node-bg"/>
            <text x="280" y="498" className="node-label">COO</text>
            <text x="280" y="516" className="node-sub">01 · Margem</text>
          </g>
          <g>
            <circle cx="60" cy="280" r="46" className="node-bg"/>
            <text x="60" y="278" className="node-label">Growth</text>
            <text x="60" y="296" className="node-sub">04 · Funil</text>
          </g>
        </svg>
      </div>
      <div className="deps-list">
        <div className="item"><span className="from">Closer →</span><span className="body"><b>precisa do CS.</b><small>Inadimplência mata o líquido — vende e não recebe é zerar pontos.</small></span></div>
        <div className="item"><span className="from">CS →</span><span className="body"><b>precisa do Closer.</b><small>Cliente mal vendido vira churn — e churn vira inadimplência no mês seguinte.</small></span></div>
        <div className="item"><span className="from">Growth →</span><span className="body"><b>precisa do Closer.</b><small>Lead sem conversão é planilha bonita e caixa vazio.</small></span></div>
        <div className="item"><span className="from">COO →</span><span className="body"><b>precisa de todos.</b><small>Margem = receita − custo. Não tem margem? Não tem cruzeiro.</small></span></div>
      </div>
    </div>
  );
}

function AIRule(){
  return (
    <div className="ai-grid">
      <div className="ai-left">
        <div className="ai-stat-row">
          <div className="ai-stat">
            <div className="k">Teto mensal</div>
            <div className="v">30<span style={{ fontSize:24, color:'var(--gold-bright)' }}>pts</span></div>
            <div className="unit">por colaborador</div>
          </div>
          <div className="ai-stat">
            <div className="k">Growth (limitado)</div>
            <div className="v">5<span style={{ fontSize:24, color:'var(--gold-bright)' }}>pts</span></div>
            <div className="unit">por mês · teto especial</div>
          </div>
          <div className="ai-stat">
            <div className="k">8 meses · acumulado</div>
            <div className="v">240<span style={{ fontSize:24 }}>pts</span></div>
            <div className="unit">extras no ano</div>
          </div>
        </div>
        <div className="ai-explainer">
          <h4>Como pontua</h4>
          <p>Implementação documentada de IA no fluxo: automação de qualificação, scoring de leads, redação de propostas, análise de carteira, dashboards. Vale o uso real — não o anúncio.</p>
          <p>Validação mensal pelo COO. Sem entrega prática, sem pontuação. Sem desculpa.</p>
        </div>
      </div>
      <div className="ai-example">
        <div className="hd">Exemplo · um colaborador</div>
        <div className="step">
          <span className="pts">680 pts</span>
          <span className="res res-before">Vista Mar</span>
        </div>
        <div className="arrow">+ 8 meses × 30 pts &nbsp;·&nbsp; bônus IA</div>
        <div className="step">
          <span className="pts">920 pts</span>
          <span className="res res-after">Premium</span>
        </div>
        <div style={{ marginTop:24, color:'var(--paper-mute)', letterSpacing:'.2em', fontSize:11, fontFamily:'"JetBrains Mono",monospace' }}>
          A DIFERENÇA ENTRE DORMIR NO PORÃO E DORMIR NA VISTA.
        </div>
      </div>
    </div>
  );
}

function MCRule(){
  const rows = [
    { cls:'red',    ix:'CEN · 01', scn:'CR 8% · 1.700 leads',  sub:'Operação default — sem foco em conversão',         fill:53,  res:'R$ 267M', prob:'0,0% prob.' },
    { cls:'orange', ix:'CEN · 02', scn:'CR 12% · 1.700 leads', sub:'Close rate dentro da banda inferior',              fill:65,  res:'R$ 329M', prob:'0,4% prob.' },
    { cls:'gold',   ix:'CEN · 03', scn:'CR 15% · 1.700 leads', sub:'Meta — o cenário central deste programa',          fill:82,  res:'R$ 412M', prob:'64,0% prob.' },
    { cls:'green',  ix:'CEN · 04', scn:'CR 15% · 2.200 leads', sub:'Supermeta — Growth elevando o volume',             fill:100, res:'R$ 507M', prob:'99,7% prob.' },
  ];
  return (
    <div className="mc-list">
      {rows.map((r, i) => (
        <div key={i} className={`mc-row ${r.cls}`}>
          <span className="ix">{r.ix}</span>
          <span className="scn">{r.scn}<small>{r.sub}</small></span>
          <div className="bar"><div className="fill" style={{ width: r.fill + '%' }}></div></div>
          <span className="res">{r.res}</span>
          <span className="prob">{r.prob}</span>
        </div>
      ))}
    </div>
  );
}

function Regras(){
  return (
    <div className="page fade-in" style={{ paddingTop: 64 }}>
      <div className="page-eyebrow"><span className="bar"></span>Regras · Cruzeiro dos Campeões</div>
      <h1 className="page-h">As regras do <span className="turq">embarque</span>.</h1>
      <p className="page-sub">
        Como você pontua, como cada cabine é decidida, onde ficam as zonas mortas, e o que diz a simulação. Sem ambiguidade — você pode imprimir e levar pra mesa.
      </p>

      <div className="regras" style={{ marginTop:64 }}>
        <RuleSection ix="01" id="r-kpis" eyebrow="A equação" title={<>Os 3 KPIs que <span className="turq">fazem R$400M</span>.</>} lede="Três alavancas. Cada uma vive numa cadeira. Se uma quebra, o número inteiro desaba. Esse é o mapa.">
          <KpisRule />
        </RuleSection>

        <RuleSection ix="02" id="r-caminhos" eyebrow="Dois caminhos" title={<>Dois caminhos para <span className="turq">embarcar</span>.</>} lede="Você não depende de ninguém — e o time também não depende só de você. Existem duas portas. Você escolhe qual abrir.">
          <PathsRule />
        </RuleSection>

        <RuleSection ix="03" id="r-cabines" eyebrow="Convés & Cabines" title={<>Quanto você fez, <span className="turq">onde você dorme</span>.</>} lede="Quatro convés. Sua pontuação no ano define a cabine — sem exceção, sem negociação, sem promessa.">
          <CabinesRule />
        </RuleSection>

        <RuleSection ix="04" id="r-closers" eyebrow="Pontuação · Comercial" title={<>Closers — <span className="turq">quem fecha, embarca</span>.</>}>
          <ScoringClosers />
        </RuleSection>

        <RuleSection ix="05" id="r-growth" eyebrow="Pontuação · Growth" title={<>Growth — <span className="turq">quem alimenta, embarca</span>.</>}>
          <ScoringGrowth />
        </RuleSection>

        <RuleSection ix="06" id="r-cs" eyebrow="Pontuação · CS" title={<>CS — <span className="turq">quem segura, embarca</span>.</>}>
          <ScoringCS />
        </RuleSection>

        <RuleSection ix="07" id="r-deps" eyebrow="Interdependência" title={<>Ninguém <span className="turq">vai sozinho</span>.</>} lede="Cada cadeira precisa das outras três para fazer sentido. O cruzeiro é coletivo — ou ele simplesmente não acontece.">
          <DepsRule />
        </RuleSection>

        <RuleSection ix="08" id="r-ia" eyebrow="Bônus · Inteligência Artificial" title={<>A IA decide <span className="turq">sua cabine</span> no fim.</>} lede="Aplicação real de IA na operação rende pontos extras todo mês. Em oito meses, é a diferença entre uma cabine e outra.">
          <AIRule />
        </RuleSection>

        <RuleSection ix="09" id="r-mc" eyebrow="Simulação · Monte Carlo" title={<>A diferença é <span className="turq">uma variável</span>.</>} lede="10.000 cenários simulados. Probabilidade de bater R$400M em função do close rate e volume de leads. Não é fé — é matemática.">
          <MCRule />
        </RuleSection>
      </div>
    </div>
  );
}

window.Regras = Regras;