---
// Footer.astro
// High-quality footer with navigation, social links and additional elements

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

// Define categories for footer links
const categories = [
  {
    title: 'Technology',
    links: [
      { name: 'Kubernetes', path: '/blog/category/kubernetes' },
      { name: 'Docker', path: '/blog/category/docker' },
      { name: 'DevOps', path: '/blog/category/devops' },
      { name: 'Networking', path: '/blog/category/networking' },
      { name: 'Storage', path: '/blog/category/storage' }
    ]
  },
  {
    title: 'Resources',
    links: [
      { name: 'K8s Configurations', path: '/resources/kubernetes' },
      { name: 'Docker Compose', path: '/resources/docker-compose' },
      { name: 'Configuration Files', path: '/resources/config-files' },
      { name: 'Infrastructure Code', path: '/resources/iac' },
      { name: 'Tutorials', path: '/resources/tutorials' }
    ]
  },
  {
    title: 'Projects',
    links: [
      { name: 'HomeLab Setup', path: '/projects/homelab' },
      { name: 'Tech Stack', path: '/projects/tech-stack' },
      { name: 'Github Repos', path: '/projects/github' },
      { name: 'Live Services', path: '/projects/services' },
      { name: 'Obsidian Templates', path: '/projects/obsidian' }
    ]
  }
];

// Social links
const socialLinks = [
  { 
    name: 'GitHub', 
    url: 'https://github.com/yourusername', 
    icon: '<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385c.6.105.825-.255.825-.57c0-.285-.015-1.23-.015-2.235c-3.015.555-3.795-.735-4.035-1.41c-.135-.345-.72-1.41-1.23-1.695c-.42-.225-1.02-.78-.015-.795c.945-.015 1.62.87 1.845 1.23c1.08 1.815 2.805 1.305 3.495.99c.105-.78.42-1.305.765-1.605c-2.67-.3-5.46-1.335-5.46-5.925c0-1.305.465-2.385 1.23-3.225c-.12-.3-.54-1.53.12-3.18c0 0 1.005-.315 3.3 1.23c.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23c.66 1.65.24 2.88.12 3.18c.765.84 1.23 1.905 1.23 3.225c0 4.605-2.805 5.625-5.475 5.925c.435.375.81 1.095.81 2.22c0 1.605-.015 2.895-.015 3.3c0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" />'
  },
  { 
    name: 'Twitter', 
    url: 'https://twitter.com/yourusername', 
    icon: '<path d="M23.643 4.937c-.835.37-1.732.62-2.675.733a4.67 4.67 0 0 0 2.048-2.578 9.3 9.3 0 0 1-2.958 1.13 4.66 4.66 0 0 0-7.938 4.25 13.229 13.229 0 0 1-9.602-4.868c-.4.69-.63 1.49-.63 2.342A4.66 4.66 0 0 0 3.96 9.824a4.647 4.647 0 0 1-2.11-.583v.06a4.66 4.66 0 0 0 3.737 4.568 4.692 4.692 0 0 1-2.104.08 4.661 4.661 0 0 0 4.352 3.234 9.348 9.348 0 0 1-5.786 1.995 9.5 9.5 0 0 1-1.112-.065 13.175 13.175 0 0 0 7.14 2.093c8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602a9.47 9.47 0 0 0 2.323-2.41l.002-.003z" />'
  },
  { 
    name: 'LinkedIn', 
    url: 'https://linkedin.com/in/yourusername', 
    icon: '<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z" />'
  },
  { 
    name: 'RSS Feed', 
    url: '/rss.xml', 
    icon: '<path d="M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16M6 19a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>'
  }
];

// Server status for homelab services
const services = [
  { name: 'ArgoBox', status: 'active' },
  { name: 'Git Server', status: 'active' },
  { name: 'Kubernetes', status: 'active' },
  { name: 'Media Server', status: 'active' }
];
---

