/* Phil So Good — case study screen (playful pastel, joyful, rounded) */
const PV = window.XH_PSG;
const PT = window.tr;
const PIMG = (f) => window.R('philsogood/' + f);
function PParas({ text }) { return (text || '').split('\n\n').map((p, i) => <p className="pcase__p" key={i}>{p}</p>); }

function PhilSoGoodCaseScreen({ go, lang }) {
  const ref = useReveal();
  return (
    <div ref={ref} className="pcase">
      {/* Hero */}
      <header className="phero">
        <img className="phero__stripes" src={PIMG('stripes.png')} alt="" />
        <div className="wrap wrap--wide">
          <button className="pback" onClick={() => go('work')}><Icon name="arrow-left" /> {PT(PV.back, lang)}</button>
          <div className="phero__inner">
            <div className="phero__meta">
              <span className="pchip">{PT(PV.industry, lang)}</span>
              <span className="phero__year">{PV.year}</span>
            </div>
            <h1 className="phero__title">{PT(PV.hero.title, lang)}</h1>
            <p className="phero__sub">{PT(PV.hero.sub, lang)}</p>
            <div className="phero__platform">to love <i>|</i> to share <i>|</i> to joy</div>
          </div>
          <div className="phero__logo reveal">
            <img src={PIMG('logo.png')} alt="Phil So Good" />
          </div>
        </div>
      </header>

      {/* Background */}
      <section className="psec">
        <div className="wrap wrap--narrow reveal">
          <p className="peyebrow">{PT(PV.background.label, lang)}</p>
          <h2 className="ph2">{PT(PV.background.title, lang)}</h2>
          <PParas text={PT(PV.background.body, lang)} />
        </div>
      </section>

      {/* Challenge — pink */}
      <section className="psec psec--pink pb-gap">
        <div className="wrap wrap--narrow reveal" style={{ padding: '0 var(--gutter)' }}>
          <p className="peyebrow mt-gap">{PT(PV.challenge.label, lang)}</p>
          <h2 className="ph2">{PT(PV.challenge.title, lang)}</h2>
          <PParas text={PT(PV.challenge.body, lang)} />
        </div>
      </section>

      {/* Research + Strategy */}
      <section className="psec psec--tint pb-gap">
        <div className="wrap wrap--wide">
          <div className="pgrid2 mt-gap">
            <div className="pblock reveal">
              <p className="peyebrow">{PT(PV.research.label, lang)}</p>
              <h2 className="ph2">{PT(PV.research.title, lang)}</h2>
              <PParas text={PT(PV.research.body, lang)} />
            </div>
            <div className="pblock reveal">
              <p className="peyebrow">{PT(PV.strategy.label, lang)}</p>
              <h2 className="ph2">{PT(PV.strategy.title, lang)}</h2>
              <PParas text={PT(PV.strategy.body, lang)} />
            </div>
          </div>
        </div>
      </section>

      {/* Logo design */}
      <section className="psec">
        <div className="wrap wrap--wide">
          <div className="plogo">
            <div className="plogo__fig reveal"><img src={PIMG('logo-concept.png')} alt="Phil So Good logo concept" /></div>
            <div className="pblock reveal">
              <p className="peyebrow">{PT(PV.logo.label, lang)}</p>
              <h2 className="ph2">{PT(PV.logo.title, lang)}</h2>
              <PParas text={PT(PV.logo.body, lang)} />
            </div>
          </div>
        </div>
      </section>

      {/* Colour system */}
      <section className="psec psec--tint pb-gap">
        <div className="wrap wrap--wide">
          <div className="pblock mt-gap reveal" style={{ margin: '0 0 clamp(2rem,1.5rem + 2vw,3rem)' }}>
            <p className="peyebrow">{PT(PV.colors.label, lang)}</p>
            <h2 className="ph2">{PT(PV.colors.title, lang)}</h2>
            <PParas text={PT(PV.colors.body, lang)} />
          </div>
          <div className="pcolors reveal">
            <div className="pcolorrow pcolorrow--main">
              {PV.colors.main.map((c, i) => (
                <div className="pcolor" key={i}>
                  <div className="pcolor__chip pcolor__chip--lg" style={{ background: c.hex }}></div>
                  <b>{PT(c.name, lang)}</b>
                </div>
              ))}
            </div>
            <div className="pcolorrow pcolorrow--sub">
              {PV.colors.sub.map((c, i) => (
                <div className="pcolor" key={i}>
                  <div className="pcolor__chip" style={{ background: c.hex }}></div>
                  <b>{PT(c.name, lang)}</b>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Typography */}
      <section className="psec">
        <div className="wrap wrap--wide">
          <div className="pblock reveal" style={{ margin: '0 0 clamp(2rem,1.5rem + 2vw,3rem)' }}>
            <p className="peyebrow">{PT(PV.type.label, lang)}</p>
          </div>
          <div className="ptype">
            {PV.type.fonts.map((f, i) => (
              <div className="ptypecard reveal" key={i}>
                <span className="ptypecard__lang">{PT(f.lang, lang)}</span>
                <div className="ptypecard__name">{f.name}</div>
                <div className="ptypecard__sample">{f.sample}</div>
                <p className="ptypecard__note">{PT(f.note, lang)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Brand elements */}
      <section className="psec psec--tint pb-gap">
        <div className="wrap wrap--wide">
          <div className="pblock mt-gap reveal" style={{ margin: '0 0 clamp(2rem,1.5rem + 2vw,3rem)' }}>
            <p className="peyebrow">{PT(PV.elements.label, lang)}</p>
            <h2 className="ph2">{PT(PV.elements.title, lang)}</h2>
          </div>
          <div className="pelements">
            <div className="pelement reveal">
              <div className="pelement__demo pelement__demo--dots"></div>
              <div className="pelement__body"><b>{PT(PV.elements.items[0].t, lang)}</b><p>{PT(PV.elements.items[0].d, lang)}</p></div>
            </div>
            <div className="pelement reveal">
              <div className="pelement__demo pelement__demo--stripes"></div>
              <div className="pelement__body"><b>{PT(PV.elements.items[1].t, lang)}</b><p>{PT(PV.elements.items[1].d, lang)}</p></div>
            </div>
          </div>
        </div>
      </section>

      {/* IP icons */}
      <section className="psec">
        <div className="wrap wrap--wide">
          <div className="pcenter reveal">
            <p className="peyebrow" style={{ justifyContent: 'center' }}>{PT(PV.icons.label, lang)}</p>
            <h2 className="ph2">{PT(PV.icons.title, lang)}</h2>
            <p className="pcase__p">{PT(PV.icons.body, lang)}</p>
          </div>
          <div className="picons">
            {PV.icons.items.map((ic, i) => (
              <div className="picon reveal" key={i}>
                <div className="picon__badge" style={{ background: ic.color }}><Icon name={ic.icon} /></div>
                <b>{PT(ic.t, lang)}</b>
                <p>{PT(ic.d, lang)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Packaging */}
      <section className="psec psec--pink pb-gap">
        <div className="wrap wrap--wide">
          <div className="ppack mt-gap">
            <div className="ppack__fig reveal"><img src={PIMG('packaging-box.png')} alt="Phil So Good Mixed Nuts packaging" /></div>
            <div className="pblock reveal">
              <p className="peyebrow">{PT(PV.packaging.label, lang)}</p>
              <h2 className="ph2">{PT(PV.packaging.title, lang)}</h2>
              <PParas text={PT(PV.packaging.body, lang)} />
            </div>
          </div>
        </div>
      </section>

      {/* Deliverables */}
      <section className="psec">
        <div className="wrap wrap--wide">
          <div className="pcenter reveal">
            <p className="peyebrow" style={{ justifyContent: 'center' }}>{PT(PV.deliverables.label, lang)}</p>
            <h2 className="ph2">{PT(PV.deliverables.title, lang)}</h2>
          </div>
          <ul className="pdeliver reveal">
            {PT(PV.deliverables.items, lang).map((it, i) => <li key={i}><Icon name="check" />{it}</li>)}
          </ul>
        </div>
      </section>

      {/* Result — brown */}
      <section className="psec psec--brown pb-gap">
        <div className="wrap wrap--narrow reveal" style={{ padding: '0 var(--gutter)' }}>
          <p className="peyebrow peyebrow--on mt-gap">{PT(PV.result.label, lang)}</p>
          <h2 className="ph2 ph2--on">{PT(PV.result.title, lang)}</h2>
          <PParas text={PT(PV.result.body, lang)} />
        </div>
      </section>

      <window.CaseServices slug="phil-so-good" go={go} lang={lang} />

      {/* CTA */}
      <section className="pcta">
        <div className="wrap wrap--narrow pcta__inner reveal">
          <h2 className="pcta__title">{PT(PV.ctaTitle, lang)}</h2>
          <p className="pcta__platform">to love | to share | to joy</p>
          <button className="pbtn" onClick={() => go('contact')}>{PT(PV.ctaBtn, lang)} <Icon name="arrow-right" /></button>
        </div>
      </section>

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

Object.assign(window, { PhilSoGoodCaseScreen });