/* ChillWeb & Automation — case study screen (tech navy + red, data-forward) */
const CWV = window.XH_CW;
const CWT = window.tr;
const CWIMG = (f) => window.R('chillweb/' + f);
function CWParas({ text }) { return (text || '').split('\n\n').map((p, i) => <p className="cwcase__p" key={i}>{p}</p>); }

function ChillWebCaseScreen({ go, lang }) {
  const ref = useReveal();
  return (
    <div ref={ref} className="cwcase">
      {/* Hero */}
      <header className="cwhero">
        <div className="wrap wrap--wide">
          <button className="cwback" onClick={() => go('work')}><Icon name="arrow-left" /> {CWT(CWV.back, lang)}</button>
          <img className="cwhero__logo" src={CWIMG('logo.png')} alt="ChillWeb & Automation" />
          <div className="cwhero__grid">
            <div>
              <div className="cwhero__meta">
                <span className="cwchip">{CWT(CWV.industry, lang)}</span>
                <span className="cwhero__year">{CWV.year} · {CWV.url}</span>
              </div>
              <h1 className="cwhero__title">{CWT(CWV.hero.title, lang)}</h1>
              <p className="cwhero__sub">{CWT(CWV.hero.sub, lang)}</p>
              <p className="cwhero__svc">{CWT(CWV.services, lang)}</p>
            </div>
            <div className="cwhero__media reveal"><img src={CWIMG('casehero.png')} alt="ChillWeb & Automation" /></div>
          </div>
        </div>
      </header>

      {/* Background */}
      <section className="cwsec">
        <div className="wrap wrap--narrow reveal">
          <p className="cweyebrow">{CWT(CWV.background.label, lang)}</p>
          <h2 className="cwh2">{CWT(CWV.background.title, lang)}</h2>
          <CWParas text={CWT(CWV.background.body, lang)} />
        </div>
      </section>

      {/* Challenge — mist */}
      <section className="cwsec cwsec--mist pb-gap">
        <div className="wrap wrap--wide">
          <div className="cwblock mt-gap reveal">
            <p className="cweyebrow">{CWT(CWV.challenge.label, lang)}</p>
            <h2 className="cwh2">{CWT(CWV.challenge.title, lang)}</h2>
            <p className="cwcase__p">{CWT(CWV.challenge.intro, lang)}</p>
          </div>
          <div className="cwchallenge">
            {CWV.challenge.items.map((it, i) => (
              <div className="cwchalcard reveal" key={i}>
                <div className="cwchalcard__ic"><Icon name={it.icon} /></div>
                <b>{CWT(it.t, lang)}</b>
                <p>{CWT(it.d, lang)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Repositioning + pillars */}
      <section className="cwsec">
        <div className="wrap wrap--wide">
          <div className="cwblock reveal" style={{ marginBottom: 'clamp(2rem,1.5rem + 2vw,3rem)' }}>
            <p className="cweyebrow">{CWT(CWV.reposition.label, lang)}</p>
            <h2 className="cwh2">{CWT(CWV.reposition.title, lang)}</h2>
            <CWParas text={CWT(CWV.reposition.body, lang)} />
          </div>
          <p className="cwkicker">{CWT(CWV.reposition.pillarsLabel, lang)}</p>
          <div className="cwpillars reveal">
            {CWV.reposition.pillars.map((p, i) => (
              <div className="cwpillar" key={i}><span className="cwpillar__n">{String(i + 1).padStart(2, '0')}</span><span>{CWT(p, lang)}</span></div>
            ))}
          </div>
          <div className="cwshot reveal"><img src={CWIMG('case-cards.png')} alt="" /><span className="cwshot__cap">chillweb.io · {lang === 'zh' ? '成功案例頁面' : 'Case studies page'}</span></div>
        </div>
      </section>

      {/* Website design — navy */}
      <section className="cwsec cwsec--navy pb-gap">
        <div className="wrap wrap--wide">
          <div className="cwblock mt-gap reveal">
            <p className="cweyebrow cweyebrow--on">{CWT(CWV.design.label, lang)}</p>
            <h2 className="cwh2 cwh2--on">{CWT(CWV.design.title, lang)}</h2>
            <CWParas text={CWT(CWV.design.body, lang)} />
          </div>
          <div className="cwshot reveal" style={{ border: '1px solid rgba(255,255,255,.1)' }}><img src={CWIMG('results-band.png')} alt="" /></div>
        </div>
      </section>

      {/* SEO */}
      <section className="cwsec cwsec--mist pb-gap">
        <div className="wrap wrap--narrow reveal">
          <p className="cweyebrow mt-gap">{CWT(CWV.seo.label, lang)}</p>
          <h2 className="cwh2">{CWT(CWV.seo.title, lang)}</h2>
          <CWParas text={CWT(CWV.seo.body, lang)} />
        </div>
      </section>

      {/* SEM campaigns */}
      <section className="cwsec">
        <div className="wrap wrap--wide">
          <div className="cwblock reveal" style={{ marginBottom: 'clamp(2rem,1.5rem + 2vw,3rem)' }}>
            <p className="cweyebrow">{CWT(CWV.sem.label, lang)} · {CWT(CWV.sem.period, lang)}</p>
            <h2 className="cwh2">{CWT(CWV.sem.title, lang)}</h2>
          </div>
          <div className="cwcamps">
            {CWV.sem.campaigns.map((c, i) => (
              <div className="cwcamp reveal" key={i}>
                <span className="cwcamp__tag">{CWT(c.tag, lang)}</span>
                <h3 className="cwcamp__name">{CWT(c.name, lang)}</h3>
                <div className="cwcamp__metric">{c.metric}</div>
                <span className="cwcamp__metriclabel">{CWT(c.metricLabel, lang)}</span>
                <p className="cwcamp__d">{CWT(c.d, lang)}</p>
              </div>
            ))}
          </div>
          <p className="cwsem__note" style={{ color: 'var(--cw-text)' }}><Icon name="info" style={{ color: 'var(--cw-red)' }} />{CWT(CWV.sem.note, lang)}</p>
        </div>
      </section>

      {/* Findings + GA gallery */}
      <section className="cwsec cwsec--mist pb-gap">
        <div className="wrap wrap--wide">
          <div className="cwblock mt-gap reveal" style={{ marginBottom: 'clamp(2rem,1.5rem + 2vw,3rem)' }}>
            <p className="cweyebrow">{CWT(CWV.findings.label, lang)}</p>
            <h2 className="cwh2">{CWT(CWV.findings.title, lang)}</h2>
          </div>
          <div className="cwgallery reveal" style={{ marginBottom: 'clamp(2rem,1.5rem + 2vw,3rem)' }}>
            <div className="cwshot"><img src={CWIMG('ga-overview.png')} alt="" /><span className="cwshot__cap">{CWT(CWV.findings.galleryCap1, lang)}</span></div>
            <div className="cwshot"><img src={CWIMG('ga-pages.png')} alt="" /><span className="cwshot__cap">{CWT(CWV.findings.galleryCap2, lang)}</span></div>
          </div>
          <div className="cwfindings">
            {CWV.findings.items.map((f, i) => (
              <div className="cwfind reveal" key={i}>
                <span className="cwfind__stat">{f.stat}</span>
                <h3 className="cwfind__t">{CWT(f.t, lang)}</h3>
                <p className="cwfind__d">{CWT(f.d, lang)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Results table */}
      <section className="cwsec">
        <div className="wrap wrap--wide">
          <div className="cwresults">
            <div className="reveal">
              <p className="cweyebrow">{CWT(CWV.results.label, lang)}</p>
              <h2 className="cwh2">{CWT(CWV.results.title, lang)}</h2>
              <CWParas text={CWT(CWV.results.body, lang)} />
            </div>
            <div className="cwtable reveal">
              {CWV.results.rows.map((r, i) => (
                <div className={'cwtable__row' + (r.hl ? ' cwtable__row--hl' : '')} key={i}>
                  <span className="cwtable__metric">{CWT(r.metric, lang)}</span>
                  <span className="cwtable__value">{r.value}</span>
                  <span className="cwtable__delta">{r.delta}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Closing quote — navy */}
      <section className="cwsec cwsec--navy pb-gap">
        <div className="wrap wrap--wide reveal">
          <div className="cwquote mt-gap">
            <p className="cweyebrow cweyebrow--on" style={{ justifyContent: 'center' }}>{CWT(CWV.closing.label, lang)}</p>
            <h2 className="cwquote__text">{CWT(CWV.closing.quote, lang)}</h2>
            <p className="cwquote__body">{CWT(CWV.closing.body, lang)}</p>
          </div>
        </div>
      </section>

      {/* Deliverables */}
      <section className="cwsec">
        <div className="wrap wrap--wide">
          <div className="cwcenter reveal">
            <p className="cweyebrow" style={{ justifyContent: 'center' }}>{CWT(CWV.deliverables.label, lang)}</p>
          </div>
          <ul className="cwdeliver reveal">
            {CWT(CWV.deliverables.items, lang).map((it, i) => <li key={i}><Icon name="check" />{it}</li>)}
          </ul>
        </div>
      </section>

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

      {/* CTA */}
      <section className="cwcta">
        <div className="wrap wrap--narrow cwcta__inner reveal">
          <h2 className="cwcta__title">{CWT(CWV.ctaTitle, lang)}</h2>
          <button className="cwbtn" onClick={() => go('contact')}>{CWT(CWV.ctaBtn, lang)} <Icon name="arrow-right" /></button>
        </div>
      </section>

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

Object.assign(window, { ChillWebCaseScreen });