import { Link } from "react-router-dom"

const Footer = () => {
  return (
    <footer className="bg-gray-100 py-6">
      <div className="container px-6">
        {/* Navigation Links */}
        <nav className="flex flex-wrap items-center space-x-8 mb-4">
          <Link to="#" className="text-[#2B2D3B] hover:text-gray-800 font-normal m-0">Home</Link>
          <Link to="#" className="text-[#2B2D3B] hover:text-gray-800 font-normal m-0">About</Link>
          <Link to="#" className="text-[#2B2D3B] hover:text-gray-800 font-normal m-0">Journal</Link>
          <Link to="#" className="text-[#2B2D3B] hover:text-gray-800 font-normal m-0">SEO Tools</Link>
          <Link to="#" className="text-[#2B2D3B] hover:text-gray-800 font-normal m-0">Backlinks</Link>
          <Link to="#" className="text-[#2B2D3B] hover:text-gray-800 font-normal m-0">Help Desk</Link>
        </nav>

        {/* Copyright and Legal */}
        <div className="flex items-center text-sm text-gray-600 lg:flex-row flex-col">
          <span>©One Keyword LLC. Premiere Position LLC.</span>
          <span className="mx-2">|</span>
          <span>30745 Pacific Coast Hwy Ste 21 Malibu, CA 90265</span>
          <span className="mx-2">|</span>
          <Link to="#" className="hover:text-gray-800 text-black">Terms of Service</Link>
          <span className="mx-2">|</span>
          <Link to="#" className="hover:text-gray-800 text-black">Privacy Policy</Link>
        </div>
      </div>
    </footer>
  )
}

export default Footer