{% comment %}
  Smart states: pass state= and optional frozen= for Docs/embedding.
  state: main | ferramentas | settings | account | platform | profile | privacy | chats | notif | storage | fb-insta | devices | preconnect | share-dialog | qr-scan | fb-chat
  frozen: true | false — disables interaction (use in Docs for static preview)
{% endcomment %}
{% case include.state %}
{% when "ferramentas", "settings", "account", "platform", "profile", "privacy", "chats", "notif", "storage", "fb-insta", "devices", "preconnect", "share-dialog", "qr-scan", "fb-chat" %}
  {% assign mockup_state = include.state %}
{% else %}
  {% assign mockup_state = "main" %}
{% endcase %}
{% assign mockup_frozen = include.frozen | default: false %}
<div class="wa-mockup{% if mockup_frozen == true or mockup_frozen == 'true' %} wa-mockup--frozen{% endif %}" data-mockup-state="{{ mockup_state }}" data-mockup-os="android">
<div class="phone ph-a">
  <div class="sb-a"><span>9:41</span><span><i class="bi bi-reception-4"></i> <i class="bi bi-battery-full"></i></span></div>
  <div class="app-a">

    <!-- MAIN (Conversas) -->
    <div class="view {% if mockup_state == 'main' %}active{% endif %}" id="a-main">
      <div class="hdr-a">
        <span class="ttl">WhatsApp</span>
        <div class="acts">
          <i class="bi bi-camera faded"></i>
          <div class="dd">
            <i class="bi bi-three-dots-vertical" onclick="toggleDD(event,this)"></i>
            <div class="dd-menu">
              <div class="dd-item faded">Anúncios</div>
              <div class="dd-item faded">Novo grupo</div>
              <div class="dd-item faded">Listas de transmissão comercial</div>
              <div class="dd-item faded">Comunidades</div>
              <div class="dd-item faded">Etiquetas</div>
              <div class="dd-item faded">Dispositivos conectados</div>
              <div class="dd-item faded">Favoritas</div>
              <div class="dd-item faded">Encontrar empresas</div>
              <div class="dd-item faded">Cobranças</div>
              <div class="dd-item" onclick="aNav('a-settings');closeDD()">Configurações</div>
            </div>
          </div>
        </div>
      </div>
      <div class="a-searchbar"><div class="inner"><i class="bi bi-search"></i> Pesquisar...</div></div>
      <div class="body">
        <div class="wf-item wf-item-fb" onclick="aNav('a-fb-chat')" role="button">
          <div class="wf-av"><i class="bi bi-facebook"></i></div>
          <div class="wf-body"><div class="wf-fb-name">Facebook Business</div><div class="wf-fb-preview">Connect to the Business Platform</div></div>
          <div class="wf-meta"><div class="wf-time">11:03</div><div class="wf-badge"></div></div>
        </div>
        <div class="wf-item"><div class="wf-av"></div><div class="wf-body"><div class="wf-bar w3"></div><div class="wf-bar sm w7"></div></div><div class="wf-meta"><div class="wf-time"></div><div class="wf-badge"></div></div></div>
        <div class="wf-item"><div class="wf-av"></div><div class="wf-body"><div class="wf-bar w5"></div><div class="wf-bar sm w4"></div></div><div class="wf-meta"><div class="wf-time"></div></div></div>
        <div class="wf-item"><div class="wf-av"></div><div class="wf-body"><div class="wf-bar w4"></div><div class="wf-bar sm w6"></div></div><div class="wf-meta"><div class="wf-time"></div><div class="wf-badge"></div></div></div>
        <div class="wf-item"><div class="wf-av"></div><div class="wf-body"><div class="wf-bar w6"></div><div class="wf-bar sm w3"></div></div><div class="wf-meta"><div class="wf-time"></div></div></div>
        <div class="wf-item"><div class="wf-av"></div><div class="wf-body"><div class="wf-bar w3"></div><div class="wf-bar sm w5"></div></div><div class="wf-meta"><div class="wf-time"></div></div></div>
        <div class="wf-item"><div class="wf-av"></div><div class="wf-body"><div class="wf-bar w5"></div><div class="wf-bar sm w2"></div></div><div class="wf-meta"><div class="wf-time"></div></div></div>
        <div class="wf-item"><div class="wf-av"></div><div class="wf-body"><div class="wf-bar w4"></div><div class="wf-bar sm w7"></div></div><div class="wf-meta"><div class="wf-time"></div></div></div>
        <div class="wf-item"><div class="wf-av"></div><div class="wf-body"><div class="wf-bar w6"></div><div class="wf-bar sm w4"></div></div><div class="wf-meta"><div class="wf-time"></div></div></div>
      </div>
      <div class="bnav">
        <div class="bn on"><i class="bi bi-chat-dots-fill"></i><span>Conversas</span></div>
        <div class="bn faded"><i class="bi bi-telephone"></i><span>Ligações</span></div>
        <div class="bn faded"><i class="bi bi-broadcast"></i><span>Atualizações</span></div>
        <div class="bn" onclick="aNav('a-ferramentas')"><i class="bi bi-shop-window"></i><span>Ferramentas</span></div>
      </div>
    </div>

    <!-- FERRAMENTAS -->
    <div class="view {% if mockup_state == 'ferramentas' %}active{% endif %}" id="a-ferramentas">
      <div style="background:var(--a-hdr);padding:10px 16px 4px;display:flex;align-items:center;justify-content:space-between">
        <span style="font-size:20px;font-weight:700;color:var(--a-text)">Ferramentas</span>
        <div class="acts" style="display:flex;gap:14px;align-items:center">
          <i class="bi bi-camera faded" style="font-size:18px;color:var(--a-icon);cursor:pointer"></i>
          <div class="dd">
            <i class="bi bi-three-dots-vertical" style="font-size:18px;color:var(--a-icon);cursor:pointer" onclick="toggleDD(event,this)"></i>
            <div class="dd-menu" id="dd-ferramentas">
              <div class="dd-item" onclick="closeDD()">Anúncios</div>
              <div class="dd-item" onclick="closeDD()">Link curto</div>
              <div class="dd-item" onclick="aNav('a-settings');closeDD()">Configurações</div>
            </div>
          </div>
        </div>
      </div>
      <div class="body">
        <div class="stats-wrap">
          <div class="stats-label">Desempenho dos últimos sete dias <i class="bi bi-info-circle"></i></div>
          <div class="stats-row">
            <div class="stat-card"><i class="bi bi-chat-dots sc-i"></i><div class="val">41 <i class="bi bi-arrow-up-short up"></i></div><div class="lbl">Conversas iniciadas</div></div>
            <div class="stat-card"><i class="bi bi-grid-3x3 sc-i"></i><div class="val">— —</div><div class="lbl">Visualizações do catálogo</div></div>
            <div class="stat-card"><i class="bi bi-broadcast sc-i"></i><div class="val">— —</div><div class="lbl">Visualizações do status</div></div>
          </div>
        </div>
        <div class="sec-hdr">Expanda sua empresa</div>
        <div class="ft-item"><i class="bi bi-patch-check fic"></i><div class="ft-info"><div class="ft-nm">Meta Verified</div><div class="ft-dt">Conheça seus benefícios do Business Básico</div></div></div>
        <div class="ft-item"><i class="bi bi-grid-3x3 fic"></i><div class="ft-info"><div class="ft-nm">Catálogo</div><div class="ft-dt">Exiba produtos e serviços</div></div></div>
        <div class="ft-item"><i class="bi bi-megaphone fic"></i><div class="ft-info"><div class="ft-nm">Anúncios</div><div class="ft-dt">Crie anúncios para trazer mais clientes</div></div></div>
        <div class="ft-item"><i class="bi bi-broadcast fic"></i><div class="ft-info"><div class="ft-nm">Listas de transmissão comercial</div><div class="ft-dt">Envie mensagens para vários contatos</div></div><div class="ft-badge"></div></div>
        <div class="ft-item"><i class="bi bi-geo-alt fic"></i><div class="ft-info"><div class="ft-nm">Guia de negócios</div><div class="ft-dt">Ajude as pessoas a encontrar sua empresa</div></div></div>
        <div class="ft-item"><i class="bi bi-receipt fic"></i><div class="ft-info"><div class="ft-nm">Cobranças</div><div class="ft-dt">Gerencie cobranças e pagamentos</div></div></div>
        <div class="sec-hdr">Organize suas conversas</div>
        <div class="ft-item"><i class="bi bi-tag fic"></i><div class="ft-info"><div class="ft-nm">Etiquetas</div><div class="ft-dt">Organize conversas e clientes</div></div></div>
        <div class="ft-item"><i class="bi bi-hand-thumbs-up fic"></i><div class="ft-info"><div class="ft-nm">Mensagem de saudação</div><div class="ft-dt">Dê as boas-vindas a clientes novos</div></div></div>
        <div class="ft-item"><i class="bi bi-clock-history fic"></i><div class="ft-info"><div class="ft-nm">Mensagem de ausência</div><div class="ft-dt">Avise quando não estiver disponível</div></div></div>
        <div class="ft-item"><i class="bi bi-lightning fic"></i><div class="ft-info"><div class="ft-nm">Respostas rápidas</div><div class="ft-dt">Reutilize mensagens frequentes</div></div></div>
        <div class="sec-hdr">Gerencie sua conta</div>
        <div class="ft-item" onclick="aNav('a-profile')"><i class="bi bi-person-badge fic"></i><div class="ft-info"><div class="ft-nm">Perfil</div><div class="ft-dt">Gerencie os dados da empresa</div></div></div>
        <div class="ft-item" onclick="aNav('a-fb-insta')"><i class="bi bi-facebook fic"></i><div class="ft-info"><div class="ft-nm">Facebook e Instagram</div><div class="ft-dt">Adicione o WhatsApp aos seus perfis</div></div></div>
        <div class="ft-item"><i class="bi bi-question-circle fic"></i><div class="ft-info"><div class="ft-nm">Central de Ajuda</div><div class="ft-dt">Obtenha ajuda, fale conosco</div></div></div>
      </div>
      <div class="bnav">
        <div class="bn" onclick="aNav('a-main')"><i class="bi bi-chat-dots-fill"></i><span>Conversas</span></div>
        <div class="bn faded"><i class="bi bi-telephone"></i><span>Ligações</span></div>
        <div class="bn faded"><i class="bi bi-broadcast"></i><span>Atualizações</span></div>
        <div class="bn on"><i class="bi bi-shop-window"></i><span>Ferramentas</span></div>
      </div>
    </div>

    <!-- SETTINGS -->
    <div class="view {% if mockup_state == 'settings' %}active{% endif %}" id="a-settings">
      <div class="sp-hdr">
        <button class="back" onclick="aNav('a-ferramentas')"><i class="bi bi-arrow-left"></i></button>
        <span class="sp-t">Configurações</span>
        <i class="bi bi-search" style="margin-left:auto;font-size:18px;opacity:.85;cursor:pointer"></i>
      </div>
      <div class="body">
        <div class="s-profile" onclick="aNav('a-profile')">
          <div style="position:relative;flex-shrink:0">
            <img src="/assets/images/mockup-avatar.png" alt="Avatar" style="width:64px;height:64px;border-radius:50%;object-fit:cover">
            <i class="bi bi-patch-check-fill" style="position:absolute;bottom:0;right:-2px;font-size:18px;color:#0095F6;background:var(--a-bg);border-radius:50%;padding:1px"></i>
          </div>
          <div style="flex:1"><div class="s-pname">Comercial Chat Jurídico</div><div class="s-pstatus"><span style="display:inline-flex;align-items:center;gap:4px;background:var(--a-hdr);border-radius:12px;padding:2px 8px;font-size:11px"><i class="bi bi-emoji-smile" style="font-size:11px"></i> Compartilhe um pensamento</span></div></div>
          <i class="bi bi-qr-code-scan" style="color:var(--a-icon);font-size:20px"></i>
        </div>
        <div class="s-item faded">
          <i class="bi bi-patch-check" style="font-size:22px;color:var(--a-icon);width:34px;text-align:center;flex-shrink:0"></i>
          <div class="s-info"><div class="s-name">Meta Verified</div><div class="s-desc">Conheça seus benefícios do Business Básico</div></div>
        </div>
        <div class="s-item" onclick="aNav('a-account')">
          <i class="bi bi-chat-square-dots" style="font-size:22px;color:var(--a-icon);width:34px;text-align:center;flex-shrink:0"></i>
          <div class="s-info"><div class="s-name">Conta</div><div class="s-desc">Notificações de segurança, mudança de número</div></div>
        </div>
        <div class="s-item faded">
          <i class="bi bi-lock" style="font-size:22px;color:var(--a-icon);width:34px;text-align:center;flex-shrink:0"></i>
          <div class="s-info"><div class="s-name">Privacidade</div><div class="s-desc">Bloqueio de contatos, mensagens temporárias</div></div>
        </div>
        <div class="s-item faded">
          <i class="bi bi-person-bounding-box" style="font-size:22px;color:var(--a-icon);width:34px;text-align:center;flex-shrink:0"></i>
          <div class="s-info"><div class="s-name">Avatar</div><div class="s-desc">Criar, editar, foto do perfil</div></div>
        </div>
        <div class="s-item faded">
          <i class="bi bi-heart" style="font-size:22px;color:var(--a-icon);width:34px;text-align:center;flex-shrink:0"></i>
          <div class="s-info"><div class="s-name">Favoritos</div><div class="s-desc">Adicionar, reorganizar, remover</div></div>
        </div>
        <div class="s-item faded">
          <i class="bi bi-chat-left-text" style="font-size:22px;color:var(--a-icon);width:34px;text-align:center;flex-shrink:0"></i>
          <div class="s-info"><div class="s-name">Conversas</div><div class="s-desc">Tema, papel de parede, histórico de conversas</div></div>
        </div>
        <div class="s-item faded">
          <i class="bi bi-bell" style="font-size:22px;color:var(--a-icon);width:34px;text-align:center;flex-shrink:0"></i>
          <div class="s-info"><div class="s-name">Notificações</div><div class="s-desc">Mensagens, grupos, ligações</div></div>
        </div>
        <div class="s-item faded">
          <i class="bi bi-arrow-repeat" style="font-size:22px;color:var(--a-icon);width:34px;text-align:center;flex-shrink:0"></i>
          <div class="s-info"><div class="s-name">Armazenamento e dados</div><div class="s-desc">Uso de rede, download automático</div></div>
        </div>
        <div class="s-item faded">
          <i class="bi bi-universal-access" style="font-size:22px;color:var(--a-icon);width:34px;text-align:center;flex-shrink:0"></i>
          <div class="s-info"><div class="s-name">Acessibilidade</div><div class="s-desc">Aumentar o contraste, animação</div></div>
        </div>
        <div class="s-item faded">
          <i class="bi bi-globe2" style="font-size:22px;color:var(--a-icon);width:34px;text-align:center;flex-shrink:0"></i>
          <div class="s-info"><div class="s-name">Idioma do app</div><div class="s-desc">Português (Brasil) (idioma do dispositivo)</div></div>
        </div>
        <div class="s-div"></div>
        <div class="s-item faded">
          <i class="bi bi-question-circle" style="font-size:22px;color:var(--a-icon);width:34px;text-align:center;flex-shrink:0"></i>
          <div class="s-info"><div class="s-name">Ajuda e feedback</div><div class="s-desc">Central de Ajuda, fale conosco, Política de Privacidade</div></div>
        </div>
        <div class="s-item faded">
          <i class="bi bi-people" style="font-size:22px;color:var(--a-icon);width:34px;text-align:center;flex-shrink:0"></i>
          <div class="s-info"><div class="s-name">Convidar contatos</div></div>
        </div>
        <div style="text-align:center;padding:20px 16px 12px;color:var(--a-text2);font-size:12px">
          <div>from</div>
          <div style="font-weight:600;font-size:13px;margin-top:2px;letter-spacing:.5px"><i class="bi bi-infinity" style="font-size:14px"></i> Meta</div>
        </div>
      </div>
    </div>

    <!-- ACCOUNT -->
    <div class="view {% if mockup_state == 'account' %}active{% endif %}" id="a-account">
      <div class="sp-hdr"><button class="back" onclick="aNav('a-settings')"><i class="bi bi-arrow-left"></i></button><span class="sp-t">Conta</span></div>
      <div class="body">
        <div class="sp-item"><i class="bi bi-lock ic"></i><div class="sp-info"><div class="sp-nm">Notificações de segurança</div></div><i class="bi bi-chevron-right arr"></i></div><div class="sp-sep"></div>
        <div class="sp-item"><i class="bi bi-key ic"></i><div class="sp-info"><div class="sp-nm">Chaves de acesso</div></div><i class="bi bi-chevron-right arr"></i></div><div class="sp-sep"></div>
        <div class="sp-item"><i class="bi bi-envelope ic"></i><div class="sp-info"><div class="sp-nm">Endereço de email</div></div><i class="bi bi-chevron-right arr"></i></div><div class="sp-sep"></div>
        <div class="sp-item"><i class="bi bi-three-dots ic"></i><div class="sp-info"><div class="sp-nm">Confirmação em duas etapas</div></div><i class="bi bi-chevron-right arr"></i></div><div class="sp-sep"></div>
        <div class="sp-item hl" onclick="aNav('a-platform')"><i class="bi bi-link-45deg ic" style="color:var(--wa3)"></i><div class="sp-info"><div class="sp-nm">Plataforma comercial</div></div><i class="bi bi-chevron-right arr"></i></div><div class="sp-sep"></div>
        <div class="sp-item"><i class="bi bi-phone ic"></i><div class="sp-info"><div class="sp-nm">Mudar número</div></div><i class="bi bi-chevron-right arr"></i></div><div class="sp-sep"></div>
        <div class="sp-item"><i class="bi bi-file-earmark-arrow-down ic"></i><div class="sp-info"><div class="sp-nm">Pedir dados da conta</div></div><i class="bi bi-chevron-right arr"></i></div><div class="sp-sep"></div>
        <div class="sp-item"><i class="bi bi-trash3 ic" style="color:#dc3545"></i><div class="sp-info"><div class="sp-nm" style="color:#dc3545">Apagar conta</div></div><i class="bi bi-chevron-right arr"></i></div>
      </div>
    </div>

    <!-- PLATFORM -->
    <div class="view {% if mockup_state == 'platform' %}active{% endif %}" id="a-platform">
      <div class="sp-hdr"><button class="back" onclick="aNav('a-account')"><i class="bi bi-arrow-left"></i></button><span class="sp-t">Plataforma comercial</span></div>
      <div class="body">
        <div class="pcard">
          <div class="pc-h">
            <div class="pc-logo"><img src="/assets/images/logos-chat-juridico/chat-juridico-icon-transparente.svg" alt="Chat Jurídico" style="width:28px;height:28px"></div>
            <div>
              <div class="pc-n">Chat Jurídico</div>
              <div class="pc-sub">Conta da Meta: Chat Jurídico</div>
              <div class="pc-sub">Conta do WhatsApp: Comercial Chat Jurídico</div>
              <div class="pc-disconnect">Toque para desconectar</div>
            </div>
          </div>
        </div>
        <div class="pcard-notes">
          <p>Sua conta do WhatsApp só pode estar conectada a uma conta da Plataforma comercial por vez. Se você desconectar a conta da plataforma Chat Jurídico, não terá acesso aos recursos oferecidos. O app WhatsApp Business não será afetado. <a href="#" style="color:var(--wa3)">Saiba mais</a></p>
          <p style="margin-top:10px">Abra o app pelo menos uma vez a cada 14 dias para manter sua conexão ativa. <a href="#" style="color:var(--wa3)">Saiba mais</a></p>
        </div>
      </div>
    </div>

    <!-- PROFILE -->
    <div class="view {% if mockup_state == 'profile' %}active{% endif %}" id="a-profile">
      <div class="sp-hdr"><button class="back" onclick="aBack('a-profile')"><i class="bi bi-arrow-left"></i></button><span class="sp-t">Perfil</span></div>
      <div class="body">
        <div style="display:flex;flex-direction:column;align-items:center;padding:24px">
          <img src="/assets/images/mockup-avatar.png" alt="Avatar" style="width:96px;height:96px;border-radius:50%;object-fit:cover;margin-bottom:8px">
        </div>
        <div class="sp-sep" style="margin-left:0"></div>
        <div class="sp-item"><i class="bi bi-person-fill ic"></i><div class="sp-info"><div class="sp-nm">Nome</div><div class="sp-dt">Comercial Chat Jurídico</div></div></div><div class="sp-sep"></div>
        <div class="sp-item"><i class="bi bi-chat-square-text-fill ic"></i><div class="sp-info"><div class="sp-nm">Recado</div><div class="sp-dt">Atendimento com IA jurídica</div></div></div><div class="sp-sep"></div>
        <div class="sp-item"><i class="bi bi-telephone-fill ic"></i><div class="sp-info"><div class="sp-nm">Telefone</div><div class="sp-dt">+55 12 99137-5795</div></div></div>
      </div>
    </div>

    <!-- PRIVACY -->
    <div class="view {% if mockup_state == 'privacy' %}active{% endif %}" id="a-privacy">
      <div class="sp-hdr"><button class="back" onclick="aNav('a-settings')"><i class="bi bi-arrow-left"></i></button><span class="sp-t">Privacidade</span></div>
      <div class="body">
        <div class="sp-section">Quem pode ver</div>
        <div class="sp-item"><i class="bi bi-clock-fill ic"></i><div class="sp-info"><div class="sp-nm">Visto por último e online</div></div><i class="bi bi-chevron-right arr"></i></div><div class="sp-sep"></div>
        <div class="sp-item"><i class="bi bi-person-circle ic"></i><div class="sp-info"><div class="sp-nm">Foto do perfil</div><div class="sp-dt">Todos</div></div><i class="bi bi-chevron-right arr"></i></div><div class="sp-sep"></div>
        <div class="sp-item"><i class="bi bi-chat-text-fill ic"></i><div class="sp-info"><div class="sp-nm">Recado</div><div class="sp-dt">Todos</div></div><i class="bi bi-chevron-right arr"></i></div><div class="sp-sep"></div>
        <div class="sp-item"><i class="bi bi-people-fill ic"></i><div class="sp-info"><div class="sp-nm">Grupos</div><div class="sp-dt">Todos</div></div><i class="bi bi-chevron-right arr"></i></div><div class="sp-sep"></div>
        <div class="sp-item"><i class="bi bi-circle-half ic"></i><div class="sp-info"><div class="sp-nm">Status</div><div class="sp-dt">Meus contatos</div></div><i class="bi bi-chevron-right arr"></i></div><div class="sp-sep"></div>
        <div class="sp-section">Mensagens</div>
        <div class="sp-item"><i class="bi bi-check-all ic"></i><div class="sp-info"><div class="sp-nm">Confirmações de leitura</div></div><div style="width:36px;height:20px;border-radius:10px;background:var(--wa3)"></div></div><div class="sp-sep"></div>
        <div class="sp-section">Avançado</div>
        <div class="sp-item"><i class="bi bi-slash-circle ic"></i><div class="sp-info"><div class="sp-nm">Bloqueados</div><div class="sp-dt">0</div></div><i class="bi bi-chevron-right arr"></i></div><div class="sp-sep"></div>
        <div class="sp-item"><i class="bi bi-fingerprint ic"></i><div class="sp-info"><div class="sp-nm">Bloqueio do app</div><div class="sp-dt">Desativado</div></div><i class="bi bi-chevron-right arr"></i></div>
      </div>
    </div>

    <!-- CHATS -->
    <div class="view {% if mockup_state == 'chats' %}active{% endif %}" id="a-chats">
      <div class="sp-hdr"><button class="back" onclick="aNav('a-settings')"><i class="bi bi-arrow-left"></i></button><span class="sp-t">Conversas</span></div>
      <div class="body">
        <div class="sp-section">Exibição</div>
        <div class="sp-item"><i class="bi bi-moon-fill ic"></i><div class="sp-info"><div class="sp-nm">Tema</div><div class="sp-dt">Escuro</div></div><i class="bi bi-chevron-right arr"></i></div><div class="sp-sep"></div>
        <div class="sp-item"><i class="bi bi-image-fill ic"></i><div class="sp-info"><div class="sp-nm">Papel de parede</div></div><i class="bi bi-chevron-right arr"></i></div><div class="sp-sep"></div>
        <div class="sp-section">Conversas</div>
        <div class="sp-item"><i class="bi bi-type ic"></i><div class="sp-info"><div class="sp-nm">Tamanho da fonte</div><div class="sp-dt">Médio</div></div><i class="bi bi-chevron-right arr"></i></div><div class="sp-sep"></div>
        <div class="sp-item"><i class="bi bi-translate ic"></i><div class="sp-info"><div class="sp-nm">Idioma de tradução</div></div><i class="bi bi-chevron-right arr"></i></div><div class="sp-sep"></div>
        <div class="sp-section">Histórico</div>
        <div class="sp-item"><i class="bi bi-cloud-arrow-up-fill ic"></i><div class="sp-info"><div class="sp-nm">Backup de conversas</div></div><i class="bi bi-chevron-right arr"></i></div><div class="sp-sep"></div>
        <div class="sp-item"><i class="bi bi-box-arrow-right ic"></i><div class="sp-info"><div class="sp-nm">Exportar conversas</div></div><i class="bi bi-chevron-right arr"></i></div>
      </div>
    </div>

    <!-- NOTIFICATIONS -->
    <div class="view {% if mockup_state == 'notif' %}active{% endif %}" id="a-notif">
      <div class="sp-hdr"><button class="back" onclick="aNav('a-settings')"><i class="bi bi-arrow-left"></i></button><span class="sp-t">Notificações</span></div>
      <div class="body">
        <div class="sp-section">Mensagens</div>
        <div class="sp-item"><i class="bi bi-volume-up-fill ic"></i><div class="sp-info"><div class="sp-nm">Som de notificação</div><div class="sp-dt">Padrão</div></div></div><div class="sp-sep"></div>
        <div class="sp-item"><i class="bi bi-phone-vibrate ic"></i><div class="sp-info"><div class="sp-nm">Vibração</div><div class="sp-dt">Padrão</div></div></div><div class="sp-sep"></div>
        <div class="sp-item"><i class="bi bi-lightbulb-fill ic"></i><div class="sp-info"><div class="sp-nm">Luz</div><div class="sp-dt">Branca</div></div></div><div class="sp-sep"></div>
        <div class="sp-item"><i class="bi bi-arrow-up-circle-fill ic"></i><div class="sp-info"><div class="sp-nm">Notificações de alta prioridade</div></div><div style="width:36px;height:20px;border-radius:10px;background:var(--a-sep)"></div></div><div class="sp-sep"></div>
        <div class="sp-section">Grupos</div>
        <div class="sp-item"><i class="bi bi-volume-up-fill ic"></i><div class="sp-info"><div class="sp-nm">Som de notificação</div><div class="sp-dt">Padrão</div></div></div><div class="sp-sep"></div>
        <div class="sp-item"><i class="bi bi-phone-vibrate ic"></i><div class="sp-info"><div class="sp-nm">Vibração</div><div class="sp-dt">Padrão</div></div></div>
      </div>
    </div>

    <!-- STORAGE -->
    <div class="view {% if mockup_state == 'storage' %}active{% endif %}" id="a-storage">
      <div class="sp-hdr"><button class="back" onclick="aNav('a-settings')"><i class="bi bi-arrow-left"></i></button><span class="sp-t">Armazenamento e dados</span></div>
      <div class="body">
        <div class="sp-item"><i class="bi bi-hdd-fill ic"></i><div class="sp-info"><div class="sp-nm">Gerenciar armazenamento</div><div class="sp-dt">1,2 GB</div></div><i class="bi bi-chevron-right arr"></i></div><div class="sp-sep"></div>
        <div class="sp-item"><i class="bi bi-bar-chart-fill ic"></i><div class="sp-info"><div class="sp-nm">Uso de rede</div></div><i class="bi bi-chevron-right arr"></i></div><div class="sp-sep"></div>
        <div class="sp-section">Download automático de mídia</div>
        <div class="sp-item"><i class="bi bi-wifi ic"></i><div class="sp-info"><div class="sp-nm">Quando usando Wi-Fi</div><div class="sp-dt">Fotos, áudio, documentos</div></div></div><div class="sp-sep"></div>
        <div class="sp-item"><i class="bi bi-reception-4 ic"></i><div class="sp-info"><div class="sp-nm">Quando usando dados móveis</div><div class="sp-dt">Fotos</div></div></div><div class="sp-sep"></div>
        <div class="sp-item"><i class="bi bi-broadcast ic"></i><div class="sp-info"><div class="sp-nm">Em roaming</div><div class="sp-dt">Nenhuma mídia</div></div></div>
      </div>
    </div>

    <!-- FACEBOOK & INSTAGRAM -->
    <div class="view {% if mockup_state == 'fb-insta' %}active{% endif %}" id="a-fb-insta">
      <div class="sp-hdr"><button class="back" onclick="aNav('a-ferramentas')"><i class="bi bi-arrow-left"></i></button><span class="sp-t">Facebook e Instagram</span></div>
      <div class="body">
        <div style="text-align:center;padding:32px 24px 20px">
          <div style="display:flex;justify-content:center;gap:8px;margin-bottom:16px">
            <div style="width:48px;height:48px;border-radius:50%;background:var(--wa3);display:flex;align-items:center;justify-content:center"><i class="bi bi-facebook" style="font-size:22px;color:#fff"></i></div>
            <div style="width:48px;height:48px;border-radius:50%;background:rgba(37,211,102,.15);display:flex;align-items:center;justify-content:center"><i class="bi bi-instagram" style="font-size:22px;color:var(--wa3)"></i></div>
          </div>
          <div style="font-size:16px;font-weight:600;color:var(--a-text);margin-bottom:6px">Conecte-se com mais clientes</div>
          <div style="font-size:13px;color:var(--a-text2);line-height:1.5">Ajude seus clientes a interagir com sua empresa. Adicione o botão do WhatsApp à sua Página e seu perfil comerciais. <span style="color:var(--wa2);cursor:pointer">Saiba mais</span></div>
        </div>
        <div class="sp-sep" style="margin-left:0"></div>
        <div class="sp-item"><i class="bi bi-facebook ic" style="color:var(--wa2)"></i><div class="sp-info"><div class="sp-nm">Facebook</div><div class="sp-dt">Adicione o WhatsApp à sua Página.</div></div><i class="bi bi-plus arr" style="font-size:18px;color:var(--a-text2)"></i></div><div class="sp-sep"></div>
        <div class="sp-item"><i class="bi bi-instagram ic" style="color:var(--wa2)"></i><div class="sp-info"><div class="sp-nm">Instagram</div><div class="sp-dt">Adicione o WhatsApp ao seu perfil</div></div><i class="bi bi-plus arr" style="font-size:18px;color:var(--a-text2)"></i></div>
      </div>
    </div>

    <!-- DEVICES -->
    <div class="view {% if mockup_state == 'devices' %}active{% endif %}" id="a-devices">
      <div class="sp-hdr"><button class="back" onclick="aNav('a-settings')"><i class="bi bi-arrow-left"></i></button><span class="sp-t">Dispositivos conectados</span></div>
      <div class="body">
        <div style="padding:20px 16px;text-align:center">
          <i class="bi bi-laptop" style="font-size:48px;color:var(--a-icon);display:block;margin-bottom:8px"></i>
          <div style="font-size:13px;color:var(--a-text2);line-height:1.5">Use o WhatsApp em até 4 dispositivos ao mesmo tempo.</div>
        </div>
        <div class="sp-sep" style="margin-left:0"></div>
        <div class="sp-section">Dispositivos</div>
        <div class="sp-item"><i class="bi bi-globe ic"></i><div class="sp-info"><div class="sp-nm">Chrome (Windows)</div><div class="sp-dt">Ativo agora</div></div></div><div class="sp-sep"></div>
        <div class="sp-item"><i class="bi bi-apple ic"></i><div class="sp-info"><div class="sp-nm">Safari (Mac)</div><div class="sp-dt">Último acesso: ontem</div></div></div>
      </div>
    </div>

    <!-- PRE-CONNECT -->
    <div class="view {% if mockup_state == 'preconnect' %}active{% endif %}" id="a-preconnect">
      <div class="sp-hdr"><button class="back" onclick="aNav('a-account')"><i class="bi bi-arrow-left"></i></button><span class="sp-t">Plataforma comercial</span></div>
      <div class="body" style="display:flex;flex-direction:column">
        <div class="precon">
          <div class="precon-illust"><img src="/assets/images/mockup-platform-illust.png" alt="Plataforma comercial" style="width:100px;height:auto"></div>
          <h3>Conectar-se à Plataforma do WhatsApp Business</h3>
          <div class="precon-sub">Escaneie o QR code para se conectar à Plataforma comercial.</div>
          <div class="precon-info">
            <div class="precon-row"><i class="bi bi-link-45deg"></i><p>Você pode continuar a usar o app WhatsApp Business junto com a Plataforma comercial.</p></div>
            <div class="precon-row"><i class="bi bi-chat-square-text"></i><p>Você poderá compartilhar até seis meses do histórico de conversas. Não é possível compartilhar históricos de grupos.</p></div>
            <div class="precon-row"><i class="bi bi-info-circle"></i><p>Para oferecer esse serviço, todas as conversas com clientes serão gerenciadas usando um serviço seguro da Meta. <a href="#">Saiba mais</a></p></div>
          </div>
          <button class="precon-cta" onclick="aNav('a-share-dialog')">Conectar-se à Plataforma do WhatsApp Business</button>
        </div>
      </div>
    </div>

    <!-- SHARE DIALOG -->
    <div class="view {% if mockup_state == 'share-dialog' %}active{% endif %}" id="a-share-dialog">
      <div class="sp-hdr"><button class="back" onclick="aNav('a-preconnect')"><i class="bi bi-arrow-left"></i></button><span class="sp-t">Plataforma comercial</span></div>
      <div class="body" style="position:relative">
        <div class="precon" style="filter:blur(1px);opacity:.3;pointer-events:none">
          <div class="precon-illust"><img src="/assets/images/mockup-platform-illust.png" alt="Plataforma comercial" style="width:100px;height:auto"></div>
          <h3>Conectar-se à Plataforma do WhatsApp Business</h3>
        </div>
        <div class="dialog-overlay">
          <div class="dialog-sheet">
            <div class="sheet-handle"></div>
            <h4>Deseja compartilhar o histórico de conversas?</h4>
            <div class="dc-desc">Essa medida ajuda a garantir que suas mensagens anteriores serão exibidas na plataforma comercial.</div>
            <div class="dc-opt selected">
              <div style="flex:1">
                <div class="dc-opt-title">Compartilhar todas as conversas</div>
                <div class="dc-opt-desc">Continuar conversas com clientes atuais</div>
              </div>
              <div class="dc-radio"></div>
            </div>
            <div class="dc-opt">
              <div style="flex:1">
                <div class="dc-opt-title">Não compartilhar conversas</div>
                <div class="dc-opt-desc">Será necessário iniciar novas conversas com seus clientes</div>
              </div>
              <div class="dc-radio"></div>
            </div>
            <button class="dc-confirm" onclick="aNav('a-qr-scan')">Confirmar</button>
          </div>
        </div>
      </div>
    </div>

    <!-- QR SCAN -->
    <div class="view {% if mockup_state == 'qr-scan' %}active{% endif %}" id="a-qr-scan">
      <div class="sp-hdr"><button class="back" onclick="aNav('a-share-dialog')"><i class="bi bi-arrow-left"></i></button><span class="sp-t">Escanear código</span></div>
      <div class="body" style="display:flex;flex-direction:column">
        <div class="qr-scan-screen">
          <div class="qr-viewfinder">
            <div class="qr-frame">
              <div class="qr-corner qr-tl"></div>
              <div class="qr-corner qr-tr"></div>
              <div class="qr-corner qr-bl"></div>
              <div class="qr-corner qr-br"></div>
              <div class="qr-scan-line"></div>
            </div>
          </div>
          <div class="qr-instruction">Aponte a câmera para o QR Code<br>exibido na tela do computador</div>
          <button class="qr-done-btn" onclick="aNav('a-platform')"><i class="bi bi-check-circle-fill"></i> Código escaneado</button>
        </div>
      </div>
    </div>

    <!-- FACEBOOK BUSINESS CHAT -->
    <div class="view {% if mockup_state == 'fb-chat' %}active{% endif %}" id="a-fb-chat">
      <div class="fb-chat-hdr">
        <button class="back" onclick="aNav('a-main')"><i class="bi bi-arrow-left" style="color:var(--a-text)"></i></button>
        <div class="fb-av-fb"><i class="bi bi-facebook"></i></div>
        <div style="flex:1">
          <div class="fb-chat-name">Facebook Business <i class="bi bi-patch-check-fill" style="color:#0095F6;font-size:12px"></i></div>
          <div class="fb-chat-sub">Conta comercial</div>
        </div>
      </div>
      <div class="fb-chat-body">
        <div class="fb-date-sep"><span>Hoje</span></div>
        <div class="fb-bubble">
          <div class="fb-b-title">Connect to the Business Platform</div>
          <div class="fb-b-text">Continue the process of sharing your WhatsApp contacts and chats to the Platform.</div>
          <div class="fb-b-time">11:03</div>
          <div class="fb-b-link" onclick="aNav('a-preconnect')"><i class="bi bi-box-arrow-up-right"></i> Connect</div>
        </div>
      </div>
      <div class="fb-input-bar">
        <i class="bi bi-plus fb-plus"></i>
        <div class="fb-input">Mensagem</div>
        <div class="fb-mic"><i class="bi bi-camera"></i><i class="bi bi-mic"></i></div>
      </div>
    </div>

  </div>
  <div class="a-navbar"><span class="a-nav-sq"></span><span class="a-nav-circle"></span><span class="a-nav-tri"></span></div>
</div>
</div>