<template>
  <form @submit.prevent="submitForm" action="https://formspree.io/f/xkgvgzal" method="POST">
    <div class="space-y-6">
      <div>
        <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Name</label>
        <input
          v-model="form.name"
          type="text"
          id="name"
          name="name"
          required
          class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        >
      </div>
      
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email</label>
        <input
          v-model="form.email"
          type="email"
          id="email"
          name="email"
          required
          class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        >
      </div>
      
      <div>
        <label for="message" class="block text-sm font-medium text-gray-700 mb-2">Message</label>
        <textarea
          v-model="form.message"
          id="message"
          name="message"
          rows="5"
          required
          class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        ></textarea>
      </div>
      
      <button
        type="submit"
        :disabled="isSubmitting"
        class="w-full bg-blue-600 text-white py-3 px-6 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
      >
        {{ isSubmitting ? 'Sending...' : 'Send Message' }}
      </button>
    </div>
  </form>
</template>

<script setup>
const form = reactive({
  name: '',
  email: '',
  message: ''
})

const isSubmitting = ref(false)

const submitForm = async (event) => {
  isSubmitting.value = true
  
  try {
    await $fetch('https://formspree.io/f/xkgvgzal', {
      method: 'POST',
      body: form
    })
    
    Object.keys(form).forEach(key => form[key] = '')
    alert('Message sent successfully!')
  } catch (error) {
    alert('Error sending message. Please try again.')
  } finally {
    isSubmitting.value = false
  }
}
</script>


