<template>
  <div>
    <!-- Page Header -->
    <PageHeader 
      title="Contact"
      subtitle="Get in touch with us. We're here to help and answer any questions you might have about Ghost Guild."
      theme="blue"
      size="large"
    />

    <!-- Contact Form -->
    <section class="py-20 bg-white dark:bg-gray-900">
      <UContainer class="max-w-4xl">
        <div class="text-center mb-12">
          <h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-4">
            Contact Form
          </h2>
          <p class="text-gray-600 dark:text-gray-300">
            Send us a message and we'll get back to you as soon as possible
          </p>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl border border-blue-200 dark:border-blue-800">
          <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>

            <!-- Additional Options -->
            <div class="flex items-center gap-4 pt-2">
              <UCheckbox
                id="newsletter"
                v-model="form.newsletter"
                label="Subscribe to our newsletter"
              />
            </div>

            <!-- Submit Button -->
            <div class="flex justify-center pt-4">
              <UButton
                type="submit"
                :loading="isSubmitting"
                :disabled="!isFormValid"
                size="xl"
                class="px-12"
              >
                Send Message
              </UButton>
            </div>
          </UForm>

          <!-- Success/Error Messages -->
          <div v-if="success" class="mt-6 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
            <p class="text-green-700 dark:text-green-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 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
            <p class="text-red-700 dark:text-red-300 text-center">
              ❌ {{ error }}
            </p>
          </div>
        </div>
      </UContainer>
    </section>

    <!-- Support Information -->
    <section class="py-20 bg-gray-50 dark:bg-gray-800">
      <UContainer>
        <div class="text-center mb-12">
          <h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-4">
            Support
          </h2>
          <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Here are various ways to get help and support.
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <!-- Help Center -->
          <div class="bg-white dark:bg-gray-900 rounded-xl p-8 shadow-lg text-center">
            <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mx-auto mb-6">
              <div class="w-8 h-8 bg-blue-500 rounded flex items-center justify-center">
                <span class="text-white text-sm font-bold">?</span>
              </div>
            </div>
            <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
              Help Center
            </h3>
            <div class="space-y-2 mb-6">
              <div class="h-1 bg-blue-500 rounded-full w-full" />
              <div class="h-1 bg-blue-300 rounded-full w-4/5 mx-auto" />
              <div class="h-1 bg-blue-200 rounded-full w-3/5 mx-auto" />
              <div class="h-1 bg-blue-100 rounded-full w-2/5 mx-auto" />
            </div>
            <p class="text-gray-600 dark:text-gray-400 mb-6">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Browse our comprehensive help articles.
            </p>
            <UButton variant="outline" color="blue" size="sm">
              Visit Help Center
            </UButton>
          </div>

          <!-- Community Support -->
          <div class="bg-white dark:bg-gray-900 rounded-xl p-8 shadow-lg text-center">
            <div class="w-16 h-16 bg-emerald-100 dark:bg-emerald-900/30 rounded-full flex items-center justify-center mx-auto mb-6">
              <div class="w-8 h-8 bg-emerald-500" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)" />
            </div>
            <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
              Community Support
            </h3>
            <div class="space-y-2 mb-6">
              <div class="h-1 bg-emerald-500 rounded-full w-full" />
              <div class="h-1 bg-emerald-300 rounded-full w-5/6 mx-auto" />
              <div class="h-1 bg-emerald-200 rounded-full w-4/6 mx-auto" />
              <div class="h-1 bg-emerald-100 rounded-full w-3/6 mx-auto" />
            </div>
            <p class="text-gray-600 dark:text-gray-400 mb-6">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Connect with other members in our community.
            </p>
            <UButton variant="outline" color="emerald" size="sm">
              Join Discord
            </UButton>
          </div>

          <!-- Direct Support -->
          <div class="bg-white dark:bg-gray-900 rounded-xl p-8 shadow-lg text-center md:col-span-2 lg:col-span-1">
            <div class="w-16 h-16 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center mx-auto mb-6">
              <div class="w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center">
                <span class="text-white text-xs">✉</span>
              </div>
            </div>
            <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
              Direct Support
            </h3>
            <div class="space-y-2 mb-6">
              <div class="h-1 bg-purple-500 rounded-full w-full" />
              <div class="h-1 bg-purple-300 rounded-full w-3/4 mx-auto" />
              <div class="h-1 bg-purple-200 rounded-full w-5/6 mx-auto" />
              <div class="h-1 bg-purple-100 rounded-full w-1/2 mx-auto" />
            </div>
            <p class="text-gray-600 dark:text-gray-400 mb-6">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Get personalized help from our team.
            </p>
            <UButton variant="outline" color="purple" size="sm">
              Email Us
            </UButton>
          </div>
        </div>

        <!-- Quick Contact Info -->
        <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
          <div>
            <h4 class="font-semibold text-gray-900 dark:text-white mb-2">Email</h4>
            <p class="text-gray-600 dark:text-gray-400">hello@ghostguild.org</p>
          </div>
          <div>
            <h4 class="font-semibold text-gray-900 dark:text-white mb-2">Response Time</h4>
            <p class="text-gray-600 dark:text-gray-400">Usually within 24 hours</p>
          </div>
          <div>
            <h4 class="font-semibold text-gray-900 dark:text-white mb-2">Best For</h4>
            <p class="text-gray-600 dark:text-gray-400">General inquiries & support</p>
          </div>
        </div>
      </UContainer>
    </section>

    <!-- Send Message CTA -->
    <section class="py-20 bg-blue-50 dark:bg-blue-900/20">
      <UContainer>
        <div class="text-center max-w-3xl mx-auto">
          <h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-8">
            Send Message
          </h2>
          
          <div class="space-y-6 mb-8">
            <div class="flex justify-center">
              <div class="h-2 bg-blue-500 rounded-full w-64" />
            </div>
            <div class="flex justify-center">
              <div class="h-2 bg-blue-300 rounded-full w-48" />
            </div>
            <div class="flex justify-center">
              <div class="h-2 bg-blue-500 rounded-full w-32" />
            </div>
          </div>

          <p class="text-lg text-gray-600 dark:text-gray-300 mb-8">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ready to get in touch? We're here to help.
          </p>
          
          <UButton 
            @click="scrollToForm"
            size="xl" 
            color="primary"
            class="px-12 py-4"
          >
            Contact Us Now
          </UButton>
        </div>
      </UContainer>
    </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' }
]

// 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
  }
}

// Scroll to form function
const scrollToForm = () => {
  const formSection = document.querySelector('form')
  if (formSection) {
    formSection.scrollIntoView({ behavior: 'smooth', block: 'center' })
  }
}
</script>