'use client';

import { useState, type FormEvent } from 'react';

const ENDPOINT = 'https://myformcapture.com/f/YOUR_FORM_UUID';

export function ContactForm() {
  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
  const [errorMessage, setErrorMessage] = useState('');

  async function onSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = e.currentTarget;
    setStatus('loading');
    setErrorMessage('');

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

  if (status === 'success') {
    return <p>Thanks — we will be in touch soon.</p>;
  }

  return (
    <form action="https://myformcapture.com/f/YOUR_FORM_UUID" method="POST" data-mfc="true" onSubmit={onSubmit}>
      <label htmlFor="name">Name *</label>
      <input id="name" name="name" type="text" required />

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

      <label htmlFor="message">Message</label>
      <textarea id="message" name="message" rows={4} />

      <button type="submit" disabled={status === 'loading'}>
        {status === 'loading' ? 'Sending…' : 'Send Message'}
      </button>
      {status === 'error' && <p>{errorMessage}</p>}
    </form>
  );
}