(() => {
const { ASSETS, inner, useLayout, Section, headline, Label } = window.SwivelSite;

const PARAGRAPHS = [
  'One PAM covering all verticals. Player management, KYC, risk and payments in a single view, whichever product they are playing.',
  'Your control room. Switch any vertical on or off by state or market, with the regulatory rules applied for you. When regulations change, you flip a switch, and the product is live or paused for players in that state the same day.',
  'LiveOps for real-time monetisation, CRM and a bonus engine. Data visualisation to see what is working, and financial reporting to close the books.',
  'Fully compliant. Every product, every state, every market.',
];

// Text left, three stacked images aligned to the right margin.
function BackOffice() {
  const { wide } = useLayout();
  return <Section id="backoffice" label="06 Back office" bg="var(--swivel-digital-light-grey)" mark="black">
    <div style={inner('128px', { display: 'grid', gridTemplateColumns: wide ? 'minmax(0, 655fr) minmax(0, 585fr)' : '1fr', gap: 'clamp(40px, 6cqw, 112px)', alignItems: 'center' })}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
        <Label tone="brand">The back office</Label>
        <h2 style={headline('clamp(40px, 5cqw, 80px)', { lineHeight: 0.94, maxWidth: '12ch' })}>One back office runs everything.</h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 28, marginTop: 16, maxWidth: '40ch' }}>
          {PARAGRAPHS.map((p) => <p key={p} style={{ fontSize: 20, lineHeight: 1.5, color: 'var(--grey-600)', margin: 0 }}>{p}</p>)}
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, width: '100%', maxWidth: 460, justifySelf: 'end' }}>
        <img src={`${ASSETS}/backoffice/desk.webp`} width={920} height={624} alt="Swivel operator reviewing a live sweepstakes lobby" loading="lazy" style={{ width: '100%', height: 'auto', display: 'block' }}/>
        <img src={`${ASSETS}/backoffice/screenshot.webp`} width={920} height={625} alt="Swivel back office: sweepstakes packages, platform setup" loading="lazy" style={{ width: '100%', height: 'auto', display: 'block' }}/>
        <img src={`${ASSETS}/backoffice/team.webp`} width={920} height={625} alt="Swivel team working through a platform configuration" loading="lazy" style={{ width: '100%', height: 'auto', display: 'block' }}/>
      </div>
    </div>
  </Section>;
}

Object.assign(window, { BackOffice });
})();