/* Me Paincare — case study screen (navy + light-blue, magazine editorial) */
const MPV = window.XH_MEPAINCARE;
const MPT = window.tr;
const MPIMG = (f) => window.R('mepaincare/' + f);
function MPParas({ text }) { return (text || '').split('\n\n').map((p, i) => <p className="mpcase__p" key={i}>{p}</p>); }
function MPChapter({ no, label, on }) {
  return (
    <div className="mpchapter">
      <span className="mpchapter__no">{no}</span>
      <p className="mpeyebrow">{label}</p>
    </div>
  );
}

function MePaincareCaseScreen({ go, lang }) {
  const ref = useReveal();
  const V = MPV;
  return (
    <div ref={ref} className="mpcase">
      {/* Hero — magazine cover */}
      <header className="mphero">
        <div className="wrap wrap--wide">
          <button className="mpback" onClick={() => go('work')}><Icon name="arrow-left" /> {MPT(V.back, lang)}</button>
          <img className="mphero__logo" src={MPIMG('logo.png')} alt="Me Paincare" />
          <div className="mphero__kicker">
            <span className="mpchip">{MPT(V.kicker, lang)}</span>
            <span className="mphero__cat">{MPT(V.industry, lang)}</span>
            <span className="mphero__year">{V.year} · {V.url}</span>
          </div>
          <h1 className="mphero__lede">{MPT(V.hero.lede, lang)}</h1>
          <p className="mphero__sub">{MPT(V.hero.sub, lang)}</p>
          <div className="mphero__tags">{MPT(V.tags, lang).map((t, i) => <span className="mptag" key={i}>{t}</span>)}</div>
          <div className="mpheadstats reveal">
            {V.headline.stats.map((s, i) => (
              <div className="mpheadstat" key={i}><span className="mpheadstat__num">{s.num}</span><span className="mpheadstat__label">{MPT(s.label, lang)}</span></div>
            ))}
          </div>
        </div>
      </header>

      {/* 01 Background */}
      <section className="mpsec">
        <div className="wrap wrap--wide">
          <div className="mpcol reveal">
            <MPChapter no={V.background.no} label={MPT(V.background.label, lang)} />
            <h2 className="mph2">{MPT(V.background.title, lang)}</h2>
            <MPParas text={MPT(V.background.body, lang)} />
          </div>
          <div className="mpshot reveal"><img src={MPIMG('web-1.png')} alt="Me Paincare clinic signage" /><span className="mpshot__cap">{lang === 'zh' ? '診所招牌 · 元朗門市' : 'Clinic signage · branded identity'}</span></div>
        </div>
      </section>

      {/* 02 Challenge — cream */}
      <section className="mpsec mpsec--cream pb-gap">
        <div className="wrap wrap--wide">
          <div className="mpcol reveal">
            <MPChapter no={V.challenge.no} label={MPT(V.challenge.label, lang)} />
            <h2 className="mph2">{MPT(V.challenge.title, lang)}</h2>
            <MPParas text={MPT(V.challenge.body, lang)} />
          </div>
          <div className="mpquestion reveal">
            <p className="mpquestion__label">{lang === 'zh' ? '我們要回答的問題' : 'The question we had to answer'}</p>
            <p className="mpquestion__text">{MPT(V.challenge.question, lang)}</p>
          </div>
        </div>
      </section>

      {/* 03 HRS framework */}
      <section className="mpsec">
        <div className="wrap wrap--wide">
          <div className="mpcol reveal">
            <MPChapter no={V.hrs.no} label={MPT(V.hrs.label, lang)} />
            <h2 className="mph2">{MPT(V.hrs.title, lang)}</h2>
            <MPParas text={MPT(V.hrs.intro, lang)} />
          </div>
          <div className="mphrs">
            {V.hrs.layers.map((l, i) => (
              <div className="mphrslayer reveal" key={i}>
                <div className="mphrslayer__key">{l.key}</div>
                <div>
                  <h3 className="mphrslayer__word">{MPT(l.word, lang)}</h3>
                  <p className="mphrslayer__sub">{MPT(l.sub, lang)}</p>
                  <p className="mphrslayer__d">{MPT(l.d, lang)}</p>
                </div>
              </div>
            ))}
          </div>
          <p className="mphrs__quote reveal">{MPT(V.hrs.quote, lang)}</p>
        </div>
      </section>

      {/* 04 Website — paper */}
      <section className="mpsec mpsec--paper pb-gap">
        <div className="wrap wrap--wide">
          <div className="mpcol reveal">
            <MPChapter no={V.website.no} label={MPT(V.website.label, lang)} />
            <h2 className="mph2">{MPT(V.website.title, lang)}</h2>
            <MPParas text={MPT(V.website.body, lang)} />
          </div>
          <div className="mpshot reveal"><img src={MPIMG('web-2.png')} alt="Me Paincare treatment steps" /></div>
          <div className="mpshot reveal"><img src={MPIMG('web-3.png')} alt="Me Paincare service modalities" /><span className="mpshot__cap">{lang === 'zh' ? '療癒步驟 — 人手治療 · 專業儀器 · 強化肌肉' : 'Treatment journey — manual · devices · strengthening'}</span></div>
        </div>
      </section>

      {/* 05 SEO */}
      <section className="mpsec">
        <div className="wrap wrap--wide mpcol reveal">
          <MPChapter no={V.seo.no} label={MPT(V.seo.label, lang)} />
          <h2 className="mph2">{MPT(V.seo.title, lang)}</h2>
          <MPParas text={MPT(V.seo.body, lang)} />
          <div className="mpcats">
            {MPT(V.seo.cats, lang).map((c, i) => <span className="mpcat" key={i}><Icon name="search" />{c}</span>)}
          </div>
        </div>
      </section>

      {/* 06 SEM — navy */}
      <section className="mpsec mpsec--navy pb-gap">
        <div className="wrap wrap--wide">
          <div className="mpcol reveal">
            <MPChapter no={V.sem.no} label={MPT(V.sem.label, lang)} />
            <h2 className="mph2 mph2--on">{MPT(V.sem.title, lang)}</h2>
            <MPParas text={MPT(V.sem.body, lang)} />
          </div>
          <div className="mpstats">
            {V.sem.stats.map((s, i) => (
              <div className="mpstat" key={i}><span className="mpstat__num">{s.num}</span><span className="mpstat__label">{MPT(s.label, lang)}</span></div>
            ))}
          </div>
          <div className="mpgallery" style={{ marginTop: 'clamp(2rem,1.5rem + 2vw,3rem)' }}>
            <div className="mpshot reveal"><img src={MPIMG('sem-result.png')} alt="Google Ads results" /><span className="mpshot__cap">Google Ads · 2022 Q2 – 2026 Q2</span></div>
            <div className="mpshot reveal"><img src={MPIMG('sem-ad.png')} alt="Search ad preview" /><span className="mpshot__cap">{lang === 'zh' ? '旗艦廣告 · CTR 3.08%' : 'Flagship ad · 3.08% CTR'}</span></div>
          </div>
          <p className="mpnote"><Icon name="info" />{MPT(V.sem.adNote, lang)}</p>
        </div>
      </section>

      {/* 07 Social — paper */}
      <section className="mpsec mpsec--paper pb-gap">
        <div className="wrap wrap--wide">
          <div className="mpcol reveal">
            <MPChapter no={V.social.no} label={MPT(V.social.label, lang)} />
            <h2 className="mph2">{MPT(V.social.title, lang)}</h2>
            <MPParas text={MPT(V.social.body, lang)} />
          </div>
          <div className="mpshot reveal"><img src={MPIMG('brand-showcase.png')} alt="Me Paincare branded social posts" /></div>
          <div className="mpsocialgrid mt-gap">
            <div className="reveal">
              <h3 className="mphrslayer__word" style={{ fontSize: '1.2rem', marginBottom: 4 }}>{lang === 'zh' ? '內容類型' : 'Content produced'}</h3>
              <ul className="mplist" style={{ marginTop: 14 }}>
                {MPT(V.social.contentTypes, lang).map((c, i) => <li key={i} style={{ color: 'var(--mp-text)' }}><Icon name="play-circle" style={{ color: 'var(--mp-blue)' }} />{c}</li>)}
              </ul>
            </div>
            <div className="reveal">
              <div className="mpstats" style={{ marginTop: 0, gridTemplateColumns: '1fr 1fr' }}>
                {V.social.stats.map((s, i) => (
                  <div className="mpstat" key={i}><span className="mpstat__num">{s.num}</span><span className="mpstat__label">{MPT(s.label, lang)}</span></div>
                ))}
              </div>
            </div>
          </div>
          <div className="mpgallery" style={{ marginTop: 'clamp(1.5rem,1rem + 2vw,2.5rem)' }}>
            <div className="mpshot reveal"><img src={MPIMG('social-views.png')} alt="Facebook video views" /><span className="mpshot__cap">{lang === 'zh' ? '影片總播放 30.1M' : '30.1M total video views'}</span></div>
            <div className="mpshot reveal"><img src={MPIMG('social-metrics.png')} alt="Social media growth metrics" /><span className="mpshot__cap">{lang === 'zh' ? '互動 · 連結點擊 · 到訪 · 追蹤' : 'Interactions · clicks · visits · follows'}</span></div>
          </div>
          <div className="mpshot reveal"><img src={MPIMG('social-posts.png')} alt="Top-performing pain education videos" /><span className="mpshot__cap">{MPT(V.social.postsCap, lang)}</span></div>
          {/* reach cards on a navy strip */}
          <div style={{ marginTop: 'clamp(1.5rem,1rem + 2vw,2.5rem)', background: 'var(--mp-navy)', borderRadius: 'var(--radius-2xl)', padding: 'clamp(24px,2.6vw,40px)' }}>
            <div className="mpreach" style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 16 }}>
              {V.social.reach.map((r, i) => (
                <div className="mpreachcard reveal" key={i} style={{ flex: '1 1 240px' }}>
                  <p className="mpreachcard__plat">{r.plat}</p>
                  <div className="mpreachcard__rows">
                    <div><span>{MPT(V.social.followersLabel, lang)}</span><b>{r.followers}</b></div>
                    <div><span>{MPT(V.social.reachLabel, lang)}</span><b>{r.reach} <span style={{ display: 'inline', color: '#7fd0a0', fontSize: 13 }}>{r.growth}</span></b></div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* 08 What we built */}
      <section className="mpsec">
        <div className="wrap wrap--wide mpcol reveal">
          <MPChapter no={V.built.no} label={MPT(V.built.label, lang)} />
          <h2 className="mph2">{MPT(V.built.title, lang)}</h2>
          <ul className="mpdeliver">
            {MPT(V.built.items, lang).map((it, i) => <li key={i}><Icon name="check" />{it}</li>)}
          </ul>
        </div>
      </section>

      {/* 09 Recognition — cream */}
      <section className="mpsec mpsec--cream pb-gap">
        <div className="wrap wrap--wide">
          <div className="mpcol reveal">
            <MPChapter no={V.recognition.no} label={MPT(V.recognition.label, lang)} />
            <h2 className="mph2">{MPT(V.recognition.title, lang)}</h2>
            <MPParas text={MPT(V.recognition.intro, lang)} />
          </div>
          <div className="mpawards">
            {MPT(V.recognition.awards, lang).map((a, i) => (
              <div className="mpaward reveal" key={i}><Icon name="award" /><span>{a}</span></div>
            ))}
          </div>
        </div>
      </section>

      {/* 10 Insight — navy */}
      <section className="mpsec mpsec--navy pb-gap">
        <div className="wrap wrap--wide reveal">
          <div className="mpinsight">
            <p className="mpeyebrow" style={{ color: 'var(--mp-sky)', textAlign: 'center' }}>{MPT(V.insight.label, lang)}</p>
            <div className="mpinsight__mark">&ldquo;</div>
            <h2 className="mpinsight__quote">{MPT(V.insight.quote, lang)}</h2>
            <div className="mpinsight__body"><MPParas text={MPT(V.insight.body, lang)} /></div>
          </div>
        </div>
      </section>

      <window.CaseServices slug="mepaincare" go={go} lang={lang} />

      {/* CTA */}
      <section className="mpcta">
        <div className="wrap wrap--narrow mpcta__inner reveal">
          <h2 className="mpcta__title">{MPT(V.ctaTitle, lang)}</h2>
          <button className="mpbtn" onClick={() => go('contact')}>{MPT(V.ctaBtn, lang)} <Icon name="arrow-right" /></button>
        </div>
      </section>

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

Object.assign(window, { MePaincareCaseScreen });