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

const BENEFITS = [
  ['01', 'Acquire once', 'One CPA buys a player for every product.'],
  ['02', 'Cross-sell', 'Sweeps player rips a card. Card ripper backs a game.'],
  ['03', 'Raise LTV', 'More products per player, more of the wallet.'],
  ['04', 'Keep longer', 'Always another reason to come back.'],
];

// Headline and numbered benefits on the left, the glass S on the right. The
// render's black backdrop is blended away with `screen` on the black ground.
function MultiVertical() {
  return <Section id="revenue" label="04 Multi vertical" bg="var(--swivel-signal-black)" color="var(--swivel-white)" mark="yellow">
    <div style={inner('128px', { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 400px), 1fr))', gap: 64, alignItems: 'center' })}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 40 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <Label white>Multi vertical</Label>
          <h2 style={headline('clamp(44px, 5.5cqw, 88px)', { color: 'var(--swivel-white)', textWrap: 'balance' })}>One brand. <span style={{ color: 'var(--swivel-portal-yellow)' }}>Multiple verticals.</span></h2>
          <p style={body('var(--grey-300)')}>Launch more verticals and capture more of each player's entertainment wallet while lowering your cost to acquire them.</p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', borderBottom: '1px solid var(--grey-800)' }}>
          {BENEFITS.map(([n, title, text]) => <div key={n} style={{ display: 'grid', gridTemplateColumns: '40px minmax(0, 1fr)', gap: 16, alignItems: 'baseline', padding: '18px 0', borderTop: '1px solid var(--grey-800)' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12, letterSpacing: '0.14em', color: 'var(--swivel-portal-yellow)' }}>{n}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(22px, 2.2cqw, 30px)', lineHeight: 1, letterSpacing: '-0.02em', textTransform: 'uppercase', color: 'var(--swivel-white)' }}>{title}</div>
              <p style={{ margin: 0, fontSize: 16, lineHeight: 1.5, color: 'var(--grey-400)' }}>{text}</p>
            </div>
          </div>)}
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img src={`${ASSETS}/brand/s-monogram-glass.webp`} alt="Swivel S monogram" style={{ width: '100%', maxWidth: 620, height: 'auto', display: 'block', mixBlendMode: 'screen' }}/>
      </div>
    </div>
  </Section>;
}

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