/* 數博 Math Blocks — case study screen (navy + terracotta, playful education) */
const MBV = window.XH_MATHBLOCKS;
const MBT = window.tr;
const MBIMG = (f) => window.R('mathblocks/' + f);
function MBParas({ text }) { return (text || '').split('\n\n').map((p, i) => <p className="mbcase__p" key={i}>{p}</p>); }
function MBChapter({ no, label }) { return (<div className="mbchapter"><span className="mbchapter__no">{no}</span><p className="mbeyebrow">{label}</p></div>); }

function MathBlocksCaseScreen({ go, lang }) {
  const ref = useReveal();
  const V = MBV;
  return (
    <div ref={ref} className="mbcase">
      {/* Hero */}
      <header className="mbhero">
        <div className="wrap wrap--wide">
          <button className="mbback" onClick={() => go('work')}><Icon name="arrow-left" /> {MBT(V.back, lang)}</button>
          <img className="mbhero__logo" src={MBIMG('logo.png')} alt="Math Blocks" />
          <div className="mbhero__kicker">
            <span className="mbchip">{MBT(V.kicker, lang)}</span>
            <span className="mbhero__cat">{MBT(V.industry, lang)}</span>
            <span className="mbhero__year">{V.year} · {V.url}</span>
          </div>
          <h1 className="mbhero__lede">{MBT(V.hero.lede, lang)}</h1>
          <p className="mbhero__sub">{MBT(V.hero.sub, lang)}</p>
          <div className="mbhero__tags">{MBT(V.tags, lang).map((t, i) => <span className="mbtag" key={i}>{t}</span>)}</div>
          <div className="mbheadstats reveal">
            {V.headline.stats.map((s, i) => (
              <div className="mbheadstat" key={i}><span className="mbheadstat__num">{s.num}</span><span className="mbheadstat__label">{MBT(s.label, lang)}</span></div>
            ))}
          </div>
        </div>
        <div className="wrap wrap--wide"><div className="mbhero__media reveal"><img src={MBIMG('web-home.png')} alt="Math Blocks homepage" /></div></div>
      </header>

      {/* 01 Background */}
      <section className="mbsec">
        <div className="wrap wrap--wide">
          <div className="mbcol reveal">
            <MBChapter no={V.background.no} label={MBT(V.background.label, lang)} />
            <h2 className="mbh2">{MBT(V.background.title, lang)}</h2>
            <MBParas text={MBT(V.background.body, lang)} />
            <div className="mbold reveal">
              <img src={MBIMG('logo-old.png')} alt="Original Math Blocks logo" />
              <span>{MBT(V.background.oldLabel, lang)}</span>
            </div>
          </div>
        </div>
      </section>

      {/* 02 Challenge — sand */}
      <section className="mbsec mbsec--sand pb-gap">
        <div className="wrap wrap--wide">
          <div className="mbcol reveal">
            <MBChapter no={V.challenge.no} label={MBT(V.challenge.label, lang)} />
            <h2 className="mbh2">{MBT(V.challenge.title, lang)}</h2>
            <MBParas text={MBT(V.challenge.body, lang)} />
          </div>
          <div className="mbquestion reveal">
            <p className="mbquestion__label">{lang === 'zh' ? '這個空白，屬於數博' : 'The gap was 數博\u2019s to claim'}</p>
            <p className="mbquestion__text">{MBT(V.challenge.question, lang)}</p>
          </div>
        </div>
      </section>

      {/* 03 CIV — navy */}
      <section className="mbsec mbsec--navy pb-gap">
        <div className="wrap wrap--wide">
          <div className="mbcol reveal">
            <MBChapter no={V.civ.no} label={MBT(V.civ.label, lang)} />
            <h2 className="mbh2 mbh2--on">{MBT(V.civ.title, lang)}</h2>
            <MBParas text={MBT(V.civ.intro, lang)} />
          </div>
          <div className="mbciv">
            {V.civ.layers.map((l, i) => (
              <div className="mbcivcard reveal" key={i}>
                <div className="mbcivcard__key">{l.key}</div>
                <h3 className="mbcivcard__word">{MBT(l.word, lang)}</h3>
                <p className="mbcivcard__d">{MBT(l.d, lang)}</p>
              </div>
            ))}
          </div>
          <div className="mbtaglines reveal">
            <p className="mbtaglines__label">{MBT(V.civ.taglinesLabel, lang)}</p>
            <div className="mbtaglines__list">{V.civ.taglines.map((t, i) => <span className="mbtagline" key={i}>{MBT(t, lang)}</span>)}</div>
          </div>
        </div>
      </section>

      {/* 04 Logo */}
      <section className="mbsec">
        <div className="wrap wrap--wide">
          <div className="mbcol reveal">
            <MBChapter no={V.logo.no} label={MBT(V.logo.label, lang)} />
            <h2 className="mbh2">{MBT(V.logo.title, lang)}</h2>
            <MBParas text={MBT(V.logo.body, lang)} />
          </div>
          <div className="mbshot reveal" style={{ background: '#fff' }}><img src={MBIMG('logo.png')} alt="Math Blocks new logo" style={{ maxWidth: 560, margin: '0 auto', padding: 'clamp(28px,4vw,56px)' }} /></div>
          <div className="mbglances">
            {V.logo.glances.map((g, i) => (
              <div className="mbglance reveal" key={i}>
                <span className="mbglance__n">{g.n}</span>
                <h3 className="mbglance__t">{MBT(g.t, lang)}</h3>
                <p className="mbglance__d">{MBT(g.d, lang)}</p>
              </div>
            ))}
          </div>
          <p className="mbsysnote reveal"><Icon name="layers" />{MBT(V.logo.sysNote, lang)}</p>
        </div>
      </section>

      {/* 05 IP — sand */}
      <section className="mbsec mbsec--sand pb-gap">
        <div className="wrap wrap--wide">
          <div className="mbcol reveal">
            <MBChapter no={V.ip.no} label={MBT(V.ip.label, lang)} />
            <h2 className="mbh2">{MBT(V.ip.title, lang)}</h2>
            <MBParas text={MBT(V.ip.intro, lang)} />
          </div>
          <div className="mbshot reveal"><img src={MBIMG('ip.png')} alt="Math Blocks IP mascots — 圓仔, 大方, 阿角" /><span className="mbshot__cap">{lang === 'zh' ? '三大吉祥物 · 圓仔 · 大方 · 阿角' : 'Three mascots · 圓仔 · 大方 · 阿角'}</span></div>
          <div className="mbchars">
            {V.ip.chars.map((c, i) => (
              <div className="mbchar reveal" key={i}>
                <h3 className="mbchar__name">{MBT(c.name, lang)}</h3>
                <span className="mbchar__tag">{MBT(c.tag, lang)}</span>
                <p className="mbchar__d">{MBT(c.d, lang)}</p>
              </div>
            ))}
          </div>
          <div className="mbgallery" style={{ marginTop: 'clamp(1.5rem,1rem + 2vw,2.5rem)' }}>
            <div className="mbshot reveal"><img src={MBIMG('ip-app.png')} alt="Mascot age-group application" /></div>
            <div className="mbshot reveal"><img src={MBIMG('brand-elements.png')} alt="Math Blocks brand elements" /></div>
          </div>
          <div className="mbusage reveal">
            <p className="mbusage__label">{MBT(V.ip.usageLabel, lang)}</p>
            <div className="mbusage__list">{MBT(V.ip.usage, lang).map((u, i) => <span key={i}>{u}</span>)}</div>
          </div>
        </div>
      </section>

      {/* brand showcase + concept full-bleed */}
      <section className="mbsec mbsec--cream pb-gap">
        <div className="wrap wrap--wide">
          <div className="mbgallery">
            <div className="mbshot reveal"><img src={MBIMG('brand-showcase.png')} alt="Math Blocks brand showcase" /></div>
            <div className="mbshot reveal"><img src={MBIMG('concept.png')} alt="Math Blocks BLOCKS concept" /></div>
          </div>
        </div>
      </section>

      {/* 06 Website */}
      <section className="mbsec">
        <div className="wrap wrap--wide">
          <div className="mbcol reveal">
            <MBChapter no={V.website.no} label={MBT(V.website.label, lang)} />
            <h2 className="mbh2">{MBT(V.website.title, lang)}</h2>
            <MBParas text={MBT(V.website.body, lang)} />
          </div>
          <div className="mbaud">
            {V.website.audiences.map((a, i) => (
              <div className="mbaudcard reveal" key={i}>
                <div className="mbaudcard__ic"><Icon name={a.icon} /></div>
                <b>{MBT(a.t, lang)}</b><p>{MBT(a.d, lang)}</p>
              </div>
            ))}
          </div>
          <div className="mbgallery" style={{ marginTop: 'clamp(1.5rem,1rem + 2vw,2.5rem)' }}>
            <div className="mbshot reveal"><img src={MBIMG('web-feature.png')} alt="CIS teaching method page" /><span className="mbshot__cap">{lang === 'zh' ? '獨有 CIS 教學法頁面' : 'CIS teaching method page'}</span></div>
            <div className="mbshot reveal"><img src={MBIMG('web-course.png')} alt="Course content page" /><span className="mbshot__cap">{lang === 'zh' ? '課程內容頁面' : 'Course content page'}</span></div>
          </div>
        </div>
      </section>

      {/* 07 What we built — table */}
      <section className="mbsec mbsec--sand pb-gap">
        <div className="wrap wrap--wide mbcol reveal">
          <MBChapter no={V.built.no} label={MBT(V.built.label, lang)} />
          <h2 className="mbh2">{MBT(V.built.title, lang)}</h2>
          <div className="mbtable">
            {V.built.rows.map((r, i) => (
              <div className="mbtable__row" key={i}><span className="mbtable__k">{MBT(r.k, lang)}</span><span className="mbtable__v">{MBT(r.v, lang)}</span></div>
            ))}
          </div>
        </div>
      </section>

      {/* 08 Insight — terra */}
      <section className="mbsec mbsec--terra pb-gap">
        <div className="wrap wrap--wide reveal">
          <div className="mbinsight">
            <p className="mbeyebrow" style={{ color: 'var(--mb-gold)', textAlign: 'center' }}>{MBT(V.insight.label, lang)}</p>
            <div className="mbinsight__mark">&ldquo;</div>
            <h2 className="mbinsight__quote">{MBT(V.insight.quote, lang)}</h2>
            <div className="mbinsight__body"><MBParas text={MBT(V.insight.body, lang)} /></div>
          </div>
        </div>
      </section>

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

      {/* CTA */}
      <section className="mbcta">
        <div className="wrap wrap--narrow mbcta__inner reveal">
          <h2 className="mbcta__title">{MBT(V.ctaTitle, lang)}</h2>
          <button className="mbbtn" onClick={() => go('contact')}>{MBT(V.ctaBtn, lang)} <Icon name="arrow-right" /></button>
        </div>
      </section>

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

Object.assign(window, { MathBlocksCaseScreen });