// screen-contact.jsx — Contact page
const { useState: _cS } = React;

function ContactScreen({ t, lang }) {
  const c = t.contact;
  const [form, setForm] = _cS({ name: '', email: '', project: c.options[0], message: '', deadline: '', rgpd: false });
  const [errors, setErrors] = _cS({});
  const [sent, setSent] = _cS(false);

  const update = (k) => (e) => {
    const v = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
    setForm((f) => ({ ...f, [k]: v }));
    setErrors((er) => ({ ...er, [k]: undefined }));
  };

  const onSubmit = (e) => {
    e.preventDefault();
    const er = {};
    if (!form.name.trim()) er.name = lang === 'fr' ? 'Champ requis.' : 'Required.';
    if (!/^\S+@\S+\.\S+$/.test(form.email)) er.email = lang === 'fr' ? 'Email invalide.' : 'Invalid email.';
    if (!form.message.trim()) er.message = lang === 'fr' ? 'Champ requis.' : 'Required.';
    if (!form.rgpd) er.rgpd = lang === 'fr' ? 'Consentement requis.' : 'Consent required.';
    if (Object.keys(er).length) { setErrors(er); return; }
    setSent(true);
  };

  return (
    <main className="page contact-screen">
      <header className="contact-head">
        <span className="micro">— {c.title.toUpperCase()}</span>
        <h1 className="h1">{c.title}</h1>
        <p className="body-l contact-lede">{c.lede}</p>
      </header>

      <section className="contact-grid">
        {/* Left — direct details */}
        <aside className="contact-aside">
          <div className="aside-block">
            <span className="micro">Studio</span>
            <a className="link-u body-l" href={`mailto:${c.directEmail}`}>{c.directEmail}</a>
            <span className="body-l" style={{ color: 'var(--ink-60)' }}>{c.directPhone}</span>
          </div>
          <div className="aside-block">
            <span className="micro">{c.repHeading}</span>
            {t.info.rep.map((r, i) => (
              <div key={i} className="rep-card">
                <span className="micro">{r.place}</span>
                <span className="body-l">{r.name}</span>
                <a href={`mailto:${r.email}`} className="link-u">{r.email}</a>
              </div>
            ))}
          </div>
          <div className="aside-block">
            <span className="micro">Coordonnées</span>
            <span className="body-l" style={{ color: 'var(--ink-60)' }}>
              12 rue de Turenne<br />75004 Paris, France
            </span>
          </div>
        </aside>

        {/* Right — form */}
        <div className="contact-form-wrap">
          {sent ? (
            <div className="form-sent">
              <span className="micro">— {lang === 'fr' ? 'Envoyé' : 'Sent'}</span>
              <h2 className="h2">{c.sent}</h2>
              <button className="link-u" onClick={() => { setSent(false); setForm({ name: '', email: '', project: c.options[0], message: '', deadline: '', rgpd: false }); }}>
                {lang === 'fr' ? 'Envoyer un autre message' : 'Send another message'}
              </button>
            </div>
          ) : (
          <form className="contact-form" onSubmit={onSubmit} noValidate>
            <span className="micro form-heading">{c.formHeading}</span>

            <div className="form-row">
              <label className="form-field">
                <span className="form-label">{c.fields.name}</span>
                <input
                  type="text"
                  value={form.name}
                  onChange={update('name')}
                  className={errors.name ? 'has-error' : ''}
                  autoComplete="name"
                />
                {errors.name && <span className="form-error">{errors.name}</span>}
              </label>
              <label className="form-field">
                <span className="form-label">{c.fields.email}</span>
                <input
                  type="email"
                  value={form.email}
                  onChange={update('email')}
                  className={errors.email ? 'has-error' : ''}
                  autoComplete="email"
                />
                {errors.email && <span className="form-error">{errors.email}</span>}
              </label>
            </div>

            <div className="form-row">
              <label className="form-field">
                <span className="form-label">{c.fields.project}</span>
                <select value={form.project} onChange={update('project')}>
                  {c.options.map((o) => <option key={o} value={o}>{o}</option>)}
                </select>
              </label>
              <label className="form-field">
                <span className="form-label">{c.fields.deadline}</span>
                <input
                  type="text"
                  value={form.deadline}
                  onChange={update('deadline')}
                  placeholder={lang === 'fr' ? 'ex. juin 2026' : 'e.g. June 2026'}
                />
              </label>
            </div>

            <label className="form-field">
              <span className="form-label">{c.fields.message}</span>
              <textarea
                rows="6"
                value={form.message}
                onChange={update('message')}
                className={errors.message ? 'has-error' : ''}
              />
              {errors.message && <span className="form-error">{errors.message}</span>}
            </label>

            <label className="form-rgpd">
              <input type="checkbox" checked={form.rgpd} onChange={update('rgpd')} />
              <span className="micro">{c.rgpd}</span>
            </label>
            {errors.rgpd && <span className="form-error" style={{ marginTop: '-8px' }}>{errors.rgpd}</span>}

            <div className="form-submit">
              <button type="submit" className="btn">{c.submit}</button>
            </div>
          </form>
          )}
        </div>
      </section>
    </main>
  );
}

window.ContactScreen = ContactScreen;