function AboutPage({ onNavigate }) {
  const { Icon, BrandIcon } = window.MarceloCasteloIODesignSystem_5e00d7;
  const [contact, setContact] = React.useState(false);
  const socials = [
    { label: 'LinkedIn', handle: 'www.linkedin.com/in/marcelocastelobranco/', icon: 'linkedin' },
    { label: 'GitHub', handle: 'github.com/orgs/MarceloCasteloIO', icon: 'github' },
    { label: 'YouTube', handle: 'www.youtube.com/@marcelocasteloio', icon: 'youtube' },
  ];
  const dominios = [
    'Arquiteturas event-driven',
    'Processamento assíncrono',
    'Sistemas de baixa latência',
    'Plataformas de dados',
    'Integração entre domínios complexos',
  ];
  return (
    <section style={{ padding: 'var(--space-8) var(--space-7)', maxWidth: 860, margin: '0 auto' }}>

      <div className="stack-on-mobile" style={{ display: 'flex', gap: 'var(--space-7)', alignItems: 'flex-start', marginBottom: 'var(--space-8)' }}>
        <img src="assets/marcelo-photo-bw.png" alt="Marcelo Castelo Branco" style={{ width: 160, height: 160, borderRadius: '50%', flexShrink: 0, objectFit: 'cover', border: '1px solid var(--border-subtle)' }} />
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 10 }}>Sobre</div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-3xl)', color: 'var(--text-primary)', margin: '0 0 var(--space-5)', lineHeight: 'var(--leading-tight)' }}>Marcelo Castelo Branco</h1>
          {/* Os 15 anos são de mercado, não de sistemas distribuídos —
              são duas afirmações distintas e juntá-las numa frase só
              inflava a segunda. */}
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-lg)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-primary)', margin: '0 0 14px', textWrap: 'pretty' }}>Arquiteto de software, com mais de 15 anos de mercado. Atuo em sistemas distribuídos de alta criticidade — mercados financeiros, plataformas enterprise e ambientes regulados. Contextos onde falha não é uma opção.</p>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', margin: 0, textWrap: 'pretty' }}>Minha atuação é orientada à construção de fundações técnicas sólidas, capazes de sustentar escala, performance, segurança e evolução de longo prazo.</p>
          <div style={{ display: 'flex', gap: 10, marginTop: 'var(--space-5)', flexWrap: 'wrap' }}>
            {socials.map(s => (
              <a key={s.label} href={'https://' + s.handle} style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-secondary)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-pill)', padding: '6px 14px', textDecoration: 'none' }}>
                <BrandIcon name={s.icon} size={13} />{s.label}
              </a>))}
          </div>
        </div>
      </div>

      <div style={{ padding: 'var(--space-6)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', background: 'var(--surface-card)', marginBottom: 'var(--space-8)' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--accent-strong)', marginBottom: 12 }}>Hoje</div>
        {/* Sem nome de empregador: este é o site pessoal dele, e citar a
            empresa arrasta reputação de terceiro para cá — além de vencer
            no dia em que ele mudar de trabalho. O que ele faz fica. */}
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', margin: 0, textWrap: 'pretty' }}>Atuo como arquiteto em decisões estratégicas de tecnologia e produto, com forte foco em Developer Experience, criação de building blocks internos, padronização arquitetural e atendimento a clientes enterprise do mercado financeiro.</p>
      </div>

      <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-2xl)', color: 'var(--text-primary)', margin: '0 0 var(--space-5)' }}>Onde eu atuo</h2>
      <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 'var(--space-7)' }}>
        {dominios.map(d => (
          <span key={d} style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-secondary)', border: '1px solid var(--border-subtle)', background: 'var(--surface-card)', borderRadius: 'var(--radius-pill)', padding: '7px 14px' }}>{d}</span>
        ))}
      </div>

      <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', margin: '0 0 var(--space-5)', textWrap: 'pretty' }}>Transito entre engenharia, arquitetura e negócio, atuando como ponte entre times técnicos e stakeholders — refinando requisitos, antecipando riscos e orientando decisões estruturais antes que elas cheguem à produção.</p>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', margin: '0 0 var(--space-8)', textWrap: 'pretty' }}>Não exerço gestão formal de pessoas, mas atuo de forma contínua em mentoria técnica, formação de times e elevação do nível de engenharia — promovendo clareza arquitetural, autonomia técnica e responsabilidade sistêmica.</p>

      <blockquote style={{ margin: '0 0 var(--space-8)', paddingLeft: 'var(--space-6)', borderLeft: '2px solid var(--accent)' }}>
        <p style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 'var(--text-xl)', lineHeight: 'var(--leading-snug)', color: 'var(--text-primary)', margin: 0, textWrap: 'pretty' }}>Meu foco é simples: sistemas corretos, sustentáveis e honestos do ponto de vista técnico, que funcionem hoje e continuem funcionando quando o contexto mudar.</p>
      </blockquote>

      <div className="stack-on-mobile" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--space-5)', padding: 'var(--space-5) var(--space-6)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', background: 'var(--accent-soft)', marginBottom: 'var(--space-5)' }}>
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 19, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 4 }}>O que eu penso sobre ensinar</div>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-secondary)' }}>Antes do código, vem a consciência.</div>
        </div>
        <button onClick={() => onNavigate && onNavigate('manifesto')} style={{ background: 'var(--accent)', color: 'var(--ink-900)', border: 'none', borderRadius: 'var(--radius-md)', padding: '11px 22px', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 15, cursor: 'pointer', whiteSpace: 'nowrap', flexShrink: 0 }}>Ler o manifesto</button>
      </div>

      <div className="stack-on-mobile" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: 'var(--space-5) var(--space-6)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <Icon name="file-code" size={18} style={{ color: 'var(--text-muted)' }} />
          <div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)' }}>Contato</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 15, color: 'var(--text-primary)' }}>contato@marcelocastelo.io</div>
          </div>
        </div>
        <button onClick={() => setContact(true)} style={{ background: 'transparent', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', padding: '8px 16px', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 13, color: 'var(--text-primary)', cursor: 'pointer' }}>Enviar mensagem</button>
      </div>
      {contact && <ContactForm onClose={() => setContact(false)} />}
    </section>
  );
}
Object.assign(window, { AboutPage });
