// ── PROPOSTAS PARA O BRASIL ──────────────────────────────────────────────────
const PROPOSALS_BRASIL = [
  {
    number: '01',
    icon: '⚔️',
    title: 'Guerra contra o Crime Organizado',
    desc: 'O Brasil já está em guerra. PCC e Comando Vermelho exercem domínio territorial, possuem exércitos e implementam suas próprias leis. O Estado precisa reconhecer esse conflito e agir com força total, não com pedidos de paz.',
    tag: 'Segurança',
    detail: {
      intro: 'A Missão reconhece que já existe uma guerra em curso no Brasil. PCC e Comando Vermelho declararam intenção de exercer domínio territorial, já possuem exércitos atuando, impõem suas próprias leis e constroem culturas próprias. O Estado brasileiro finge que o problema não existe ou trata facções como pequenas gangues em conflito. Não será com pedidos de paz que essa guerra terminará.',
      eixos: [
        { title: 'Reconhecimento do conflito', text: 'Tratar a atuação faccional como o que ela é: disputa armada pela soberania de partes do território. Sem esse diagnóstico, toda política pública desmorona.' },
        { title: 'Retomada territorial', text: 'Operações coordenadas entre União, estados e forças federais para retomar áreas hoje sob controle faccional, com permanência do Estado depois da operação, não apenas incursões pontuais.' },
        { title: 'Federalização de áreas críticas', text: 'Regiões tomadas por facções saem da esfera estadual/municipal e passam a permitir intervenção direta da União, com recursos e forças federais.' },
      ],
      relacionados: ['Desfavelização', 'Direito Penal do Inimigo', 'Rio de Janeiro — retomada territorial', 'Moradores de Rua — tolerância zero ao tráfico'],
    },
  },
  {
    number: '02',
    icon: '🔒',
    title: 'Direito Penal do Inimigo',
    desc: 'Faccionados do CV e PCC exercem poder político sobre territórios e ameaçam a soberania do Estado. Devem ser tratados com urgência máxima: quebra de sigilos, prisão e depoimentos sem a burocracia do processo criminal comum.',
    tag: 'Justiça',
    detail: {
      intro: 'Faccionados do Comando Vermelho e do Primeiro Comando da Capital não são bandidos comuns. Exercem poder político sobre territórios dominados, ameaçando não apenas a população local, mas a própria soberania do Estado brasileiro. Por isso não devem ter o mesmo rito de um processo criminal comum, com ampla defesa prolongada, múltiplas instâncias recursais e trânsito em julgado distante.',
      eixos: [
        { title: 'Rito acelerado', text: 'Quebra de sigilos, prisão e colheita de depoimentos com urgência máxima, reduzindo a janela que hoje permite à facção reorganizar-se.' },
        { title: 'Categoria jurídica distinta', text: 'Membros de facção armada que disputam o monopólio da força com o Estado devem ser enquadrados como inimigos do Estado, não como criminosos ordinários.' },
        { title: 'Uso pleno da inteligência', text: 'Compartilhamento entre polícias, Forças Armadas, Receita e órgãos de inteligência para atacar a espinha dorsal financeira e logística das facções.' },
      ],
      relacionados: ['Guerra contra o Crime Organizado', 'Segurança Pública', 'STF — revisão do papel da corte'],
    },
  },
  {
    number: '03',
    icon: '🏗️',
    title: 'Desfavelização',
    desc: 'Favelas viraram QGs de facções que sequestram trabalhadores. O Brasil precisa de um plano gigantesco de habitação, reurbanização, educação e emprego, tratando com seriedade a cadeia de reprodução de desvantagem social.',
    tag: 'Habitação',
    detail: {
      intro: 'Favelas não são apenas lugares com condições sub-humanas de vida: se tornaram QGs de facções que sequestram os trabalhadores que ali vivem. A cultura de falta de perspectiva, a ausência de figura paterna e a reprodução da desvantagem alimentam a formação de novos soldados para o crime organizado. A meta da Missão é acabar com as favelas em 10 anos.',
      eixos: [
        { title: 'Meta de 10 anos', text: 'Combinar retomada territorial com forças de segurança e reurbanização com programa habitacional em larga escala, com cronograma de fases e cidades-piloto.' },
        { title: 'Arquitetura com dignidade', text: 'Programas habitacionais com arquitetura interessante, não apenas caixas de concreto padronizadas. A qualidade do espaço construído importa para dignidade e valor futuro do imóvel.' },
        { title: 'Títulos de propriedade', text: 'Entregar escrituras aos moradores. Imóvel titulado vira garantia, pode ser vendido e herdado formalmente, deixando de ser capital morto. Bancarização e crédito decorrem dessa formalização.' },
        { title: 'Zonas econômicas especiais', text: 'Criar ZEEs nas regiões humildes para que o trabalho vá até onde a pessoa mora, reduzindo deslocamentos e gerando renda local.' },
      ],
      relacionados: ['Habitação', 'Rio de Janeiro — 6 medidas com Coronel Busnello', 'Moradores de Rua — catalogação de imóveis', 'Curitiba — retomada de centro degradado'],
    },
  },
  {
    number: '04',
    icon: '🌾',
    title: 'Interiorizar as Atividades Produtivas',
    desc: 'Regiões pobres são paraíso de políticos corruptos que compram votos com miséria. Levar atividades produtivas para os interiores, especialmente do Nordeste, gera classe média e quebra décadas de escravidão política.',
    tag: 'Desenvolvimento',
    detail: {
      intro: 'As regiões mais pobres do Brasil são o paraíso de políticos corruptos, que aproveitam a pobreza para comprar votos, desviar recursos e se perpetuarem no poder. Interiorizar atividades produtivas, com foco no Nordeste, é gerar classe média e quebrar o ciclo que sustenta há décadas a liderança dessas pessoas sobre uma verdadeira escravidão moderna.',
      eixos: [
        { title: 'MATOPIBA e agronegócio', text: 'Apoio à expansão da fronteira agrícola no eixo Maranhão–Tocantins–Piauí–Bahia como vetor de industrialização indireta e formação de classe média no interior.' },
        { title: 'Industrialização descentralizada', text: 'Polos industriais e logísticos no interior, como a refinaria de Balsas, para evitar que todo valor agregado continue migrando para capitais e Centro-Sul.' },
        { title: 'Iniciativa privada no lugar do modelo estatal', text: 'Rejeita o modelo bolsonarista de estatal no Nordeste. Aposta em ambiente regulatório competitivo, concessões e atração de capital privado.' },
      ],
      relacionados: ['Propostas para o Nordeste', 'Desigualdade Regional', 'Poços — Bolsonaro vs Renan Santos', 'Economia'],
    },
  },
  {
    number: '05',
    icon: '📊',
    title: 'Responsabilidade Gerencial',
    desc: 'Políticos que não entregam melhorias em educação, saneamento, saúde e segurança devem perder seus direitos políticos. Fundo partidário deve ser destinado apenas a partidos cujos gestores apresentam resultados reais.',
    tag: 'Política',
    detail: {
      intro: 'O Brasil precisa mudar o sistema de incentivos que elege seus políticos. A regra atual premia quem domina a máquina e a retórica, não quem entrega. A Missão propõe amarrar direitos políticos e acesso a fundos públicos à entrega objetiva de resultados em indicadores que afetam a vida das pessoas.',
      eixos: [
        { title: 'Perda de direitos políticos por falha gerencial', text: 'Gestores que não entregam melhorias claras em educação, saneamento, saúde e segurança perdem direitos políticos. O mandato é contrato, não prêmio.' },
        { title: 'Fundos públicos condicionados', text: 'Fundo partidário e fundo eleitoral destinados apenas a partidos cujos gestores apresentam melhorias concretas nos índices. Dinheiro público não financia partidos que governam para si mesmos.' },
        { title: 'Contraste com o status quo', text: 'Contraste direto com presidentes de partidos como Valdemar Costa Neto, que convertem legendas em máquinas pessoais sem qualquer compromisso com entrega.' },
      ],
      relacionados: ['Presidente de Partido — Compare você mesmo', 'Rio de Janeiro — prefeitos e vereadores que falham perdem direitos políticos'],
    },
  },
  {
    number: '06',
    icon: '🗺️',
    title: 'Fusão de Municípios',
    desc: 'Municípios que dependem de verbas federais para pagar suas próprias contas devem se fundir com municípios próximos. Cidades do Centro-Sul pagam impostos demais para manter prefeituras deficitárias no Centro-Norte.',
    tag: 'Administração',
    detail: {
      intro: 'Municípios que dependem de verbas federais ou estaduais para pagar suas próprias contas devem deixar de existir e fundir-se com municípios próximos. Hoje, cidades do Centro-Sul pagam mais impostos do que deveriam para manter cidades deficitárias do Centro-Norte e Nordeste vivendo de repasses e, na prática, pagando salários de políticos locais. Nada de bom pode vir dessa lógica.',
      eixos: [
        { title: 'Critério objetivo de viabilidade', text: 'Município incapaz de custear suas próprias despesas correntes com receita própria perde autonomia e é fundido ao vizinho mais próximo viável.' },
        { title: 'Redução do clientelismo local', text: 'Muitos micro-municípios existem apenas para sustentar estruturas políticas familiares. A fusão desmonta esse circuito de dependência.' },
        { title: 'Fim do subsídio cruzado permanente', text: 'Rompe a lógica de Centro-Sul financiando perpetuamente máquinas municipais do Centro-Norte sem contrapartida de desenvolvimento real.' },
      ],
      relacionados: ['Desigualdade Regional', 'Responsabilidade Gerencial'],
    },
  },
  {
    number: '07',
    icon: '💼',
    title: 'Mutirão Anti Bolsa-Família',
    desc: 'Municípios com mais de 30% da população no Bolsa-Família devem promover mutirões de emprego. Pessoas em idade economicamente ativa que se recusarem a trabalhar perderão o benefício em três meses.',
    tag: 'Emprego',
    detail: {
      intro: 'Municípios com mais de 30% da população recebendo Bolsa-Família devem promover mutirões de emprego. Pessoas em idade economicamente ativa que se recusarem a trabalhar perderão o direito ao benefício em três meses. A proposta parte do diagnóstico de que o programa, hoje, em vez de ponte para a autonomia, virou âncora eleitoral.',
      eixos: [
        { title: 'Gatilho nos 30%', text: 'O percentual de dependência marca a transição de rede de proteção para economia subsidiada. Acima disso, mutirão obrigatório de emprego no município.' },
        { title: 'Condicionalidade em 3 meses', text: 'Recusa ao trabalho ofertado por quem está em idade economicamente ativa encerra o benefício em três meses. Proteção segue para quem não pode trabalhar.' },
        { title: 'Frentes de trabalho locais', text: 'Integra com propostas para moradores de rua e com interiorização produtiva: o trabalho disponível deve ser real, não maquiagem estatística.' },
      ],
      relacionados: ['Moradores de Rua — frentes de trabalho', 'Propostas para o Nordeste — agro reduzindo dependência do Bolsa Família', 'Economia'],
    },
  },
];

