<template>
  <footer class="site-footer">
    <div class="container footer-content">
      <div class="footer-brand">
        <img src="/ABBAUF.png" alt="Abbauf Tech Logo" class="footer-logo">
      </div>

      <div class="footer-column">
        <h4>Layanan</h4>
        <ul class="footer-links">
          <li><a href="/template/Pernikahan">Template Undangan Pernikahan</a></li>
          <li><a href="#">Template Undangan Khitan</a></li>
          <li><a href="#">Template Undangan Ulang Tahun</a></li>
        </ul>
      </div>

      <div class="footer-column">
        <h4>Ikuti Kami</h4>
        <ul class="footer-contact-list">
          <li>
            <a href="#" class="social-link">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                <path
                  d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v2.385z" />
              </svg>
              <span>ABBAUF TECH</span>
            </a>
          </li>
          <li>
            <a href="https://instagram.com/abbauftech" target="_blank" class="inline-flex items-center gap-2 font-medium 
            bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500 
            bg-clip-text text-transparent 
            hover:scale-110 transition-all duration-300">
              <!-- Ikon Instagram -->
              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"
                fill="url(#igGradient)">
                <defs>
                  <linearGradient id="igGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" style="stop-color:#8a3ab9" />
                    <stop offset="50%" style="stop-color:#e95950" />
                    <stop offset="100%" style="stop-color:#fccc63" />
                  </linearGradient>
                </defs>
                <path d="M7.75 2h8.5A5.75 5.75 0 0 1 22 7.75v8.5A5.75 5.75 0 0 1 16.25 22h-8.5A5.75 5.75 0 0 1 2  16.25v-8.5A5.75 5.75 0 0 1 7.75 2zm0 1.5A4.25 4.25 0 0 0 3.5 7.75v8.5A4.25  4.25 0 0 0 7.75 20.5h8.5a4.25 4.25 0 0  0 4.25-4.25v-8.5A4.25 4.25 0 0 0 16.25 3.5h-8.5zm4.25 3a5.75 5.75 0 1 1 0  11.5 5.75 5.75 0 0 1 0-11.5zm0 1.5a4.25 4.25 0 1 0 0 8.5 4.25 4.25 0 0 0 0-8.5zm5-2.25a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
              </svg>
              <!-- Nama IG -->
              <span>@abbauftech</span>
            </a>
          </li>


          <li>
            <a href="https://www.linkedin.com/posts/abbauf-tech_abbauftech-digitalstrategy-itconsulting-activity-7277021563982340099-8Byg" class="social-link">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                <path
                  d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z" />
              </svg>
              <span>ABBAUF TECH</span>
            </a>
          </li>
        </ul>
      </div>

      <div class="footer-column footer-contact">
        <h4>Kontak Kami</h4>
        <ul class="footer-contact-list">
          <li>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M0 3v18h24v-18h-24zm21.518 2l-9.518 7.713-9.518-7.713h19.036zm-19.518 14v-11.817l10 8.104 10-8.104v11.817h-20z" />
            </svg>
            <a href="mailto:contact@abbauf.com">contact@abbauf.com</a>
          </li>
          <li>
            <a :href="waUrl" target="_blank"
              class="inline-flex items-center gap-2 hover:text-green-600 transition-colors">
              <!-- Ikon WhatsApp -->
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                <path
                  d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.894 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591  5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198 -.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.14-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579 -.487-.5-.669-.51-.173-.008-.371-.01-.57-.01s-.52.074-.792.372 c-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.626.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29 .173-1.414z" />
              </svg>
              <!-- Nomor WA -->
              <span>+62 878-7711-7847</span>
            </a>
          </li>

          <li>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M12 0c-4.198 0-8 3.403-8 7.602 0 4.198 3.469 9.21 8 16.398 4.531-7.188 8-12.2 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z" />
            </svg>
            <div>
              <strong>Alamat Kantor Pusat</strong>
              <p>APL Tower Central Park Lantai 19 Unit T7, Jalan Letjen S. Parman, Kavling 28, RT. 012/006, Kel. Tanjung
                Duren, Kec. Grogol Petamburan, Jakarta Barat, DKI Jakarta 11470, ID</p>
            </div>
          </li>
          <li>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M12 0c-4.198 0-8 3.403-8 7.602 0 4.198 3.469 9.21 8 16.398 4.531-7.188 8-12.2 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z" />
            </svg>
            <div>
              <strong>Alamat Studio</strong>
              <p>Jl. Adhi Karya No. 57 RT 003 RW 015, Kel. Depok, Kec. Pancoran Mas, Depok 16431</p>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="footer-bottom">
      <p>&copy; 2025 ABBAUF TECH - Hak cipta dilindungi undang-undang</p>
    </div>
  </footer>
</template>

<script setup>

const adminNumber = "62895602603247";
const defaultMessage = "Halo Admin, saya mau tanya tentang undangan digital 🙏";
const waUrl = `https://wa.me/${adminNumber}?text=${encodeURIComponent(defaultMessage)}`;

</script>

<style scoped>
.site-footer {
  width: 100%;
  background-color: #f0f2f5;
  color: #333;
  padding: 50px 0 20px 0;
  font-family: 'Inter', sans-serif;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1.5fr 2.5fr;
  /* Mengatur lebar kolom */
  gap: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid #d9dce1;
}

.footer-logo {
  max-width: 150px;
}

.footer-column h4 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 20px;
  color: #111;
}

.footer-links,
.footer-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a,
.social-link {
  text-decoration: none;
  color: #555;
  transition: color 0.3s ease;
}

.footer-links a:hover,
.social-link:hover {
  color: #0d6efd;
  /* Biru Primer */
}

.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 18px;
  gap: 15px;
  color: #555;
}

.footer-contact-list svg {
  flex-shrink: 0;
  margin-top: 4px;
}

.footer-contact-list a {
  text-decoration: none;
  color: #555;
}

.footer-contact-list a:hover {
  text-decoration: underline;
}

.footer-contact-list strong {
  display: block;
  color: #111;
  font-weight: 600;
  margin-bottom: 4px;
}

.footer-contact-list p {
  margin: 0;
  line-height: 1.6;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  font-size: 0.9rem;
  color: #666;
}

/* Penyesuaian untuk layar kecil (Mobile) */
@media (max-width: 992px) {
  .footer-content {
    grid-template-columns: 1fr 1fr;
    /* 2 kolom di tablet */
  }
}

@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr;
    /* 1 kolom di mobile */
    text-align: center;
  }

  .footer-brand {
    margin-bottom: 20px;
  }

  .footer-logo {
    margin: 0 auto;
    /* Logo di tengah */
  }

  .footer-contact-list li {
    align-items: center;
    text-align: left;
  }
}
</style>