// Page Contact

const { useState: useStateC } = React;

/* ============ FORMULAIRE + COORDONNÉES ============ */
const ContactForm = () => {
  const [data, setData] = useStateC({ nom: '', prenom: '', telephone: '', email: '', message: '' });
  const [done, setDone]       = useStateC(false);
  const [sending, setSending] = useStateC(false);
  const [erreur, setErreur]   = useStateC('');

  const update = (k) => (e) => setData({ ...data, [k]: e.target.value });

  const submit = async (e) => {
    e.preventDefault();
    setSending(true);
    setErreur('');

    const body = new FormData();
    body.append('prenom',    data.prenom);
    body.append('nom',       data.nom);
    body.append('telephone', data.telephone);
    body.append('email',     data.email);
    body.append('message',   data.message);

    try {
      const res  = await fetch('./send.php', { method: 'POST', body });
      const json = await res.json();
      if (json.success) {
        setDone(true);
      } else {
        setErreur(json.error || 'Une erreur est survenue. Veuillez réessayer.');
      }
    } catch (_) {
      setErreur('Impossible de contacter le serveur. Veuillez réessayer.');
    } finally {
      setSending(false);
    }
  };

  if (done) {
    return (
      <div className="form contact-form">
        <div className="form-success">
          <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
            <circle cx="32" cy="32" r="28" />
            <path d="M20 32l8 8 16-16" />
          </svg>
          <h3 className="display">Message envoyé.</h3>
          <p>
            Merci {data.prenom || ''}. Notre équipe vous recontacte sous 48 heures.
          </p>
        </div>
      </div>
    );
  }

  return (
    <form className="form contact-form" onSubmit={submit}>
      <div className="field-row">
        <div className="field">
          <label>Prénom</label>
          <input value={data.prenom} onChange={update('prenom')} placeholder="Votre prénom" required />
        </div>
        <div className="field">
          <label>Nom</label>
          <input value={data.nom} onChange={update('nom')} placeholder="Votre nom" required />
        </div>
      </div>

      <div className="field-row">
        <div className="field">
          <label>Téléphone</label>
          <input type="tel" value={data.telephone} onChange={update('telephone')} placeholder="Votre téléphone" required />
        </div>
        <div className="field">
          <label>Email</label>
          <input type="email" value={data.email} onChange={update('email')} placeholder="Votre email" required />
        </div>
      </div>

      <div className="field">
        <label>Votre message</label>
        <textarea
          value={data.message}
          onChange={update('message')}
          placeholder="Décrivez brièvement votre projet, votre besoin ou votre question…"
          rows={6}
          required
        />
      </div>

      {erreur && <p className="form-error">{erreur}</p>}

      <button type="submit" className="btn btn-primary contact-submit" disabled={sending}>
        {sending ? 'Envoi en cours…' : <><span>Envoyer</span><Arrow /></>}
      </button>
    </form>
  );
};

const SectionContact = () => (
  <section className="metier-section paper-bg contact-section">
    <div className="shell">
      <div className="contact-grid">
        <Reveal>
          <aside className="contact-side">
            <div className="metier-index">Nos coordonnées</div>
            <h2 className="display metier-title contact-title">
              Parlons de <em>votre projet.</em>
            </h2>
            <p className="contact-side-text">
              Notre équipe vous accompagne dans la valorisation de votre patrimoine foncier
              ou immobilier en Bretagne sud et dans tout le Grand Ouest.
            </p>

            <div className="contact-blocks">
              <div className="contact-block">
                <div className="label">Antenne de Vannes</div>
                <div className="val">9 Pl. de la République<br />56000 Vannes</div>
              </div>
              <div className="contact-block">
                <div className="label">Téléphone</div>
                <a href="tel:+33695214074" className="val phone">06.95.21.40.74</a>
              </div>
              <div className="contact-block" style={{ borderBottom: 0 }}>
                <div className="label">Email</div>
                <a href="mailto:p.leroux@immoetsens.com" className="val">p.leroux@immoetsens.com</a>
              </div>
            </div>
          </aside>
        </Reveal>

        <Reveal delay={1}>
          <ContactForm />
        </Reveal>
      </div>
    </div>
  </section>
);

/* ============ PAGE ============ */
const Contact = () => (
  <>
    <SectionContact />
  </>
);

window.Contact = Contact;