---
const currentYear = new Date().getFullYear();
---

<footer class="site-footer liquid-glass liquidGlass-wrapper">
  <div class="liquidGlass-effect" aria-hidden="true"></div>
  <div class="liquidGlass-tint" aria-hidden="true"></div>
  <div class="liquidGlass-shine" aria-hidden="true"></div>

  <div class="footer-row">
    <a class="footer-brand" href="/" aria-label="MoreminiMore">
      <img src="/images/logos/logo-long-black.png" width="160" height="28" alt="MoreminiMore" />
    </a>

    <a class="footer-link" href="tel:+668****5945">
      <svg class="footer-icon" aria-hidden="true" viewBox="0 0 24 24" focusable="false">
        <path d="M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.3 1.3.4 2.6.6 4 .6.7 0 1.2.5 1.2 1.2v3.5c0 .7-.5 1.2-1.2 1.2C10.6 21.4 2.6 13.4 2.6 3.4c0-.7.5-1.2 1.2-1.2h3.5c.7 0 1.2.5 1.2 1.2 0 1.4.2 2.7.6 4 .1.4 0 .8-.3 1.2l-2.2 2.2Z" />
      </svg>
      <span>080-995-5945</span>
    </a>
    <a class="footer-link" href="mailto:contact@moreminimore.com">
      <svg class="footer-icon" aria-hidden="true" viewBox="0 0 24 24" focusable="false">
        <path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z" />
      </svg>
      <span>contact@moreminimore.com</span>
    </a>
    <a class="footer-link" href="https://line.me/ti/p/@moreminimore" target="_blank" rel="noopener">
      <img class="footer-icon" src="/images/social/line-icon.png" alt="" width="18" height="18" />
      <span>@moreminimore</span>
    </a>
  </div>

  <div class="footer-legal">
    <a href="/privacy/">ความเป็นส่วนตัว</a>
    <span aria-hidden="true">·</span>
    <a href="/terms/">เงื่อนไขการใช้งาน</a>
    <span aria-hidden="true">·</span>
    <span>&copy; {currentYear} MoreminiMore</span>
  </div>
</footer>

<style>
  .site-footer {
    position: relative;
    z-index: auto;
    margin-top: 80px;
    padding: 18px 24px 14px;
    color: var(--ink);
  }

  .footer-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 0 auto;
    font-size: 0.88rem;
  }

  .footer-brand img {
    display: block;
  }

  .footer-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink);
    text-decoration: none;
    transition: opacity .2s var(--ease);
  }

  .footer-icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex: 0 0 auto;
  }

  .footer-link:hover {
    opacity: .6;
  }

  .footer-copy {
    color: var(--muted);
  }

  .footer-legal {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--muted);
  }

  .footer-legal a {
    color: var(--muted);
    text-decoration: none;
    transition: opacity .2s var(--ease);
  }

  .footer-legal a:hover {
    opacity: .6;
  }

  @media (max-width: 640px) {
    .footer-row {
      gap: 12px;
      font-size: 0.8rem;
    }

    .footer-brand img {
      width: 130px;
      height: auto;
    }
  }
</style>
