// desidium-join.jsx — "Become an AI model" / Work-with-us page, exported to window
const { useState: useStateJ, useRef: useRefJ, useEffect: useEffectJ } = React;

function JoinPage({ lang, motion, onApply }) {
  const j = I18N.join;
  useEffectJ(() => { window.scrollTo(0, 0); }, []);
  return (
    <article className="jn">
      {/* HERO */}
      <section className="jn-hero">
        <Film label={L(j.reel, lang)} showPlay={false} time="00:00 / 01:36" className="jn-hero-film" />
        <div className="jn-hero-inner">
          <div className="jn-kicker">{L(j.kicker, lang)}</div>
          <h1 className="jn-h1">
            <span className="reveal-line"><span>{L(j.h1a, lang)}</span></span>
            <span className="reveal-line"><span><em>{L(j.h1b, lang)}</em></span></span>
          </h1>
          <div className="jn-hero-foot">
            <p>{L(j.sub, lang)}</p>
            <button className="btn-terra" onClick={onApply}>{L(j.cta, lang)} <span className="arr">↓</span></button>
          </div>
        </div>
      </section>

      {/* WHAT IT MEANS */}
      <section className="jn-what">
        <Reveal motion={motion} className="section-label jn-what-label">{L(j.whatLabel, lang)}</Reveal>
        <Reveal motion={motion} delay={60}><p className="jn-what-lede">{L(j.whatLede, lang)}</p></Reveal>
        <Reveal motion={motion} delay={140}><p className="jn-what-note">{L(j.whatNote, lang)}</p></Reveal>
      </section>

      {/* HOW IT WORKS */}
      <section className="jn-steps">
        <Reveal motion={motion} className="section-label jn-steps-label">{L(j.stepsLabel, lang)}</Reveal>
        <div className="jn-step-list">
          {j.steps.map((s, i) => (
            <Reveal motion={motion} delay={i*70} className="jn-step" key={s.no}>
              <div className="jn-step-no">{s.no}</div>
              <div className="jn-step-body">
                <h3 className="jn-step-t">{L(s.t, lang)}</h3>
                <p className="jn-step-d">{L(s.d, lang)}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* WHY + ELIGIBILITY */}
      <section className="jn-why">
        <div className="jn-why-head">
          <Reveal motion={motion} className="section-label">{L(j.whyLabel, lang)}</Reveal>
        </div>
        <div className="jn-why-grid">
          {j.why.map((w, i) => (
            <Reveal motion={motion} delay={i*80} className="jn-why-card" key={i}>
              <div className="jn-why-no">{String(i+1).padStart(2,"0")}</div>
              <h4 className="jn-why-t">{L(w.t, lang)}</h4>
              <p className="jn-why-d">{L(w.d, lang)}</p>
            </Reveal>
          ))}
        </div>
        <div className="jn-elig">
          <Reveal motion={motion} className="section-label jn-elig-label">{L(j.eligLabel, lang)}</Reveal>
          <ul className="jn-elig-list">
            {j.elig.map((e, i) => (
              <Reveal as="li" motion={motion} delay={i*60} key={i}>
                <span className="jn-elig-no">{String(i+1).padStart(2,"0")}</span>
                <span>{L(e, lang)}</span>
              </Reveal>
            ))}
          </ul>
        </div>
      </section>

      {/* APPLICATION FORM */}
      <ApplyForm lang={lang} motion={motion} />
    </article>
  );
}

/* ---------------- APPLICATION FORM ---------------- */
function ApplyForm({ lang, motion }) {
  const j = I18N.join;
  const [form, setForm] = useStateJ({ name:"", email:"", city:"", links:"", langs:"", niche:"fashion", bio:"" });
  const [photos, setPhotos] = useStateJ([]); // {id, url, name}
  const [consent, setConsent] = useStateJ(false);
  const [errors, setErrors] = useStateJ({});
  const [state, setState] = useStateJ("idle"); // idle | sending | sent
  const [drag, setDrag] = useStateJ(false);
  const inputRef = useRefJ(null);
  const set = (f) => (e) => setForm({ ...form, [f]: e.target.value });

  const addFiles = (fileList) => {
    const files = [...fileList].filter((f) => f.type.startsWith("image/")).slice(0, 4 - photos.length);
    files.forEach((file) => {
      const reader = new FileReader();
      reader.onload = (ev) => {
        setPhotos((prev) => prev.length >= 4 ? prev : [...prev, { id: Math.random().toString(36).slice(2), url: ev.target.result, name: file.name }]);
      };
      reader.readAsDataURL(file);
    });
  };
  const onDrop = (e) => { e.preventDefault(); setDrag(false); if (e.dataTransfer.files) addFiles(e.dataTransfer.files); };
  const removePhoto = (id) => setPhotos((prev) => prev.filter((p) => p.id !== id));
  const makeCover = (id) => setPhotos((prev) => { const i = prev.findIndex((p)=>p.id===id); if (i<=0) return prev; const c=[...prev]; const [x]=c.splice(i,1); c.unshift(x); return c; });

  const submit = (e) => {
    e.preventDefault();
    const er = {};
    ["name","email","bio"].forEach((f) => { if (!form[f].trim()) er[f] = true; });
    if (form.email && !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) er.email = true;
    if (!photos.length) er.photos = true;
    if (!consent) er.consent = true;
    setErrors(er);
    if (Object.keys(er).length) return;
    setState("sending");
    setTimeout(() => setState("sent"), 1200);
  };

  if (state === "sent") {
    return (
      <section className="jn-form-wrap" id="apply">
        <div className="jn-sent">
          <div className="sent-mark">✓</div>
          <h3>{L(j.sent_t, lang)}</h3>
          <p>{L(j.sent_d, lang)}</p>
          <button className="jn-sent-more" onClick={() => { setState("idle"); setForm({ name:"", email:"", city:"", links:"", langs:"", niche:"fashion", bio:"" }); setPhotos([]); setConsent(false); setErrors({}); }}>{L(j.sent_more, lang)} →</button>
        </div>
      </section>
    );
  }

  return (
    <section className="jn-form-wrap" id="apply">
      <div className="jn-form-head">
        <Reveal motion={motion} className="section-label">{L(j.formLabel, lang)}</Reveal>
        <Reveal motion={motion} delay={70}><h2 className="jn-form-title">{L(j.formTitle, lang)}</h2></Reveal>
        <Reveal motion={motion} delay={130}><p className="jn-form-sub">{L(j.formSub, lang)}</p></Reveal>
      </div>

      <form className="jn-form" onSubmit={submit} noValidate>
        <div className="jn-form-grid">
          <div className={"fld " + (errors.name?"err":"")}>
            <label>{L(j.f_name, lang)}</label>
            <input value={form.name} onChange={set("name")} />
            {errors.name && <span className="fld-err">{L(j.err, lang)}</span>}
          </div>
          <div className={"fld " + (errors.email?"err":"")}>
            <label>{L(j.f_email, lang)}</label>
            <input type="email" value={form.email} onChange={set("email")} />
            {errors.email && <span className="fld-err">{L(j.err, lang)}</span>}
          </div>
          <div className="fld">
            <label>{L(j.f_city, lang)}</label>
            <input value={form.city} onChange={set("city")} />
          </div>
          <div className="fld">
            <label>{L(j.f_links, lang)}</label>
            <input value={form.links} onChange={set("links")} placeholder="@" />
          </div>
          <div className="fld">
            <label>{L(j.f_langs, lang)}</label>
            <input value={form.langs} onChange={set("langs")} placeholder="EN · ES" />
          </div>
          <div className="fld">
            <label>{L(j.f_niche, lang)}</label>
            <div className="seg">
              {j.niche_opts.map((o) => (
                <button type="button" key={o.v} className={"seg-b " + (form.niche===o.v?"is-on":"")} onClick={()=>setForm({...form, niche:o.v})}>{L(o, lang)}</button>
              ))}
            </div>
          </div>
        </div>

        <div className={"fld " + (errors.bio?"err":"")}>
          <label>{L(j.f_bio, lang)}</label>
          <textarea rows="3" value={form.bio} onChange={set("bio")} placeholder={L(j.bio_ph, lang)}></textarea>
          {errors.bio && <span className="fld-err">{L(j.err, lang)}</span>}
        </div>

        {/* PHOTO UPLOAD */}
        <div className={"fld jn-upload-fld " + (errors.photos?"err":"")}>
          <label>{L(j.f_photos, lang)}</label>
          <div className="jn-upload-hint">{L(j.photos_hint, lang)}</div>
          <div className="jn-photo-grid">
            {photos.map((p, i) => (
              <div className="jn-photo" key={p.id}>
                <img src={p.url} alt={p.name} />
                {i === 0 && <span className="jn-photo-cover">{L(j.primary, lang)}</span>}
                <div className="jn-photo-actions">
                  {i !== 0 && <button type="button" className="jn-photo-star" title="Cover" onClick={()=>makeCover(p.id)}>★</button>}
                  <button type="button" className="jn-photo-x" title="Remove" onClick={()=>removePhoto(p.id)}>✕</button>
                </div>
              </div>
            ))}
            {photos.length < 4 && (
              <button type="button"
                className={"jn-drop " + (drag?"is-drag":"")}
                onClick={()=>inputRef.current && inputRef.current.click()}
                onDragOver={(e)=>{e.preventDefault();setDrag(true);}}
                onDragLeave={()=>setDrag(false)}
                onDrop={onDrop}>
                <span className="jn-drop-plus">+</span>
                <span className="jn-drop-t">{L(j.drop_t, lang)}</span>
                <span className="jn-drop-d">{L(j.drop_d, lang)}</span>
              </button>
            )}
          </div>
          <input ref={inputRef} type="file" accept="image/*" multiple style={{display:"none"}}
            onChange={(e)=>{ addFiles(e.target.files); e.target.value=""; }} />
          {errors.photos && <span className="fld-err">{L(j.err_photo, lang)}</span>}
        </div>

        {/* CONSENT */}
        <div className={"jn-consent " + (errors.consent?"err":"")}>
          <button type="button" className={"jn-check " + (consent?"is-on":"")} onClick={()=>setConsent(!consent)} aria-label="consent">
            {consent && <span>✓</span>}
          </button>
          <span className="jn-consent-text">{L(j.consent, lang)}</span>
        </div>
        {errors.consent && <span className="fld-err jn-consent-err">{L(j.err_consent, lang)}</span>}

        <button className="btn-terra jn-submit" type="submit" disabled={state==="sending"}>
          {state==="sending" ? L(j.sending, lang) : <>{L(j.send, lang)} <span className="arr">→</span></>}
        </button>
      </form>
    </section>
  );
}

Object.assign(window, { JoinPage });