// Contact.jsx — formulaire de prise de contact
const Contact = () => {
  const [form, setForm] = React.useState({ prenom: "", nom: "", email: "", tel: "", message: "" });
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState("");
  const fontFamily = '"Helvetica Neue", Helvetica, Arial, sans-serif';

  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const submit = (e) => {
    e.preventDefault();
    if (!form.prenom || !form.nom || !form.email) return;
    setSending(true);
    setError("");
    fetch("https://formspree.io/f/xqewrjpl", {
      method: "POST",
      headers: { "Content-Type": "application/json", "Accept": "application/json" },
      body: JSON.stringify({
        prenom: form.prenom,
        nom: form.nom,
        email: form.email,
        telephone: form.tel,
        message: form.message,
        _subject: `Nouveau contact site — ${form.prenom} ${form.nom}`,
      }),
    })
      .then((r) => {
        if (r.ok) { setSent(true); }
        else { setError("Une erreur est survenue. Réessayez ou écrivez-nous directement."); }
      })
      .catch(() => setError("Une erreur est survenue. Réessayez ou écrivez-nous directement."))
      .finally(() => setSending(false));
  };

  const labelStyle = {
    display: "block",
    fontSize: 11, letterSpacing: ".24em", textTransform: "uppercase",
    opacity: .55, fontWeight: 700, marginBottom: 12,
  };
  const inputStyle = {
    width: "100%", background: "transparent", border: "none",
    borderBottom: "1px solid rgba(255,255,255,.3)",
    color: "#fff", fontFamily: "inherit", fontSize: 19, fontWeight: 400,
    padding: "8px 0 14px", outline: "none",
    transition: "border-color 200ms ease-out",
  };

  return (
    <section id="contact" style={{
      background: "#3D1520", color: "#fff",
      padding: "200px 56px",
      fontFamily,
    }}>
      <div style={{ maxWidth: 1500, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 96, alignItems: "start" }}>

          {/* LEFT — pitch */}
          <div>
            <div style={{ fontSize: 12, letterSpacing: ".24em", textTransform: "uppercase", opacity: .65, fontWeight: 700, marginBottom: 36 }}>
              09 — Devenez culturel
            </div>
            <h2 style={{
              fontSize: "clamp(56px, 6vw, 96px)", lineHeight: .98,
              letterSpacing: "-0.02em", fontWeight: 700, margin: 0, marginBottom: 48,
            }}>
              Parlons de votre<br/><i>marque.</i>
            </h2>
            <p style={{ fontSize: 19, lineHeight: 1.55, opacity: .85, maxWidth: 480, margin: 0, marginBottom: 56 }}>
              Laissez-nous vos coordonnées — nous vous recontactons sous 48 heures
              pour un premier échange, sans engagement.
            </p>
            <div style={{ fontSize: 13, lineHeight: 1.7, opacity: .65, letterSpacing: ".02em" }}>
              Ou directement par mail :<br/>
              <a href="mailto:contact@agencejmd.com" style={{ color: "#fff", borderBottom: "1px solid rgba(255,255,255,.4)", textDecoration: "none" }}>
                contact@agencejmd.com
              </a>
            </div>
          </div>

          {/* RIGHT — form */}
          <div>
            {sent ? (
              <div style={{
                border: "1px solid rgba(255,255,255,.25)", padding: "80px 56px",
                textAlign: "center",
              }}>
                <div style={{ fontSize: 12, letterSpacing: ".24em", textTransform: "uppercase", opacity: .65, fontWeight: 700, marginBottom: 28 }}>
                  Message reçu
                </div>
                <div style={{ fontSize: 32, lineHeight: 1.25, fontWeight: 700, letterSpacing: "-0.01em", marginBottom: 24 }}>
                  Merci, {form.prenom}.
                </div>
                <p style={{ fontSize: 17, opacity: .75, lineHeight: 1.55, margin: 0, maxWidth: 420, marginInline: "auto" }}>
                  Nous vous recontactons sous 48 heures à l'adresse <i>{form.email}</i>.
                </p>
              </div>
            ) : (
              <form onSubmit={submit} style={{ display: "grid", gap: 40 }}>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40 }}>
                  <div>
                    <label style={labelStyle} htmlFor="f-prenom">Prénom *</label>
                    <input id="f-prenom" type="text" required value={form.prenom} onChange={set("prenom")} style={inputStyle} />
                  </div>
                  <div>
                    <label style={labelStyle} htmlFor="f-nom">Nom *</label>
                    <input id="f-nom" type="text" required value={form.nom} onChange={set("nom")} style={inputStyle} />
                  </div>
                </div>

                <div>
                  <label style={labelStyle} htmlFor="f-email">Adresse e-mail *</label>
                  <input id="f-email" type="email" required value={form.email} onChange={set("email")} style={inputStyle} />
                </div>

                <div>
                  <label style={labelStyle} htmlFor="f-tel">Numéro de téléphone</label>
                  <input id="f-tel" type="tel" value={form.tel} onChange={set("tel")} style={inputStyle} placeholder="06 00 00 00 00" />
                </div>

                <div>
                  <label style={labelStyle} htmlFor="f-msg">Quelques mots sur votre projet (facultatif)</label>
                  <textarea id="f-msg" rows="3" value={form.message} onChange={set("message")} style={{ ...inputStyle, resize: "vertical", lineHeight: 1.45 }} />
                </div>

                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 12, gap: 24, flexWrap: "wrap" }}>
                  <div style={{ fontSize: 12, opacity: .55, letterSpacing: ".02em" }}>* champs requis</div>
                  {error && (
                    <div style={{ fontSize: 13, color: "#F8E0A0", letterSpacing: ".02em" }}>{error}</div>
                  )}
                  <button type="submit" disabled={sending} style={{
                    background: "#fff", color: "#3D1520", border: "none",
                    padding: "20px 36px", cursor: sending ? "wait" : "pointer", fontFamily: "inherit",
                    fontSize: 12, letterSpacing: ".24em", textTransform: "uppercase", fontWeight: 700,
                    opacity: sending ? .6 : 1,
                  }}>
                    {sending ? "Envoi…" : "Envoyer ma demande →"}
                  </button>
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};
window.Contact = Contact;