ghostguild-org/app/pages/contact.vue

<template>
  <div class="relative">
    <!-- Hero Section -->
    <section class="mb-24">
      <div class="relative">
        <h1
          class="text-6xl md:text-8xl font-bold text-stone-100 ethereal-text leading-tight mb-8"
        >
          Get in Touch
        </h1>

        <div class="mb-16">
          <p class="text-stone-100 text-lg max-w-md">
            We'd be happy to answer any questions<br />
            you might have about Ghost Guild
          </p>
        </div>
      </div>
    </section>

    <!-- Contact Form -->
    <section class="mb-32 relative">
      <div class="mb-12">
        <h2 class="text-3xl font-light text-stone-200 mb-4">
          Send us a message (or email hello@ghostguild.org)
        </h2>
      </div>

      <div class="border border-ghost-700">
        <UForm :state="form" class="space-y-6" @submit="handleSubmit">
          <!-- Name and Email Row -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <UFormField label="Your Name" name="name" required>
              <UInput
                v-model="form.name"
                placeholder="Enter your full name"
                size="xl"
                class="w-full"
              />
            </UFormField>

            <UFormField label="Email Address" name="email" required>
              <UInput
                v-model="form.email"
                type="email"
                size="xl"
                class="w-full"
                placeholder="your.email@example.com"
              />
            </UFormField>
          </div>

          <!-- Subject -->
          <UFormField label="Subject" name="subject" required>
            <USelect
              v-model="form.subject"
              :options="subjectOptions"
              placeholder="Select a subject"
              size="xl"
              class="w-full"
            />
          </UFormField>

          <!-- Message -->
          <UFormField label="Message" name="message" required>
            <UTextarea
              v-model="form.message"
              placeholder="Tell us how we can help you..."
              :rows="6"
              size="xl"
              class="w-full"
            />
          </UFormField>

          <!-- Submit Button -->
          <div class="pt-4">
            <UButton
              type="submit"
              :loading="isSubmitting"
              :disabled="!isFormValid"
              size="xl"
              class="px-12 border border-ghost-600 text-stone-200 hover:bg-ghost-800 hover:border-whisper-500 hover:ethereal-text transition-all duration-500"
            >
              Send Message
            </UButton>
          </div>
        </UForm>

        <!-- Success/Error Messages -->
        <div
          v-if="success"
          class="mt-6 p-4 border border-whisper-600 bg-ghost-900/50"
        >
          <p class="text-whisper-300 text-center">
            Thank you! Your message has been sent successfully. We'll get back
            to you soon.
          </p>
        </div>

        <div v-if="error" class="mt-6 p-4 border border-ghost-700 bg-ghost-900">
          <p class="text-stone-300 text-center">
            {{ error }}
          </p>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { reactive, ref, computed } from "vue";

// Form state
const form = reactive({
  name: "",
  email: "",
  subject: "",
  message: "",
  newsletter: false,
});

// UI state
const isSubmitting = ref(false);
const error = ref("");
const success = ref(false);

// Subject options
const subjectOptions = [
  { label: "General Inquiry", value: "general" },
  { label: "Membership Questions", value: "membership" },
  { label: "Technical Support", value: "technical" },
  { label: "Partnership Opportunities", value: "partnership" },
  { label: "Press & Media", value: "media" },
  { label: "Other", value: "other" },
];

// Support options
const supportOptions = [
  {
    title: "Help Center",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Browse our comprehensive help articles.",
    details: ["Documentation", "FAQs", "Tutorials"],
  },
  {
    title: "Community Support",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Connect with other members in our community.",
    details: ["Discord", "Forums", "Slack"],
  },
  {
    title: "Direct Support",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Get personalized help from our team.",
    details: ["Email", "Priority response", "One-on-one assistance"],
  },
];

// Form validation
const isFormValid = computed(() => {
  return (
    form.name &&
    form.email &&
    form.subject &&
    form.message &&
    form.message.length >= 10
  );
});

// Form submission
const handleSubmit = async () => {
  if (isSubmitting.value) return;

  isSubmitting.value = true;
  error.value = "";
  success.value = false;

  try {
    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 1500));

    // For now, just show success message
    success.value = true;

    // Reset form after success
    setTimeout(() => {
      Object.assign(form, {
        name: "",
        email: "",
        subject: "",
        message: "",
        newsletter: false,
      });
      success.value = false;
    }, 5000);
  } catch (err) {
    console.error("Contact form error:", err);
    error.value =
      "Sorry, there was an error sending your message. Please try again or contact us directly at hello@ghostguild.org.";
  } finally {
    isSubmitting.value = false;
  }
};
</script>