oms-website-nextjs/components/Footer.tsx

// components/Footer.tsx
import React from "react";
import Link from "next/link";
import { FaLinkedin, FaInstagram } from "react-icons/fa"; // npm install react-icons
import Image from "next/image";
const omsLogoUrl = "/oms-logo.svg";

const Footer = () => {
  return (
    <footer className="bg-dark text-light pt-16 pb-8">
      <div className="container mx-auto px-6">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
          {/* About/Logo */}
          <div>
            <div className="flex items-center space-x-2 mb-4">
              <Image
                src={omsLogoUrl} // Use your actual logo path
                alt="OMS Logo"
                width={40} // Adjust size as needed
                height={40}
                priority // Load logo quickly
              />
              <span className="text-xl font-bold text-light">OMS</span>
            </div>
            <p className="text-sm text-gray-400">Owethu Managed Services</p>
            <p className="text-sm text-gray-400 mt-2">
              Where innovation meets excellence.
            </p>
          </div>

          {/* Quick Links */}
          <div>
            <h5 className="text-lg font-semibold mb-4 text-primary">
              Quick Links
            </h5>
            <ul className="space-y-2">
              <li>
                <Link
                  href="/about"
                  className="hover:text-primary transition-colors duration-300"
                >
                  About Us
                </Link>
              </li>
              <li>
                <Link
                  href="/services"
                  className="hover:text-primary transition-colors duration-300"
                >
                  Services
                </Link>
              </li>
              <li>
                <Link
                  href="/products"
                  className="hover:text-primary transition-colors duration-300"
                >
                  Products
                </Link>
              </li>
              <li>
                <Link
                  href="/join-us"
                  className="hover:text-primary transition-colors duration-300"
                >
                  Join Our Team
                </Link>
              </li>
              <li>
                <Link
                  href="/contact"
                  className="hover:text-primary transition-colors duration-300"
                >
                  Contact Us
                </Link>
              </li>
            </ul>
          </div>

          {/* Contact Info */}
          <div>
            <h5 className="text-lg font-semibold mb-4 text-primary">Contact</h5>
            <p className="text-sm text-gray-400 mb-2">
              Unit 10 B Centuria Park
              <br />
              265 Von Willich Avenue
              <br />
              Die Hoewes, Centurion, 0159
            </p>
            <p className="text-sm text-gray-400 mb-2">Phone: (012) 051 3282</p>
            <p className="text-sm text-gray-400 mb-2">
              Email:{" "}
              <a href="mailto:hello@oms.africa" className="hover:text-primary">
                hello@oms.africa
              </a>
            </p>
            <div className="flex space-x-4 mt-4">
              <a
                href="https://linkedin.com"
                target="_blank"
                rel="noopener noreferrer"
                className="text-gray-400 hover:text-primary"
              >
                <FaLinkedin size={24} />
              </a>
              <a
                href="https://instagram.com"
                target="_blank"
                rel="noopener noreferrer"
                className="text-gray-400 hover:text-primary"
              >
                <FaInstagram size={24} />
              </a>
            </div>
          </div>

          {/* Newsletter */}
          <div>
            <h5 className="text-lg font-semibold mb-4 text-primary">
              Newsletter
            </h5>
            <p className="text-sm text-gray-400 mb-3">
              Stay updated with our latest news.
            </p>
            <form className="flex flex-col sm:flex-row gap-2">
              <input
                type="email"
                placeholder="Enter your email"
                className="flex-grow px-4 py-2 rounded-md bg-gray-700 text-light border border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary/50"
              />
              <button
                type="submit"
                className="bg-primary text-dark px-4 py-2 rounded-md font-semibold hover:bg-primary/90 transition-colors duration-300"
              >
                Subscribe
              </button>
            </form>
            {/* TODO: Add Badges */}
            <div className="mt-6 space-x-4">
              <span className="inline-block bg-gray-600 px-3 py-1 rounded text-xs font-semibold">
                Salesforce Partner
              </span>
              <span className="inline-block bg-gray-600 px-3 py-1 rounded text-xs font-semibold">
                BBB-EE Level X
              </span>
            </div>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className="border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center text-sm text-gray-500">
          <p>
            © {new Date().getFullYear()} Owethu Managed Services. All Rights
            Reserved.
          </p>
          <div className="flex space-x-4 mt-4 md:mt-0">
            <Link href="/privacy-policy" className="hover:text-primary">
              Privacy Policy
            </Link>
            <Link href="/paia-popia" className="hover:text-primary">
              PAIA & POPIA
            </Link>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;