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

// Privacy-enhanced YouTube embed (16:9). Empty `id` renders a labelled placeholder frame.
function YouTubePlayer({ id, title, placeholder }) {
  if (!id) return <div className="md-player md-player--empty"><span>{placeholder}</span></div>;
  const src = "https://www.youtube-nocookie.com/embed/" + encodeURIComponent(id) + "?rel=0&modestbranding=1";
  return (
    <div className="md-player">
      <iframe src={src} title={title} loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen referrerPolicy="strict-origin-when-cross-origin"></iframe>
    </div>
  );
}

const SOCIAL_ICONS = {
  youtube: <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M22 12c0-2.6-.3-4.3-.6-5.1a2.3 2.3 0 0 0-1.6-1.6C18.4 5 12 5 12 5s-6.4 0-7.8.3A2.3 2.3 0 0 0 2.6 6.9C2.3 7.7 2 9.4 2 12s.3 4.3.6 5.1a2.3 2.3 0 0 0 1.6 1.6C5.6 19 12 19 12 19s6.4 0 7.8-.3a2.3 2.3 0 0 0 1.6-1.6c.3-.8.6-2.5.6-5.1z"/><path d="M10 9l5 3-5 3z" fill="currentColor" stroke="none"/></svg>,
  instagram: <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1.8"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r="1" fill="currentColor" stroke="none"/></svg>,
  tiktok: <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M13 3v11.5a3.5 3.5 0 1 1-3.5-3.5"/><path d="M13 3c.4 2.9 2.4 4.8 5.5 5"/></svg>,
};
const SOCIAL_LABELS = { youtube: "YouTube", instagram: "Instagram", tiktok: "TikTok" };

// Row of external profile links; keys with an empty URL are skipped.
function SocialLinks({ social, name, lang, motion }) {
  const keys = ["youtube", "instagram", "tiktok"].filter((k) => social && social[k]);
  if (!keys.length) return null;
  return (
    <Reveal motion={motion} delay={200} className="md-social">
      <div className="md-niche-k">{L(I18N.model.follow, lang)}</div>
      <div className="md-social-links">
        {keys.map((k) => (
          <a key={k} className="md-social-link" href={social[k]} target="_blank" rel="noopener noreferrer" aria-label={name + " · " + SOCIAL_LABELS[k]}>
            {SOCIAL_ICONS[k]} {SOCIAL_LABELS[k]} <span className="arr">↗</span>
          </a>
        ))}
      </div>
    </Reveal>
  );
}

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 || []);
  const themeBase = (window.desidiumWp && window.desidiumWp.themeUri) || "";

  return (
    <article className="md">
      {/* HERO */}
      <section className="md-hero">
        {model.hero ? (
          <div className="md-hero-film md-hero-img">
            <img src={themeBase + "/" + model.hero} alt={model.name + " · " +L(model.tagline, lang)}
              fetchPriority="high" decoding="async" style={{ objectPosition: model.heroPos || "center" }} />
          </div>
        ) : (
          <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 + PRESENTATION VIDEO + SOCIAL */}
      <section className="md-about">
        <Reveal motion={motion} className="md-about-label section-label">{L(m.about, lang)}</Reveal>
        <div className="md-about-grid">
          <div className="md-about-text">
            <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>
            <SocialLinks social={model.social} name={model.name} lang={lang} motion={motion} />
          </div>
          <Reveal motion={motion} delay={100} className="md-video">
            <div className="md-niche-k">{L(m.video, lang)}</div>
            <YouTubePlayer id={model.video} title={model.name + " · " +L(m.video, lang)} placeholder={L(m.video_ph, lang)} />
          </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.map((p, i) => (
            <Reveal key={i} motion={motion} delay={[0, 80, 40, 120][i % 4]} className={"md-shot md-shot--" + "abcd"[i % 4]}>
              <Portrait caption={L(p, lang)} src={p.src || ""} position={p.pos || "center"} />
            </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, YouTubePlayer, SocialLinks });