/* Área do Aluno — telas adicionais: Aulas list, Aula page, Dúvidas feed, Certificado, Perfil, Mentoria */

function AulasList({ user, onOpenAula }) {
  const [modAberto, setModAberto] = React.useState('m1');
  const [busca, setBusca] = React.useState('');
  const concluidas = FC_AULAS_CONCLUIDAS[user.id] || [];

  return (
    <div className="fc-stack fc-gap-6">
      <div>
        <div className="fc-h1">Todas as aulas</div>
        <div className="fc-body" style={{ color: 'var(--fc-gray-600)', marginTop: 6 }}>
          36 aulas + 3 bônus, distribuídos em 4 módulos. Marque como concluída ao terminar cada uma.
        </div>
      </div>

      <div style={{ position: 'relative', maxWidth: 420 }}>
        <I.search size={16} style={{ position: 'absolute', left: 14, top: 13, color: 'var(--fc-gray-500)' }} />
        <input className="fc-input" style={{ paddingLeft: 38 }} placeholder="Buscar aula por título…" value={busca} onChange={e => setBusca(e.target.value)} />
      </div>

      {FC_MODULOS.map(m => {
        const aulas = FC_AULAS.filter(a => a.modulo === m.id && a.titulo.toLowerCase().includes(busca.toLowerCase()));
        const concMod = aulas.filter(a => concluidas.includes(a.id)).length;
        const bloqueado = m.bloqueadoDiasApos > 0 && user.diasDesdeCadastro < m.bloqueadoDiasApos;
        const diasFalt = bloqueado ? m.bloqueadoDiasApos - user.diasDesdeCadastro : 0;
        const aberto = modAberto === m.id;
        if (busca && aulas.length === 0) return null;

        return (
          <Card key={m.id} style={{ padding: 0, overflow: 'hidden' }}>
            <div style={{ padding: '18px 24px', display: 'flex', alignItems: 'center', gap: 16, cursor: 'pointer' }} onClick={() => setModAberto(aberto ? null : m.id)}>
              <div style={{
                width: 42, height: 42, borderRadius: 10,
                background: bloqueado ? 'var(--fc-gray-200)' : 'linear-gradient(135deg, var(--fc-azul-profundo), var(--fc-azul-medio))',
                color: bloqueado ? 'var(--fc-gray-500)' : 'var(--fc-dourado)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontWeight: 700, fontSize: 16,
              }}>
                {bloqueado ? <I.lock size={18} /> : m.numero}
              </div>
              <div style={{ flex: 1 }}>
                <div className="fc-h3" style={{ margin: 0 }}>{m.nome}</div>
                <div className="fc-small" style={{ marginTop: 2 }}>
                  {aulas.length} aulas · {concMod} concluídas
                  {bloqueado && <span style={{ color: 'var(--fc-warning)', marginLeft: 10, fontWeight: 600 }}>🔒 Libera em {diasFalt} dia{diasFalt > 1 ? 's' : ''}</span>}
                </div>
              </div>
              <div style={{ width: 120 }}>
                <Progress value={Math.round((concMod / aulas.length) * 100)} size="xs" />
              </div>
              {aberto ? <I.chevronUp size={20} /> : <I.chevronDown size={20} />}
            </div>
            {aberto && (
              <div style={{ borderTop: '1px solid var(--fc-gray-200)' }}>
                {aulas.map(a => {
                  const feita = concluidas.includes(a.id);
                  return (
                    <div key={a.id} onClick={() => !bloqueado && onOpenAula(a.id)} style={{
                      display: 'flex', alignItems: 'center', gap: 14, padding: '14px 24px',
                      borderBottom: '1px solid var(--fc-gray-100)',
                      cursor: bloqueado ? 'not-allowed' : 'pointer',
                      opacity: bloqueado ? 0.55 : 1,
                    }} onMouseEnter={e => !bloqueado && (e.currentTarget.style.background = 'var(--fc-gray-50)')}
                       onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                      <div style={{
                        width: 24, height: 24, borderRadius: '50%',
                        border: '2px solid ' + (feita ? 'var(--fc-dourado)' : 'var(--fc-gray-300)'),
                        background: feita ? 'var(--fc-dourado)' : 'transparent',
                        color: feita ? 'var(--fc-azul-profundo)' : 'transparent',
                        display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                      }}>
                        {feita && <I.check size={14} stroke={3} />}
                      </div>
                      <div style={{ minWidth: 56, fontSize: 13, fontWeight: 600, color: 'var(--fc-gray-500)', letterSpacing: '0.04em' }}>
                        {a.tipo === 'bonus' ? '⭐' : a.num}
                      </div>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--fc-gray-800)' }}>{a.titulo}</div>
                        <div className="fc-caption" style={{ marginTop: 2 }}>{a.duracao}</div>
                      </div>
                      {bloqueado ? <I.lock size={16} style={{ color: 'var(--fc-gray-400)' }} /> : <I.chevronRight size={16} style={{ color: 'var(--fc-gray-400)' }} />}
                    </div>
                  );
                })}
              </div>
            )}
          </Card>
        );
      })}
    </div>
  );
}

