// 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} />
              <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 }) {
  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}>
            <Reveal motion={motion} className="case-media"><Portrait caption={L(cs.title,lang)} /></Reveal>
            <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>
              <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>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------------- CONTACT ---------------- */
function Contact({ lang, motion }) {
  const k = I18N.contact;
  const [form, setForm] = useStateB({ name:"", brand:"", email:"", interest:"twin", msg:"" });
  const [errors, setErrors] = useStateB({});
  const [state, setState] = useStateB("idle"); // idle | sending | sent
  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;
    setState("sending");
    setTimeout(()=>setState("sent"), 1100);
  };
  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">Calle Sintética 24<br/>Madrid · 28004</div>
          <a className="cs-mail" href="mailto:studio@desidium.ai">studio@desidium.ai</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>
        ) : (
          <form className="cform" onSubmit={submit} noValidate>
            <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">
          {[["roster","#roster"],["studio","#studio"],["cases","#cases"],["journal","route:journal"],["join","route:join"],["contact","#contact"]].map(([key,href]) => (
            <a key={key} href={href.indexOf("#")===0?href:"#"} onClick={(e)=>{e.preventDefault();go(href);}}>{L(n[key],lang)}</a>
          ))}
          <button className="lang-toggle foot" onClick={()=>setLang(lang==="en"?"es":"en")}>
            <span className={lang==="en"?"on":""}>EN</span><span className="sep">/</span><span className={lang==="es"?"on":""}>ES</span>
          </button>
        </div>
      </div>
      <div className="footer-mark">DESIDIUM</div>
      <div className="footer-base">
        <span>© {new Date().getFullYear()} Desidium</span>
        <span>{L(f.rights,lang)}</span>
        <span>Madrid · Synthetic &amp; Hybrid Identities</span>
      </div>
    </footer>
  );
}

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