// ── CASE STUDIES DATA ─────────────────────────────────────────────────────────
const CASE_STUDIES = [
  {
    id: 'partido',
    icon: '🏛️',
    title: 'Criação de Partido',
    mblSummary: 'Partido Missão registrado com 577.999 assinaturas válidas. TSE aprovou por unanimidade em nov/2025.',
    bolSummary: 'Aliança pelo Brasil chegou a só 12.000 assinaturas válidas (2,4% da meta). Bolsonaro acabou no PL.',
    mblFull: 'O Partido Missão cumpriu cada requisito legal. Em julho de 2025, apresentou 577.999 assinaturas válidas ao TSE — superando a meta de 547 mil (0,5% dos votos válidos para a Câmara em 2022). Em 04/11/2025 o plenário do TSE aprovou o registro por unanimidade, com relatoria do ministro André Mendonça. O Missão tornou-se o 30º partido do Brasil, herdando o número 14 do extinto PTB.',
    bolFull: 'Em novembro de 2019, Bolsonaro lançou com pompa a 1ª Convenção Nacional do Aliança pelo Brasil, prometendo "mobilizar milhões". Dois meses depois o TSE havia validado apenas 3.101 das assinaturas — taxa de aproveitamento inferior a 6%. Em maio de 2020, cinco meses após o lançamento, o total válido era de apenas 12.000, ou 2,4% da meta de 492 mil. O partido nunca foi registrado. Em novembro de 2021 Bolsonaro abandonou o projeto e se filiou ao PL de Valdemar Costa Neto.',
  },
  {
    id: 'corrupcao',
    icon: '⚖️',
    title: 'Corrupção',
    mblSummary: 'Denúncia contra Renan Santos foi rejeitada pela Justiça. Investigados não pertenciam ao MBL.',
    bolSummary: 'Rachadinha: 13 assessores, 483 depósitos, R$ 2 mi desviados. Flávio Bolsonaro denunciado formalmente.',
    mblFull: 'Em julho de 2020, a Operação Juno Moneta (MPSP) investigou pessoas ligadas ao MBL por suposta lavagem de dinheiro de R$ 400 milhões. Em 03/11/2020 o juiz Thiago Baldani Gomes de Filippo rejeitou a denúncia contra Renan Santos por tráfico de influência — faltou descrição da conduta típica, não havia vínculo comprovado entre contratação e doações, e parte das doações ocorreu após a assunção do cargo. O MBL sustentou que os investigados nunca foram membros do movimento.',
    bolFull: 'O caso Rachadinha envolveu Flávio Bolsonaro (senador, filho de Jair) e seu ex-assessor Fabrício Queiroz, lotado no gabinete há mais de 10 anos. A investigação comprovou: 483 depósitos em espécie de 13 assessores para Queiroz (R$ 2 mi); pagamentos das despesas pessoais da família Flávio por Queiroz — plano de saúde e mensalidades escolares (~R$ 260 mil em espécie); e uso de franquia Kopenhagen como lavagem (~R$ 1,6 mi). Em novembro de 2020, o MPRJ denunciou Flávio por peculato, lavagem de dinheiro, apropriação indébita e organização criminosa.',
  },
  {
    id: 'poco',
    icon: '💧',
    title: 'Água no Nordeste',
    mblSummary: 'Poço na Comunidade Angélica (RN) perfurado com doações privadas — 200 moradores atendidos, funcionando.',
    bolSummary: 'Força-Tarefa das Águas: R$ 1,2 bilhão público, poços lacrados, sem bomba ou com água salobra.',
    mblFull: 'Em 2025, o MBL perfurou um poço artesiano na Comunidade Angélica, Ipanguaçu (RN), atendendo mais de 200 moradores. Custeado 100% por doações privadas: R$ 162 mil no total — poço (R$ 62.500), painel solar (R$ 45.400), torre pré-moldada de 10 mil litros (R$ 25.700), casa de máquinas (R$ 8.500). O projeto incluiu ainda a terraplanagem do campo de futebol da comunidade. O poço está em pleno funcionamento, com prestação de contas direta aos doadores.',
    bolFull: 'A Força-Tarefa das Águas investiu R$ 1,2 bilhão em verba pública para perfurar poços no Nordeste — e grande parte das obras parou pela metade. Em Oieiras (PI), estado do ministro Ciro Nogueira, um poço de 212 metros foi escavado em 2020 e lacrado no mesmo ano sem uso. Em Mata Fria (PI), moradora relata ter água doce perto mas sem acesso. Os editais eram genéricos, sem informar sequer a localidade do poço. Uma empresa da Bahia venceu licitação de R$ 53 mi para obras em Alagoas em pregão de 10 minutos.',
  },
];

