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

// [url, screenshot, logo, logo height, logo alt, description]
const PROJECTS = [
  ['moonspin.us', 'moonspin.webp', 'moonspin-logo.png', 30, 'Moonspin', 'US social sweepstakes casino.'],
  ['sidepot.us', 'sidepot.webp', 'sidepot-logo.png', 40, 'Sidepot', 'US social sweepstakes casino.'],
  ['nana-win.com', 'nanawin.webp', 'nanawin-logo.png', 40, 'Nana Win', 'Japan social sweepstakes casino.'],
  ['craftygaming.us', 'crafty.webp', 'crafty-logo.png', 24, 'Crafty Gaming', 'US free-to-play social casino.'],
];

function LiveProjects() {
  const { wide } = useLayout();
  return <Section id="live" label="04c Live projects" bg="var(--swivel-signal-black)" color="var(--swivel-white)" mark="yellow">
    <div style={inner('128px', { display: 'flex', flexDirection: 'column', gap: 56 })}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
        <Label white>Live now</Label>
        <h2 style={headline('clamp(44px, 6cqw, 96px)', { color: 'var(--swivel-white)' })}>Built on Swivel.<br/>Live today.</h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: wide ? 'repeat(4, minmax(0, 1fr))' : 'repeat(auto-fit, minmax(min(100%, 240px), 1fr))', gap: 16 }}>
        {PROJECTS.map(([url, shot, logo, h, name, text]) => <a key={url} href={'https://' + url} target="_blank" rel="noopener" style={{ display: 'flex', flexDirection: 'column', borderRadius: 16, overflow: 'hidden', background: 'var(--swivel-signal-black)', border: '1px solid var(--swivel-white)', color: 'var(--swivel-white)', textDecoration: 'none', minWidth: 0 }}>
          <div style={{ aspectRatio: '3 / 2', background: '#0B0B0F', borderBottom: '1px solid var(--swivel-white)' }}>
            <img src={`${ASSETS}/live/${shot}`} alt={`${name} lobby`} loading="lazy" style={{ display: 'block', width: '100%', height: '100%', objectFit: 'cover' }}/>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, padding: '20px 20px 24px' }}>
            <div style={{ height: 40, display: 'flex', alignItems: 'center' }}><img src={`${ASSETS}/live/${logo}`} alt={name} style={{ height: h, width: 'auto', maxWidth: '100%', display: 'block' }}/></div>
            <p style={{ margin: 0, fontSize: 16, lineHeight: 1.5, color: 'var(--swivel-white)' }}>{text}</p>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', display: 'flex', alignItems: 'center', gap: 8, color: 'var(--swivel-white)', flexWrap: 'wrap', wordBreak: 'break-word' }}>{url}<Icon name="arrow-up-right" size={14}/></div>
          </div>
        </a>)}
      </div>
    </div>
  </Section>;
}

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