---
// index.astro
import Layout from '../layouts/layout.astro';
---

<Layout>
  <div class="mt-24 mx-auto max-w-4xl px-4">
    <div class="text-gray-200 text-center">
      <h1 class="text-6xl font-bold text-gray-200 mb-10">Resolve .fur Domains</h1>
    </div>
  </div>

  <div class="bg-gray-900 text-center w-96 mx-auto p-6 rounded-lg shadow-lg">
    <h3 class="text-xl font-semibold mb-4 bg-gradient-to-r from-pink-500 to-orange-400 inline-block text-transparent bg-clip-text">.fur DNS Servers</h3>
    <div class="p-0.5 w-full mr-14 max-w-4xl space-x-4 bg-gradient-to-r from-purple-500 via-pink-500 to-amber-500 rounded-lg shadow-inner">
      <p id="domain-input" class="p-2 border w-full border-gray-600 rounded-lg bg-gray-900 text-white placeholder-gray-400 text-2xl font-bold flex-grow z-10 relative">165.140.127.67</p>
    </div>
    <div class="p-0.5 mt-4 w-full mr-14 max-w-4xl space-x-4 bg-gradient-to-r from-purple-500 via-pink-500 to-amber-500 rounded-lg shadow-inner">
      <p id="domain-input" class="p-2 border w-full border-gray-600 rounded-lg bg-gray-900 text-white placeholder-gray-400 text-2xl font-bold flex-grow z-10 relative">128.254.227.250</p>
    </div>
    <a href="/dns"><button class="bg-blue-900 text-white mt-4 px-4 py-2 rounded-lg hover:bg-blue-950 transition">Learn More</button></a>
  </div>

  <div class="relative w-full py-16">
    <div class="absolute inset-0 bg-cover bg-center" style="filter: blur(2px);"></div>
    <div class="relative z-10 mx-auto max-w-4xl text-center text-gray-200">
      <h2 class="text-4xl font-bold mb-3 text-gray-200">Registration coming soon!</h2>
      <h3 class="text-2xl font-semibold mb-12 text-gray-200">Why not checkout some of these domains in the meantime?</h3>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8 px-4">
        <div class="bg-gray-900 p-6 rounded-lg shadow-lg">
          <h3 class="text-xl font-semibold mb-4 text-white">whois.fur</h3>
          <p class="text-gray-300">Look up the contact and registration information for any participating .fur domains! While this one doesn't have a website, try these commands:</p>
          <p class="font-bold text-white mt-2">Windows</p>
          <div class="p-0.25 w-full max-w-4xl mt-2 space-x-4 bg-grey-300 rounded-lg shadow-inner">
            <p id="domain-input" class="p-2 border w-full border-gray-600 rounded-lg bg-gray-900 text-white placeholder-gray-400 text-sm font-semibold flex-grow z-10 relative">nslookup example.fur whois.fur</p>
          </div>
          <p class="font-bold text-white mt-2">MacOS/Linux</p>
          <div class="p-0.25 w-full max-w-4xl mt-2 space-x-4 bg-grey-300 rounded-lg shadow-inner">
            <p id="domain-input" class="p-2 border w-full border-gray-600 rounded-lg bg-gray-900 text-white placeholder-gray-400 text-sm font-semibold flex-grow z-10 relative">whois example.fur -h whois.fur</p>
          </div>
        </div>
        <div class="bg-gray-900 p-6 rounded-lg shadow-lg">
          <h3 class="text-xl font-semibold mb-4 text-white">list.fur</h3>
          <p class="text-gray-300">An SSH-based .fur service directory! Try it out for yourself and discover fun services available over SSH or HTTP/S on .fur!</p>
          <div class="p-0.25 w-full max-w-4xl mt-6 space-x-4 bg-grey-300 rounded-lg shadow-inner">
            <p id="domain-input" class="p-2 border w-full border-gray-600 rounded-lg bg-gray-900 text-white placeholder-gray-400 text-sm font-semibold flex-grow z-10 relative">ssh list.fur</p>
          </div>
        </div>
        <div class="bg-gray-900 p-6 rounded-lg shadow-lg">
          <h3 class="text-xl font-semibold mb-4 text-white">forum.fur</h3>
          <p class="text-gray-300">A forum run by us for discussions relating to the TLD! Share your new site, get advice on a project, or just talk and meet new furs!</p>
          <div class="p-0.25 w-full max-w-4xl mt-6 space-x-4 bg-grey-300 rounded-lg shadow-inner">
            <p id="domain-input" class="p-2 border w-full border-gray-600 rounded-lg bg-gray-900 text-white placeholder-gray-400 text-sm font-semibold flex-grow z-10 relative"><a href="https://forum.fur/">https://forum.fur/</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <footer class="bg-gray-800 text-gray-400 py-6">
    <div class="mx-auto max-w-4xl text-center">
      <div class="mb-4">
        <a href="/terms-of-service" class="hover:underline mx-2">Terms of Service</a>
        <a href="/privacy" class="hover:underline mx-2">Privacy Policy</a>
      </div>
      <div>
        <a href="https://discord.gg/E3Wt94yRSD" class="hover:underline mx-2">Discord</a>
      </div>
    </div>
  </footer>

  <script type="text/javascript">
    function registerDomain() {
      const input = document.getElementById('domain-input');
      const domainName = encodeURIComponent(input.value.trim());
      if (domainName) {
        window.location.href = `/register?name=${domainName}`;
      }
    }
  </script>
</Layout>