// ── COMPARISON DATA ───────────────────────────────────────────────────────────
// ── COMPARISON SECTION ────────────────────────────────────────────────────────
const ComparisonSection = () => {
  const [caseModal, setCaseModal] = React.useState(null);

  return (
    <section id="comparativo" className="comparison-section">
      <div className="section-header reveal" style={{textAlign:'left', maxWidth:1280, margin:'0 auto 48px'}}>
        <span className="section-label">Diferenciação política</span>
        <h2 className="section-title">POR QUE O MBL É<br /><span className="yellow">MELHOR QUE BOLSONARISMO?</span></h2>
        <div className="divider-yellow" />
      </div>

      {/* ── CASOS CONCRETOS ─────────────────────────────────────────────────── */}
      <div className="reveal" style={{maxWidth:1280, margin:'0 auto 0', padding:'0 24px'}}>
        <div>
          <span className="section-label" style={{display:'block', marginBottom:12}}>Fatos documentados</span>
          <h3 style={{fontFamily:'Barlow Condensed, sans-serif', fontWeight:900, fontSize:'clamp(1.6rem, 3vw, 2.2rem)', textTransform:'uppercase', letterSpacing:'0.04em', color:'var(--white)', margin:'0 0 40px'}}>
            TRÊS CASOS QUE <span className="yellow">FALAM POR SI</span>
          </h3>
          <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(280px, 1fr))', gap:24}}>
            {CASE_STUDIES.map(cs => (
              <div key={cs.id} style={{background:'rgba(255,255,255,0.03)', border:'1px solid rgba(255,255,255,0.08)', borderRadius:12, padding:28, display:'flex', flexDirection:'column', gap:20}}>
                <div style={{display:'flex', alignItems:'center', gap:12}}>
                  <span style={{fontSize:'1.8rem'}} aria-hidden="true">{cs.icon}</span>
                  <span style={{fontFamily:'Barlow Condensed, sans-serif', fontWeight:800, fontSize:'1.1rem', textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--white)'}}>{cs.title}</span>
                </div>

                <div style={{display:'flex', flexDirection:'column', gap:10}}>
                  <div style={{display:'flex', gap:10, alignItems:'flex-start'}}>
                    <span style={{flexShrink:0, width:20, height:20, borderRadius:4, background:'rgba(255,209,0,0.15)', color:'var(--yellow)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:'0.7rem', fontWeight:700, marginTop:2}}>✓</span>
                    <p style={{margin:0, fontSize:'0.88rem', color:'rgba(255,255,255,0.75)', lineHeight:1.55}}>{cs.mblSummary}</p>
                  </div>
                  <div style={{display:'flex', gap:10, alignItems:'flex-start'}}>
                    <span style={{flexShrink:0, width:20, height:20, borderRadius:4, background:'rgba(255,255,255,0.06)', color:'rgba(255,255,255,0.35)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:'0.7rem', fontWeight:700, marginTop:2}}>✕</span>
                    <p style={{margin:0, fontSize:'0.88rem', color:'rgba(255,255,255,0.45)', lineHeight:1.55}}>{cs.bolSummary}</p>
                  </div>
                </div>

                <button
                  className="btn-red-sm"
                  style={{marginTop:'auto', alignSelf:'flex-start', background:'transparent', border:'1px solid rgba(255,255,255,0.15)', color:'rgba(255,255,255,0.65)'}}
                  onClick={() => setCaseModal(cs)}
                  aria-label={`Ver análise completa: ${cs.title}`}
                >
                  Ver análise completa →
                </button>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* ── MODAL CASOS CONCRETOS ───────────────────────────────────────────── */}
      {caseModal && (
        <div className="modal-overlay" role="dialog" aria-modal="true" aria-label={caseModal.title} onClick={e => e.target === e.currentTarget && setCaseModal(null)}>
          <div className="modal-box" style={{maxWidth:680}}>
            <button className="modal-close" onClick={() => setCaseModal(null)} aria-label="Fechar">✕</button>
            <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:24}}>
              <span style={{fontSize:'1.8rem'}} aria-hidden="true">{caseModal.icon}</span>
              <h3 className="modal-title" style={{margin:0}}>{caseModal.title}</h3>
            </div>

            <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(220px, 1fr))', gap:20}}>
              <div style={{background:'rgba(255,209,0,0.06)', border:'1px solid rgba(255,209,0,0.2)', borderRadius:8, padding:16}}>
                <div style={{fontFamily:'Barlow Condensed, sans-serif', fontWeight:800, fontSize:'0.8rem', textTransform:'uppercase', letterSpacing:'0.1em', color:'var(--yellow)', marginBottom:10}}>✓ MBL / Missão</div>
                <p style={{margin:0, fontSize:'0.875rem', color:'rgba(255,255,255,0.75)', lineHeight:1.7}}>{caseModal.mblFull}</p>
              </div>
              <div style={{background:'rgba(255,255,255,0.02)', border:'1px solid rgba(255,255,255,0.06)', borderRadius:8, padding:16}}>
                <div style={{fontFamily:'Barlow Condensed, sans-serif', fontWeight:800, fontSize:'0.8rem', textTransform:'uppercase', letterSpacing:'0.1em', color:'rgba(255,255,255,0.35)', marginBottom:10}}>✕ Bolsonarismo / PL</div>
                <p style={{margin:0, fontSize:'0.875rem', color:'rgba(255,255,255,0.45)', lineHeight:1.7}}>{caseModal.bolFull}</p>
              </div>
            </div>
          </div>
        </div>
      )}
    </section>
  );
};

// ── LULA ERRORS DATA ──────────────────────────────────────────────────────────
const ERRORS = [
  { icon: '🦟', title: 'Recorde histórico de mortes por dengue', desc: '6.022 mortes e 6,6 milhões de casos em 2024 — mais que o total dos 8 anos anteriores somados.', date: '2024', category: 'Saúde', detail: 'Em 2024, o Brasil registrou 6.022 mortes por dengue e 6,6 milhões de casos prováveis — mais de 5x o recorde anterior (2023). Já nas primeiras 13 semanas do ano, o número de óbitos (1.116) superava o total anual de qualquer ano anterior. Onze estados decretaram emergência. Para Alberto Chebabo, da Sociedade Brasileira de Infectologia, "as mortes por dengue são sempre evitáveis" — e refletem a falta de estrutura de atendimento em estados e municípios.', fonte: 'Veja (dez/2024) e Farol da Oposição nº 37 (PSDB/ITV, jan/2025)', fonteUrl: '#' },
  { icon: '🔥', title: 'Maior devastação por fogo desde 2019', desc: '30,8 milhões de hectares queimados em 2024 — área comparável ao território da Itália, +80% frente a 2023.', date: '2024', category: 'Meio Ambiente', detail: 'O Brasil teve 30,8 milhões de hectares destruídos pelo fogo em 2024 (MapBiomas) — alta de cerca de 80% sobre 2023, com mais da metade na Amazônia. O INPE registrou 278.299 focos de incêndio, o maior número desde 2010. Editorial de O Globo classificou a reação do governo como "tardia e insuficiente": as forças-tarefas só foram mobilizadas quando a fumaça chegou a Brasília. Ironia: o PT criticava Bolsonaro pela "leniência com as queimadas" quando estava na oposição.', fonte: 'MapBiomas, INPE; O Globo (jan/2025)', fonteUrl: '#' },
  { icon: '💸', title: 'Real foi a moeda que mais se desvalorizou no mundo', desc: 'Queda de 27,3% frente ao dólar em 2024 — pior desempenho do real desde a pandemia.', date: '2024', category: 'Economia', detail: 'O dólar ultrapassou R$ 6,30 na penúltima semana de 2024 e o real foi a moeda que mais se desvalorizou no mundo no ano: queda de 27,3% frente ao dólar — pior desempenho desde 2020 (pandemia). A projeção do dólar ao fim de 2025 saltou de R$ 5,30 (quando Lula assumiu) para R$ 6,00 (+13%). Impacto direto: importados mais caros e pressão inflacionária sobre commodities como soja e milho — penalizando especialmente os mais pobres.', fonte: 'Veja (dez/2024) e Farol da Oposição nº 37 (PSDB/ITV, jan/2025)', fonteUrl: '#' },
  { icon: '📉', title: 'Dívida pública cresceu quase R$ 2 trilhões', desc: 'Saltou de R$ 7,2 tri (2022) para R$ 9,1 tri — de 72% para 78% do PIB; projeção da IFI: 86% até 2026.', date: '2024', category: 'Fiscal', detail: 'A dívida pública cresceu quase R$ 2 trilhões desde o início do governo Lula 3, passando de R$ 7,2 trilhões em 2022 para R$ 9,1 trilhões em 2024 — saltando de 72% para 78% do PIB. A projeção da IFI para o fim do mandato é de 86% do PIB, o que superaria o recorde da pandemia. O gasto com juros nominais já atinge R$ 918 bilhões/ano. Em paralelo, a arrecadação federal alcançou R$ 2,4 trilhões em jan-nov/2024 (+9,8% real) — maior patamar em 29 anos. Carga tributária: 32,4% do PIB.', fonte: 'Banco Central, Tesouro Nacional, IFI; Farol da Oposição nº 37 (PSDB/ITV, jan/2025)', fonteUrl: '#' },
  { icon: '🌍', title: 'Encontros formais com 13 ditadores', desc: 'Lula recebeu ou visitou 13 líderes de regimes autoritários no atual mandato — de Cuba a Irã.', date: '2023–2024', category: 'Externa', detail: 'Lula realizou encontros formais com 13 líderes classificados como ditadores no atual mandato. A lista inclui: Arábia Saudita, Cabo Verde, Catar, Cuba, China, Emirados Árabes, Etiópia, Guiné Bissau, Irã, República Democrática do Congo, República do Congo, Venezuela e Vietnã. O presidente também acumulou 88 dias em viagens internacionais desde jan/2023 — quase igualando, sozinho, o total somado de FHC, Dilma, Temer e Bolsonaro juntos.', fonte: 'Farol da Oposição nº 37 (PSDB/ITV, jan/2025)', fonteUrl: '#' },
  { icon: '⚖️', title: 'Pior nota histórica no Índice de Percepção da Corrupção', desc: 'Brasil em 107º entre 182 países; em 2024 atingiu o pior resultado da série histórica.', date: '2024–2025', category: 'Corrupção', detail: 'No Índice de Percepção da Corrupção (IPC) da Transparência Internacional, o Brasil obteve 35/100 em 2025, ocupando a 107ª posição entre 182 países — abaixo da média global e de países com renda semelhante. Em 2024 foi ainda pior: 34 pontos, o pior resultado histórico do país. Desde 2015, o Brasil está consistentemente abaixo da média mundial. Os fatores apontados pela Transparência Internacional: impunidade nos altos níveis, enfraquecimento democrático e restrição ao espaço cívico.', fonte: 'Transparência Internacional — IPC 2025 (publicado em 10/02/2026)', fonteUrl: '#' },
];

// ── LULA ERRORS SECTION ───────────────────────────────────────────────────────
const LulaErrorsSection = () => {
  const [modal, setModal] = React.useState(null);

  return (
    <section id="erros" className="lula-section">
      <div className="lula-header reveal">
        <span className="section-label" style={{color: '#E63946'}}>Prestação de contas</span>
        <h2 className="section-title lula-title">
          OS <span className="red">ERROS</span> DO<br />GOVERNO LULA
        </h2>
        <div className="divider-yellow" style={{margin:'16px auto', background:'#E63946'}} />
      </div>

      <div className="lula-grid reveal">
        {ERRORS.map((err, i) => (
          <article key={i} className="error-card">
            <div className="error-icon" aria-hidden="true">{err.icon}</div>
            <h3 className="error-title">{err.title}</h3>
            <p className="error-desc">{err.desc}</p>
            <div className="error-meta">
              <span className="error-tag date">{err.date}</span>
              <span className="error-tag">{err.category}</span>
            </div>
            <button className="btn-red-sm" onClick={() => setModal(err)} aria-label={`Saiba mais sobre: ${err.title}`}>
              Saiba mais →
            </button>
          </article>
        ))}
      </div>

      {/* MODAL */}
      {modal && (
        <div className="modal-overlay" role="dialog" aria-modal="true" aria-label={modal.title} onClick={e => e.target === e.currentTarget && setModal(null)}>
          <div className="modal-box">
            <button className="modal-close" onClick={() => setModal(null)} aria-label="Fechar modal">✕</button>
            <div style={{fontSize:'2rem', marginBottom:16}} aria-hidden="true">{modal.icon}</div>
            <h3 className="modal-title">{modal.title}</h3>
            <p className="modal-body">{modal.detail}</p>
            <div className="modal-source">
              <strong>Fonte:</strong>{' '}
              <a href={modal.fonteUrl} target="_blank" rel="noopener noreferrer">{modal.fonte}</a>
            </div>
          </div>
        </div>
      )}
    </section>
  );
};

Object.assign(window, { ComparisonSection, LulaErrorsSection });