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

// Same pattern again. The Sidepot lobby fills the whole screen, so the
// screen takes the screenshot's own ratio instead of 16:10.
function Sweepstakes() {
  const { wide } = useLayout();
  return <Section id="sweeps" label="04b Sweepstakes" bg="var(--swivel-digital-light-grey)" mark="black">
    <div style={inner('128px', { display: 'grid', gridTemplateColumns: wide ? 'minmax(0, 742fr) minmax(0, 765fr)' : '1fr', columnGap: 'clamp(32px, 5.5cqw, 88px)', rowGap: 56, alignItems: 'stretch' })}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
        <Label>Sweepstakes</Label>
        <h2 style={headline('clamp(40px, 5.2cqw, 88px)')}>Social<br/>sweepstakes,<br/>turnkey.</h2>
        <p style={body('var(--grey-600)')}>Compliant by design. Dual currency, no purchase necessary and AMOE built in. Full KYC, geofencing and payments infrastructure handled on platform.</p>
        <p style={body('var(--grey-600)')}>Add it to your existing site and go multi-product, or launch it as a stand-alone brand. Same platform either way.</p>
        <Cta/>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 56, paddingTop: 20 }}>
        <MacBook src={`${ASSETS}/products/sweeps-lobby.webp`} alt="Sidepot social casino lobby" ratio="1011 / 655" fit="cover"/>
        <Partners logos={[
          { src: `${ASSETS}/partners/casimba.png`, alt: 'Casimba', h: 44 },
          { src: `${ASSETS}/partners/vegas-software.png`, alt: 'Vegas Software', h: 40 },
        ]}/>
      </div>
    </div>
  </Section>;
}

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