<!-- Fontes -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />

<!-- Font Awesome 6 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />

<!-- Tailwind CSS via CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          surface: {
            DEFAULT: '#f7f9fb', dim: '#d8dadc', lowest: '#ffffff',
            low: '#f2f4f6', container: '#eceef0', high: '#e6e8ea', highest: '#e0e3e5'
          },
          ink:     { DEFAULT: '#191c1e', soft: '#40484d', inverse: '#eff1f3' },
          outline: { DEFAULT: '#70787d', soft: '#bfc8cd' },
          primary: {
            DEFAULT: '#0d6683', dark: '#005974', container: '#89cff0',
            light: '#bee9ff', deep: '#001f2a', navy: '#004d65'
          },
          gold: { DEFAULT: '#fcd400', dim: '#e9c400', soft: '#ffe16d', ink: '#544600', dark: '#705d00' },
          navy: { DEFAULT: '#3f5f91', ink: '#254778', deep: '#001b3d', container: '#a8c7ff', dim: '#325284' },
          health: { DEFAULT: '#059669', soft: '#d1fae5', ink: '#065f46' },
          wa: { DEFAULT: '#25d366', dark: '#128c7e' }
        },
        fontFamily: {
          display: ['Manrope', 'ui-sans-serif', 'system-ui', 'sans-serif'],
          sans: ['"Plus Jakarta Sans"', 'ui-sans-serif', 'system-ui', 'sans-serif']
        },
        fontSize: {
          'headline-xl': ['3rem',      { lineHeight: '3.5rem',  letterSpacing: '-0.02em', fontWeight: '700' }],
          'headline-lg': ['2rem',      { lineHeight: '2.5rem',  letterSpacing: '-0.01em', fontWeight: '700' }],
          'headline-md': ['1.5rem',    { lineHeight: '2rem',    fontWeight: '600' }],
          'body-lg':     ['1.125rem',  { lineHeight: '1.75rem' }],
          'label-sm':    ['0.75rem',   { lineHeight: '1rem',    letterSpacing: '0.05em', fontWeight: '600' }]
        },
        borderRadius: { sm: '0.25rem', DEFAULT: '0.5rem', md: '0.75rem', lg: '1rem', xl: '1.5rem' },
        boxShadow: {
          soft: '0 8px 24px rgba(13, 102, 131, 0.06)',
          lift: '0 16px 32px rgba(13, 102, 131, 0.12)',
          glow: '0 8px 32px rgba(137, 207, 240, 0.45)'
        },
        maxWidth: { wrap: '1280px' }
      }
    }
  };
</script>

<span class="wa-tooltip" role="presentation">Fale com um especialista 🐾</span>

