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

// Same pattern as Card rips, with the product in a MacBook frame. The
// screenshot is nearly square, so it sits uncropped in the 16:10 screen with
// black filling the sides.
function PredictionMarkets() {
  const { wide } = useLayout();
  return <Section id="prediction" label="03b Prediction markets" bg="var(--swivel-white)" mark="black">
    <div style={inner('128px', { display: 'grid', gridTemplateColumns: wide ? 'minmax(0, 641fr) minmax(0, 766fr)' : '1fr', columnGap: 'clamp(40px, 9.5cqw, 144px)', rowGap: 56, alignItems: 'stretch' })}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
        <Label>New product</Label>
        <h2 style={headline('clamp(44px, 6cqw, 96px)')}>Prediction markets, turnkey.</h2>
        <p style={body('var(--grey-600)')}>Players trade yes or no contracts on sports, crypto and politics. Prices move with the crowd, and every position settles the moment the event does.</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/prediction-market.png`} alt="Pro Football Champion prediction market"/>
        <Partners gap={10} logos={[
          { src: `${ASSETS}/partners/prophetx.png`, alt: 'ProphetX', h: 28 },
          { src: `${ASSETS}/partners/cryptocom.png`, alt: 'Crypto.com', h: 29 },
        ]}/>
      </div>
    </div>
  </Section>;
}

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