<template>
  <footer class="bg-white border-t border-black/[0.04] pt-8 sm:pt-12 pb-6">
    <div class="container mx-auto px-4">
      <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-12 mb-8 sm:mb-12">
        <!-- Brand -->
        <div class="lg:col-span-2">
          <Logo />
          <p class="text-foreground/40 text-sm mt-3 mb-4 max-w-sm font-medium leading-relaxed">{{ t("footer.tagline") }}</p>
          <div class="space-y-2">
            <a href="mailto:hello@radionica3d.me" class="flex items-center gap-2 text-xs font-bold text-foreground/40 hover:text-primary transition-colors">
              <Mail class="w-3.5 h-3.5" />hello@radionica3d.me
            </a>
            <div class="flex items-center gap-2 text-xs font-bold text-foreground/40">
              <MapPin class="w-3.5 h-3.5" />{{ t("footer.location") }}
            </div>
          </div>
        </div>

        <!-- Services -->
        <div>
          <h4 class="font-display text-xs font-bold uppercase tracking-widest text-foreground/40 mb-3">{{ t("footer.services") }}</h4>
          <ul class="space-y-1.5">
            <li v-for="link in footerLinks.services" :key="link.label">
              <router-link v-if="link.to" :to="link.to" class="text-xs font-bold text-foreground/60 hover:text-primary transition-colors">{{ link.label }}</router-link>
              <a v-else-if="link.href" :href="link.href" class="text-xs font-bold text-foreground/60 hover:text-primary transition-colors">{{ link.label }}</a>
            </li>
          </ul>
        </div>

        <!-- Company -->
        <div>
          <h4 class="font-display text-xs font-bold uppercase tracking-widest text-foreground/40 mb-3">{{ t("footer.company") }}</h4>
          <ul class="space-y-1.5">
            <li v-for="link in footerLinks.company" :key="link.label">
              <router-link v-if="link.to" :to="link.to" class="text-xs font-bold text-foreground/60 hover:text-primary transition-colors">{{ link.label }}</router-link>
              <a v-else-if="link.href" :href="link.href" class="text-xs font-bold text-foreground/60 hover:text-primary transition-colors">{{ link.label }}</a>
            </li>
          </ul>
        </div>

      </div>

      <!-- Bottom -->
      <div class="pt-6 border-t border-black/[0.04] flex flex-col md:flex-row justify-between items-center gap-4">
        <p class="text-[10px] font-bold text-foreground/30 uppercase tracking-widest">© 2026 Radionica 3D. {{ t("footer.allRightsReserved") }}</p>
        <div class="flex gap-4">
          <router-link :to="`/${currentLanguage()}/privacy`" class="text-[10px] font-bold text-foreground/30 hover:text-primary transition-colors uppercase tracking-widest">{{ t("footer.privacy") }}</router-link>
          <router-link :to="`/${currentLanguage()}/terms`" class="text-[10px] font-bold text-foreground/30 hover:text-primary transition-colors uppercase tracking-widest">{{ t("footer.terms") }}</router-link>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import { Mail, Phone, MapPin } from "lucide-vue-next";
import Logo from "./Logo.vue";
import { currentLanguage } from "@/i18n";

const { t } = useI18n();

interface FooterLink {
  label: string;
  to?: string;
  href?: string;
}

const footerLinks = computed(() => ({
  services: [
    { label: t("services.fdm.title"), to: `/${currentLanguage()}/#services` },
    { label: t("services.sla.title"), to: `/${currentLanguage()}/#services` },
  ] as FooterLink[],
  company: [
    { label: t("footer.about"),   to: `/${currentLanguage()}/about` },
    { label: t("footer.privacy"), to: `/${currentLanguage()}/privacy` },
    { label: t("footer.blog"),    to: `/${currentLanguage()}/blog` },
    { label: t("footer.contact"), to: `/${currentLanguage()}/contact` },
  ] as FooterLink[],
}));
</script>
