/* Services. Three terse statements, no offerings lists, no CTA. */

function Services() {
  const services = [
    {
      n: '01',
      title: 'Assurance',
      body: 'Independent assurance against the frameworks the Commonwealth expects its suppliers to meet. The firm conducts the assessment, exercises the controls, and provides the written findings on which the audit committee will act.',
    },
    {
      n: '02',
      title: 'Architecture',
      body: 'Enterprise architecture and secure design for cloud, hybrid, and on-premises environments serving the Commonwealth and the enterprises that supply it. The firm maintains its own reference architectures for the Australian sovereign clouds, and revises them as the underlying services change.',
    },
    {
      n: '03',
      title: 'Delivery',
      body: 'Programme and project leadership through to closeout. The firm leads security uplifts, migrations, and the establishment or recovery of programmes that have run into difficulty. Engagements are bounded; long-term staff augmentation is not undertaken.',
    },
  ];

  return (
    <main data-screen-label="02 Services">
      <section className="section section--paper" style={{ paddingBottom: 24 }}>
        <div className="section__inner">
          <div className="kicker" style={{ marginBottom: 24 }}>Practice</div>
          <h1 className="h1" style={{ maxWidth: '24ch', fontSize: 'clamp(40px, 5.5vw, 72px)' }}>
            The firm advises in three disciplines.
          </h1>
        </div>
      </section>

      <section className="section section--paper" style={{ paddingTop: 24 }}>
        <div className="section__inner" style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
          {services.map((s) => (
            <article key={s.n} style={{
              display: 'grid', gridTemplateColumns: '120px 1fr', gap: 48,
              padding: '56px 0', borderTop: '1px solid var(--ink)',
              alignItems: 'start',
            }}>
              <div style={{
                fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400,
                fontSize: 56, letterSpacing: '-0.04em', color: 'var(--bronze)', lineHeight: 0.9,
              }}>{s.n}</div>
              <div>
                <h2 className="h2" style={{ marginBottom: 18 }}>{s.title}</h2>
                <p className="body" style={{ marginTop: 0, fontSize: 17, lineHeight: 1.65, color: 'var(--ink)', maxWidth: '68ch' }}>{s.body}</p>
              </div>
            </article>
          ))}
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { Services });