"use client";

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

export default function CenteredGridFooter() {
  return (
    <footer className="w-full bg-[#FAFAFA] dark:bg-[#0A0A0A] text-zinc-900 dark:text-zinc-100 font-satoshi flex justify-center overflow-x-hidden" style={{ fontFamily: 'Satoshi, sans-serif' }}>
      
      {/* Container with double side borders */}
      <div className="w-full max-w-6xl relative flex flex-col bg-white dark:bg-zinc-950 border-x-[3px] border-black/6 dark:border-white/6" style={{ boxShadow: 'inset 5px 0 0 -2px rgba(0,0,0,0.04), inset -5px 0 0 -2px rgba(0,0,0,0.04)' }}>

        {/* --- Top Section: Branding & Mission --- */}
        <div className="w-full border-b border-black/8 dark:border-white/8 p-12 md:p-20 flex flex-col items-center text-center relative overflow-hidden bg-slate-50/50 dark:bg-zinc-900/50">
          
          <VelocityLogo height={32} className="mb-8" />
          
          <p className="text-lg md:text-xl text-zinc-500 max-w-xl font-medium relative z-10">
            Premium components and layouts for modern applications. Stop rebuilding the wheel.
          </p>
        </div>

        {/* --- Middle Section: Grid of Links --- */}
        <div className="w-full grid grid-cols-1 md:grid-cols-4 relative border-b border-black/8 dark:border-white/8">

          {/* Column 1 */}
          <div className="p-10 lg:p-12 border-b md:border-b-0 md:border-r border-black/8 dark:border-white/8 flex flex-col items-center text-center relative bg-white dark:bg-zinc-950">
            <h4 className="font-semibold uppercase tracking-widest text-xs mb-6 text-zinc-900 dark:text-zinc-100">Resources</h4>
            <ul className="space-y-4">
              {['Components', 'Templates', 'Documentation', 'Showcase'].map(link => (
                <li key={link}><a href="#" className="text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors text-sm font-medium">{link}</a></li>
              ))}
            </ul>
          </div>

          {/* Column 2 */}
          <div className="p-10 lg:p-12 border-b md:border-b-0 md:border-r border-black/8 dark:border-white/8 flex flex-col items-center text-center relative bg-white dark:bg-zinc-950">
            <h4 className="font-semibold uppercase tracking-widest text-xs mb-6 text-zinc-900 dark:text-zinc-100">Company</h4>
            <ul className="space-y-4">
              {['About Us', 'Careers', 'Blog', 'Contact'].map(link => (
                <li key={link}><a href="#" className="text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors text-sm font-medium">{link}</a></li>
              ))}
            </ul>
          </div>

          {/* Column 3 */}
          <div className="p-10 lg:p-12 border-b md:border-b-0 md:border-r border-black/8 dark:border-white/8 flex flex-col items-center text-center relative bg-white dark:bg-zinc-950">
            <h4 className="font-semibold uppercase tracking-widest text-xs mb-6 text-zinc-900 dark:text-zinc-100">Legal</h4>
            <ul className="space-y-4">
              {['Privacy Policy', 'Terms of Service', 'Cookie Policy'].map(link => (
                <li key={link}><a href="#" className="text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors text-sm font-medium">{link}</a></li>
              ))}
            </ul>
          </div>

          {/* Column 4: Newsletter */}
          <div className="p-10 lg:p-12 flex flex-col items-center text-center relative bg-white dark:bg-zinc-950">
            <h4 className="font-semibold uppercase tracking-widest text-xs mb-6 text-zinc-900 dark:text-zinc-100">Stay Updated</h4>
            <div className="relative group w-full max-w-[200px]">
              <input 
                type="email" 
                placeholder="Email address" 
                className="w-full bg-transparent border-b border-black/15 dark:border-white/15 pb-2 outline-none text-sm placeholder:text-zinc-400 text-center focus:border-black dark:focus:border-white transition-colors"
              />
              <button className="absolute right-0 top-0 bottom-2 flex items-center justify-center text-zinc-400 hover:text-black dark:hover:text-white transition-colors">
                <ArrowRight className="w-4 h-4" />
              </button>
            </div>
          </div>

        </div>

        {/* --- Accent Row --- */}
        <div className="w-full grid grid-cols-2 md:grid-cols-4 relative border-b border-black/8 dark:border-white/8 bg-slate-50 dark:bg-zinc-900">
          {Array.from({ length: 4 }).map((_, i) => (
             <div key={i} className={`h-12 md:h-16 ${i < 3 ? 'border-r border-black/8 dark:border-white/8' : ''} ${i < 2 ? 'border-b md:border-b-0' : ''} flex items-center justify-center relative`}>
                 {i === 1 && <div className="w-1.5 h-1.5 rounded-full bg-emerald-500" />}
                 {i === 2 && <div className="w-1.5 h-1.5 rounded-full bg-indigo-500" />}
             </div>
          ))}
        </div>

        {/* --- Bottom Section: Social & Copyright --- */}
        <div className="w-full p-8 md:p-12 flex flex-col md:flex-row items-center justify-between gap-6 relative bg-white dark:bg-zinc-950">

          <div className="flex gap-5">
            <a href="#" className="w-9 h-9 rounded-full bg-black/5 dark:bg-white/5 flex items-center justify-center text-zinc-500 hover:text-zinc-900 dark:hover:text-white hover:bg-black/10 dark:hover:bg-white/10 transition-all hover:-translate-y-1 duration-300">
              <Instagram className="w-4 h-4" />
            </a>
            <a href="#" className="w-9 h-9 rounded-full bg-black/5 dark:bg-white/5 flex items-center justify-center text-zinc-500 hover:text-zinc-900 dark:hover:text-white hover:bg-black/10 dark:hover:bg-white/10 transition-all hover:-translate-y-1 duration-300">
              <Twitter className="w-4 h-4" />
            </a>
            <a href="#" className="w-9 h-9 rounded-full bg-black/5 dark:bg-white/5 flex items-center justify-center text-zinc-500 hover:text-zinc-900 dark:hover:text-white hover:bg-black/10 dark:hover:bg-white/10 transition-all hover:-translate-y-1 duration-300">
              <Linkedin className="w-4 h-4" />
            </a>
            <a href="#" className="w-9 h-9 rounded-full bg-black/5 dark:bg-white/5 flex items-center justify-center text-zinc-500 hover:text-zinc-900 dark:hover:text-white hover:bg-black/10 dark:hover:bg-white/10 transition-all hover:-translate-y-1 duration-300">
              <Github className="w-4 h-4" />
            </a>
          </div>

          <p className="text-xs font-semibold text-zinc-400 uppercase tracking-widest">
            © {new Date().getFullYear()} Velocity UI
          </p>

        </div>

      </div>
    </footer>
  );
}