/* Careers. One page. SFIA-framed, four bands per practice, partner-led. */

const PRACTICES = [
  {
    name: 'Assurance',
    bands: [
      { band: 'Executive',  note: 'Leads the firm\'s most sensitive assessment mandates; carries the relationships with departmental CIOs and CISOs; final signatory on the written record.' },
      { band: 'Principal',  note: 'Leads complex assurance engagements end to end; sets the methodology the practice follows.' },
      { band: 'Consultant', note: 'Owns assessment workstreams; conducts technical control testing; drafts the written findings the partner signs.' },
      { band: 'Analyst',    note: 'Supports assessment work under a consultant: evidences controls, runs documentary review, and prepares draft findings.' },
    ],
  },
  {
    name: 'Architecture',
    bands: [
      { band: 'Executive',  note: 'Chairs design authority for the firm\'s largest engagements; arbitrates between security, platform, and programme risk at the most senior level.' },
      { band: 'Principal',  note: 'Leads enterprise architecture engagements for systems of national consequence; owns the reference architectures.' },
      { band: 'Consultant', note: 'Architects identity, network, platform, and data components within a broader engagement; produces solution designs and threat models.' },
      { band: 'Analyst',    note: 'Develops architectural artefacts under supervision: pattern research, current-state assessment, and maintenance of the design record.' },
    ],
  },
  {
    name: 'Delivery',
    bands: [
      { band: 'Executive',  note: 'Leads programme recovery and PMO design mandates; the partner the department calls when a programme is in difficulty.' },
      { band: 'Principal',  note: 'Leads programmes and portfolios end to end; designs the governance, sets the cadence, and reports to the steering committee.' },
      { band: 'Consultant', note: 'Runs projects within a programme; owns scope, schedule, risk, and the weekly engagement with the department\'s project board.' },
      { band: 'Analyst',    note: 'Supports project leadership with planning, reporting, and risk management; the path from graduate intake into the consultant cadre.' },
    ],
  },
];

function Careers() {
  return (
    <main data-screen-label="Careers">
      <section className="section section--paper" style={{ paddingBottom: 24 }}>
        <div className="section__inner">
          <div className="kicker" style={{ marginBottom: 24 }}>Careers</div>
          <h1 className="h1" style={{ maxWidth: '22ch', fontSize: 'clamp(40px, 5.5vw, 72px)' }}>
            <em style={{ fontStyle: 'italic', color: 'var(--bronze-deep)' }}>Senior</em> work, at every seniority.
          </h1>
          <p className="lede" style={{ marginTop: 24, maxWidth: '60ch' }}>
            The firm hires against the Skills Framework for the Information Age (SFIA).
            Across each of the three practices the firm is always interested in
            Executives, Principals, Consultants, and Analysts, each reporting to
            the relevant practice partner.
          </p>
        </div>
      </section>

      <section className="section section--bone" data-screen-label="Bands">
        <div className="section__inner">
          <div className="cap-grid cap-grid--three">
            {PRACTICES.map((p, i) => (
              <div key={p.name} className="cap-row" style={{ cursor: 'default', display: 'block' }}>
                <div className="kicker" style={{ marginBottom: 12, color: 'var(--ink-3)' }}>
                  0{i + 1}  ·  {p.name}
                </div>
                <h3 className="cap-row__title" style={{ marginBottom: 18 }}>
                  Reporting to the Partner, {p.name}.
                </h3>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                  {p.bands.map((b) => (
                    <li key={b.band} style={{
                      padding: '14px 0', borderTop: '1px solid var(--rule)',
                      display: 'block',
                    }}>
                      <div className="mono" style={{
                        fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase',
                        color: 'var(--bronze)', marginBottom: 6,
                      }}>{b.band}</div>
                      <div className="body-sm" style={{ color: 'var(--ink-3)', margin: 0 }}>{b.note}</div>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section section--ink" data-screen-label="How to apply">
        <div className="section__inner" style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64, alignItems: 'start' }}>
          <div>
            <div className="kicker" style={{ color: 'var(--bronze-soft)' }}>How to apply</div>
            <h2 className="h2" style={{ color: 'var(--bone)', marginTop: 12, maxWidth: '16ch' }}>
              A single letter.
            </h2>
          </div>
          <div>
            <p className="lede" style={{ color: 'var(--bone)', opacity: 0.9, marginTop: 0 }}>
              Address the partner of the relevant practice. State the SFIA level
              and band you are applying at, attach a curriculum vitae, and tell
              us, in one paragraph, why this firm.
            </p>
            <dl style={{ marginTop: 32, color: 'var(--bone)' }}>
              <dt className="kicker" style={{ color: 'var(--bronze-soft)', marginTop: 16 }}>By post</dt>
              <dd style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.7, margin: '6px 0 0' }}>
                Hiring Partner, Five Eyes Consulting<br/>
                Level 4, 15 Moore Street, Canberra ACT 2601
              </dd>
              <dt className="kicker" style={{ color: 'var(--bronze-soft)', marginTop: 18 }}>By email</dt>
              <dd style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.7, margin: '6px 0 0' }}>
                careers@fiveeyes.com.au
              </dd>
            </dl>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { Careers });