/* 輕ZONE Relax Zone HK — case study screen (electric blue + yellow, friendly) */
const RZV = window.XH_RELAXZONE;
const RZT = window.tr;
const RZIMG = (f) => window.R('relaxzone/' + f);
function RZParas({ text }) { return (text || '').split('\n\n').map((p, i) => <p className="rzcase__p" key={i}>{p}</p>); }

function RelaxZoneCaseScreen({ go, lang }) {
  const ref = useReveal();
  return (
    <div ref={ref} className="rzcase">
      {/* Hero */}
      <header className="rzhero">
        <div className="rzhero__blob b1"></div>
        <div className="rzhero__blob b2"></div>
        <div className="wrap wrap--wide">
          <button className="rzback" onClick={() => go('work')}><Icon name="arrow-left" /> {RZT(RZV.back, lang)}</button>
          <img className="rzhero__logo" src={RZIMG('logo.png')} alt="輕ZONE Relax Zone HK" />
          <div className="rzhero__grid">
            <div>
              <div className="rzhero__meta">
                <span className="rzchip">{RZT(RZV.industry, lang)}</span>
                <span className="rzhero__year">{RZV.year} · {RZV.url}</span>
              </div>
              <h1 className="rzhero__title">{RZT(RZV.hero.title, lang)}</h1>
              <p className="rzhero__sub">{RZT(RZV.hero.sub, lang)}</p>
              <div className="rzhero__tags">
                {RZT(RZV.tags, lang).map((t, i) => <span className="rztag" key={i}>{t}</span>)}
              </div>
            </div>
            <div className="rzhero__art reveal"><img src={RZIMG('charge-hero.png')} alt="輕ZONE charge concept" /></div>
          </div>
        </div>
      </header>

      {/* Background */}
      <section className="rzsec">
        <div className="wrap wrap--narrow reveal">
          <p className="rzeyebrow">{RZT(RZV.background.label, lang)}</p>
          <h2 className="rzh2 mt-gap">{RZT(RZV.background.title, lang)}</h2>
          <div className="mt-gap"><RZParas text={RZT(RZV.background.body, lang)} /></div>
        </div>
        <div className="wrap wrap--wide">
          <div className="rzshot reveal"><img src={RZIMG('office-hero.jpg')} alt="15分パワーチャージ" /><span className="rzshot__cap">15分パワーチャージ · {lang === 'zh' ? '肩頸・頭痛・疲勞回復' : 'Neck · headache · fatigue recovery'}</span></div>
        </div>
      </section>

      {/* Challenge — mist */}
      <section className="rzsec rzsec--mist pb-gap">
        <div className="wrap wrap--wide">
          <div className="wrap--narrow reveal" style={{ padding: 0, margin: '0 auto' }}>
            <p className="rzeyebrow">{RZT(RZV.challenge.label, lang)}</p>
            <h2 className="rzh2 mt-gap">{RZT(RZV.challenge.title, lang)}</h2>
            <p className="rzcase__p mt-gap">{RZT(RZV.challenge.intro, lang)}</p>
          </div>
          <div className="rzchallenge">
            {RZV.challenge.items.map((it, i) => (
              <div className="rzchalcard reveal" key={i}>
                <div className="rzchalcard__ic"><Icon name={it.icon} /></div>
                <b>{RZT(it.t, lang)}</b>
                <p>{RZT(it.d, lang)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Naming */}
      <section className="rzsec">
        <div className="wrap wrap--wide">
          <div className="rzname">
            <div className="reveal">
              <p className="rzeyebrow">{RZT(RZV.naming.label, lang)}</p>
              <h2 className="rzh2 mt-gap">{RZT(RZV.naming.title, lang)}</h2>
              <div className="mt-gap"><RZParas text={RZT(RZV.naming.body, lang)} /></div>
            </div>
            <div className="rznameparts reveal">
              {RZV.naming.parts.map((p, i) => (
                <div className="rznamepart" key={i}>
                  <span className="rznamepart__k">{p.k}</span>
                  <span className="rznamepart__v">{RZT(p.v, lang)}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Positioning — blue */}
      <section className="rzsec rzsec--blue pb-gap">
        <div className="wrap wrap--wide">
          <div className="wrap--narrow reveal" style={{ padding: 0, margin: '0 auto' }}>
            <p className="rzeyebrow rzeyebrow--on">{RZT(RZV.positioning.label, lang)}</p>
            <h2 className="rzh2 rzh2--on mt-gap">{RZT(RZV.positioning.title, lang)}</h2>
            <blockquote className="rzpullquote mt-gap">{RZT(RZV.positioning.quote, lang)}</blockquote>
            <div className="mt-gap"><RZParas text={RZT(RZV.positioning.body, lang)} /></div>
          </div>
          <div className="rzlangs">
            {RZV.positioning.langs.map((l, i) => (
              <div className="rzlang reveal" key={i}>
                <span className="rzlang__tag">{RZT(l.tag, lang)}</span>
                <p className="rzlang__copy">{RZT(l.copy, lang)}</p>
              </div>
            ))}
          </div>
          <div className="rzscience reveal">{RZT(RZV.positioning.science, lang)}</div>
          <div className="rzeffects">
            {RZV.positioning.effects.map((e, i) => (
              <div className="rzeffect reveal" key={i}><b>{RZT(e.t, lang)}</b><span>{RZT(e.d, lang)}</span></div>
            ))}
          </div>
        </div>
      </section>

      {/* Personas */}
      <section className="rzsec pb-gap">
        <div className="wrap wrap--wide">
          <div className="reveal" style={{ maxWidth: 680 }}>
            <p className="rzeyebrow">{RZT(RZV.personas.label, lang)}</p>
            <h2 className="rzh2 mt-gap">{RZT(RZV.personas.title, lang)}</h2>
          </div>
          <div className="rzpersonas">
            {RZV.personas.items.map((p, i) => (
              <div className="rzpersona reveal" key={i}>
                <img src={RZIMG(p.img)} alt={RZT(p.t, lang)} />
                <b>{RZT(p.t, lang)}</b>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Logo — mist */}
      <section className="rzsec rzsec--mist pb-gap">
        <div className="wrap wrap--wide">
          <div className="rzlogo">
            <div className="rzlogo__fig reveal"><img src={RZIMG('logo.png')} alt="輕ZONE logo" /></div>
            <div className="reveal">
              <p className="rzeyebrow">{RZT(RZV.logo.label, lang)}</p>
              <h2 className="rzh2 mt-gap">{RZT(RZV.logo.title, lang)}</h2>
              <div className="mt-gap"><RZParas text={RZT(RZV.logo.body, lang)} /></div>
              <ul className="rzformats">
                {RZT(RZV.logo.formats, lang).map((f, i) => <li key={i}><Icon name="check" />{f}</li>)}
              </ul>
            </div>
          </div>
          <div className="rzfig reveal"><img src={RZIMG('charge-arrow.png')} alt="15分 power charge" /></div>
        </div>
      </section>

      {/* Colors */}
      <section className="rzsec">
        <div className="wrap wrap--wide">
          <div className="reveal" style={{ maxWidth: 720 }}>
            <p className="rzeyebrow">{RZT(RZV.colors.label, lang)}</p>
            <h2 className="rzh2 mt-gap">{RZT(RZV.colors.title, lang)}</h2>
          </div>
          <div className="rzcolors">
            {RZV.colors.items.map((c, i) => (
              <div className="rzcolor reveal" key={i}>
                <div className="rzcolor__chip" style={{ background: c.hex }}></div>
                <b>{RZT(c.name, lang)}</b>
                <p>{RZT(c.desc, lang)}</p>
              </div>
            ))}
          </div>
          <div className="rztype reveal">{RZT(RZV.colors.type, lang)}</div>
        </div>
      </section>

      {/* Services — mist */}
      <section className="rzsec rzsec--mist pb-gap">
        <div className="wrap wrap--wide">
          <div className="reveal" style={{ maxWidth: 720 }}>
            <p className="rzeyebrow">{RZT(RZV.services.label, lang)}</p>
            <h2 className="rzh2 mt-gap">{RZT(RZV.services.title, lang)}</h2>
            <p className="rzcase__p mt-gap">{RZT(RZV.services.body, lang)}</p>
          </div>
          <div className="rzmenu reveal">
            {RZV.services.menu.map((m, i) => (
              <div className="rzmenu__row" key={i}>
                <span className="rzmenu__price">{m.price}</span>
                <span className="rzmenu__name">{RZT(m.name, lang)}</span>
              </div>
            ))}
          </div>
          <div className="rzpills">
            <span className="rzpill">{RZT(RZV.services.zones, lang)}</span>
            <span className="rzpill rzpill--yellow">{RZT(RZV.services.promise, lang)}</span>
          </div>
        </div>
      </section>

      {/* Interior */}
      <section className="rzsec">
        <div className="wrap wrap--wide">
          <div className="reveal" style={{ maxWidth: 720 }}>
            <p className="rzeyebrow">{RZT(RZV.interior.label, lang)}</p>
            <h2 className="rzh2 mt-gap">{RZT(RZV.interior.title, lang)}</h2>
            <p className="rzcase__p mt-gap">{RZT(RZV.interior.body, lang)}</p>
          </div>
          <div className="rzwalls">
            {RZV.interior.walls.map((w, i) => (
              <div className="rzwall reveal" key={i}><b>{RZT(w.t, lang)}</b><p>{RZT(w.d, lang)}</p></div>
            ))}
          </div>
          <div className="rzsigns reveal">
            {RZT(RZV.interior.signs, lang).map((s, i) => <span className="rzsign" key={i}>{s}</span>)}
          </div>
          <div className="rzloc reveal"><Icon name="map-pin" />{RZT(RZV.interior.location, lang)}</div>
          <div className="rzshot reveal"><img src={RZIMG('web-home.png')} alt="relaxzonehk.com homepage" /><span className="rzshot__cap">relaxzonehk.com · {lang === 'zh' ? '網站首頁' : 'Website homepage'}</span></div>
          <div className="rzshot reveal"><img src={RZIMG('web-feature.png')} alt="relaxzonehk.com features" /><span className="rzshot__cap">relaxzonehk.com · {lang === 'zh' ? '15分鐘肩頸放鬆' : '15-minute neck & shoulder relief'}</span></div>
        </div>
      </section>

      {/* Results — mist */}
      <section className="rzsec rzsec--mist pb-gap">
        <div className="wrap wrap--wide">
          <div className="reveal" style={{ maxWidth: 680 }}>
            <p className="rzeyebrow">{RZT(RZV.results.label, lang)}</p>
            <h2 className="rzh2 mt-gap">{RZT(RZV.results.title, lang)}</h2>
          </div>
          <div className="rztable reveal">
            {RZV.results.rows.map((r, i) => (
              <div className="rztable__row" key={i}><span className="rztable__k">{RZT(r.k, lang)}</span><span className="rztable__v">{RZT(r.v, lang)}</span></div>
            ))}
          </div>
        </div>
      </section>

      {/* Insight quote — blue */}
      <section className="rzsec rzsec--blue pb-gap">
        <div className="wrap wrap--wide reveal">
          <div className="rzquote">
            <p className="rzeyebrow rzeyebrow--on" style={{ justifyContent: 'center' }}>{RZT(RZV.insight.label, lang)}</p>
            <div className="rzquote__mark">&ldquo;</div>
            <h2 className="rzquote__text">{RZT(RZV.insight.quote, lang)}</h2>
            <p className="rzquote__body">{RZT(RZV.insight.body, lang)}</p>
          </div>
        </div>
      </section>

      {/* Deliverables */}
      <section className="rzsec pb-gap">
        <div className="wrap wrap--wide reveal">
          <p className="rzeyebrow">{RZT(RZV.deliverables.label, lang)}</p>
          <ul className="rzdeliver mt-gap">
            {RZT(RZV.deliverables.items, lang).map((it, i) => <li key={i}><Icon name="check" />{it}</li>)}
          </ul>
        </div>
      </section>

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

      {/* CTA */}
      <section className="rzcta">
        <div className="rzcta__plug"><span></span><span></span><span></span></div>
        <div className="wrap wrap--narrow rzcta__inner reveal">
          <h2 className="rzcta__title">{RZT(RZV.ctaTitle, lang)}</h2>
          <button className="rzbtn" onClick={() => go('contact')}>{RZT(RZV.ctaBtn, lang)} <Icon name="arrow-right" /></button>
        </div>
      </section>

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

Object.assign(window, { RelaxZoneCaseScreen });