// desidium-model.jsx — full talent profile page, exported to window
const { useEffect: useEffectMD } = React;

function ModelDetail({ model, lang, motion, onBack, onNav, goContact }) {
  const m = I18N.model;
  useEffectMD(() => { window.scrollTo(0, 0); }, [model.id]);
  const divName = model.div === "twin" ? L(m.twinName, lang) : L(m.soulName, lang);
  const idx = MODELS.findIndex((x) => x.id === model.id);
  const next = MODELS[(idx + 1) % MODELS.length];
  const ph = (model.photos || []);

  return (
    <article className="md">
      {/* HERO */}
      <section className="md-hero">
        <Film label={L(model.tagline, lang)} showPlay={false} time="00:00 / 02:04" className="md-hero-film" />
        <button className="md-back" onClick={onBack}>← {L(m.back, lang)}</button>
        <div className="md-hero-inner">
          <div className="md-hero-tags">
            <span className="md-tag-div">{divName}</span>
            <span className="md-tag-dot">·</span>
            <span className="md-tag-cat">{L(model.cat, lang)}</span>
          </div>
          <h1 className="md-name">{model.name}</h1>
          <p className="md-tagline">{L(model.tagline, lang)}</p>
          <div className="md-hero-foot">
            <span className="md-langs">{model.langs.join("  ·  ")}</span>
            <span className="md-avail">{L(model.avail, lang)}</span>
          </div>
        </div>
      </section>

      {/* ABOUT / DESCRIPTION */}
      <section className="md-about">
        <Reveal motion={motion} className="md-about-label section-label">{L(m.about, lang)}</Reveal>
        <div className="md-about-grid">
          <Reveal motion={motion} delay={60}><p className="md-lede">{L(model.desc, lang)}</p></Reveal>
          <Reveal motion={motion} delay={140} className="md-niche">
            <div className="md-niche-k">{L(m.s_niche, lang)}</div>
            <div className="md-niche-v">{L(model.niche, lang)}</div>
          </Reveal>
        </div>
      </section>

      {/* GALLERY */}
      <section className="md-gallery-wrap">
        <Reveal motion={motion} className="section-label md-gal-label">{L(m.gallery, lang)}</Reveal>
        <div className="md-gallery">
          {ph[0] && <Reveal motion={motion} className="md-shot md-shot--a"><Portrait caption={L(ph[0], lang)} /></Reveal>}
          {ph[1] && <Reveal motion={motion} delay={80} className="md-shot md-shot--b"><Portrait caption={L(ph[1], lang)} /></Reveal>}
          {ph[2] && <Reveal motion={motion} delay={40} className="md-shot md-shot--c"><Portrait caption={L(ph[2], lang)} /></Reveal>}
          {ph[3] && <Reveal motion={motion} delay={120} className="md-shot md-shot--d"><Portrait caption={L(ph[3], lang)} /></Reveal>}
        </div>
      </section>

      {/* HISTORY & MOTIVATION */}
      <section className="md-story">
        <div className="md-story-col">
          <Reveal motion={motion} className="section-label">{L(m.history, lang)}</Reveal>
          <Reveal motion={motion} delay={70}><p className="md-story-text">{L(model.history, lang)}</p></Reveal>
        </div>
        <div className="md-story-rule"></div>
        <div className="md-story-col">
          <Reveal motion={motion} className="section-label">{L(m.motivation, lang)}</Reveal>
          <Reveal motion={motion} delay={70}><p className="md-story-text">{L(model.motivation, lang)}</p></Reveal>
        </div>
      </section>

      {/* SPECS */}
      <section className="md-specs">
        <Reveal motion={motion} className="section-label md-specs-label">{L(m.specs, lang)}</Reveal>
        <dl className="md-spec-list">
          {[[m.s_division, divName],[m.s_niche, L(model.niche,lang)],[m.s_langs, model.langs.join("  ·  ")],[m.s_avail, L(model.avail,lang)]].map(([k,v],i)=>(
            <Reveal as="div" motion={motion} delay={i*60} className="md-spec" key={i}>
              <dt>{L(k,lang)}</dt><dd>{v}</dd>
            </Reveal>
          ))}
        </dl>
      </section>

      {/* CTA */}
      <section className="md-cta">
        <Reveal motion={motion} className="section-label md-cta-label">{L(m.cta_label, lang)}</Reveal>
        <Reveal motion={motion} delay={70}>
          <h2 className="md-cta-title">{L(m.cta_pre, lang)} <em>{model.name}.</em></h2>
        </Reveal>
        <Reveal motion={motion} delay={130}><p className="md-cta-sub">{L(m.cta_sub, lang)}</p></Reveal>
        <Reveal motion={motion} delay={190} className="md-cta-row">
          <button className="btn-terra" onClick={goContact}>{L(m.cta_btn, lang)} <span className="arr">→</span></button>
          <button className="md-next" onClick={()=>onNav(next.id)}>{L(m.next, lang)} — {next.name} →</button>
        </Reveal>
      </section>
    </article>
  );
}

Object.assign(window, { ModelDetail });