import React from 'react';
import { Link } from 'react-router-dom';
import { Button } from './ui/button';
import { useThemeConfig } from '../context/ThemeConfigContext';

const PublicFooter = () => {
  const { getLogoUrl } = useThemeConfig();
  const loafLogo = getLogoUrl();

  return (
    <>
      {/* Main Footer */}
      <footer className="bg-[var(--purple-amethyst)] border-t border-[rgba(0,0,0,0.1)] py-8 px-2  lg:px-10 flex items-center justify-between">
        <div className=" flex flex-col md:flex-row gap-14 md:gap-2 lg:gap-32 xl:gap-40 items-center justify-center text-left md:justify-between w-full max-w-7xl mx-auto">
          <div className="w-40 sm:w-40 md:w-48 lg:w-[180px] flex-shrink-0">
            <img src={loafLogo} alt="LOAF Logo" className="w-full h-auto aspect-square object-contain" />
          </div>
          <nav className="flex flex-col sm:flex-row sm:flex-nowrap gap-8 sm:gap-4 lg:gap-20 xl:gap-28 items-start justify-center w-full lg:w-auto">

            <div className="md:flex hidden flex-col gap-2 items-start text-left w-full sm:w-auto  sm:min-w-[163px]">
              <div className="pb-2 lg:pb-4">
                <p className="text-white text-xl font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>About</p>
              </div>
              <Link to="/about/history" className="text-[var(--neutral-800)] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>History</Link>
              <Link to="/about/mission-values" className="text-[var(--neutral-800)] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Mission and Values</Link>
              <Link to="/about/board" className="text-[var(--neutral-800)] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Board of Directors</Link>
            </div>
            <div className="hidden md:flex flex-col gap-2 items-start text-left  w-full sm:w-auto sm:min-w-[148px]">
              <div className="pb-2 lg:pb-4">
                <p className="text-white text-xl font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>Connect</p>
              </div>
              <Link to="/become-a-member" className="text-[var(--neutral-800)] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Become a Member</Link>
              <Link to="/contact-us" className="text-[var(--neutral-800)] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Contact Us</Link>
              <Link to="/resources" className="text-[var(--neutral-800)] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Resources</Link>
            </div>

            <div className="flex flex-col gap-2 items-center justify-center md:items-start text-left w-full sm:w-auto sm:min-w-[200px] md:min-w-[200px] lg:min-w-[220px]">
              <div className="pb-4 w-full flex justify-center lg:justify-start">
                <Link to="/donate" className="block">
                  <Button className="bg-[var(--orange-light)] hover:bg-[var(--orange-coral)] text-[var(--purple-deep)] rounded-full px-12 lg:px-16 py-6 text-lg sm:text-lg font-medium ">
                    Donate
                  </Button>
                </Link>
              </div>
              <p className="text-[var(--neutral-800)] text-sm sm:text-base font-medium text-center md:text-left w-full" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                LOAF is supported by<br />the Hollyfield Foundation
              </p>
            </div>
          </nav>
        </div>
      </footer>

      {/* Bottom Footer */}
      <footer className="bg-gradient-to-r from-[var(--purple-deep)] to-[var(--purple-amethyst)] border-t border-[rgba(0,0,0,0.1)] px-4 sm:px-8 md:px-20 py-5">
        <div className="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-between items-center max-w-7xl mx-auto">
          <nav className="flex flex-col sm:flex-row gap-4 sm:gap-8 items-center order-1 sm:order-none">
            <Link to="/terms-of-service" className="text-[var(--neutral-500)] text-sm sm:text-base font-medium hover:text-white transition-colors whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              Terms of Service
            </Link>
            <Link to="/privacy-policy" className="text-[var(--neutral-500)] text-sm sm:text-base font-medium hover:text-white transition-colors whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              Privacy Policy
            </Link>
          </nav>
          <p className="text-[var(--neutral-500)] text-sm sm:text-base font-medium text-center order-2 sm:order-none" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
            © {new Date().getFullYear()} LOAF. All Rights Reserved.
          </p>
          <p className="text-[var(--neutral-500)] text-sm sm:text-base font-medium text-center order-3 sm:order-none" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
            Designed and Managed by{' '}
            <a href="https://konceptkit.com/" className=" text-white transition-colors whitespace-nowrap">
              Koncept Kit
            </a>
          </p>
        </div>
      </footer>
    </>
  );
};

export default PublicFooter;