const PropostasSection = () => {
  const [active, setActive] = React.useState(null);
  const isDetail = active !== null;
  const current = isDetail ? PROPOSALS_BRASIL[active] : null;

  const close = () => setActive(null);

  return (
    <section id="propostas-brasil" style={{ padding: '120px 48px', background: '#060606', position: 'relative', overflow: 'hidden' }}>
      {/* Background accent */}
      <div aria-hidden="true" style={{
        position: 'absolute', top: -120, right: -120, width: 500, height: 500,
        borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,209,0,0.05) 0%, transparent 70%)',
        pointerEvents: 'none',
      }} />

      {/* Header */}
      <div className="section-header reveal" style={{ maxWidth: 1280, margin: '0 auto 48px', textAlign: 'left' }}>
        {isDetail ? (
          <button
            onClick={close}
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              background: 'transparent', border: '1px solid rgba(255,255,255,0.12)',
              borderRadius: 999, padding: '10px 18px', cursor: 'pointer',
              fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700,
              fontSize: '0.8rem', letterSpacing: '0.15em', textTransform: 'uppercase',
              color: 'rgba(255,255,255,0.75)', marginBottom: 24,
              transition: 'all .2s ease',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'rgba(255,209,0,0.5)'; e.currentTarget.style.color = '#FFD100'; }}
            onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.12)'; e.currentTarget.style.color = 'rgba(255,255,255,0.75)'; }}
          >
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M10 3L5 8l5 5" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            Voltar para todas
          </button>
        ) : (
          <span className="section-label">Programa de governo</span>
        )}
        <h2 className="section-title">
          PROPOSTAS PARA<br />O <span className="yellow">BRASIL</span>
        </h2>
        <div className="divider-yellow" />
        <p style={{ fontSize: '1rem', color: 'rgba(255,255,255,0.5)', maxWidth: 560, lineHeight: 1.7, marginTop: 8 }}>
          {isDetail
            ? `Proposta ${current.number} de 07 · ${current.tag}.`
            : '7 propostas concretas para transformar o Brasil: segurança, desenvolvimento, responsabilidade e liberdade.'}
        </p>
      </div>

      {/* GRID VIEW */}
      {!isDetail && (
        <div className="propostas-grid-anim" style={{
          maxWidth: 1280, margin: '0 auto',
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 24,
        }}>
          {PROPOSALS_BRASIL.map((p, i) => {
            const isLast = i === 6;
            return (
              <article
                key={i}
                onClick={() => setActive(i)}
                className="proposta-card"
                style={{
                  gridColumn: isLast ? '2 / 3' : undefined,
                  background: '#141414',
                  border: '1px solid rgba(255,255,255,0.06)',
                  borderRadius: 16,
                  padding: '36px 32px',
                  cursor: 'pointer',
                  transition: 'all .25s cubic-bezier(.16,1,.3,1)',
                  position: 'relative',
                  overflow: 'hidden',
                }}
              >
                <div aria-hidden="true" style={{
                  position: 'absolute', top: -10, right: 20,
                  fontFamily: "'Barlow Condensed', sans-serif",
                  fontWeight: 900, fontSize: '7rem', lineHeight: 1,
                  color: 'rgba(255,255,255,0.03)',
                  userSelect: 'none', transition: 'color .25s',
                }}>
                  {p.number}
                </div>

                <div style={{
                  width: 52, height: 52, borderRadius: 12, marginBottom: 24,
                  background: 'rgba(255,255,255,0.05)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: '1.5rem', transition: 'background .25s',
                }}>
                  {p.icon}
                </div>

                <div style={{
                  display: 'inline-flex', marginBottom: 12,
                  fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700,
                  fontSize: '0.7rem', letterSpacing: '0.15em', textTransform: 'uppercase',
                  color: 'rgba(255,255,255,0.3)',
                  transition: 'color .25s',
                }}>
                  {p.tag}
                </div>

                <h3 style={{
                  fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 800,
                  fontSize: '1.25rem', textTransform: 'uppercase', letterSpacing: '0.02em',
                  color: '#fff', marginBottom: 12, lineHeight: 1.2,
                }}>
                  {p.title}
                </h3>

                <p style={{
                  fontSize: '0.875rem', color: 'rgba(255,255,255,0.5)',
                  lineHeight: 1.7,
                  maxHeight: 72,
                  overflow: 'hidden',
                }}>
                  {p.desc}
                </p>

                <div style={{
                  marginTop: 20, display: 'flex', alignItems: 'center', gap: 6,
                  fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700,
                  fontSize: '0.75rem', letterSpacing: '0.12em', textTransform: 'uppercase',
                  color: 'rgba(255,255,255,0.5)',
                  transition: 'color .25s',
                }}>
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                    <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                  Saiba mais
                </div>
              </article>
            );
          })}
        </div>
      )}

      {/* DETAIL VIEW */}
      {isDetail && (
        <article className="proposta-detail" style={{
          maxWidth: 960, margin: '0 auto',
          background: 'linear-gradient(180deg, rgba(255,209,0,0.04) 0%, #141414 40%)',
          border: '1px solid rgba(255,209,0,0.25)',
          borderRadius: 20,
          padding: '56px 56px 64px',
          position: 'relative',
          overflow: 'hidden',
        }}>
          <div aria-hidden="true" style={{
            position: 'absolute', top: -40, right: 32,
            fontFamily: "'Barlow Condensed', sans-serif",
            fontWeight: 900, fontSize: '14rem', lineHeight: 1,
            color: 'rgba(255,209,0,0.06)',
            userSelect: 'none',
          }}>
            {current.number}
          </div>

          <div style={{
            width: 64, height: 64, borderRadius: 14, marginBottom: 28,
            background: 'rgba(255,209,0,0.15)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: '1.8rem',
          }}>
            {current.icon}
          </div>

          <div style={{
            display: 'inline-flex', marginBottom: 14,
            fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700,
            fontSize: '0.75rem', letterSpacing: '0.18em', textTransform: 'uppercase',
            color: '#FFD100',
          }}>
            Proposta {current.number} · {current.tag}
          </div>

          <h3 style={{
            fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 900,
            fontSize: 'clamp(2rem, 4vw, 2.75rem)', textTransform: 'uppercase',
            letterSpacing: '0.01em', color: '#fff', marginBottom: 28, lineHeight: 1.05,
            maxWidth: 760,
          }}>
            {current.title}
          </h3>

          <p style={{
            fontSize: '1.05rem', color: 'rgba(255,255,255,0.78)',
            lineHeight: 1.75, marginBottom: 48, maxWidth: 780,
          }}>
            {current.detail.intro}
          </p>

          <div style={{
            fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700,
            fontSize: '0.8rem', letterSpacing: '0.18em', textTransform: 'uppercase',
            color: 'rgba(255,255,255,0.45)', marginBottom: 20,
          }}>
            Eixos
          </div>

          <div style={{ display: 'grid', gap: 20, marginBottom: 48 }}>
            {current.detail.eixos.map((e, idx) => (
              <div key={idx} style={{
                display: 'grid', gridTemplateColumns: '44px 1fr', gap: 20,
                padding: '22px 24px',
                background: 'rgba(255,255,255,0.03)',
                border: '1px solid rgba(255,255,255,0.06)',
                borderRadius: 12,
              }}>
                <div style={{
                  fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 900,
                  fontSize: '1.5rem', color: '#FFD100', lineHeight: 1,
                }}>
                  {String(idx + 1).padStart(2, '0')}
                </div>
                <div>
                  <h4 style={{
                    fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 800,
                    fontSize: '1.1rem', textTransform: 'uppercase', letterSpacing: '0.03em',
                    color: '#fff', marginBottom: 6,
                  }}>
                    {e.title}
                  </h4>
                  <p style={{
                    fontSize: '0.95rem', color: 'rgba(255,255,255,0.65)',
                    lineHeight: 1.7,
                  }}>
                    {e.text}
                  </p>
                </div>
              </div>
            ))}
          </div>

          <button
            onClick={close}
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              background: 'transparent', border: '1px solid rgba(255,209,0,0.4)',
              borderRadius: 999, padding: '12px 22px', cursor: 'pointer',
              fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 800,
              fontSize: '0.85rem', letterSpacing: '0.15em', textTransform: 'uppercase',
              color: '#FFD100',
              transition: 'all .2s ease',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(255,209,0,0.08)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
          >
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M10 3L5 8l5 5" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            Voltar para todas as propostas
          </button>
        </article>
      )}

      {/* CTA link */}
      {!isDetail && (
        <div className="reveal" style={{ maxWidth: 1280, margin: '56px auto 0', textAlign: 'center' }}>
          <a href="#propostas" className="btn-outline" style={{ display: 'inline-flex' }}>
            Ver propostas por região →
          </a>
        </div>
      )}
    </section>
  );
};

Object.assign(window, { PropostasSection });
