// Norton-Gauss · Services and Case Study pages

const NG2 = window.NG;

function ServicesPage({ setRoute }) {
  return (
    <div className="page-enter">
      <section className="svc-hero">
        <SubpageMesh side="right" size="lg" />
        <div className="container">
          <span className="eyebrow">Capabilities · 04 pillars</span>
          <h1 style={{ marginTop: 24 }}>What we <em className="serif-em">do.</em></h1>
          <p className="lede big">
            Four capabilities, one operating model. Hyper-automation and Agentic AI lead; cloud & edge and custom software & operations transformation support the automation-first model. Each ships independently, and they reinforce one another in production.
          </p>
        </div>
      </section>

      <section style={{ padding: '40px 0 100px' }}>
        <div className="container">
          {NG2.services.map((s) => (
            <article key={s.id} className="svc-detail">
              <div className="num">{s.num}</div>
              <div>
                <div className="meta">{s.meta}</div>
                <h3>{s.title}.</h3>
                <p>{s.summary}</p>
                <div className="kpi">
                  {s.kpi.map((k, i) => (
                    <div key={i}>
                      <div className="v">{k.v}</div>
                      <div className="k">{k.k}</div>
                    </div>
                  ))}
                </div>
              </div>
              <div className="deliverables">
                <h5>What's included</h5>
                <ul>
                  {s.bullets.map((b, i) => <li key={i}>{b}</li>)}
                </ul>
              </div>
            </article>
          ))}
        </div>
      </section>

      <FinalCTA />
    </div>
  );
}

function CaseStudyPage() {
  const cs = NG2.caseDetail;
  return (
    <div className="page-enter">
      <section className="cs-hero">
        <SubpageMesh side="right" size="md" />
        <div className="container">
          <div className="top">
            <div>
              <span className="eyebrow">{cs.tag}</span>
              <h1 style={{ marginTop: 28 }}>
                {cs.titleA} <em className="serif-em">{cs.titleEm}</em><br/>{cs.titleB}
              </h1>
              <p className="lede big">{cs.subtitle}</p>
            </div>
            <dl className="meta">
              <div><dt>Client</dt><dd>{cs.client}</dd></div>
              <div><dt>Region</dt><dd>{cs.region}</dd></div>
              <div><dt>Duration</dt><dd>{cs.duration}</dd></div>
              <div><dt>Team</dt><dd>{cs.team}</dd></div>
            </dl>
          </div>
        </div>
      </section>

      {cs.sections.map((s, i) => (
        <section className="cs-section" key={i}>
          <div className="container">
            <div className="row">
              <h2>{s.h}.</h2>
              <div className="body">
                {s.body.map((p, j) => <p key={j} dangerouslySetInnerHTML={{ __html: p }} />)}
              </div>
            </div>
          </div>
        </section>
      ))}

      <section className="cs-section">
        <div className="container">
          <div className="row">
            <h2>The results.</h2>
            <div className="body">
              <p>Twelve months post platform go-live, with the operating model embedded in the bank's treasury team and the agent fleet trained on a full close cycle.</p>
              <div className="cs-results-grid">
                {cs.results.map((r, i) => (
                  <div key={i}>
                    <div className="v">{r.v}</div>
                    <div className="k">{r.k}</div>
                    <div className="desc">{r.d}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="cs-quote">
        <div className="container">
          <blockquote>
            <span dangerouslySetInnerHTML={{ __html: cs.quote.text.replace(/own/, '<em>own</em>') }} />
            <span className="who">— {cs.quote.who}</span>
          </blockquote>
        </div>
      </section>

      <section className="cs-section">
        <div className="container">
          <div className="row">
            <h2>The timeline.</h2>
            <div className="body">
              <p>Five phases over fourteen months. The same shape as every Norton-Gauss engagement — Discover, Diagnose, Design, Implement, Scale.</p>
              <div className="cs-timeline">
                {cs.timeline.map((t, i) => (
                  <div key={i} className="step">
                    <div className="phase">{t.phase}</div>
                    <h4>{t.h}</h4>
                    <p>{t.d}</p>
                    <div className="dur">{t.dur}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <FinalCTA />
    </div>
  );
}

Object.assign(window, { ServicesPage, CaseStudyPage });