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

const quickLinks = [
  { name: 'หน้าแรก', href: '/' },
  { name: 'เกี่ยวกับเรา', href: '/about' },
  { name: 'บริการ', href: '/services' },
  { name: 'สินค้า', href: '/products' },
  { name: 'ติดต่อเรา', href: '/contact' },
];

const services = [
  { name: 'บริการติดตั้ง', href: '/services/installation' },
  { name: 'บริการให้คำปรึกษา', href: '/services/consultation' },
  { name: 'บริการซ่อมบำรุง', href: '/services/maintenance' },
];

const legalLinks = [
  { name: 'นโยบายความเป็นส่วนตัว', href: '/privacy-policy' },
  { name: 'ข้อกำหนดและเงื่อนไข', href: '/terms-and-conditions' },
  { name: 'นโยบายคุกกี้', href: '/cookie-policy' },
];

const socialLinks = [
  { name: 'Facebook', href: 'https://facebook.com', icon: 'facebook', svg: '' },
  { name: 'Line', href: 'https://line.me', icon: 'line', svg: 'line' },
  { name: 'YouTube', href: 'https://youtube.com', icon: 'youtube', svg: '' },
];
---

<footer id="footer-component" class="bg-secondary-900 text-white pt-16 pb-8">
  <div id="footer-container" class="container-custom">
    <!-- Main Footer Content -->
    <div id="footer-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
      <!-- Company Info -->
      <div id="footer-company">
        <div id="footer-logo-container" class="mb-4">
          <img id="footer-logo" src="/images/logo.png" alt="Logo" class="h-12" />
        </div>
        <div id="footer-description">
          <p class="text-secondary-300 mb-4">
            บริษัท ดีล พลัส เทค จำกัด ผู้เชี่ยวชาญด้านระบบท่อและอุปกรณ์ติดตั้งคุณภาพสูง
          </p>
        </div>
        <!-- Social Links -->
        <div id="footer-social">
          <div id="social-links-container" class="flex space-x-4">
            {socialLinks.map((social) => (
              <a id={`social-${social.icon}`} href={social.href} target="_blank" rel="noopener noreferrer" class="w-10 h-10 bg-secondary-800 rounded-full flex items-center justify-center hover:bg-primary-600 transition-colors" aria-label={social.name}>
                {social.svg === 'line' ? (
                  <img src="/images/icons/line.svg" alt="LINE" class="w-5 h-5" />
                ) : (
                  <span class="text-sm font-medium">{social.name[0]}</span>
                )}
              </a>
            ))}
          </div>
        </div>
      </div>
      
      <!-- Quick Links -->
      <div id="footer-quick-links">
        <h3 id="quick-links-title" class="text-lg font-bold mb-4">ลิงก์ด่วน</h3>
        <ul id="quick-links-list" class="space-y-2">
          {quickLinks.map((link, index) => (
            <li>
              <a id={`quick-link-${index}`} href={link.href} class="text-secondary-300 hover:text-white transition-colors">
                {link.name}
              </a>
            </li>
          ))}
        </ul>
      </div>
      
      <!-- Services -->
      <div id="footer-services">
        <h3 id="services-title" class="text-lg font-bold mb-4">บริการ</h3>
        <ul id="services-list" class="space-y-2">
          {services.map((service, index) => (
            <li>
              <a id={`service-link-${index}`} href={service.href} class="text-secondary-300 hover:text-white transition-colors">
                {service.name}
              </a>
            </li>
          ))}
        </ul>
      </div>
      
      <!-- Contact Info -->
      <div id="footer-contact">
        <h3 id="contact-title" class="text-lg font-bold mb-4">ติดต่อเรา</h3>
        <div id="contact-info" class="space-y-3">
          <div id="contact-address" class="flex items-start">
            <span class="text-secondary-400 mr-2">📍</span>
            <span class="text-secondary-300">123 ถนนสุขุมวิท กรุงเทพมหานคร 10110</span>
          </div>
          <div id="contact-phone" class="flex items-center">
            <span class="text-secondary-400 mr-2">📞</span>
            <a href="tel:021234567" class="text-secondary-300 hover:text-white transition-colors">02-123-4567</a>
          </div>
          <div id="contact-email" class="flex items-center">
            <span class="text-secondary-400 mr-2">✉️</span>
            <a href="mailto:info@example.com" class="text-secondary-300 hover:text-white transition-colors">info@example.com</a>
          </div>
          <div id="contact-hours" class="flex items-center">
            <span class="text-secondary-400 mr-2">🕐</span>
            <span class="text-secondary-300">วันจันทร์-เสาร์ 08:00-18:00 น.</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Bottom Footer -->
    <div id="footer-bottom" class="border-t border-secondary-800 pt-8">
      <div id="footer-bottom-content" class="flex flex-col md:flex-row justify-between items-center gap-4">
        <div id="copyright">
          <p class="text-secondary-400 text-sm">
            © {currentYear} บริษัท ดีล พลัส เทค จำกัด สงวนลิขสิทธิ์
          </p>
        </div>
        <div id="footer-legal-links">
          <ul id="legal-links-list" class="flex flex-wrap gap-4 text-sm">
            {legalLinks.map((link, index) => (
              <li>
                <a id={`legal-link-${index}`} href={link.href} class="text-secondary-400 hover:text-white transition-colors">
                  {link.name}
                </a>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  </div>
</footer>