El Formulario de contacto: el lead a un toque, accesible y sin spam

---
// USO BÁSICO · HTML5 nativo, sin JavaScript de validación.
// El componente actual ya pinta este shape. La página padre solo
// lo importa y lo monta. Cero schema, cero backend; el handler
// del componente arma el texto y abre wa.me con CONTACT.whatsapp.
import ContactForm from '@components/ContactForm.astro'

// Las props son OPCIONALES — todas tienen default sensato.
//   heading?  → título del bloque (default «¿No está tu duda? Escríbenos»)
//   note?     → nota bajo el botón (default «Respuesta inmediata · Sin compromiso»)
//   asuntos?  → opciones del <select> (default 4 asuntos genéricos)
---

<section class="section section--surface">
  <div class="container">
    <ContactForm
      heading="¿Tienes una duda? Escríbenos"
      asuntos={['Quiero una cotización', 'Soporte técnico', 'Una pregunta general']}
    />
  </div>
</section>

{/* Comportamiento: al submit el componente verifica checkValidity()
    nativo, arma un mensaje con nombre + asunto + mensaje, encodea con
    encodeURIComponent y abre wa.me/<CONTACT.whatsapp>?text=… en ventana
    nueva. NO manda correo, NO golpea backend, NO emite schema. */}

---
// CON HONEYPOT + VALIDACIÓN es-MX · upgrade del componente actual
// para sitios con backend real (cuando el form NO va a WhatsApp).
//
// EL HONEYPOT: un input oculto al humano (position:absolute,
// left:-9999px) que SOLO los bots rellenan (los crawlers rellenan
// todo lo que ven). Si llega con valor → 90% probable bot → se
// descarta sin avisar al humano. Cero captcha, cero fricción
// para el visitante real. 4 líneas de HTML + 1 check server.
//
// VALIDACIÓN es-MX: pattern para teléfono nacional (10 dígitos),
// type=email + nativo + check de TLD válido en server.
---

<form method="POST" action="/api/contacto" class="cform">

  <!-- HONEYPOT · oculto al humano, visible al bot -->
  <input
    type="text"
    name="website"
    tabindex="-1"
    autocomplete="off"
    aria-hidden="true"
    style="position:absolute; left:-9999px; opacity:0; pointer-events:none;"
  />

  <div class="cform__field">
    <label for="cf-nombre">Nombre completo</label>
    <input
      id="cf-nombre" name="nombre" type="text"
      autocomplete="name" enterkeyhint="next"
      required minlength="2" maxlength="80"
      aria-describedby="nombre-err"
    />
    <span id="nombre-err" class="cform__err" role="alert"></span>
  </div>

  <div class="cform__field">
    <label for="cf-tel">Teléfono (10 dígitos)</label>
    <input
      id="cf-tel" name="telefono" type="tel"
      inputmode="tel" autocomplete="tel-national"
      enterkeyhint="next"
      required pattern="[0-9]{10}" maxlength="10"
      aria-describedby="tel-err"
    />
    <span id="tel-err" class="cform__err" role="alert"></span>
  </div>

  <div class="cform__field">
    <label for="cf-msg">¿Cómo podemos ayudarte?</label>
    <textarea
      id="cf-msg" name="mensaje" rows="5"
      enterkeyhint="send"
      required minlength="20" maxlength="2000"
      aria-describedby="msg-help msg-err"
    ></textarea>
    <p id="msg-help" class="cform__hint">Cuéntanos qué necesitas: producto, plazo, presupuesto.</p>
    <span id="msg-err" class="cform__err" role="alert"></span>
  </div>

  <!-- CONSENTIMIENTO · requisito LFPDPPP art. 16 -->
  <label class="cform__check">
    <input type="checkbox" name="consent" required />
    <span>He leído y acepto el <a href="/privacidad">aviso de privacidad</a>.</span>
  </label>

  <button type="submit" class="cform__submit">Enviar mensaje</button>

  <div role="status" aria-live="polite" class="cform__status"></div>
</form>

// CLOUDFLARE PAGES FUNCTION · POST real con honeypot + Turnstile + rate-limit
// Archivo: functions/api/contacto.ts (sigue la convención Pages Functions).
//
// FLUJO COMPLETO (edge, sin servidor que mantener):
//   1. Lee el body POST.
//   2. Verifica honeypot: si el campo 'website' viene con valor → bot.
//   3. Verifica Cloudflare Turnstile (sustituto moderno de reCAPTCHA, sin tracking).
//   4. Valida shape server-side (NO confíes en el client).
//   5. Rate-limit por IP (10 envíos / hora) usando Cloudflare KV.
//   6. Envía a Brevo / Resend / MailChannels (free en Cloudflare Workers).
//   7. Devuelve { ok: true } o { ok: false, error }.

export const onRequestPost: PagesFunction<{
  TURNSTILE_SECRET: string;
  RATE_LIMIT: KVNamespace;
  RESEND_KEY: string;
}> = async ({ request, env }) => {
  const data = await request.formData();

  // 1. HONEYPOT — si trae valor, es bot. Respondemos 200 OK falso (que el
  //    bot crea que tuvo éxito y no reintente con otro vector).
  if (String(data.get('website') || '').trim() !== '') {
    return Response.json({ ok: true });
  }

  // 2. TURNSTILE — verificación server-side del token del widget.
  const token = String(data.get('cf-turnstile-response') || '');
  const ip = request.headers.get('CF-Connecting-IP') ?? '';
  const verify = await fetch('https://challenges.cloudflare.com/turnstile/v0/siteverify', {
    method: 'POST',
    headers: { 'content-type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams({ secret: env.TURNSTILE_SECRET, response: token, remoteip: ip }),
  }).then((r) => r.json() as Promise<{ success: boolean }>);
  if (!verify.success) {
    return Response.json({ ok: false, error: 'captcha' }, { status: 400 });
  }

  // 3. VALIDACIÓN SERVER · autoritativa (cliente solo es UX).
  const nombre = String(data.get('nombre') || '').trim();
  const email = String(data.get('email') || '').trim();
  const mensaje = String(data.get('mensaje') || '').trim();
  const consent = data.get('consent') === 'on' || data.get('consent') === 'true';
  if (!consent) return Response.json({ ok: false, error: 'consent' }, { status: 400 });
  if (nombre.length < 2 || nombre.length > 80) return Response.json({ ok: false, error: 'nombre' }, { status: 400 });
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return Response.json({ ok: false, error: 'email' }, { status: 400 });
  if (mensaje.length < 20 || mensaje.length > 2000) return Response.json({ ok: false, error: 'mensaje' }, { status: 400 });

  // 4. RATE-LIMIT · 10 envíos / hora / IP usando Cloudflare KV.
  const key = `rl:${ip}`;
  const count = Number((await env.RATE_LIMIT.get(key)) || '0');
  if (count >= 10) return Response.json({ ok: false, error: 'rate-limit' }, { status: 429 });
  await env.RATE_LIMIT.put(key, String(count + 1), { expirationTtl: 3600 });

  // 5. ENVÍO · Resend (o Brevo, MailChannels, etc.).
  await fetch('https://api.resend.com/emails', {
    method: 'POST',
    headers: { authorization: `Bearer ${env.RESEND_KEY}`, 'content-type': 'application/json' },
    body: JSON.stringify({
      from: '[email protected]',
      to: '[email protected]',
      subject: `Nuevo contacto: ${nombre}`,
      text: `Nombre: ${nombre}\nCorreo: ${email}\n\n${mensaje}`,
    }),
  });

  return Response.json({ ok: true });
};