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

<footer class="bg-[#080a09] text-white pt-32 pb-8 px-8 md:px-16 border-t border-white/10 relative overflow-hidden -mt-px">
  <div class="max-w-7xl mx-auto relative z-10">
    
    <!-- Top Grid -->
    <div class="grid md:grid-cols-12 gap-16 mb-32">
      <!-- Brand / Contact -->
      <div class="md:col-span-5">
        <h3 class="text-2xl font-serif mb-8">TitanFlow</h3>
        <p class="text-white/50 leading-relaxed mb-8 max-w-sm">
          Unlocking the full potential of Service Titan with intelligence, not complexity.
        </p>
        <a href="mailto:hello@titanflow.com" class="text-accent hover:text-white transition-colors border-b border-accent/30 hover:border-white pb-1 inline-block">
          hello@titanflow.com
        </a>
      </div>

      <!-- Links 1 -->
      <div class="md:col-span-2 md:col-start-7">
        <h4 class="text-mono text-xs uppercase tracking-widest text-white/30 mb-8">Product</h4>
        <ul class="space-y-4">
          <li><a href="#features" class="text-white/60 hover:text-white transition-colors">Features</a></li>
          <li><a href="#how-it-works" class="text-white/60 hover:text-white transition-colors">How it Works</a></li>
          <li><a href="#pricing" class="text-white/60 hover:text-white transition-colors">Pricing</a></li>
          <li><a href="#waitlist" class="text-white/60 hover:text-white transition-colors">Early Access</a></li>
        </ul>
      </div>

      <!-- Links 2 -->
      <div class="md:col-span-2">
        <h4 class="text-mono text-xs uppercase tracking-widest text-white/30 mb-8">Company</h4>
        <ul class="space-y-4">
          <li><a href="#" class="text-white/60 hover:text-white transition-colors">About</a></li>
          <li><a href="#" class="text-white/60 hover:text-white transition-colors">Blog</a></li>
          <li><a href="#" class="text-white/60 hover:text-white transition-colors">Careers</a></li>
          <li><a href="#" class="text-white/60 hover:text-white transition-colors">Contact</a></li>
        </ul>
      </div>

      <!-- Links 3 -->
      <div class="md:col-span-2">
        <h4 class="text-mono text-xs uppercase tracking-widest text-white/30 mb-8">Social</h4>
        <ul class="space-y-4">
          <li><a href="#" class="text-white/60 hover:text-white transition-colors">Twitter</a></li>
          <li><a href="#" class="text-white/60 hover:text-white transition-colors">LinkedIn</a></li>
          <li><a href="#" class="text-white/60 hover:text-white transition-colors">GitHub</a></li>
        </ul>
      </div>
    </div>

    <!-- Massive Wordmark -->
    <div class="border-t border-white/10 pt-8 mb-8">
      <h1 class="font-serif text-[12vw] leading-none text-white/5 text-center tracking-tighter select-none pointer-events-none">
        TITANFLOW
      </h1>
    </div>

    <!-- Bottom Bar -->
    <div class="flex flex-col md:flex-row justify-between items-center gap-6 text-xs text-white/30 font-mono uppercase tracking-wider">
      <p>© {currentYear} TitanFlow Inc.</p>
      <div class="flex gap-8">
        <a href="#" class="hover:text-white transition-colors">Privacy Policy</a>
        <a href="#" class="hover:text-white transition-colors">Terms of Service</a>
      </div>
    </div>

  </div>
  
  <!-- Ambient Glow -->
  <div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-full h-[500px] bg-accent/5 blur-[120px] pointer-events-none rounded-full"></div>
</footer>