<footer class="site-footer">
  <!-- Network Lines Animation -->
  <div class="network-lines"></div>
  
  <!-- Floating Gradient Elements -->
  <div class="footer-gradients">
    <div class="gradient-circle circle-1"></div>
    <div class="gradient-circle circle-2"></div>
  </div>
  
  <div class="container">
    <!-- Main Footer Content -->
    <div class="footer-content">
      <!-- Brand Section -->
      <div class="footer-brand">
        <div class="footer-logo">
          <div class="logo-symbol">
            <span class="logo-text">LF</span>
            <div class="logo-glow"></div>
          </div>
          <span class="footer-brand-name">LaForceIT</span>
        </div>
        <p class="footer-tagline">
          Enterprise-grade home lab infrastructure, Kubernetes deployments, and DevOps automation for the modern tech enthusiast.
        </p>
        
        <!-- Homelab Services Status -->
        <div class="service-status">
          <h4 class="status-title">Services Status</h4>
          <div class="status-grid">
            {services.map(service => (
              <div class="status-item">
                <span class={`status-indicator ${service.status}`}></span>
                <span class="status-name">{service.name}</span>
              </div>
            ))}
          </div>
        </div>
        
        <!-- Social Links -->
        <div class="social-links">
          {socialLinks.map(social => (
            <a href={social.url} class="social-link" aria-label={social.name} target="_blank" rel="noopener">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <Fragment set:html={social.icon} />
              </svg>
            </a>
          ))}
        </div>
      </div>
      
      <!-- Category Links -->
      <div class="footer-links-container">
        {categories.map(category => (
          <div class="footer-col">
            <h4 class="footer-col-title">{category.title}</h4>
            <ul class="footer-links">
              {category.links.map(link => (
                <li>
                  <a href={link.path} class="footer-link">{link.name}</a>
                </li>
              ))}
            </ul>
          </div>
        ))}
        
        <!-- Newsletter Signup -->
        <div class="footer-col">
          <h4 class="footer-col-title">Newsletter</h4>
          <p class="footer-newsletter-text">
            Subscribe to get updates on new articles, resources, and projects.
          </p>
          <form class="newsletter-form">
            <div class="newsletter-input-group">
              <input type="email" placeholder="Enter your email" class="newsletter-input" required />
              <button type="submit" class="newsletter-button">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <line x1="22" y1="2" x2="11" y2="13"></line>
                  <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                </svg>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
    
    <!-- Footer Bottom -->
    <div class="footer-bottom">
      <div class="copyright">
        &copy; {currentYear} LaForceIT by Daniel LaForce. All rights reserved.
      </div>
      <div class="footer-meta-links">
        <a href="/privacy" class="meta-link">Privacy Policy</a>
        <span class="link-divider">|</span>
        <a href="/terms" class="meta-link">Terms of Use</a>
        <span class="link-divider">|</span>
        <a href="/sitemap.xml" class="meta-link">Sitemap</a>
      </div>
    </div>
  </div>
</footer>

