/* ============================================================
   Vídeo-aula (lesson) page
   ============================================================ */

function AulaPage() {
  const { path } = useHashRoute();
  const slug = path.replace(/^\/aula\//, '');
  const [activeIdx, setActiveIdx] = useState(0);
  const [playing, setPlaying] = useState(false);

  const modules = [
    { num: 1, title: 'O que são derivativos', time: '28:14', done: true },
    { num: 2, title: 'Mercado a termo e contratos bilaterais', time: '24:08', done: true },
    { num: 3, title: 'Mercado futuro: padronização e ajustes diários', time: '32:40', done: false, active: true },
    { num: 4, title: 'Opções: prêmio, intrínseco e extrínseco', time: '38:22', done: false },
    { num: 5, title: 'Estratégias com opções: spreads, collars, straddles', time: '42:18', done: false },
    { num: 6, title: 'Swaps: a troca de fluxos no mercado brasileiro', time: '35:56', done: false },
    { num: 7, title: 'Hedge: usos práticos no agro e na indústria', time: '40:12', done: false },
    { num: 8, title: 'Síntese e estudo de casos', time: '52:30', done: false },
  ];

  return (
    <Page fullBleed>
      <div className="lesson-stage">
        <div className="lesson-main">
          <div className="crumb" style={{marginBottom: 'var(--s-4)'}}>
            <a href="#/">Início</a>
            <span className="crumb-sep"></span>
            <a href="#/biblioteca">Biblioteca</a>
            <span className="crumb-sep"></span>
            <a href="#/biblioteca?tipo=Aula">Vídeo-aulas</a>
            <span className="crumb-sep"></span>
            <span>Trilha introdutória</span>
          </div>

          <div className="eyebrow eyebrow-accent">Aula 3 de 8 · Trilha Fundamentos</div>
          <h1 style={{fontSize: 'clamp(1.5rem, 2.6vw, 2.25rem)', fontWeight: 400, letterSpacing: '-0.015em', marginTop: 'var(--s-2)', marginBottom: 'var(--s-5)'}}>
            Mercado futuro: padronização e ajustes diários
          </h1>

          <div className="video-stage" onClick={() => setPlaying(p => !p)} style={{cursor: 'pointer'}}>
            <div className="video-play"></div>
            <div style={{position: 'absolute', top: 16, left: 16, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', color: 'rgba(255,255,255,0.5)'}}>
              IBD · AULA 3 · 32:40
            </div>
            <div style={{position: 'absolute', bottom: 24, left: 16, right: 16, color: 'rgba(255,255,255,0.85)', fontFamily: 'var(--font-serif)', fontSize: 22, lineHeight: 1.2}}>
              "Quando o produtor vende um contrato futuro, ele não está se desfazendo da soja —<br/>
              está apenas travando o preço a que vai entregá-la."
            </div>
            <div className="scrubber"><div className="scrubber-fill"></div></div>
          </div>

          <div style={{display: 'flex', gap: 'var(--s-3)', marginTop: 'var(--s-4)', justifyContent: 'space-between', alignItems: 'center'}}>
            <div className="mono" style={{fontSize: 12, color: 'var(--fg-muted)'}}>
              09:08 / 32:40
            </div>
            <div style={{display: 'flex', gap: 'var(--s-3)'}}>
              <button className="btn btn-ghost btn-sm">Velocidade 1×</button>
              <button className="btn btn-ghost btn-sm">Legendas</button>
              <button className="btn btn-ghost btn-sm">Material da aula (PDF)</button>
            </div>
          </div>

          <div className="tabs" style={{marginTop: 'var(--s-7)'}}>
            <button className="tab active">Sobre esta aula</button>
            <button className="tab">Transcrição</button>
            <button className="tab">Anotações</button>
            <button className="tab">Recursos</button>
          </div>

          <div style={{display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 'var(--s-7)'}}>
            <div className="article-body" style={{fontSize: 17, maxWidth: '60ch'}}>
              <p>
                Nesta aula construímos o conceito de <strong>mercado futuro</strong> a partir do
                contrato a termo, mostrando como a padronização contratual e o sistema de
                ajustes diários transformaram um instrumento bilateral medieval em um mercado
                líquido de escala global.
              </p>
              <p>
                Tópicos cobertos: padronização (vencimento, lote, qualidade), mecanismo de
                margem inicial e mantenedora, ajuste diário (mark-to-market), liquidação no
                vencimento (física vs. financeira) e o papel da contraparte central.
              </p>
              <p>
                Ao final, simulamos numericamente o fluxo financeiro completo de uma operação
                comprada em mini-contrato de dólar (WDO), incluindo chamadas de margem em
                cenários adversos.
              </p>
            </div>
            <div>
              <div className="eyebrow" style={{fontSize: 10, marginBottom: 'var(--s-3)'}}>Marcadores</div>
              <ol style={{listStyle: 'none', padding: 0, margin: 0, fontSize: 13}}>
                {[
                  ['00:00', 'Abertura'],
                  ['02:14', 'Do termo ao futuro'],
                  ['08:32', 'Padronização contratual'],
                  ['14:18', 'Margem e ajuste diário'],
                  ['22:40', 'Exemplo numérico — WDO'],
                  ['28:12', 'Síntese'],
                ].map(([t, l]) => (
                  <li key={t} style={{display: 'grid', gridTemplateColumns: '64px 1fr', gap: 'var(--s-3)', padding: 'var(--s-3) 0', borderTop: '1px solid var(--rule)'}}>
                    <span className="mono" style={{color: 'var(--accent)'}}>{t}</span>
                    <span>{l}</span>
                  </li>
                ))}
              </ol>
            </div>
          </div>
        </div>

        <aside className="lesson-side">
          <div className="eyebrow" style={{fontSize: 10}}>Trilha</div>
          <h3 style={{fontFamily: 'var(--font-serif)', fontSize: 'var(--step-2)', fontWeight: 500, marginTop: 'var(--s-2)', marginBottom: 'var(--s-2)'}}>
            Fundamentos de derivativos
          </h3>
          <div style={{marginBottom: 'var(--s-5)'}}>
            <div className="mono" style={{fontSize: 11, color: 'var(--fg-muted)', marginBottom: 4}}>2 de 8 concluídas · 25%</div>
            <div className="bar"><div className="bar-fill" style={{width: '25%'}}></div></div>
          </div>

          <ul className="module-list">
            {modules.map((m, i) => (
              <li key={m.num} className={'module-item' + (m.active ? ' active' : '')} onClick={() => setActiveIdx(i)}>
                <span className="module-num">{String(m.num).padStart(2,'0')}</span>
                <span style={{textDecoration: m.done ? 'line-through' : 'none', color: m.done ? 'var(--fg-muted)' : (m.active ? 'var(--primary)' : 'var(--fg)')}}>{m.title}</span>
                <span className="module-time">{m.time}</span>
              </li>
            ))}
          </ul>

          <div style={{display: 'flex', gap: 'var(--s-3)', marginTop: 'var(--s-5)'}}>
            <button className="btn btn-ghost btn-sm" style={{flex: 1}}>← Anterior</button>
            <button className="btn btn-sm" style={{flex: 1}}>Próxima aula →</button>
          </div>
        </aside>
      </div>
    </Page>
  );
}

window.AulaPage = AulaPage;