/* GHM Greater Bay Area Artists Alliance — case study screen (black + orange) */
const GV = window.XH_GHM;
const GT = window.tr;
const GIMG = (f) => window.R('ghm/' + f);
function GParas({ text }) { return (text || '').split('\n\n').map((p, i) => <p className="gcase__p" key={i}>{p}</p>); }

function GhmCaseScreen({ go, lang }) {
  const ref = useReveal();
  return (
    <div ref={ref} className="gcase">
      {/* Hero */}
      <header className="ghero">
        <div className="ghero__dots"><span></span><span></span><span></span></div>
        <div className="wrap wrap--wide">
          <button className="gback" onClick={() => go('work')}><Icon name="arrow-left" /> {GT(GV.back, lang)}</button>
          <div className="ghero__grid">
            <div>
              <div className="ghero__meta">
                <span className="gchip">{GT(GV.industry, lang)}</span>
                <span className="ghero__year">{GV.year} · {GV.url}</span>
              </div>
              <h1 className="ghero__title">{GT(GV.hero.title, lang)}</h1>
              <p className="ghero__sub">{GT(GV.hero.sub, lang)}</p>
              <div className="ghero__tags">
                {GT(GV.tags, lang).map((t, i) => <span className="gtag" key={i}>{t}</span>)}
              </div>
            </div>
            <div className="ghero__logobox reveal"><img src={GIMG('logo.png')} alt="GHM Greater Bay Area Artists Alliance" /></div>
          </div>
        </div>
      </header>

      {/* Background */}
      <section className="gsec">
        <div className="wrap wrap--narrow reveal">
          <p className="geyebrow">{GT(GV.background.label, lang)}</p>
          <h2 className="gh2 mt-gap">{GT(GV.background.title, lang)}</h2>
          <div className="mt-gap"><GParas text={GT(GV.background.body, lang)} /></div>
        </div>
        <div className="wrap wrap--wide">
          <div className="gshot reveal"><img src={GIMG('home-hero.png')} alt="GHM homepage" /><span className="gshot__cap">ghmgbaau.com · {lang === 'zh' ? '官方首頁' : 'Official homepage'}</span></div>
        </div>
      </section>

      {/* Challenge — black */}
      <section className="gsec gsec--black pb-gap">
        <div className="wrap wrap--wide">
          <div className="wrap--narrow reveal" style={{ padding: 0, margin: '0 auto' }}>
            <p className="geyebrow geyebrow--on">{GT(GV.challenge.label, lang)}</p>
            <h2 className="gh2 gh2--on mt-gap">{GT(GV.challenge.title, lang)}</h2>
            <p className="gcase__p mt-gap">{GT(GV.challenge.intro, lang)}</p>
          </div>
          <div className="gchallenge">
            {GV.challenge.items.map((it, i) => (
              <div className="gchalcard reveal" key={i}>
                <div className="gchalcard__ic"><Icon name={it.icon} /></div>
                <b>{GT(it.t, lang)}</b>
                <p>{GT(it.d, lang)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Logo */}
      <section className="gsec">
        <div className="wrap wrap--wide">
          <div className="glogo">
            <div>
              <div className="glogo__fig reveal"><img src={GIMG('logo-white.png')} alt="GHM logo" /></div>
              <div className="glogo__dots reveal">
                <span className="glogo__dots-vis"><span></span><span></span><span></span></span>
                <p>{GT(GV.logo.dots, lang)}</p>
              </div>
            </div>
            <div className="reveal">
              <p className="geyebrow">{GT(GV.logo.label, lang)}</p>
              <h2 className="gh2 mt-gap">{GT(GV.logo.title, lang)}</h2>
              <GParas text={GT(GV.logo.body, lang)} />
            </div>
          </div>
        </div>
      </section>

      {/* Colour system — mist */}
      <section className="gsec gsec--mist pb-gap">
        <div className="wrap wrap--wide">
          <div className="reveal" style={{ maxWidth: 680 }}>
            <p className="geyebrow">{GT(GV.colors.label, lang)}</p>
            <h2 className="gh2 mt-gap">{GT(GV.colors.title, lang)}</h2>
          </div>
          <div className="gcolors">
            {GV.colors.items.map((c, i) => (
              <div className="gcolor reveal" key={i}>
                <div className="gcolor__chip" style={{ background: c.hex, borderBottom: c.hex === '#FFFFFF' ? '1px solid var(--g-line)' : 'none' }}></div>
                <div className="gcolor__meta">
                  <b>{GT(c.name, lang)}</b>
                  <p>{GT(c.desc, lang)}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Bespoke website */}
      <section className="gsec">
        <div className="wrap wrap--wide">
          <div className="reveal" style={{ maxWidth: 720 }}>
            <p className="geyebrow">{GT(GV.web.label, lang)}</p>
            <h2 className="gh2 mt-gap">{GT(GV.web.title, lang)}</h2>
            <p className="gcase__p mt-gap">{GT(GV.web.body, lang)}</p>
          </div>
          <div className="gshot reveal"><img src={GIMG('home-about.png')} alt="GHM about section" /></div>
          <div className="gprog">
            {GV.web.programmes.map((p, i) => (
              <div className="gprogcard reveal" key={i}>
                <div className="gprogcard__ic"><Icon name={p.icon} /></div>
                <b>{GT(p.t, lang)}</b>
                <p>{GT(p.d, lang)}</p>
              </div>
            ))}
          </div>
          <div className="gshot reveal"><img src={GIMG('shop.png')} alt="GHM art shop page" /><span className="gshot__cap">{lang === 'zh' ? '藝術品推介及銷售頁面' : 'Art listings & sales page'}</span></div>
          <div className="gshot reveal"><img src={GIMG('home-advantage.png')} alt="GHM alliance advantages" /></div>
        </div>
      </section>

      {/* Scale — mist */}
      <section className="gsec gsec--mist pb-gap">
        <div className="wrap wrap--wide">
          <div className="reveal" style={{ maxWidth: 680 }}>
            <p className="geyebrow">{GT(GV.scale.label, lang)}</p>
            <h2 className="gh2 mt-gap">{GT(GV.scale.title, lang)}</h2>
          </div>
          <div className="gstatrow">
            {GV.scale.stats.map((s, i) => (
              <div className="gstat reveal" key={i}><span className="gstat__num">{s.num}</span><span className="gstat__label">{GT(s.label, lang)}</span></div>
            ))}
          </div>
          <div className="gtable reveal">
            {GV.scale.rows.map((r, i) => (
              <div className="gtable__row" key={i}><span className="gtable__k">{GT(r.k, lang)}</span><span className="gtable__v">{GT(r.v, lang)}</span></div>
            ))}
          </div>
        </div>
      </section>

      {/* Insight quote — black */}
      <section className="gsec gsec--black pb-gap">
        <div className="wrap wrap--wide reveal">
          <div className="gquote">
            <p className="geyebrow geyebrow--on" style={{ justifyContent: 'center' }}>{GT(GV.insight.label, lang)}</p>
            <div className="gquote__mark">&ldquo;</div>
            <h2 className="gquote__text">{GT(GV.insight.quote, lang)}</h2>
            <p className="gquote__body">{GT(GV.insight.body, lang)}</p>
          </div>
        </div>
      </section>

      {/* Deliverables */}
      <section className="gsec gsec--mist pb-gap">
        <div className="wrap wrap--wide reveal">
          <p className="geyebrow">{GT(GV.deliverables.label, lang)}</p>
          <ul className="gdeliver mt-gap">
            {GT(GV.deliverables.items, lang).map((it, i) => <li key={i}><Icon name="check" />{it}</li>)}
          </ul>
        </div>
      </section>

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

      {/* CTA */}
      <section className="gcta">
        <div className="gcta__dots"><span></span><span></span><span></span></div>
        <div className="wrap wrap--narrow gcta__inner reveal">
          <h2 className="gcta__title">{GT(GV.ctaTitle, lang)}</h2>
          <button className="gbtn" onClick={() => go('contact')}>{GT(GV.ctaBtn, lang)} <Icon name="arrow-right" /></button>
        </div>
      </section>

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

Object.assign(window, { GhmCaseScreen });