/* ============================================================
   Home — Landing page for Instituto Brasileiro de Derivativos
   ============================================================ */

function HomePage() {
  return (
    <Page>
      <HomeHero />
      <HomeMission />
      <HomeFeaturedContent />
      <HomeTools />
      <HomeStats />
      <HomeFaculty />
      <HomeCTA />
    </Page>
  );
}

function HomeHero() {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="eyebrow eyebrow-accent" style={{marginBottom: 'var(--s-5)'}}>
              · Fundado em 2026 · São Paulo · Brasil
            </div>
            <h1>
              Educação técnica e independente em <em>derivativos</em>, para todo o Brasil.
            </h1>
            <p className="hero-lede">
              O Instituto Brasileiro de Derivativos reúne conteúdos, vídeo-aulas e
              ferramentas analíticas sobre os mercados derivativos brasileiros — financeiros,
              agropecuários, de commodities, energia e clima.
            </p>
            <div className="hero-actions">
              <Link to="/biblioteca" className="btn">Explorar a biblioteca <span className="icon-arrow"></span></Link>
              <Link to="/ferramentas/black-scholes" className="btn btn-ghost">Abrir ferramentas</Link>
            </div>
          </div>
          <dl className="hero-meta">
            <div>
              <dt>Missão</dt>
              <dd>Difundir o conhecimento técnico sobre derivativos no Brasil.</dd>
            </div>
            <div>
              <dt>Natureza</dt>
              <dd>Instituto educativo, sem fins lucrativos, com acesso aberto.</dd>
            </div>
            <div>
              <dt>Linhas de atuação</dt>
              <dd>Educação · Pesquisa aplicada · Ferramentas abertas</dd>
            </div>
          </dl>
        </div>
      </div>
    </section>
  );
}

