/* 富邦財務 Fubon Finance — case study screen (banking blue + teal, research-forward) */
const FBV = window.XH_FUBON;
const FBT = window.tr;
const FBIMG = (f) => window.R('fubon/' + f);
function FBParas({ text }) { return (text || '').split('\n\n').map((p, i) => <p className="fbcase__p" key={i}>{p}</p>); }

function FubonCaseScreen({ go, lang }) {
  const ref = useReveal();
  return (
    <div ref={ref} className="fbcase">
      {/* Hero */}
      <header className="fbhero">
        <div className="wrap wrap--wide">
          <button className="fbback" onClick={() => go('work')}><Icon name="arrow-left" /> {FBT(FBV.back, lang)}</button>
          <img className="fbhero__logo" src={FBIMG('logo.png')} alt="Fubon Finance" />
          <div className="fbhero__grid">
            <div>
              <div className="fbhero__meta">
                <span className="fbchip">{FBT(FBV.industry, lang)}</span>
                <span className="fbhero__year">{FBV.year} · {FBV.url}</span>
              </div>
              <h1 className="fbhero__title">{FBT(FBV.hero.title, lang)}</h1>
              <p className="fbhero__sub">{FBT(FBV.hero.sub, lang)}</p>
              <p className="fbhero__svc">{FBT(FBV.services, lang)}</p>
            </div>
            <div className="fbhero__media reveal"><img src={FBIMG('survey.png')} alt="" /></div>
          </div>
        </div>
      </header>

      {/* Brief */}
      <section className="fbsec">
        <div className="wrap wrap--narrow reveal">
          <p className="fbeyebrow">{FBT(FBV.brief.label, lang)}</p>
          <h2 className="fbh2">{FBT(FBV.brief.title, lang)}</h2>
          <FBParas text={FBT(FBV.brief.body, lang)} />
        </div>
      </section>

      {/* Approach — two phases */}
      <section className="fbsec fbsec--mist pb-gap">
        <div className="wrap wrap--wide">
          <div className="fbblock mt-gap reveal">
            <p className="fbeyebrow">{FBT(FBV.approach.label, lang)}</p>
            <h2 className="fbh2">{FBT(FBV.approach.title, lang)}</h2>
            <p className="fbcase__p">{FBT(FBV.approach.intro, lang)}</p>
          </div>
          <div className="fbphases">
            {FBV.approach.phases.map((p, i) => (
              <div className="fbphase reveal" key={i}>
                <span className="fbphase__tag">{FBT(p.tag, lang)}</span>
                <div className="fbphase__metric">{p.metric}</div>
                <span className="fbphase__metriclabel">{FBT(p.metricLabel, lang)}</span>
                <h3 className="fbphase__name">{FBT(p.name, lang)}</h3>
                <p className="fbphase__d">{FBT(p.d, lang)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Key data highlights — navy band */}
      <section className="fbsec fbsec--navy pb-gap">
        <div className="wrap wrap--wide">
          <div className="fbblock mt-gap reveal">
            <p className="fbeyebrow fbeyebrow--on">{FBT(FBV.highlights.label, lang)}</p>
            <h2 className="fbh2 fbh2--on">{FBT(FBV.highlights.title, lang)}</h2>
          </div>
          <div className="fbhi reveal">
            {FBV.highlights.stats.map((s, i) => (
              <div className="fbhi__cell" key={i}>
                <div className="fbhi__n">{s.n}</div>
                <p className="fbhi__d">{FBT(s.d, lang)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* What we found — survey gallery + 7 findings */}
      <section className="fbsec">
        <div className="wrap wrap--wide">
          <div className="fbblock reveal" style={{ marginBottom: 'clamp(2rem,1.5rem + 2vw,3rem)' }}>
            <p className="fbeyebrow">{FBT(FBV.findings.label, lang)}</p>
            <h2 className="fbh2">{FBT(FBV.findings.title, lang)}</h2>
          </div>
          <div className="fbfindings">
            {FBV.findings.items.map((f, i) => (
              <div className="fbfind reveal" key={i}>
                <span className="fbfind__stat">{f.stat}</span>
                <h3 className="fbfind__t">{FBT(f.t, lang)}</h3>
                <p className="fbfind__d">{FBT(f.d, lang)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Competitive landscape */}
      <section className="fbsec fbsec--mist pb-gap">
        <div className="wrap wrap--wide">
          <div className="fbblock mt-gap reveal">
            <p className="fbeyebrow">{FBT(FBV.landscape.label, lang)}</p>
            <h2 className="fbh2">{FBT(FBV.landscape.title, lang)}</h2>
            <FBParas text={FBT(FBV.landscape.body, lang)} />
          </div>
          <div className="fbshot reveal">
            <img src={FBIMG('competitors.png')} alt="" />
            <span className="fbshot__cap">{FBT(FBV.landscape.cap, lang)}</span>
          </div>
        </div>
      </section>

      {/* Strategic recommendations — 3 directions + diagram */}
      <section className="fbsec">
        <div className="wrap wrap--wide">
          <div className="fbblock reveal">
            <p className="fbeyebrow">{FBT(FBV.directions.label, lang)}</p>
            <h2 className="fbh2">{FBT(FBV.directions.title, lang)}</h2>
            <FBParas text={FBT(FBV.directions.intro, lang)} />
          </div>
          <div className="fbdirs">
            {FBV.directions.items.map((d, i) => (
              <div className="fbdir reveal" key={i}>
                <div className="fbdir__n">{d.n}</div>
                <h3 className="fbdir__t">{FBT(d.t, lang)}</h3>
                <span className="fbdir__tone">{FBT(d.tone, lang)}</span>
                <p className="fbdir__d">{FBT(d.d, lang)}</p>
              </div>
            ))}
          </div>
          <div className="fbshot reveal">
            <img src={FBIMG('brand-strategy.png')} alt="" />
            <span className="fbshot__cap">{FBT(FBV.directions.diagramCap, lang)}</span>
          </div>
        </div>
      </section>

      {/* Result — navy quote */}
      <section className="fbsec fbsec--navy pb-gap">
        <div className="wrap wrap--wide reveal">
          <div className="fbquote mt-gap">
            <p className="fbeyebrow fbeyebrow--on" style={{ justifyContent: 'center' }}>{FBT(FBV.result.label, lang)}</p>
            <h2 className="fbquote__text">{FBT(FBV.result.quote, lang)}</h2>
            <p className="fbquote__body">{FBT(FBV.result.body, lang)}</p>
          </div>
        </div>
      </section>

      {/* Deliverables */}
      <section className="fbsec">
        <div className="wrap wrap--wide">
          <div className="fbcenter reveal">
            <p className="fbeyebrow" style={{ justifyContent: 'center' }}>{FBT(FBV.deliverables.label, lang)}</p>
          </div>
          <ul className="fbdeliver reveal">
            {FBT(FBV.deliverables.items, lang).map((it, i) => <li key={i}><Icon name="check" />{it}</li>)}
          </ul>
        </div>
      </section>

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

      {/* CTA */}
      <section className="fbcta">
        <div className="wrap wrap--narrow fbcta__inner reveal">
          <h2 className="fbcta__title">{FBT(FBV.ctaTitle, lang)}</h2>
          <button className="fbbtn" onClick={() => go('contact')}>{FBT(FBV.ctaBtn, lang)} <Icon name="arrow-right" /></button>
        </div>
      </section>

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

Object.assign(window, { FubonCaseScreen });