// Formulario ALLIANCE — sin datos precargados.
// El envío usa mailto: por defecto. Si se integra un endpoint real,
// reemplazar el handler `submit` y quitar el mailto fallback.
const ProposalForm = ({ t, lang }) => {
  const empty = {
    unit: '', name: '', company: '', role: '', email: '', phone: '', country: '',
    vessel_name: '', location: '', year: '', power: '', bp: '', propulsion: '',
    op_status: '', class_society: '', class_status: '', price: '', available: '',
    docs_link: '', notes: '',
  };
  const [s, setS] = React.useState(empty);
  const upd = (k) => (e) => setS((prev) => ({ ...prev, [k]: e.target.value }));

  // Consentimientos — ninguna casilla viene premarcada.
  const [consent, setConsent] = React.useState({ c1: false, c2: false, c3: false });
  const toggleConsent = (k) => () => setConsent((prev) => ({ ...prev, [k]: !prev[k] }));
  const allConsented = consent.c1 && consent.c2 && consent.c3;

  const buildMailtoBody = () => {
    const lines = [
      `${t.f_unit}: ${s.unit || '-'}`,
      '',
      `[${t.form_section_offerer}]`,
      `${t.f_name}: ${s.name || '-'}`,
      `${t.f_company}: ${s.company || '-'}`,
      `${t.f_role}: ${s.role || '-'}`,
      `${t.f_email}: ${s.email || '-'}`,
      `${t.f_phone}: ${s.phone || '-'}`,
      `${t.f_country}: ${s.country || '-'}`,
      '',
      `[${t.form_section_vessel}]`,
      `${t.f_vessel_name}: ${s.vessel_name || '-'}`,
      `${t.f_location}: ${s.location || '-'}`,
      `${t.f_year}: ${s.year || '-'}`,
      `${t.f_power}: ${s.power || '-'}`,
      `${t.f_bp}: ${s.bp || '-'}`,
      `${t.f_propulsion}: ${s.propulsion || '-'}`,
      `${t.f_op_status}: ${s.op_status || '-'}`,
      `${t.f_class_society}: ${s.class_society || '-'}`,
      `${t.f_class_status}: ${s.class_status || '-'}`,
      '',
      `[${t.form_section_commercial}]`,
      `${t.f_price}: ${s.price || '-'}`,
      `${t.f_available}: ${s.available || '-'}`,
      `${t.f_docs_link}: ${s.docs_link || '-'}`,
      '',
      `${t.f_notes}:`,
      s.notes || '-',
    ];
    return lines.join('\n');
  };

  const submit = (e) => {
    e.preventDefault();
    // El formulario no debe funcionar sin que las tres declaraciones sean aceptadas.
    if (!allConsented) return;
    const subject = 'Propuesta%20de%20remolcador%20usado';
    const body = encodeURIComponent(buildMailtoBody());
    // No mostramos confirmación de "enviado" — el mailto abre el cliente de correo del oferente.
    window.location.href = `mailto:hola@alliance.org.mx?subject=${subject}&body=${body}`;
  };

  return (
    <section id="form" className="section">
      <div className="container container-narrow">
        <div className="section-head">
          <div className="eyebrow">{t.form_eyebrow}</div>
          <h2>{t.form_title}</h2>
          <p className="section-lede">{t.form_lede}</p>
        </div>

        <form className="form-card" onSubmit={submit} noValidate={false}>
          {/* Sección: oferente */}
          <div className="form-section">
            <h3>{t.form_section_offerer}</h3>
            <div className="form-grid">
              <div className="f full">
                <label htmlFor="f-unit">{t.f_unit} <span className="req">*</span></label>
                <select id="f-unit" value={s.unit} onChange={upd('unit')} required>
                  <option value="">{t.f_unit_opts[0]}</option>
                  <option value="A">{t.f_unit_opts[1]}</option>
                  <option value="B">{t.f_unit_opts[2]}</option>
                </select>
              </div>
              <div className="f">
                <label htmlFor="f-name">{t.f_name} <span className="req">*</span></label>
                <input id="f-name" value={s.name} onChange={upd('name')} placeholder={t.ph_ingrese} required />
              </div>
              <div className="f">
                <label htmlFor="f-company">{t.f_company}</label>
                <input id="f-company" value={s.company} onChange={upd('company')} placeholder={t.ph_ingrese} />
              </div>
              <div className="f">
                <label htmlFor="f-role">{t.f_role}</label>
                <input id="f-role" value={s.role} onChange={upd('role')} placeholder={t.ph_ingrese} />
              </div>
              <div className="f">
                <label htmlFor="f-email">{t.f_email} <span className="req">*</span></label>
                <input id="f-email" type="email" value={s.email} onChange={upd('email')} placeholder={t.ph_ingrese} required />
              </div>
              <div className="f">
                <label htmlFor="f-phone">{t.f_phone}</label>
                <input id="f-phone" type="tel" value={s.phone} onChange={upd('phone')} placeholder={t.ph_ingrese} />
              </div>
              <div className="f">
                <label htmlFor="f-country">{t.f_country}</label>
                <input id="f-country" value={s.country} onChange={upd('country')} placeholder={t.ph_ingrese} />
              </div>
            </div>
          </div>

          {/* Sección: embarcación */}
          <div className="form-section">
            <h3>{t.form_section_vessel}</h3>
            <div className="form-grid">
              <div className="f">
                <label htmlFor="f-vessel">{t.f_vessel_name}</label>
                <input id="f-vessel" value={s.vessel_name} onChange={upd('vessel_name')} placeholder={t.ph_ingrese} />
              </div>
              <div className="f">
                <label htmlFor="f-loc">{t.f_location}</label>
                <input id="f-loc" value={s.location} onChange={upd('location')} placeholder={t.ph_indique} />
              </div>
              <div className="f">
                <label htmlFor="f-year">{t.f_year}</label>
                <input id="f-year" value={s.year} onChange={upd('year')} placeholder={t.ph_indique} inputMode="numeric" />
              </div>
              <div className="f">
                <label htmlFor="f-power">{t.f_power}</label>
                <input id="f-power" value={s.power} onChange={upd('power')} placeholder={t.ph_indique} />
              </div>
              <div className="f">
                <label htmlFor="f-bp">{t.f_bp}</label>
                <input id="f-bp" value={s.bp} onChange={upd('bp')} placeholder={t.ph_indique} />
              </div>
              <div className="f">
                <label htmlFor="f-prop">{t.f_propulsion}</label>
                <input id="f-prop" value={s.propulsion} onChange={upd('propulsion')} placeholder={t.ph_indique} />
              </div>
              <div className="f">
                <label htmlFor="f-op">{t.f_op_status}</label>
                <input id="f-op" value={s.op_status} onChange={upd('op_status')} placeholder={t.ph_indique} />
              </div>
              <div className="f">
                <label htmlFor="f-cs">{t.f_class_society}</label>
                <input id="f-cs" value={s.class_society} onChange={upd('class_society')} placeholder={t.ph_indique} />
              </div>
              <div className="f">
                <label htmlFor="f-cst">{t.f_class_status}</label>
                <input id="f-cst" value={s.class_status} onChange={upd('class_status')} placeholder={t.ph_indique} />
              </div>
            </div>
          </div>

          {/* Sección: comercial */}
          <div className="form-section">
            <h3>{t.form_section_commercial}</h3>
            <div className="form-grid">
              <div className="f">
                <label htmlFor="f-price">{t.f_price}</label>
                <input id="f-price" value={s.price} onChange={upd('price')} placeholder={t.ph_indique} />
              </div>
              <div className="f">
                <label htmlFor="f-avail">{t.f_available}</label>
                <input id="f-avail" value={s.available} onChange={upd('available')} placeholder={t.ph_indique} />
              </div>
              <div className="f full">
                <label htmlFor="f-docs">{t.f_docs_link}</label>
                <input id="f-docs" type="url" value={s.docs_link} onChange={upd('docs_link')} placeholder={t.ph_ingrese} />
              </div>
              <div className="f full">
                <label htmlFor="f-notes">{t.f_notes}</label>
                <textarea id="f-notes" rows={4} value={s.notes} onChange={upd('notes')} placeholder={t.ph_ingrese} />
              </div>
            </div>
          </div>

          {/* Sección: documentos */}
          <div className="form-section">
            <h3>{t.form_section_docs}</h3>
            <div className="upload-hint">
              <i data-lucide="mail"></i>
              <div>
                <strong>{t.f_docs_hint_title}</strong>
                <div className="hint">{t.f_docs_hint_body}</div>
              </div>
            </div>
          </div>

          {/* Aviso de privacidad simplificado */}
          <div className="privacy-mini-notice">
            <i data-lucide="shield-check"></i>
            <div>
              <strong>{t.privacy_notice_title}</strong>
              <p>{t.privacy_notice_body_1}</p>
              <p>
                {t.privacy_notice_body_2}{' '}
                <a href="privacy-notice.html" target="_blank" rel="noopener noreferrer">{t.privacy_notice_link}</a>.
              </p>
            </div>
          </div>

          {/* Casillas de consentimiento — ninguna premarcada; requeridas para habilitar el envío */}
          <ul className="consent-list">
            <li className="consent-item">
              <input
                type="checkbox"
                id="consent-1"
                checked={consent.c1}
                onChange={toggleConsent('c1')}
                required
              />
              <label htmlFor="consent-1">{t.consent_1}</label>
            </li>
            <li className="consent-item">
              <input
                type="checkbox"
                id="consent-2"
                checked={consent.c2}
                onChange={toggleConsent('c2')}
                required
              />
              <label htmlFor="consent-2">
                {t.consent_2_pre}{' '}
                <a href="privacy-notice.html" target="_blank" rel="noopener noreferrer">{t.consent_2_link}</a>{' '}
                {t.consent_2_post}
              </label>
            </li>
            <li className="consent-item">
              <input
                type="checkbox"
                id="consent-3"
                checked={consent.c3}
                onChange={toggleConsent('c3')}
                required
              />
              <label htmlFor="consent-3">{t.consent_3}</label>
            </li>
          </ul>
          {!allConsented && <p className="consent-required-note">{t.consent_required_note}</p>}

          <div className="form-actions">
            <button type="submit" className="btn btn-primary" disabled={!allConsented}>
              {t.form_submit}
              <i data-lucide="arrow-right"></i>
            </button>
            <a href="mailto:hola@alliance.org.mx?subject=Propuesta%20de%20remolcador%20usado" className="btn btn-outline">
              <i data-lucide="mail"></i>
              {t.form_email_button}
            </a>
          </div>

          <p className="form-required-note">{t.form_required_note}</p>
        </form>
      </div>
    </section>
  );
};

window.ProposalForm = ProposalForm;