---
const sponsorName = 'Terminal Trove';
const sponsorTagline = 'The $HOME of all things terminal.';
const sponsorLink = 'https://terminaltrove.com/?utm_campaign=github&utm_medium=referral&utm_content=web-check&utm_source=wcgh';

const ctaPreText = 'Get updates on the latest CLI/TUI tools via the';
const ctaLinkHref = 'https://terminaltrove.com/newsletter?utm_campaign=github&utm_medium=referral&utm_content=web-check&utm_source=wcgh';
const ctaLinkText = 'Terminal Trove Newsletter';
const ctaImageSrc = 'https://i.ibb.co/5jJ4bzZ/terminal-trove-cta.png';
---

<div class="sponsored-but-dont-block">
  <div>
    <h5>Sponsored by <a href={sponsorLink}>{sponsorName}</a></h5>
    <p>
      {sponsorTagline}<br>
      {ctaPreText} <a href={ctaLinkHref}>{ctaLinkText}</a>
    </p>
  </div>
  <a href={sponsorLink}>
    <img width="256" src={ctaImageSrc} alt={`Check out ${sponsorName}`} />
  </a>
</div>

<style lang="scss">
  @import '@styles/global.scss';
  .sponsored-but-dont-block {
    background: var(--text-color);
    color: var(--background);
    padding: 2rem;
    border-radius: 3px;
    gap: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    @include tablet-portrait-down {
      flex-wrap: wrap;
    }
    @include for-mobile-only {
      flex-direction: column;
      align-items: center;
    }
    h5, p, a {
      color: var(--background);
    }
    h5 {
      font-size: 1.5rem;
    }
    p {
      font-size: 1.2rem;
      line-height: 1.5;
    }
    a {
      text-decoration: underline;
    }
    img {
      width: 20rem;
      border-radius: 3px;
    }
  }
</style>