<style>
  .site-footer {
    background: linear-gradient(0deg, var(--bg-secondary), var(--bg-primary));
    padding: 5rem 0 2rem;
    position: relative;
    border-top: 1px solid var(--border-primary);
    overflow: hidden;
  }
  
  /* Network Lines Animation */
  .network-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    overflow: hidden;
    opacity: 0.5;
  }
  
  .network-lines::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, var(--accent-primary) 50%, transparent 100%);
    animation: network-scan 8s infinite linear;
  }
  
  @keyframes network-scan {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }
  
  /* Floating Gradient Elements */
  .footer-gradients {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
  }
  
  .gradient-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.08;
  }
  
  .circle-1 {
    width: 400px;
    height: 400px;
    background: var(--accent-primary);
    top: -100px;
    left: -150px;
  }
  
  .circle-2 {
    width: 300px;
    height: 300px;
    background: var(--accent-tertiary);
    bottom: -50px;
    right: -100px;
  }
  
  /* Main Footer Content */
  .footer-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    position: relative;
    z-index: 1;
  }
  
  /* Brand Section */
  .footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .footer-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  
  .logo-symbol {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  
  .logo-text {
    font-family: var(--font-mono);
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--bg-primary);
    z-index: 2;
  }
  
  .logo-glow {
    position: absolute;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, var(--accent-primary) 0%, transparent 70%);
    opacity: 0.5;
    filter: blur(15px);
    z-index: 1;
    animation: pulse 4s infinite alternate ease-in-out;
  }
  
  .footer-brand-name {
    font-weight: 600;
    font-size: 1.3rem;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 0.02em;
  }
  
  .footer-tagline {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 350px;
  }
  
  /* Service Status */
  .service-status {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid var(--border-secondary);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
  }
  
  .status-title {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
  }
  
  .status-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  
  .status-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: relative;
  }
  
  .status-indicator.active {
    background: #10b981; /* Green */
  }
  
  .status-indicator.active::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #10b981;
    opacity: 0.5;
    animation: pulse 2s infinite;
  }
  
  .status-indicator.warning {
    background: #f59e0b; /* Amber */
  }
  
  .status-indicator.offline {
    background: #ef4444; /* Red */
  }
  
  .status-name {
    font-size: 0.85rem;
    color: var(--text-secondary);
  }
  
  /* Social Links */
  .social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
  }
  
  .social-link {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(226, 232, 240, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.3s ease;
  }
  
  .social-link:hover {
    background: var(--accent-primary);
    color: var(--bg-primary);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px var(--glow-primary);
  }
  
  /* Footer Links */
  .footer-links-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
  
  .footer-col-title {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    position: relative;
  }
  
  .footer-col-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.5rem;
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  }
  
  .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .footer-links li {
    margin-bottom: 0.75rem;
  }
  
  .footer-link {
    color: var(--text-secondary);
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
  }
  
  .footer-link:hover {
    color: var(--accent-primary);
    transform: translateX(3px);
  }
  
  .footer-link::before {
    content: '→';
    position: absolute;
    left: -18px;
    opacity: 0;
    transition: all 0.3s ease;
    color: var(--accent-primary);
  }
  
  .footer-link:hover::before {
    opacity: 1;
    left: -15px;
  }
  
  /* Newsletter */
  .footer-newsletter-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }
  
  .newsletter-input-group {
    display: flex;
    position: relative;
  }
  
  .newsletter-input {
    width: 100%;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--border-secondary);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: all 0.3s ease;
  }
  
  .newsletter-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--glow-primary);
  }
  
  .newsletter-button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--accent-primary);
    border: none;
    color: var(--bg-primary);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .newsletter-button:hover {
    background: var(--accent-secondary);
    transform: translateY(-50%) scale(1.05);
  }
  
  /* Footer Bottom */
  .footer-bottom {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-tertiary);
    font-size: 0.9rem;
  }
  
  .footer-meta-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .meta-link {
    color: var(--text-tertiary);
    transition: color 0.3s ease;
  }
  
  .meta-link:hover {
    color: var(--text-secondary);
  }
  
  .link-divider {
    color: var(--text-tertiary);
    opacity: 0.5;
  }
  
  @keyframes pulse {
    0% {
      opacity: 0.3;
      transform: scale(0.8);
    }
    100% {
      opacity: 0.6;
      transform: scale(1.2);
    }
  }
  
  /* Responsive Adjustments */
  @media (max-width: 1024px) {
    .footer-content {
      grid-template-columns: 1fr;
      gap: 3rem;
    }
    
    .footer-links-container {
      grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-tagline {
      max-width: 100%;
    }
  }
  
  @media (max-width: 768px) {
    .site-footer {
      padding: 3rem 0 2rem;
    }
    
    .footer-links-container {
      grid-template-columns: 1fr;
      gap: 2rem;
    }
    
    .status-grid {
      grid-template-columns: 1fr;
    }
    
    .footer-bottom {
      flex-direction: column;
      gap: 1rem;
      text-align: center;
    }
  }
</style>

<script>
  // Create animated nodes in footer
  document.addEventListener('DOMContentLoaded', () => {
    const footer = document.querySelector('.site-footer');
    
    if (footer) {
      // Add network node animations
      for (let i = 0; i < 8; i++) {
        const node = document.createElement('div');
        node.className = 'footer-node';
        node.style.cssText = `
          position: absolute;
          width: 2px;
          height: 2px;
          background: rgba(226, 232, 240, 0.2);
          border-radius: 50%;
          left: ${Math.random() * 100}%;
          top: ${Math.random() * 100}%;
          animation: pulse ${4 + Math.random() * 4}s infinite alternate ease-in-out;
          animation-delay: ${Math.random() * 5}s;
        `;
        footer.appendChild(node);
      }
      
      // Newsletter Form Submission
      const newsletterForm = document.querySelector('.newsletter-form');
      if (newsletterForm) {
        newsletterForm.addEventListener('submit', (e) => {
          e.preventDefault();
          const emailInput = newsletterForm.querySelector('input[type="email"]');
          if (emailInput && emailInput.value) {
            alert(`Thank you for subscribing with ${emailInput.value}! We'll send you updates soon.`);
            emailInput.value = '';
          }
        });
      }
    }
  });
</script>