// ============ AULA PAGE ============
function AulaPage({ aulaId, user, onOpenAula, onBack }) {
  const aula = FC_AULAS.find(a => a.id === aulaId) || FC_AULAS[0];
  const modulo = FC_MODULOS.find(m => m.id === aula.modulo);
  const idxAtual = FC_AULAS.findIndex(a => a.id === aula.id);
  const prev = idxAtual > 0 ? FC_AULAS[idxAtual - 1] : null;
  const next = idxAtual < FC_AULAS.length - 1 ? FC_AULAS[idxAtual + 1] : null;
  const [tab, setTab] = React.useState('material');
  const [notas, setNotas] = React.useState('');
  const [modalDuvida, setModalDuvida] = React.useState(false);
  const [duvidaTexto, setDuvidaTexto] = React.useState('');
  const [duvidaPublica, setDuvidaPublica] = React.useState(true);
  const [concluida, setConcluida] = React.useState((FC_AULAS_CONCLUIDAS[user.id] || []).includes(aula.id));
  const toast = useToast();

  const materiais = FC_MATERIAIS[aula.id] || [
    { tipo: 'pdf', nome: 'Material da aula — PDF', tamanho: '1.2 MB' },
    { tipo: 'pdf', nome: 'Lista de exercícios', tamanho: '580 KB' },
  ];
  const duvidasAula = FC_DUVIDAS.filter(d => d.aulaId === aula.id && (d.publica || d.autorId === 'al01'));
  const questoesAula = FC_QUESTOES.filter(q => q.aulaId === aula.id);
  const aulasModulo = FC_AULAS.filter(a => a.modulo === aula.modulo);
  const concluidas = FC_AULAS_CONCLUIDAS[user.id] || [];

  const marcarConcluida = () => {
    setConcluida(true);
    toast('Aula concluída! +50 XP', { gold: true, icon: I.checkCircle });
  };
  const enviarDuvida = () => {
    setModalDuvida(false);
    setDuvidaTexto('');
    toast(duvidaPublica ? 'Dúvida enviada. Fica visível pros colegas.' : 'Dúvida enviada em modo privado.');
  };

  return (
    <div className="fc-stack fc-gap-6">
      {/* Breadcrumb */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--fc-gray-600)', fontSize: 13 }}>
        <span style={{ cursor: 'pointer' }} onClick={onBack}>Aulas</span>
        <I.chevronRight size={12} />
        <span>Módulo {modulo.numero} — {modulo.nome}</span>
        <I.chevronRight size={12} />
        <span style={{ color: 'var(--fc-azul-profundo)', fontWeight: 600 }}>Aula {aula.num}</span>
      </div>

      {/* Grid 2fr | 1fr */}
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 24, alignItems: 'start' }}>
        {/* LEFT */}
        <div className="fc-stack fc-gap-4">
          <VideoPlayer aulaTitulo={aula.titulo} email={user.email} />

          {/* Tabs */}
          <div>
            <div className="fc-tabs">
              <button className={'fc-tab' + (tab === 'material' ? ' active' : '')} onClick={() => setTab('material')}>
                <I.file size={14} /> Material <span className="fc-tab-count">{materiais.length}</span>
              </button>
              <button className={'fc-tab' + (tab === 'questoes' ? ' active' : '')} onClick={() => setTab('questoes')}>
                <I.check size={14} /> Questões <span className="fc-tab-count">{questoesAula.length}</span>
              </button>
              <button className={'fc-tab' + (tab === 'duvidas' ? ' active' : '')} onClick={() => setTab('duvidas')}>
                <I.chat size={14} /> Dúvidas <span className="fc-tab-count">{duvidasAula.length}</span>
              </button>
              <button className={'fc-tab' + (tab === 'notas' ? ' active' : '')} onClick={() => setTab('notas')}>
                <I.edit size={14} /> Notas pessoais
              </button>
            </div>

            <div style={{ padding: '20px 0' }}>
              {tab === 'material' && (
                <div className="fc-stack fc-gap-2">
                  {materiais.map((m, i) => (
                    <div key={i} style={{
                      display: 'flex', alignItems: 'center', gap: 14, padding: '14px 16px',
                      background: 'var(--fc-white)', border: '1px solid var(--fc-gray-200)', borderRadius: 8,
                    }}>
                      <div style={{
                        width: 36, height: 36, borderRadius: 8,
                        background: m.tipo === 'pdf' ? 'var(--fc-error-bg)' : m.tipo === 'link' ? 'var(--fc-info-bg)' : 'var(--fc-cream-deep)',
                        color: m.tipo === 'pdf' ? 'var(--fc-error)' : m.tipo === 'link' ? 'var(--fc-azul-medio)' : 'var(--fc-dourado-escuro)',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                      }}>
                        {m.tipo === 'pdf' ? <I.filePdf size={18} /> : m.tipo === 'link' ? <I.link size={18} /> : <I.text size={18} />}
                      </div>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontSize: 14, fontWeight: 500 }}>{m.nome}</div>
                        <div className="fc-caption" style={{ marginTop: 2 }}>
                          {m.tamanho || m.url || 'Texto inline'}
                        </div>
                      </div>
                      <button className="fc-btn fc-btn-secondary fc-btn-sm">
                        {m.tipo === 'link' ? <><I.external size={14} /> Abrir</> : <><I.download size={14} /> Baixar</>}
                      </button>
                    </div>
                  ))}
                </div>
              )}

              {tab === 'questoes' && (
                questoesAula.length === 0 ? <EmptyState icon={I.check} title="Sem questões cadastradas ainda" description="O professor adicionará questões em breve para reforçar esta aula." />
                : <QuestoesLista questoes={questoesAula} />
              )}

              {tab === 'duvidas' && (
                <div className="fc-stack fc-gap-3">
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <div className="fc-small">
                      {duvidasAula.filter(d => d.resposta).length} dúvidas respondidas pelo professor nesta aula
                    </div>
                    <button className="fc-btn fc-btn-primary fc-btn-sm" onClick={() => setModalDuvida(true)}>
                      <I.plus size={14} /> Tirar uma dúvida
                    </button>
                  </div>
                  {duvidasAula.length === 0 ? (
                    <EmptyState icon={I.chat} title="Nenhuma dúvida ainda" description="Seja o primeiro a perguntar. Dúvidas públicas ajudam outros alunos e geram base de conhecimento." />
                  ) : duvidasAula.map(d => <DuvidaItem key={d.id} duvida={d} />)}
                </div>
              )}

              {tab === 'notas' && (
                <div>
                  <div className="fc-small" style={{ marginBottom: 10 }}>
                    Suas anotações são privadas. Usadas só por você para esta aula.
                  </div>
                  <textarea className="fc-textarea" style={{ minHeight: 220 }} placeholder="Anote aqui seus insights, pegadinhas, pontos de revisão…" value={notas} onChange={e => setNotas(e.target.value)} />
                  <button className="fc-btn fc-btn-secondary fc-btn-sm" style={{ marginTop: 10 }}>
                    <I.save size={14} /> Salvar notas
                  </button>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* RIGHT */}
        <div className="fc-stack fc-gap-4">
          <Card>
            <div className="fc-overline" style={{ color: 'var(--fc-dourado-escuro)' }}>
              Módulo {modulo.numero} · Aula {aula.num}
            </div>
            <div className="fc-h3" style={{ marginTop: 8, marginBottom: 14 }}>{aula.titulo}</div>

            {concluida ? (
              <button className="fc-btn fc-btn-block" style={{ background: 'var(--fc-success-bg)', color: 'var(--fc-success)' }}>
                <I.checkCircle size={16} /> Concluída
              </button>
            ) : (
              <button className="fc-btn fc-btn-primary fc-btn-block" onClick={marcarConcluida}>
                <I.check size={16} /> Marcar como concluída
              </button>
            )}

            <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
              <button disabled={!prev} onClick={() => prev && onOpenAula(prev.id)}
                className="fc-btn fc-btn-secondary fc-btn-sm" style={{ flex: 1, opacity: prev ? 1 : 0.4 }}>
                <I.chevronLeft size={14} /> Anterior
              </button>
              <button disabled={!next} onClick={() => next && onOpenAula(next.id)}
                className="fc-btn fc-btn-secondary fc-btn-sm" style={{ flex: 1, opacity: next ? 1 : 0.4 }}>
                Próxima <I.chevronRight size={14} />
              </button>
            </div>
          </Card>

          <Card>
            <div className="fc-overline" style={{ marginBottom: 12 }}>Aulas deste módulo</div>
            <div className="fc-stack" style={{ gap: 4 }}>
              {aulasModulo.map(a => {
                const feita = concluidas.includes(a.id);
                const isAtual = a.id === aula.id;
                return (
                  <div key={a.id} onClick={() => onOpenAula(a.id)} style={{
                    display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px',
                    borderRadius: 6, cursor: 'pointer',
                    background: isAtual ? 'var(--fc-cream)' : 'transparent',
                    borderLeft: isAtual ? '3px solid var(--fc-dourado)' : '3px solid transparent',
                  }}>
                    <div style={{
                      width: 18, height: 18, borderRadius: '50%',
                      border: '2px solid ' + (feita ? 'var(--fc-dourado)' : 'var(--fc-gray-300)'),
                      background: feita ? 'var(--fc-dourado)' : 'transparent',
                      display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                    }}>
                      {feita && <I.check size={11} stroke={3} style={{ color: '#1B2A4A' }} />}
                    </div>
                    <div style={{ minWidth: 34, fontSize: 11, fontWeight: 600, color: 'var(--fc-gray-500)' }}>{a.num}</div>
                    <div style={{ fontSize: 13, color: isAtual ? 'var(--fc-azul-profundo)' : 'var(--fc-gray-700)', fontWeight: isAtual ? 600 : 400, flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                      {a.titulo}
                    </div>
                  </div>
                );
              })}
            </div>
          </Card>
        </div>
      </div>

      {/* Modal dúvida */}
      <Modal open={modalDuvida} onClose={() => setModalDuvida(false)} title="Tirar uma dúvida"
        footer={<>
          <button className="fc-btn fc-btn-ghost" onClick={() => setModalDuvida(false)}>Cancelar</button>
          <button className="fc-btn fc-btn-primary" disabled={!duvidaTexto.trim()} onClick={enviarDuvida}>
            <I.send size={14} /> Enviar dúvida
          </button>
        </>}>
        <div className="fc-small" style={{ marginBottom: 10 }}>
          Sobre a aula: <strong>{aula.titulo}</strong>
        </div>
        <textarea className="fc-textarea" placeholder="Escreva sua dúvida com o máximo de detalhes…" value={duvidaTexto} onChange={e => setDuvidaTexto(e.target.value)} style={{ minHeight: 140 }} />
        <div style={{ marginTop: 16, padding: 14, background: 'var(--fc-gray-50)', borderRadius: 8 }}>
          <label style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}>
            <div style={{
              width: 38, height: 22, borderRadius: 11, position: 'relative',
              background: duvidaPublica ? 'var(--fc-dourado)' : 'var(--fc-gray-300)',
              transition: 'all 180ms',
            }} onClick={() => setDuvidaPublica(!duvidaPublica)}>
              <div style={{
                width: 18, height: 18, borderRadius: '50%', background: 'white',
                position: 'absolute', top: 2, left: duvidaPublica ? 18 : 2,
                transition: 'all 180ms', boxShadow: '0 1px 3px rgba(0,0,0,0.15)',
              }} />
            </div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--fc-gray-800)' }}>
                {duvidaPublica ? 'Dúvida pública' : 'Dúvida privada'}
              </div>
              <div className="fc-caption" style={{ marginTop: 2 }}>
                {duvidaPublica
                  ? 'Outros alunos podem ver. Ajuda a turma e gera base de conhecimento.'
                  : 'Só o professor vê. Respondida direto pra você.'}
              </div>
            </div>
          </label>
        </div>
      </Modal>
    </div>
  );
}

