all-file-converter/src/components/Footer.tsx

import { ShieldCheck, Mail, ArrowUp, Github, Linkedin, HelpCircle } from "lucide-react";
import { Link } from "react-router-dom";

export default function Footer() {
  const socialIcons = [
    {
      name: "HuggingFace",
      url: "https://huggingface.co/embedingHF",
      icon: (
        <span className="text-xs font-bold font-mono tracking-tighter bg-amber-50 text-amber-600 px-2.5 py-1 rounded-lg border border-amber-200 hover:bg-amber-100/50 transition">
          🤗 HuggingFace
        </span>
      ),
    },
    {
      name: "GitHub",
      url: "https://github.com",
      icon: <Github className="w-4 h-4 text-slate-500 hover:text-slate-900 transition" />,
    },
    {
      name: "LinkedIn",
      url: "https://linkedin.com",
      icon: <Linkedin className="w-4 h-4 text-indigo-500 hover:text-indigo-700 transition" />,
    },
  ];

  const productLinks = [
    { name: "Home Dashboard", path: "/" },
    { name: "Technical Specifications", path: "/features" },
    { name: "Support Development", path: "/support" },
    { name: "Common FAQs", path: "/faq" },
    { name: "Privacy & HIPAA Policy", path: "/privacy" },
    { name: "Developer Ticket Portal", path: "/contact" },
  ];

  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  };

  return (
    <footer className="bg-slate-950 text-white relative pt-16 pb-12 overflow-hidden border-t border-slate-900">
      {/* Absolute top grid subtle gradient */}
      <div className="absolute top-0 left-0 right-0 h-[1.5px] bg-gradient-to-r from-transparent via-slate-800 to-transparent pointer-events-none" />

      <div className="max-w-7xl mx-auto px-4 md:px-8 grid grid-cols-1 md:grid-cols-12 gap-12 text-left relative z-10 mb-12">
        {/* Logo and brief */}
        <div className="md:col-span-4 space-y-4">
          <div className="flex items-center space-x-2.5">
            <div className="w-9 h-9 rounded-xl bg-gradient-to-tr from-violet-500 to-indigo-500 flex items-center justify-center shadow-md shadow-violet-500/20">
              <ShieldCheck className="w-5 h-5 text-white" />
            </div>
            <div className="text-left font-display">
              <span className="block font-semibold text-base text-white">Lumina Convert</span>
              <span className="block text-[10px] uppercase font-mono tracking-widest text-violet-400 -mt-1 font-semibold">
                All File Converter
              </span>
            </div>
          </div>
          <p className="text-slate-400 text-xs font-light leading-relaxed max-w-sm">
            High performance, standalone software processing document conversions locally on your computer with full hardware acceleration. Keep control of your intellectual property.
          </p>
        </div>

        {/* Navigation Quicklinks */}
        <div className="md:col-span-4 space-y-4">
          <h4 className="text-xs font-mono font-bold tracking-wider uppercase text-slate-400 border-b border-white/5 pb-2">
            Dynamic Navigation Directory
          </h4>
          <ul className="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-2.5">
            {productLinks.map((link) => (
              <li key={link.path}>
                <Link
                  to={link.path}
                  id={`footer-nav-${link.name.toLowerCase().replace(/\s+/g, "-")}`}
                  className="text-slate-400 hover:text-white text-xs font-medium tracking-wide transition cursor-pointer"
                >
                  {link.name}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        {/* Contact details */}
        <div className="md:col-span-4 space-y-4">
          <h4 className="text-xs font-mono font-bold tracking-wider uppercase text-slate-400 border-b border-white/5 pb-2">
            Secure Help Desk
          </h4>
          <div className="space-y-2.5 text-xs text-slate-400">
            <p className="flex items-center space-x-2">
              <span className="text-slate-500 font-mono">Mail:</span>
              <a href="mailto:bahaduralimunnabhai@gmail.com" id="footer-secure-email" className="hover:text-white transition">
                bahaduralimunnabhai@gmail.com
              </a>
            </p>
            <p className="flex items-center space-x-2">
              <span className="text-slate-500 font-mono">WhatsApp Desk:</span>
              <a
                href="https://wa.me/923034572298"
                target="_blank"
                rel="noopener noreferrer"
                id="footer-secure-whatsapp"
                className="hover:text-white transition"
              >
                +92 303 4572298
              </a>
            </p>
            <div className="flex gap-2 items-start mt-4 p-3 bg-white/5 rounded-xl border border-white/5">
              <HelpCircle className="w-3.5 h-3.5 text-violet-400 flex-shrink-0 mt-0.5" />
              <p className="text-[10px] text-slate-400 font-light leading-relaxed">
                Need customized bulk CLI converters or folder watchers support? Call our developer hotline instantly.
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* Social links / Bottom Bar */}
      <div className="max-w-7xl mx-auto px-4 md:px-8 border-t border-white/5 pt-8 flex flex-col sm:flex-row items-center justify-between gap-6">
        <div className="flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 sm:space-x-4 text-xs font-mono text-slate-500 text-center sm:text-left">
          <span>&copy; {new Date().getFullYear()} All File Converter / Lumina Convert.</span>
          <span className="hidden sm:inline text-slate-700">|</span>
          <span className="text-[10px]">100% Offline HIPAA & GDPR Codec Compliant.</span>
        </div>

        {/* Social channels bar */}
        <div className="flex items-center space-x-4">
          <div className="flex items-center space-x-3 pr-4 border-r border-white/5">
            {socialIcons.map((soc, idx) => (
              <a
                key={idx}
                href={soc.url}
                target="_blank"
                rel="noopener noreferrer"
                id={`footer-social-${soc.name.toLowerCase()}`}
                title={soc.name}
              >
                {soc.icon}
              </a>
            ))}
          </div>

          {/* scroll to top rocket */}
          <button
            onClick={scrollToTop}
            id="footer-scroll-top-btn"
            className="w-8 h-8 rounded-full bg-white/5 text-slate-400 hover:text-white hover:bg-violet-600 transition flex items-center justify-center cursor-pointer shadow-inner"
            title="Scroll to Top"
          >
            <ArrowUp className="w-4 h-4" />
          </button>
        </div>
      </div>
    </footer>
  );
}