"use client";

import React from "react";
import { ArrowRight, Twitter, Github, Linkedin, Instagram } from "lucide-react";
import { VelocityLogo } from "@/components/velocity-logo";

export default function StandardFooter() {
  return (
    <footer className="relative w-full bg-background overflow-hidden border-t border-border/50">
      {/* Background Effects */}
      <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 mix-blend-overlay pointer-events-none" />
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-3xl h-[1px] bg-gradient-to-r from-transparent via-foreground/20 to-transparent" />
      <div className="absolute -top-24 left-1/2 -translate-x-1/2 w-[600px] h-[300px] bg-primary/10 blur-[100px] rounded-full pointer-events-none" />

      <div className="relative z-10 max-w-7xl mx-auto px-6 pt-24 pb-12">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-12 lg:gap-8 mb-16">
          
          {/* Brand & Newsletter */}
          <div className="lg:col-span-5 flex flex-col gap-6">
            <VelocityLogo />
            <p className="text-muted-foreground text-sm leading-relaxed max-w-sm">
              Premium components for modern engineering teams. Build high-end,
              production-ready interfaces in minutes instead of weeks.
            </p>
            
            <div className="mt-4 relative p-1 rounded-full border border-border/50 bg-card/30 backdrop-blur-sm inline-flex items-center max-w-md w-full">
              <input 
                type="email" 
                placeholder="Subscribe to newsletter" 
                className="bg-transparent border-none outline-none pl-4 pr-2 text-sm w-full text-foreground placeholder:text-muted-foreground focus:ring-0"
              />
              <button className="flex-shrink-0 bg-foreground text-background w-8 h-8 rounded-full flex items-center justify-center hover:scale-105 transition-transform">
                <ArrowRight className="w-4 h-4" />
              </button>
            </div>
          </div>

          {/* Links Grid */}
          <div className="lg:col-span-7 grid grid-cols-2 md:grid-cols-3 gap-8">
            <div className="flex flex-col gap-4">
              <h4 className="text-sm font-semibold text-foreground tracking-wide uppercase">Product</h4>
              <ul className="flex flex-col gap-3">
                {["Components", "Templates", "Pricing", "Changelog", "Showcase"].map((item) => (
                  <li key={item}>
                    <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                      {item}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
            <div className="flex flex-col gap-4">
              <h4 className="text-sm font-semibold text-foreground tracking-wide uppercase">Resources</h4>
              <ul className="flex flex-col gap-3">
                {["Documentation", "Figma Kit", "Next.js Boilerplate", "Discord Community"].map((item) => (
                  <li key={item}>
                    <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                      {item}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
            <div className="flex flex-col gap-4">
              <h4 className="text-sm font-semibold text-foreground tracking-wide uppercase">Company</h4>
              <ul className="flex flex-col gap-3">
                {["About", "Blog", "Careers", "Contact", "Privacy Policy"].map((item) => (
                  <li key={item}>
                    <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                      {item}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className="relative pt-8 border-t border-border/30 flex flex-col md:flex-row items-center justify-between gap-4">
          <p className="text-xs text-muted-foreground">
            © {new Date().getFullYear()} Velocity UI Inc. All rights reserved.
          </p>
          <div className="flex items-center gap-4">
            {[Twitter, Github, Linkedin, Instagram].map((Icon, idx) => (
              <a 
                key={idx} 
                href="#" 
                className="w-8 h-8 rounded-full border border-border/50 flex items-center justify-center text-muted-foreground hover:text-foreground hover:border-foreground transition-all"
              >
                <Icon className="w-3.5 h-3.5" />
              </a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}