/* views2.jsx — Formulario de postulación + Quiénes somos */
const { useState: useStateA } = React;

/* ============ APPLY FORM ============ */
function ApplyView({ preselectId, lang, strings, go, data }) {
  const [form, setForm] = useStateA({ name: "", email: "", country: "", role: preselectId || "", github: "", motivation: "" });
  const [file, setFile] = useStateA(null);
  const [errors, setErrors] = useStateA({});
  const [state, setState] = useStateA("idle"); // idle | submitting | done

  const selectedOp = data.opportunities.find(o => o.id === form.role);

  const set = (k, v) => { setForm(f => ({ ...f, [k]: v })); setErrors(e => ({ ...e, [k]: null })); };

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = tr(strings.f_required, lang);
    if (!form.email.trim()) e.email = tr(strings.f_required, lang);
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = tr(strings.f_email_bad, lang);
    if (!form.role) e.role = tr(strings.f_required, lang);
    if (!form.motivation.trim()) e.motivation = tr(strings.f_required, lang);
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const submit = (ev) => {
    ev.preventDefault();
    if (!validate()) {
      const first = document.querySelector(".input.err, .textarea.err, .select.err");
      if (first) first.focus();
      return;
    }
    setState("submitting");
    setTimeout(() => setState("done"), 1100);
  };

  if (state === "done") {
    return (
      <div className="form-wrap view-enter">
        <div className="form-card">
          <div className="form-success">
            <div className="check rise"><Icons.checkCircle size={42} /></div>
            <h2>{tr(strings.f_success_t, lang)}</h2>
            <p>{tr(strings.f_success_b, lang)}</p>
            <div style={{ display: "flex", gap: 12, justifyContent: "center", marginTop: 26, flexWrap: "wrap" }}>
              <button className="btn btn-primary" onClick={() => go({ name: "list" })}>{tr(strings.f_back_home, lang)}</button>
              <a className="btn btn-ghost" href={`mailto:${data.contactEmail}`}><Icons.mail size={16} /> {data.contactEmail}</a>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="form-wrap view-enter">
      <a className="back-link" onClick={() => go(preselectId ? { name: "detail", id: preselectId } : { name: "list" })}>
        <Icons.arrowL size={15} /> {tr(strings.d_back, lang)}
      </a>
      <div style={{ margin: "14px 0 26px" }}>
        <div className="eyebrow">{tr(strings.nav_apply, lang)}</div>
        <h1 style={{ fontSize: "clamp(28px,3.6vw,42px)", letterSpacing: "-.03em", marginTop: 10 }}>{tr(strings.f_title, lang)}</h1>
        <p style={{ fontSize: 16, color: "var(--ink-soft)", marginTop: 12, maxWidth: "34em", lineHeight: 1.5 }}>{tr(strings.f_sub, lang)}</p>
      </div>

      <form className="form-card" onSubmit={submit} noValidate>
        {selectedOp && (
          <div style={{ background: "var(--brand-tint)", border: "1px solid var(--brand-line)", borderRadius: "var(--r)", padding: "14px 16px", marginBottom: 26, display: "flex", alignItems: "center", gap: 12 }}>
            <div style={{ width: 40, height: 40, borderRadius: 10, background: "var(--card)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--brand)", flex: "none" }}><Icons.compass size={20} /></div>
            <div>
              <div className="dm-l">{tr(strings.f_for, lang)}</div>
              <div style={{ fontWeight: 600, fontSize: 15, color: "var(--brand)", marginTop: 2 }}>{tr(selectedOp.title, lang)}</div>
            </div>
          </div>
        )}

        <div className="form-row">
          <div className="field">
            <label>{tr(strings.f_name, lang)} <span className="req">*</span></label>
            <input className={cx("input", errors.name && "err")} value={form.name} onChange={e => set("name", e.target.value)} placeholder={tr(strings.f_name_ph, lang)} />
            {errors.name && <div className="err-msg">{errors.name}</div>}
          </div>
          <div className="field">
            <label>{tr(strings.f_email, lang)} <span className="req">*</span></label>
            <input className={cx("input", errors.email && "err")} type="email" value={form.email} onChange={e => set("email", e.target.value)} placeholder="tu@correo.com" />
            {errors.email && <div className="err-msg">{errors.email}</div>}
          </div>
        </div>

        <div className="form-row">
          <div className="field">
            <label>{tr(strings.f_country, lang)}</label>
            <select className="select" value={form.country} onChange={e => set("country", e.target.value)}>
              <option value="">{tr(strings.f_country_ph, lang)}</option>
              {data.countries.map(c => <option key={c} value={c}>{c}</option>)}
            </select>
          </div>
          <div className="field">
            <label>{tr(strings.f_role, lang)} <span className="req">*</span></label>
            <select className={cx("select", errors.role && "err")} value={form.role} onChange={e => set("role", e.target.value)}>
              <option value="">{tr(strings.f_role_ph, lang)}</option>
              {data.opportunities.map(o => <option key={o.id} value={o.id}>{tr(o.title, lang)}</option>)}
            </select>
            {errors.role && <div className="err-msg">{errors.role}</div>}
          </div>
        </div>

        <div className="field">
          <label>{tr(strings.f_github, lang)} <span style={{ color: "var(--muted)", textTransform: "none", letterSpacing: 0, fontFamily: "var(--sans)" }}>({tr(strings.f_optional, lang)})</span></label>
          <input className="input" value={form.github} onChange={e => set("github", e.target.value)} placeholder={tr(strings.f_github_ph, lang)} />
          <div className="hint">{tr(strings.f_github_hint, lang)}</div>
        </div>

        <div className="field">
          <label>{tr(strings.f_motivation, lang)} <span className="req">*</span></label>
          <textarea className={cx("textarea", errors.motivation && "err")} rows={4} value={form.motivation} onChange={e => set("motivation", e.target.value)} placeholder={tr(strings.f_motivation_ph, lang)} />
          {errors.motivation && <div className="err-msg">{errors.motivation}</div>}
        </div>

        <div className="field">
          <label>{tr(strings.f_cv, lang)} <span style={{ color: "var(--muted)", textTransform: "none", letterSpacing: 0, fontFamily: "var(--sans)" }}>({tr(strings.f_optional, lang)})</span></label>
          <label className={cx("file-drop", file && "has-file")}>
            <input type="file" accept=".pdf,.doc,.docx" style={{ display: "none" }} onChange={e => setFile(e.target.files[0] || null)} />
            <div className="fd-ic">{file ? <Icons.file size={26} /> : <Icons.upload size={26} />}</div>
            <div className="fd-main">{file ? file.name : tr(strings.f_cv_main, lang)}</div>
            <div className="fd-sub">{tr(strings.f_cv_sub, lang)}</div>
          </label>
        </div>

        <button type="submit" className="btn btn-primary btn-lg" style={{ width: "100%", justifyContent: "center", marginTop: 8 }} disabled={state === "submitting"}>
          {state === "submitting" ? tr(strings.f_submitting, lang) : <>{tr(strings.f_submit, lang)} <Icons.arrowR size={17} /></>}
        </button>
      </form>
    </div>
  );
}

/* ============ ABOUT ============ */
function AboutView({ lang, strings, go, data }) {
  const values = [
    { ic: <Icons.compass size={24} />, t: strings.val_1_t, b: strings.val_1_b },
    { ic: <Icons.zap size={24} />, t: strings.val_2_t, b: strings.val_2_b },
    { ic: <Icons.users size={24} />, t: strings.val_3_t, b: strings.val_3_b },
  ];
  return (
    <div className="about wrap view-enter">
      <div className="about-hero">
        <div className="eyebrow" style={{ display: "flex", justifyContent: "center", gap: 8 }}>{tr(strings.about_eyebrow, lang)}</div>
        <h1 style={{ marginTop: 16 }}>{tr(strings.about_title, lang)}</h1>
        <p>{tr(strings.about_lead, lang)}</p>
      </div>

      <div className="value-grid">
        {values.map((v, i) => (
          <div className="value-card rise" key={i} style={{ animationDelay: `${i * 70}ms` }}>
            <div className="v-ic">{v.ic}</div>
            <h3>{tr(v.t, lang)}</h3>
            <p>{tr(v.b, lang)}</p>
          </div>
        ))}
      </div>

      <div className="about-band">
        <h2>{tr(strings.about_band_t, lang)}</h2>
        <p>{tr(strings.about_band_b, lang)}</p>
        <div className="country-row">
          {data.countries.map(c => <span key={c} className="country-pill">{c}</span>)}
        </div>
        <button className="btn" style={{ background: "#fff", color: "var(--brand)", marginTop: 30 }} onClick={() => go({ name: "list", scroll: "grid" })}>
          {tr(strings.about_cta, lang)} <Icons.arrowR size={16} />
        </button>
      </div>

      {/* Enlace al Ministerio de Comunicaciones */}
      <div className="about-min">
        <div className="min-link-card">
          <div>
            <div className="mlc-eyebrow">{tr(strings.about_min_eyebrow, lang)}</div>
            <h3>{tr(strings.about_min_title, lang)}</h3>
            <p>{tr(strings.about_min_body, lang)}</p>
          </div>
          <div className="min-link-actions">
            <button className="btn btn-primary" onClick={() => go({ name: "ministry" })}>
              {tr(strings.about_min_cta, lang)} <Icons.arrowR size={16} />
            </button>
            <a className="btn btn-ghost" href={data.ministry.sourceUrl} target="_blank" rel="noopener noreferrer">
              <Icons.globe size={15} /> {tr(strings.about_min_official, lang)}
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ApplyView, AboutView });