/* global React, Button */

function CTA({ launchMode }) {
  const isOpen = launchMode === 'open';
  const href = isOpen ? '/signup' : '/#waitlist';
  return (
    <section id="cta" className="xp-cta">
      <h2 className="xp-cta-title">Skills? Piece of cake.</h2>
      <div style={{ display: 'flex', justifyContent: 'center', gap: '0.85rem', flexWrap: 'wrap', marginTop: '1.5rem' }}>
        {isOpen
          ? <Button variant="primary" href={href}>Start a bake</Button>
          : <Button variant="primary" href={href}>Join the waitlist</Button>}
      </div>
      <div style={{
        marginTop: '3rem',
        fontFamily: 'var(--font-mono)',
        fontSize: '0.66rem',
        color: 'var(--text-faint)',
        letterSpacing: '0.14em',
        textTransform: 'uppercase',
      }}>
        — SkillsCake
      </div>
    </section>
  );
}

window.CTA = CTA;