Next.js

'use client';
import { useState, useRef } from 'react';
export default function Contact() {
  const [etat, setEtat] = useState('');
  const [busy, setBusy] = useState(false);
  const tentative = useRef({ contenu: '', id: '' });
  async function envoyer(event) {
    event.preventDefault();
    const form = event.currentTarget;
    if (!form.reportValidity()) return;
    const data = new FormData(form);
    const fields = { name: data.get('name'), email: data.get('email'), message: data.get('message') };
    const contenu = JSON.stringify(fields);
    if (contenu !== tentative.current.contenu) tentative.current = { contenu, id: crypto.randomUUID() };
    setBusy(true); setEtat("Enviando…");
    try {
      const response = await fetch("https://littlereply.com/api/submit", {
        method: 'POST', headers: { 'Content-Type': 'application/json', 'Idempotency-Key': tentative.current.id },
        body: JSON.stringify({ form_key: "YOUR_ACCESS_KEY", fields })
      });
      const result = await response.json();
      if (!response.ok) throw new Error(response.status === 429 ? "Límite alcanzado. Vuelve a intentarlo más tarde." : "No se pudo enviar. Verifique los campos e inténtelo nuevamente.");
      setEtat("Tu mensaje fue guardado. La entrega de correo electrónico se rastrea por separado.");
    } catch (error) { setEtat(error instanceof Error ? error.message : "No se pudo enviar."); }
    finally { setBusy(false); }
  }
  return <form onSubmit={envoyer}>
    <label>Tu nombre<input name='name' autoComplete='name' required /></label>
    <label>Tu correo electrónico<input name='email' type='email' autoComplete='email' required /></label>
    <label>tu mensaje<textarea name='message' required maxLength={5000} /></label>
    <button disabled={busy}>enviar mensaje</button>
    <p role='status' aria-live='polite'>{etat}</p>
  </form>;
}