// Atuacao.jsx — Leandro Rafael Website · 8 pilares 4x2
const Atuacao = () => {
  const pillars = [
    {
      num: '01',
      title: 'Gestão Executiva',
      body: 'Atuação direta à frente da área financeira, ao lado do time, como interim CFO, gerente executivo ou PMO. Estruturação da operação do zero, definição de rituais, organização de entregas e condução do time no dia a dia.',
      items: ['Interim CFO e PMO executivo', 'Estruturação de áreas de finanças', 'Condução direta de equipe'],
    },
    {
      num: '02',
      title: 'Finanças Corporativas',
      body: 'FP&A, tesouraria e capital de giro. Desenho de DRE gerencial, orçamento, forecast e dashboards que servem para decidir, não para arquivar.',
      items: ['FP&A e orçamento', 'Tesouraria e capital de giro', 'Reporting executivo'],
    },
    {
      num: '03',
      title: 'Controladoria e Contabilidade',
      body: 'Fast close, fechamento contábil, estratégia tributária e adequação à Reforma Tributária. Controles internos e rotinas que sustentam auditoria Big Four sem sobressalto no fim do mês.',
      items: ['Fast close e fechamento contábil', 'Estratégia tributária e Reforma Tributária', 'Controles internos e SOX'],
    },
    {
      num: '04',
      title: 'Reestruturação e Turnaround',
      body: 'Renegociação de passivos, integração pós aquisição, governança em empresas familiares e em recuperação judicial. Entrada quando o caixa aperta e a empresa precisa voltar a fazer sentido.',
      items: ['Renegociação de passivos', 'Integração pós M&A', 'Governança e recuperação judicial'],
    },
    {
      num: '05',
      title: 'Projetos e Consultoria',
      body: 'Liderança de projetos multidisciplinares em grandes grupos, conectando finanças, operação, tecnologia e pessoas. Atuação em Fortune 500 e médias empresas, com foco em diagnóstico, roadmap e execução de resultados mensuráveis.',
      items: ['PMO e gestão de portfólio', 'Diagnóstico e roadmap', 'Entrega multidisciplinar'],
    },
    {
      num: '06',
      title: 'Transformação Digital e Tecnologia',
      body: 'Implementação de SAP S/4HANA, automação de processos com RPA, BI executivo em Power BI e aplicação de IA em finanças. Tecnologia que acelera quando o processo já está no lugar certo.',
      items: ['SAP S/4HANA (FI/CO)', 'RPA e automação de processos', 'IA aplicada a finanças'],
    },
    {
      num: '07',
      title: 'Educação Executiva',
      body: 'Professor de Administração e Finanças na FGV Educação Executiva, em programas para executivos C-Level. Também palestras corporativas e mentorias para times de finanças em transformação.',
      items: ['FGV Educação Executiva', 'Palestras corporativas', 'Mentoria de times de finanças'],
    },
    {
      num: '08',
      title: 'SOLVEX',
      body: 'Cofundador de uma consultoria AI native de estratégia e finanças para empresas de médio porte. Combina método executivo, tecnologia aplicada e foco em resultado mensurável.',
      items: ['Estratégia e finanças', 'AI native', 'Empresas de médio porte'],
    },
  ];

  return React.createElement('section', {
    id: 'atuacao',
    'data-screen-label': '03 Atuação',
    style: { background: '#0B2447', padding: '88px 40px' }
  },
    React.createElement('div', { style: { maxWidth: 1280, margin: '0 auto' } },

      // Header row
      React.createElement('div', {
        style: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 64, flexWrap: 'wrap', gap: 24 }
      },
        React.createElement('div', null,
          React.createElement('div', {
            style: { fontFamily: "'Inter',sans-serif", fontSize: 11, fontWeight: 500, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#C9A961', marginBottom: 16 }
          }, 'Atuação'),
          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: '#F7F5F0', maxWidth: 480 }
          }, 'Como atuo'),
          React.createElement('p', {
            style: { fontFamily: "'Inter',sans-serif", fontSize: 15, color: 'rgba(247,245,240,0.45)', marginTop: 12 }
          }, 'Oito frentes que se conversam e se reforçam.')
        )
      ),

      // 4×2 grid
      React.createElement('div', {
        style: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1 },
        className: 'pillars-grid'
      },
        ...pillars.map((p, i) =>
          React.createElement('div', {
            key: p.num,
            style: {
              background: i % 2 === 0 ? '#0B2447' : '#0F2D52',
              borderTop: '2px solid #C9A961',
              padding: '36px 28px',
              transition: 'background 200ms',
              cursor: 'default',
            },
            onMouseEnter: e => e.currentTarget.style.background = '#1A3A5C',
            onMouseLeave: e => e.currentTarget.style.background = i % 2 === 0 ? '#0B2447' : '#0F2D52',
          },
            React.createElement('div', {
              style: { fontFamily: "'Playfair Display',serif", fontSize: 44, fontWeight: 700, color: 'rgba(247,245,240,0.05)', lineHeight: 1, marginBottom: 16 }
            }, p.num),
            React.createElement('h3', {
              style: { fontFamily: "'Playfair Display',serif", fontSize: 18, fontWeight: 600, color: '#F7F5F0', lineHeight: 1.25, marginBottom: 14 }
            }, p.title),
            React.createElement('p', {
              style: { fontFamily: "'Inter',sans-serif", fontSize: 13, lineHeight: 1.72, color: 'rgba(247,245,240,0.6)', marginBottom: 24 }
            }, p.body),
            React.createElement('ul', { style: { listStyle: 'none', margin: 0, padding: 0 } },
              ...p.items.map(item =>
                React.createElement('li', {
                  key: item,
                  style: { fontFamily: "'Inter',sans-serif", fontSize: 11, color: '#C9A961', letterSpacing: '0.02em', marginBottom: 6, paddingLeft: 14, position: 'relative' }
                },
                  React.createElement('span', { style: { position: 'absolute', left: 0 } }, '—'),
                  item
                )
              )
            )
          )
        )
      )
    )
  );
};

Object.assign(window, { Atuacao });