// Cases.jsx — Leandro Rafael Website · lista clicável com drawer
const Cases = () => {
  const [activeFilter, setActiveFilter] = React.useState('Todos');
  const [openCase, setOpenCase] = React.useState(null);

  const cases = [
    {
      client: 'Stone', sector: 'Fintech', label: 'FP&A / Governança', pillar: 'FP&A',
      desc: 'Estruturação e implementação de P&L por BU após aquisição da Linx. Revisão de centros de custo, despesas e regras de alocação para fortalecer a governança de resultados em operação multiplataforma de grande escala.',
      metrics: ['R$ 106 Mi em bônus e stock based payments incorporados', '80,4% das despesas rateadas por KPIs específicos', 'R$ 2,4 Bi de receita líquida consolidada no semestre', 'R$ 8 Mi/ano em economia de OPEX'],
    },
    {
      client: 'Raízen', sector: 'Energia', label: 'Fast Close / S/4HANA', pillar: 'Fast Close',
      desc: 'Liderança de squad para Fast Close de Fechamento Contábil, com RPA, analytics e suporte ao rollout de SAP S/4HANA em operação nacional de grande escala.',
      metrics: ['Ciclo D+10 → D+1', 'Redução de 90% no tempo de fechamento', 'Ganho consistente de previsibilidade mensal'],
    },
    {
      client: 'Raízen', sector: 'Energia', label: 'Riscos / Controles', pillar: 'Governança',
      desc: 'Diagnóstico aprofundado de riscos e fortalecimento de controles internos para elevar a maturidade da governança financeira em operação nacional de grande escala.',
      metrics: ['225 processos críticos mapeados', '535 fatores de risco identificados', 'R$ 60 Bi+ movimentados anualmente'],
    },
    {
      client: 'Kraft Heinz', sector: 'Alimentos', label: 'Fast Close / SAP', pillar: 'Fast Close',
      desc: 'Gestão de squad para Fast Close de Fechamento Contábil e implementação de SAP S/4HANA no módulo FI/CO em operação multinacional.',
      metrics: ['Zero findings em auditoria', 'OPEX da área em -20%', 'Ciclo de fechamento estabilizado e auditável'],
    },
    {
      client: 'Suzano', sector: 'Papel e Celulose', label: 'SOX / SAP', pillar: 'Governança',
      desc: 'Mapeamento ponta a ponta dos processos de Finanças Corporativas, implementação de quick wins, rollout de SAP S/4HANA e adequação de mais de 200 controles para SOX 404.',
      metrics: ['Aprovação integral em auditoria Big Four', '200+ controles adequados à SOX 404', 'Base financeira padronizada para operação global'],
    },
    {
      client: 'Plurix', sector: 'Varejo Alimentar', label: 'PMO / Trade', pillar: 'PMO',
      desc: 'Estruturação de PMO executivo para disciplinar renegociações contratuais e iniciativas de trade marketing em grupo varejista alimentar sob forte pressão por eficiência e expansão.',
      metrics: ['R$ 48,2 Mi em renegociações capturadas/ano', 'R$ 19,6 Mi em investimentos de trade viabilizados', '+2,3 p.p. na margem bruta'],
    },
    {
      client: 'Grupo Colorado', sector: 'Indústria e Agronegócio', label: 'Governança / FP&A', pillar: 'FP&A',
      desc: 'Estruturação ponta a ponta da área financeira em grupo sem governança formal, com liderança integrada de Finanças, Risco, Compliance e PMO estratégico.',
      metrics: ['Fechamento D+12 → D+5 · Capital de giro -18 dias', 'EBITDA +3,5 p.p. · ROIC +2,8 p.p.', '+140h/mês de produtividade · BPO fiscal -15%'],
    },
    {
      client: 'Grupo SEB', sector: 'Educação', label: 'Orçamento / Governança', pillar: 'Governança',
      desc: 'Implantação de metodologia orçamentária integrada e governança financeira para fortalecer disciplina de execução e qualidade das decisões estratégicas.',
      metrics: ['99% de aderência entre orçamento e realizado', 'Crescimento de 16% na margem bruta', 'Aumento de 23% no EBITDA'],
    },
    {
      client: 'Allied (Lojas Samsung)', sector: 'Varejo Especializado', label: 'Pricing / Expansão', pillar: 'FP&A',
      desc: 'Revisão ponta a ponta da cadeia logística, pricing e rollout para lojas. Análise granular de mercado em 50 cidades para reposicionar preços, priorizar praças críticas e converter competitividade local em expansão rentável.',
      metrics: ['R$ 69,5 Mi de potencial de ganho identificado', 'R$ 54,8 Mi de incremento estimado até 2026', 'R$ 5 a 10,8 Bi de mercado atingível mapeado'],
    },
    {
      client: 'Multinacional de Proteínas', sector: 'Indústria Global', label: 'GBS / Transformação', pillar: 'Transformação',
      desc: 'Transformação estrutural do Centro de Serviços Compartilhados para um modelo de Global Business Services, com automação, dados e governança capazes de sustentar escala e crescimento internacional.',
      metrics: ['40% de redução no tempo de processamento', '75% de diminuição na taxa de erros', '50% de aumento na capacidade operacional'],
    },
    {
      client: 'Varejo Alimentar', sector: 'Varejo (confidencial)', label: 'Compras / IA', pillar: 'Transformação',
      desc: 'Aplicação de analytics e IA na renegociação de contratos estratégicos para reduzir custos, elevar margem bruta e estruturar governança comercial em grupo varejista em expansão.',
      metrics: ['R$ 50 Mi em redução de custos de compras', '+2 p.p. de aumento potencial na margem bruta', '500+ contratos renegociados com fornecedores estratégicos'],
    },
    {
      client: 'HJ Santa Fé', sector: 'Agronegócio', label: 'Governança / Conselho', pillar: 'Governança',
      desc: 'Atuação como Conselheiro de Administração no Comitê de Finanças, com implementação de governança corporativa, criação de políticas e interface direta com auditoria Big Four.',
      metrics: ['Estruturação de políticas financeiras e de controles', 'Rituais decisórios implantados e em operação', 'Reestruturação financeira e de capital de giro em curso'],
    },
    {
      client: 'Leilac Laticínios', sector: 'Laticínios (Familiar)', label: 'Reestruturação / RJ', pillar: 'Reestruturação',
      desc: 'Reestruturação de empresa familiar em recuperação judicial com implantação de Conselho, Comitês e rituais decisórios. Estruturação de políticas, controles internos, KPIs de finanças e processo de S&OP.',
      metrics: ['Plano de Recuperação Judicial aprovado e homologado', '32 credores envolvidos no plano · 60% da dívida renegociada', 'Políticas, controles e S&OP implantados'],
    },
    {
      client: 'Laboratórios Baldacci', sector: 'Farmacêutico', label: 'Reestruturação', pillar: 'Reestruturação',
      desc: 'Atuação como Interim Controller por três anos, liderando a reestruturação de R$ 50 Mi em passivos e a renegociação do endividamento bancário e tributário.',
      metrics: ['Endividamento bancário -25%', 'Carga tributária -35%', 'R$ 50 Mi em passivos reestruturados'],
    },
    {
      client: 'M&A Estratégico no Paraguai', sector: 'Indústria / Agronegócio', label: 'M&A / Diligence', pillar: 'M&A',
      desc: 'Projeto conduzido ponta a ponta, da formatação do modelo financeiro à negociação. Diligência estratégica, modelagem de valuation e integração financeira pós transação.',
      metrics: ['Operação estruturada e negociada com sucesso', 'Modelo financeiro validado para a decisão de aquisição', 'Integração pós aquisição concluída'],
    },
    {
      client: 'Grupo UNICOOP', sector: 'Agronegócio (Paraguai)', label: 'Controladoria / OBZ', pillar: 'FP&A',
      desc: 'Implementação de Controladoria, Orçamento Base Zero e KPIs de acompanhamento, com desenvolvimento de sistema de gestão de resultado em dashboards de BI para grupo cooperativo em expansão.',
      metrics: ['Controladoria estruturada e em operação', 'OBZ implantado com disciplina de revisão mensal', 'Dashboards executivos para decisão em tempo real'],
    },
    {
      client: 'Anna Pegova', sector: 'Varejo de Beleza', label: 'Captação / FP&A', pillar: 'M&A',
      desc: 'Modelagem financeira, preparação de materiais para rodadas de investimento e condução do processo até a captação Série A, com governança e reporting pós investimento.',
      metrics: ['Captação Série A de R$ 8 Mi viabilizada', 'Modelo financeiro e valuation estruturados', 'Governança e reporting pós investimento implantados'],
    },
    {
      client: 'Multinacional de Cosméticos', sector: 'Indústria de Cosméticos', label: 'FP&A / Performance', pillar: 'FP&A',
      desc: 'Readequação da estrutura de reportes financeiros para viabilizar tomada de decisão sob a ótica de empresa integrada, em visão segmentada por Marca, Canal e Categoria (MMCC).',
      metrics: ['P&L MMCC implantado, integrando finanças à operação', 'Accountability compartilhado entre Consumer e Canais', 'Gestão de performance com decisões mais sinérgicas'],
    },
  ];

  const pillars = ['Todos', 'FP&A', 'Fast Close', 'Governança', 'Reestruturação', 'M&A', 'PMO', 'Transformação'];

  const pillarColors = {
    'FP&A':           { bg: 'rgba(11,36,71,0.08)',   text: '#0B2447' },
    'Fast Close':     { bg: 'rgba(45,84,122,0.1)',   text: '#2D547A' },
    'Governança':     { bg: 'rgba(201,169,97,0.12)', text: '#8B6914' },
    'Reestruturação': { bg: 'rgba(58,58,58,0.1)',    text: '#3A3A3A' },
    'M&A':            { bg: 'rgba(11,36,71,0.06)',   text: '#1A3A5C' },
    'PMO':            { bg: 'rgba(107,107,107,0.12)','text': '#4A4A4A' },
    'Transformação':  { bg: 'rgba(45,84,122,0.08)',  text: '#2D547A' },
  };

  const filtered = activeFilter === 'Todos' ? cases : cases.filter(c => c.pillar === activeFilter);
  const open = openCase !== null ? filtered[openCase] : null;

  return React.createElement('section', {
    id: 'cases',
    'data-screen-label': '04 Cases',
    style: { background: '#F7F5F0', padding: '88px 40px' }
  },
    React.createElement('div', { style: { maxWidth: 1280, margin: '0 auto' } },

      // Header
      React.createElement('div', {
        style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'end', marginBottom: 48 },
        className: 'about-grid'
      },
        React.createElement('div', null,
          React.createElement('div', { style: { fontFamily: "'Inter',sans-serif", fontSize: 11, fontWeight: 500, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#9A9A9A', marginBottom: 16 } }, 'Projetos Selecionados'),
          React.createElement('div', { style: { width: 48, height: 2, background: '#C9A961', marginBottom: 28 } }),
          React.createElement('h2', { style: { fontFamily: "'Playfair Display',serif", fontSize: 'clamp(28px,3vw,44px)', fontWeight: 600, lineHeight: 1.15, letterSpacing: '-0.02em', color: '#0B2447' } },
            'Uma amostra do que já passou pelas minhas mãos.')
        ),
        React.createElement('p', { style: { fontFamily: "'Inter',sans-serif", fontSize: 15, color: '#6B6B6B', lineHeight: 1.7 } },
          'Com número, contexto e impacto. Sem generalização.')
      ),

      // Filter pills
      React.createElement('div', { style: { display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 32 } },
        ...pillars.map(p =>
          React.createElement('button', {
            key: p,
            onClick: () => { setActiveFilter(p); setOpenCase(null); },
            style: {
              fontFamily: "'Inter',sans-serif", fontSize: 11, fontWeight: 500,
              letterSpacing: '0.07em', textTransform: 'uppercase',
              padding: '7px 14px', borderRadius: 2, cursor: 'pointer',
              border: activeFilter === p ? '1px solid #0B2447' : '1px solid #D6D1C6',
              background: activeFilter === p ? '#0B2447' : 'transparent',
              color: activeFilter === p ? '#F7F5F0' : '#6B6B6B',
              transition: 'all 150ms',
            }
          }, `${p}${p !== 'Todos' ? ` (${cases.filter(c => c.pillar === p).length})` : ` (${cases.length})`}`)
        )
      ),

      // List + detail panel
      React.createElement('div', {
        style: { display: 'grid', gridTemplateColumns: open ? '1fr 1fr' : '1fr', gap: 2, alignItems: 'start', transition: 'grid-template-columns 300ms ease' },
        className: open ? 'cases-grid' : ''
      },

        // List
        React.createElement('div', { style: { border: '1px solid #D6D1C6', background: '#EDEAE3' } },
          // Column headers
          React.createElement('div', {
            style: {
              display: 'grid', gridTemplateColumns: '2fr 1.2fr 1fr 32px',
              padding: '10px 20px', borderBottom: '2px solid #C9A961',
              gap: 16,
            }
          },
            ...['Empresa', 'Setor', 'Pilar', ''].map((h, i) =>
              React.createElement('div', {
                key: i,
                style: { fontFamily: "'Inter',sans-serif", fontSize: 10, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#9A9A9A' }
              }, h)
            )
          ),
          // Rows
          ...filtered.map((c, i) =>
            React.createElement('div', {
              key: `${c.client}-${i}`,
              onClick: () => setOpenCase(openCase === i ? null : i),
              style: {
                display: 'grid', gridTemplateColumns: '2fr 1.2fr 1fr 32px',
                padding: '14px 20px', gap: 16, alignItems: 'center',
                borderBottom: i < filtered.length - 1 ? '1px solid #D6D1C6' : 'none',
                cursor: 'pointer',
                background: openCase === i ? '#DDD9D0' : 'transparent',
                transition: 'background 150ms',
              },
              onMouseEnter: e => { if (openCase !== i) e.currentTarget.style.background = '#E8E4DB'; },
              onMouseLeave: e => { if (openCase !== i) e.currentTarget.style.background = 'transparent'; else e.currentTarget.style.background = '#DDD9D0'; },
            },
              // Client + sector inline
              React.createElement('div', null,
                React.createElement('div', { style: { fontFamily: "'Playfair Display',serif", fontSize: 15, fontWeight: 700, color: '#0B2447', lineHeight: 1.2 } }, c.client),
              ),
              React.createElement('div', { style: { fontFamily: "'Inter',sans-serif", fontSize: 12, color: '#6B6B6B', letterSpacing: '0.01em' } }, c.sector),
              // Label pill
              React.createElement('span', {
                style: {
                  fontFamily: "'Inter',sans-serif", fontSize: 9, fontWeight: 600,
                  letterSpacing: '0.08em', textTransform: 'uppercase',
                  color: pillarColors[c.pillar]?.text || '#3A3A3A',
                  background: pillarColors[c.pillar]?.bg || 'rgba(58,58,58,0.08)',
                  padding: '3px 7px', borderRadius: 1, whiteSpace: 'nowrap',
                  display: 'inline-block',
                }
              }, c.label),
              // Chevron
              React.createElement('div', {
                style: {
                  fontFamily: "'Inter',sans-serif", fontSize: 14, color: '#C9A961',
                  textAlign: 'right', fontWeight: 700,
                  transform: openCase === i ? 'rotate(90deg)' : 'rotate(0deg)',
                  transition: 'transform 200ms',
                }
              }, '›')
            )
          )
        ),

        // Detail panel
        open && React.createElement('div', {
          style: {
            background: '#0B2447',
            borderTop: '2px solid #C9A961',
            padding: '32px',
            position: 'sticky', top: 88,
          }
        },
          // Header
          React.createElement('div', { style: { marginBottom: 24 } },
            React.createElement('span', {
              style: {
                fontFamily: "'Inter',sans-serif", fontSize: 9, fontWeight: 600,
                letterSpacing: '0.1em', textTransform: 'uppercase',
                color: '#C9A961', background: 'rgba(201,169,97,0.12)',
                padding: '3px 8px', borderRadius: 1, display: 'inline-block', marginBottom: 12
              }
            }, open.label),
            React.createElement('div', { style: { fontFamily: "'Playfair Display',serif", fontSize: 22, fontWeight: 700, color: '#F7F5F0', lineHeight: 1.2, marginBottom: 4 } }, open.client),
            React.createElement('div', { style: { fontFamily: "'Inter',sans-serif", fontSize: 12, color: 'rgba(247,245,240,0.4)', letterSpacing: '0.02em' } }, open.sector),
          ),

          // Divider
          React.createElement('div', { style: { height: 1, background: 'rgba(201,169,97,0.2)', marginBottom: 24 } }),

          // Description
          React.createElement('div', { style: { fontFamily: "'Inter',sans-serif", fontSize: 10, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(247,245,240,0.35)', marginBottom: 10 } }, 'Escopo'),
          React.createElement('p', { style: { fontFamily: "'Inter',sans-serif", fontSize: 14, lineHeight: 1.72, color: 'rgba(247,245,240,0.75)', marginBottom: 28 } }, open.desc),

          // Metrics
          React.createElement('div', { style: { fontFamily: "'Inter',sans-serif", fontSize: 10, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(247,245,240,0.35)', marginBottom: 12 } }, 'Resultado'),
          React.createElement('ul', { style: { listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 8 } },
            ...open.metrics.map((m, i) =>
              React.createElement('li', { key: i, style: { fontFamily: "'Inter',sans-serif", fontSize: 13, color: '#F7F5F0', fontWeight: 500, lineHeight: 1.45, paddingLeft: 14, position: 'relative' } },
                React.createElement('span', { style: { position: 'absolute', left: 0, color: '#C9A961', fontWeight: 700 } }, '·'),
                m
              )
            )
          ),

          // Close
          React.createElement('button', {
            onClick: () => setOpenCase(null),
            style: {
              marginTop: 28, fontFamily: "'Inter',sans-serif", fontSize: 12, fontWeight: 500,
              color: 'rgba(247,245,240,0.4)', background: 'none', border: 'none', cursor: 'pointer',
              letterSpacing: '0.04em', padding: 0,
            }
          }, '← Fechar')
        )
      ),

      // Count
      React.createElement('div', {
        style: { marginTop: 16, fontFamily: "'Inter',sans-serif", fontSize: 12, color: '#9A9A9A', letterSpacing: '0.04em' }
      }, `${filtered.length} projeto${filtered.length !== 1 ? 's' : ''}${activeFilter !== 'Todos' ? ` em ${activeFilter}` : ' no total'}`)
    )
  );
};

Object.assign(window, { Cases });