<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>Documentação — Leitura Focada &amp; Topo</title>

  <!-- Bulma & Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>

  <!-- Bootstrap e fontes -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
  <link rel="stylesheet" href="../css/styles.css"/>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide"/>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>

  <!-- jQuery & deContext -->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script
    src="https://addons.indigobyte.com/drexplain/decontext/v0.1.2/decontext.min.js"
    data-decontext-url="http://helpsinge.lince.com.br/apresentacao.html"
    defer>
  </script>

  <style>
    /* 0) Esconder barras de scroll internas, mantendo overflow funcional */
    [class*="decontext"], [id*="decontext"],
    [class*="dexp"], [id*="dexp"],
    .decontext-wrapper, .dexp-wrapper,
    .dexp-content, .dexp-slide, .slide {
      scrollbar-width: none !important;    /* Firefox */
      -ms-overflow-style: none !important; /* IE 10+ */
    }
    [class*="decontext"]::-webkit-scrollbar,
    [id*="decontext"]::-webkit-scrollbar,
    [class*="dexp"]::-webkit-scrollbar,
    [id*="dexp"]::-webkit-scrollbar,
    .decontext-wrapper::-webkit-scrollbar,
    .dexp-wrapper::-webkit-scrollbar,
    .dexp-content::-webkit-scrollbar,
    .dexp-slide::-webkit-scrollbar,
    .slide::-webkit-scrollbar {
      display: none !important;            /* Chrome, Safari, Opera */
    }

    /* 1) Body com scroll natural */
    html, body {
      margin: 0 !important;
      padding: 0 !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      height: auto !important;
    }

    /* 2) Remove scroll interno das áreas de documento */
    [class*="decontext"], [id*="decontext"],
    [class*="dexp"], [id*="dexp"],
    .decontext-wrapper, .dexp-wrapper,
    .dexp-content, .dexp-slide, .slide {
      overflow: visible !important;
      height: auto !important;
      max-height: none !important;
      position: static !important;
      border: none !important;
      width: 100% !important;
    }

    /* 3) Botões fixos de leitura e voltar ao topo */
    .fixed-read-controls {
      position: fixed !important;
      bottom: 60px !important;
      right: 20px !important;
      display: flex !important;
      align-items: center !important;
      z-index: 2147483660 !important;
      pointer-events: auto !important;
    }
    .fixed-top-button {
      position: fixed !important;
      bottom: 20px !important;
      right: 20px !important;
      z-index: 2147483649 !important;
      pointer-events: auto !important;
    }
    .tooltip-container {
      position: relative !important;
      display: inline-block !important;
      overflow: visible !important;
    }
    .tooltip-text {
      visibility: hidden !important;
      opacity: 0 !important;
      background: rgba(0,0,0,0.8) !important;
      color: #fff !important;
      border-radius: 4px !important;
      padding: 4px 6px !important;
      position: absolute !important;
      top: 50% !important;
      right: calc(100% + 6px) !important;
      transform: translateY(-50%) !important;
      transition: opacity .2s !important;
      white-space: nowrap !important;
      font-size: .75rem !important;
      z-index: 2147483650 !important;
    }
    .tooltip-container:hover .tooltip-text {
      visibility: visible !important;
      opacity: 1 !important;
    }

    .button.custom {
      background: #333 !important;
      color: #fff !important;
      border: none !important;
      border-radius: 16px !important;
      width: 2rem !important;
      height: 2rem !important;
      font-size: 0.6rem !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin: 0 0.3rem !important;
      cursor: pointer !important;
      transition: transform .2s, box-shadow .2s !important;
    }
    .button.custom:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
    }

    /* 5) Sliders de volume e velocidade (verticais) */
    .volume-control-wrapper,
    .speed-control-wrapper {
      position: relative !important;
      display: inline-block !important;
      overflow: visible !important;
    }
    .volume-slider-container,
    .speed-slider-container {
      position: absolute !important;
      bottom: 100% !important;
      left: 50% !important;
      transform: translateX(-50%) translateY(-0.5rem) !important;
      background: rgba(0,0,0,0.8) !important;
      padding: .5rem !important;
      border-radius: 8px !important;
      display: none !important;
      flex-direction: column !important;
      align-items: center !important;
      z-index: 2147483651 !important;
      pointer-events: auto !important;
    }
    .volume-control-wrapper.active .volume-slider-container,
    .speed-control-wrapper.active .speed-slider-container {
      display: flex !important;
    }
    .volume-slider,
    .speed-slider {
      -webkit-appearance: slider-vertical !important;
      writing-mode: bt-lr !important;
      width: 6px !important;
      height: 80px !important;
      background: #555 !important;
      border-radius: 3px !important;
      margin: 0 !important;
    }
    .volume-slider::-webkit-slider-thumb,
    .volume-slider::-moz-range-thumb,
    .speed-slider::-webkit-slider-thumb,
    .speed-slider::-moz-range-thumb {
      width: 12px !important;
      height: 12px !important;
      background: #fff !important;
      border-radius: 50% !important;
      cursor: pointer !important;
    }

    /* Ajustes VLibras: forçar exibição do ícone */
    .vw-access-button {
      position: fixed !important;
      bottom: 20px !important;
      right: 20px !important;
      display: block !important;
      width: 48px !important;
      height: 48px !important;
      z-index: 2147483670 !important;
    }
    .vw-plugin-wrapper {
      display: block !important;
      z-index: 2147483669 !important;
    }

    /* 6) Seus estilos originais de layout, cores e fontes */
    header {
      background-color: rgba(223, 235, 240, 0.30) !important;
    }
    footer {
      background-color: #c21732 !important;
      font-size: 15px !important;
      font-family: 'Open Sans', sans-serif !important;
      text-align: center !important;
      opacity: 0.8 !important;
    }
    .container-xxl {
      position: sticky !important;
    }
    .slide {
      min-height: 100vh !important;
      height: auto !important;
    }
    .container-fluid {
      margin: 0 !important;
    }
    .container {
      margin: 30px !important;
      padding: 15px !important;
    }
    li a {
      padding: 5px 10px !important;
      margin: 0 !important;
      border: 0 !important;
      background: #fff !important;
      text-decoration: none !important;
    }
    ul li a:hover {
      color: #f5f5f5 !important;
      border-color: #fdf8f8 !important;
    }
    ul li {
      color: #FFFCF8 !important;
      font-size: 16px !important;
      text-transform: uppercase !important;
      margin: 5px 0 0 1px !important;
    }
    .flex-container {
      display: inline-flex !important;
      flex-wrap: nowrap !important;
      justify-content: center !important;
      align-items: center !important;
      width: 100vw !important;
      min-height: 100vh !important;
      height: auto !important;
      box-shadow: 0 0 5rem rgba(255,255,255,0.1) !important;
      backdrop-filter: blur(2px) !important;
      color: #50a0dc !important;
    }
    .flex-container > div {
      margin: 10px !important;
      padding: 10px !important;
      font-size: 60px !important;
      position: static !important;
    }
    .card {
      border-radius: 15px !important;
      box-shadow: 10px 10px 18px rgba(50,50,50,0.22) !important;
      padding: 30px !important;
      margin: 60px !important;
      transition: all 0.9s ease-out !important;
      position: relative !important;
    }
    .card:hover {
      transform: translateY(-15px) !important;
      cursor: pointer !important;
    }
    .cartao-gree {
      background: #a3a5ae !important;
    }
    .card p {
      color: #a3a5ae !important;
      font-size: 16px !important;
    }
    .image {
      max-width: 15rem !important;
      max-height: 9rem !important;
      width: 150px !important;
      height: 135px !important;
      justify-content: center !important;
      border-radius: 10px !important;
    }
    .blue,
    .green,
    .red {
      border-left: 3px solid #c21732 !important;
    }
    .h4 {
      color: #fff1f3 !important;
      font-family: 'Segoe UI', sans-serif !important;
      font-weight: 100 !important;
    }
    body,
    p,
    .normal-text {
      font-family: 'Segoe UI', sans-serif !important;
      font-size: 15pt !important;
      color: #000 !important;
      text-align: left !important;
      line-height: 1.15 !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    h1,
    .heading1 {
      font-family: 'Segoe UI', sans-serif !important;
      font-size: 18pt !important;
      color: #008fff !important;
      font-weight: bold !important;
      text-align: center !important;
      line-height: 1.15 !important;
    }
    h2,
    .heading2 {
      font-family: Calibri, sans-serif !important;
      font-size: 15pt !important;
      color: #000 !important;
      text-align: center !important;
      line-height: 1.15 !important;
      text-transform: none !important;
    }
    h3,
    .heading3 {
      font-family: 'Segoe UI', sans-serif !important;
      font-size: 22pt !important;
      color: #c21732 !important;
      font-weight: bold !important;
      text-align: left !important;
      line-height: 1.15 !important;
    }
    body .New_normal,
    body .New_normal * {
      font-family: 'Segoe UI', sans-serif !important;
      font-size: 25pt !important;
      color: #c21732 !important;
      font-weight: bold !important;
      text-align: center !important;
      line-height: 1.15 !important;
    }
    .New_New_normal {
      font-family: Calibri, sans-serif !important;
      font-size: 15pt !important;
      color: #000 !important;
      text-align: justify !important;
      line-height: 1.15 !important;
      text-transform: none !important;
    }
    .New_New_New_normal {
      font-family: Calibri, sans-serif !important;
      font-size: 12pt !important;
      color: #000 !important;
      font-weight: bold !important;
      font-style: italic !important;
      text-align: center !important;
      line-height: 1.15 !important;
      margin: 0 !important;
    }
  </style>
</head>
<body>

  <!-- Snippet Oficial VLibras (inserido limpo antes de qualquer outro script) -->
  <div vw class="enabled">
    <div vw-access-button class="active"></div>
    <div vw-plugin-wrapper><div class="vw-plugin-top-wrapper"></div></div>
  </div>
  <script src="https://vlibras.gov.br/app/vlibras-plugin.js" defer></script>
  <script defer>
    window.addEventListener('load', () => {
      new window.VLibras.Widget('https://vlibras.gov.br/app');
    });
  </script>
  <!-- Fim do Snippet VLibras -->

  <!-- CONTROLES DE LEITURA -->
  <div id="read-controls" class="fixed-read-controls"></div>

  <!-- BOTÃO “Topo” -->
  <div class="fixed-top-button tooltip-container">
    <button id="top-btn" class="button custom"><i class="fas fa-arrow-up"></i></button>
    <div class="tooltip-text">Voltar ao Topo</div>
  </div>

  <!-- IFRAME COM CONTEÚDO -->
  <iframe id="docFrame" src="seu_conteudo.html" scrolling="no" style="width:100%; border:none;"></iframe>

  <!-- BOTÃO FAQ -->
  <div class="fixed-faq-button tooltip-container">
    <button id="faq-toggle" class="button custom"><i class="fas fa-question"></i></button>
    <div class="tooltip-text">Perguntas Frequentes</div>
  </div>

  <!-- PAINEL FAQ (conteúdo inserido dinamicamente) -->
  <div id="faq-panel">
    <button id="faq-close" aria-label="Fechar">×</button>
    <h2>Perguntas Frequentes</h2>
    <div id="faq-content"></div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const ctrls = document.getElementById('read-controls');
      let voices = [], blocks = [], idx = 0,
          volume = 1, rate = 1.0, state = 'idle',
          pausedBlockIndex = 0, pausedCharIndex = 0, isInWelcome = false;

      function loadVoices() {
        voices = speechSynthesis.getVoices();
      }
      speechSynthesis.onvoiceschanged = loadVoices;
      loadVoices();

      function getBestVoice() {
        const prefer = ['Microsoft Helena Desktop','Microsoft Maria Desktop','Google português do Brasil','Daniel','Maria'];
        return voices.find(v =>
          prefer.some(n => v.name.includes(n) && v.lang.startsWith('pt'))
        ) || voices.find(v => v.lang.startsWith('pt')) || voices[0];
      }

      function getContentText() {
        const doc = document.getElementById('docFrame').contentDocument || document;
        const ctr = doc.getElementById('dexp-content')
          || doc.querySelector('.dexp-content')
          || doc.body;
        const hide = ctr.querySelectorAll(
          'nav:not([id*="sumario"]), aside, .sidebar, .menu, #index, .search,' +
          '#read-controls, .fixed-top-button, .tooltip-text'
        );
        hide.forEach(el => el.style.display = 'none');
        const arr = Array.from(
          ctr.querySelectorAll('h1,h2,h3,h4,h5,h6,p,li,td,th,figcaption')
        ).filter(el => el.offsetParent).map(el => el.innerText.trim());
        hide.forEach(el => el.style.display = '');
        return arr.join(' ');
      }

      function splitToSentences(txt) {
        const m = txt.match(/[^.!?]+[.!?]+/g);
        return m ? m.map(s => s.trim()) : [txt];
      }

      function speakUtterance(text, i, start = 0) {
        const u = new SpeechSynthesisUtterance(text);
        u.voice = getBestVoice();
        u.rate = rate;
        u.pitch = 1.15;
        u.volume = volume;
        u.onboundary = e => {
          if (e.name === 'word') {
            pausedCharIndex = start + e.charIndex;
            pausedBlockIndex = i;
          }
        };
        u.onend = () => {
          pausedCharIndex = 0;
          pausedBlockIndex = i + 1;
          setTimeout(speakNext, 500);
        };
        speechSynthesis.speak(u);
      }

      function speakNext() {
        if (state !== 'reading') return;
        if (idx >= blocks.length) {
          state = 'idle';
          renderControls();
          return;
        }
        speakUtterance(blocks[idx], idx, 0);
        idx++;
      }

      function startReading() {
        speechSynthesis.cancel();
        blocks = splitToSentences(
          getContentText().replace(/([\uD800-\uDBFF][\uDC00-\uDFFF])/g, '')
        ).filter(s => s && !/(página anterior|próxima página|impressão)/i.test(s));
        idx = 0;
        pausedBlockIndex = 0;
        pausedCharIndex = 0;
        state = 'reading';
        isInWelcome = true;
        renderControls();
        const w = new SpeechSynthesisUtterance(
          "Olá! Seja bem-vindo ao Help Singe. Estarei te acompanhando durante a leitura desta documentação! Vamos começar?"
        );
        w.voice = getBestVoice();
        w.rate = rate;
        w.pitch = 1.15;
        w.volume = volume;
        w.onend = () => {
          isInWelcome = false;
          setTimeout(speakNext, 500);
        };
        speechSynthesis.speak(w);
      }

      function togglePausePlay() {
        if (state === 'reading') {
          speechSynthesis.pause();
          state = 'paused';
        } else if (state === 'paused') {
          speechSynthesis.resume();
          state = 'reading';
        }
        renderControls();
      }

      function stopReading() {
        speechSynthesis.cancel();
        state = 'idle';
        renderControls();
      }

      function renderControls() {
        ctrls.innerHTML = '';
        if (state === 'idle') {
          const wrap = document.createElement('div');
          wrap.className = 'tooltip-container';
          const btn = document.createElement('button');
          btn.className = 'button custom';
          btn.innerHTML = '<i class="fas fa-play"></i>';
          btn.onclick = startReading;
          wrap.appendChild(btn);
          const tip = document.createElement('div');
          tip.className = 'tooltip-text';
          tip.innerText = 'Ler Documentação';
          wrap.appendChild(tip);
          ctrls.appendChild(wrap);
        } else {
          [['fa-volume-up','Volume'],['fa-tachometer-alt','Velocidade']].forEach(([ic,lab], i) => {
            const isV = i === 0;
            const wr = document.createElement('div');
            wr.className = (isV ? 'volume-control-wrapper' : 'speed-control-wrapper') + ' tooltip-container';
            const bt = document.createElement('button');
            bt.className = 'button custom';
            bt.innerHTML = `<i class="fas ${ic}"></i>`;
            bt.onclick = () => wr.classList.toggle('active');
            const sc = document.createElement('div');
            sc.className = isV ? 'volume-slider-container' : 'speed-slider-container';
            const sl = document.createElement('input');
            sl.type = 'range';
            sl.className = isV ? 'volume-slider' : 'speed-slider';
            if (isV) {
              sl.min = 0;
              sl.max = 100;
              sl.value = volume * 100;
            } else {
              sl.min = 0.5;
              sl.max = 2;
              sl.step = 0.1;
              sl.value = rate;
            }
            sl.oninput = e => {
              if (isV) volume = e.target.value / 100;
              else rate = parseFloat(e.target.value);
              if (state === 'reading' && !isInWelcome) {
                speechSynthesis.cancel();
                speakUtterance(
                  blocks[pausedBlockIndex].substring(pausedCharIndex),
                  pausedBlockIndex,
                  pausedCharIndex
                );
                idx = pausedBlockIndex + 1;
              }
            };
            sc.appendChild(sl);
            wr.appendChild(bt);
            wr.appendChild(sc);
            const tp = document.createElement('div');
            tp.className = 'tooltip-text';
            tp.innerText = lab;
            wr.appendChild(tp);
            ctrls.appendChild(wr);
          });

          // Pause/Play
          {
            const wr = document.createElement('div');
            wr.className = 'tooltip-container';
            const bt = document.createElement('button');
            bt.className = 'button custom';
            const icon = state === 'paused' ? 'fa-play' : 'fa-pause';
            bt.innerHTML = `<i class="fas ${icon}"></i>`;
            bt.onclick = togglePausePlay;
            wr.appendChild(bt);
            const tp = document.createElement('div');
            tp.className = 'tooltip-text';
            tp.innerText = state === 'paused' ? 'Continuar' : 'Pausar';
            wr.appendChild(tp);
            ctrls.appendChild(wr);
          }

          // Stop
          {
            const wr = document.createElement('div');
            wr.className = 'tooltip-container';
            const bt = document.createElement('button');
            bt.className = 'button custom';
            bt.innerHTML = `<i class="fas fa-stop"></i>`;
            bt.onclick = stopReading;
            wr.appendChild(bt);
            const tp = document.createElement('div');
            tp.className = 'tooltip-text';
            tp.innerText = 'Parar';
            wr.appendChild(tp);
            ctrls.appendChild(wr);
          }
        }
      }

      document.getElementById('top-btn').onclick = () => {
        const frame = document.getElementById('docFrame');
        (frame.contentWindow || window).scrollTo({ top: 0, behavior: 'smooth' });
      };

      // Inicializa controles de leitura
      renderControls();

      // FAQ open/close
      const faqToggle = document.getElementById('faq-toggle');
      const faqPanel  = document.getElementById('faq-panel');
      const faqClose  = document.getElementById('faq-close');
      faqToggle.addEventListener('click', () => {
        faqPanel.style.display = 'block';
      });
      faqClose.addEventListener('click', () => {
        faqPanel.style.display = 'none';
      });
    });
  </script>

</body>
</html>
