script.js

async function loadQuote() {
  const quoteEl = document.getElementById('quote');
  quoteEl.textContent = 'Loading…';
  try {
    const res = await fetch('https://zapi.christian.hackclub.app/quote/random');
    if (!res.ok) throw new Error('Network response was not ok');
    const data = await res.json();
    console.log(data); // check JSON structure once
    // Keep the element as a link (<a>); only replace its visible text
    quoteEl.textContent = data.quote || data.text || JSON.stringify(data);
  } catch (err) {
    console.error(err);
    quoteEl.textContent = 'Failed to load quote.';
  }
}

// Load quote immediately on page load
loadQuote();

// Photo info toggle behavior
document.addEventListener('DOMContentLoaded', () => {
  const photo = document.getElementById('badge-photo');
  const modal = document.getElementById('photo-modal');
  const info = modal && modal.querySelector('.modal-content');
  const backdrop = modal && modal.querySelector('[data-modal-backdrop]');
  const closeBtn = document.getElementById('photo-close');

  if (!photo || !info) return;

  let lastFocused = null;

  function openModal() {
    if (!modal) return;
    lastFocused = document.activeElement;
    modal.classList.remove('hidden');
    modal.setAttribute('aria-hidden', 'false');
    photo.setAttribute('aria-expanded', 'true');
    // lock scroll
    document.body.style.overflow = 'hidden';
    // focus first focusable element inside modal (close button)
    if (closeBtn) closeBtn.focus();
  }

  function closeModal() {
    if (!modal) return;
    modal.classList.add('hidden');
    modal.setAttribute('aria-hidden', 'true');
    photo.setAttribute('aria-expanded', 'false');
    document.body.style.overflow = '';
    // restore focus
    if (lastFocused) lastFocused.focus();
  }

  function toggleModal() {
    if (!modal) return;
    if (modal.classList.contains('hidden')) openModal(); else closeModal();
  }

  photo.addEventListener('click', toggleModal);
  photo.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      toggleModal();
    }
  });

  // Click backdrop to close
  if (backdrop) backdrop.addEventListener('click', closeModal);
  if (closeBtn) closeBtn.addEventListener('click', closeModal);

  // Close on ESC
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') closeModal();
    // simple focus trap: keep focus inside modal when open
    if (e.key === 'Tab' && modal && !modal.classList.contains('hidden')) {
      const focusable = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
      if (!focusable.length) return;
      const first = focusable[0];
      const last = focusable[focusable.length - 1];
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault();
        last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault();
        first.focus();
      }
    }
  });

  // Copy snippet button functionality (in modal)
  const copyBtn = document.getElementById('copy-img-snippet');
  const snippetEl = document.getElementById('img-snippet');
  const copyConfirm = document.getElementById('copy-confirm');

  if (copyBtn && snippetEl) {
    copyBtn.addEventListener('click', async () => {
      const text = snippetEl.textContent;
      try {
        await navigator.clipboard.writeText(text);
        if (copyConfirm) {
          copyConfirm.classList.remove('hidden');
          setTimeout(() => copyConfirm.classList.add('hidden'), 1600);
        }
      } catch (err) {
        console.error('Copy failed', err);
      }
    });
  }
});