Montech_Landing/apps/landing/components/modals/ConsultModal.vue

<template>
  <transition
    appear
    enter-active-class="transition duration-300 ease-out"
    enter-from-class="opacity-0 scale-95"
    enter-to-class="opacity-100 scale-100"
    leave-active-class="transition duration-200 ease-in"
    leave-from-class="opacity-100 scale-100"
    leave-to-class="opacity-0 scale-95"
  >
    <div v-if="consult.isOpen.value" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 dark:bg-black/75 backdrop-blur-sm">
      <div
        role="dialog"
        aria-modal="true"
        aria-labelledby="consult-modal-title"
        class="bg-white dark:bg-slate-900 rounded-3xl p-6 sm:p-8 max-w-md w-full shadow-2xl border border-slate-100 dark:border-slate-800 text-right space-y-5"
      >
        <div class="flex items-center justify-between border-b border-slate-100 dark:border-slate-800 pb-3">
          <h3 id="consult-modal-title" class="font-bold text-slate-900 dark:text-white text-base">{{ content.title }}</h3>
          <button type="button" aria-label="بستن" class="p-1 rounded-lg text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors" @click="consult.close()">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
          </button>
        </div>

        <form class="space-y-4" @submit.prevent="submit">
          <div>
            <label for="consult-name" class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">{{ content.nameLabel }}</label>
            <input
              id="consult-name"
              v-model="name"
              required
              type="text"
              autocomplete="name"
              maxlength="120"
              :placeholder="content.namePlaceholder"
              class="w-full text-sm px-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-100 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-100 dark:focus:ring-brand-900/40"
            >
          </div>

          <div>
            <label for="consult-phone" class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">{{ content.phoneLabel }}</label>
            <input
              id="consult-phone"
              v-model="phone"
              required
              type="tel"
              dir="ltr"
              autocomplete="tel"
              inputmode="tel"
              maxlength="20"
              :placeholder="content.phonePlaceholder"
              class="w-full text-sm px-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-100 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-100 dark:focus:ring-brand-900/40 text-left"
            >
          </div>

          <div>
            <label for="consult-type" class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">{{ content.typeLabel }}</label>
            <select
              id="consult-type"
              v-model="consult.type.value"
              class="w-full text-sm px-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-100 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-100 dark:focus:ring-brand-900/40"
            >
              <option v-for="opt in content.types" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
            </select>
          </div>

          <div v-if="submitted" role="status" class="p-3 bg-emerald-50 dark:bg-emerald-950/60 text-emerald-700 dark:text-emerald-300 text-xs rounded-xl font-medium border border-emerald-200 dark:border-emerald-800/50">
            {{ content.successMessage }}
          </div>
          <div v-else-if="failed" role="alert" class="p-3 bg-rose-50 dark:bg-rose-950/60 text-rose-700 dark:text-rose-300 text-xs rounded-xl font-medium border border-rose-200 dark:border-rose-800/50">
            {{ content.errorMessage }}
          </div>

          <div class="pt-2">
            <button type="submit" class="w-full py-3 rounded-xl bg-brand-600 text-white text-sm font-bold hover:bg-brand-700 shadow-md transition-colors">
              {{ content.submitLabel }}
            </button>
          </div>
        </form>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
import type { LeadInput } from "@montech/shared";

const CLOSE_DELAY_MS = 2000;

const { section } = useSiteContent();
const content = section("consult");
const consult = useConsultModal();

const name = ref("");
const phone = ref("");
const submitted = ref(false);
const failed = ref(false);
let sending = false;
let closeTimer: ReturnType<typeof setTimeout> | undefined;

useEscapeKey(consult.isOpen, consult.close);

watch(consult.isOpen, (open) => {
  if (open) {
    submitted.value = false;
    failed.value = false;
  }
});

async function submit() {
  if (sending) return;
  sending = true;
  failed.value = false;
  const payload: LeadInput = {
    name: name.value.trim(),
    phone: phone.value.trim(),
    businessType: consult.type.value,
    source: consult.source.value,
    aiQuery: consult.aiQuery.value || undefined,
  };
  try {
    await apiFetch("/api/public/leads", { method: "POST", body: payload });
    submitted.value = true;
    clearTimeout(closeTimer);
    closeTimer = setTimeout(() => {
      consult.close();
      name.value = "";
      phone.value = "";
      consult.resetType();
      submitted.value = false;
    }, CLOSE_DELAY_MS);
  } catch {
    failed.value = true;
  } finally {
    sending = false;
  }
}

onBeforeUnmount(() => clearTimeout(closeTimer));
</script>