function DuvidaItem({ duvida }) {
  return (
    <div style={{ padding: 16, background: 'var(--fc-white)', border: '1px solid var(--fc-gray-200)', borderRadius: 8 }}>
      <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 8 }}>
        <div className="fc-avatar" style={{ width: 28, height: 28, fontSize: 12, background: 'var(--fc-cream-deep)', color: 'var(--fc-azul-profundo)' }}>
          {duvida.autor.charAt(0)}
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 600 }}>{duvida.autor}</div>
          <div className="fc-caption">{new Date(duvida.data).toLocaleDateString('pt-BR')}</div>
        </div>
        {!duvida.publica && <Badge tone="gray">Privada</Badge>}
        {duvida.resposta && <Badge tone="green" icon={I.check}>Respondida</Badge>}
      </div>
      <div className="fc-body" style={{ color: 'var(--fc-gray-800)', marginBottom: duvida.resposta ? 12 : 0 }}>
        {duvida.pergunta}
      </div>
      {duvida.resposta && (
        <div style={{
          background: 'linear-gradient(135deg, var(--fc-cream), var(--fc-cream-deep))',
          borderLeft: '3px solid var(--fc-dourado)',
          padding: 14, borderRadius: 8, marginTop: 10,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
            <div className="fc-avatar" style={{ width: 28, height: 28, overflow: 'hidden' }}>
              <img src={FC_ASSETS.foto} alt="Prof. Vinícius Ferraz" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--fc-azul-profundo)' }}>Prof. Vinícius Ferraz</div>
          </div>
          <div className="fc-body" style={{ color: 'var(--fc-gray-800)' }}>{duvida.resposta}</div>
        </div>
      )}
    </div>
  );
}

