/* ============================================================
   Post (article) page
   ============================================================ */

function PostPage() {
  const { path } = useHashRoute();
  const slug = path.replace(/^\/post\//, '');
  const post = LIBRARY.find(p => p.slug === slug) || LIBRARY[0];

  return (
    <Page>
      <article>
        <header style={{padding: 'var(--s-8) 0 var(--s-6)', borderBottom: '1px solid var(--rule)', background: 'var(--bg-elev)'}}>
          <div className="container" style={{maxWidth: 820}}>
            <div className="crumb" style={{marginBottom: 'var(--s-5)'}}>
              <a href="#/">Início</a>
              <span className="crumb-sep"></span>
              <a href="#/biblioteca">Biblioteca</a>
              <span className="crumb-sep"></span>
              <span>{post.tema}</span>
            </div>
            <div className="eyebrow eyebrow-accent" style={{marginBottom: 'var(--s-3)'}}>
              {post.tag} · {post.tema} · {post.nivel}
            </div>
            <h1 style={{fontSize: 'clamp(2rem, 4vw, 3.25rem)', fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.1}}>
              {post.title}
            </h1>
            <p style={{color: 'var(--fg-muted)', fontSize: 'var(--step-2)', marginTop: 'var(--s-4)', fontFamily: 'var(--font-serif)', fontStyle: 'italic', maxWidth: '52ch'}}>
              {post.desc}
            </p>
            <div style={{display: 'flex', gap: 'var(--s-6)', marginTop: 'var(--s-6)', borderTop: '1px solid var(--rule)', paddingTop: 'var(--s-4)'}}>
              <div>
                <div className="eyebrow" style={{fontSize: 10}}>Autor</div>
                <div style={{fontFamily: 'var(--font-serif)', marginTop: 4}}>Editoria IBD</div>
              </div>
              <div>
                <div className="eyebrow" style={{fontSize: 10}}>Publicado</div>
                <div className="mono" style={{marginTop: 4, fontSize: 13}}>{post.date}</div>
              </div>
              <div>
                <div className="eyebrow" style={{fontSize: 10}}>Tempo</div>
                <div className="mono" style={{marginTop: 4, fontSize: 13}}>{post.meta[0]}</div>
              </div>
              <div style={{marginLeft: 'auto'}}>
                <button className="btn btn-ghost btn-sm">Salvar leitura</button>
              </div>
            </div>
          </div>
        </header>

        <section style={{padding: 'var(--s-8) 0'}}>
          <div className="container" style={{display: 'grid', gridTemplateColumns: '200px 1fr 240px', gap: 'var(--s-7)'}}>
            <aside className="article-aside" style={{position: 'sticky', top: 100, alignSelf: 'start'}}>
              <div className="eyebrow" style={{fontSize: 10, marginBottom: 'var(--s-3)'}}>Sumário</div>
              <ol style={{paddingLeft: '1.2em', margin: 0, fontSize: 13, lineHeight: 1.8, color: 'var(--fg-muted)'}}>
                <li><a href="#s1" style={{color: 'inherit'}}>Definição</a></li>
                <li><a href="#s2" style={{color: 'inherit'}}>Origem econômica</a></li>
                <li><a href="#s3" style={{color: 'inherit'}}>Tipologia</a></li>
                <li><a href="#s4" style={{color: 'inherit'}}>Exemplo numérico</a></li>
                <li><a href="#s5" style={{color: 'inherit'}}>Leituras complementares</a></li>
              </ol>
            </aside>

            <div className="article-body">
              <p>
                Um <strong>derivativo</strong> é um contrato financeiro cujo valor deriva — daí o nome —
                de algum ativo, indicador ou evento subjacente. O subjacente pode ser uma ação,
                uma commodity, uma taxa de juros, uma moeda, uma temperatura média, um índice
                inflacionário, e assim por diante.
              </p>
              <p>
                A literatura técnica costuma definir derivativos como instrumentos cujo <em>payoff</em> —
                o resultado financeiro de quem detém o contrato — é função do valor de uma ou
                mais variáveis observadas. Essa definição é precisa, mas frequentemente afasta
                quem está começando. Vamos por outro caminho.
              </p>

              <h2 id="s2">Origem econômica</h2>
              <p>
                Imagine um produtor de soja em Mato Grosso. Em janeiro, ele plantou. Em maio,
                vai colher. Entre uma data e outra, o preço da soja pode subir ou cair — e
                ele não tem controle sobre isso. Se o preço cair muito, sua margem desaparece.
              </p>
              <p>
                Existe uma forma de eliminar essa incerteza: o produtor pode, hoje, em janeiro,
                fechar com um comprador um acordo de venda da soja a um preço pré-determinado,
                com entrega prevista para maio. Esse é o <strong>contrato a termo</strong> — a
                forma mais antiga de derivativo conhecida, presente em registros
                mesopotâmicos de mais de três milênios atrás.
              </p>
              <blockquote>
                Derivativos não nascem de especulação financeira moderna. Nascem da necessidade
                concreta de transferir risco entre quem não quer carregá-lo e quem está
                disposto a assumi-lo.
              </blockquote>

              <h2 id="s3">Tipologia básica</h2>
              <p>
                Os quatro pilares dos mercados derivativos contemporâneos são:
              </p>
              <ul>
                <li><strong>Contratos a termo</strong> — acordo bilateral, normalmente de balcão, com obrigação de compra/venda em data futura.</li>
                <li><strong>Contratos futuros</strong> — versão padronizada e negociada em bolsa, com ajustes diários.</li>
                <li><strong>Opções</strong> — conferem o <em>direito</em> (não a obrigação) de comprar ou vender um ativo.</li>
                <li><strong>Swaps</strong> — troca de fluxos financeiros entre duas partes, geralmente indexados a variáveis distintas.</li>
              </ul>

              <h2 id="s4">Exemplo numérico</h2>
              <p>
                Suponha um produtor com 100 toneladas de café arábica a entregar em julho.
                Hoje, o preço a vista é de <span className="mono">R$ 1.450,00</span> por saca de 60kg.
                O contrato futuro de café para julho na B3 está negociado a:
              </p>
              <div className="formula formula-block">
                F = R$ 1.482,00 por saca
              </div>
              <p>
                Vendendo 17 contratos futuros (cada um representa 100 sacas) a esse preço, o produtor
                trava sua receita em <span className="mono">R$ 2.519.400,00</span> — independentemente
                do que aconteça com o preço a vista até o vencimento. Esse é o <strong>hedge de venda</strong>.
              </p>

              <h2 id="s5">Leituras complementares</h2>
              <p>
                Esta nota é parte da trilha introdutória do IBD. Continue com:
              </p>
              <ul>
                <li><a href="#/post/hedge-cafe-arabica" className="link">Hedge de safra: produtor de café arábica em MG</a></li>
                <li><a href="#/post/opcoes-europeias-vs-americanas" className="link">Opções europeias vs. americanas</a></li>
                <li><a href="#/aula/intro-derivativos" className="link">Vídeo-aula: introdução aos derivativos</a></li>
              </ul>

              <div className="notice notice-warn" style={{marginTop: 'var(--s-7)'}}>
                <div>
                  <strong>Aviso editorial — IBD.</strong> Este material tem finalidade exclusivamente
                  educacional. Não constitui recomendação de investimento. Operações com derivativos
                  envolvem riscos significativos, podendo levar a perdas superiores ao capital aportado.
                </div>
              </div>
            </div>

            <aside className="article-aside" style={{position: 'sticky', top: 100, alignSelf: 'start'}}>
              <div className="panel" style={{padding: 'var(--s-4)'}}>
                <div className="eyebrow" style={{fontSize: 10, marginBottom: 'var(--s-3)'}}>Ferramenta relacionada</div>
                <div style={{fontFamily: 'var(--font-serif)', fontSize: 'var(--step-1)', marginBottom: 'var(--s-2)'}}>
                  Calculadora Black-Scholes
                </div>
                <p style={{fontSize: 12, color: 'var(--fg-muted)', margin: 0}}>
                  Calcule prêmio e gregas de opções europeias.
                </p>
                <Link to="/ferramentas/black-scholes" className="btn btn-ghost btn-sm" style={{marginTop: 'var(--s-3)', width: '100%', justifyContent: 'center'}}>Abrir</Link>
              </div>
              <div className="panel" style={{padding: 'var(--s-4)', marginTop: 'var(--s-4)'}}>
                <div className="eyebrow" style={{fontSize: 10, marginBottom: 'var(--s-3)'}}>Conteúdo da trilha</div>
                <div style={{fontSize: 13, lineHeight: 1.7}}>
                  <div style={{color: 'var(--accent)'}}>1. O que são derivativos</div>
                  <div style={{color: 'var(--fg-muted)'}}>2. Mercado a termo</div>
                  <div style={{color: 'var(--fg-muted)'}}>3. Mercado futuro</div>
                  <div style={{color: 'var(--fg-muted)'}}>4. Opções básicas</div>
                  <div style={{color: 'var(--fg-muted)'}}>5. Swaps</div>
                </div>
              </div>
            </aside>
          </div>
        </section>
      </article>
    </Page>
  );
}

window.PostPage = PostPage;