<div class="wompum-demo max-w-2xl mx-auto">
  <h2 class="text-2xl font-bold mb-4">What are the color grids?</h2>

  <p>The color scheme on this website is inspired by <em><a href="http://n2t.net/ark:/65665/ws63912f5dd-e703-4759-8c31-33ac98b3c190">Constitutional Wampum</a></em> by Robert Houle. This is a tribute to the convergence in that work between the long legacy of political protocol-building through wampum belts in Indigenous communities of North America and a pixelated aesthetic that evokes life in the digital world. In the concept of protocol, the ancient practices and recent technologies converge.</p>
  <p>The site uses the following protocol to generate the colorful wampum style grid.</p>
  
  <div class="mb-8">
    <label class="block mb-2">Enter text to generate a grid:</label>
    <input type="text" 
           class="w-full p-2 border rounded font-iosevka bg-sand-100 dark:bg-gray-800"
           placeholder="Type something..."
           value="{{ .Site.Title}}"
           oninput="updateWompumDemoGrid(this.value)">
  </div>

  <p>First we generate a sigil by removing spaces, turning to lowercase, removing anything that isn't a consonant, removing repeat letters, find the unicode character number, and finally get the digital root of those numbers. From there the sigil digits are used to choose a color from our pallet.</p>

  <ol class="transformation-steps mb-8 font-iosevka pl-0 list-['↪']">
    <li>
      <span class="font-bold md:inline block">Original Text:</span>
      <span class="text-input-display"></span>
    </li>
    <li>
      <span class="font-bold md:inline block">Lowercase:</span>
      <span class="text-cleaned-display"></span>
    </li>
    <li>
      <span class="font-bold md:inline block">Consonants only:</span>
      <span class="text-consonants-display"></span>
    </li>
    <li>
      <span class="font-bold md:inline block">Unique consonants:</span>
      <span class="text-unique-display"></span>
    </li>
    <li>
      <span class="font-bold md:inline block">Letters to numbers:</span>
      <span class="text-sigil-numbers"></span>
    </li>
    <li>
      <span class="font-bold md:inline block">Digital root:</span>
      <span class="text-sigil-root"></span>
    </li>
    <li>
      <span class="font-bold md:inline block">The final grid:</span>
    </li>
  </ol>

  <div class="wompum-container wompum-container--demo h-48 mb-8">
    <div class="wompum-grid h-full"
         data-text="{{ .Site.Title}}"
         data-columns="5"
         data-rows="3">
    </div>
  </div>

  <style>
    .wompum-container--demo {
      overflow: hidden;
    }
    .wompum-container--demo .wompum-cell {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2em;
      color: #fff;
    }
    .wompum-container--demo .wompum-cell::after {
      content: attr(data-sigil-digit);
      font-size: 0.5em;
    }
  </style>

  <script>
    // call function on page load
    document.addEventListener('DOMContentLoaded', function() {
      const input = document.querySelector('.wompum-demo input');
      updateWompumDemo(input.value);
    });

    function updateWompumDemoGrid(text) {

      updateWompumDemo(text);

      // Update grid
      const grid = document.querySelector('.wompum-demo .wompum-grid');
      grid.dataset.text = text;

      // Remove existing grid
      while (grid.firstChild) {
        grid.firstChild.remove();
      }

      // Reinitialize grid
      new WompumGrid(grid).init();
    }
    
    function updateWompumDemo(text) {
      // Update displays
      document.querySelector('.text-input-display').textContent = text;
      document.querySelector('.text-cleaned-display').textContent = text.toLowerCase().replace(/[^a-z]/g, '');
      document.querySelector('.text-consonants-display').textContent = text.toLowerCase().replace(/[^a-z]/g, '').replace(/[aeiou]/g, '');
      
      const uniqueConsonants = [...new Set(text.toLowerCase().replace(/[^a-z]/g, '').replace(/[aeiou]/g, ''))].join('');
      document.querySelector('.text-unique-display').textContent = uniqueConsonants;
      
      // Show character to number conversion
      const charNumbers = [...uniqueConsonants].map(char => char.charCodeAt(0)).join(', ');
      document.querySelector('.text-sigil-numbers').textContent = charNumbers;
      
      // Show digital root calculation
      const sigilArray = Sigil.generate(text);
      document.querySelector('.text-sigil-root').textContent = sigilArray.join(', ');
      
      
    }
  </script>
</div>
