<script lang="ts">
  import Icon from '$lib/components/Icon.svelte';
  import type { IntroContent } from '$lib/types';

  export let intro: IntroContent;

  const stars = Array.from({ length: 5 });
</script>

<div id="intro">
  <div class="intro-inner">
    <div class="intro-trust-badge">
      <div class="intro-trust-mark" aria-hidden="true">
        <Icon name="fab fa-google" />
      </div>

      <div class="intro-trust-copy">
        <p>{intro.text}</p>

        <div class="intro-trust-meta">
          <div class="intro-trust-stars" aria-label="5 star rating">
            {#each stars as _, index}
              <Icon name="fas fa-star" className={`intro-star intro-star-${index + 1}`} />
            {/each}
          </div>

          <a href={intro.reviewCta.href} target="_blank" rel="noopener">
            {intro.reviewCta.label}
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
