<template>
  <footer class="relative bg-light text-dark pt-28 overflow-hidden">
    <!-- top curve -->
    <div
      class="absolute left-1/2 top-0 h-12 w-[140%] -translate-x-1/2 -translate-y-1/2 rounded-b-[100%] bg-white md:h-24 md:w-[120%]"
    ></div>
    <div class="max-w-7xl mx-auto px-4 md:py-10">
      <div class="w-full pb-10 md:pb-20 px-4">
        <img
          class="h-20 object-contain mx-auto"
          src="/images/payment-methods.webp"
          :alt="t('Payment Methods')"
        />
      </div>
      <div class="grid gap-8 md:grid-cols-4">
        <!-- BRAND -->
        <div class="space-y-4 text-center md:text-left">
          <img
            src="/muco-logo.svg"
            alt="Müco Logo"
            class="h-24 mx-auto md:mx-0"
          />

          <p class="text-sm opacity-70">
            {{ t("Slogan") }}
          </p>

          <div class="flex justify-center md:justify-start gap-3 mb-4">
            <a
              href="https://www.instagram.com/mucomutfak/"
              target="_blank"
              rel="noopener noreferrer"
              class="hover:text-highlight"
              aria-label="Instagram"
            >
              <component :is="icons.instagram" class="w-7 h-7" />
            </a>

            <a
              href="https://www.tiktok.com/@mucomutfak/"
              target="_blank"
              rel="noopener noreferrer"
              class="hover:text-highlight"
              aria-label="Tiktok"
            >
              <component :is="icons.tiktok" class="w-7 h-7" />
            </a>

            <a
              href="https://www.facebook.com/mucomutfakvekahve/"
              target="_blank"
              rel="noopener noreferrer"
              class="hover:text-highlight"
              aria-label="Facebook"
            >
              <component :is="icons.facebook" class="w-7 h-7" />
            </a>
          </div>
        </div>

        <!-- LINKS -->
        <div>
          <h3 class="font-bold text-black mb-3">{{ t("Navigation") }}</h3>

          <nav class="flex flex-col gap-2 text-sm opacity-80">
            <a :href="`${path}#about`" class="hover:text-highlight">
              {{ t("Who we are") }}
            </a>
            <a :href="`${path}menu`" class="hover:text-highlight">
              {{ t("Menu") }}
            </a>
            <a :href="`${path}#contact`" class="hover:text-highlight">
              {{ t("Contact") }}
            </a>
          </nav>
        </div>

        <!-- CONTACT -->
        <div>
          <h3 class="font-bold text-black mb-3">{{ t("Contact") }}</h3>

          <div class="space-y-2 text-sm opacity-80">
            <p>{{ t("Opening Hours") }}</p>

            <div class="space-y-2 text-sm">
              <a
                href="mailto:info@mucomutfak.com"
                class="flex items-start gap-2 hover:text-highlight"
              >
                <component :is="icons.mail" class="w-4 h-4" />
                info@mucomutfak.com
              </a>

              <a
                href="tel:+902522120777"
                class="flex items-start gap-2 hover:text-highlight"
              >
                <component :is="icons.phone" class="w-4 h-4" />
                +90 (252) 212 07 77
              </a>

              <a
                href="https://maps.app.goo.gl/s8XV5Ap48Urd6Hk26"
                target="_blank"
                rel="noopener noreferrer"
                class="flex items-start gap-2 hover:text-highlight"
              >
                <component :is="icons.location" class="w-4 h-4" />
                Emirbeyazıt, Hasan Ercan Cd. No:23, Muğla
              </a>
            </div>
          </div>
        </div>

        <!-- SOCIAL + INSTAGRAM -->
        <div>
          <h3 class="font-bold text-black mb-3">Instagram</h3>

          <!-- Instagram feed placeholder -->
          <div class="grid grid-cols-3 gap-2">
            <a
              v-for="item in instagramFeed"
              :key="item"
              href="https://www.instagram.com/mucomutfak/"
              target="_blank"
              rel="noopener noreferrer"
              class="aspect-square rounded bg-dark/10 overflow-hidden"
            >
              <img
                :src="item"
                alt="Müco Instagram"
                class="w-full h-full object-cover hover:scale-105 transition"
              />
            </a>
          </div>
        </div>
      </div>

      <!-- BOTTOM -->
      <div
        class="mt-10 py-5 border-t border-dark/10 flex flex-col sm:flex-row justify-between gap-3 text-sm opacity-70"
      >
        <a :href="`${path}legal`" class="hover:text-highlight underline">
          {{ t("Legal Texts") }}
        </a>

        <span class="block">
          2014 - {{ year }} © Müco - {{ t("All rights reserved.") }}
        </span>
      </div>
    </div>

    <!-- BACK TO TOP -->
    <button
      v-show="showTop"
      @click="scrollToTop"
      aria-label="Back to top"
      class="fixed bottom-4 right-4 z-50 rounded-full bg-dark/10 p-3 backdrop-blur hover:bg-highlight/30"
    >
      <component :is="icons.arrowUp" class="w-5 h-5" />
    </button>
  </footer>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import { useI18n } from "vue-i18n";
import { useIcons } from "@/composables/useIcons";
import { useLocale } from "@/composables/useLocale";

const { t } = useI18n();
const { path } = useLocale();
const icons = useIcons();

const year = new Date().getFullYear();
const showTop = ref(false);

const instagramFeed = [
  "/images/instagram/1.webp",
  "/images/instagram/2.webp",
  "/images/instagram/3.webp",
  "/images/instagram/4.webp",
  "/images/instagram/5.webp",
  "/images/instagram/6.webp",
];

const onScroll = () => {
  showTop.value = window.scrollY > 200;
};

onMounted(() => {
  window.addEventListener("scroll", onScroll, { passive: true });
});

onBeforeUnmount(() => {
  window.removeEventListener("scroll", onScroll);
});

const scrollToTop = () => {
  window.scrollTo({ top: 0, behavior: "smooth" });
};
</script>
