"use client";

import type { FormEvent } from "react";

const BESOINS = [
  "Audit gratuit (site ou fiche Google)",
  "Refonte de site vitrine",
  "Webmastering",
  "Maintenance WordPress",
  "SEO local",
  "Google Business Profile",
  "IA pour mon entreprise",
  "Autre demande",
];

/* Formulaire de devis : construit un mailto pré-rempli vers
   nicolas@ic-run.com (site statique, aucun back-end requis). */
export default function ContactForm() {
  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const form = e.currentTarget;
    if (!form.reportValidity()) return;

    const data = new FormData(form);
    const v = (name: string) => String(data.get(name) ?? "").trim();

    const subject = `Demande de devis - ${v("besoin")} - ${v("nom")}`;
    const body =
      `Nom : ${v("nom")}\n` +
      `Email : ${v("email")}\n` +
      `Téléphone : ${v("tel") || "non renseigné"}\n` +
      `Besoin : ${v("besoin")}\n\n` +
      `Message :\n${v("message")}\n\n` +
      "(Demande envoyée depuis ic-run.com)";

    window.location.href =
      `mailto:nicolas@ic-run.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
  };

  return (
    <form className="contact-form" id="devis" noValidate onSubmit={onSubmit}>
      <div className="form-row">
        <div className="form-field">
          <label htmlFor="f-nom">Votre nom *</label>
          <input type="text" id="f-nom" name="nom" required autoComplete="name" placeholder="Jean Payet" />
        </div>
        <div className="form-field">
          <label htmlFor="f-email">Votre email *</label>
          <input type="email" id="f-email" name="email" required autoComplete="email" placeholder="jean@entreprise.re" />
        </div>
      </div>
      <div className="form-row">
        <div className="form-field">
          <label htmlFor="f-tel">Téléphone</label>
          <input type="tel" id="f-tel" name="tel" autoComplete="tel" placeholder="0692 00 00 00" />
        </div>
        <div className="form-field">
          <label htmlFor="f-besoin">Votre besoin *</label>
          <select id="f-besoin" name="besoin" required defaultValue={BESOINS[0]}>
            {BESOINS.map((b) => (
              <option key={b} value={b}>{b}</option>
            ))}
          </select>
        </div>
      </div>
      <div className="form-field">
        <label htmlFor="f-message">Votre message *</label>
        <textarea
          id="f-message"
          name="message"
          required
          placeholder="Parlez-nous de votre site, de votre activité et de vos objectifs."
        />
      </div>
      <div className="form-actions">
        <button type="submit" className="btn btn-primary btn-lg">Envoyer la demande</button>
        <p className="form-note">
          L&apos;envoi ouvre votre messagerie avec la demande pré-remplie vers nicolas@ic-run.com.
        </p>
      </div>
    </form>
  );
}