document.addEventListener('alpine:init', () => {
  Alpine.data('contactForm', () => ({
    formData: {
      name: '',
      email: '',
      message: ''
    },
    isSubmitting: false,
    statusMessage: '',
    statusClass: '',

    async submitContactForm() {
      this.isSubmitting = true;
      this.statusMessage = '';
      this.statusClass = '';

      try {
        const response = await fetch('/contact.php', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(this.formData)
        });

        const data = await response.json();

        if (response.ok) {
          this.statusMessage = 'Message sent successfully!';
          this.statusClass = 'bg-green-100 text-green-800 border border-green-300';
          this.formData = { name: '', email: '', message: '' };
        } else {
          this.statusMessage = data.error || 'An error occurred. Please try again.';
          this.statusClass = 'bg-red-100 text-red-800 border border-red-300';
        }
      } catch (error) {
        this.statusMessage = 'An error occurred. Please try again.';
        this.statusClass = 'bg-red-100 text-red-800 border border-red-300';
        console.error('Form submission error:', error);
      } finally {
        this.isSubmitting = false;
      }
    }
  }));
});