/* QQ Noodle — case study screen (warm maroon + gold, F&B brand strategy) */
const QQV = window.XH_QQ;
const QQT = window.tr;
const QQIMG = (f) => window.R('qqnoodle/' + f);
function QQParas({ text }) { return (text || '').split('\n\n').map((p, i) => <p className="qqcase__p" key={i}>{p}</p>); }

function QQNoodleCaseScreen({ go, lang }) {
  const ref = useReveal();
  return (
    <div ref={ref} className="qqcase">
      {/* Hero */}
      <header className="qqhero">
        <div className="wrap wrap--wide">
          <button className="qqback" onClick={() => go('work')}><Icon name="arrow-left" /> {QQT(QQV.back, lang)}</button>
          <img className="qqhero__logo" src={QQIMG('logo.jpg')} alt="QQ Noodle House" />
          <div className="qqhero__grid">
            <div>
              <div className="qqhero__meta">
                <span className="qqchip">{QQT(QQV.industry, lang)}</span>
                <span className="qqhero__year">{QQV.year} · {QQV.url}</span>
              </div>
              <h1 className="qqhero__title">{QQT(QQV.hero.title, lang)}</h1>
              <p className="qqhero__sub">{QQT(QQV.hero.sub, lang)}</p>
              <p className="qqhero__svc">{QQT(QQV.services, lang)}</p>
            </div>
            <div className="qqhero__media reveal"><img src={QQIMG('web-home.jpg')} alt="" /></div>
          </div>
        </div>
      </header>

      {/* Brief */}
      <section className="qqsec">
        <div className="wrap wrap--narrow reveal">
          <p className="qqeyebrow">{QQT(QQV.brief.label, lang)}</p>
          <h2 className="qqh2">{QQT(QQV.brief.title, lang)}</h2>
          <QQParas text={QQT(QQV.brief.body, lang)} />
        </div>
      </section>

      {/* Approach — two tracks */}
      <section className="qqsec qqsec--cream pb-gap">
        <div className="wrap wrap--wide">
          <div className="qqblock mt-gap reveal">
            <p className="qqeyebrow">{QQT(QQV.approach.label, lang)}</p>
            <h2 className="qqh2">{QQT(QQV.approach.title, lang)}</h2>
            <p className="qqcase__p">{QQT(QQV.approach.intro, lang)}</p>
          </div>
          <div className="qqphases">
            {QQV.approach.phases.map((p, i) => (
              <div className="qqphase reveal" key={i}>
                <span className="qqphase__tag">{QQT(p.tag, lang)}</span>
                <div className="qqphase__metric">{p.metric}</div>
                <span className="qqphase__metriclabel">{QQT(p.metricLabel, lang)}</span>
                <h3 className="qqphase__name">{QQT(p.name, lang)}</h3>
                <p className="qqphase__d">{QQT(p.d, lang)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* What we found — product gallery + 5 findings */}
      <section className="qqsec">
        <div className="wrap wrap--wide">
          <div className="qqblock reveal" style={{ marginBottom: 'clamp(2rem,1.5rem + 2vw,3rem)' }}>
            <p className="qqeyebrow">{QQT(QQV.findings.label, lang)}</p>
            <h2 className="qqh2">{QQT(QQV.findings.title, lang)}</h2>
          </div>
          <div className="qqshot reveal" style={{ marginTop: 0, marginBottom: 'clamp(2rem,1.5rem + 2vw,3rem)' }}>
            <img src={QQIMG('products.jpg')} alt="" />
            <span className="qqshot__cap">{QQT(QQV.findings.galleryCap, lang)}</span>
          </div>
          <div className="qqfindings">
            {QQV.findings.items.map((f, i) => (
              <div className="qqfind reveal" key={i}>
                <span className="qqfind__stat">{f.stat}</span>
                <h3 className="qqfind__t">{QQT(f.t, lang)}</h3>
                <p className="qqfind__d">{QQT(f.d, lang)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Strategic framework — dual track + idea */}
      <section className="qqsec qqsec--cream pb-gap">
        <div className="wrap wrap--wide">
          <div className="qqblock mt-gap reveal">
            <p className="qqeyebrow">{QQT(QQV.tracks.label, lang)}</p>
            <h2 className="qqh2">{QQT(QQV.tracks.title, lang)}</h2>
            <p className="qqcase__p">{QQT(QQV.tracks.intro, lang)}</p>
          </div>
          <div className="qqtracks">
            {QQV.tracks.items.map((t, i) => (
              <div className="qqtrack reveal" key={i}>
                <span className="qqtrack__n">{QQT(t.n, lang)}</span>
                <h3 className="qqtrack__t">{QQT(t.t, lang)}</h3>
                <span className="qqtrack__tone">{QQT(t.tone, lang)}</span>
                <p className="qqtrack__d">{QQT(t.d, lang)}</p>
              </div>
            ))}
          </div>
          <div className="qqidea reveal">
            <h3 className="qqidea__t">{QQT(QQV.tracks.idea, lang)}</h3>
            <p className="qqidea__sub">{QQT(QQV.tracks.ideaSub, lang)}</p>
          </div>
        </div>
      </section>

      {/* Core positioning — journey */}
      <section className="qqsec">
        <div className="wrap wrap--wide">
          <div className="qqblock reveal">
            <p className="qqeyebrow">{QQT(QQV.journey.label, lang)}</p>
            <h2 className="qqh2">{QQT(QQV.journey.title, lang)}</h2>
            <p className="qqcase__p">{QQT(QQV.journey.body, lang)}</p>
          </div>
          <div className="qqjourney">
            {QQV.journey.steps.map((s, i) => (
              <div className="qqstep reveal" key={i}>
                <span className="qqstep__n">{s.n}</span>
                <h3 className="qqstep__t">{QQT(s.t, lang)}</h3>
                <p className="qqstep__d">{QQT(s.d, lang)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Product innovation — maroon */}
      <section className="qqsec qqsec--maroon pb-gap">
        <div className="wrap wrap--narrow reveal">
          <div className="qqinnov mt-gap">
            <p className="qqeyebrow qqeyebrow--on">{QQT(QQV.innovation.label, lang)}</p>
            <h2 className="qqh2 qqh2--on">{QQT(QQV.innovation.title, lang)}</h2>
            <QQParas text={QQT(QQV.innovation.body, lang)} />
          </div>
        </div>
      </section>

      {/* Brand DNA table */}
      <section className="qqsec">
        <div className="wrap wrap--wide">
          <div className="qqblock reveal">
            <p className="qqeyebrow">{QQT(QQV.dna.label, lang)}</p>
            <h2 className="qqh2">{QQT(QQV.dna.title, lang)}</h2>
          </div>
          <div className="qqdna reveal">
            {QQV.dna.rows.map((r, i) => (
              <div className="qqdna__row" key={i}>
                <div className="qqdna__k">{QQT(r.k, lang)}</div>
                <div className="qqdna__v">{QQT(r.v, lang)}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Result — maroon quote */}
      <section className="qqsec qqsec--maroon pb-gap">
        <div className="wrap wrap--wide reveal">
          <div className="qqquote mt-gap">
            <p className="qqeyebrow qqeyebrow--on" style={{ justifyContent: 'center' }}>{QQT(QQV.result.label, lang)}</p>
            <h2 className="qqquote__text">{QQT(QQV.result.quote, lang)}</h2>
            <p className="qqquote__body">{QQT(QQV.result.body, lang)}</p>
          </div>
        </div>
      </section>

      {/* Deliverables */}
      <section className="qqsec">
        <div className="wrap wrap--wide">
          <div className="qqcenter reveal">
            <p className="qqeyebrow" style={{ justifyContent: 'center' }}>{QQT(QQV.deliverables.label, lang)}</p>
          </div>
          <ul className="qqdeliver reveal">
            {QQT(QQV.deliverables.items, lang).map((it, i) => <li key={i}><Icon name="check" />{it}</li>)}
          </ul>
        </div>
      </section>

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

      {/* CTA */}
      <section className="qqcta">
        <div className="wrap wrap--narrow qqcta__inner reveal">
          <h2 className="qqcta__title">{QQT(QQV.ctaTitle, lang)}</h2>
          <button className="qqbtn" onClick={() => go('contact')}>{QQT(QQV.ctaBtn, lang)} <Icon name="arrow-right" /></button>
        </div>
      </section>

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

Object.assign(window, { QQNoodleCaseScreen });