<template>
  <div class="mx-auto max-w-5xl px-4 sm:px-6">
    <section class="py-16 text-center sm:py-24">
      <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-5xl">
        DNS Test
      </h1>
      <p class="mx-auto mt-4 max-w-xl text-lg text-gray-600 dark:text-gray-400">
        Check your domain's DNS health. Get a comprehensive report on your nameservers, mail servers, and DNS configuration.
      </p>
      <div class="mx-auto mt-10 max-w-xl">
        <DomainInput @submit="onSubmit" />
      </div>
    </section>

    <section class="grid gap-6 pb-16 sm:grid-cols-3">
      <div class="rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
        <div class="mb-3 inline-flex rounded-lg bg-indigo-100 p-2 text-indigo-600 dark:bg-indigo-900/30 dark:text-indigo-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2" />
          </svg>
        </div>
        <h3 class="font-semibold text-gray-900 dark:text-white">Nameserver Checks</h3>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Verify NS records, delegation, and nameserver responsiveness.</p>
      </div>
      <div class="rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
        <div class="mb-3 inline-flex rounded-lg bg-green-100 p-2 text-green-600 dark:bg-green-900/30 dark:text-green-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
          </svg>
        </div>
        <h3 class="font-semibold text-gray-900 dark:text-white">Mail Configuration</h3>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Check MX records, SPF, DKIM, and DMARC policies.</p>
      </div>
      <div class="rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
        <div class="mb-3 inline-flex rounded-lg bg-amber-100 p-2 text-amber-600 dark:bg-amber-900/30 dark:text-amber-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
          </svg>
        </div>
        <h3 class="font-semibold text-gray-900 dark:text-white">Security & DNSSEC</h3>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Validate DNSSEC configuration and security best practices.</p>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
const router = useRouter()

function onSubmit(domain: string) {
  router.push(`/${domain}`)
}
</script>
