/* ============================================================
   Sobre o IBD
   ============================================================ */

function SobrePage() {
  return (
    <Page>
      <section className="hero">
        <div className="container">
          <div className="hero-grid">
            <div>
              <div className="eyebrow eyebrow-accent" style={{marginBottom: 'var(--s-5)'}}>
                Sobre o Instituto
              </div>
              <h1>Uma fundação dedicada à educação técnica em derivativos.</h1>
              <p className="hero-lede">
                O IBD é uma iniciativa independente, sem fins lucrativos, voltada a difundir
                o conhecimento sobre mercados derivativos no Brasil — com rigor acadêmico
                e linguagem acessível.
              </p>
            </div>
            <dl className="hero-meta">
              <div><dt>Fundação</dt><dd>2026</dd></div>
              <div><dt>Sede</dt><dd>São Paulo · SP</dd></div>
              <div><dt>Modelo</dt><dd>Organização educativa sem fins lucrativos</dd></div>
              <div><dt>Acesso</dt><dd>Aberto, gratuito e auditável</dd></div>
            </dl>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 'var(--s-7)'}}>
            <div>
              <div className="eyebrow">I. Missão</div>
              <hr className="rule rule-strong" style={{margin: '12px 0 0', width: 40}} />
            </div>
            <div className="article-body">
              <p>
                O Instituto Brasileiro de Derivativos foi concebido para enfrentar um problema
                estrutural da formação financeira nacional: a opacidade com que os instrumentos
                derivativos são tratados nos currículos brasileiros, nas matérias econômicas
                da imprensa e nos próprios canais oficiais de comunicação dos agentes de mercado.
              </p>
              <p>
                Derivativos são instrumentos de <strong>transferência de risco</strong>. Bem
                compreendidos, são ferramentas de proteção; mal compreendidos, viram
                instrumentos de exposição involuntária e perdas evitáveis. A diferença está,
                quase sempre, na qualidade da educação técnica disponível.
              </p>
              <p>
                Nossa missão é simples e ambiciosa: <em>tornar a alfabetização em derivativos
                um bem público no Brasil.</em>
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="section section-sunken">
        <div className="container">
          <div style={{display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 'var(--s-7)'}}>
            <div>
              <div className="eyebrow">II. Princípios</div>
              <hr className="rule rule-strong" style={{margin: '12px 0 0', width: 40}} />
            </div>
            <div>
              {[
                ['Rigor técnico', 'Toda a produção editorial é revista por especialistas. Fórmulas são deriváveis, dados são citados, premissas são explícitas.'],
                ['Independência', 'O IBD não comercializa produtos financeiros, não recebe comissões e não faz recomendações de investimento. Não temos conflito de interesses com corretoras, bancos ou gestoras.'],
                ['Acesso aberto', 'Todo o conteúdo é disponibilizado gratuitamente. Ferramentas são abertas, com a matemática documentada e auditável.'],
                ['Pluralidade', 'Cobrimos derivativos financeiros, agropecuários, de commodities, energia, clima e crédito — com atenção especial ao contexto brasileiro.'],
                ['Cuidado pedagógico', 'Buscamos linguagem clara sem perder profundidade. Quem está começando consegue acompanhar; quem é especialista, encontra densidade.'],
              ].map(([title, body], i) => (
                <div key={title} style={{
                  display: 'grid',
                  gridTemplateColumns: '60px 1fr',
                  gap: 'var(--s-5)',
                  padding: 'var(--s-5) 0',
                  borderTop: i === 0 ? '1px solid var(--rule-strong)' : '1px solid var(--rule)'
                }}>
                  <div className="mono" style={{color: 'var(--accent)', fontSize: 11, letterSpacing: '0.1em', paddingTop: 4}}>
                    {String(i+1).padStart(2,'0')}
                  </div>
                  <div>
                    <h3 style={{fontSize: 'var(--step-2)', fontWeight: 500, marginBottom: 'var(--s-2)'}}>{title}</h3>
                    <p style={{color: 'var(--fg-muted)', margin: 0, maxWidth: '60ch'}}>{body}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 'var(--s-7)'}}>
            <div>
              <div className="eyebrow">III. Linhas de atuação</div>
              <hr className="rule rule-strong" style={{margin: '12px 0 0', width: 40}} />
            </div>
            <div className="card-grid card-grid-2" style={{gap: 'var(--s-4)'}}>
              {[
                ['Educação', 'Posts conceituais, vídeo-aulas, trilhas estruturadas e exemplos numéricos resolvidos.'],
                ['Pesquisa aplicada', 'Notas técnicas, análises de mercado e estudos empíricos sobre o mercado brasileiro.'],
                ['Ferramentas abertas', 'Calculadoras e simuladores com fórmulas documentadas, livres para uso e adaptação.'],
                ['Formação especializada', 'Cursos de especialização — em desenvolvimento, previstos para 2026/2027.'],
              ].map(([t, d]) => (
                <div key={t} className="card" style={{cursor: 'default'}}>
                  <div className="card-tag">Pilar</div>
                  <h3>{t}</h3>
                  <div className="card-desc">{d}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="section section-dark">
        <div className="container">
          <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--s-7)', alignItems: 'center'}}>
            <div>
              <div className="eyebrow eyebrow-accent">Apoie o IBD</div>
              <h2 style={{fontSize: 'clamp(1.75rem, 3vw, 2.5rem)', marginTop: 'var(--s-3)', fontWeight: 400, color: 'var(--primary-fg)'}}>
                Acreditamos que educação financeira é infraestrutura pública.
              </h2>
              <p style={{color: 'rgba(236,228,210,0.75)', maxWidth: '40ch', marginTop: 'var(--s-4)'}}>
                Se você compartilha desta visão, cadastre-se para acompanhar nosso trabalho.
                Em breve abriremos as primeiras parcerias institucionais e o programa de associados.
              </p>
              <div style={{marginTop: 'var(--s-5)', display: 'flex', gap: 'var(--s-3)'}}>
                <Link to="/cadastro" className="btn btn-accent">Criar conta</Link>
                <Link to="/biblioteca" className="btn btn-ghost" style={{borderColor: 'rgba(255,255,255,0.3)', color: 'var(--primary-fg)'}}>Explorar conteúdos</Link>
              </div>
            </div>
            <div className="placeholder-image" style={{background: 'rgba(255,255,255,0.04)', borderColor: 'rgba(255,255,255,0.14)', color: 'rgba(255,255,255,0.4)'}}>
              fotografia institucional · sede / equipe / evento
            </div>
          </div>
        </div>
      </section>
    </Page>
  );
}

window.SobrePage = SobrePage;