---
const socialLinks = [
  { name: 'LinkedIn', href: 'https://linkedin.com/in/startup-lx' },
  { name: 'GitHub', href: 'https://github.com/startuplx' }
];

const footerColumns = [
  {
    title: 'Service Packages',
    links: [
      { name: 'Web Development ($200 - $5k)', href: '#services' },
      { name: 'ERP Systems ($1k - $5k)', href: '#services' },
      { name: 'Custom Business Automations', href: '#services' },
      { name: 'Maintenance Retainers ($100/mo)', href: '#pricing' }
    ]
  },
  {
    title: 'Architecture & Engine',
    links: [
      { name: 'Self-Hosted Workflow Engine', href: '#hero' },
      { name: 'ClawHub Skill Registry', href: '#services' },
      { name: 'Stripe Milestone Invoicing', href: '#pricing' },
      { name: 'PostgreSQL & Metabase BI', href: '#kpi-dashboard' }
    ]
  },
  {
    title: 'Company & Contact',
    links: [
      { name: 'Book 15-Min System Audit', href: '#qualification' },
      { name: 'infostartuplx@gmail.com', href: 'mailto:infostartuplx@gmail.com' },
      { name: 'Live Operating Dashboard', href: '#kpi-dashboard' },
      { name: 'Pricing & ROI Blueprint', href: '#pricing' }
    ]
  }
];
---

<footer class="bg-[#07080C] text-slate-400 border-t border-[#1E2330] pt-16 pb-12 relative overflow-hidden">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    
    <div class="grid md:grid-cols-12 gap-10 pb-12 border-b border-[#1E2330]">
      
      <!-- Brand & Mission Column -->
      <div class="md:col-span-4 space-y-4">
        <div class="flex items-center space-x-3">
          <div class="w-9 h-9 rounded-xl bg-gradient-to-tr from-n8n-600 via-n8n-500 to-clawhub-400 p-0.5">
            <div class="w-full h-full bg-[#090A0F] rounded-[10px] flex items-center justify-center">
              <span class="text-lg font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-n8n-400 to-clawhub-400">LX</span>
            </div>
          </div>
          <span class="text-xl font-extrabold text-white tracking-tight">StartupLX</span>
        </div>

        <p class="text-xs text-slate-400 leading-relaxed max-w-sm">
          A high-performance business automation platform engineered to power Web Development, ERP Systems, and self-hosted workflow automations with zero operational friction.
        </p>

        <!-- System Operational Badge -->
        <div class="inline-flex items-center space-x-2 text-xs font-mono bg-[#0E1017] border border-[#1E2330] px-3 py-1.5 rounded-lg text-emerald-400">
          <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
          <span>Automation Engine: 100% Operational</span>
        </div>

        <!-- Direct Email Channel -->
        <div class="pt-1">
          <a href="mailto:infostartuplx@gmail.com" class="inline-flex items-center space-x-2 text-xs font-mono text-slate-300 hover:text-n8n-400 transition-colors">
            <svg class="w-3.5 h-3.5 text-n8n-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
            <span>infostartuplx@gmail.com</span>
          </a>
        </div>
      </div>

      <!-- Links Columns -->
      <div class="md:col-span-8 grid sm:grid-cols-3 gap-8">
        {footerColumns.map((col) => (
          <div>
            <h4 class="text-xs font-mono font-bold text-white uppercase tracking-wider mb-4">{col.title}</h4>
            <ul class="space-y-2.5">
              {col.links.map((link) => (
                <li>
                  <a href={link.href} class="text-xs text-slate-400 hover:text-n8n-400 hover:translate-x-0.5 transition-all">
                    {link.name}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

    </div>

    <!-- Bottom Bar -->
    <div class="pt-8 flex flex-col md:flex-row justify-between items-center text-xs text-slate-500 font-mono space-y-4 md:space-y-0">
      <div>
        &copy; {new Date().getFullYear()} StartupLX. Engineered with n8n & ClawHub design standards.
      </div>

      <div class="flex space-x-6">
        <a href="#services" class="hover:text-slate-300 transition-colors">Privacy Policy</a>
        <a href="#pricing" class="hover:text-slate-300 transition-colors">Terms of Service</a>
        <a href="#qualification" class="hover:text-slate-300 transition-colors">SLA Guarantee</a>
      </div>
    </div>

  </div>
</footer>