gw-svelte/src/lib/components/FounderStorySection.svelte

<script lang="ts">
  import { reveal } from '$lib/actions/reveal';
  import Icon from '$lib/components/Icon.svelte';
  import { getEnhancedImage } from '$lib/enhanced-images';
  import type { FounderStoryContent } from '$lib/types';

  export let founderStory: FounderStoryContent;

  const founderStoryParagraphs = [
    'Goodwalk started with my own little dog and the kind of relationship I have always had with animals. Growing up in Italy with a German Shepherd, I saw early on how much joy, comfort, personality, and companionship dogs bring into a home. They are not just pets. They become part of your family and your daily life.',
    'When I moved to Auckland, I noticed a lot of dog walking felt rushed, overcrowded, or impersonal, especially for smaller dogs. So I built Goodwalk around the kind of care I would want for my own dog: familiar faces, safe and social little groups, lots of fun, and genuine relationships with every dog we walk.',
    'The Tiny Gang is built around routine, trust, and dogs having the absolute best part of their day together. Older dogs help younger ones settle in, nervous dogs build confidence, and playful dogs get to burn energy with their friends.',
    'You know exactly who is caring for your dog. Your dog knows who is at the door. And you come home to a happy, fulfilled dog that has had a proper adventure. Ready to join the Tiny Gang?'
  ];

  $: founderStoryEnhanced = getEnhancedImage(founderStory.imageUrl);
</script>

<section id="promise" use:reveal={{ delay: 20 }} class="reveal-block">
  <div class="founder-inner">
    <article class="founder-note">
      <span class="eyebrow founder-kicker">A note from Aless</span>

      <h2 class="founder-heading">
        <span class="founder-heading-main">Hi, Welcome to Goodwalk.</span>
      </h2>

      <div class="founder-body">
        {#each founderStoryParagraphs as paragraph}
          <p>{paragraph}</p>
        {/each}
      </div>

      <div class="founder-signoff">
        <div class="founder-avatar">
          {#if founderStoryEnhanced}
            <enhanced:img
              class="founder-avatar-img"
              src={founderStoryEnhanced}
              alt={founderStory.imageAlt}
              loading="lazy"
              decoding="async"
            />
          {:else}
            <img
              class="founder-avatar-img"
              src={founderStory.imageUrl}
              alt={founderStory.imageAlt}
              loading="lazy"
              decoding="async"
            />
          {/if}
        </div>
        <div class="founder-signoff-text">
          <span class="founder-name">Aless</span>
          <span class="founder-role">Goodwalk founder</span>
        </div>
      </div>

      <a class="founder-contact-note" href="mailto:info@goodwalk.co.nz" aria-label="Email Aless at Goodwalk">
        <span class="founder-contact-wave" aria-hidden="true">👋</span>
        <span>If you are unsure about anything, feel free to email me anytime.</span>
      </a>

      <a href={founderStory.cta.href} class="btn btn-green btn-with-arrow founder-cta">
        {founderStory.cta.label}
        <Icon name="fas fa-arrow-right" />
      </a>
    </article>
  </div>
</section>

<style>
  /* A quiet, letter-style sign-off — left-aligned, one clean panel, no ornament. */
  .founder-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 50px;
  }

  .founder-note {
    max-width: 680px;
    margin: 0 auto;
    padding: 42px 52px 34px;
    background: #fff;
    border: 1px solid rgba(17, 20, 24, 0.08);
    border-radius: 28px;
    box-shadow: var(--shadow-panel-elevated);
  }

  .founder-kicker {
    display: block;
    letter-spacing: 0.14em;
  }

  .founder-heading {
    margin: 0 0 26px;
  }

  .founder-heading-main {
    display: block;
    color: #0d1a0d;
    font-family: var(--font-head);
    font-size: clamp(32px, 3.6vw, 46px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
  }

  .founder-body {
    display: grid;
    gap: 16px;
  }

  .founder-body p {
    margin: 0;
    color: #4c5056;
    font-size: var(--body-copy-size);
    line-height: 1.75;
  }

  .founder-signoff {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(17, 20, 24, 0.08);
  }

  .founder-avatar {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    overflow: hidden;
    border-radius: 50%;
    background: #ede4d2;
    box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.07);
  }

  .founder-avatar-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
  }

  .founder-signoff-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .founder-name {
    color: #0d1a0d;
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
  }

  .founder-role {
    color: var(--gray);
    font-size: 13px;
    line-height: 1.3;
  }

  .founder-cta {
    margin-top: 28px;
  }

  .founder-contact-note {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 12px 16px;
    border-radius: 18px;
    background: rgba(33, 48, 33, 0.05);
    box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.06);
    color: var(--gw-green);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  }

  .founder-contact-wave {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.07);
    font-size: 16px;
    flex: 0 0 auto;
  }

  @media (hover: hover) {
    .founder-contact-note:hover {
      background: rgba(33, 48, 33, 0.08);
      box-shadow:
        inset 0 0 0 1px rgba(17, 20, 24, 0.08),
        0 10px 22px rgba(17, 20, 24, 0.05);
      transform: translateY(-1px);
    }
  }

  @media (max-width: 768px) {
    .founder-inner {
      padding: 0 var(--space-container-x-mobile);
    }

    .founder-note {
      padding: 26px 24px 24px;
      border-radius: 24px;
    }

    .founder-heading {
      margin: 0 0 22px;
      text-align: center;
    }

    .founder-body p {
      font-size: var(--body-copy-size-mobile);
      line-height: 1.7;
    }

    .founder-contact-note {
      display: flex;
      width: 100%;
      font-size: 13px;
      padding: 11px 14px;
      text-align: center;
    }

    .founder-cta {
      width: 100%;
      justify-content: center;
    }
  }
</style>