function HomeMission() {
  return (
    <section className="section section-tight">
      <div className="container">
        <div style={{display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 'var(--s-7)', alignItems: 'start'}}>
          <div>
            <div className="eyebrow">Manifesto</div>
            <hr className="rule rule-strong" style={{margin: '12px 0 0', width: 40}} />
          </div>
          <div className="article-body" style={{maxWidth: '64ch'}}>
            <p>
              Derivativos são, antes de tudo, instrumentos de transferência de risco —
              componentes essenciais da arquitetura financeira de qualquer economia
              minimamente sofisticada. No Brasil, o tema é ainda mal compreendido,
              ensinado de forma desigual e mediado, com frequência, por interesses
              comerciais.
            </p>
            <p>
              O <strong>IBD</strong> nasce para preencher essa lacuna. Acreditamos que
              compreender derivativos não deve ser privilégio de quem trabalha em mesa
              de operações ou cursou um MBA. Produtores rurais, estudantes, investidores
              pessoa física, jornalistas econômicos e legisladores também precisam
              dessa alfabetização.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeFeaturedContent() {
  const items = [
    { tag: 'Conceito', slug: 'o-que-sao-derivativos', title: 'O que são derivativos, afinal?',
      desc: 'Uma definição rigorosa, partindo do conceito de contrato a termo e construindo até os contratos exóticos.',
      meta: ['12 min de leitura', 'Iniciante'] },
    { tag: 'Caso prático', slug: 'hedge-cafe-arabica', title: 'Hedge de safra: produtor de café arábica em Minas Gerais',
      desc: 'Como um produtor estrutura proteção contra queda de preço usando contratos futuros e opções de venda na B3.',
      meta: ['18 min · Caso', 'Agro'] },
    { tag: 'Análise', slug: 'cupom-cambial-2026', title: 'O cupom cambial e a estrutura a termo da curva de juros em dólar',
      desc: 'Como o mercado precifica o diferencial de juros via DDI, FRC e a curva de cupom cambial.',
      meta: ['25 min · Análise', 'Avançado'] },
  ];
  return (
    <section className="section section-sunken">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Em destaque</div>
            <h2>Leituras escolhidas pela editoria</h2>
          </div>
          <div className="section-head-actions">
            <Link to="/biblioteca" className="btn-text">Ver biblioteca completa <span className="icon-arrow"></span></Link>
          </div>
        </div>
        <div className="card-grid">
          {items.map(it => (
            <Link key={it.slug} to={'/post/' + it.slug} className="card">
              <div className="card-tag">{it.tag}</div>
              <h3>{it.title}</h3>
              <div className="card-desc">{it.desc}</div>
              <div className="card-meta">
                {it.meta.map(m => <span key={m}>{m}</span>)}
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeTools() {
  const tools = [
    {
      to: '/ferramentas/black-scholes',
      tag: 'Pricing',
      title: 'Calculadora Black-Scholes',
      desc: 'Calcule prêmio e gregas de calls e puts europeias com dividendo contínuo. Análise de sensibilidade integrada.',
      sample: { left: 'Prêmio call', right: 'R$ 4,28', sub: 'Δ 0,612 · Γ 0,024 · Vega 0,182' }
    },
    {
      to: '/ferramentas/payoff',
      tag: 'Estratégia',
      title: 'Diagrama de Payoff',
      desc: 'Componha estratégias com múltiplas pernas — collars, spreads, condors, butterflies — e veja o resultado no vencimento.',
      sample: { left: 'Bull call spread', right: '+R$ 320 / −R$ 180', sub: 'Breakeven 64,80 · Max em K₂ 70,00' }
    },
    {
      to: '/ferramentas/futuros',
      tag: 'Simulação',
      title: 'Simulador de Futuros',
      desc: 'Backtest do fluxo financeiro diário de contratos futuros, com ajustes diários, margem inicial e chamadas de margem.',
      sample: { left: 'P&L 30 dias', right: '+R$ 12.480', sub: '2 chamadas de margem · ROI margem 8,3%' }
    },
  ];
  return (
    <section className="section section-dark">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Ferramentas abertas</div>
            <h2>Análise quantitativa, sem caixa-preta.</h2>
          </div>
          <div className="section-head-actions" style={{color: 'var(--primary-fg)', opacity: 0.7, fontSize: 13, maxWidth: 360, textAlign: 'right'}}>
            Todas as fórmulas são documentadas. Você pode auditar a matemática, repetir os cálculos e adaptá-los ao seu uso.
          </div>
        </div>
        <div className="card-grid" style={{'--rule': 'rgba(255,255,255,0.14)', '--bg-elev': 'rgba(255,255,255,0.04)', '--fg-muted': 'rgba(236,228,210,0.6)'}}>
          {tools.map(t => (
            <Link key={t.to} to={t.to} className="card" style={{color: 'var(--primary-fg)', borderColor: 'rgba(255,255,255,0.14)', background: 'rgba(255,255,255,0.04)'}}>
              <div className="card-tag">{t.tag}</div>
              <h3 style={{color: 'var(--primary-fg)'}}>{t.title}</h3>
              <div className="card-desc" style={{color: 'rgba(236,228,210,0.7)'}}>{t.desc}</div>
              <div style={{marginTop: 'auto', paddingTop: 'var(--s-4)', borderTop: '1px solid rgba(255,255,255,0.14)'}}>
                <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'baseline'}}>
                  <span style={{fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', opacity: 0.6}}>{t.sample.left}</span>
                  <span className="mono" style={{fontSize: 17, color: 'var(--accent)'}}>{t.sample.right}</span>
                </div>
                <div className="mono" style={{fontSize: 11, opacity: 0.5, marginTop: 4}}>{t.sample.sub}</div>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeStats() {
  const stats = [
    { label: 'Conteúdos publicados', value: '146', sub: 'Posts, vídeo-aulas e notas técnicas' },
    { label: 'Trilhas de estudo', value: '8', sub: 'Do básico ao quantitativo aplicado' },
    { label: 'Ferramentas abertas', value: '3', sub: 'Pricing · Payoff · Futuros' },
    { label: 'Atualização editorial', value: 'Semanal', sub: 'Curadoria por especialistas convidados' },
  ];
  return (
    <section className="section section-tight">
      <div className="container">
        <div className="card-grid card-grid-4" style={{gap: 0}}>
          {stats.map(s => (
            <div key={s.label} className="metric" style={{padding: 'var(--s-6) var(--s-5) var(--s-6) 0', borderRight: '1px solid var(--rule)'}}>
              <div className="metric-label">{s.label}</div>
              <div className="metric-value">{s.value}</div>
              <div className="metric-sub">{s.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeFaculty() {
  const themes = [
    'Mercados de juros — DI, DDI, FRC, swap',
    'Câmbio — DOL, WDO, NDF, opções de USD/BRL',
    'Renda variável — índice, opções sobre ações',
    'Agropecuário — café, milho, soja, boi, açúcar',
    'Energia — eletricidade, gás, derivativos de carbono',
    'Crédito — CDS, derivativos estruturados',
    'Clima — temperatura, precipitação, vento',
    'Quant — modelos de volatilidade, calibração',
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Áreas temáticas</div>
            <h2>Cobertura abrangente dos mercados derivativos.</h2>
          </div>
        </div>
        <div style={{display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, borderTop: '1px solid var(--rule-strong)'}}>
          {themes.map((t, i) => (
            <div key={t} style={{
              padding: 'var(--s-5) 0',
              borderBottom: '1px solid var(--rule)',
              borderRight: i % 2 === 0 ? '1px solid var(--rule)' : 'none',
              paddingLeft: i % 2 === 1 ? 'var(--s-6)' : 0,
              paddingRight: i % 2 === 0 ? 'var(--s-6)' : 0,
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              fontFamily: 'var(--font-serif)',
              fontSize: 'var(--step-2)'
            }}>
              <span>
                <span className="mono" style={{color: 'var(--fg-subtle)', fontSize: 11, marginRight: 'var(--s-3)'}}>
                  {String(i+1).padStart(2,'0')}
                </span>
                {t}
              </span>
              <span style={{color: 'var(--accent)', fontSize: 14, fontFamily: 'var(--font-serif)'}}>→</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeCTA() {
  return (
    <section className="section section-sunken">
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.4fr 1fr',
          gap: 'var(--s-7)',
          alignItems: 'center'
        }}>
          <div>
            <div className="eyebrow eyebrow-accent">Cadastre-se gratuitamente</div>
            <h2 style={{fontSize: 'clamp(1.75rem, 3vw, 2.5rem)', marginTop: 'var(--s-3)', fontWeight: 400}}>
              Acompanhe o instituto e tenha acesso ao histórico de leitura, vídeo-aulas e ferramentas salvas.
            </h2>
            <div style={{marginTop: 'var(--s-5)', display: 'flex', gap: 'var(--s-3)'}}>
              <Link to="/cadastro" className="btn btn-lg">Criar conta gratuita</Link>
              <Link to="/sobre" className="btn btn-ghost btn-lg">Sobre o IBD</Link>
            </div>
          </div>
          <div style={{
            background: 'var(--bg-elev)',
            border: '1px solid var(--rule)',
            padding: 'var(--s-5)',
            fontFamily: 'var(--font-mono)',
            fontSize: 12,
            lineHeight: 1.8,
            color: 'var(--fg-muted)'
          }}>
            <div style={{color: 'var(--accent)', marginBottom: 'var(--s-3)'}}>// O que está incluído</div>
            <div>✓ Acesso integral à biblioteca</div>
            <div>✓ Todas as vídeo-aulas</div>
            <div>✓ Ferramentas analíticas abertas</div>
            <div>✓ Salvamento de leituras e progresso</div>
            <div>✓ Newsletter editorial quinzenal</div>
            <div style={{color: 'var(--fg-subtle)', marginTop: 'var(--s-3)'}}>
              // Sem cartão de crédito · Sem cobrança
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.HomePage = HomePage;