// Contact page with working form
function ContactPage({ navigate }) {
  const [form, setForm] = React.useState({
    name: '', email: '', company: '',
    message: '', projectType: '', budget: ''
  });
  const [errors, setErrors] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);

  const types = ['Résidence privée', 'Réhabilitation', 'Commercial / hôtellerie', 'Culturel / civique', 'Intérieurs uniquement', 'Pas encore sûr·e'];
  const budgets = ['< 200k €', '200k – 1M €', '1M – 2M €', '2M+ €', 'Confidentiel'];

  const set = (k, v) => {
    setForm((f) => ({ ...f, [k]: v }));
    if (errors[k]) setErrors((e) => {const n = { ...e };delete n[k];return n;});
  };

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = 'Merci d\'indiquer votre nom.';
    if (!form.email.trim()) e.email = 'Il nous faut un email pour vous répondre.';else
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = 'Cet email semble incorrect.';
    if (!form.message.trim() || form.message.trim().length < 12) e.message = 'Dites-nous-en un peu plus — même une seule phrase suffit.';
    if (!form.projectType) e.projectType = 'Choisissez le type le plus proche.';
    return e;
  };

  const submit = async (ev) => {
    ev.preventDefault();
    const e = validate();
    if (Object.keys(e).length) {setErrors(e);return;}
    setSubmitting(true);
    setErrors({});
    try {
      const res = await fetch('https://formsubmit.co/ajax/marilinebresle@gmail.com', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({
          _subject: 'Nouveau message via le site Think Architecture',
          _template: 'table',
          _captcha: 'false',
          _replyto: form.email,
          Nom: form.name,
          Email: form.email,
          'Projet / Surface': form.company,
          'Type de projet': form.projectType,
          'Budget estimé': form.budget,
          Message: form.message
        })
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok && String(data.success) === 'true') {
        setSubmitting(false);
        setSubmitted(true);
      } else {
        throw new Error(data.message || 'Échec de l\'envoi');
      }
    } catch (err) {
      setSubmitting(false);
      setErrors({ submit: 'L\'envoi a échoué. Réessayez, ou écrivez directement à marilinebresle@gmail.com.' });
    }
  };

  return (
    <main className="page-enter">
      <section className="contact-head">
        <h1 className="contact-head__title">
          Parlons de<br />
          votre <span className="italic">projet.</span>
        </h1>
        <p className="contact-head__sub">Une première conversation est le dessin le plus important que nous ferons ensemble. Dites-nous un mot sur votre projet, votre calendrier et ce que vous imaginez — nous vous répondrons dans les plus bref délais.

        </p>
      </section>

      <section className="section">
        <div className="container">
          <div className="contact-body">

            <div className="contact-info">
              <div className="contact-info__block">
                <span className="contact-info__label">Agence</span>
                <div className="contact-info__val">
                  Think Architecture<br />
                  24 Rue Vimaine<br />
                  38200 Vienne · France
                </div>
              </div>

              <div className="contact-info__block">
                <span className="contact-info__label">Email</span>
                <div className="contact-info__val">
                  <a href="mailto:marilinebresle@gmail.com">marilinebresle@gmail.com</a>
                </div>
              </div>

              <div className="contact-info__block">
                <span className="contact-info__label">Téléphone</span>
                <div className="contact-info__val">
                  <a href="tel:+33680474178">06 80 47 41 78</a>
                </div>
              </div>

              <div className="contact-info__block">
                <span className="contact-info__label">Horaires</span>
                <div className="contact-info__val" style={{ fontSize: 18 }}>
                  Lundi — Vendredi<br />
                  09:00 — 18:00 CET
                </div>
              </div>

              <div className="contact-info__map">
                <ArchPlaceholder seed="vienne-map" tone="warm" label="Vienne (38) · France" />
                <div style={{
                  position: 'absolute', top: '50%', left: '50%',
                  transform: 'translate(-50%, -50%)',
                  width: 16, height: 16, borderRadius: '50%',
                  background: 'var(--accent)',
                  boxShadow: '0 0 0 8px rgba(218,115,74,0.25), 0 0 0 16px rgba(218,115,74,0.12)'
                }} />
              </div>
            </div>

            {/* === FORM === */}
            <div>
              {submitted ?
              <Reveal>
                  <div className="form__success">
                    <strong style={{ fontWeight: 500 }}>Merci, {form.name.split(' ')[0]}.</strong><br />
                    Votre message est bien arrivé à l'agence. Mariline ou un membre de l'équipe vous écrira à <em>{form.email}</em> dans les deux jours ouvrés.
                  </div>
                  <button
                  className="text-link"
                  style={{ marginTop: 36, display: 'inline-flex' }}
                  onClick={() => {setSubmitted(false);setForm({ name: '', email: '', company: '', message: '', projectType: '', budget: '' });}}>
                  
                    Envoyer un autre message <ArrowNE size={11} className="arrow" />
                  </button>
                </Reveal> :

              <form className="form" onSubmit={submit} noValidate>
                  <div className="form-row">
                    <div className={`field ${errors.name ? 'has-error' : ''}`}>
                      <label>VOTRE NOM/ SOCIETE</label>
                      <input
                      type="text"
                      value={form.name}
                      onChange={(e) => set('name', e.target.value)}
                      placeholder="M., Mme, SCI…" />
                    
                      {errors.name && <span className="field__error">{errors.name}</span>}
                    </div>
                    <div className={`field ${errors.email ? 'has-error' : ''}`}>
                      <label>Email</label>
                      <input
                      type="email"
                      value={form.email}
                      onChange={(e) => set('email', e.target.value)}
                      placeholder="vous@email.fr" />
                    
                      {errors.email && <span className="field__error">{errors.email}</span>}
                    </div>
                  </div>

                  <div className="field">
                    <label>Nom du projet - Surface <span style={{ textTransform: 'none', color: 'var(--ink-muted)' }}>(optionnel)</span></label>
                    <input
                    type="text"
                    value={form.company}
                    onChange={(e) => set('company', e.target.value)}
                    placeholder="Maison à Sainte-Foy, Pharmacie de la Talaudière…" />
                  
                  </div>

                  <div className={`field ${errors.projectType ? 'has-error' : ''}`}>
                    <label>Quel type de projet ?</label>
                    <div className="chip-row">
                      {types.map((t) =>
                    <button
                      type="button"
                      key={t}
                      className={`chip ${form.projectType === t ? 'is-on' : ''}`}
                      onClick={() => set('projectType', t)}>
                      
                          {t}
                        </button>
                    )}
                    </div>
                    {errors.projectType && <span className="field__error">{errors.projectType}</span>}
                  </div>

                  <div className="field">
                    <label>Budget estimé <span style={{ textTransform: 'none', color: 'var(--ink-muted)' }}>(optionnel)</span></label>
                    <div className="chip-row">
                      {budgets.map((b) =>
                    <button
                      type="button"
                      key={b}
                      className={`chip ${form.budget === b ? 'is-on' : ''}`}
                      onClick={() => set('budget', b)}>
                      
                          {b}
                        </button>
                    )}
                    </div>
                  </div>

                  <div className={`field ${errors.message ? 'has-error' : ''}`}>
                    <label>Parlez-nous de votre site et de votre projet</label>
                    <textarea
                    value={form.message}
                    onChange={(e) => set('message', e.target.value)}
                    placeholder="Quelques phrases sur votre site, vos envies, votre calendrier, tout ce que nous devrions savoir…" />
                  
                    {errors.message && <span className="field__error">{errors.message}</span>}
                  </div>

                  <button type="submit" className="form__submit" disabled={submitting}>
                    {submitting ? 'Envoi en cours…' : 'À l’agence !'}
                    <ArrowNE size={12} />
                  </button>
                  {errors.submit && <span className="field__error" style={{ display: 'block', marginTop: 14 }}>{errors.submit}</span>}
                </form>
              }
            </div>
          </div>
        </div>
      </section>
    </main>);

}

window.ContactPage = ContactPage;