<script>
  import { resolve } from '$app/paths';
  import { PUBLIC_IMAGE_BASE_URL } from '$env/static/public';
  import { t } from '$lib/translations';
  import { isMobile } from '$lib/utils/isMobile';

  const backgroundImage = isMobile()
    ? `${PUBLIC_IMAGE_BASE_URL}/t/f_webp/embroidery-viewer/hero-mobile.webp`
    : `${PUBLIC_IMAGE_BASE_URL}/t/f_webp,w_1920,h_1080/embroidery-viewer/hero.webp`;
</script>

<section
  id="hero"
  style={`background: url(${backgroundImage}) center/cover no-repeat`}
>
  <div class="overlay">
    <h1>{$t('hero.title')}</h1>
    <p>{$t('hero.description')}</p>

    <a class="organic-btn" href={resolve('/viewer')}>{$t('hero.cta')}</a>
  </div>
</section>

<style>
  #hero {
    position: relative;
    z-index: 0;
    min-height: 100vh;
    display: flex;
  }

  .overlay {
    display: flex;
    flex-direction: column;
    max-width: 800px;
    z-index: 1;
    padding-left: 100px;
    padding-top: 130px;
  }

  h1 {
    font-size: clamp(3.5rem, 4vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
  }

  p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }

  @media (max-width: 1350px) {
    h1 {
      font-size: clamp(3.3rem, 4vw, 3.3rem);
    }
  }

  @media (max-width: 1280px) {
    h1 {
      font-size: clamp(3rem, 4vw, 3rem);
    }

    p {
      font-size: 1.1rem;
    }
  }

  @media (max-width: 1180px) {
    h1 {
      font-size: clamp(3rem, 4vw, 3rem);
    }
  }

  @media (max-width: 768px) {
    h1 {
      font-size: clamp(2rem, 4vw, 2rem);
    }
    p {
      margin-top: 0;
    }

    #hero {
      background-size: contain !important;
      background-position: bottom !important;
    }

    .overlay {
      width: 100%;
      padding-top: 100px;
      padding-left: 0;
      height: 100vh;
      padding-left: 20px;
      padding-right: 20px;
    }
  }
</style>
