// desidium-dubbing.jsx — dedicated case page for a video-dubbing engagement,
// served at /dubbing/<id> (see functions.php + DUBBING in content.js). Exported to window.
const { useEffect: useEffectDub } = React;

function DubbingPage({ item, lang, motion, onBack, goContact }) {
  useEffectDub(() => { window.scrollTo(0, 0); }, [item && item.id]);
  const d = I18N.dubbing;
  if (!item) return null;
  const themeBase = (window.desidiumWp && window.desidiumWp.themeUri) || "";
  const tool = item.tool || null;

  return (
    <article className="dub">
      <section className={"dub-hero" + (item.heroImage ? " dub-hero--img" : "")}>
        {item.heroImage && (
          <div className="dub-hero-media">
            <img src={themeBase + "/" + item.heroImage} alt="" fetchPriority="high" decoding="async"
              style={{ objectPosition: item.heroPos || "center" }} />
          </div>
        )}
        <button className="dub-back" onClick={onBack}>← {L(d.back, lang)}</button>
        <div className="dub-hero-inner">
          <div className="dub-kicker">{L(d.kicker, lang)}</div>
          <h1 className="dub-title">{L(item.title, lang)}</h1>
          <p className="dub-lede">{L(item.lede, lang)}</p>
        </div>
      </section>

      <section className="dub-videos">
        <div className="dub-video-grid">
          <Reveal motion={motion} className="dub-vcol">
            <VideoBlock src={item.originalVideo || ""} label={L(d.original, lang)} />
          </Reveal>
          <Reveal motion={motion} delay={90} className="dub-vcol">
            <VideoBlock src={item.dubbedVideo || ""} label={L(d.dubbed, lang)} />
          </Reveal>
        </div>
      </section>

      {item.steps && item.steps.length > 0 && (
        <section className="dub-process">
          <Reveal motion={motion} className="section-label dub-body-label">{L(d.process, lang)}</Reveal>
          <ol className="dub-steps">
            {item.steps.map((s, i) => (
              <Reveal as="li" motion={motion} delay={i * 60} className="dub-step" key={i}>
                <div className="dub-step-k">{L(s.k, lang)}</div>
                <p className="dub-step-v">{L(s.v, lang)}</p>
              </Reveal>
            ))}
          </ol>
        </section>
      )}

      {tool && (
        <section className="dub-loop">
          <Reveal motion={motion} className="section-label dub-body-label">{L(d.loop, lang)}</Reveal>
          {tool.bodyBefore && tool.bodyBefore.length > 0 && (
            <Reveal motion={motion} className="dub-loop-copy">
              {tool.bodyBefore.map((p, i) => <p className="dub-p" key={i}>{L(p, lang)}</p>)}
            </Reveal>
          )}
          {tool.image && (
            <Reveal as="figure" motion={motion} delay={60} className="dub-shot">
              <img src={themeBase + "/" + tool.image} alt={L(tool.alt, lang)} loading="lazy" decoding="async" />
              {tool.caption && <figcaption>{L(tool.caption, lang)}</figcaption>}
            </Reveal>
          )}
          {tool.bodyAfter && tool.bodyAfter.length > 0 && (
            <Reveal motion={motion} delay={60} className="dub-loop-copy dub-loop-copy--after">
              {tool.bodyAfter.map((p, i) => <p className="dub-p" key={i}>{L(p, lang)}</p>)}
            </Reveal>
          )}
        </section>
      )}

      <section className="dub-body">
        <Reveal motion={motion} className="section-label dub-body-label">{L(d.approach, lang)}</Reveal>
        <div className="dub-body-grid">
          <div className="dub-copy">
            {(item.body || []).map((p, i) => (
              <Reveal motion={motion} delay={i * 60} key={i}><p className="dub-p">{L(p, lang)}</p></Reveal>
            ))}
          </div>
          <Reveal motion={motion} delay={80} className="dub-facts">
            <div className="md-niche-k">{L(d.facts, lang)}</div>
            <dl className="dub-fact-list">
              {(item.facts || []).map((f, i) => (
                <div className="dub-fact" key={i}>
                  <dt>{L(f.k, lang)}</dt><dd>{L(f.v, lang)}</dd>
                </div>
              ))}
            </dl>
          </Reveal>
        </div>
      </section>

      <section className="dub-cta">
        <Reveal motion={motion} delay={60}>
          <h2 className="dub-cta-title">{L(d.cta, lang)}</h2>
        </Reveal>
        <Reveal motion={motion} delay={120} className="dub-cta-row">
          <button className="btn-terra" onClick={goContact}>{L(d.ctaBtn, lang)} <span className="arr">→</span></button>
          <button className="md-next" onClick={onBack}>← {L(d.back, lang)}</button>
        </Reveal>
      </section>
    </article>
  );
}

Object.assign(window, { DubbingPage });