<script>
document.addEventListener('DOMContentLoaded', function() {
  
// --- main.js ---
/* ============================================================
   Mundo Spitz Anões — Configuração global e utilitários
   Carregar ANTES dos demais componentes (todos usam window.MS)
   ============================================================ */
(function () {
  'use strict';

  window.MS = {
    // ✏️ EDITAR AQUI: número do WhatsApp (somente dígitos, com DDI 55)
    whatsapp: '5511916532098',

    // Mensagem padrão quando nenhuma específica é informada
    mensagemPadrao:
      'Olá! Vim pelo site do Mundo Spitz Anões e gostaria de consultar os filhotes de Lulu da Pomerânia disponíveis. 🐾',

    /**
     * Monta um link do WhatsApp com mensagem pré-preenchida.
     * @param {string} [mensagem]
     * @returns {string}
     */
    linkWhatsApp: function (mensagem) {
      var texto = mensagem || this.mensagemPadrao;
      return 'https://wa.me/' + this.whatsapp + '?text=' + encodeURIComponent(texto);
    },

    /** Atalhos de seleção */
    $:  function (sel, ctx) { return (ctx || document).querySelector(sel); },
    $$: function (sel, ctx) { return Array.prototype.slice.call((ctx || document).querySelectorAll(sel)); }
  };

  document.addEventListener('DOMContentLoaded', function () {
    // Preenche todos os links marcados com data-whatsapp.
    // Se o elemento tiver data-mensagem, usa a mensagem específica.
    window.MS.$$('[data-whatsapp]').forEach(function (el) {
      el.setAttribute('href', window.MS.linkWhatsApp(el.getAttribute('data-mensagem')));
      el.setAttribute('target', '_blank');
      el.setAttribute('rel', 'noopener');
    });

    // Ano corrente no rodapé
    window.MS.$$('[data-ano]').forEach(function (el) {
      el.textContent = new Date().getFullYear();
    });
  });
})();


// --- header.js ---
/* ============================================================
   Componente: Header fixo + menu mobile + link ativo por seção
   ============================================================ */
(function () {
  'use strict';

  document.addEventListener('DOMContentLoaded', function () {
    var header = document.querySelector('[data-header]');
    if (!header) return;

    /* --- Sombra ao rolar --- */
    var aoRolar = function () {
      header.classList.toggle('is-rolado', window.scrollY > 8);
    };
    window.addEventListener('scroll', aoRolar, { passive: true });
    aoRolar();

    /* --- Menu mobile (painel lateral) --- */
    var menu = document.querySelector('[data-menu-mobile]');
    var botaoAbrir = document.querySelector('[data-menu-abrir]');
    var botaoFechar = document.querySelector('[data-menu-fechar]');
    var fundo = menu ? menu.querySelector('.menu-mobile-fundo') : null;

    function alternarMenu(abrir) {
      if (!menu) return;
      menu.classList.toggle('is-aberto', abrir);
      if (botaoAbrir) botaoAbrir.setAttribute('aria-expanded', String(abrir));
      document.body.style.overflow = abrir ? 'hidden' : '';
    }

    if (botaoAbrir) botaoAbrir.addEventListener('click', function () { alternarMenu(true); });
    if (botaoFechar) botaoFechar.addEventListener('click', function () { alternarMenu(false); });
    if (fundo) fundo.addEventListener('click', function () { alternarMenu(false); });

    if (menu) {
      // Fecha ao clicar em qualquer link do painel
      window.MS.$$('.menu-mobile-link', menu).forEach(function (link) {
        link.addEventListener('click', function () { alternarMenu(false); });
      });
    }

    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape') alternarMenu(false);
    });

    /* --- Destaque do link ativo conforme a seção visível --- */
    var links = window.MS.$$('.nav-link[href^="#"]');
    if (!links.length || !('IntersectionObserver' in window)) return;

    var mapa = {};
    links.forEach(function (link) {
      var id = link.getAttribute('href').slice(1);
      var secao = document.getElementById(id);
      if (secao) mapa[id] = link;
    });

    var observador = new IntersectionObserver(function (entradas) {
      entradas.forEach(function (entrada) {
        if (entrada.isIntersecting) {
          links.forEach(function (l) { l.classList.remove('is-ativo'); });
          var link = mapa[entrada.target.id];
          if (link) link.classList.add('is-ativo');
        }
      });
    }, { rootMargin: '-40% 0px -55% 0px' });

    Object.keys(mapa).forEach(function (id) {
      observador.observe(document.getElementById(id));
    });
  });
})();


// --- reveal.js ---
/* ============================================================
   Componente: Animações de entrada ao rolar (scroll reveal)
   Uso: <div data-reveal> ou data-reveal="esquerda|direita|zoom"
        Atraso opcional: style="--reveal-delay: 150ms"
   ============================================================ */
