site/src/pages/contact.vue

<script setup lang="ts">
const { portfolioCategories, site, messengersLabel } = useNoroData()
const config = useRuntimeConfig()

useHead({
  title: 'تماس — استودیو نورو'
})

const form = reactive({
  name: '',
  email: '',
  phone: '',
  category: '',
  message: ''
})

const submitted = ref(false)
const submitting = ref(false)
const submitError = ref('')

async function handleSubmit() {
  submitting.value = true
  submitError.value = ''

  try {
    const apiBase = config.public.cmsApiUrl.replace(/\/$/, '')
    const res = await fetch(`${apiBase}/api/contact-requests`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(form),
    })

    if (!res.ok) {
      const body = await res.json().catch(() => ({}))
      throw new Error(body.error || 'خطا در ارسال درخواست')
    }

    submitted.value = true
  } catch (e) {
    submitError.value = e instanceof Error ? e.message : 'خطا در ارسال درخواست'
  } finally {
    submitting.value = false
  }
}

const categoryOptions = computed(() =>
  Object.values(portfolioCategories.value) as Array<{
    label: string
    slug: string
  }>
)
</script>

<template>
  <div>
    <section class="relative overflow-hidden border-b border-noro-border">
      <GlowBackground />
      <div class="noro-container relative py-20 sm:py-24">
        <SectionHeading
          eyebrow="Contact"
          title="تماس با استودیو نورو"
          description="آماده شنیدن ایده‌ها و پروژه‌های شما هستیم."
        />
      </div>
    </section>

    <section class="noro-section">
      <div class="noro-container">
        <SectionHeading
          eyebrow="ارتباط"
          title="راه‌های ارتباطی و ثبت درخواست"
          description="برای شروع همکاری فرم را پر کنید، یا از طریق ایمیل، تلفن، پیام‌رسان‌ها و شبکه‌های اجتماعی و آدرس استودیو مستقیماً با ما در تماس باشید."
        />

        <div class="mt-12 grid items-start gap-8 lg:grid-cols-2 lg:gap-10">
          <ul class="grid gap-4 sm:grid-cols-2 lg:grid-cols-1 lg:gap-5">
            <li class="noro-card p-5">
              <p class="text-sm text-noro-muted">ایمیل</p>
              <a
                :href="`mailto:${site.email}`"
                class="mt-1 block font-medium text-noro-text transition hover:text-noro-brand"
              >
                {{ site.email }}
              </a>
            </li>
            <li class="noro-card p-5">
              <p class="text-sm text-noro-muted">تلفن</p>
              <a
                :href="`tel:${site.phoneTel}`"
                class="mt-1 block font-medium text-noro-text transition hover:text-noro-brand"
                dir="ltr"
              >
                {{ site.phone }}
              </a>
            </li>
            <li class="noro-card p-5 sm:col-span-2 lg:col-span-1">
              <p class="text-sm text-noro-muted">{{ messengersLabel }}</p>
              <div class="mt-3">
                <MessengerLinks
                  :messengers="site.messengers"
                  :handle="site.messengerHandle"
                />
              </div>
            </li>
            <li class="noro-card p-5 sm:col-span-2 lg:col-span-1">
              <p class="text-sm text-noro-muted">موقعیت</p>
              <p class="mt-1 font-medium text-noro-text">{{ site.location }}</p>
            </li>
          </ul>

          <div>
            <form
              v-if="!submitted"
              class="noro-card h-full space-y-5 p-6 sm:p-8"
              @submit.prevent="handleSubmit"
            >
              <div class="grid gap-5 sm:grid-cols-2">
                <label class="block">
                  <span class="mb-2 block text-sm text-noro-muted">نام و نام خانوادگی</span>
                  <input
                    v-model="form.name"
                    type="text"
                    required
                    class="w-full rounded-xl border border-noro-border bg-noro-bg px-4 py-3 text-sm text-noro-text outline-none transition focus:border-noro-brand"
                  >
                </label>
                <label class="block">
                  <span class="mb-2 block text-sm text-noro-muted">ایمیل</span>
                  <input
                    v-model="form.email"
                    type="email"
                    required
                    class="w-full rounded-xl border border-noro-border bg-noro-bg px-4 py-3 text-sm text-noro-text outline-none transition focus:border-noro-brand"
                  >
                </label>
              </div>

              <div class="grid gap-5 sm:grid-cols-2">
                <label class="block">
                  <span class="mb-2 block text-sm text-noro-muted">شماره تماس</span>
                  <input
                    v-model="form.phone"
                    type="tel"
                    class="w-full rounded-xl border border-noro-border bg-noro-bg px-4 py-3 text-sm text-noro-text outline-none transition focus:border-noro-brand"
                  >
                </label>
                <label class="block">
                  <span class="mb-2 block text-sm text-noro-muted">نوع پروژه</span>
                  <select
                    v-model="form.category"
                    required
                    class="w-full rounded-xl border border-noro-border bg-noro-bg px-4 py-3 text-sm text-noro-text outline-none transition focus:border-noro-brand"
                  >
                    <option value="" disabled>
                      انتخاب کنید
                    </option>
                    <option
                      v-for="cat in categoryOptions"
                      :key="cat.slug"
                      :value="cat.slug"
                    >
                      {{ cat.label }}
                    </option>
                  </select>
                </label>
              </div>

              <label class="block">
                <span class="mb-2 block text-sm text-noro-muted">توضیحات پروژه</span>
                <textarea
                  v-model="form.message"
                  rows="5"
                  required
                  class="w-full resize-none rounded-xl border border-noro-border bg-noro-bg px-4 py-3 text-sm text-noro-text outline-none transition focus:border-noro-brand"
                />
              </label>

              <p v-if="submitError" class="text-sm text-red-500">
                {{ submitError }}
              </p>

              <UiButton
                type="submit"
                size="lg"
                class="w-full justify-center sm:w-auto"
                :disabled="submitting"
              >
                {{ submitting ? 'در حال ارسال...' : 'ارسال درخواست' }}
              </UiButton>
            </form>

            <div
              v-else
              class="noro-card flex h-full min-h-[320px] flex-col items-center justify-center p-8 text-center"
            >
              <p class="text-4xl">✓</p>
              <h3 class="mt-4 text-xl font-bold text-noro-text">
                درخواست شما ثبت شد
              </h3>
              <p class="mt-2 text-noro-muted">
                به زودی با شما تماس خواهیم گرفت.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>