// ApplicationForm.jsx
function ApplicationForm({ onToast }) {
  const { t } = window.useI18n();
  const [data, setData] = React.useState({ name: "", email: "", phone: "", type: "single", about: "" });
  const [errors, setErrors] = React.useState({});
  const [done, setDone] = React.useState(false);

  const update = (k, v) => setData(d => ({ ...d, [k]: v }));

  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!data.name.trim()) errs.name = t.form.errors.name;
    if (!/.+@.+\..+/.test(data.email)) errs.email = t.form.errors.email;
    if (!data.phone.trim()) errs.phone = t.form.errors.phone;
    setErrors(errs);
    if (Object.keys(errs).length) return;
    setDone(true);
    onToast && onToast(t.form.toast);
  };

  return (
    <section className="section section--navy" id="register">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t.form.eyebrow}</span>
            <h2 className="section-title">{t.form.title}</h2>
          </div>
          <p className="section-sub">{t.form.sub}</p>
        </div>
        <div className="form-grid">
          <div className="form-card">
            {done ? (
              <div className="form-success">
                <div className="form-success__title">{t.form.successTitle}</div>
                <p style={{ margin: 0, color: "rgba(255,255,255,0.75)" }}>{t.form.successText}</p>
              </div>
            ) : (
              <form onSubmit={submit} noValidate>
                <div className={`field ${errors.name ? "field--error" : ""}`}>
                  <label>{t.form.labels.name} *</label>
                  <input type="text" placeholder={t.form.placeholders.name} value={data.name} onChange={e => update("name", e.target.value)} />
                  {errors.name && <div className="field__error">{errors.name}</div>}
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "16px" }}>
                  <div className={`field ${errors.email ? "field--error" : ""}`}>
                    <label>{t.form.labels.email} *</label>
                    <input type="email" placeholder={t.form.placeholders.email} value={data.email} onChange={e => update("email", e.target.value)} />
                    {errors.email && <div className="field__error">{errors.email}</div>}
                  </div>
                  <div className={`field ${errors.phone ? "field--error" : ""}`}>
                    <label>{t.form.labels.phone} *</label>
                    <input type="tel" placeholder={t.form.placeholders.phone} value={data.phone} onChange={e => update("phone", e.target.value)} />
                    {errors.phone && <div className="field__error">{errors.phone}</div>}
                  </div>
                </div>
                <div className="field">
                  <label>{t.form.labels.type}</label>
                  <div className="choice">
                    <button type="button" className={data.type === "single" ? "active" : ""} onClick={() => update("type", "single")}>{t.form.type1}</button>
                    <button type="button" className={data.type === "cabin" ? "active" : ""} onClick={() => update("type", "cabin")}>{t.form.type2}</button>
                  </div>
                </div>
                <div className="field">
                  <label>{t.form.labels.about}</label>
                  <textarea placeholder={t.form.placeholders.about} value={data.about} onChange={e => update("about", e.target.value)}></textarea>
                </div>
                <button type="submit" className="btn btn--gold" style={{ width: "100%", marginTop: "16px" }}>{t.form.submit}</button>
              </form>
            )}
          </div>

          <div className="tg-card">
            <div className="tg-card__icon">⛵</div>
            <h3>{t.form.tgTitle}</h3>
            <p>{t.form.tgText}</p>
            <a className="btn btn--gold" href="https://t.me/yr_test_regatta_bot" target="_blank" rel="noopener">{t.form.tgCta}</a>
          </div>
        </div>
      </div>
    </section>
  );
}
window.ApplicationForm = ApplicationForm;