/* Wonderland Art Healing — case study screen (forest-green botanical, editorial) */
const WV = window.XH_WONDER;
const WT = window.tr;
const WIMG = (f) => window.R('wonderland/' + f);
function WParas({ text }) { return (text || '').split('\n\n').map((p, i) => <p className="wcase__p" key={i}>{p}</p>); }

function WonderlandCaseScreen({ go, lang }) {
  const ref = useReveal();
  return (
    <div ref={ref} className="wcase">
      {/* Hero */}
      <header className="whero">
        <div className="wrap wrap--wide">
          <button className="wback" onClick={() => go('work')}><Icon name="arrow-left" /> {WT(WV.back, lang)}</button>
          <div className="whero__inner reveal">
            <img className="whero__logo" src={WIMG('logo.png')} alt="Wonderland Art Healing" />
            <div className="whero__meta">
              <span className="wchip">{WT(WV.industry, lang)}</span>
              <span className="whero__year">{WV.year}</span>
            </div>
            <h1 className="whero__title">{WT(WV.hero.title, lang)}</h1>
            <p className="whero__sub">{WT(WV.hero.sub, lang)}</p>
            <div className="whero__tags">
              {WT(WV.tags, lang).map((t, i) => <span className="wtag" key={i}>{t}</span>)}
            </div>
          </div>
          <div className="whero__media reveal" style={{ marginBlock: '2rem' }}><img src={WIMG('web-home.png')} alt="Wonderland website" /></div>
        </div>
      </header>

      {/* Background */}
      <section className="wsec">
        <div className="wrap wrap--narrow reveal">
          <p className="weyebrow">{WT(WV.background.label, lang)}</p>
          <h2 className="wh2 mt-gap">{WT(WV.background.title, lang)}</h2>
          <div className="mt-gap"><WParas text={WT(WV.background.body, lang)} /></div>
        </div>
      </section>

      {/* Challenge — navy */}
      <section className="wsec wsec--navy pb-gap">
        <div className="wrap wrap--wide">
          <div className="wrap--narrow reveal" style={{ padding: 0, margin: '0 auto' }}>
            <p className="weyebrow weyebrow--on">{WT(WV.challenge.label, lang)}</p>
            <h2 className="wh2 wh2--on mt-gap">{WT(WV.challenge.title, lang)}</h2>
            <p className="wcase__lead mt-gap">{WT(WV.challenge.intro, lang)}</p>
          </div>
          <div className="wchallenge">
            {WV.challenge.items.map((it, i) => (
              <div className="wchalcard reveal" key={i}>
                <div className="wchalcard__ic"><Icon name={it.icon} /></div>
                <b>{WT(it.t, lang)}</b>
                <p>{WT(it.d, lang)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Logo directions */}
      <section className="wsec">
        <div className="wrap wrap--wide">
          <div className="reveal" style={{ maxWidth: 720 }}>
            <p className="weyebrow">{WT(WV.logos.label, lang)}</p>
            <h2 className="wh2 mt-gap">{WT(WV.logos.title, lang)}</h2>
            <p className="wcase__lead mt-gap">{WT(WV.logos.body, lang)}</p>
          </div>
          <div className="wlogos">
            {WV.logos.dirs.map((d, i) => (
              <div className="wlogo reveal" key={i}>
                <div className="wlogo__img"><img src={WIMG(i === 0 ? 'branding-logo.png' : 'logo-b.png')} alt={WT(d.t, lang)} /></div>
                <span className="wlogo__tag">{d.tag}</span>
                <h3 className="wlogo__t">{WT(d.t, lang)}</h3>
                <p className="wlogo__d">{WT(d.d, lang)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Colour system — tint */}
      <section className="wsec wsec--tint pb-gap">
        <div className="wrap wrap--wide">
          <div className="reveal" style={{ maxWidth: 680 }}>
            <p className="weyebrow">{WT(WV.colors.label, lang)}</p>
            <h2 className="wh2 mt-gap">{WT(WV.colors.title, lang)}</h2>
          </div>
          <div className="wcolors reveal">
            <div className="wcolorrow">
              {WV.colors.primary.map((c, i) => (
                <div className="wswatch" key={i}>
                  <div className="wswatch__chip" style={{ background: c.hex }}></div>
                  <div className="wswatch__meta"><b>{WT(c.name, lang)}</b></div>
                </div>
              ))}
            </div>
            <div className="wcolorrow wcolorrow--sec">
              {WV.colors.secondary.map((c, i) => (
                <div className="wswatch wswatch--sm" key={i}>
                  <div className="wswatch__chip" style={{ background: c.hex }}></div>
                  <div className="wswatch__meta"><b>{WT(c.name, lang)}</b></div>
                </div>
              ))}
            </div>
            <p className="wtypo">{WT(WV.colors.typo, lang)}</p>
          </div>
        </div>
      </section>

      {/* Icon system + pattern */}
      <section className="wsec">
        <div className="wrap wrap--wide">
          <div className="wsplit">
            <div className="reveal">
              <p className="weyebrow">{WT(WV.icons.label, lang)}</p>
              <h2 className="wh2 mt-gap">{WT(WV.icons.title, lang)}</h2>
              <p className="wcase__lead mt-gap">{WT(WV.icons.body, lang)}</p>
            </div>
            <div className="wsplit__media reveal" style={{ marginBlock: '2rem' }}><img src={WIMG('icon-set.png')} alt="Wonderland icon set" /></div>
          </div>
          <div className="wshot reveal"><img src={WIMG('icon-application.png')} alt="Botanical pattern application" /></div>
          <div className="wshot reveal"><img src={WIMG('packaging.png')} alt="Wonderland tote bags" /><span className="wshot__cap">{lang === 'zh' ? '品牌應用 · 環保袋' : 'Brand application · tote bags'}</span></div>
        </div>
      </section>

      {/* Bespoke website — sage */}
      <section className="wsec wsec--sage pb-gap">
        <div className="wrap wrap--wide">
          <div className="reveal" style={{ maxWidth: 720 }}>
            <p className="weyebrow">{WT(WV.web.label, lang)}</p>
            <h2 className="wh2 mt-gap">{WT(WV.web.title, lang)}</h2>
            <p className="wcase__lead mt-gap">{WT(WV.web.body, lang)}</p>
          </div>
          <div className="wshot reveal"><img src={WIMG('web-services.png')} alt="Wonderland services page" /></div>
          <div className="wshot reveal"><img src={WIMG('web-articles.png')} alt="Wonderland workshop editorial pages" /><span className="wshot__cap">{lang === 'zh' ? '工作坊編輯式頁面' : 'Workshop editorial pages'}</span></div>
          <div className="wshot reveal"><img src={WIMG('web-story.png')} alt="Story of Wonderland" /></div>
        </div>
      </section>

      {/* Space planning */}
      <section className="wsec">
        <div className="wrap wrap--wide">
          <div className="reveal" style={{ maxWidth: 720 }}>
            <p className="weyebrow">{WT(WV.space.label, lang)}</p>
            <h2 className="wh2 mt-gap">{WT(WV.space.title, lang)}</h2>
            <p className="wcase__lead mt-gap">{WT(WV.space.body, lang)}</p>
          </div>
          <div className="wshot reveal" style={{ marginBlock: '1rem' }}><img src={WIMG('floorplan.png')} alt="Studio space planning" /></div>
        </div>
      </section>

      {/* SEO & SEM — navy with stat band */}
      <section className="wsec wsec--navy pb-gap">
        <div className="wrap wrap--wide">
          <div className="wrap--narrow reveal" style={{ padding: 0, margin: '0 auto' }}>
            <p className="weyebrow weyebrow--on">{WT(WV.search.label, lang)}</p>
            <h2 className="wh2 wh2--on mt-gap">{WT(WV.search.title, lang)}</h2>
            <p className="wcase__lead mt-gap">{WT(WV.search.body, lang)}</p>
          </div>
          <div className="wstatrow">
            {WV.search.stats.map((s, i) => (
              <div className="wstat reveal" key={i}>
                <span className="wstat__num">{s.num}<span className="u">{s.unit}</span></span>
                <span className="wstat__label">{WT(s.label, lang)}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Social media + Results (merged) */}
      <section className="wsec wsec--tint pb-gap">
        <div className="wrap wrap--wide">
          <div className="reveal" style={{ maxWidth: 720 }}>
            <p className="weyebrow">{WT(WV.social.label, lang)} · {WT(WV.results.label, lang)}</p>
            <h2 className="wh2 mt-gap">{WT(WV.results.title, lang)}</h2>
            <p className="wcase__lead mt-gap">{WT(WV.social.body, lang)}</p>
            <p className="wcase__lead mt-gap">{WT(WV.results.body, lang)}</p>
          </div>
          <div className="wgrid2">
            <div className="wstack-col">
              <div className="wshot reveal"><img src={WIMG('ga-source.png')} alt="Active users by source" /><span className="wshot__cap">{lang === 'zh' ? '用戶來源' : 'Users by source'}</span></div>
              <div className="wshot reveal"><img src={WIMG('sem.png')} alt="Google Ads performance" /><span className="wshot__cap">{lang === 'zh' ? 'Google Ads 成效' : 'Google Ads performance'}</span></div>
            </div>
            <div className="wshot wshot--fill reveal"><img src={WIMG('ga-pages.png')} alt="Top pages by views" /><span className="wshot__cap">{WT(WV.results.period, lang)}</span></div>
          </div>
          <div className="wtable reveal">
            {WV.results.rows.map((r, i) => (
              <div className={'wtable__row' + (r.hl ? ' wtable__row--hl' : '')} key={i}>
                <span className="wtable__metric">{WT(r.metric, lang)}</span>
                <span className="wtable__value">{r.value}</span>
                <span className="wtable__note">{WT(r.note, lang)}</span>
              </div>
            ))}
          </div>
          <p className="wcities">{lang === 'zh' ? '觸達城市 · ' : 'Cities reached · '}<b>{WT(WV.results.cities, lang)}</b></p>
        </div>
      </section>

      {/* Insight quote — navy */}
      <section className="wsec wsec--navy pb-gap">
        <div className="wrap wrap--wide reveal">
          <div className="wquote">
            <p className="weyebrow weyebrow--on" style={{ textAlign: 'center' }}>{WT(WV.insight.label, lang)}</p>
            <div className="wquote__mark">&ldquo;</div>
            <h2 className="wquote__text">{WT(WV.insight.quote, lang)}</h2>
            <p className="wquote__body">{WT(WV.insight.body, lang)}</p>
          </div>
        </div>
      </section>

      {/* Deliverables */}
      <section className="wsec wsec--tint pb-gap">
        <div className="wrap wrap--wide reveal">
          <p className="weyebrow">{WT(WV.deliverables.label, lang)}</p>
          <h2 className="wh2 mt-gap">{WT(WV.deliverables.title, lang)}</h2>
          <ul className="wdeliver">
            {WT(WV.deliverables.items, lang).map((it, i) => <li key={i}><Icon name="check" />{it}</li>)}
          </ul>
        </div>
      </section>

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

      {/* CTA */}
      <section className="wcta">
        <div className="wrap wrap--narrow wcta__inner reveal">
          <h2 className="wcta__title">{WT(WV.ctaTitle, lang)}</h2>
          <div className="wcta__btns">
            <button className="wbtn wbtn--solid" onClick={() => go('contact')}>{WT(WV.cta1, lang)} <Icon name="arrow-right" /></button>
            <button className="wbtn wbtn--ghost" onClick={() => go('services:brand-identity')}>{WT(WV.cta2, lang)}</button>
          </div>
        </div>
      </section>

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

Object.assign(window, { WonderlandCaseScreen });