<script setup>  
  const host = hostname()
</script>

<template>
  <footer>

    <div class="top">
      <div class="message">
        <div class="logo">
          <NuxtLink :to="host">
            <img src="/img/logo.svg" alt="tinysites" />
          </NuxtLink>
        </div>
        <div class="social">
          <!-- Twitter -->
          <div class="icon twitter">
            <NuxtLink to="https://x.com/TinysitesHQ" target="_BLANK" aria-label="x.com"><span class="icon-x"></span></NuxtLink>
          </div>
          <!-- Gab -->
          <div class="icon gab">
            <NuxtLink to="https://gab.com/tinysites" target="_BLANK" aria-label="Gab"><span class="icon-gab"></span></NuxtLink>
          </div>
          <!-- Discuss
          <div class="icon discuss">
            <NuxtLink to="https://discuss.inspin.io" target="_BLANK" aria-label="discuss"><span class="icon-discuss"></span></NuxtLink>
          </div>
          -->
          <!-- Dribbble -->
          <div class="icon dribbble">
            <NuxtLink to="https://dribbble.com/tinysites" target="_BLANK" aria-label="Dribbble"><span class="icon-dribbble"></span></NuxtLink>
          </div>
          <!-- Minds -->
          <div class="icon minds">
            <NuxtLink to="https://www.minds.com/tinysites" target="_BLANK" aria-label="minds"><span class="icon-minds"></span></NuxtLink>
          </div>
          <!-- rss -->
          <div class="icon rss">
            <NuxtLink :to="host + 'rss'" target="_BLANK" aria-label="rss"><span class="icon-rss"></span></NuxtLink>
          </div>
        </div>
      </div>
      <ul class="links product">
        <li><h4>Product</h4></li>
        <li><NuxtLink :to="host + 'overview'" target="_BLANK">Overview</NuxtLink></li>
        <li><NuxtLink :to="host + 'pricing'" target="_BLANK">Pricing</NuxtLink></li>
        <li><NuxtLink :to="host + 'new'" target="_BLANK">Templates</NuxtLink></li>
        <li><NuxtLink :to="host + 'integrations'" target="_BLANK">Integrations</NuxtLink></li>
      </ul>
      <ul class="links company">
        <li><h4>Company</h4></li>
        <li><NuxtLink :to="host + 'about'" target="_BLANK">About us</NuxtLink></li>
        <li><NuxtLink :to="host + 'contact'" target="_BLANK">Contact</NuxtLink></li>
        <li><NuxtLink :to="host + 'legal/terms'" target="_BLANK">Terms of Use</NuxtLink></li>
        <li><NuxtLink to="https://git.inspin.io/tinysites/tinysites.com/releases" target="_BLANK">Changelog</NuxtLink></li>
      </ul>
      <ul class="links resources">
        <li><h4>Resources</h4></li>
        <li><NuxtLink to="https://discuss.inspin.io" target="_BLANK">Community</NuxtLink></li>
        <li><NuxtLink :to="host + 'help'" target="_BLANK">Support</NuxtLink></li>
        <li><NuxtLink :to="host + 'showcase'" target="_BLANK">Showcase</NuxtLink></li>
        <li><NuxtLink :to="host + 'docs/getting-started'" target="_BLANK">Documentation</NuxtLink></li>
      </ul>
    </div>

    <div class="bottom">
      <p class="pitch">Create a website everyone will love.</p> <!-- Create a .tinysite you will love. 🤝 -->
      <p class="tagline">Sharing recipes or starting a business, we make it easy to launch your website.</p> <!--your next project -->
      <p class="copy"><span class="icon-copyright"></span> Inspin Digital LLC. All Rights Reserved.</p>
    </div>

  </footer>
</template>