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

  export let footer: FooterContent;

  const socialLinks: LinkItem[] = [
    { label: 'Instagram', href: 'https://www.instagram.com/goodwalk.nz/', external: true },
    { label: 'Facebook', href: 'https://facebook.com/goodwalk.nz', external: true },
    { label: 'Google', href: 'https://g.page/r/CUsvrWPhkYrAEB0', external: true }
  ];
</script>

<footer>
  <div class="footer-inner">
    <div class="footer-brand">
      <img
        src="/images/goodwalk-auckland-dog-walking-logo.png"
        alt="Goodwalk – Auckland dog walking service logo"
        class="footer-logo"
        height="28"
      />
      <p>{footer.brandText}</p>
      <div class="social-links">
        <a href={socialLinks[0].href} target="_blank" rel="noopener" aria-label="Instagram">
          <Icon name="fab fa-instagram" />
        </a>
        <a href={socialLinks[1].href} target="_blank" rel="noopener" aria-label="Facebook">
          <Icon name="fab fa-facebook-f" />
        </a>
        <a href={socialLinks[2].href} target="_blank" rel="noopener" aria-label="Google">
          <Icon name="fab fa-google" />
        </a>
      </div>
    </div>

    <div class="footer-explore">
      <p class="footer-col-label">Explore</p>
      <ul class="footer-nav">
        {#each footer.navigationLinks as link}
          <li>
            <a
              href={link.href}
              target={link.external ? '_blank' : undefined}
              rel={link.external ? 'noopener' : undefined}
            >
              {link.label}
            </a>
          </li>
        {/each}
      </ul>
    </div>

    <div class="footer-action">
      <p class="footer-col-label">Get Started</p>
      <a href="/contact-us" class="footer-book-btn">
        Book a Meet &amp; Greet
        <Icon name="fas fa-arrow-right" />
      </a>
      <p class="footer-book-note">Free, no-obligation introduction</p>
      <a
        href="https://g.page/r/CUsvrWPhkYrAEB0/"
        target="_blank"
        rel="noopener"
        class="footer-reviews"
      >
        <Icon name="fab fa-google" />
        <span>See our 5&#9733; Google reviews</span>
      </a>

      {#if footer.email || footer.phone}
        <div class="footer-contact">
          {#if footer.email}
            <a href="mailto:{footer.email}" class="footer-contact-link">
              <Icon name="fas fa-envelope" />
              {footer.email}
            </a>
          {/if}
          {#if footer.phone}
            <a href="tel:{footer.phone.replace(/[^0-9+]/g, '')}" class="footer-contact-link">
              <Icon name="fas fa-phone" />
              {footer.phone}
            </a>
          {/if}
        </div>
      {/if}
    </div>
  </div>

  <div class="footer-bottom">
    <span>{footer.copyright}</span>
    <nav class="footer-legal">
      <a href="/terms-and-conditions">Terms &amp; Conditions</a>
      <a href="/privacy-policy">Privacy Policy</a>
    </nav>
  </div>
</footer>
