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

<template>
  <footer>

    <div class="top">
      <div class="message">
        <div class="logo">
          <NuxtLink to="/">
            <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>
          -->
          <!-- Truth Social
          <div class="icon truth">
            <NuxtLink to="https://truthsocial.com/@tinysites" target="_BLANK" aria-label="truth"><span class="icon-truth"></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>
          -->
          <!-- Product Hunt
          <div class="icon product-hunt">
            <NuxtLink to="https://www.producthunt.com/products/tinysites" target="_BLANK" aria-label="product-hunt"><span class="icon-product-hunt"></span></NuxtLink>
          </div>
          -->
          <!-- Discuss 
          <div class="icon discuss">
            <NuxtLink to="https://discuss.tinysites.com" target="_BLANK" aria-label="discuss"><span class="icon-discuss"></span></NuxtLink>
          </div>
          -->
          <!-- rss
          <div class="icon rss">
            <NuxtLink to="/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="/">Overview</NuxtLink></li>
        <li><NuxtLink to="/#pricing">Pricing</NuxtLink></li>
        <li><NuxtLink to="/domains">Domains</NuxtLink></li>
        <!-- <li><NuxtLink to="/integrations">Integrations</NuxtLink></li> -->
      </ul>
      <ul class="links company">
        <li><h4>Company</h4></li>
        <!-- <li><NuxtLink :to="'https://about.' + host" target="_BLANK">About us</NuxtLink></li> -->
        <li><NuxtLink to="/docs/terms">Terms of Use</NuxtLink></li>
        <li><NuxtLink :to="'https://status.' + host" target="_BLANK">System status</NuxtLink></li>
        <li><NuxtLink to="/docs/changelog">Changelog</NuxtLink></li>
      </ul>
      <ul class="links resources">
        <li><h4>Resources</h4></li>
        <!-- <li><NuxtLink :to="'https://discuss.' + host" target="_BLANK">Community</NuxtLink></li> -->
        <li><NuxtLink to="/support">Support</NuxtLink></li>
        <li><NuxtLink to="/showcase">Showcase</NuxtLink></li>
        <li><NuxtLink to="/docs/get-started">Documentation</NuxtLink></li>
      </ul>
    </div>

    <div class="bottom">
      <p class="pitch">Create one-page websites in minutes.</p>
      <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 2025. All Rights Reserved.</p>
    </div>

  </footer>
</template>