---
import Icon from './Icon.astro';
import { config, onlineAtivo } from '../lib/dados.js';
const cfg = config();
const online = onlineAtivo();
---
<!-- Receber novidades: escolhe e-mail ou WhatsApp -->
<dialog class="modal" id="modal-novidades" aria-labelledby="novidades-titulo">
  <button class="modal__fechar" type="button" aria-label="Fechar" data-fechar-modal><Icon name="x" /></button>
  <div class="modal__corpo">
    <div data-passo="1">
      <span class="sobretitulo">Novidades</span>
      <h2 id="novidades-titulo">Como você quer receber os novos leilões?</h2>
      <p class="modal__sub">Avisamos sempre que um novo imóvel ou veículo for publicado. Sem spam.</p>
      <div class="escolha">
        <button type="button" class="escolha__opcao" data-canal="email">
          <span class="bolha bolha--email"><Icon name="mail" size={26} /></span>
          Por e-mail<small>Fotos e detalhes completos</small>
        </button>
        <button type="button" class="escolha__opcao" data-canal="whatsapp">
          <span class="bolha bolha--whats"><Icon name="whatsapp" size={26} /></span>
          Por WhatsApp<small>Aviso rápido no celular</small>
        </button>
      </div>
    </div>
    <form class="form" data-passo="2" hidden id="form-novidades" novalidate>
      <button type="button" class="btn btn--fantasma btn--pequeno" style="justify-self:start" data-voltar><Icon name="chevron-left" size={16} />Trocar opção</button>
      <h2 data-titulo-canal>Receber por e-mail</h2>
      <input type="hidden" name="canal" value="email" />
      <label class="campo"><span>Seu nome</span><input name="nome" autocomplete="name" placeholder="Como podemos te chamar?" /></label>
      <label class="campo" data-campo="email"><span>E-mail</span><input name="email" type="email" autocomplete="email" inputmode="email" placeholder="voce@email.com" /></label>
      <label class="campo" data-campo="whatsapp" hidden><span>WhatsApp com DDD</span><input name="whatsapp" type="tel" autocomplete="tel" inputmode="tel" placeholder="(51) 99999-9999" data-mascara="celular" /></label>
      <div class="campo">
        <span>Tenho interesse em</span>
        <div class="chips">
          <label class="chip"><input type="checkbox" name="interesses" value="imovel" checked /><span><Icon name="home" size={16} />Imóveis</span></label>
          <label class="chip"><input type="checkbox" name="interesses" value="veiculo" checked /><span><Icon name="car" size={16} />Veículos</span></label>
        </div>
      </div>
      <div class="aviso" hidden data-retorno></div>
      <button class="btn btn--grande btn--bloco" type="submit"><Icon name="bell" size={18} />Quero receber</button>
      <small style="color:var(--suave);text-align:center">Você pode cancelar quando quiser.</small>
    </form>
  </div>
</dialog>

<!-- Pop-up gerenciado pelo painel -->
<dialog class="modal modal--popup" id="modal-popup" aria-labelledby="popup-titulo">
  <button class="modal__fechar" type="button" aria-label="Fechar" data-fechar-modal><Icon name="x" /></button>
  <img class="popup__img" alt="" hidden data-popup-img />
  <div class="modal__corpo">
    <h2 id="popup-titulo" data-popup-titulo></h2>
    <p class="modal__sub" data-popup-texto style="white-space:pre-line"></p>
    <a class="btn btn--grande btn--bloco" data-popup-link hidden></a>
  </div>
</dialog>

{online && (
  <dialog class="modal modal--largo" id="modal-conta" aria-labelledby="conta-titulo" data-online>
    <button class="modal__fechar" type="button" aria-label="Fechar" data-fechar-modal><Icon name="x" /></button>
    <div class="modal__corpo">
      <span class="sobretitulo">Leilão online</span>
      <h2 id="conta-titulo">Acesse para dar lances</h2>
      <div class="abas" role="tablist">
        <button type="button" role="tab" aria-selected="true" data-aba="entrar">Já tenho cadastro</button>
        <button type="button" role="tab" aria-selected="false" data-aba="cadastro">Criar cadastro</button>
      </div>
      <form class="form" data-form="entrar" novalidate>
        <label class="campo"><span>Usuário, e-mail ou CPF/CNPJ</span><input name="usuario" autocomplete="username" required /></label>
        <label class="campo"><span>Senha</span><input name="senha" type="password" autocomplete="current-password" required /></label>
        <div class="aviso" hidden data-retorno></div>
        <button class="btn btn--grande btn--bloco" type="submit"><Icon name="lock" size={18} />Entrar</button>
      </form>
      <form class="form" data-form="cadastro" hidden novalidate>
        <label class="campo"><span>Nome completo ou razão social</span><input name="nome" autocomplete="name" required /></label>
        <div class="form__linha">
          <label class="campo"><span>CPF ou CNPJ</span><input name="documento" inputmode="numeric" data-mascara="documento" placeholder="000.000.000-00" required /></label>
          <label class="campo"><span>Celular (WhatsApp)</span><input name="celular" type="tel" inputmode="tel" autocomplete="tel" data-mascara="celular" placeholder="(51) 99999-9999" required /></label>
        </div>
        <label class="campo"><span>E-mail</span><input name="email" type="email" autocomplete="email" inputmode="email" required /></label>
        <div class="form__linha">
          <label class="campo"><span>Usuário</span><input name="usuario" autocomplete="username" placeholder="ex.: joao.silva" required /><small>Aparece mascarado nos lances (jo****a)</small></label>
          <label class="campo"><span>Senha</span><input name="senha" type="password" autocomplete="new-password" minlength="8" required /><small>Mínimo de 8 caracteres</small></label>
        </div>
        <label class="check"><input type="checkbox" name="aceite" required /><span>{cfg.leilao_termos}</span></label>
        <div class="aviso" hidden data-retorno></div>
        <button class="btn btn--grande btn--bloco" type="submit"><Icon name="check" size={18} />Criar cadastro e participar</button>
      </form>
    </div>
  </dialog>
)}

<div class="toasts" id="toasts" aria-live="polite"></div>