import { Component } from '@angular/core';

@Component({
  selector: 'app-contact-form',
  standalone: true,
  template: `
    <p *ngIf="status === 'success'">Thanks — we will be in touch soon.</p>
    <form *ngIf="status !== 'success'"
          action="https://myformconnect.io/f/YOUR_FORM_UUID"
          method="POST"
          data-mfc="true"
          (submit)="onSubmit($event)">
      <label for="name">Name *</label>
      <input id="name" name="name" type="text" required />

      <label for="email">Email *</label>
      <input id="email" name="email" type="email" required />

      <label for="message">Message</label>
      <textarea id="message" name="message" rows="4"></textarea>

      <button type="submit" [disabled]="status === 'loading'">
        {{ status === 'loading' ? 'Sending…' : 'Send Message' }}
      </button>
      <p *ngIf="status === 'error'">{{ errorMessage }}</p>
    </form>
  `
})
export class ContactFormComponent {
  endpoint = 'https://myformconnect.io/f/YOUR_FORM_UUID';
  status: 'idle' | 'loading' | 'success' | 'error' = 'idle';
  errorMessage = '';

  async onSubmit(e: Event) {
    e.preventDefault();
    const form = e.target as HTMLFormElement;
    this.status = 'loading';
    this.errorMessage = '';

    try {
      const res = await fetch(this.endpoint, {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'X-Requested-With': 'XMLHttpRequest'
        },
        body: new FormData(form)
      });
      if (!res.ok) throw new Error('Submission failed');
      this.status = 'success';
      form.reset();
    } catch {
      this.status = 'error';
      this.errorMessage = 'Something went wrong. Please try again.';
    }
  }
}