function QuestoesLista({ questoes }) {
  const [reveladas, setReveladas] = React.useState({});
  const [respostas, setRespostas] = React.useState({});

  return (
    <div className="fc-stack fc-gap-4">
      {questoes.map((q, i) => (
        <div key={q.id} style={{ padding: 18, background: 'var(--fc-white)', border: '1px solid var(--fc-gray-200)', borderRadius: 8 }}>
          <div style={{ display: 'flex', gap: 8, marginBottom: 12, flexWrap: 'wrap' }}>
            <Badge tone="blue">Questão {i + 1}</Badge>
            <Badge tone="gray">{q.banca} · {q.ano}</Badge>
            <Badge tone={q.origem.startsWith('INÉDITA') ? 'gold' : 'gray'}>{q.origem}</Badge>
          </div>
          <div className="fc-body" style={{ color: 'var(--fc-gray-800)', marginBottom: 12 }}>{q.enunciado}</div>
          <div className="fc-stack fc-gap-2">
            {q.alternativas.map(a => {
              const escolhida = respostas[q.id] === a.letra;
              const revelado = reveladas[q.id];
              const isCorreta = a.letra === q.correta;
              const bg = !revelado ? (escolhida ? 'var(--fc-cream)' : 'var(--fc-white)')
                         : isCorreta ? 'var(--fc-success-bg)'
                         : escolhida ? 'var(--fc-error-bg)' : 'var(--fc-white)';
              const border = !revelado ? (escolhida ? 'var(--fc-dourado)' : 'var(--fc-gray-200)')
                            : isCorreta ? 'var(--fc-success)'
                            : escolhida ? 'var(--fc-error)' : 'var(--fc-gray-200)';
              return (
                <div key={a.letra} onClick={() => !revelado && setRespostas({ ...respostas, [q.id]: a.letra })}
                  style={{ padding: '10px 14px', background: bg, border: '1px solid ' + border, borderRadius: 6, cursor: 'pointer', display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                  <div style={{ fontWeight: 700, color: 'var(--fc-azul-profundo)' }}>{a.letra}.</div>
                  <div style={{ flex: 1, fontSize: 14 }}>{a.texto}</div>
                  {revelado && isCorreta && <I.checkCircle size={18} style={{ color: 'var(--fc-success)' }} />}
                </div>
              );
            })}
          </div>
          <button className="fc-btn fc-btn-secondary fc-btn-sm" style={{ marginTop: 12 }} onClick={() => setReveladas({ ...reveladas, [q.id]: !reveladas[q.id] })}>
            {reveladas[q.id] ? 'Ocultar gabarito' : 'Ver gabarito e comentário'}
          </button>
          {reveladas[q.id] && (
            <div style={{ marginTop: 12, padding: 14, background: 'var(--fc-cream)', borderLeft: '3px solid var(--fc-dourado)', borderRadius: 6 }}>
              <div className="fc-overline" style={{ marginBottom: 6 }}>Comentário do professor</div>
              <div className="fc-body" style={{ color: 'var(--fc-gray-800)' }}>{q.comentario}</div>
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

// ============ DÚVIDAS FEED GLOBAL ============
function DuvidasFeed({ user, onOpenAula }) {
  const [filtroMod, setFiltroMod] = React.useState('todos');
  const [filtroStatus, setFiltroStatus] = React.useState('todas');
  const [busca, setBusca] = React.useState('');

  const todas = FC_DUVIDAS.filter(d => d.publica);
  const filt = todas.filter(d => {
    const aula = FC_AULAS.find(a => a.id === d.aulaId);
    if (filtroMod !== 'todos' && aula?.modulo !== filtroMod) return false;
    if (filtroStatus === 'respondidas' && !d.resposta) return false;
    if (filtroStatus === 'pendentes' && d.resposta) return false;
    if (busca && !(d.pergunta.toLowerCase().includes(busca.toLowerCase()) || (d.resposta || '').toLowerCase().includes(busca.toLowerCase()))) return false;
    return true;
  });

  return (
    <div className="fc-stack fc-gap-6">
      <div>
        <div className="fc-h1">Feed de dúvidas da comunidade</div>
        <div className="fc-body" style={{ color: 'var(--fc-gray-600)', marginTop: 6 }}>
          Dúvidas públicas de todos os alunos. Buscar aqui antes de perguntar é meio caminho andado.
        </div>
      </div>

      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
        <div style={{ position: 'relative', flex: 1, minWidth: 240 }}>
          <I.search size={16} style={{ position: 'absolute', left: 14, top: 13, color: 'var(--fc-gray-500)' }} />
          <input className="fc-input" style={{ paddingLeft: 38 }} placeholder="Buscar na comunidade…" value={busca} onChange={e => setBusca(e.target.value)} />
        </div>
        <select className="fc-select" style={{ maxWidth: 200 }} value={filtroMod} onChange={e => setFiltroMod(e.target.value)}>
          <option value="todos">Todos os módulos</option>
          {FC_MODULOS.map(m => <option key={m.id} value={m.id}>Módulo {m.numero}: {m.nome}</option>)}
        </select>
        <select className="fc-select" style={{ maxWidth: 180 }} value={filtroStatus} onChange={e => setFiltroStatus(e.target.value)}>
          <option value="todas">Todas</option>
          <option value="respondidas">Respondidas</option>
          <option value="pendentes">Pendentes</option>
        </select>
      </div>

      <div className="fc-stack fc-gap-3">
        {filt.length === 0
          ? <EmptyState icon={I.chat} title="Nenhuma dúvida encontrada" description="Tente outros filtros ou faça uma nova pergunta dentro de uma aula." />
          : filt.map(d => {
            const aula = FC_AULAS.find(a => a.id === d.aulaId);
            return (
              <div key={d.id} onClick={() => aula && onOpenAula(aula.id)} style={{ cursor: 'pointer' }}>
                <Card>
                  <div style={{ fontSize: 12, color: 'var(--fc-dourado-escuro)', fontWeight: 600, marginBottom: 8, letterSpacing: '0.04em', textTransform: 'uppercase' }}>
                    Aula {aula?.num}: {aula?.titulo}
                  </div>
                  <DuvidaItem duvida={d} />
                </Card>
              </div>
            );
          })
        }
      </div>
    </div>
  );
}

// ============ CERTIFICADO ============
function Certificado({ user }) {
  const pct = user.progresso;
  const liberado = pct >= 100;

  if (!liberado) {
    return (
      <div className="fc-stack fc-gap-6">
        <div className="fc-h1">Seu certificado</div>
        <Card style={{ padding: 40, textAlign: 'center', maxWidth: 640, margin: '0 auto', width: '100%' }}>
          <div style={{ width: 80, height: 80, borderRadius: '50%', background: 'var(--fc-cream)', color: 'var(--fc-dourado-escuro)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
            <I.award size={36} />
          </div>
          <div className="fc-h2" style={{ marginBottom: 8 }}>Ainda não liberado</div>
          <div className="fc-body" style={{ color: 'var(--fc-gray-600)', marginBottom: 24 }}>
            Seu certificado é emitido quando você concluir 100% do curso. Já tá em <strong>{pct}%</strong> — continua firme.
          </div>
          <Progress value={pct} rightLabel={`${pct}%`} label="Progresso para o certificado" />
          <div className="fc-caption" style={{ marginTop: 14 }}>
            Faltam {Math.max(0, FC_AULAS.length - Math.round(FC_AULAS.length * pct / 100))} aulas.
          </div>
        </Card>
      </div>
    );
  }

  return (
    <div className="fc-stack fc-gap-6">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', flexWrap: 'wrap', gap: 10 }}>
        <div>
          <div className="fc-h1">Seu certificado</div>
          <div className="fc-body" style={{ color: 'var(--fc-gray-600)', marginTop: 6 }}>Curso concluído. Parabéns!</div>
        </div>
        <button className="fc-btn fc-btn-primary"><I.download size={14} /> Baixar PDF</button>
      </div>

      {/* Certificate artwork */}
      <div style={{
        background: 'var(--fc-azul-profundo)',
        color: 'var(--fc-white)',
        padding: 48,
        borderRadius: 'var(--fc-r-lg)',
        position: 'relative',
        overflow: 'hidden',
        aspectRatio: '1.41/1',
        display: 'flex', flexDirection: 'column',
      }}>
        {/* ornamental corners */}
        {['0 0','100% 0','100% 100%','0 100%'].map((pos, i) => (
          <div key={i} style={{
            position: 'absolute', [['top','top','bottom','bottom'][i]]: 24, [['left','right','right','left'][i]]: 24,
            width: 40, height: 40,
            borderTop: i < 2 ? '2px solid var(--fc-dourado)' : 'none',
            borderBottom: i >= 2 ? '2px solid var(--fc-dourado)' : 'none',
            borderLeft: (i === 0 || i === 3) ? '2px solid var(--fc-dourado)' : 'none',
            borderRight: (i === 1 || i === 2) ? '2px solid var(--fc-dourado)' : 'none',
          }} />
        ))}

        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 28 }}>
          <BrandLockup dark size="lg" />
        </div>

        <div style={{ textAlign: 'center', flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--fc-dourado)', marginBottom: 10, fontWeight: 600 }}>
            Certificado de conclusão
          </div>
          <div style={{ fontSize: 15, color: 'rgba(255,255,255,0.7)', marginBottom: 18 }}>
            Certificamos que
          </div>
          <div style={{ fontSize: 40, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--fc-white)', marginBottom: 18, fontFamily: "'Playfair Display', Georgia, serif" }}>
            {user.nome}
          </div>
          <div style={{ fontSize: 15, color: 'rgba(255,255,255,0.75)', maxWidth: 560, margin: '0 auto 20px', lineHeight: 1.6 }}>
            concluiu com aproveitamento o curso <strong style={{ color: 'var(--fc-dourado)' }}>Fluência Contábil</strong> — 36 aulas e 3 materiais bônus sobre contabilidade pública e privada para concursos.
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24, alignItems: 'flex-end', borderTop: '1px solid rgba(200,168,75,0.3)', paddingTop: 20 }}>
          <div>
            <div style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', marginBottom: 6 }}>Concluído em</div>
            <div style={{ fontSize: 14, fontWeight: 600 }}>{new Date().toLocaleDateString('pt-BR')}</div>
          </div>
          <div style={{ textAlign: 'center' }}>
            <div style={{ borderBottom: '1px solid rgba(200,168,75,0.5)', paddingBottom: 6, marginBottom: 6, fontFamily: "'Playfair Display', Georgia, serif", fontSize: 22, color: 'var(--fc-dourado)', fontStyle: 'italic' }}>
              Vinícius Ferraz
            </div>
            <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.6)' }}>Prof. Vinícius Ferraz · Auditor Fiscal</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', marginBottom: 6 }}>Código de verificação</div>
            <div style={{ fontFamily: 'var(--fc-font-mono)', fontSize: 12, color: 'var(--fc-dourado)' }}>FC-2026-A1B2-C3D4</div>
          </div>
        </div>
      </div>

      <div className="fc-small" style={{ textAlign: 'center' }}>
        Certificado válido. Verificável em fluenciacontabil.com.br/certificado/FC-2026-A1B2-C3D4
      </div>
    </div>
  );
}

// ============ PERFIL ============
function Perfil({ user }) {
  const [modalDel, setModalDel] = React.useState(false);
  return (
    <div className="fc-stack fc-gap-6" style={{ maxWidth: 720 }}>
      <div>
        <div className="fc-h1">Perfil</div>
        <div className="fc-body" style={{ color: 'var(--fc-gray-600)', marginTop: 6 }}>Seus dados, seu foco e suas configurações.</div>
      </div>

      <Card>
        <div className="fc-h3" style={{ marginBottom: 18 }}>Dados pessoais</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 20 }}>
          <div className="fc-avatar" style={{ width: 64, height: 64, fontSize: 24 }}>{user.primeiroNome.charAt(0)}</div>
          <div>
            <button className="fc-btn fc-btn-secondary fc-btn-sm"><I.upload size={14} /> Trocar foto</button>
            <div className="fc-caption" style={{ marginTop: 6 }}>JPG ou PNG · máx. 2 MB</div>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          <div>
            <label className="fc-label">Nome completo</label>
            <input className="fc-input" defaultValue={user.nome} />
          </div>
          <div>
            <label className="fc-label">E-mail <span style={{ color: 'var(--fc-gray-500)', fontWeight: 400 }}>(não editável)</span></label>
            <input className="fc-input" defaultValue={user.email} disabled style={{ background: 'var(--fc-gray-100)' }} />
          </div>
          <div style={{ gridColumn: 'span 2' }}>
            <label className="fc-label">Cidade / Estado</label>
            <input className="fc-input" defaultValue={user.cidade} />
          </div>
        </div>
      </Card>

      <Card style={{ background: 'linear-gradient(135deg, var(--fc-cream), var(--fc-cream-deep))', borderColor: 'rgba(200,168,75,0.35)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
          <I.target size={20} style={{ color: 'var(--fc-dourado-escuro)' }} />
          <div className="fc-h3" style={{ margin: 0 }}>Concurso focado</div>
        </div>
        <div className="fc-small" style={{ marginBottom: 14 }}>Tudo no seu painel (dicas, prioridades de conteúdo, aulas recomendadas) gira em torno desse foco.</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 12 }}>
          <select className="fc-select">
            <option>TCU 2026</option>
            <option>Receita Federal</option>
            <option>Senado Federal</option>
            <option>TCE-RJ</option>
            <option>TCE-MG</option>
            <option>SEFAZ-RJ</option>
            <option>CGU</option>
            <option>Outro (especificar)</option>
          </select>
          <input className="fc-input" placeholder="Ou digite o concurso específico…" defaultValue={user.concursoFocado} />
        </div>
      </Card>

      <Card>
        <div className="fc-h3" style={{ marginBottom: 18 }}>Plano</div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: 14, background: 'var(--fc-gray-50)', borderRadius: 8 }}>
          <div>
            <div style={{ fontWeight: 600, marginBottom: 2 }}>{user.planoLabel}</div>
            <div className="fc-small">Vence em {new Date(user.dataExpiracao).toLocaleDateString('pt-BR')} · R$ 247/mês equivalente</div>
          </div>
          {user.badgePremium && <Badge tone="gold" icon={I.sparkle}>Aluno Premium</Badge>}
        </div>
      </Card>

      <Card>
        <div className="fc-h3" style={{ marginBottom: 18 }}>Segurança</div>
        <button className="fc-btn fc-btn-secondary"><I.shield size={14} /> Trocar senha</button>
      </Card>

      <Card>
        <div className="fc-h3" style={{ marginBottom: 10, color: 'var(--fc-error)' }}>Zona de risco</div>
        <div className="fc-small" style={{ marginBottom: 14 }}>
          Ao solicitar exclusão da conta, seus dados serão removidos conforme a LGPD em até 30 dias. Progresso e certificados não são recuperáveis.
        </div>
        <button className="fc-btn fc-btn-danger" onClick={() => setModalDel(true)}>
          <I.trash size={14} /> Solicitar exclusão da conta
        </button>
      </Card>

      <Modal open={modalDel} onClose={() => setModalDel(false)} title="Confirmar exclusão da conta"
        footer={<>
          <button className="fc-btn fc-btn-ghost" onClick={() => setModalDel(false)}>Cancelar</button>
          <button className="fc-btn" style={{ background: 'var(--fc-error)', color: 'white' }}>Entendi, excluir mesmo assim</button>
        </>}>
        <div className="fc-body">
          Isso vai apagar definitivamente seu progresso, suas notas pessoais e seus dados. Se você tem certificado emitido, faça o download antes.
        </div>
      </Modal>
    </div>
  );
}

// ============ MENTORIA ============
function Mentoria({ user }) {
  const proximas = [
    { data: '2026-04-28', hora: '06:00', tema: 'CPC 47 — Receita de Contrato com Cliente na prática', grupo: 'Grupo A · TCU 2026', vagas: '28/35' },
    { data: '2026-05-05', hora: '06:00', tema: 'Consolidação: CPC 36 do zero', grupo: 'Grupo A · TCU 2026', vagas: '24/35' },
    { data: '2026-05-12', hora: '06:00', tema: 'Questões CESPE 2024 — revisão ao vivo', grupo: 'Grupo A · TCU 2026', vagas: '31/35' },
  ];
  const passadas = [
    { data: '2026-04-21', tema: 'CPC 27 — Ativo Imobilizado: as 3 pegadinhas', duracao: '2h 12min' },
    { data: '2026-04-14', tema: 'Impairment e reavaliação: fluxo completo', duracao: '1h 58min' },
    { data: '2026-04-07', tema: 'DFC na prática: método indireto passo a passo', duracao: '2h 05min' },
  ];
  return (
    <div className="fc-stack fc-gap-6">
      <div style={{
        position: 'relative', borderRadius: 'var(--fc-r-lg)', overflow: 'hidden',
        background: `linear-gradient(135deg, rgba(15,27,51,0.85), rgba(27,42,74,0.6)), url(${FC_ASSETS.hero}) center/cover`,
        color: 'white', padding: 40, minHeight: 220,
      }}>
        <Badge tone="gold" icon={I.sparkle}>Fluência Premium</Badge>
        <div className="fc-h1" style={{ color: 'white', marginTop: 14, marginBottom: 10 }}>Mentoria Fluência Premium</div>
        <div style={{ fontSize: 15, color: 'rgba(255,255,255,0.8)', maxWidth: 560, lineHeight: 1.6 }}>
          Encontros semanais com o Prof. Vinícius das 6h às 8h. Grupos fechados com até 35 alunos, focados no mesmo concurso que você.
        </div>
      </div>

      <div>
        <div className="fc-h2" style={{ marginBottom: 14 }}>Próximas mentorias</div>
        <div className="fc-stack fc-gap-3">
          {proximas.map((m, i) => (
            <Card key={i}>
              <div style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
                <div style={{
                  textAlign: 'center', width: 64,
                  padding: '8px 6px', background: 'var(--fc-cream)', borderRadius: 8,
                }}>
                  <div style={{ fontSize: 10, color: 'var(--fc-dourado-escuro)', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase' }}>
                    {new Date(m.data).toLocaleDateString('pt-BR', { month: 'short' }).replace('.','')}
                  </div>
                  <div style={{ fontSize: 26, fontWeight: 700, color: 'var(--fc-azul-profundo)', lineHeight: 1, margin: '2px 0' }}>
                    {new Date(m.data).getDate()}
                  </div>
                  <div style={{ fontSize: 10, color: 'var(--fc-gray-600)' }}>
                    {new Date(m.data).toLocaleDateString('pt-BR', { weekday: 'short' })}
                  </div>
                </div>
                <div style={{ flex: 1 }}>
                  <div className="fc-h4" style={{ marginBottom: 4 }}>{m.tema}</div>
                  <div className="fc-small">{m.hora} · {m.grupo} · {m.vagas} vagas</div>
                </div>
                {i === 0 ? (
                  <button className="fc-btn fc-btn-primary fc-btn-sm"><I.video size={14} /> Entrar na sala</button>
                ) : (
                  <button className="fc-btn fc-btn-secondary fc-btn-sm"><I.calendar size={14} /> Adicionar ao calendário</button>
                )}
              </div>
            </Card>
          ))}
        </div>
      </div>

      <div>
        <div className="fc-h2" style={{ marginBottom: 14 }}>Mentorias passadas</div>
        <div className="fc-stack fc-gap-2">
          {passadas.map((m, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 18px', background: 'white', border: '1px solid var(--fc-gray-200)', borderRadius: 8 }}>
              <div style={{ color: 'var(--fc-dourado-escuro)' }}><I.video size={18} /></div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{m.tema}</div>
                <div className="fc-caption" style={{ marginTop: 2 }}>{new Date(m.data).toLocaleDateString('pt-BR')} · {m.duracao}</div>
              </div>
              <button className="fc-btn fc-btn-secondary fc-btn-sm"><I.play size={14} /> Ver gravação</button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AulasList, AulaPage, DuvidasFeed, Certificado, Perfil, Mentoria });