// Contact.jsx — integrated contact section (bottom of page). // Real

wired for Formspree. While the endpoint is still the placeholder // it shows a demo confirmation; paste a real Formspree ID to send for real. // ───────────────────────────────────────────────────────────── // TO GO LIVE: create a form at https://formspree.io and replace // the id below with yours, e.g. "https://formspree.io/f/abcdwxyz". const FORMSPREE_ENDPOINT = "https://formspree.io/f/REMPLACER_PAR_VOTRE_ID"; // ───────────────────────────────────────────────────────────── const IconArrow = () => ( ); const IconCheck = () => ( ); function ContactField({ label, name, placeholder, type = "text", required = false, textarea = false, autoComplete }) { const [focus, setFocus] = React.useState(false); const base = { width: "100%", fontFamily: "var(--font-sans)", fontSize: 15.5, color: "var(--ink)", background: "var(--white)", borderRadius: 8, padding: "13px 15px", border: "1px solid " + (focus ? "var(--gold)" : "var(--line-strong)"), boxShadow: focus ? "0 0 0 3px var(--gold-tint)" : "none", outline: "none", transition: "border-color .18s, box-shadow .18s", resize: "vertical", }; return ( {label}{required && ★} {textarea ? (

setFocus(true)} onBlur={() => setFocus(false)} style={base} />
      ) : (
        <input type={type} name={name} placeholder={placeholder} required={required} autoComplete={autoComplete}
          onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} style={base} />
      )}
    </label>
  );
}

function Contact() {
  const [status, setStatus] = React.useState("idle"); // idle | sending | sent | error

async function handleSubmit(e) {
    e.preventDefault();
    const form = e.target;
    const data = new FormData(form);

// Demo mode: endpoint not configured yet → simulate success.
    if (FORMSPREE_ENDPOINT.includes("REMPLACER")) {
      setStatus("sending");
      setTimeout(() => setStatus("sent"), 700);
      return;
    }

setStatus("sending");
    try {
      const res = await fetch(FORMSPREE_ENDPOINT, {
        method: "POST", body: data, headers: { Accept: "application/json" },
      });
      setStatus(res.ok ? "sent" : "error");
    } catch (_) {
      setStatus("error");
    }
  }

return (
    <section className="section contact" id="contact">
      <div className="wrap contact-grid">
        {/* Left rail — invitation + direct contacts */}
        <div className="contact-aside">
          <p className="eyebrow reveal">Réserver une cohorte</p>
          <h2 className="reveal contact-h2">Échangeons sur<br />votre contexte.</h2>
          <p className="reveal contact-intro">
            Les cohortes réunissent 6 à 8 dirigeants. Laissez vos coordonnées :
            nous revenons vers vous sous 48 h pour caler une date et qualifier
            l'adéquation au programme.
          </p>
          <hr className="rule reveal" style={{ margin: "30px 0" }} />
          <div className="reveal contact-direct">
            <p className="cd-label">Ou écrivez-nous directement</p>
            <a href="mailto:david.horvat@quodlibet.pro" className="cd-line">
              <span>David Horvat</span>david.horvat@quodlibet.pro
            </a>
            <a href="mailto:jerome.fenyo@goyave-consulting.com" className="cd-line">
              <span>Jérôme Fenyo</span>jerome.fenyo@goyave-consulting.com
            </a>
          </div>
        </div>

{/* Right — the form card */}
        <div className="contact-card reveal">
          {status !== "sent" ? (
            <form onSubmit={handleSubmit} noValidate={false}>
              <div className="cf-grid">
                <ContactField label="Nom" name="nom" placeholder="Votre nom" required autoComplete="name" />
                <ContactField label="Fonction" name="fonction" placeholder="Ex. Directeur Général" required autoComplete="organization-title" />
                <ContactField label="Entreprise" name="entreprise" placeholder="Votre organisation" autoComplete="organization" />
                <ContactField label="Téléphone" name="telephone" placeholder="+33 …" type="tel" autoComplete="tel" />
              </div>
              <div style={{ marginTop: 18 }}>
                <ContactField label="Email professionnel" name="email" placeholder="vous@entreprise.com" type="email" required autoComplete="email" />
              </div>
              <div style={{ marginTop: 18 }}>
                <ContactField label="Message / contexte" name="message" placeholder="Quelques mots sur votre contexte et ce que vous cherchez à transformer." textarea />
              </div>

{status === "error" && (
                <p className="cf-error">Un problème est survenu. Réessayez ou écrivez-nous directement.</p>
              )}

<button type="submit" className="btn btn-gold cf-submit" disabled={status === "sending"}>
                {status === "sending" ? "Envoi…" : "Envoyer ma demande"}
                {status !== "sending" && <IconArrow />}
              </button>
              <p className="cf-note">
                Réponse sous 48 h · Vos coordonnées restent confidentielles.
              </p>
            </form>
          ) : (
            <div className="cf-success">
              <div className="cf-check"><IconCheck /></div>
              <h3>Demande envoyée.</h3>
              <p>Merci. Nous revenons vers vous sous 48 h pour caler une date.</p>
              <button className="btn btn-ghost" onClick={() => setStatus("idle")}>Envoyer une autre demande</button>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Contact });