/* JOOOVE LIFE — case study screen (pastel "sync with nature" theme) */
const JV = window.XH_JOOOVE;
const JT = window.tr;
const JIMG = (f) => window.R('jooove/' + f);

function JParas({ text }) {
  return (text || '').split('\n\n').map((p, i) => <p className="jcase__p" key={i}>{p}</p>);
}

function JoooveCaseScreen({ go, lang }) {
  const ref = useReveal();
  return (
    <div ref={ref} className="jcase">
      {/* floating brand elements */}
      <img className="jcase__float jf1" src={JIMG('body.png')} alt="" />
      <img className="jcase__float jf2" src={JIMG('mind.png')} alt="" />
      <img className="jcase__float jf3" src={JIMG('spirit.png')} alt="" />

      {/* Hero */}
      <header className="jhero">
        <div className="wrap wrap--wide">
          <button className="jback" onClick={() => go('work')}><Icon name="arrow-left" /> {JT(JV.back, lang)}</button>
          <div className="jhero__inner">
            <div className="jhero__meta">
              <span className="jchip jchip--body">{JT(JV.industry, lang)}</span>
              <span className="jhero__year">{JV.year}</span>
            </div>
            <img className="jhero__logo" src={JIMG('logo.png')} alt="JOOOVE LIFE" />
            <p className="jscript">{JT(JV.tagline, lang)}</p>
            <h1 className="jhero__title">{JT(JV.hero.title, lang)}</h1>
            <p className="jhero__sub">{JT(JV.hero.sub, lang)}</p>
            <p className="jhero__svc">{JT(JV.services, lang)}</p>
          </div>
        </div>
      </header>

      {/* Background */}
      <section className="jsec">
        <div className="wrap wrap--narrow reveal">
          <p className="jeyebrow">{JT(JV.background.label, lang)}</p>
          <h2 className="jh2">{JT(JV.background.title, lang)}</h2>
          <JParas text={JT(JV.background.body, lang)} />
        </div>
      </section>

      {/* Challenge — soft tint band */}
      <section className="jsec jsec--tint">
        <div className="wrap wrap--narrow reveal">
          <p className="jeyebrow">{JT(JV.challenge.label, lang)}</p>
          <h2 className="jh2">{JT(JV.challenge.title, lang)}</h2>
          <JParas text={JT(JV.challenge.body, lang)} />
        </div>
      </section>

      {/* Three pillars — 身心靈 */}
      <section className="jsec">
        <div className="wrap wrap--wide">
          <div className="jcenter reveal">
            <p className="jeyebrow">{JT(JV.pillars.label, lang)}</p>
            <h2 className="jh2">{JT(JV.pillars.title, lang)}</h2>
            <p className="jlead">{JT(JV.pillars.lead, lang)}</p>
          </div>
          <div className="jpillars">
            {JV.pillars.items.map((p) => (
              <div className={'jpillar jpillar--' + p.key + ' reveal'} key={p.key}>
                <div className="jpillar__art" style={{ background: p.color }}>
                  <img src={JIMG(p.img)} alt={JT(p, lang)} />
                </div>
                <div className="jpillar__body">
                  <span className="jpillar__zh" style={{ color: p.color }}>{p.zh}</span>
                  <h3 className="jpillar__en">{p.en}</h3>
                  <p className="jpillar__desc">{JT(p.desc, lang)}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Approach steps — staggered */}
      <section className="jsec jsec--tint">
        <div className="wrap wrap--wide">
          <div className="jcenter reveal">
            <p className="jeyebrow">{JT(JV.steps.label, lang)}</p>
            <h2 className="jh2">{JT(JV.steps.title, lang)}</h2>
          </div>
          <div className="jsteps">
            {JV.steps.items.map((s) => (
              <div className="jstep reveal" key={s.n}>
                <span className="jstep__n">{s.n}</span>
                <div className="jstep__body">
                  <h3 className="jstep__t">{JT(s.t, lang)}</h3>
                  <p className="jstep__d">{JT(s.d, lang)}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Logo & web directions — image gallery */}
      <section className="jsec">
        <div className="wrap wrap--wide">
          <div className="jcenter reveal">
            <p className="jeyebrow">{JT(JV.ideas.label, lang)}</p>
            <h2 className="jh2">{JT(JV.ideas.title, lang)}</h2>
          </div>
          <div className="jgallery">
            {JV.ideas.imgs.map((src, i) => (
              <div className={'jgcard jgcard--' + i + ' reveal'} key={src}>
                <img src={JIMG(src)} alt={'JOOOVE LIFE direction ' + (i + 1)} />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Deliverables + Result */}
      <section className="jsec jsec--tint">
        <div className="wrap wrap--wide jresult">
          <div className="jresult__deliver reveal">
            <p className="jeyebrow">{JT(JV.deliverables.label, lang)}</p>
            <h2 className="jh2" style={{ marginBottom: 24 }}>{JT(JV.deliverables.title, lang)}</h2>
            <ul className="jlist">
              {JT(JV.deliverables.items, lang).map((it, i) => <li key={i}><Icon name="check" />{it}</li>)}
            </ul>
          </div>
          <div className="jresult__outcome reveal">
            <p className="jeyebrow">{JT(JV.result.label, lang)}</p>
            <h2 className="jh2">{JT(JV.result.title, lang)}</h2>
            <JParas text={JT(JV.result.body, lang)} />
            <div className="jstats">
              {JV.result.stats.map((s, i) => (
                <div className="jstat" key={i}>
                  <span className="jstat__num">{s.num}{s.unit && <i>{s.unit}</i>}</span>
                  <span className="jstat__label">{JT(s.label, lang)}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <window.CaseServices slug="jooove-life" go={go} lang={lang} />

      {/* CTA */}
      <section className="jcta pb-gap">
        <img className="jcta__el jcta__el--1" src={JIMG('body.png')} alt="" />
        <img className="jcta__el jcta__el--2" src={JIMG('mind.png')} alt="" />
        <div className="wrap wrap--narrow jcta__inner reveal">
          <p className="jscript jscript--lg">{JT(JV.tagline, lang)}</p>
          <h2 className="jcta__title mt-gap">{JT(JV.ctaTitle, lang)}</h2>
          <button className="jbtn" onClick={() => go('contact')}>{JT(JV.ctaBtn, lang)} <Icon name="arrow-right" /></button>
        </div>
      </section>

      <Footer go={go} lang={lang} />
    </div>
  );
}

Object.assign(window, { JoooveCaseScreen });