---
import { SITE, NAV_LINKS, SOCIAL } from "../data/site";
---

<footer data-reveal class="bg-surface-container-lowest border-t border-outline-variant/20">
  <div class="container-main py-section-gap">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-section-gap">
      <!-- Logo & Tagline -->
      <div>
        <a href="/" class="font-display-lg text-2xl font-bold tracking-tighter text-on-background no-underline">
          {SITE.name}
        </a>
        <p class="mt-4 text-on-surface-variant font-body-md max-w-sm">
          {SITE.tagline}
        </p>
        <p class="mt-2 text-on-surface-variant/60 font-body-md text-sm">
          {SITE.description}
        </p>
      </div>

      <!-- Link Grid -->
      <div class="md:col-span-2 grid grid-cols-2 sm:grid-cols-3 gap-gutter">
        <!-- Menu -->
        <div>
          <h3 class="text-label-md uppercase tracking-wider text-on-surface-variant mb-stack-md">Menu</h3>
          <ul class="list-none m-0 p-0 space-y-3">
            {NAV_LINKS.map((link) => (
              <li>
                <a
                  href={link.href}
                  class="text-on-background font-body-md no-underline transition-colors hover:text-primary"
                >
                  {link.label}
                </a>
              </li>
            ))}
          </ul>
        </div>

        <!-- Legal -->
        <div>
          <h3 class="text-label-md uppercase tracking-wider text-on-surface-variant mb-stack-md">Legal</h3>
          <ul class="list-none m-0 p-0 space-y-3">
            <li><a href="/kebijakan-privasi" class="text-on-background font-body-md no-underline transition-colors hover:text-primary">Kebijakan Privasi</a></li>
            <li><a href="/syarat-ketentuan" class="text-on-background font-body-md no-underline transition-colors hover:text-primary">Syarat & Ketentuan</a></li>
          </ul>
        </div>

        <!-- Social -->
        <div>
          <h3 class="text-label-md uppercase tracking-wider text-on-surface-variant mb-stack-md">Social</h3>
          <ul class="list-none m-0 p-0 space-y-3">
            {SOCIAL.map((item) => (
              <li>
                <a
                  href={item.href}
                  class="text-on-background font-body-md no-underline transition-colors hover:text-primary"
                >
                  {item.label}
                </a>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>

    <!-- Bottom Bar -->
    <div class="mt-section-gap pt-stack-lg border-t border-outline-variant/20 flex flex-col sm:flex-row items-center justify-between gap-stack-md">
      <p class="text-on-surface-variant/60 font-body-md text-sm m-0">
        &copy; {new Date().getFullYear()} {SITE.name}. All rights reserved.
      </p>
      <p class="text-on-surface-variant/40 font-body-md text-sm m-0">
        {SITE.motto}
      </p>
    </div>
  </div>
</footer>