// ═══════════════════════════════════════════════════════════════════
// Screen: "Por que o programa existe?"
// Página institucional pra qualquer visualizador entender o programa.
// Texto da Maria (briefing 2026-06-25) — não reescrever sem alinhar.
// 2026-06-26: a jornada destaca a(s) etapa(s) do vendedor logado em
// verde escuro. Vendedor sem área cadastrada (Diretoria, times) vê
// a jornada neutra. Mapa de áreas vem de window.AREAS_POR_ID_VENDEDOR
// (definido em screen-extrato.jsx).
// ═══════════════════════════════════════════════════════════════════

function PorqueProgramaScreen({ vendedor } = {}) {
  const { isMobile } = useMobile();

  // Etapas da jornada — labels exatos do briefing. Cada etapa pode mapear
  // pra uma chave de ÁREA; se a área do vendedor casar, a etapa fica
  // destacada em verde escuro com badge "Você".
  const JORNADA = [
    { titulo: 'Cliente demonstra interesse',                                     area: null },
    { titulo: 'Prospecção identifica a oportunidade',                            area: 'PROSPECCAO' },
    { titulo: 'Qualificação entende a necessidade',                              area: 'QUALIFICACAO' },
    { titulo: 'Fechamento constrói e negocia a proposta',                        area: 'FECHAMENTO',
      paralela: 'Especialistas técnicos e do negócio fortalecem a solução' },
    { titulo: 'Editais são alavancas estratégicas',                              area: 'EDITAIS' },
    { titulo: 'Projeto aprovado',                                                area: null },
    { titulo: 'Pós-venda fideliza o cliente e gera nova oportunidade comercial', area: 'FIDELIZACAO' },
  ];

  // Resolve quais áreas o vendedor logado tem. Diretoria, times e ids não
  // mapeados ficam com Set vazio → nenhum destaque.
  const minhasAreas = new Set(
    (vendedor && window.AREAS_POR_ID_VENDEDOR && window.AREAS_POR_ID_VENDEDOR[vendedor.id]) || []
  );
  const temDestaque = minhasAreas.size > 0;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
      {/* Hero */}
      <div style={{
        background: 'linear-gradient(135deg, #00382E 0%, #005E4D 60%, #00967B 100%)',
        borderRadius: 18, padding: isMobile ? '28px 22px' : '40px 44px',
        color: '#fff', position: 'relative', overflow: 'hidden',
        boxShadow: '0 24px 56px -28px rgba(0,80,66,.6)',
      }}>
        <div style={{ position: 'absolute', top: -90, right: -70, width: 300, height: 300, borderRadius: '50%', background: 'radial-gradient(circle, rgba(94,233,196,.28), transparent 70%)', pointerEvents: 'none' }} />
        <div style={{ position: 'absolute', bottom: -140, left: -60, width: 280, height: 280, borderRadius: '50%', background: 'radial-gradient(circle, rgba(94,233,196,.13), transparent 70%)', pointerEvents: 'none' }} />
        <div style={{ position: 'relative' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontSize: 11, fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase', color: '#fff', marginBottom: 14 }}>
            <span style={{ color: 'var(--escalab-brand-accent)' }}>↳</span>
            <span style={{ width: 1, height: 10, background: 'rgba(255,255,255,.35)' }} />
            <span>Programa de comissionamento</span>
          </div>
          <h1 style={{ color: '#fff', fontSize: isMobile ? 28 : 40, margin: 0, letterSpacing: '-.025em', lineHeight: 1.1, fontWeight: 700 }}>
            Motivação do programa
          </h1>
        </div>
      </div>

      {/* Texto principal em 3 tópicos visuais — sem títulos inventados, sem
          numeração 01/02/03. O agrupamento segue a quebra natural do briefing:
          (1) por que dividir, (2) o que dividir resolve, (3) o resultado. */}
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 14 }}>
        {/* Tópico 1 — premissa + reconhecimento */}
        <div style={{
          background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 14,
          padding: isMobile ? '22px 22px' : '26px 24px',
          display: 'flex', flexDirection: 'column', gap: 12,
        }}>
          <p style={{ margin: 0, fontSize: isMobile ? 16 : 17, lineHeight: 1.4, color: 'var(--escalab-ink)', fontWeight: 600, letterSpacing: '-.008em' }}>
            Nenhum projeto do Escalab é construído por uma única pessoa.
          </p>
          <p style={{ margin: 0, fontSize: isMobile ? 13.5 : 14, lineHeight: 1.65, color: 'var(--escalab-slate)' }}>
            Uma venda normalmente depende de diferentes etapas, conhecimentos, competências e decisões. Por isso, nosso programa reconhece todos que contribuem para entregar uma solução melhor ao cliente.
          </p>
        </div>

        {/* Tópico 2 — o que dividir comissão resolve */}
        <div style={{
          background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 14,
          padding: isMobile ? '22px 22px' : '26px 24px',
          display: 'flex', flexDirection: 'column', gap: 12,
        }}>
          <p style={{ margin: 0, fontSize: isMobile ? 13.5 : 14, lineHeight: 1.65, color: 'var(--escalab-slate)' }}>
            Em algumas oportunidades, dividir a comissão significa aumentar a qualidade da proposta, reduzir o tempo de resposta e elevar as chances de aprovação.
          </p>
        </div>

        {/* Tópico 3 — objetivo + efeito de longo prazo */}
        <div style={{
          background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 14,
          padding: isMobile ? '22px 22px' : '26px 24px',
          display: 'flex', flexDirection: 'column', gap: 12,
        }}>
          <p style={{ margin: 0, fontSize: isMobile ? 13.5 : 14, lineHeight: 1.65, color: 'var(--escalab-slate)' }}>
            Nosso objetivo é incentivar a colaboração, porque temos certeza que resultados construídos em equipe geram mais valor para o cliente, para o Escalab e para todos os envolvidos.
          </p>
          <p style={{ margin: 0, fontSize: isMobile ? 13.5 : 14, lineHeight: 1.55, color: 'var(--escalab-brand-deep)', fontWeight: 500 }}>
            Mesmo que uma oportunidade seja compartilhada, propostas mais fortes tendem a gerar mais aprovações, mais projetos e mais oportunidades de comissão ao longo do tempo.
          </p>
        </div>
      </div>

      {/* Quadro: Como as equipes constroem uma venda */}
      <Card pad={0}>
        <div style={{ padding: isMobile ? '20px 22px' : '24px 28px', borderBottom: '1px solid var(--escalab-line)' }}>
          <h2 style={{ margin: 0, fontSize: isMobile ? 19 : 22, letterSpacing: '-.018em', color: 'var(--escalab-ink)' }}>
            Como as equipes constroem uma venda
          </h2>
          {temDestaque && vendedor && (
            <p style={{ margin: '6px 0 0', fontSize: 13, color: 'var(--escalab-slate)' }}>
              Sua etapa está destacada em verde escuro abaixo.
            </p>
          )}
        </div>

        <div style={{ padding: isMobile ? '20px 18px' : '28px 32px', display: 'flex', flexDirection: 'column', gap: 8 }}>
          {JORNADA.map((etapa, i) => {
            const isLast = i === JORNADA.length - 1;
            const isMinha = etapa.area && minhasAreas.has(etapa.area);
            return (
              <div key={i}>
                <div style={{
                  display: 'flex', flexDirection: isMobile ? 'column' : 'row',
                  gap: 10, alignItems: 'stretch',
                  position: 'relative',
                }}>
                  <div style={{
                    flex: etapa.paralela ? '1 1 60%' : '1 1 100%',
                    background: isMinha
                      ? 'linear-gradient(135deg, #00382E 0%, #00735F 100%)'
                      : 'var(--escalab-brand-tint)',
                    border: isMinha ? '1px solid var(--escalab-brand-deep)' : '1px solid var(--escalab-brand-soft)',
                    borderRadius: 10,
                    padding: isMinha ? '16px 18px' : '12px 16px',
                    display: 'flex', alignItems: 'center', gap: 12,
                    boxShadow: isMinha ? '0 10px 24px -14px rgba(0,40,33,.55)' : 'none',
                    position: 'relative',
                    transition: 'all .2s var(--ease-out)',
                  }}>
                    <div style={{
                      width: 28, height: 28, borderRadius: '50%',
                      background: isMinha ? 'var(--escalab-brand-accent)' : '#fff',
                      border: isMinha ? 'none' : '1px solid var(--escalab-brand-soft)',
                      color: isMinha ? '#003629' : 'var(--escalab-brand-deep)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                      fontSize: 13, fontWeight: 800, fontVariantNumeric: 'tabular-nums',
                    }}>{i + 1}</div>
                    <div style={{
                      flex: 1, minWidth: 0,
                      fontSize: isMobile ? 14 : (isMinha ? 16 : 15),
                      fontWeight: isMinha ? 700 : 500,
                      color: isMinha ? '#fff' : 'var(--escalab-ink)',
                      lineHeight: 1.3,
                      letterSpacing: isMinha ? '-.008em' : 0,
                    }}>
                      {etapa.titulo}
                    </div>
                    {isMinha && (
                      <span style={{
                        flexShrink: 0,
                        fontSize: 10, fontWeight: 800, letterSpacing: '.14em', textTransform: 'uppercase',
                        background: 'var(--escalab-brand-accent)', color: '#003629',
                        padding: '4px 10px', borderRadius: 999,
                        whiteSpace: 'nowrap',
                      }}>★ Você está aqui</span>
                    )}
                  </div>

                  {etapa.paralela && (
                    <div style={{
                      flex: '1 1 40%',
                      background: 'rgba(255,220,130,.16)',
                      border: '1px dashed rgba(212,170,60,.45)',
                      borderRadius: 10, padding: '12px 16px',
                      display: 'flex', alignItems: 'center', gap: 10,
                    }}>
                      <div style={{
                        width: 26, height: 26, borderRadius: '50%',
                        background: '#fff', border: '1px solid rgba(212,170,60,.45)',
                        color: '#7A5A00',
                        display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                        fontSize: 14, fontWeight: 800,
                      }}>+</div>
                      <div style={{ fontSize: isMobile ? 13 : 13.5, color: '#7A5A00', lineHeight: 1.3, fontWeight: 500 }}>
                        {etapa.paralela}
                      </div>
                    </div>
                  )}
                </div>

                {!isLast && (
                  <div style={{ display: 'flex', justifyContent: 'center', padding: '2px 0' }}>
                    <div aria-hidden="true" style={{
                      width: 2, height: 14,
                      background: 'var(--escalab-brand-soft)',
                    }} />
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </Card>

      {/* Frase de fechamento — direto do briefing, sem rótulo de "Em resumo" */}
      <div style={{
        background: 'var(--escalab-brand-tint)',
        border: '1px solid var(--escalab-brand-soft)',
        borderRadius: 14,
        padding: isMobile ? '20px 22px' : '24px 32px',
      }}>
        <p style={{ margin: 0, fontSize: isMobile ? 15 : 17, lineHeight: 1.55, color: 'var(--escalab-brand-deep)', fontWeight: 500, letterSpacing: '-.005em' }}>
          Quanto mais cedo as pessoas certas participam da jornada, maiores são as chances de entregar qualidade, fechar projetos e gerar novos resultados para todos.
        </p>
      </div>
    </div>
  );
}

Object.assign(window, { PorqueProgramaScreen });