/* global React */
const { useState: useStateContact } = React;

function ContactSection() {
  const [sent, setSent] = useStateContact(false);
  const [form, setForm] = useStateContact({ nom: "", email: "", etab: "", msg: "" });
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
  };
  return (
    <section className="fn-contact" id="contact">
      <div className="fn-contact-grid">
        <div className="fn-contact-copy">
          <span className="eyebrow">Contact</span>
          <h2 className="display-l">Travaillons<br/>ensemble.</h2>
          <p className="lead">
            On sait que vous vous donnez beaucoup de mal pour servir vos clients.
            Nous ferons de même. <em className="accent">Savoir-faire et faire savoir</em>,
            la bonne recette.
          </p>
          <dl className="fn-contact-meta">
            <div><dt>Email</dt><dd>fennec.image@gmail.com</dd></div>
            <div><dt>WhatsApp</dt><dd>+33 7 83 86 07 06</dd></div>
            <div><dt>Atelier</dt><dd>Villeneuve-lès-Avignon · 30400</dd></div>
            <div><dt>RDV</dt><dd>calendly.com/fennec-image/30min</dd></div>
          </dl>
        </div>

        <form className="fn-contact-form" onSubmit={submit}>
          {sent ? (
            <div className="fn-contact-sent">
              <span className="eyebrow">Merci</span>
              <h3>Message bien reçu.</h3>
              <p>Nous revenons vers vous sous 24h ouvrées.<br/>— Samuel</p>
            </div>
          ) : (
            <>
              <div className="fn-field"><label className="caption">Nom *</label>
                <input value={form.nom} onChange={(e)=>setForm({...form, nom:e.target.value})} required/></div>
              <div className="fn-field"><label className="caption">Email *</label>
                <input type="email" value={form.email} onChange={(e)=>setForm({...form, email:e.target.value})} required/></div>
              <div className="fn-field"><label className="caption">Établissement</label>
                <input value={form.etab} onChange={(e)=>setForm({...form, etab:e.target.value})} placeholder="Restaurant, hôtel, boutique…"/></div>
              <div className="fn-field"><label className="caption">Votre projet</label>
                <textarea rows="4" value={form.msg} onChange={(e)=>setForm({...form, msg:e.target.value})} placeholder="Parlez-nous de votre vitrine digitale…"/></div>
              <button type="submit" className="btn btn--primary">
                Envoyer
                <img src="assets/arrow-fennec.png" alt="" className="fn-arrow"/>
              </button>
            </>
          )}
        </form>
      </div>
    </section>
  );
}

window.ContactSection = ContactSection;