/* SpotlessHK — case study screen (navy + cream, professional & approachable) */
const SPV = window.XH_SPOTLESS;
const SPT = window.tr;
const SPIMG = (f) => window.R('spotless/' + f);
function SPParas({ text }) { return (text || '').split('\n\n').map((p, i) => <p className="spcase__p" key={i}>{p}</p>); }

function SpotlessCaseScreen({ go, lang }) {
  const ref = useReveal();
  return (
    <div ref={ref} className="spcase">
      {/* Hero */}
      <header className="sphero">
        <span className="spbubble" style={{ width: 120, height: 120, top: 60, right: '8%' }}></span>
        <span className="spbubble" style={{ width: 60, height: 60, top: 200, right: '20%', opacity: .35 }}></span>
        <div className="wrap wrap--wide">
          <button className="spback" onClick={() => go('work')}><Icon name="arrow-left" /> {SPT(SPV.back, lang)}</button>
          <img className="sphero__logo" src={SPIMG('logo.png')} alt="SpotlessHK" />
          <div className="sphero__meta">
            <span className="spchip">{SPT(SPV.industry, lang)}</span>
            <span className="sphero__year">{SPV.year} · {SPV.url}</span>
          </div>
          <h1 className="sphero__title">{SPT(SPV.hero.title, lang)}</h1>
          <p className="sphero__sub">{SPT(SPV.hero.sub, lang)}</p>
          <div className="sphero__tags">{SPT(SPV.tags, lang).map((t, i) => <span className="sptag" key={i}>{t}</span>)}</div>
          <div className="sphero__media reveal"><img src={SPIMG('home-hero.png')} alt="SpotlessHK homepage" /></div>
        </div>
      </header>

      {/* Background */}
      <section className="spsec">
        <div className="wrap wrap--narrow reveal">
          <p className="speyebrow">{SPT(SPV.background.label, lang)}</p>
          <h2 className="sph2 mt-gap">{SPT(SPV.background.title, lang)}</h2>
          <div className="mt-gap"><SPParas text={SPT(SPV.background.body, lang)} /></div>
        </div>
      </section>

      {/* Challenge — cream, with navy insight band */}
      <section className="spsec spsec--cream pb-gap">
        <div className="wrap wrap--wide">
          <div className="spchallenge reveal">
            <p className="speyebrow">{SPT(SPV.challenge.label, lang)}</p>
            <h2 className="sph2 mt-gap">{SPT(SPV.challenge.title, lang)}</h2>
            <SPParas text={SPT(SPV.challenge.body, lang)} />
            <div className="spinsight">
              <span className="spbubble" style={{ width: 160, height: 160, bottom: -50, right: -30 }}></span>
              <p className="spinsight__main">「{SPT(SPV.challenge.insight, lang)}」</p>
              <p className="spinsight__sub">{SPT(SPV.challenge.insightSub, lang)}</p>
            </div>
          </div>
        </div>
      </section>

      {/* Positioning — 3 qualities */}
      <section className="spsec">
        <div className="wrap wrap--wide">
          <div className="reveal" style={{ maxWidth: 720 }}>
            <p className="speyebrow">{SPT(SPV.positioning.label, lang)}</p>
            <h2 className="sph2 mt-gap">{SPT(SPV.positioning.title, lang)}</h2>
            <SPParas text={SPT(SPV.positioning.body, lang)} />
          </div>
          <div className="spquals">
            {SPV.positioning.qualities.map((q, i) => (
              <div className="spqual reveal" key={i}>
                <div className="spqual__ic"><Icon name={q.icon} /></div>
                <b>{SPT(q.t, lang)}</b><span>{SPT(q.d, lang)}</span>
              </div>
            ))}
          </div>
          <p className="spnote reveal">{SPT(SPV.positioning.note, lang)}</p>
        </div>
      </section>

      {/* Service architecture — 4 pillars (cream) */}
      <section className="spsec spsec--cream pb-gap">
        <div className="wrap wrap--wide">
          <div className="reveal" style={{ maxWidth: 760 }}>
            <p className="speyebrow">{SPT(SPV.pillars.label, lang)}</p>
            <h2 className="sph2 mt-gap">{SPT(SPV.pillars.title, lang)}</h2>
            <p className="spcase__p mt-gap">{SPT(SPV.pillars.intro, lang)}</p>
          </div>
          <div className="sppillars">
            {SPV.pillars.items.map((p, i) => (
              <div className="sppillar reveal" key={i}>
                <div className="sppillar__ic"><Icon name={p.icon} /></div>
                <div>
                  <div className="sppillar__head"><span className="sppillar__n">{p.n}</span><h3 className="sppillar__t">{SPT(p.t, lang)}</h3></div>
                  <p className="sppillar__d">{SPT(p.d, lang)}</p>
                  <div className="sppillar__tags">{SPT(p.tags, lang).map((t, j) => <span key={j}>{t}</span>)}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Commercial extension — navy */}
      <section className="spsec spsec--navy pb-gap">
        <span className="spbubble" style={{ width: 140, height: 140, top: -40, left: '10%', opacity: .08 }}></span>
        <div className="wrap wrap--wide">
          <div className="reveal" style={{ maxWidth: 760 }}>
            <p className="speyebrow speyebrow--on">{SPT(SPV.commercial.label, lang)}</p>
            <h2 className="sph2 sph2--on mt-gap">{SPT(SPV.commercial.title, lang)}</h2>
            <p className="spcase__p mt-gap">{SPT(SPV.commercial.body, lang)}</p>
          </div>
          <div className="spcomm">
            {SPV.commercial.items.map((c, i) => (
              <div className="spcommcard reveal" key={i}>
                <div className="spcommcard__ic"><Icon name="check" /></div>
                <b>{SPT(c.t, lang)}</b>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Website — goals + screenshots */}
      <section className="spsec">
        <div className="wrap wrap--wide">
          <div className="reveal" style={{ maxWidth: 760 }}>
            <p className="speyebrow">{SPT(SPV.web.label, lang)}</p>
            <h2 className="sph2 mt-gap">{SPT(SPV.web.title, lang)}</h2>
          </div>
          <div className="spgoals">
            {SPV.web.goals.map((g, i) => (
              <div className="spgoal reveal" key={i}>
                <div className="spgoal__ic"><Icon name={g.icon} /></div>
                <b>{SPT(g.t, lang)}</b><p>{SPT(g.d, lang)}</p>
              </div>
            ))}
          </div>
          <div className="spshot reveal"><img src={SPIMG('home-2.png')} alt="SpotlessHK services" /></div>
          <div className="spgallery">
            <div className="spshot reveal"><img src={SPIMG('detail-1.png')} alt="Service detail" /><span className="spshot__cap">{lang === 'zh' ? '冷氣服務頁面' : 'AC service page'}</span></div>
            <div className="spshot reveal"><img src={SPIMG('detail-3.png')} alt="Non-toxic cleaning" /><span className="spshot__cap">{lang === 'zh' ? '無毒清洗與成果數據' : 'Non-toxic cleaning & results'}</span></div>
          </div>
        </div>
      </section>

      {/* SOP — mist */}
      <section className="spsec spsec--mist pb-gap">
        <div className="wrap wrap--wide">
          <div className="spsop">
            <div className="reveal">
              <p className="speyebrow">{SPT(SPV.sop.label, lang)}</p>
              <h2 className="sph2 mt-gap">{SPT(SPV.sop.title, lang)}</h2>
              <p className="spcase__p">{SPT(SPV.sop.body, lang)}</p>
            </div>
            <ul className="splist reveal">
              {SPT(SPV.sop.items, lang).map((it, i) => <li key={i}><Icon name="clipboard-check" />{it}</li>)}
            </ul>
          </div>
          <div className="spshot reveal" style={{ marginTop: 'clamp(2rem,1.5rem + 2vw,3rem)' }}><img src={SPIMG('detail-2.png')} alt="SpotlessHK service detail" />
            <span className="spshot__cap">{lang === 'zh' ? '除塵蟎服務頁面' : 'Dust-mite removal service page'}</span></div>
        </div>
      </section>

      {/* Deliverables */}
      <section className="spsec">
        <div className="wrap wrap--wide reveal">
          <p className="speyebrow">{SPT(SPV.deliverables.label, lang)}</p>
          <ul className="spdeliver mt-gap">
            {SPT(SPV.deliverables.items, lang).map((it, i) => <li key={i}><Icon name="check" />{it}</li>)}
          </ul>
        </div>
      </section>

      {/* Insight quote — navy */}
      <section className="spsec spsec--navy pb-gap">
        <span className="spbubble" style={{ width: 180, height: 180, bottom: -60, right: '8%', opacity: .07 }}></span>
        <div className="wrap wrap--wide reveal">
          <div className="spquote">
            <p className="speyebrow speyebrow--on" style={{ justifyContent: 'center' }}>{SPT(SPV.insight.label, lang)}</p>
            <div className="spquote__mark">&ldquo;</div>
            <h2 className="spquote__text">{SPT(SPV.insight.quote, lang)}</h2>
            <p className="spquote__body">{SPT(SPV.insight.body, lang)}</p>
          </div>
        </div>
      </section>

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

      {/* CTA */}
      <section className="spcta">
        <span className="spbubble" style={{ width: 150, height: 150, top: -40, left: '12%', opacity: .12, background: '#fff' }}></span>
        <div className="wrap wrap--narrow spcta__inner reveal">
          <h2 className="spcta__title">{SPT(SPV.ctaTitle, lang)}</h2>
          <button className="spbtn" onClick={() => go('contact')}>{SPT(SPV.ctaBtn, lang)} <Icon name="arrow-right" /></button>
        </div>
      </section>

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

Object.assign(window, { SpotlessCaseScreen });