// About.jsx — Leandro Rafael Website
const About = () => {
  const [photoError, setPhotoError] = React.useState(false);
  const credentials = [
    { title: 'Mestrado Profissional em Administração', inst: 'FGV EAESP', period: '2022–2025' },
    { title: 'Pós-Graduação em Finanças Corporativas', inst: 'Insper APF', period: '2019–2021' },
    { title: 'MBA Executivo em Gestão Estratégica Empresarial', inst: 'FGV', period: '2018–2019' },
    { title: 'MBA em Gestão Financeira, Controladoria, Auditoria e Compliance', inst: 'Mackenzie / Anhembi Morumbi', period: '2016–2017' },
    { title: 'Credential of Readiness — CORe', inst: 'Harvard Business School', period: '2022' },
    { title: 'Certificate — Data Analysis for Social Scientists', inst: 'MIT', period: '' },
    { title: 'Programa Executivo GNAM — Leadership & Innovation', inst: 'Technion — Israel', period: '' },
    { title: 'Programa Executivo GNAM — Economics & Finance', inst: 'PUC-Chile', period: '' },
    { title: 'Graduação em Administração de Empresas', inst: 'Graduação', period: '' },
    { title: 'Graduação em Ciências Contábeis', inst: 'Graduação', period: '' },
  ];

  const timeline = [
    { period: '2014–2021', role: 'Gerente executivo de projetos', org: 'Horizon Financial Consulting' },
    { period: '2021–2026', role: 'Gerente executivo de projetos', org: 'SOLVEX Consultoria' },
    { period: '2022–2023', role: 'Consultor de Value Creation', org: 'Solum Capital' },
    { period: '2023–2025', role: 'Associate Senior Consultant', org: 'Peers Consulting and Technology' },
    { period: '2025–2026', role: 'Gerente Administrativo Financeiro e PMO', org: 'Grupo Colorado' },
    { period: '2025–2026', role: 'Conselheiro', org: 'HJSantafe Agrícola e Leilac Lácteos' },
    { period: '2025–', role: 'Professor de Finanças Corporativas', org: 'FGV Educação Executiva' },
  ];

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

      // Section label
      React.createElement('div', {
        style: { fontFamily: "'Inter',sans-serif", fontSize: 11, fontWeight: 500, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#9A9A9A', marginBottom: 16 }
      }, 'Sobre mim'),
      React.createElement('div', { style: { width: 48, height: 2, background: '#C9A961', marginBottom: 64 } }),

      // Two-column
      React.createElement('div', {
        style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' },
        className: 'about-grid'
      },

        // Left: photo
        React.createElement('div', null,
          React.createElement('div', {
            style: {
              aspectRatio: '4/5', background: '#0B2447',
              position: 'relative', overflow: 'hidden', marginBottom: 40,
            }
          },
            !photoError && React.createElement('img', {
              src: 'assets/foto4.webp',
              alt: 'Leandro Rafael sorrindo, postura frontal com mãos nos bolsos',
              style: { width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' },
              onError: () => setPhotoError(true),
            }),
            photoError && React.createElement('div', {
              style: { position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', background: '#0B2447' }
            },
              React.createElement('img', { src: 'assets/logo.png', alt: '', style: { width: 56, opacity: 0.1, marginBottom: 10 } }),
              React.createElement('div', { style: { fontFamily: "'Inter',sans-serif", fontSize: 11, color: 'rgba(247,245,240,0.2)', letterSpacing: '0.06em' } }, 'Foto executiva')
            ),
            React.createElement('div', { style: { position: 'absolute', top: 0, left: 0, width: 3, height: '100%', background: '#C9A961', opacity: 0.6 } })
          ),

          // Credentials grid
          React.createElement('div', {
            style: { fontFamily: "'Inter',sans-serif", fontSize: 11, fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#9A9A9A', marginBottom: 20 }
          }, 'Formação Acadêmica'),
          React.createElement('div', {
            style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }
          },
            ...credentials.map((c, i) =>
              React.createElement('div', {
                key: i,
                style: {
                  background: '#EDEAE3', borderTop: '2px solid #C9A961',
                  padding: '16px 16px', borderRadius: 0,
                }
              },
                React.createElement('div', {
                  style: { fontFamily: "'Inter',sans-serif", fontSize: 10, fontWeight: 500, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#C9A961', marginBottom: 6 }
                }, c.inst + (c.period ? ` · ${c.period}` : '')),
                React.createElement('div', {
                  style: { fontFamily: "'Inter',sans-serif", fontSize: 13, color: '#3A3A3A', lineHeight: 1.45 }
                }, c.title)
              )
            )
          )
        ),

        // Right: bio + timeline
        React.createElement('div', null,
          React.createElement('h2', {
            style: {
              fontFamily: "'Playfair Display',serif",
              fontSize: 'clamp(26px,2.8vw,40px)', fontWeight: 600,
              lineHeight: 1.15, letterSpacing: '-0.02em',
              color: '#0B2447', marginBottom: 36
            }
          }, 'Sobre mim'),

          ...[
            'Trabalho com finanças corporativas há mais de 14 anos. Comecei em consultoria, passei por projetos em empresas como Stone, Kraft Heinz, Raízen e Suzano, e hoje divido o tempo entre conselhos, a sala de aula na FGV e a construção da SOLVEX com meus sócios.',
            'Minha cabeça foi formada em dois lugares. No rigor acadêmico, com mestrado pela FGV EAESP em reestruturação empresarial, e na prática, conduzindo turnarounds, fast close, integração pós M&A e montagem de FP&A em empresas que precisavam voltar a respirar.',
            'Tecnologia sempre fez parte do meu trabalho. Implantei SAP S/4HANA em grandes grupos, montei dashboards preditivos em Python e Power BI, automatizei conciliações com RPA e, nos últimos anos, passei a aplicar IA em previsibilidade de caixa e análise de margem. A tecnologia nunca entra primeiro. Ela acelera o trabalho quando o processo já está no lugar certo.',
            'Nos conselhos, atendo PMEs e empresas familiares que precisam organizar a casa antes de crescer ou captar. Na FGV Educação Executiva, ensino Administração e Finanças para executivos que já estão na ponta. Isso obriga a explicar coisa difícil de forma útil, sem diluir o conteúdo. A sala de aula testa a teoria e o conselho testa a prática.',
            'Gosto de números que contam história, de processo que sobrevive à troca de gestor e de governança que organiza a casa sem burocratizar. Finanças, para mim, é disciplina antes de ser software. Cada empresa tem um ponto de dor diferente, e a entrega precisa caber na operação real do cliente. Projeto bom é aquele que, quando eu saio, o cliente continua rodando sozinho.',
          ].map((text, i) =>
            React.createElement('p', {
              key: i,
              style: {
                fontFamily: "'Inter',sans-serif", fontSize: 17,
                lineHeight: 1.78, color: i >= 3 ? '#6B6B6B' : '#3A3A3A',
                marginBottom: 20
              }
            }, text)
          ),

          // Timeline
          React.createElement('div', { style: { marginTop: 48 } },
            React.createElement('div', {
              style: { fontFamily: "'Inter',sans-serif", fontSize: 11, fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#9A9A9A', marginBottom: 28 }
            }, 'Trajetória'),
            React.createElement('div', { style: { position: 'relative' } },
              React.createElement('div', {
                style: { position: 'absolute', left: 88, top: 8, bottom: 8, width: 1, background: '#D6D1C6' }
              }),
              ...timeline.map(({ period, role, org }, i) =>
                React.createElement('div', {
                  key: i,
                  style: { display: 'flex', gap: 20, marginBottom: 20, alignItems: 'flex-start' }
                },
                  React.createElement('div', {
                    style: {
                      fontFamily: "'Inter',sans-serif", fontSize: 11,
                      fontWeight: 500, color: '#9A9A9A', width: 80, flexShrink: 0,
                      paddingTop: 3, lineHeight: 1.3, letterSpacing: '0.01em'
                    }
                  }, period),
                  React.createElement('div', {
                    style: {
                      width: 7, height: 7, borderRadius: '50%',
                      background: i === timeline.length - 1 ? '#C9A961' : '#D6D1C6',
                      flexShrink: 0, marginTop: 5, position: 'relative', zIndex: 1
                    }
                  }),
                  React.createElement('div', null,
                    React.createElement('div', {
                      style: { fontFamily: "'Inter',sans-serif", fontSize: 14, fontWeight: 500, color: '#0B2447', lineHeight: 1.3 }
                    }, org),
                    React.createElement('div', {
                      style: { fontFamily: "'Inter',sans-serif", fontSize: 13, color: '#6B6B6B', marginTop: 2 }
                    }, role)
                  )
                )
              )
            )
          )
        )
      )
    ),

    // ── Cursos, Licenças e Certificados ─────────────────────────────────────
    React.createElement(CursosSection, null)
  );
};

Object.assign(window, { About });