<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';

  import Head from '$lib/components/Head.svelte';
  import DonateIcon from '$lib/components/icons/DonateIcon.svelte';

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

<Head
  title="about.seo.title"
  description="about.seo.description"
  keywords="about.seo.keywords"
  url="about.seo.url"
/>

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

<section id="about-content">
  <div class="embroidery-bg"></div>
  <h1>{$t('about.story.title')}</h1>
  <div class="content-split">
    <div class="split-left">
      <p>{$t('about.story.p1')}</p>
      <p>{$t('about.story.p2')}</p>
      <p style="font-size: 1.7rem;">
        {$t('about.story.quote1')}
      </p>
      <p>{$t('about.story.p3')}</p>
      <p>{$t('about.story.p4')}</p>
      <p style="font-size: 1.7rem;">
        {$t('about.story.quote2')}
      </p>
    </div>
    <div class="split-right">
      <img
        src={`${PUBLIC_IMAGE_BASE_URL}/t/f_webp/embroidery-viewer/woman-sad.webp`}
        style="border: 3px solid white;"
        width={isMobile() ? 300 : 400}
        alt=""
      />
    </div>
  </div>

  <div
    class="content-split"
    style={isMobile() ? 'flex-direction: column-reverse' : ''}
  >
    <div class="split-left" style={isMobile() ? 'align-items: center' : ''}>
      <img
        src={`${PUBLIC_IMAGE_BASE_URL}/t/f_webp/embroidery-viewer/viewer-screenshot.webp`}
        style="border: 3px solid black;"
        width={isMobile() ? 300 : 400}
        alt=""
      />
    </div>
    <div class="split-right" style="align-items: flex-start;">
      <p>{$t('about.product.p1')}</p>
      <p>{$t('about.product.p2')}</p>
      <p>{$t('about.product.p3')}</p>
      <p>{$t('about.product.p4')}</p>

      <p style="font-size: 1.7rem;">
        {$t('about.product.quote')}
      </p>
    </div>
  </div>

  <div class="content-split">
    <div class="split-left">
      <h2>{$t('about.support.title')}</h2>

      <p>{$t('about.support.p1')}</p>
      <p>{$t('about.support.p2')}</p>
      <p>{$t('about.support.p3')}</p>
    </div>

    <div
      class="split-right"
      style="align-items: center; justify-content: center;"
    >
      <DonateIcon color="#ffffff" size={360} />
    </div>
  </div>
  <div class="button-container">
    <a class="organic-btn-secondary" href={resolve('/support-us')}>
      {$t('about.support.cta')}
    </a>
  </div>
</section>

<style>
  .embroidery-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.15;

    background-image: url("data:image/svg+xml,%3Csvg width='600' height='600' viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23ffffff' stroke-width='1.5' fill='none'%3E%3C!-- curved thread lines --%3E%3Cpath d='M50 100 Q150 50 250 120 T450 100' stroke-dasharray='6 6'/%3E%3Cpath d='M100 300 Q200 250 300 320 T500 300' stroke-dasharray='4 8'/%3E%3C!-- small crosses (stitches) --%3E%3Cg stroke-width='2'%3E%3Cpath d='M100 200 l10 10 M110 200 l-10 10'/%3E%3Cpath d='M300 400 l10 10 M310 400 l-10 10'/%3E%3Cpath d='M500 150 l10 10 M510 150 l-10 10'/%3E%3C/g%3E%3C!-- circular embroidery hoop hint --%3E%3Ccircle cx='500' cy='500' r='80' stroke-dasharray='5 10'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 600px 600px;
  }
  .button-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 70px;
  }

  .organic-btn-secondary {
    font-size: 1.3rem;
    padding: 20px 100px;
  }

  h2 {
    color: white;
    margin: 0;
    text-align: center;
    font-size: 2.3rem;
    margin-top: 100px;
    line-height: 1.5;
  }

  .content-split {
    width: 85%;
    display: flex;
    margin: 0 auto;
    padding-top: 150px;
  }

  .split-left {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .split-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
  }

  .split-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
  }

  .heading-container {
    position: relative;
    z-index: 0;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    z-index: 1;
    text-align: center;
    margin-bottom: 100px;
  }

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

  #about-content {
    position: relative; /* IMPORTANT */
    margin: 0;
    background-color: var(--color-primary);
    color: white;
    padding: 100px;
    overflow: hidden;
  }

  #about-content > *:not(.embroidery-bg) {
    position: relative;
    z-index: 1;
  }

  #about-content h1 {
    color: white;
    margin: 0;
    text-align: center;
    font-size: 2.3rem;
  }

  #about-content p {
    font-size: 1.2rem;
    line-height: 1.6;
  }

  @media (max-width: 768px) {
    .heading-container {
      width: 100%;
    }
    .heading-container h1 {
      font-size: clamp(2.8rem, 4vw, 3.5rem);
    }

    .content-split {
      width: 100%;
      flex-direction: column;
      padding-top: 50px;
    }

    #about-content {
      padding: 30px 20px;
      line-height: 1.5;
    }
  }
</style>
