/* global React, useLang */
const { useMemo } = React;
// ============ Join us / Únete al equipo ============

function useValues() {
  const { t } = useLang();
  return useMemo(() =>
    ["1", "2", "3", "4"].map((n) => ({
      k: n.padStart(2, "0"),
      t: t(`join.v.${n}.t`),
      d: t(`join.v.${n}.d`)
    })), [t]);
}

function JoinHero() {
  const { t, lang } = useLang();
  const segments = useMemo(() => [
    { type: "text", value: t("join.typ.l1") },
    { type: "br" },
    { type: "text", value: t("join.typ.l2") },
    { type: "underline", value: t("join.typ.u") },
    { type: "text", value: t("join.typ.l3") }
  ], [lang, t]);
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="hero-grid" style={{ gridTemplateColumns: "1fr" }}>
          <div className="hero-lower-left" style={{ maxWidth: 1100 }}>
            <span className="kicker"><span className="dot" />{t("join.hero.kicker")}</span>
            <h1 className="hero-headline" style={{ marginTop: 22 }}>
              <TypedHeadline key={lang} segments={segments} />
            </h1>
            <p className="hero-sub" style={{ maxWidth: "62ch", marginTop: 36 }}>
              {t("join.hero.sub")}
            </p>
            <div className="fp-toc" aria-label="Secciones">
              <a href="#valores">{t("join.toc.val")}</a>
              <a href="#cv">{t("join.toc.cv")}</a>
              <a href="#partner">{t("join.toc.partner")}</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Values() {
  const { t } = useLang();
  const VALUES = useValues();
  return (
    <section id="valores" className="on-paper" style={{ paddingTop: "clamp(48px, 6vw, 96px)" }}>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="kicker"><span className="dot" />{t("join.val.kicker")}</span>
            <h2 className="section" style={{ marginTop: 18 }}>
              {t("join.val.h2a")}<span className="underline-mark">{t("join.val.h2u")}</span>{t("join.val.h2b")}
            </h2>
          </div>
          <p className="lead" style={{ alignSelf: "end" }}>
            {t("join.val.lead")}
          </p>
        </div>

        <div className="challenges">
          {VALUES.map(v => (
            <div key={v.k} className="challenge">
              <div className="num">— {v.k} · {t("join.val.cardnum")}</div>
              <h3>{v.t}</h3>
              <p>{v.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function joinPostUrl(kind) {
  if (typeof window === "undefined") return "";
  const u = kind === "partner" ? window.FORSVAR_PARTNER_FORM_ENDPOINT : window.FORSVAR_JOIN_FORM_ENDPOINT;
  return typeof u === "string" ? u.trim() : "";
}

function ApplyForm({ id, kickerKey, titleContent, leadKey, ctaKey, kind }) {
  const { t } = useLang();
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [submitError, setSubmitError] = React.useState("");

  const onSubmit = async (e) => {
    e.preventDefault();
    setSubmitError("");
    const url = joinPostUrl(kind);
    if (!url) {
      setSubmitError(t("contact.err.config"));
      return;
    }
    const form = e.currentTarget;
    setSubmitting(true);
    try {
      const fd = new FormData(form);
      const res = await fetch(url, {
        method: "POST",
        headers: { Accept: "application/json" },
        body: fd,
        mode: "cors"
      });
      let data = null;
      try { data = await res.json(); } catch (_) { /* ignore */ }
      if (!res.ok) {
        let detail = `código ${res.status}`;
        if (data) {
          if (data.code === "size") detail = t("join.err.size");
          else if (data.code === "type") detail = t("join.err.type");
          else if (data.message) detail = String(data.message);
        }
        throw new Error(detail);
      }
      form.reset();
      setSent(true);
    } catch (err) {
      const reason = err && err.message ? err.message : "error de red";
      setSubmitError(t("contact.err.send").replace("{reason}", reason));
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <section id={id} className={kind === "partner" ? "on-ink" : ""}>
      <div className="container">
        <div className="apply-wrap">
          <div className="apply-intro">
            <span className="kicker"><span className="dot" />{t(kickerKey)}</span>
            <h2 className="section" style={{ marginTop: 16, color: kind === "partner" ? "#fff" : "var(--ink)" }}>{titleContent}</h2>
            <p className="lead" style={{ marginTop: 18 }}>{t(leadKey)}</p>
          </div>

          <form className={`apply-form ${kind === "partner" ? "on-dark" : ""}`} onSubmit={onSubmit}>
            {sent ? (
              <div className="apply-sent">
                <div className="sent-mark">✓</div>
                <h3>{t("join.form.sent.title")}</h3>
                <p>{t("join.form.sent.p")}</p>
              </div>
            ) : (
              <>
                {submitError ? <p className="apply-form-error" role="alert">{submitError}</p> : null}
                <Field label={t("join.form.name")} required>
                  <input type="text" name="nombre" required disabled={submitting} />
                </Field>
                <Field label={t("join.form.email")} required>
                  <input type="email" name="email" required disabled={submitting} />
                </Field>
                {kind === "cv" ? (
                  <>
                    <Field label={t("join.form.link")} required>
                      <input type="url" name="link" placeholder="https://" required disabled={submitting} />
                    </Field>
                    <Field label={t("join.form.area")} required>
                      <select name="area" required defaultValue="" disabled={submitting}>
                        <option value="" disabled>{t("join.opt.placeholder")}</option>
                        <option value={t("join.opt.backend")}>{t("join.opt.backend")}</option>
                        <option value={t("join.opt.data")}>{t("join.opt.data")}</option>
                        <option value={t("join.opt.product")}>{t("join.opt.product")}</option>
                        <option value={t("join.opt.design")}>{t("join.opt.design")}</option>
                        <option value={t("join.opt.risk")}>{t("join.opt.risk")}</option>
                        <option value={t("join.opt.sales")}>{t("join.opt.sales")}</option>
                        <option value={t("join.opt.other")}>{t("join.opt.other")}</option>
                      </select>
                    </Field>
                    <Field label={t("join.form.cv")} required>
                      <input type="file" name="cv" accept="application/pdf,.pdf" required disabled={submitting} />
                    </Field>
                    <Field label={t("join.form.msg.cv")} required full>
                      <textarea name="msg" rows="4" required disabled={submitting}></textarea>
                    </Field>
                  </>
                ) : (
                  <>
                    <Field label={t("join.form.company")} required>
                      <input type="text" name="empresa" required disabled={submitting} />
                    </Field>
                    <Field label={t("join.form.region")} required>
                      <input type="text" name="pais" required disabled={submitting} />
                    </Field>
                    <Field label={t("join.form.ptype")} required>
                      <select name="tipo" required defaultValue="" disabled={submitting}>
                        <option value="" disabled>{t("join.opt.ptype.ph")}</option>
                        <option value={t("join.opt.reseller")}>{t("join.opt.reseller")}</option>
                        <option value={t("join.opt.referrer")}>{t("join.opt.referrer")}</option>
                        <option value={t("join.opt.integrator")}>{t("join.opt.integrator")}</option>
                        <option value={t("join.opt.ptype.other")}>{t("join.opt.ptype.other")}</option>
                      </select>
                    </Field>
                    <Field label={t("join.form.msg.partner")} required full>
                      <textarea name="msg" rows="4" required disabled={submitting}></textarea>
                    </Field>
                  </>
                )}
                <div className="apply-actions">
                  <button type="submit" className="btn btn-primary" disabled={submitting}>
                    {submitting ? t("contact.form.sending") : <>{t(ctaKey)} <Arrow /></>}
                  </button>
                  <span className="apply-note">{t("join.form.required")}</span>
                </div>
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

function Field({ label, required, children, full }) {
  return (
    <label className={`fld ${full ? "fld-full" : ""}`}>
      <span className="fld-label">{label}{required && <em>*</em>}</span>
      {children}
    </label>
  );
}

function JoinUsCV() {
  const { t } = useLang();
  const title = <>{t("join.apply.cv.title")}</>;
  return (
    <ApplyForm
      id="cv"
      kind="cv"
      kickerKey="join.apply.cv.kicker"
      titleContent={title}
      leadKey="join.apply.cv.lead"
      ctaKey="join.apply.cv.cta"
    />
  );
}

function PartnerCV() {
  const { t } = useLang();
  const title = (
    <>
      {t("join.apply.partner.titleA")}<span style={{ color: "var(--accent)" }}>{t("join.apply.partner.titleB")}</span>{t("join.apply.partner.titleC")}
    </>
  );
  return (
    <ApplyForm
      id="partner"
      kind="partner"
      kickerKey="join.apply.partner.kicker"
      titleContent={title}
      leadKey="join.apply.partner.lead"
      ctaKey="join.apply.partner.cta"
    />
  );
}

window.JoinHero = JoinHero;
window.Values = Values;
window.JoinUsCV = JoinUsCV;
window.PartnerCV = PartnerCV;