<script lang="ts">
  import { getEnhancedImage } from '$lib/enhanced-images';
  import type { PromiseContent } from '$lib/types';

  export let promise: PromiseContent;

  $: promiseEnhanced = getEnhancedImage(promise.imageUrl);
</script>

<section id="promise">
  <div class="promise-inner">
    <div class="promise-text">
      <h2 class="promise-heading">
        <span class="promise-heading-desktop">
          <span class="promise-title-main">{promise.title}</span>
          <br />
          <span class="promise-title-highlight">{promise.subtitle}</span>
        </span>
        <span class="promise-heading-mobile">
          <span class="promise-title-main">{promise.title}</span>
          <span class="promise-title-highlight">{promise.subtitle}</span>
        </span>
      </h2>

      {#each promise.body as paragraph, idx}
        <p>
          {paragraph}
          {#if idx === promise.body.length - 1}
            <strong>{promise.emphasis}</strong>
          {/if}
        </p>
      {/each}

      <a href={promise.cta.href} class="btn btn-green">{promise.cta.label}</a>
    </div>

    <div class="promise-img">
      <div class="promise-img-frame">
        {#if promiseEnhanced}
          <enhanced:img
            src={promiseEnhanced}
            alt={promise.imageAlt}
            loading="lazy"
            decoding="async"
          />
        {:else}
          <img src={promise.imageUrl} alt={promise.imageAlt} loading="lazy" decoding="async" />
        {/if}
      </div>
    </div>
  </div>
</section>

<style>
  .promise-heading-desktop {
    display: block;
  }

  .promise-heading-mobile {
    display: none;
  }

  .promise-heading-mobile .promise-title-main,
  .promise-heading-mobile .promise-title-highlight {
    display: block;
  }

  .promise-title-main {
    color: #0d1a0d;
  }

  .promise-title-highlight {
    position: relative;
    display: inline-block;
    color: #0d1a0d;
  }

  .promise-title-highlight::after {
    content: '';
    position: absolute;
    left: 0;
    right: -6px;
    bottom: -16px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 34' fill='none'%3E%3Cpath d='M4 24C67 10 131 4 198 5c43 1 82 6 118 18' stroke='%23192419' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E")
      center/contain no-repeat;
    transform-origin: left center;
    animation: promise-underline-draw 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
  }

  @keyframes promise-underline-draw {
    0% {
      opacity: 0;
      transform: scaleX(0.2) translateY(6px) rotate(-1.5deg);
    }

    65% {
      opacity: 1;
      transform: scaleX(1.04) translateY(0) rotate(0deg);
    }

    100% {
      opacity: 1;
      transform: scaleX(1) translateY(0) rotate(0deg);
    }
  }

  @media (max-width: 768px) {
    .promise-heading-desktop {
      display: none;
    }

    .promise-heading-mobile {
      display: block;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .promise-title-highlight::after {
      animation: none;
    }
  }
</style>
