/* ============================================================
   PETRI GAMES — Services (playtesting) page
   ============================================================ */

function ServicesPage({ t, lang, setRoute }) {
  const go = (id) => { setRoute(id); window.scrollTo({ top: 0, behavior: 'smooth' }); };
  const sp = t.servicesPage;

  return (
    <div className="page">
      {/* intro */}
      <section className="section" style={{ paddingBottom: 30 }}>
        <div className="shell">
          <div className="svc-intro">
            <Reveal>
              <span className="kicker">{sp.kicker}</span>
              <h2 style={{ fontSize: 'clamp(32px,5vw,58px)', margin: '14px 0 22px', maxWidth: '17ch' }}>{sp.title}</h2>
              <p style={{ color: 'var(--ink-soft)', fontSize: 19, lineHeight: 1.65, maxWidth: 600 }}>{sp.lede}</p>
            </Reveal>
            <Reveal delay={120} style={{ maxWidth: 360, margin: '0 auto', width: '100%' }}>
              <PetriDish seed={41} accentCell="var(--accent)" count={14} big />
            </Reveal>
          </div>

          <Reveal delay={80} className="svc-stats">
            {sp.stats.map((s, i) => (
              <div className="svc-stat" key={i}>
                <div className="svc-stat-num">{s.n}</div>
                <div className="svc-stat-label">{s.l}</div>
              </div>
            ))}
          </Reveal>
        </div>
      </section>

      {/* modes */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="shell">
          <Reveal className="section-head">
            <span className="kicker">{sp.modesKicker}</span>
            <h2>{sp.modesTitle}</h2>
          </Reveal>
          <div className="svc-modes">
            {sp.modes.map((m, i) => (
              <Reveal key={i} delay={i * 80} className="svc-mode" as="div">
                <h4>{m.h}</h4>
                <p>{m.p}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* steps */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="shell">
          <Reveal className="section-head">
            <span className="kicker">{sp.stepsKicker}</span>
            <h2>{sp.stepsTitle}</h2>
          </Reveal>
          <div>
            {sp.steps.map((v, i) => (
              <Reveal key={i} delay={i * 60} className="value-row" as="div">
                <span className="value-num">{String(i + 1).padStart(2, '0')}</span>
                <div>
                  <h4>{v.h}</h4>
                  <p>{v.p}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* case + deliverables */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="shell">
          <div className="svc-case-grid">
            <Reveal className="svc-case">
              <span className="kicker">{sp.caseKicker}</span>
              <h3 className="svc-case-title">{sp.caseTitle}</h3>
              <p className="svc-case-meta">{sp.caseMeta}</p>
              <p className="svc-case-desc">{sp.caseDesc}</p>
              <div className="svc-case-boxes">
                {sp.caseBoxes.map((b, i) => (
                  <div className="svc-case-box" key={i}>
                    <span className="svc-case-box-k">{b.k}</span>
                    <span className="svc-case-box-v">{b.v}</span>
                  </div>
                ))}
              </div>
              <ul className="svc-case-insights">
                {sp.caseInsights.map((ins, i) => (
                  <li key={i}><span className="ins-mark">✦</span><span>{ins}</span></li>
                ))}
              </ul>
            </Reveal>

            <Reveal delay={100}>
              <span className="kicker">{sp.deliverKicker}</span>
              <h3 style={{ fontSize: 'clamp(22px,3vw,30px)', margin: '12px 0 22px' }}>{sp.deliverTitle}</h3>
              <ul className="svc-deliver">
                {sp.deliverables.map((d, i) => (
                  <li key={i}><span className="svc-check">✓</span><span>{d}</span></li>
                ))}
              </ul>
            </Reveal>
          </div>
        </div>
      </section>

      {/* cta band */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="shell">
          <Reveal className="band" style={{ textAlign: 'center' }}>
            <span className="kicker">{sp.ctaTitle}</span>
            <p style={{ color: 'var(--ink-soft)', fontSize: 17, lineHeight: 1.6, maxWidth: '52ch', margin: '14px auto 26px' }}>{sp.ctaDesc}</p>
            <a className="modal-cta" href={sp.ctaHref}>{sp.ctaBtn}</a>
          </Reveal>
        </div>
      </section>

      {/* contact */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="shell">
          <Reveal className="section-head">
            <span className="kicker">{lang === 'ru' ? 'Связаться' : 'Get in touch'}</span>
            <h2>{sp.contactTitle}</h2>
            <p>{sp.contactLede}</p>
          </Reveal>
          <Reveal delay={80}>
            <div className="contact-links" style={{ maxWidth: 520 }}>
              {sp.contactLinks.map((l, i) => (
                <a key={i} className="clink" href={l.href} target="_blank" rel="noreferrer">
                  <div>
                    <span className="ck">{l.k}</span>
                    <div className="cv">{l.v}</div>
                  </div>
                  <span className="arr"><Arrow d="diag" /></span>
                </a>
              ))}
            </div>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ServicesPage });