<template>
  <section class="min-h-screen px-5 pt-24 pb-10 lg:px-8 lg:pt-32">
    <div
      class="mx-auto flex min-h-[calc(100vh-9rem)] w-full max-w-5xl items-center"
    >
      <div
        class="grid w-full gap-10 lg:grid-cols-[0.9fr_1.1fr] lg:items-center"
      >
        <div class="text-center lg:text-left">
          <p
            class="mb-3 text-xs font-medium uppercase tracking-[0.24em] text-highlight"
          >
            {{ t("Title") }}
          </p>

          <h1
            class="text-4xl font-medium tracking-[-0.04em] text-dark lg:text-6xl"
          >
            {{ t("Welcome") }}
          </h1>

          <p
            class="mx-auto mt-4 max-w-sm text-sm leading-normal lg:mx-0 text-dark/70"
          >
            {{ t("Menu Intro") }}
          </p>
        </div>

        <div class="mx-auto w-full max-w-md lg:max-w-none">
          <div class="grid gap-2.5 lg:grid-cols-2">
            <button
              v-for="action in actions"
              :key="action.key"
              type="button"
              class="group flex min-h-28 h-full items-center justify-between gap-5 rounded-3xl border border-dark/20 bg-[#fff] px-5 py-5 text-left text-dark backdrop-blur transition hover:-translate-y-0.5 hover:shadow-md lg:min-h-36 lg:flex-col lg:items-start lg:p-6 first:border-highlight/70 first:text-highlight/90"
              @click="handleAction(action.key)"
            >
              <span>
                <span
                  class="block text-xl font-medium tracking-tight lg:text-2xl"
                >
                  {{ t(action.labelKey) }}
                </span>

                <span
                  v-if="action.descriptionKey"
                  class="mt-1.5 block text-sm leading-4 text-dark/45"
                >
                  {{ t(action.descriptionKey) }}
                </span>
              </span>

              <span
                class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-dark/4 text-xl text-dark/45 transition group-hover:bg-dark group-hover:text-white lg:mt-auto"
              >
                →
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";

type ActionKey = "menu" | "campaigns" | "contact" | "survey";

type Action = {
  key: ActionKey;
  labelKey: string;
  descriptionKey?: string;
};

const { t } = useI18n();

const emit = defineEmits<{
  changeView: [view: "home" | "menu" | "campaigns" | "contact"];
}>();

const actions: Action[] = [
  {
    key: "menu",
    labelKey: "Menu",
    descriptionKey: "Explore our food and drinks",
  },
  {
    key: "campaigns",
    labelKey: "Campaigns",
    descriptionKey: "View current offers",
  },
  {
    key: "contact",
    labelKey: "Job Application",
    descriptionKey: "Apply to join our team",
  },
  {
    key: "survey",
    labelKey: "Satisfaction Survey",
    descriptionKey: "Share your experience",
  },
];

function handleAction(key: ActionKey) {
  if (key === "survey") {
    window.open(
      "https://forms.gle/C8dd65PM9jLftv4g9",
      "_blank",
      "noopener,noreferrer",
    );

    return;
  }

  emit("changeView", key);
}
</script>
