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

// Text left, graded cards right, partners right-aligned under the cards. The
// 655/585 column split and the text's top offset follow the Figma frame.
function CardRips() {
  const { wide } = useLayout();
  return <Section id="cardrips" label="02 Card rips" bg="var(--swivel-white)">
    <div style={inner('128px', { display: 'grid', gridTemplateColumns: wide ? 'minmax(0, 655fr) minmax(0, 585fr)' : '1fr', columnGap: 'clamp(40px, 9.5cqw, 136px)', rowGap: 56, alignItems: 'start' })}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 24, paddingTop: wide ? 'clamp(32px, 6.6cqw, 96px)' : 0 }}>
        <Label>New product</Label>
        <h2 style={headline('clamp(44px, 6cqw, 96px)')}>Card rips, turnkey.</h2>
        <p style={body('var(--grey-600)')}>Players open digital packs backed by real physical cards. Every pull is a collectible they can sell back instantly or have shipped to their door.</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', alignItems: 'flex-end', gap: 56 }}>
        <img src={`${ASSETS}/products/cardrip-slabs.webp`} alt="PSA graded cards: 2022 Pokémon Giratina V and 1990 Fleer Michael Jordan, both Gem Mint 10" style={{ width: '100%', height: 'auto', display: 'block' }}/>
        <Partners align="flex-end" gap={6} logos={[
          { src: `${ASSETS}/partners/repackz.png`, alt: 'Repackz', h: 20 },
          { src: `${ASSETS}/partners/funmachine.png`, alt: 'Fun Machine', h: 21 },
        ]}/>
      </div>
    </div>
  </Section>;
}

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