/* Seoul Bibimbap Bar — case study screen (playful navy/red/sky theme) */
const SV = window.XH_SEOUL;
const STr = window.tr;
const SIMG = (f) => window.R('seoul/' + f);
function SParas({ text }) { return (text || '').split('\n\n').map((p, i) => <p className="scase__p" key={i}>{p}</p>); }

function SeoulCaseScreen({ go, lang }) {
  const ref = useReveal();
  return (
    <div ref={ref} className="scase">
      {/* Hero — split: copy left, food banner right */}
      <header className="shero">
        <div className="shero__pattern" style={{ backgroundImage: 'url(' + SIMG('pattern.png') + ')' }}></div>
        <div className="wrap wrap--wide">
          <button className="sback" onClick={() => go('work')}><Icon name="arrow-left" /> {STr(SV.back, lang)}</button>
          <img className="shero__logo" src={SIMG('logo.png')} alt="SEOUL Bibimbap Bar" />
          <div className="shero__grid">
            <div className="shero__text">
              <div className="shero__meta">
                <span className="schip">{STr(SV.industry, lang)}</span>
                <span className="shero__year">{SV.year}</span>
              </div>
              <p className="smotto">{STr(SV.motto, lang)}</p>
              <h1 className="shero__title mt-gap">{STr(SV.hero.title, lang)}</h1>
              <p className="shero__sub">{STr(SV.hero.sub, lang)}</p>
              <p className="shero__svc">{STr(SV.services, lang)} · {SV.url}</p>
            </div>
            <div className="shero__media reveal">
              <img src={SIMG('banner.png')} alt="Seoul bibimbap" />
            </div>
          </div>
        </div>
      </header>

      {/* Background */}
      <section className="ssec pb-gap">
        <div className="wrap wrap--narrow reveal">
          <p className="seyebrow">{STr(SV.background.label, lang)}</p>
          <h2 className="sh2 mt-gap">{STr(SV.background.title, lang)}</h2>
          <SParas text={STr(SV.background.body, lang)} />
        </div>
      </section>

      {/* Challenge — navy band */}
      <section className="ssec ssec--navy pb-gap">
        <div className="wrap wrap--narrow reveal">
          <p className="seyebrow seyebrow--on">{STr(SV.challenge.label, lang)}</p>
          <h2 className="sh2 sh2--on mt-gap">{STr(SV.challenge.title, lang)}</h2>
          <SParas text={STr(SV.challenge.body, lang)} />
        </div>
      </section>

      {/* Big idea — red highlight */}
      <section className="ssec sidea pb-gap">
        <div className="wrap wrap--narrow reveal" style={{ textAlign: 'center' }}>
          <p className="seyebrow" style={{ color: 'var(--s-red)' }}>{STr(SV.idea.label, lang)}</p>
          <h2 className="sidea__title mt-gap">{STr(SV.idea.title, lang)}</h2>
          <p className="sidea__body">{STr(SV.idea.body, lang)}</p>
        </div>
      </section>

      {/* Colour + type system */}
      <section className="ssec ssec--tint pb-gap">
        <div className="wrap wrap--wide">
          <div className="reveal" style={{ marginBottom: 'clamp(2rem,1.5rem + 2vw,3.5rem)' }}>
              <p className="seyebrow">{STr(SV.colors.label, lang)}</p>
            <h2 className="sh2 mt-gap">{STr(SV.colors.title, lang)}</h2>
          </div>
          <div className="scolorlogo reveal">
            <img src={SIMG('logo.png')} alt="SEOUL Bibimbap Bar logo" />
          </div>
          <div className="scolors">
            {SV.colors.items.map((c) => (
              <div className="scolor reveal" key={c.hex}>
                <div className="scolor__chip" style={{ background: c.hex }}></div>
                <b>{STr(c.name, lang)}</b>
              </div>
            ))}
          </div>
          <p className="stype reveal"><Icon name="type" />{STr(SV.colors.type, lang)}</p>
        </div>
      </section>

      {/* Approach — 4 work cards */}
      <section className="ssec pb-gap">
        <div className="wrap wrap--wide">
          <div className="reveal" style={{ marginBottom: 'clamp(2rem,1.5rem + 2vw,3.5rem)' }}>
              <p className="seyebrow">{STr(SV.work.label, lang)}</p>
            <h2 className="sh2 mt-gap">{STr(SV.work.title, lang)}</h2>
          </div>
          <div className="swork">
            {SV.work.items.map((w, i) => (
              <div className={'swork__card swork__card--' + i + ' reveal'} key={i}>
                <div className="swork__icon"><Icon name={w.icon} /></div>
                <h3 className="swork__t">{STr(w.t, lang)}</h3>
                <p className="swork__d">{STr(w.d, lang)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Brand guidelines gallery */}
      <section className="ssec ssec--tint pb-gap">
        <div className="wrap wrap--wide">
          <div className="sguide">
            <img className="reveal" src={SIMG('guide-1.png')} alt="Seoul brand guidelines" />
            <img className="reveal" src={SIMG('guide-2.png')} alt="Seoul brand guidelines" />
          </div>
        </div>
      </section>

      {/* Deliverables + Result */}
      <section className="ssec pb-gap">
        <div className="wrap wrap--wide splanres">
          <div className="splan reveal">
              <p className="seyebrow">{STr(SV.deliverables.label, lang)}</p>
            <h2 className="sh2 mt-gap" style={{ marginBottom: 22 }}>{STr(SV.deliverables.title, lang)}</h2>
            <ul className="slist">
              {STr(SV.deliverables.items, lang).map((it, i) => <li key={i}><Icon name="check" />{it}</li>)}
            </ul>
          </div>
          <div className="sresult reveal">
            <div className="sresult__stat">
              <span className="sresult__num">+{SV.result.stat.num}<i>%</i></span>
              <span className="sresult__label">{STr(SV.result.stat.label, lang)}</span>
            </div>
            <p className="seyebrow" style={{ marginTop: 32 }}>{STr(SV.result.label, lang)}</p>
            <h2 className="sh2 mt-gap">{STr(SV.result.title, lang)}</h2>
            <SParas text={STr(SV.result.body, lang)} />
          </div>
        </div>
      </section>

      <window.CaseServices slug="seoul-restaurant" go={go} lang={lang} />

      {/* CTA */}
      <section className="scta pb-gap">
        <div className="scta__pattern" style={{ backgroundImage: 'url(' + SIMG('pattern.png') + ')' }}></div>
        <div className="wrap wrap--narrow scta__inner reveal">
          <p className="smotto smotto--lg">{STr(SV.motto, lang)}</p>
          <h2 className="scta__title mt-gap">{STr(SV.ctaTitle, lang)}</h2>
          <button className="sbtn" onClick={() => go('contact')}>{STr(SV.ctaBtn, lang)} <Icon name="arrow-right" /></button>
        </div>
      </section>

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

Object.assign(window, { SeoulCaseScreen });