// desidium-sections-b.jsx — Roster, Cases, Contact, Footer
const { useState: useStateB } = React;

/* ---------------- ROSTER (gallery) ---------------- */
function Roster({ lang, motion, columns, onOpen }) {
  const r = I18N.roster;
  const [filter, setFilter] = useStateB("all");
  const filters = [["all",r.filters.all],["twin",r.filters.twin],["soul",r.filters.soul]];
  const shown = MODELS.filter((m) => filter==="all" ? true : m.div===filter);
  return (
    <section className="roster" id="roster">
      <div className="section-head roster-head">
        <div>
          <Reveal motion={motion} className="section-label">{L(r.label,lang)}</Reveal>
          <Reveal motion={motion} delay={80}><h2 className="section-title">{L(r.title,lang)}</h2></Reveal>
        </div>
        <Reveal motion={motion} delay={120} className="roster-filters">
          {filters.map(([k,lab]) => (
            <button key={k} className={"filt " + (filter===k?"is-on":"")} onClick={()=>setFilter(k)}>{L(lab,lang)}</button>
          ))}
        </Reveal>
      </div>
      <div className="roster-grid" style={{"--cols": columns}}>
        {shown.map((m, i) => (
          <Reveal motion={motion} delay={(i%columns)*70} className="model" key={m.id}>
            <button className="model-card" onClick={()=>onOpen(m)}>
              <Portrait caption={m.name} src={m.image} position="center top" showCaption={!m.image} />
              <div className="model-veil"></div>
              <div className="model-meta">
                <div className="model-cat">{L(m.cat,lang)}</div>
                <div className="model-name">{m.name}</div>
              </div>
              <div className="model-langs">{m.langs.join(" · ")}</div>
              <div className="model-plus">+</div>
            </button>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

/* ---------------- CASES ---------------- */
function Cases({ lang, motion, go }) {
  const c = I18N.cases;
  return (
    <section className="cases" id="cases">
      <div className="section-head">
        <Reveal motion={motion} className="section-label">{L(c.label,lang)}</Reveal>
        <Reveal motion={motion} delay={80}><h2 className="section-title">{L(c.title,lang)}</h2></Reveal>
      </div>
      <div className="case-list">
        {CASES.map((cs, i) => (
          <div className={"case-row " + (i%2 ? "case-row--rev" : "")} key={cs.id}>
            <div className={"case-media-col" + (cs.mediaPortrait ? " case-media-col--portrait" : "")}>
              <Reveal motion={motion} className="case-media">
                <BeforeAfter
                  beforeSrc={cs.beforeVideo || ""} afterSrc={cs.afterVideo || ""}
                  beforeLabel={L(c.before,lang)} afterLabel={L(c.after,lang)} hint={L(c.drag,lang)}
                  fit={cs.mediaPortrait ? "contain" : "cover"} />
              </Reveal>
              {cs.beforeVideo && cs.afterVideo && (
                <Reveal as="p" motion={motion} delay={80} className="case-media-note">
                  {cs.mediaNote && <span className="case-media-note-t">{L(cs.mediaNote,lang)}</span>}
                  <span className="case-media-note-h">{L(c.drag,lang)}</span>
                </Reveal>
              )}
            </div>
            <div className="case-body">
              <Reveal motion={motion} className="case-top">
                <span className="case-no">{cs.no}</span>
                <span className="case-client">{L(cs.client,lang)}</span>
              </Reveal>
              <Reveal motion={motion} delay={70}><h3 className="case-title">{L(cs.title,lang)}</h3></Reveal>
              <Reveal motion={motion} delay={130}><p className="case-text">{L(cs.body,lang)}</p></Reveal>
              {cs.metric && (
                <Reveal motion={motion} delay={190} className="case-metric">
                  <span className="case-big">{cs.metric}</span>
                  <span className="case-mlabel">{L(cs.metricLabel,lang)}</span>
                </Reveal>
              )}
              {cs.dubbing && go && (
                <Reveal motion={motion} delay={230}>
                  <button className="case-link" onClick={() => go("route:dubbing:" + cs.dubbing)}>
                    {L(c.more,lang)} <span className="arr">→</span>
                  </button>
                </Reveal>
              )}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------------- CONTACT ---------------- */
function Contact({ lang, motion }) {
  const k = I18N.contact;
  const [form, setForm] = useStateB({ name:"", brand:"", email:"", interest:"twin", msg:"" });
  const [hp, setHp] = useStateB(""); // honeypot — must stay empty
  const [errors, setErrors] = useStateB({});
  const [state, setState] = useStateB("idle"); // idle | sending | sent | error
  const set = (f) => (e) => setForm({ ...form, [f]: e.target.value });
  const submit = (e) => {
    e.preventDefault();
    const er = {};
    ["name","email","msg"].forEach((f) => { if (!form[f].trim()) er[f] = true; });
    if (form.email && !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) er.email = true;
    setErrors(er);
    if (Object.keys(er).length) return;

    const wp = window.desidiumWp || {};
    if (!wp.contactUrl) { setState("error"); return; }
    setState("sending");
    fetch(wp.contactUrl, {
      method: "POST",
      headers: { "Content-Type": "application/json", "X-WP-Nonce": wp.restNonce || "" },
      body: JSON.stringify({
        name: form.name, email: form.email, brand: form.brand,
        interest: form.interest, message: form.msg, lang, company: hp,
      }),
    })
      .then((res) => res.json().catch(() => ({})).then((data) => ({ ok: res.ok && data && data.ok })))
      .then(({ ok }) => setState(ok ? "sent" : "error"))
      .catch(() => setState("error"));
  };
  const opts = [["twin",k.opt_twin],["soul",k.opt_soul],["b2b",k.opt_b2b],["other",k.opt_other]];
  return (
    <section className="contact" id="contact">
      <div className="contact-left">
        <Reveal motion={motion} className="section-label contact-label">{L(k.label,lang)}</Reveal>
        <Reveal motion={motion} delay={70}>
          <h2 className="contact-title">{L(k.title1,lang)}<br/><em>{L(k.title2,lang)}</em></h2>
        </Reveal>
        <Reveal motion={motion} delay={130}><p className="contact-sub">{L(k.sub,lang)}</p></Reveal>
        <Reveal motion={motion} delay={190} className="contact-studio">
          <div className="cs-k">{L(k.studio,lang)}</div>
          <div className="cs-v">Desidium LLC<br/>30 N Gould St Ste R<br/>Sheridan, WY 82801 · United States</div>
          <a className="cs-mail" href="mailto:hello@desidium.studio">hello@desidium.studio</a>
        </Reveal>
      </div>

      <Reveal motion={motion} delay={120} className="contact-right">
        {state==="sent" ? (
          <div className="form-sent">
            <div className="sent-mark">✓</div>
            <h3>{L(k.sent_t,lang)}</h3>
            <p>{L(k.sent_d,lang)}</p>
          </div>
        ) : state==="error" ? (
          <div className="form-sent form-sent--err">
            <h3>{L(k.err_t,lang)}</h3>
            <p>{L(k.err_d,lang)}</p>
            <button type="button" className="btn-terra" onClick={()=>setState("idle")}>{L(k.retry,lang)}</button>
          </div>
        ) : (
          <form className="cform" onSubmit={submit} noValidate>
            <div className="cform-hp" aria-hidden="true">
              <label>Company</label>
              <input type="text" tabIndex={-1} autoComplete="off" value={hp} onChange={(e)=>setHp(e.target.value)} />
            </div>
            <div className={"fld " + (errors.name?"err":"")}>
              <label>{L(k.f_name,lang)}</label>
              <input value={form.name} onChange={set("name")} />
              {errors.name && <span className="fld-err">{L(k.err,lang)}</span>}
            </div>
            <div className="fld">
              <label>{L(k.f_brand,lang)}</label>
              <input value={form.brand} onChange={set("brand")} />
            </div>
            <div className={"fld " + (errors.email?"err":"")}>
              <label>{L(k.f_email,lang)}</label>
              <input type="email" value={form.email} onChange={set("email")} />
              {errors.email && <span className="fld-err">{L(k.err,lang)}</span>}
            </div>
            <div className="fld">
              <label>{L(k.f_interest,lang)}</label>
              <div className="seg">
                {opts.map(([v,lab]) => (
                  <button type="button" key={v} className={"seg-b " + (form.interest===v?"is-on":"")} onClick={()=>setForm({...form, interest:v})}>{L(lab,lang)}</button>
                ))}
              </div>
            </div>
            <div className={"fld " + (errors.msg?"err":"")}>
              <label>{L(k.f_msg,lang)}</label>
              <textarea rows="3" value={form.msg} onChange={set("msg")}></textarea>
              {errors.msg && <span className="fld-err">{L(k.err,lang)}</span>}
            </div>
            <button className="btn-terra cform-send" type="submit" disabled={state==="sending"}>
              {state==="sending" ? L(k.sending,lang) : <>{L(k.send,lang)} <span className="arr">→</span></>}
            </button>
          </form>
        )}
      </Reveal>
    </section>
  );
}

/* ---------------- FOOTER ---------------- */
function Footer({ lang, setLang, go }) {
  const f = I18N.footer; const n = I18N.nav;
  return (
    <footer className="footer">
      <div className="footer-top">
        <div className="footer-tag">{L(f.tag,lang)}</div>
        <div className="footer-nav">
          {/* "join" ("Become a model") temporarily hidden — re-add ["join","route:join"] to restore. */}
          {[["roster","#roster"],["studio","#studio"],["cases","#cases"],["journal","route:journal"],["contact","#contact"]].map(([key,href]) => (
            <a key={key} href={href.indexOf("#")===0?href:"#"} onClick={(e)=>{e.preventDefault();go(href);}}>{L(n[key],lang)}</a>
          ))}
          <LangToggle lang={lang} setLang={setLang} className="foot" />
        </div>
      </div>
      <div className="footer-mark">DESIDIUM</div>
      <div className="footer-base">
        <span>© {new Date().getFullYear()} Desidium LLC</span>
        <span>{L(f.rights,lang)}</span>
        <span>Sheridan, WY · Synthetic &amp; Hybrid Identities</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Roster, Cases, Contact, Footer });