/* ME HAIR — case study screen (black + champagne gold, editorial luxury) */
const MHV = window.XH_MEHAIR;
const MHT = window.tr;
const MHIMG = (f) => window.R('mehair/' + f);
function MHParas({ text }) { return (text || '').split('\n\n').map((p, i) => <p className="mhcase__p" key={i}>{p}</p>); }

function MeHairCaseScreen({ go, lang }) {
  const ref = useReveal();
  return (
    <div ref={ref} className="mhcase">
      {/* Hero */}
      <header className="mhhero">
        <div className="wrap wrap--wide">
          <button className="mhback" onClick={() => go('work')}><Icon name="arrow-left" /> {MHT(MHV.back, lang)}</button>
          <img className="mhhero__logo" src={MHIMG('logo.png')} alt="ME HAIR" />
          <div className="mhhero__meta">
            <span className="mhchip">{MHT(MHV.industry, lang)}</span>
            <span className="mhhero__year">{MHV.year} · {MHV.url}</span>
          </div>
          <h1 className="mhhero__title">{MHT(MHV.hero.title, lang)}</h1>
          <p className="mhhero__sub">{MHT(MHV.hero.sub, lang)}</p>
          <div className="mhhero__tags">{MHT(MHV.tags, lang).map((t, i) => <span className="mhtag" key={i}>{t}</span>)}</div>
          <div className="mhhero__media reveal"><img src={MHIMG('storefront.png')} alt="ME HAIR storefront" /></div>
        </div>
      </header>

      {/* Background */}
      <section className="mhsec">
        <div className="wrap wrap--narrow reveal">
          <p className="mheyebrow">{MHT(MHV.background.label, lang)}</p>
          <h2 className="mhh2 mt-gap">{MHT(MHV.background.title, lang)}</h2>
          <div className="mt-gap"><MHParas text={MHT(MHV.background.body, lang)} /></div>
        </div>
      </section>

      {/* Challenge — black */}
      <section className="mhsec mhsec--black pb-gap">
        <div className="wrap wrap--wide">
          <div className="mhchallenge reveal">
            <p className="mheyebrow mheyebrow--on">{MHT(MHV.challenge.label, lang)}</p>
            <h2 className="mhh2 mhh2--on mt-gap">{MHT(MHV.challenge.title, lang)}</h2>
            <p className="mhcase__p mt-gap">{MHT(MHV.challenge.intro, lang)}</p>
            <MHParas text={MHT(MHV.challenge.body, lang)} />
            <div className="mhquote-block">
              <p className="mhquote-block__main">&ldquo;{MHT(MHV.challenge.quote, lang)}&rdquo;</p>
              <div className="mhquote-block__rows">
                <div className="mhqrow"><Icon name="target" /><span><b>{lang === 'zh' ? '核心定位' : 'Positioning'}:</b> {MHT(MHV.challenge.positioning, lang)}</span></div>
                <div className="mhqrow"><Icon name="sprout" /><span><b>{lang === 'zh' ? '臨床信念' : 'Clinical conviction'}:</b> {MHT(MHV.challenge.clinical, lang)}</span></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Brand name */}
      <section className="mhsec mhsec--sand pb-gap">
        <div className="wrap wrap--wide">
          <div className="mhname">
            <div className="reveal" style={{ textAlign: 'center' }}><span className="mhname__big">M<span>E</span></span></div>
            <div className="reveal">
              <p className="mheyebrow">{MHT(MHV.name.label, lang)}</p>
              <h2 className="mhh2 mt-gap">{MHT(MHV.name.title, lang)}</h2>
              <MHParas text={MHT(MHV.name.body, lang)} />
            </div>
          </div>
        </div>
      </section>

      {/* Logo design */}
      <section className="mhsec">
        <div className="wrap wrap--wide">
          <div className="reveal" style={{ maxWidth: 720 }}>
            <p className="mheyebrow">{MHT(MHV.logo.label, lang)}</p>
            <h2 className="mhh2 mt-gap">{MHT(MHV.logo.title, lang)}</h2>
            <MHParas text={MHT(MHV.logo.body, lang)} />
          </div>
          <div className="mhlogo__fig reveal"><img src={MHIMG('logo-construction.png')} alt="ME HAIR logo construction" /></div>
          <div className="mhlogo__note reveal"><p>{MHT(MHV.logo.note, lang)}</p></div>
        </div>
      </section>

      {/* Colour system — sand */}
      <section className="mhsec mhsec--sand pb-gap">
        <div className="wrap wrap--wide">
          <div className="reveal" style={{ maxWidth: 680 }}>
            <p className="mheyebrow">{MHT(MHV.colors.label, lang)}</p>
            <h2 className="mhh2 mt-gap">{MHT(MHV.colors.title, lang)}</h2>
          </div>
          <div className="mhcolors">
            {MHV.colors.items.map((c, i) => (
              <div className="mhcolor reveal" key={i}>
                <div className="mhcolor__chip" style={{ background: c.hex }}></div>
                <div className="mhcolor__meta"><b>{MHT(c.name, lang)}</b><p>{MHT(c.desc, lang)}</p></div>
              </div>
            ))}
          </div>
          <div className="mhsubs reveal">
            {MHV.colors.subs.map((s, i) => (
              <div className="mhsub" key={i}><span className="mhsub__dot" style={{ background: s.hex }}></span><b>{MHT(s.name, lang)}</b></div>
            ))}
          </div>
          <p className="mhsubnote reveal">{MHT(MHV.colors.subnote, lang)}</p>
        </div>
      </section>

      {/* Brand identity */}
      <section className="mhsec">
        <div className="wrap wrap--wide">
          <div className="reveal" style={{ maxWidth: 720 }}>
            <p className="mheyebrow">{MHT(MHV.identity.label, lang)}</p>
            <h2 className="mhh2 mt-gap">{MHT(MHV.identity.title, lang)}</h2>
          </div>
          <div className="mhsplit mt-gap">
            <div className="mhsplit__media reveal"><img src={MHIMG('brand-elements.png')} alt="ME HAIR brand elements" /></div>
            <div className="reveal"><MHParas text={MHT(MHV.identity.elements, lang)} /></div>
          </div>
          <div className="mhshot reveal" style={{ marginTop: 'clamp(1.5rem,1rem + 2vw,2.5rem)' }}>
            <img src={MHIMG('social.png')} alt="ME HAIR Instagram collection" />
            <span className="mhshot__cap">{MHT(MHV.identity.socialCap, lang)}</span>
          </div>
        </div>
      </section>

      {/* Website — sand */}
      <section className="mhsec mhsec--sand pb-gap">
        <div className="wrap wrap--wide">
          <div className="reveal" style={{ maxWidth: 760 }}>
            <p className="mheyebrow">{MHT(MHV.web.label, lang)}</p>
            <h2 className="mhh2 mt-gap">{MHT(MHV.web.title, lang)}</h2>
            <p className="mhcase__p mt-gap">{MHT(MHV.web.body, lang)}</p>
          </div>
          <div className="mhshot reveal"><img src={MHIMG('web-home.png')} alt="me-haircare.com homepage" /><span className="mhshot__cap">me-haircare.com · {lang === 'zh' ? '官方首頁' : 'Official homepage'}</span></div>
        </div>
      </section>

      {/* Insight quote — black */}
      <section className="mhsec mhsec--black pb-gap">
        <div className="wrap wrap--wide reveal">
          <div className="mhquote">
            <p className="mheyebrow mheyebrow--on" style={{ justifyContent: 'center' }}>{MHT(MHV.insight.label, lang)}</p>
            <div className="mhquote__mark">&ldquo;</div>
            <h2 className="mhquote__text">{MHT(MHV.insight.quote, lang)}</h2>
            <p className="mhquote__body">{MHT(MHV.insight.body, lang)}</p>
          </div>
        </div>
      </section>

      {/* Deliverables */}
      <section className="mhsec mhsec--sand pb-gap">
        <div className="wrap wrap--wide reveal">
          <p className="mheyebrow">{MHT(MHV.deliverables.label, lang)}</p>
          <ul className="mhdeliver mt-gap">
            {MHT(MHV.deliverables.items, lang).map((it, i) => <li key={i}><Icon name="check" />{it}</li>)}
          </ul>
        </div>
      </section>

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

      {/* CTA */}
      <section className="mhcta">
        <div className="wrap wrap--narrow mhcta__inner reveal">
          <h2 className="mhcta__title">{MHT(MHV.ctaTitle, lang)}</h2>
          <button className="mhbtn" onClick={() => go('contact')}>{MHT(MHV.ctaBtn, lang)} <Icon name="arrow-right" /></button>
        </div>
      </section>

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

Object.assign(window, { MeHairCaseScreen });