// components/Footer.tsx
import React from "react";
import Link from "next/link";
import { FaLinkedin, FaInstagram } from "react-icons/fa";
import Image from "next/image";

const omsLogoUrl = "/oms-logo.svg"; // Ensure this exists in /public
// const omsLogoDarkUrl = "/oms-logo-dark.svg"; // Optional dark mode logo

const Footer = () => {
  // In a real app, you might use useTheme to get the current theme
  // import { useTheme } from 'next-themes';
  // const { resolvedTheme } = useTheme();
  // const currentLogo = resolvedTheme === 'dark' && omsLogoDarkUrl ? omsLogoDarkUrl : omsLogoUrl;
  const currentLogo = omsLogoUrl; // Using default for now

  return (
    // --- Force Dark Background ---
    // Use a specific dark color (e.g., var(--oms-black) or a dark gray from your vars)
    // Text color will default to light here for contrast
    <footer className="bg-[var(--oms-black)] text-[var(--oms-white)] pt-16 pb-8">
      {" "}
      {/* Or use --background from .dark */}
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12 mb-12">
          {/* About/Logo Section */}
          <div>
            <div className="flex items-center space-x-2 mb-4">
              <Image
                src={currentLogo}
                alt="OMS Logo"
                width={40}
                height={40}
                priority
                // Optional: Add filter for dark bg if logo isn't ideal
                // className="dark:invert"
              />
              {/* Ensure prominent text is bright */}
              <span className="text-xl font-bold text-[var(--oms-white)]">
                OMS
              </span>
            </div>
            {/* Use a slightly muted bright color for less prominent text */}
            <p className="text-sm text-[var(--oms-white)]/80">
              {" "}
              {/* Example: White with 80% opacity */}
              Owethu Managed Services
            </p>
            <p className="text-sm text-[var(--oms-white)]/80 mt-2">
              Where innovation meets excellence.
            </p>
          </div>

          {/* Quick Links Section */}
          <div>
            {/* Use primary color for headings */}
            <h5 className="text-lg font-semibold mb-4 text-primary">
              Quick Links
            </h5>
            {/* Use muted bright color for links, primary on hover */}
            <ul className="space-y-2">
              <li>
                <Link
                  href="/about"
                  className="text-sm text-[var(--oms-white)]/80 hover:text-primary transition-colors"
                >
                  About Us
                </Link>
              </li>
              <li>
                <Link
                  href="/services/resource-augmentation"
                  className="text-sm text-[var(--oms-white)]/80 hover:text-primary transition-colors"
                >
                  Services
                </Link>
              </li>
              <li>
                <Link
                  href="/obse"
                  className="text-sm text-[var(--oms-white)]/80 hover:text-primary transition-colors"
                >
                  Products
                </Link>
              </li>
              {/* <li>
                <Link
                  href="/join-us"
                  className="text-sm text-[var(--oms-white)]/80 hover:text-primary transition-colors"
                >
                  Join Our Team
                </Link>
              </li> */}
              <li>
                <Link
                  href="/contact"
                  className="text-sm text-[var(--oms-white)]/80 hover:text-primary transition-colors"
                >
                  Contact Us
                </Link>
              </li>
            </ul>
          </div>

          {/* Contact Info Section */}
          <div>
            <h5 className="text-lg font-semibold mb-4 text-primary">Contact</h5>
            <address className="text-sm text-[var(--oms-white)]/80 mb-2 not-italic">
               265 Von Willich Avenue
              <br />
             Die Hoewes, Centurion, 0159
              <br />
              (Unit 10 B Centuria Park)
            </address>
            <p className="text-sm text-[var(--oms-white)]/80 mb-2">
              Phone:{" "}
              <a href="tel:+27684855721" className="hover:text-primary">
                +27 68 485 5721
              </a>
            </p>
            <p className="text-sm text-[var(--oms-white)]/80 mb-2">
              Email:{" "}
              <a href="mailto:hello@oms.africa" className="hover:text-primary">
                hello@oms.africa
              </a>
            </p>
            {/* Social Icons - Use muted bright color, primary on hover */}
            <div className="flex space-x-4 mt-4">
              <a
                href="https://linkedin.com"
                target="_blank"
                rel="noopener noreferrer"
                className="text-[var(--oms-white)]/70 hover:text-primary transition-colors"
                aria-label="LinkedIn"
              >
                <FaLinkedin size={24} />
              </a>
              <a
                href="https://instagram.com"
                target="_blank"
                rel="noopener noreferrer"
                className="text-[var(--oms-white)]/70 hover:text-primary transition-colors"
                aria-label="Instagram"
              >
                <FaInstagram size={24} />
              </a>
            </div>
          </div>

          {/* Newsletter Section */}
          <div>
            <h5 className="text-lg font-semibold mb-4 text-primary">
              Newsletter
            </h5>
            <p className="text-sm text-[var(--oms-white)]/80 mb-3">
              Stay updated with our latest news.
            </p>
            <form className="flex flex-col sm:flex-row gap-2">
              {/* Input needs dark background styles */}
              <div className="relative max-w-md mx-auto w-full">
                <input
                  type="email"
                  placeholder="Enter your email"
                  aria-label="Email for newsletter"
                  className="
      w-full
      pr-24
      px-4 py-2
      rounded-lg
      bg-[var(--dark-input)]
      border border-[var(--dark-border)]
      text-[var(--dark-foreground)]
      placeholder:text-[var(--dark-muted-foreground)]
      focus:outline-none focus:ring-2 focus:ring-ring
      focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]
    "
                />
                <button
                  type="submit"
                  className="
      absolute top-0 right-0
      h-full
      px-4
      rounded-r-lg  
      bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] 
      text-primary-foreground
      font-semibold
      hover:bg-opacity-90
      transition-colors
      focus:outline-none focus:ring-2 focus:ring-ring
      focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]
    "
                >
                  Subscribe
                </button>
              </div>
            </form>
            {/* Badges - Use a subtle dark bg */}
            <div className="mt-6 space-x-2 sm:space-x-4">
              <span className="inline-block bg-[var(--dark-secondary)] text-[var(--dark-secondary-foreground)] px-3 py-1 rounded-md text-xs font-medium">
                Salesforce Partner
              </span>
              <span className="inline-block bg-[var(--dark-secondary)] text-[var(--dark-secondary-foreground)] px-3 py-1 rounded-md text-xs font-medium">
                BBB-EE Level 1
              </span>
            </div>
          </div>
        </div>

        {/* Bottom Bar */}
        {/* Use specific dark border, muted bright text */}
        <div className="border-t border-[var(--dark-border)] pt-8 flex flex-col md:flex-row justify-between items-center text-sm text-[var(--oms-white)]/70">
          <p className="text-center md:text-left mb-4 md:mb-0">
            © {new Date().getFullYear()} Owethu Managed Services. All Rights
            Reserved.
          </p>
          <div className="flex space-x-4">
            {/* Links still hover to primary */}

            {/* <Link
              href="/privacy-policy"
              className="hover:text-primary transition-colors"
            >
              Privacy Policy
            </Link> */}
            <a
              href="/Privacy-Policy/Recruitment-Privacy-Policy.pdf"
              className="hover:text-primary transition-colors"
            >
              Privacy Policy
            </a>
            <a
              href="/Privacy-Policy/Data-Privacy-Statement-for-Candidates.pdf"
              className="hover:text-primary transition-colors"
            >
              PAIA & POPIA
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;
//Data-Privacy-Statement-for-Candidates