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

  export let instagram: HomePageContent['instagram'];

</script>

<aside id="instagram" aria-label="Follow Goodwalk on Instagram">
  <div class="instagram-stage">
    <div class="instagram-panel">
      <div class="instagram-copy">
        <span class="eyebrow instagram-kicker">Daily walks, happy dogs</span>
        <h2>{instagram.title}</h2>
        <p class="instagram-blurb">See our dogs in action — walks, play, and happy pups</p>
        <a href={instagram.href} target="_blank" rel="noopener" class="btn btn-green instagram-button">
          <Icon name="fab fa-instagram" />
          {instagram.label}
        </a>
      </div>
    </div>

    <div class="instagram-dog-wrap" aria-hidden="true">
      <enhanced:img src="$lib/images/dog-cutout.png" alt="" class="instagram-dog" loading="lazy" decoding="async" />
    </div>
  </div>
</aside>

<style>
  #instagram {
    overflow: hidden;
    padding-bottom: 40px;
  }

  .instagram-stage {
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
  }

  .instagram-panel {
    position: relative;
    min-height: 150px;
    padding: 24px 320px 24px 44px;
    border-radius: 28px;
    background:
      radial-gradient(circle at top left, rgba(255, 255, 255, 0.52), transparent 42%),
      linear-gradient(135deg, rgba(255, 252, 242, 0.98), rgba(255, 243, 198, 0.96));
    box-shadow:
      inset 0 0 0 1px rgba(17, 20, 24, 0.06),
      0 26px 50px rgba(106, 80, 16, 0.14);
    overflow: visible;
  }

  .instagram-copy {
    max-width: 580px;
    margin: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .instagram-kicker {
    /* All visual styling comes from the shared .eyebrow utility. */
    display: inline-block;
    margin: 0 0 10px;
  }

  .instagram-copy :global(h2) {
    max-width: none;
    margin: 0 0 6px;
    font-size: 22px;
    line-height: 1.2;
  }

  .instagram-blurb {
    max-width: 520px;
    margin: 0;
    font-size: 14px;
  }

  .instagram-button {
    margin-top: 14px;
    position: relative;
    z-index: 1;
  }

  .instagram-dog-wrap {
    position: absolute;
    right: -56px;
    bottom: -14px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 380px;
    pointer-events: none;
    z-index: 0;
  }

  .instagram-dog {
    display: block;
    width: 100%;
    height: auto;
  }

  @media (min-width: 1800px) {
    .instagram-stage {
      max-width: 1144px;
    }
  }

  @media (max-width: 768px) {
    #instagram {
      padding-bottom: 120px;
    }

    .instagram-panel {
      padding: 30px 24px 180px;
      border-radius: 28px;
      min-height: 0;
    }

    .instagram-copy {
      max-width: none;
      margin: 0 auto;
      text-align: center;
      align-items: center;
    }

    .instagram-copy :global(h2) {
      max-width: none;
      font-size: inherit;
      line-height: inherit;
    }

    .instagram-blurb {
      max-width: none;
      font-size: inherit;
      margin-left: auto;
      margin-right: auto;
    }

    .instagram-button {
      margin-top: 24px;
    }

    .instagram-dog-wrap {
      left: 50%;
      right: auto;
      bottom: -96px;
      width: min(300px, calc(100% - 32px));
      transform: translateX(-50%);
    }

    .instagram-dog {
      width: 100%;
    }
  }
</style>
