/* ============================================================
   FLOREA GRUP — Careers
   ============================================================ */
function Careers() {
  const { L, lang } = useL();
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({ name: "", email: "", role: "", msg: "" });
  const [err, setErr] = useState({});

  const submit = (e) => {
    e.preventDefault();
    const er = {};
    if (!form.name.trim()) er.name = 1;
    if (!/^\S+@\S+\.\S+$/.test(form.email)) er.email = 1;
    if (!form.role.trim()) er.role = 1;
    setErr(er);
    if (Object.keys(er).length === 0) setSent(true);
  };
  const f = (k) => (e) => setForm(s => ({ ...s, [k]: e.target.value }));

  return (
    <main>
      <PageHero dark crumb={L(FG.UI.nav_careers)}
        title={L({ ro: "Construiește-ți cariera într-un grup în creștere", en: "Build your career in a growing group" })}
        sub={L({ ro: "Peste 600 de colegi, nouă divizii și proiecte la nivel național. Caută-ți locul în povestea Florea Grup.",
                 en: "Over 600 colleagues, nine divisions and projects nationwide. Find your place in the Florea Grup story." })} />

      {/* benefits */}
      <section className="section">
        <div className="wrap">
          <SectionHead kicker={L({ ro: "De ce Florea Grup", en: "Why Florea Grup" })} title={L({ ro: "Un loc unde munca ta se vede", en: "A place where your work shows" })} />
          <div className="values-grid">
            {FG.BENEFITS.map((b, i) => {
              const v = b[lang];
              return (
                <Reveal key={i} d={(i % 4) + 1} className="value">
                  <span className="value__no">0{i + 1}</span>
                  <h3 className="h-md">{v[0]}</h3>
                  <p className="muted">{v[1]}</p>
                </Reveal>
              );
            })}
          </div>
        </div>
      </section>

      {/* open roles */}
      <section className="section--tight dark">
        <div className="wrap">
          <SectionHead light kicker={L({ ro: "Posturi deschise", en: "Open roles" })} title={L({ ro: "Oportunități curente", en: "Current opportunities" })} />
          <div className="jobs">
            {FG.JOBS.map((j, i) => (
              <Reveal key={i} d={(i % 3) + 1} className="job" as="a" {...{ href: "#/careers" }} onClick={(e) => { e.preventDefault(); setForm(s => ({ ...s, role: j.title[lang] })); document.getElementById("apply").scrollIntoView({ block: "start" }); }}>
                <div>
                  <span className="job__dept">{L(j.dept)} · {j.loc}</span>
                  <h3 className="h-md" style={{ color: "#fff", marginTop: ".2em" }}>{L(j.title)}</h3>
                </div>
                <span className="job__apply">{L({ ro: "Aplică", en: "Apply" })} <Ic.arrow /></span>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* application form */}
      <section className="section" id="apply">
        <div className="wrap apply">
          <div className="apply__intro">
            <Reveal><Eyebrow>{L({ ro: "Aplică acum", en: "Apply now" })}</Eyebrow></Reveal>
            <Reveal d="1"><h2 className="h-lg" style={{ marginTop: ".4em" }}>{L({ ro: "Trimite-ne candidatura ta", en: "Send us your application" })}</h2></Reveal>
            <Reveal d="2"><p className="lead" style={{ marginTop: ".8em" }}>{L({ ro: "Completează formularul și revenim cu un răspuns. Poți atașa CV-ul în mesaj sau ni-l poți trimite ulterior.", en: "Fill in the form and we'll get back to you. You can mention your CV in the message or send it later." })}</p></Reveal>
          </div>
          <Reveal d="1" className="apply__form">
            {sent ? (
              <div className="form-ok">
                <span className="form-ok__ic"><Ic.check /></span>
                <h3 className="h-md">{L({ ro: "Mulțumim!", en: "Thank you!" })}</h3>
                <p className="muted">{L({ ro: "Candidatura ta a fost înregistrată. Te contactăm în curând.", en: "Your application has been received. We'll be in touch soon." })}</p>
              </div>
            ) : (
              <form onSubmit={submit} noValidate>
                <label className="field">
                  <span>{L({ ro: "Nume complet", en: "Full name" })}</span>
                  <input value={form.name} onChange={f("name")} className={err.name ? "bad" : ""} placeholder={L({ ro: "Numele tău", en: "Your name" })} />
                </label>
                <label className="field">
                  <span>Email</span>
                  <input value={form.email} onChange={f("email")} className={err.email ? "bad" : ""} placeholder="email@exemplu.ro" />
                </label>
                <label className="field">
                  <span>{L({ ro: "Postul dorit", en: "Desired role" })}</span>
                  <input value={form.role} onChange={f("role")} className={err.role ? "bad" : ""} placeholder={L({ ro: "ex. Inginer șantier", en: "e.g. Site engineer" })} />
                </label>
                <label className="field">
                  <span>{L({ ro: "Mesaj", en: "Message" })}</span>
                  <textarea rows="4" value={form.msg} onChange={f("msg")} placeholder={L({ ro: "Spune-ne câteva cuvinte despre tine", en: "Tell us a little about yourself" })}></textarea>
                </label>
                <button type="submit" className="btn btn--primary">{L({ ro: "Trimite candidatura", en: "Submit application" })} <Ic.arrow /></button>
              </form>
            )}
          </Reveal>
        </div>
      </section>
    </main>
  );
}
Object.assign(window, { Careers });