<script setup>
import { brand, footerData } from "~/data/navigation";
</script>

<template>
  <footer id="contact" class="bg-gm-dark text-white">
    <div class="container-gm py-14">
      <div class="grid gap-12 xl:grid-cols-[1.1fr_1.2fr_1fr]">
        <div data-reveal>
          <p class="text-[22px] font-semibold text-white">{{ brand.name }}</p>
          <p class="mt-5 text-sm text-white/75">{{ footerData.tagline }}</p>
          <p class="mt-4 max-w-[360px] text-sm leading-7 text-white/60">
            {{ footerData.description }}
          </p>
        </div>

        <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-4" data-stagger>
          <div
            v-for="(links, title) in footerData.links"
            :key="title"
            data-stagger-item
          >
            <h3 class="text-base font-semibold text-white">{{ title }}</h3>
            <ul class="mt-4 space-y-3">
              <li v-for="link in links" :key="link.label">
                <NuxtLink :to="link.href" class="text-sm text-white/65 transition hover:text-gm-green">
                  {{ link.label }}
                </NuxtLink>
              </li>
            </ul>
          </div>
        </div>

        <div class="rounded-lg bg-white/6 p-6" data-reveal>
          <p class="text-[22px] font-semibold text-white">
            {{ footerData.contact.title }}
          </p>
          <p class="mt-2 text-sm text-white/65">
            {{ footerData.contact.subtitle }}
          </p>
          <NuxtLink
            :to="footerData.contact.href"
            class="gm-btn gm-btn-primary mt-6 px-7"
          >
            {{ footerData.contact.button }}
          </NuxtLink>

          <div class="mt-8 flex items-start gap-5">
            <img
              src="/images/footer-qr.png"
              alt="新媒体矩阵二维码"
              class="w-[110px] rounded-2xl bg-white p-2"
            />
            <div class="space-y-3 text-sm text-white/75">
              <p>{{ footerData.contact.qrLabel }}</p>
              <p>业务咨询：{{ footerData.contact.phone }}</p>
              <p>{{ footerData.contact.email }}</p>
              <p>{{ footerData.contact.address }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="border-t border-white/10">
      <div class="container-gm flex flex-col gap-4 py-5 text-xs text-white/45 md:flex-row md:items-center md:justify-between">
        <p>{{ footerData.copyright }}</p>
        <div class="flex flex-wrap gap-4">
          <NuxtLink
            v-for="item in footerData.legal"
            :key="item.label"
            :to="item.href"
            class="transition hover:text-gm-green"
          >
            {{ item.label }}
          </NuxtLink>
        </div>
      </div>
    </div>
  </footer>
</template>
