<template>
  <footer class="border-t bg-white">
    <div class="container mx-auto grid gap-10 px-4 py-12 md:grid-cols-4">
      <div>
        <h2 class="mb-4 text-2xl font-bold">
          MyStore
        </h2>

        <p class="text-sm text-gray-600">
          Modern e-commerce platform built with Nuxt 4 and Nuxt UI.
        </p>
      </div>

      <div>
        <h3 class="mb-4 font-semibold">
          Company
        </h3>

        <ul class="space-y-2 text-sm text-gray-600">
          <li>
            <a href="#">About</a>
          </li>

          <li>
            <a href="#">Careers</a>
          </li>

          <li>
            <a href="#">Blog</a>
          </li>
        </ul>
      </div>

      <div>
        <h3 class="mb-4 font-semibold">
          Support
        </h3>

        <ul class="space-y-2 text-sm text-gray-600">
          <li>
            <a href="#">Help Center</a>
          </li>

          <li>
            <a href="#">Terms</a>
          </li>

          <li>
            <a href="#">Privacy</a>
          </li>
        </ul>
      </div>

      <div>
        <h3 class="mb-4 font-semibold">
          Contact
        </h3>

        <ul class="space-y-2 text-sm text-gray-600">
          <li>Email: hello@mystore.com</li>
          <li>Phone: +62 812 3456 7890</li>
          <li>Indonesia</li>
        </ul>
      </div>
    </div>

    <div class="border-t py-4 text-center text-sm text-gray-500">
      © 2026 MyStore. All rights reserved.
    </div>
  </footer>
</template>
