/* Peppertint — case study screen (California cream + cobalt + coral, editorial) */
const PTV = window.XH_PEPPERTINT;
const PTT = window.tr;
const PTIMG = (f) => window.R('peppertint/' + f);
function PTParas({ text }) { return (text || '').split('\n\n').map((p, i) => <p className="ptcase__p" key={i}>{p}</p>); }
function PTChapter({ no, label }) { return (<div className="ptchapter"><span className="ptchapter__no">{no}</span><p className="pteyebrow">{label}</p></div>); }

function PeppertintCaseScreen({ go, lang }) {
  const ref = useReveal();
  const V = PTV;
  return (
    <div ref={ref} className="ptcase">
      {/* Hero */}
      <header className="pthero">
        <div className="wrap wrap--wide">
          <button className="ptback" onClick={() => go('work')}><Icon name="arrow-left" /> {PTT(V.back, lang)}</button>
          <img className="pthero__logo" src={PTIMG('logo.jpg')} alt="Peppertint" />
          <div className="pthero__kicker">
            <span className="ptchip">{PTT(V.kicker, lang)}</span>
            <span className="pthero__cat">{PTT(V.industry, lang)}</span>
            <span className="pthero__year">{V.year} · {V.url}</span>
          </div>
          <h1 className="pthero__lede">{PTT(V.hero.lede, lang)}</h1>
          <p className="pthero__sub">{PTT(V.hero.sub, lang)}</p>
          <div className="pthero__tags">{PTT(V.tags, lang).map((t, i) => <span className="pttag" key={i}>{t}</span>)}</div>
          <div className="ptheadstats reveal">
            {V.headline.stats.map((s, i) => (
              <div className="ptheadstat" key={i}><span className="ptheadstat__num">{s.num}</span><span className="ptheadstat__label">{PTT(s.label, lang)}</span></div>
            ))}
          </div>
        </div>
        <div className="wrap wrap--wide"><div className="pthero__media reveal"><img src={PTIMG('home.png')} alt="Peppertint" /></div></div>
      </header>

      {/* 01 Background */}
      <section className="ptsec">
        <div className="wrap wrap--wide">
          <div className="ptcol reveal">
            <PTChapter no={V.background.no} label={PTT(V.background.label, lang)} />
            <h2 className="pth2">{PTT(V.background.title, lang)}</h2>
            <PTParas text={PTT(V.background.body, lang)} />
          </div>
          <div className="ptgallery mt-gap">
            <div className="ptshot reveal"><img src={PTIMG('p4.jpg')} alt="Peppertint lifestyle" /></div>
            <div className="ptshot reveal"><img src={PTIMG('p6.jpg')} alt="Peppertint product" /></div>
            <div className="ptshot reveal"><img src={PTIMG('p5.jpg')} alt="Peppertint detail" /></div>
          </div>
        </div>
      </section>

      {/* 02 Challenge — sand */}
      <section className="ptsec ptsec--sand pb-gap">
        <div className="wrap wrap--wide">
          <div className="ptcol reveal">
            <PTChapter no={V.challenge.no} label={PTT(V.challenge.label, lang)} />
            <h2 className="pth2">{PTT(V.challenge.title, lang)}</h2>
            <PTParas text={PTT(V.challenge.body, lang)} />
          </div>
          <div className="ptquestion reveal">
            <p className="ptquestion__label">{lang === 'zh' ? '真正要問的問題' : 'The real question'}</p>
            <p className="ptquestion__text">{PTT(V.challenge.question, lang)}</p>
          </div>
        </div>
      </section>

      {/* 03 SKU restructuring */}
      <section className="ptsec">
        <div className="wrap wrap--wide">
          <div className="ptcol reveal">
            <PTChapter no={V.sku.no} label={PTT(V.sku.label, lang)} />
            <h2 className="pth2">{PTT(V.sku.title, lang)}</h2>
            <PTParas text={PTT(V.sku.intro, lang)} />
          </div>
          <div className="ptaxes">
            {V.sku.axes.map((a, i) => (
              <div className="ptaxis reveal" key={i}>
                <div className="ptaxis__ic"><Icon name={a.icon} /></div>
                <h3 className="ptaxis__t">{PTT(a.t, lang)}</h3>
                <div className="ptaxis__items">{PTT(a.items, lang).map((it, j) => <span key={j}>{it}</span>)}</div>
              </div>
            ))}
          </div>
          <div className="ptdata reveal">
            <div className="ptdata__head">
              <p className="ptdata__title">{PTT(V.sku.dataTitle, lang)}</p>
              <p className="ptdata__sub">{PTT(V.sku.dataSub, lang)}</p>
            </div>
            {V.sku.shapeData.map((d, i) => (
              <div className="ptbar" key={i}>
                <span className="ptbar__name">{d.name}</span>
                <div className="ptbar__track"><div className="ptbar__fill" style={{ width: d.pct + '%' }}></div></div>
                <span className="ptbar__val">{d.val}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 04 Content & SEO — cream */}
      <section className="ptsec ptsec--cream pb-gap">
        <div className="wrap wrap--wide">
          <div className="ptcol reveal">
            <PTChapter no={V.content.no} label={PTT(V.content.label, lang)} />
            <h2 className="pth2">{PTT(V.content.title, lang)}</h2>
            <PTParas text={PTT(V.content.body, lang)} />
          </div>
          <div className="ptgallery--2 ptgallery mt-gap">
            <div className="ptshot reveal"><img src={PTIMG('p1.jpg')} alt="Peppertint lookbook" /></div>
            <div className="ptshot reveal"><img src={PTIMG('p7.jpg')} alt="Peppertint editorial" /></div>
          </div>
        </div>
      </section>

      {/* 05 SEM — cobalt */}
      <section className="ptsec ptsec--cobalt pb-gap">
        <div className="wrap wrap--wide">
          <div className="ptcol reveal">
            <PTChapter no={V.sem.no} label={PTT(V.sem.label, lang)} />
            <h2 className="pth2 pth2--on">{PTT(V.sem.title, lang)}</h2>
            <PTParas text={PTT(V.sem.body, lang)} />
          </div>
          <div className="pttable reveal">
            <div className="pttable__row pttable__row--head">
              {PTT(V.sem.headers, lang).map((h, i) => <span key={i} className={i === 2 ? 'pttable__c--cost' : ''}>{h}</span>)}
            </div>
            {V.sem.campaigns.map((c, i) => (
              <div className={'pttable__row' + (c.hl ? ' pttable__row--hl' : '')} key={i}>
                <span className="pttable__c pttable__c--name">{PTT(c.name, lang)}{c.hl && <span className="pttable__badge">{lang === 'zh' ? '最高' : 'TOP'}</span>}</span>
                <span className="pttable__c">{c.clicks}</span>
                <span className="pttable__c pttable__c--cost">{c.cost}</span>
                <span className="pttable__c pttable__c--ctr">{c.ctr}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 06 Social — coral */}
      <section className="ptsec ptsec--coral pb-gap">
        <div className="wrap wrap--wide">
          <div className="ptcol reveal">
            <PTChapter no={V.social.no} label={PTT(V.social.label, lang)} />
            <h2 className="pth2 pth2--on">{PTT(V.social.title, lang)}</h2>
            <PTParas text={PTT(V.social.body, lang)} />
          </div>
          <div className="ptstats">
            {V.social.stats.map((s, i) => (
              <div className="ptstat" key={i}><span className="ptstat__num">{s.num}</span><span className="ptstat__label">{PTT(s.label, lang)}</span></div>
            ))}
          </div>
          <div className="ptgallery mt-gap">
            <div className="ptshot reveal"><img src={PTIMG('p3.jpg')} alt="Peppertint social" /></div>
            <div className="ptshot reveal"><img src={PTIMG('p2.png')} alt="Peppertint collection" /></div>
            <div className="ptshot reveal"><img src={PTIMG('p9.jpg')} alt="Peppertint quiz" /></div>
          </div>
        </div>
      </section>

      {/* 07 Results — sand */}
      <section className="ptsec ptsec--sand pb-gap">
        <div className="wrap wrap--wide">
          <div className="ptcol reveal">
            <PTChapter no={V.results.no} label={PTT(V.results.label, lang)} />
            <h2 className="pth2">{PTT(V.results.title, lang)}</h2>
            <PTParas text={PTT(V.results.intro, lang)} />
          </div>
          <div className="ptresgrid">
            {V.results.grid.map((g, i) => (
              <div className="ptres reveal" key={i}><span className="ptres__num">{g.num}</span><span className="ptres__label">{PTT(g.label, lang)}</span></div>
            ))}
          </div>
          <p className="ptsublabel">{PTT(V.results.marketsLabel, lang)}</p>
          <div className="ptmarkets">
            {V.results.markets.map((m, i) => (
              <div className="ptmarket reveal" key={i}><span className="ptmarket__rank">{m.rank}</span><span className="ptmarket__name">{PTT(m.name, lang)}</span></div>
            ))}
          </div>
          <p className="ptsublabel">{PTT(V.results.bestsellersLabel, lang)}</p>
          <div className="ptbestsellers">{V.results.bestsellers.map((b, i) => <span key={i}>{b}</span>)}</div>
          <p className="ptdevice"><Icon name="smartphone" />{PTT(V.results.deviceNote, lang)}</p>
        </div>
      </section>

      {/* 08 Insight — cobalt */}
      <section className="ptsec ptsec--cobalt pb-gap">
        <div className="wrap wrap--wide reveal">
          <div className="ptinsight">
            <p className="pteyebrow" style={{ color: '#fff', textAlign: 'center' }}>{PTT(V.insight.label, lang)}</p>
            <div className="ptinsight__mark">&ldquo;</div>
            <h2 className="ptinsight__quote">{PTT(V.insight.quote, lang)}</h2>
            <p className="ptinsight__body">{PTT(V.insight.body, lang)}</p>
          </div>
        </div>
      </section>

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

      {/* CTA */}
      <section className="ptcta">
        <div className="wrap wrap--narrow ptcta__inner reveal">
          <h2 className="ptcta__title">{PTT(V.ctaTitle, lang)}</h2>
          <button className="ptbtn" onClick={() => go('contact')}>{PTT(V.ctaBtn, lang)} <Icon name="arrow-right" /></button>
        </div>
      </section>

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

Object.assign(window, { PeppertintCaseScreen });