Make your Lovable contact form actually send

import { useState } from 'react';

export function ContactForm() {
  const [status, setStatus] = useState({ state: 'idle' });

  async function handleSubmit(event) {
    event.preventDefault();
    const form = event.currentTarget;
    setStatus({ state: 'submitting' });

    try {
      const response = await fetch('https://mtform.co/f/your-form-key', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(Object.fromEntries(new FormData(form))),
      });

      const result = await response.json();
      if (!response.ok) {
        throw new Error(result.error?.message ?? 'Unable to send your message.');
      }

      form.reset();
      setStatus({ state: 'success' });
    } catch (error) {
      // Entered values stay put; we only reset on success.
      setStatus({ state: 'error', message: error.message });
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" placeholder="Name" required />
      <input type="email" name="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required />

      {/* Spam trap: hidden from people, tempting to bots. */}
      <input
        type="text"
        name="_mtf_honeypot"
        tabIndex={-1}
        autoComplete="off"
        aria-hidden="true"
        style={{ position: 'absolute', left: '-9999px' }}
      />

      <button type="submit" disabled={status.state === 'submitting'}>
        {status.state === 'submitting' ? 'Sending…' : 'Send'}
      </button>

      {status.state === 'success' && <p role="status">Thanks. We got your message.</p>}
      {status.state === 'error' && <p role="alert">{status.message}</p>}
    </form>
  );
}

In this Lovable project, connect the existing contact form to this MakeTheForm endpoint:

https://mtform.co/f/your-form-key

Requirements:
- Submit with fetch as JSON (Content-Type: application/json). Do NOT add Supabase, an edge function, or any backend. This endpoint is the backend.
- Keep the current design and component structure exactly. Only add the submit handler.
- Disable the submit button while the request is in flight.
- Treat any HTTP 2xx as success: show an inline success message and reset the form.
- On failure, show the message from the JSON response at error.message and preserve what the user typed. Do not clear the form on error.
- Add a hidden honeypot input named exactly "_mtf_honeypot", visually hidden with position:absolute;left:-9999px, tabIndex={-1}, autoComplete="off", aria-hidden="true". Never display:none it, never make it required.
- This endpoint URL is public and safe in client code. Do NOT create, request, or reference an API key, and do not move it into an environment variable.