<div class="vc-app">
  <div class="vc-header">
    <h2>Site Navigation</h2>
    <button type="button" class="vc-mic" id="vcMic" aria-label="Navigate by voice">
      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 2a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v1a7 7 0 0 1-14 0v-1M12 18v4M8 22h8"/></svg>
    </button>
  </div>

  <p class="vc-hint" id="vcHint">Click the mic and say a page name, like "pricing" or "contact".</p>

  <nav class="vc-list" id="vcList">
    <a href="#home" class="vc-link" data-page="home">Home</a>
    <a href="#features" class="vc-link" data-page="features">Features</a>
    <a href="#pricing" class="vc-link" data-page="pricing">Pricing</a>
    <a href="#docs" class="vc-link" data-page="documentation">Documentation</a>
    <a href="#blog" class="vc-link" data-page="blog">Blog</a>
    <a href="#contact" class="vc-link" data-page="contact">Contact</a>
  </nav>

  <p class="vc-transcript" id="vcTranscript"></p>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; justify-content: center; padding: 40px 20px; }

.vc-app { width: 100%; max-width: 360px; }

.vc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.vc-header h2 { font-size: 18px; font-weight: 800; color: #1e293b; }

.vc-mic {
  width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid #e2e8f0;
  background: #fff; color: #6366f1; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s, box-shadow 0.15s;
}
.vc-mic:hover { background: #f1f5f9; }
.vc-mic.listening { background: #eef2ff; box-shadow: 0 0 0 5px rgba(99,102,241,0.16); animation: vc-pulse 1.1s ease-in-out infinite; }
@keyframes vc-pulse { 0%, 100% { box-shadow: 0 0 0 5px rgba(99,102,241,0.16); } 50% { box-shadow: 0 0 0 9px rgba(99,102,241,0.1); } }

.vc-hint { font-size: 12px; color: #94a3b8; line-height: 1.6; margin-bottom: 14px; }

.vc-list { display: flex; flex-direction: column; gap: 3px; }
.vc-link {
  display: block; padding: 11px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
  color: #334155; text-decoration: none; background: #fff; border: 1px solid #e2e8f0; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.vc-link:hover { background: #f1f5f9; }
.vc-link.matched { background: #eef2ff; border-color: #6366f1; color: #4338ca; }

.vc-transcript { margin-top: 12px; font-size: 11.5px; color: #94a3b8; font-style: italic; min-height: 16px; text-align: center; }

const micBtn = document.getElementById('vcMic');
const hint = document.getElementById('vcHint');
const transcriptEl = document.getElementById('vcTranscript');
const links = Array.from(document.querySelectorAll('.vc-link'));

const SpeechRecognitionImpl = window.SpeechRecognition || window.webkitSpeechRecognition;

function normalize(text) {
  return text.toLowerCase().replace(/[^a-z0-9\s]/g, '').trim();
}

// A heard phrase matches a page if the page name appears in the phrase, or
// the phrase appears in the page name — this tolerates "go to pricing" as
// well as a recognizer that clips the phrase down to just "pricing page".
function findMatch(heard) {
  const spoken = normalize(heard);
  return links.find((link) => {
    const page = normalize(link.dataset.page);
    return spoken.includes(page) || page.includes(spoken);
  });
}

function clearHighlights() {
  links.forEach((l) => l.classList.remove('matched'));
}

function handleResult(heardText) {
  transcriptEl.textContent = 'Heard: \u201c' + heardText + '\u201d';
  const match = findMatch(heardText);
  clearHighlights();
  if (match) {
    match.classList.add('matched');
    hint.textContent = 'Navigating to ' + match.textContent + '\u2026';
    match.scrollIntoView({ block: 'nearest' });
  } else {
    hint.textContent = 'No matching page found. Try saying a link name directly.';
  }
}

function startListening() {
  if (!SpeechRecognitionImpl) {
    hint.textContent = 'Voice navigation is not supported in this browser \u2014 try Chrome or Edge, or click a link below.';
    return;
  }

  const recognition = new SpeechRecognitionImpl();
  recognition.lang = 'en-US';
  recognition.interimResults = false;
  recognition.maxAlternatives = 1;

  micBtn.classList.add('listening');
  hint.textContent = 'Listening\u2026 say a page name.';
  transcriptEl.textContent = '';

  recognition.addEventListener('result', (e) => {
    const heardText = e.results[0][0].transcript;
    handleResult(heardText);
  });

  recognition.addEventListener('error', (e) => {
    hint.textContent = 'Could not hear that (' + e.error + '). Click the mic to try again.';
  });

  recognition.addEventListener('end', () => {
    micBtn.classList.remove('listening');
  });

  recognition.start();
}

micBtn.addEventListener('click', startListening);

links.forEach((link) => {
  link.addEventListener('click', () => {
    clearHighlights();
    link.classList.add('matched');
  });
});