(function () {
  'use strict';

  document.addEventListener('DOMContentLoaded', function () {
    var elementos = window.MS.$$('[data-reveal]');
    if (!elementos.length) return;

    if (!('IntersectionObserver' in window)) {
      elementos.forEach(function (el) { el.classList.add('is-revelado'); });
      return;
    }

    var observador = new IntersectionObserver(function (entradas, obs) {
      entradas.forEach(function (entrada) {
        if (entrada.isIntersecting) {
          entrada.target.classList.add('is-revelado');
          obs.unobserve(entrada.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });

    elementos.forEach(function (el) { observador.observe(el); });
  });
})();


// --- counter.js ---
/* ============================================================
   Componente: Contadores animados
   Uso: <span data-counter="30" data-sufixo="+">0</span>
   ============================================================ */
(function () {
  'use strict';

  function animar(el) {
    var alvo = parseInt(el.getAttribute('data-counter'), 10) || 0;
    var sufixo = el.getAttribute('data-sufixo') || '';
    var duracao = 1600;
    var inicio = null;

    function passo(agora) {
      if (!inicio) inicio = agora;
      var progresso = Math.min((agora - inicio) / duracao, 1);
      // easing suave (easeOutCubic)
      var eased = 1 - Math.pow(1 - progresso, 3);
      el.textContent = Math.round(alvo * eased) + sufixo;
      if (progresso < 1) requestAnimationFrame(passo);
    }
    requestAnimationFrame(passo);
  }

  document.addEventListener('DOMContentLoaded', function () {
    var contadores = window.MS.$$('[data-counter]');
    if (!contadores.length) return;

    if (!('IntersectionObserver' in window)) {
      contadores.forEach(function (el) {
        el.textContent = el.getAttribute('data-counter') + (el.getAttribute('data-sufixo') || '');
      });
      return;
    }

    var observador = new IntersectionObserver(function (entradas, obs) {
      entradas.forEach(function (entrada) {
        if (entrada.isIntersecting) {
          animar(entrada.target);
          obs.unobserve(entrada.target);
        }
      });
    }, { threshold: 0.4 });

    contadores.forEach(function (el) { observador.observe(el); });
  });
})();


// --- accordion.js ---
/* ============================================================
   Componente: Acordeão (FAQ)
   Uso:
   <div data-acordeao>
     <article class="acordeao-item">
       <h3><button class="acordeao-botao" aria-expanded="false">…</button></h3>
       <div class="acordeao-conteudo"><div class="acordeao-corpo">…</div></div>
     </article>
   </div>
   ============================================================ */
(function () {
  'use strict';

  document.addEventListener('DOMContentLoaded', function () {
    window.MS.$$('[data-acordeao]').forEach(function (grupo) {
      var itens = window.MS.$$('.acordeao-item', grupo);

      itens.forEach(function (item) {
        var botao = item.querySelector('.acordeao-botao');
        var conteudo = item.querySelector('.acordeao-conteudo');
        if (!botao || !conteudo) return;

        botao.addEventListener('click', function () {
          var estaAberto = item.classList.contains('is-open');

          // Fecha os demais (comportamento de item único aberto)
          itens.forEach(function (outro) {
            if (outro !== item && outro.classList.contains('is-open')) {
              fechar(outro);
            }
          });

          estaAberto ? fechar(item) : abrir(item);
        });
      });

      function abrir(item) {
        var botao = item.querySelector('.acordeao-botao');
        var conteudo = item.querySelector('.acordeao-conteudo');
        item.classList.add('is-open');
        botao.setAttribute('aria-expanded', 'true');
        conteudo.style.maxHeight = conteudo.scrollHeight + 'px';
      }

      function fechar(item) {
        var botao = item.querySelector('.acordeao-botao');
        var conteudo = item.querySelector('.acordeao-conteudo');
        item.classList.remove('is-open');
        botao.setAttribute('aria-expanded', 'false');
        conteudo.style.maxHeight = '';
      }
    });
  });
})();


// --- carousel.js ---
/* ============================================================
   Componente: Carrossel (depoimentos)
   Uso:
   <div data-carrossel data-autoplay="7000">
     <div class="carrossel-viewport">
       <div class="carrossel-track">
         <div class="carrossel-slide">…</div> ×N
       </div>
     </div>
     <button data-carrossel-ant>…</button>
     <button data-carrossel-prox>…</button>
     <div class="carrossel-dots" data-carrossel-dots></div>
   </div>
   Suporta: setas, dots, autoplay (pausa no hover), swipe/arraste.
   ============================================================ */
(function () {
  'use strict';

  function iniciarCarrossel(raiz) {
    var track = raiz.querySelector('.carrossel-track');
    var slides = window.MS.$$('.carrossel-slide', raiz);
    var btnAnt = raiz.querySelector('[data-carrossel-ant]');
    var btnProx = raiz.querySelector('[data-carrossel-prox]');
    var dotsWrap = raiz.querySelector('[data-carrossel-dots]');
    if (!track || slides.length === 0) return;

    var indice = 0;
    var total = slides.length;
    var autoplayMs = parseInt(raiz.getAttribute('data-autoplay'), 10) || 0;
    var timer = null;
    var dots = [];

    /* --- Dots --- */
    if (dotsWrap) {
      slides.forEach(function (_, i) {
        var dot = document.createElement('button');
        dot.type = 'button';
        dot.className = 'carrossel-dot';
        dot.setAttribute('aria-label', 'Ir para o depoimento ' + (i + 1));
        dot.addEventListener('click', function () { irPara(i); reiniciarAutoplay(); });
        dotsWrap.appendChild(dot);
        dots.push(dot);
      });
    }

    function atualizar() {
      track.style.transform = 'translateX(-' + (indice * 100) + '%)';
      dots.forEach(function (d, i) {
        d.classList.toggle('is-active', i === indice);
      });
      slides.forEach(function (s, i) {
        s.setAttribute('aria-hidden', String(i !== indice));
      });
    }

    function irPara(i) {
      indice = (i + total) % total;
      atualizar();
    }

    if (btnAnt) btnAnt.addEventListener('click', function () { irPara(indice - 1); reiniciarAutoplay(); });
    if (btnProx) btnProx.addEventListener('click', function () { irPara(indice + 1); reiniciarAutoplay(); });

    /* --- Autoplay --- */
    function iniciarAutoplay() {
      if (!autoplayMs) return;
      pararAutoplay();
      timer = setInterval(function () { irPara(indice + 1); }, autoplayMs);
    }
    function pararAutoplay() {
      if (timer) { clearInterval(timer); timer = null; }
    }
    function reiniciarAutoplay() {
      pararAutoplay();
      iniciarAutoplay();
    }

    raiz.addEventListener('mouseenter', pararAutoplay);
    raiz.addEventListener('mouseleave', iniciarAutoplay);
    raiz.addEventListener('focusin', pararAutoplay);
    raiz.addEventListener('focusout', iniciarAutoplay);

    /* --- Swipe / arraste (pointer events) --- */
    var arrastando = false;
    var inicioX = 0;

    track.addEventListener('pointerdown', function (e) {
      arrastando = true;
      inicioX = e.clientX;
      track.style.transition = 'none';
    });

    window.addEventListener('pointerup', function (e) {
      if (!arrastando) return;
      arrastando = false;
      track.style.transition = '';
      var delta = e.clientX - inicioX;
      if (Math.abs(delta) > 48) {
        irPara(delta < 0 ? indice + 1 : indice - 1);
      } else {
        atualizar();
      }
      reiniciarAutoplay();
    });

    window.addEventListener('pointermove', function (e) {
      if (!arrastando) return;
      var delta = e.clientX - inicioX;
      var largura = raiz.offsetWidth || 1;
      track.style.transform =
        'translateX(calc(-' + (indice * 100) + '% + ' + (delta / largura) * 100 + '%))';
    });

    /* --- Teclado --- */
    raiz.setAttribute('tabindex', '0');
    raiz.addEventListener('keydown', function (e) {
      if (e.key === 'ArrowLeft') { irPara(indice - 1); reiniciarAutoplay(); }
      if (e.key === 'ArrowRight') { irPara(indice + 1); reiniciarAutoplay(); }
    });

    atualizar();
    iniciarAutoplay();
  }

  document.addEventListener('DOMContentLoaded', function () {
    window.MS.$$('[data-carrossel]').forEach(iniciarCarrossel);
  });
})();


// --- lightbox.js ---
/* ============================================================
   Componente: Lightbox com zoom (galeria de fotos)
   Uso: <a href="foto-grande.jpg" data-lightbox="galeria"
           data-legenda="Descrição da foto">…</a>
   Agrupamento por valor de data-lightbox (navegação ant/próx).
   Clique na imagem aberta alterna o zoom (1.8×).
   ============================================================ */
(function () {
  'use strict';

  document.addEventListener('DOMContentLoaded', function () {
    var gatilhos = window.MS.$$('[data-lightbox]');
    if (!gatilhos.length) return;

    /* --- Estrutura do modal (criada uma única vez) --- */
    var overlay = document.createElement('div');
    overlay.className = 'ms-lightbox';
    overlay.setAttribute('role', 'dialog');
    overlay.setAttribute('aria-modal', 'true');
    overlay.setAttribute('aria-label', 'Visualização ampliada da foto');
    overlay.innerHTML =
      '<span class="ms-lightbox-contador"></span>' +
      '<button type="button" class="ms-lightbox-botao ms-lightbox-fechar" aria-label="Fechar (Esc)"><i class="fa-solid fa-xmark" aria-hidden="true"></i></button>' +
      '<button type="button" class="ms-lightbox-botao ms-lightbox-ant" aria-label="Foto anterior"><i class="fa-solid fa-chevron-left" aria-hidden="true"></i></button>' +
      '<button type="button" class="ms-lightbox-botao ms-lightbox-prox" aria-label="Próxima foto"><i class="fa-solid fa-chevron-right" aria-hidden="true"></i></button>' +
      '<figure class="ms-lightbox-figura">' +
      '  <img class="ms-lightbox-img" src="" alt="" />' +
      '</figure>' +
      '<p class="ms-lightbox-legenda"></p>';
    document.body.appendChild(overlay);

    var img = overlay.querySelector('.ms-lightbox-img');
    var legenda = overlay.querySelector('.ms-lightbox-legenda');
    var contador = overlay.querySelector('.ms-lightbox-contador');
    var btnFechar = overlay.querySelector('.ms-lightbox-fechar');
    var btnAnt = overlay.querySelector('.ms-lightbox-ant');
    var btnProx = overlay.querySelector('.ms-lightbox-prox');

    var grupoAtual = [];
    var indice = 0;
    var elementoFoco = null;

    function abrir(grupo, i) {
      grupoAtual = grupo;
      indice = i;
      elementoFoco = document.activeElement;
      renderizar();
      overlay.classList.add('is-open');
      document.body.style.overflow = 'hidden';
      btnFechar.focus();
    }

    function fechar() {
      overlay.classList.remove('is-open');
      document.body.style.overflow = '';
      img.classList.remove('is-zoomed');
      if (elementoFoco) elementoFoco.focus();
    }

    function renderizar() {
      var gatilho = grupoAtual[indice];
      var alt = '';
      var miniatura = gatilho.querySelector('img');
      if (miniatura) alt = miniatura.getAttribute('alt') || '';

      img.classList.remove('is-zoomed');
      img.src = gatilho.getAttribute('href');
      img.alt = alt;
      legenda.textContent = gatilho.getAttribute('data-legenda') || alt;
      contador.textContent = (indice + 1) + ' / ' + grupoAtual.length;

      var multiplas = grupoAtual.length > 1;
      btnAnt.style.display = multiplas ? '' : 'none';
      btnProx.style.display = multiplas ? '' : 'none';
      contador.style.display = multiplas ? '' : 'none';
    }

    function navegar(passo) {
      indice = (indice + passo + grupoAtual.length) % grupoAtual.length;
      renderizar();
    }

    /* --- Zoom ao clicar na imagem --- */
    img.addEventListener('click', function () {
      img.classList.toggle('is-zoomed');
    });

    btnFechar.addEventListener('click', fechar);
    btnAnt.addEventListener('click', function () { navegar(-1); });
    btnProx.addEventListener('click', function () { navegar(1); });

    overlay.addEventListener('click', function (e) {
      if (e.target === overlay) fechar();
    });

    document.addEventListener('keydown', function (e) {
      if (!overlay.classList.contains('is-open')) return;
      if (e.key === 'Escape') fechar();
      if (e.key === 'ArrowLeft') navegar(-1);
      if (e.key === 'ArrowRight') navegar(1);
    });

    /* --- Registra gatilhos por grupo --- */
    var grupos = {};
    gatilhos.forEach(function (el) {
      var nome = el.getAttribute('data-lightbox') || 'padrao';
      (grupos[nome] = grupos[nome] || []).push(el);
    });

    Object.keys(grupos).forEach(function (nome) {
      var grupo = grupos[nome];
      grupo.forEach(function (el, i) {
        el.addEventListener('click', function (e) {
          e.preventDefault();
          abrir(grupo, i);
        });
      });
    });
  });
})();


// --- gallery.js ---
/* ============================================================
   Componente: Abas da galeria (Fotos/Vídeos) + modal de vídeo
   Abas:  <button data-tab-alvo="#painel-fotos">
          <div id="painel-fotos" data-tab-panel>
   Vídeo: <div class="video-card" data-video-id="ID_DO_YOUTUBE">
   ============================================================ */
(function () {
  'use strict';

  document.addEventListener('DOMContentLoaded', function () {

    /* ---------------- Abas ---------------- */
    var botoesAba = window.MS.$$('[data-tab-alvo]');
    botoesAba.forEach(function (botao) {
      botao.addEventListener('click', function () {
        var alvo = document.querySelector(botao.getAttribute('data-tab-alvo'));
        if (!alvo) return;

        botoesAba.forEach(function (b) {
          b.classList.remove('is-active');
          b.setAttribute('aria-selected', 'false');
        });
        window.MS.$$('[data-tab-panel]').forEach(function (p) {
          p.hidden = true;
        });

        botao.classList.add('is-active');
        botao.setAttribute('aria-selected', 'true');
        alvo.hidden = false;
      });
    });

    /* ---------------- Modal de vídeo ---------------- */
    var cardsVideo = window.MS.$$('[data-video-id]');
    if (!cardsVideo.length) return;

    var modal = document.createElement('div');
    modal.className = 'ms-video-modal';
    modal.setAttribute('role', 'dialog');
    modal.setAttribute('aria-modal', 'true');
    modal.setAttribute('aria-label', 'Reprodução de vídeo');
    modal.innerHTML =
      '<button type="button" class="ms-lightbox-botao ms-lightbox-fechar" aria-label="Fechar vídeo (Esc)"><i class="fa-solid fa-xmark" aria-hidden="true"></i></button>' +
      '<div class="ms-video-caixa"></div>';
    document.body.appendChild(modal);

    var caixa = modal.querySelector('.ms-video-caixa');
    var btnFechar = modal.querySelector('.ms-lightbox-fechar');

    function abrirVideo(id) {
      if (!id || id.indexOf('SUBSTITUIR') !== -1) {
        // ID ainda não configurado pelo cliente
        caixa.innerHTML =
          '<div class="ms-video-aviso">' +
          '  <i class="fa-brands fa-youtube" style="font-size:2.5rem" aria-hidden="true"></i>' +
          '  <strong>Vídeo ainda não configurado</strong>' +
          '  <span>Adicione o ID do vídeo do YouTube no atributo <code>data-video-id</code> deste card.</span>' +
          '</div>';
      } else {
        caixa.innerHTML =
          '<iframe src="https://www.youtube-nocookie.com/embed/' + encodeURIComponent(id) +
          '?autoplay=1&rel=0" title="Vídeo dos filhotes de Lulu da Pomerânia" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
      }
      modal.classList.add('is-open');
      document.body.style.overflow = 'hidden';
      btnFechar.focus();
    }

    function fecharVideo() {
      modal.classList.remove('is-open');
      caixa.innerHTML = ''; // interrompe a reprodução
      document.body.style.overflow = '';
    }

    btnFechar.addEventListener('click', fecharVideo);
    modal.addEventListener('click', function (e) {
      if (e.target === modal) fecharVideo();
    });
    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape' && modal.classList.contains('is-open')) fecharVideo();
    });

    cardsVideo.forEach(function (card) {
      card.addEventListener('click', function () {
        abrirVideo(card.getAttribute('data-video-id'));
      });
      card.setAttribute('role', 'button');
      card.setAttribute('tabindex', '0');
      card.addEventListener('keydown', function (e) {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          abrirVideo(card.getAttribute('data-video-id'));
        }
      });
    });
  });
})();


// --- vitrine.js ---
/* ============================================================
   Componente: Filtros da vitrine de filhotes
   Chips:  <button data-filtro="todos|femea|macho|pronta">
   Cards:  <article data-sexo="femea|macho" data-status="pronta|breve|reservado">
   ============================================================ */
(function () {
  'use strict';

  document.addEventListener('DOMContentLoaded', function () {
    var chips = window.MS.$$('[data-filtro]');
    var cards = window.MS.$$('[data-sexo]');
    if (!chips.length || !cards.length) return;

    var aviso = document.querySelector('[data-vitrine-vazia]');

    chips.forEach(function (chip) {
      chip.addEventListener('click', function () {
        chips.forEach(function (c) {
          c.classList.remove('is-active');
          c.setAttribute('aria-pressed', 'false');
        });
        chip.classList.add('is-active');
        chip.setAttribute('aria-pressed', 'true');

        var filtro = chip.getAttribute('data-filtro');
        var visiveis = 0;

        cards.forEach(function (card) {
          var corresponde =
            filtro === 'todos' ||
            card.getAttribute('data-sexo') === filtro ||
            (filtro === 'pronta' && card.getAttribute('data-status') === 'pronta');

          card.classList.toggle('card-oculto', !corresponde);

          if (corresponde) {
            visiveis++;
            // Reanima a entrada do card
            card.style.animation = 'none';
            void card.offsetWidth; // reflow força reinício da animação
            card.style.animation = 'vitrine-entrada 0.45s ease both';
          }
        });

        if (aviso) aviso.hidden = visiveis > 0;
      });
    });

    // Keyframe da entrada dos cards (injetado para manter o componente autônomo)
    var estilo = document.createElement('style');
    estilo.textContent =
      '@keyframes vitrine-entrada { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }';
    document.head.appendChild(estilo);
  });
})();


// --- form.js ---
/* ============================================================
   Componente: Formulário de consulta → WhatsApp
   Valida os campos e abre o WhatsApp com a mensagem montada.
   Sem backend: o lead chega diretamente na conversa.
   ============================================================ */
(function () {
  'use strict';

  document.addEventListener('DOMContentLoaded', function () {
    var form = document.querySelector('[data-form-consulta]');
    if (!form) return;

    var campoNome = form.querySelector('[name="nome"]');
    var campoZap = form.querySelector('[name="whatsapp"]');
    var campoSexo = form.querySelector('[name="sexo"]');
    var campoCor = form.querySelector('[name="cor"]');
    var campoMsg = form.querySelector('[name="mensagem"]');
    var honeypot = form.querySelector('[name="site"]'); // campo armadilha anti-spam
    var sucesso = form.querySelector('.form-sucesso');

    /* Máscara simples: mantém apenas dígitos e formata (11) 91234-5678 */
    if (campoZap) {
      campoZap.addEventListener('input', function () {
        var d = campoZap.value.replace(/D/g, '').slice(0, 11);
        var f = d;
        if (d.length > 2) f = '(' + d.slice(0, 2) + ') ' + d.slice(2);
        if (d.length > 7) f = '(' + d.slice(0, 2) + ') ' + d.slice(2, 7) + '-' + d.slice(7);
        campoZap.value = f;
      });
    }

    function marcarErro(campo, temErro) {
      var grupo = campo.closest('.campo-grupo');
      if (grupo) grupo.classList.toggle('tem-erro', temErro);
      campo.setAttribute('aria-invalid', String(temErro));
    }

    form.addEventListener('submit', function (e) {
      e.preventDefault();

      // Bot preencheu o honeypot → ignora silenciosamente
      if (honeypot && honeypot.value !== '') return;

      var valido = true;

      if (!campoNome.value.trim() || campoNome.value.trim().length < 2) {
        marcarErro(campoNome, true);
        valido = false;
      } else {
        marcarErro(campoNome, false);
      }

      var digitos = campoZap.value.replace(/D/g, '');
      if (digitos.length < 10) {
        marcarErro(campoZap, true);
        valido = false;
      } else {
        marcarErro(campoZap, false);
      }

      if (!valido) {
        var primeiroErro = form.querySelector('.tem-erro .campo');
        if (primeiroErro) primeiroErro.focus();
        return;
      }

      /* Monta a mensagem do lead */
      var linhas = [
        'Olá! Vim pelo site do Mundo Spitz Anões e quero consultar a disponibilidade de filhotes. 🐾',
        '',
        '*Nome:* ' + campoNome.value.trim(),
        '*WhatsApp:* ' + campoZap.value.trim()
      ];
      if (campoSexo && campoSexo.value) linhas.push('*Preferência de sexo:* ' + campoSexo.value);
      if (campoCor && campoCor.value) linhas.push('*Cor de interesse:* ' + campoCor.value);
      if (campoMsg && campoMsg.value.trim()) linhas.push('*Mensagem:* ' + campoMsg.value.trim());

      window.open(window.MS.linkWhatsApp(linhas.join('n')), '_blank', 'noopener');

      if (sucesso) {
        sucesso.classList.add('is-visivel');
        setTimeout(function () { sucesso.classList.remove('is-visivel'); }, 8000);
      }
      form.reset();
    });
  });
})();


});
</script>