// Cursos.jsx — Cursos, Licenças e Certificados
const CursosSection = () => {
  const [openIdx, setOpenIdx] = React.useState(0); // Certificações abertas por padrão

  const categories = [
    {
      label: 'Formações Técnicas',
      items: [
        'Engenharia Financeira com IA (Monte Carlo, Hedging, Derivativos, Redes Neurais, LLMs)',
        'Engenheiro de Agentes de IA (Agno, MCP, multiagentes, RAG)',
        'Analista de Dados (Python para análise e visualização)',
        'Automatizando tudo com n8n',
        'Desenvolvimento Web com IA (HTML, CSS, JavaScript, Design System)',
      ],
    },
    {
      label: 'Certificações Executivas Internacionais',
      items: [
        'McKinsey.org Forward Program — McKinsey & Company',
        'Harvard Business Impact — Teaching with Purpose',
        'Harvard Business School — CORe (Credential of Readiness)',
        'MIT — Data Analysis for Social Scientists (Certificate)',
        'Technion Israel — Leadership & Innovation (GNAM)',
        'PUC-Chile — Economics & Finance (GNAM)',
      ],
    },
    {
      label: 'Docência e Liderança',
      items: [
        'FGV Educação Executiva — Formação de Novos Docentes',
        'Insper — Gestão Ágil de Projetos',
        'ID_BR — Programa de Desenvolvimento de Lideranças',
      ],
    },
    {
      label: 'ERP e Sistemas Financeiros',
      items: [
        'SAP S/4HANA (FI/CO) — Implementação em grandes grupos',
        'SAP S/4HANA FI (GPLUX) — Gestão Financeira',
        'SAP S/4HANA CO (GPLUX) — Contabilidade Gerencial',
        'Sankhya',
      ],
    },
    {
      label: 'BI e Analytics',
      items: [
        'Power BI (Advanced)',
        'Tableau',
        'Excel Avançado (modelagem e FP&A)',
      ],
    },
    {
      label: 'Dados e Modelagem Quantitativa',
      items: [
        'Python (Pandas, NumPy, Matplotlib, Seaborn, Plotly)',
        'R, SQL, dbt',
        'Forecasting com ARIMA e Prophet',
      ],
    },
    {
      label: 'IA Aplicada a Finanças',
      items: [
        'Claude (Cowork, Code, for Excel)',
        'ChatGPT Pro, Gemini, NotebookLM',
        'Anthropic API',
        'MCP (Model Context Protocol)',
        'Agno (engenharia de agentes)',
      ],
    },
    {
      label: 'Automação e Stack de Produtividade',
      items: [
        'n8n (fluxos com APIs e integrações nativas)',
        'Power Automate, UiPath',
        'React, Vite, Supabase, Vercel',
        'Cloud (Azure e AWS)',
      ],
    },
  ];

  const toggle = (i) => setOpenIdx(openIdx === i ? null : i);

  return React.createElement('div', {
    style: { maxWidth: 1280, margin: '0 auto', marginTop: 80, paddingBottom: 0 }
  },
    // Section header
    React.createElement('div', { style: { fontFamily: "'Inter',sans-serif", fontSize: 11, fontWeight: 500, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#9A9A9A', marginBottom: 16 } }, 'Cursos, Licenças e Certificados'),
    React.createElement('div', { style: { width: 48, height: 2, background: '#C9A961', marginBottom: 40 } }),

    // ── McKinsey featured block ──────────────────────────────────────────────
    React.createElement('div', {
      style: {
        background: '#0B2447',
        borderTop: '2px solid #C9A961',
        padding: '28px 36px',
        marginBottom: 2,
        display: 'grid',
        gridTemplateColumns: '1fr auto',
        gap: 32,
        alignItems: 'center',
      },
      className: 'about-grid'
    },
      React.createElement('div', null,
        React.createElement('div', { style: { fontFamily: "'Inter',sans-serif", fontSize: 10, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#C9A961', marginBottom: 10 } }, 'Destaque · McKinsey & Company · 2025'),
        React.createElement('div', { style: { fontFamily: "'Playfair Display',serif", fontSize: 20, fontWeight: 700, color: '#F7F5F0', lineHeight: 1.2, marginBottom: 8 } }, 'McKinsey.org Forward Program'),
        React.createElement('p', { style: { fontFamily: "'Inter',sans-serif", fontSize: 14, color: 'rgba(247,245,240,0.62)', lineHeight: 1.65, maxWidth: 680 } },
          'Programa executivo focado em metodologias McKinsey para problem solving estruturado, comunicação de impacto e digital toolkit aplicado a contextos de transformação.')
      ),
      React.createElement('div', {
        style: {
          borderLeft: '1px solid rgba(201,169,97,0.2)',
          paddingLeft: 32,
          display: 'flex', flexDirection: 'column', gap: 4,
          flexShrink: 0,
        }
      },
        React.createElement('div', { style: { fontFamily: "'Inter',sans-serif", fontSize: 10, fontWeight: 500, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'rgba(247,245,240,0.3)' } }, 'Instituição'),
        React.createElement('div', { style: { fontFamily: "'Inter',sans-serif", fontSize: 14, color: 'rgba(247,245,240,0.7)' } }, 'McKinsey & Company'),
        React.createElement('div', { style: { fontFamily: "'Inter',sans-serif", fontSize: 10, fontWeight: 500, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'rgba(247,245,240,0.3)', marginTop: 12 } }, 'Ano'),
        React.createElement('div', { style: { fontFamily: "'Inter',sans-serif", fontSize: 14, color: 'rgba(247,245,240,0.7)' } }, '2025'),
      )
    ),

    // ── Desktop: 3-column grid ───────────────────────────────────────────────
    React.createElement('div', {
      style: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 2 },
      className: 'cases-grid desktop-cursos'
    },
      ...categories.map((cat, i) =>
        React.createElement('div', {
          key: i,
          style: {
            background: '#EDEAE3',
            borderTop: '2px solid #C9A961',
            padding: '24px',
          }
        },
          React.createElement('div', { style: { fontFamily: "'Inter',sans-serif", fontSize: 10, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#C9A961', marginBottom: 14 } }, cat.label),
          React.createElement('ul', { style: { listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 7 } },
            ...cat.items.map((item, j) =>
              React.createElement('li', { key: j, style: { fontFamily: "'Inter',sans-serif", fontSize: 13, color: '#3A3A3A', lineHeight: 1.5, paddingLeft: 14, position: 'relative' } },
                React.createElement('span', { style: { position: 'absolute', left: 0, color: '#C9A961' } }, '—'),
                item
              )
            )
          )
        )
      )
    ),

    // ── Mobile: accordion ────────────────────────────────────────────────────
    React.createElement('div', {
      style: { display: 'none' },
      className: 'mobile-cursos'
    },
      ...categories.map((cat, i) =>
        React.createElement('div', {
          key: i,
          style: { borderBottom: '1px solid #D6D1C6' }
        },
          React.createElement('button', {
            onClick: () => toggle(i),
            style: {
              width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              padding: '16px 0', background: 'none', border: 'none', cursor: 'pointer',
            }
          },
            React.createElement('span', { style: { fontFamily: "'Inter',sans-serif", fontSize: 11, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#C9A961' } }, cat.label),
            React.createElement('span', { style: { color: '#C9A961', fontSize: 16, transform: openIdx === i ? 'rotate(90deg)' : 'none', transition: 'transform 200ms' } }, '›')
          ),
          openIdx === i && React.createElement('ul', {
            style: { listStyle: 'none', margin: 0, padding: '0 0 16px', display: 'flex', flexDirection: 'column', gap: 8 }
          },
            ...cat.items.map((item, j) =>
              React.createElement('li', { key: j, style: { fontFamily: "'Inter',sans-serif", fontSize: 13, color: '#3A3A3A', lineHeight: 1.5, paddingLeft: 14, position: 'relative' } },
                React.createElement('span', { style: { position: 'absolute', left: 0, color: '#C9A961' } }, '—'),
                item
              )
            )
          )
        )
      )
    )
  );
};

Object.assign(window, { CursosSection });