/* AGPS 引領航 — case study screen (corporate navy / steel-blue, editorial rhythm) */
const AV = window.XH_AGPS;
const AT = window.tr;
const AIMG = (f) => window.R('agps/' + f);
function AParas({ text }) { return (text || '').split('\n\n').map((p, i) => <p className="acase__p" key={i}>{p}</p>); }

function AgpsCaseScreen({ go, lang }) {
  const ref = useReveal();
  return (
    <div ref={ref} className="acase">
      {/* Hero */}
      <header className="ahero">
        <div className="wrap wrap--wide">
          <button className="aback" onClick={() => go('work')}><Icon name="arrow-left" /> {AT(AV.back, lang)}</button>
          <img className="ahero__logo" src={AIMG('logo.png')} alt="AGPS" />
          <div className="ahero__grid">
            <div className="ahero__text">
              <div className="ahero__meta">
                <span className="achip">{AT(AV.industry, lang)}</span>
                <span className="ahero__year">{AV.year}</span>
              </div>
              <h1 className="ahero__title">{AT(AV.hero.title, lang)}</h1>
              <p className="ahero__sub">{AT(AV.hero.sub, lang)}</p>
              <p className="ahero__svc">{AT(AV.services, lang)} · {AV.url}</p>
            </div>
          </div>
          <div className="ahero__media reveal">
            <img src={AIMG('home.png')} alt="AGPS website" />
          </div>
        </div>
      </header>

      {/* Background */}
      <section className="asec">
        <div className="wrap wrap--narrow reveal">
          <p className="aeyebrow">{AT(AV.background.label, lang)}</p>
          <h2 className="ah2">{AT(AV.background.title, lang)}</h2>
          <AParas text={AT(AV.background.body, lang)} />
        </div>
      </section>

      {/* Challenge — dark */}
      <section className="asec asec--navy pb-gap">
        <div className="wrap wrap--narrow reveal" style={{ padding: '0 var(--gutter)' }}>
          <p className="aeyebrow aeyebrow--on mt-gap">{AT(AV.challenge.label, lang)}</p>
          <h2 className="ah2 ah2--on">{AT(AV.challenge.title, lang)}</h2>
          <div className="achallenge">{AParas({ text: AT(AV.challenge.body, lang) })}</div>
          <div className="aduo">
            <div className="aduo__side"><Icon name="store" /><b>{lang === 'zh' ? '生意賣家' : 'Business sellers'}</b><span>{lang === 'zh' ? '尋找買家' : 'looking for buyers'}</span></div>
            <div className="aduo__link"><Icon name="git-merge" /></div>
            <div className="aduo__side"><Icon name="search-check" /><b>{lang === 'zh' ? '生意買家' : 'Business buyers'}</b><span>{lang === 'zh' ? '尋找機會' : 'looking for opportunities'}</span></div>
          </div>
        </div>
      </section>

      {/* Phase 1 — Digital infrastructure */}
      <section className="asec">
        <div className="wrap wrap--wide">
          <div className="wrap--narrow reveal" style={{ padding: 0, margin: 0 }}>
            <span className="akicker">{AT(AV.phase1.kicker, lang)}</span>
            <p className="aeyebrow">{AT(AV.phase1.label, lang)}</p>
            <h2 className="ah2">{AT(AV.phase1.title, lang)}</h2>
            <AParas text={AT(AV.phase1.body, lang)} />
          </div>
          <div className="ashot reveal">
            <img src={AIMG('listings.png')} alt="AGPS 現有商機 listings" />
            <span className="ashot__cap">{lang === 'zh' ? '現有商機 — 生意買賣資訊板塊' : '現有商機 — the business-opportunities listings'}</span>
          </div>
          <div className="astack">
            <span className="alabel">{AT(AV.phase1.stackLabel, lang)}</span>
            <div className="astack__grid">
              {AV.phase1.stack.map((s, i) => (
                <div className="astackcard reveal" key={i}>
                  <div className="astackcard__ic"><Icon name={s.icon} /></div>
                  <b>{AT(s.t, lang)}</b>
                  <p>{AT(s.d, lang)}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* 2023 results — stat band + GA gallery */}
      <section className="asec asec--mist pb-gap">
        <div className="wrap wrap--wide">
          <div className="mt-gap reveal" style={{ marginBottom: 'clamp(1.5rem,1rem + 2vw,2.5rem)' }}>
            <p className="aeyebrow">{AT(AV.results2023.label, lang)}</p>
            <h2 className="ah2">{AT(AV.results2023.title, lang)}</h2>
          </div>
          <div className="astatrow">
            {AV.results2023.stats.map((s, i) => (
              <div className="astat reveal" key={i}>
                <span className="astat__num">{s.num}</span>
                <span className="astat__label">{AT(s.label, lang)}</span>
              </div>
            ))}
          </div>
          <div className="agallery">
            {AV.results2023.gallery.map((g, i) => (
              <figure className="ashot reveal" key={i}>
                <img src={AIMG(g.img)} alt="" />
                <figcaption className="ashot__cap">{AT(g.cap, lang)}</figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>

      {/* Findings */}
      <section className="asec">
        <div className="wrap wrap--wide">
          <div className="wrap--narrow reveal" style={{ padding: 0, margin: '0 0 clamp(2rem,1.5rem + 2vw,3.5rem)' }}>
            <p className="aeyebrow">{AT(AV.findings.label, lang)}</p>
            <h2 className="ah2">{AT(AV.findings.title, lang)}</h2>
          </div>
          <div className="afindings">
            {AV.findings.items.map((f, i) => (
              <div className="afind reveal" key={i}>
                <span className="afind__stat">{AT(f.stat, lang)}</span>
                <h3 className="afind__t">{AT(f.t, lang)}</h3>
                <p className="afind__d">{AT(f.d, lang)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Phase 2 — Brand strategy + positioning quote */}
      <section className="asec asec--navy pb-gap">
        <div className="wrap wrap--wide">
          <div className="wrap--narrow reveal mt-gap" style={{ padding: '0 var(--gutter)', margin: '0 auto' }}>
            <span className="akicker akicker--on">{AT(AV.phase2.kicker, lang)}</span>
            <p className="aeyebrow aeyebrow--on">{AT(AV.phase2.label, lang)}</p>
            <h2 className="ah2 ah2--on">{AT(AV.phase2.title, lang)}</h2>
            <div className="achallenge">{AParas({ text: AT(AV.phase2.body, lang) })}</div>
          </div>
          <blockquote className="aquote reveal">
            <span className="aquote__mark">“</span>
            <p className="aquote__text">{AT(AV.phase2.quote, lang)}</p>
            <p className="aquote__sub">{AT(AV.phase2.quoteSub, lang)}</p>
          </blockquote>
        </div>
      </section>

      {/* Hatena architecture */}
      <section className="asec">
        <div className="wrap wrap--wide">
          <div className="wrap--narrow reveal" style={{ padding: 0, margin: '0 0 clamp(2rem,1.5rem + 2vw,3rem)' }}>
            <p className="aeyebrow">{AT(AV.hatena.label, lang)}</p>
            <h2 className="ah2">{AT(AV.hatena.title, lang)}</h2>
            <AParas text={AT(AV.hatena.body, lang)} />
          </div>
          <div className="ahatena reveal">
            <div className="ahatena__mother"><Icon name="compass" /><b>{AT(AV.hatena.mother, lang)}</b></div>
            <div className="ahatena__stem"></div>
            <div className="ahatena__subs">
              {AV.hatena.subs.map((s, i) => (
                <div className="ahatena__sub" key={i}><span className="ahatena__dot"></span>{AT(s, lang)}</div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* EXP 5-stage methodology + flagship */}
      <section className="asec asec--mist pb-gap">
        <div className="wrap wrap--wide">
          <div className="wrap--narrow reveal mt-gap" style={{ padding: 0, margin: '0 0 clamp(2rem,1.5rem + 2vw,3rem)' }}>
            <p className="aeyebrow">{AT(AV.exp.label, lang)}</p>
            <h2 className="ah2">{AT(AV.exp.title, lang)}</h2>
            <AParas text={AT(AV.exp.body, lang)} />
          </div>
          <div className="aexp">
            {AV.exp.stages.map((st, i) => (
              <div className="aexp__step reveal" key={i}>
                <span className="aexp__n">{st.n}</span>
                <div className="aexp__body">
                  <b>{AT(st.t, lang)}</b>
                  <p>{AT(st.d, lang)}</p>
                </div>
              </div>
            ))}
          </div>
          <div className="aflagship reveal">
            <div className="aflagship__head">
              <span className="aflagship__tag">{lang === 'zh' ? '旗艦入門服務' : 'Flagship entry service'}</span>
              <h3 className="aflagship__title">{AT(AV.exp.flagship.title, lang)}</h3>
              <span className="aflagship__price">{AT(AV.exp.flagship.price, lang)}</span>
            </div>
            <p className="aflagship__desc">{AT(AV.exp.flagship.desc, lang)}</p>
          </div>
        </div>
      </section>

      {/* Deliverables — two columns */}
      <section className="asec">
        <div className="wrap wrap--wide">
          <div className="wrap--narrow reveal" style={{ padding: 0, margin: '0 0 clamp(2rem,1.5rem + 2vw,3rem)' }}>
            <p className="aeyebrow">{AT(AV.deliverables.label, lang)}</p>
            <h2 className="ah2">{AT(AV.deliverables.title, lang)}</h2>
          </div>
          <div className="adeliver">
            {AV.deliverables.cols.map((c, i) => (
              <div className="adeliver__col reveal" key={i}>
                <h3 className="adeliver__head">{AT(c.head, lang)}</h3>
                <ul className="alist">
                  {AT(c.items, lang).map((it, j) => <li key={j}><Icon name="check" />{it}</li>)}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Result */}
      <section className="asec asec--navy pb-gap">
        <div className="wrap wrap--wide">
          <div className="aresult mt-gap">
            <div className="aresult__text reveal">
              <p className="aeyebrow aeyebrow--on">{AT(AV.result.label, lang)}</p>
              <h2 className="ah2 ah2--on">{AT(AV.result.title, lang)}</h2>
              <div className="achallenge">{AParas({ text: AT(AV.result.body, lang) })}</div>
              <div className="aresult__badge"><Icon name="award" />{AT(AV.result.badge, lang)}</div>
            </div>
            <figure className="ashot ashot--dark reveal">
              <img src={AIMG('about.png')} alt="關於 AGPS" />
              <figcaption className="ashot__cap ashot__cap--on">{lang === 'zh' ? '關於 AGPS — 專業 · 可靠 · 突破' : 'About AGPS — Professional · Reliable · Transform'}</figcaption>
            </figure>
          </div>
        </div>
      </section>

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

      {/* CTA */}
      <section className="acta pb-gap">
        <div className="wrap wrap--narrow acta__inner reveal">
          <h2 className="acta__title mt-gap">{AT(AV.ctaTitle, lang)}</h2>
          <button className="abtn" onClick={() => go('contact')}>{AT(AV.ctaBtn, lang)} <Icon name="arrow-right" /></button>
        </div>
      </section>

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

Object.assign(window, { AgpsCaseScreen });