/* MEYSU — case study screen (warm cream / juice-fruit theme) */
const MV = window.XH_MEYSU;
const MT = window.tr;
const MIMG = (f) => window.R('meysu/' + f);
function MParas({ text }) { return (text || '').split('\n\n').map((p, i) => <p className="mcase__p" key={i}>{p}</p>); }

function MeysuCaseScreen({ go, lang }) {
  const ref = useReveal();
  return (
    <div ref={ref} className="mcase">
      {/* Hero */}
      <header className="mhero">
        <div className="wrap wrap--wide">
          <button className="mback" onClick={() => go('work')}><Icon name="arrow-left" /> {MT(MV.back, lang)}</button>
          <img className="mhero__logo" src={MIMG('logo.png')} alt="MEYSU" />
          <div className="mhero__grid">
            <div className="mhero__text">
              <div className="mhero__meta">
                <span className="mchip">{MT(MV.industry, lang)}</span>
                <span className="mhero__year">{MV.year}</span>
              </div>
              <h1 className="mhero__title">{MT(MV.hero.title, lang)}</h1>
              <p className="mhero__sub">{MT(MV.hero.sub, lang)}</p>
              <p className="mhero__svc">{MT(MV.services, lang)} · {MV.url}</p>
            </div>
            <div className="mhero__media reveal">
              <img src={MIMG('brand.jpeg')} alt="MEYSU 美思牌" />
            </div>
          </div>
        </div>
      </header>
      <div className="section-gap"></div>

      {/* Background */}
      <section className="msec">
        <div className="wrap wrap--narrow reveal">
          <p className="meyebrow">{MT(MV.background.label, lang)}</p>
          <h2 className="mh2">{MT(MV.background.title, lang)}</h2>
          <MParas text={MT(MV.background.body, lang)} />
        </div>
      </section>
      <div className="section-gap"></div>

      {/* Challenge + stat band */}
      <section className="msec msec--green pb-gap">
        <div className="wrap wrap--wide">
          <div className="wrap--narrow reveal" style={{ padding: 0, margin: 0 }}>
            <div className="section-gap"></div>
            <p className="meyebrow meyebrow--on">{MT(MV.challenge.label, lang)}</p>
            <h2 className="mh2 mh2--on">{MT(MV.challenge.title, lang)}</h2>
            <div className="mchallenge__body">{MParas({ text: MT(MV.challenge.body, lang) })}</div>
          </div>
          <div className="mstatrow">
            {MV.challenge.stats.map((s, i) => (
              <div className="mstat reveal" key={i}>
                <span className="mstat__num">{s.num}</span>
                <span className="mstat__label">{MT(s.label, lang)}</span>
              </div>
            ))}
          </div>
        </div>
      </section>
      <div className="section-gap"></div>

      {/* Approach: competitors + tiers */}
      <section className="msec">
        <div className="wrap wrap--wide">
          <div className="wrap--narrow reveal" style={{ padding: 0, margin: '0 0 clamp(2rem,1.5rem + 2vw,3.5rem)' }}>
            <p className="meyebrow">{MT(MV.approach.label, lang)}</p>
            <h2 className="mh2">{MT(MV.approach.title, lang)}</h2>
            <MParas text={MT(MV.approach.body, lang)} />
          </div>
          <div className="mapp">
            <div className="mcompetitors reveal">
              <span className="mlabel">{lang === 'zh' ? '三大直接競爭對手' : 'Three direct competitors'}</span>
              {MV.approach.competitors.map((c) => (
                <div className="mcomp" key={c.name}>
                  <b>{c.name}</b><span>{MT(c.origin, lang)}</span><i>{c.price}</i>
                </div>
              ))}
            </div>
            <div className="mtiers reveal">
              <span className="mlabel">{lang === 'zh' ? '超市分層進場' : 'Tiered channel entry'}</span>
              {MV.approach.tiers.map((t, i) => (
                <div className={'mtier mtier--' + i} key={i}>
                  <b>{MT(t.tier, lang)}</b><span>{t.list}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
      <div className="section-gap"></div>

      {/* Findings */}
      <section className="msec msec--cream pb-gap">
        <div className="wrap wrap--wide">
          <div className="section-gap"></div>
          <div className="mcenter mt-gap reveal">
            <p className="meyebrow">{MT(MV.findings.label, lang)}</p>
            <h2 className="mh2">{MT(MV.findings.title, lang)}</h2>
          </div>
          <div className="mfindings">
            {MV.findings.items.map((f, i) => (
              <div className="mfind reveal" key={i}>
                <span className="mfind__stat">{MT(f.stat, lang)}</span>
                <h3 className="mfind__t">{MT(f.t, lang)}</h3>
                <p className="mfind__d">{MT(f.d, lang)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      <div className="section-gap"></div>

      {/* Pricing architecture */}
      <section className="msec">
        <div className="wrap wrap--wide">
          <div className="mcenter reveal">
            <p className="meyebrow">{MT(MV.pricing.label, lang)}</p>
            <h2 className="mh2">{MT(MV.pricing.title, lang)}</h2>
          </div>
          <div className="mprice reveal">
            {MV.pricing.rows.map((r, i) => (
              <div className="mprice__row" key={i}>
                <span className="mprice__tier">{MT(r.tier, lang)}</span>
                <span className="mprice__val">{r.price}</span>
              </div>
            ))}
          </div>
          <p className="mprice__note reveal">{MT(MV.pricing.flavour, lang)}</p>
        </div>
      </section>
      <div className="section-gap"></div>

      {/* Product line images */}
      <section className="msec msec--cream pb-gap">
        <div className="wrap wrap--wide">
          <div className="section-gap"></div>
          <div className="mcenter mt-gap reveal">
            <p className="meyebrow">{MT(MV.products.label, lang)}</p>
            <h2 className="mh2">{MT(MV.products.title, lang)}</h2>
          </div>
          <div className="mproducts reveal">
            <img src={MIMG('products-1.png')} alt="MEYSU product line" />
            <img src={MIMG('products-2.png')} alt="MEYSU product line" />
          </div>
        </div>
      </section>
      <div className="section-gap"></div>

      {/* Plan + Result */}
      <section className="msec">
        <div className="wrap wrap--wide mplanres">
          <div className="mplan reveal">
            <p className="meyebrow">{MT(MV.plan.label, lang)}</p>
            <h2 className="mh2" style={{ marginBottom: 22 }}>{MT(MV.plan.title, lang)}</h2>
            <ul className="mlist">
              {MT(MV.plan.items, lang).map((it, i) => <li key={i}><Icon name="check" />{it}</li>)}
            </ul>
          </div>
          <div className="mresult reveal">
            <p className="meyebrow">{MT(MV.result.label, lang)}</p>
            <h2 className="mh2">{MT(MV.result.title, lang)}</h2>
            <MParas text={MT(MV.result.body, lang)} />
            <div className="mresult__badge"><Icon name="check-circle-2" />{lang === 'zh' ? '品牌順利上市' : 'Successfully launched'}</div>
          </div>
        </div>
      </section>
      <div className="section-gap"></div>

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

      {/* CTA */}
      <section className="mcta pb-gap">
        <div className="wrap wrap--narrow mcta__inner reveal">
          <div className="section-gap"></div>
          <h2 className="mcta__title mt-gap">{MT(MV.ctaTitle, lang)}</h2>
          <button className="mbtn" onClick={() => go('contact')}>{MT(MV.ctaBtn, lang)} <Icon name="arrow-right" /></button>
        </div>
      </section>

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

Object.assign(window, { MeysuCaseScreen });