import React from 'react';
import { Link } from 'react-router-dom';
import { Calendar, Users, User, BookOpen, FileText, DollarSign, Scale } from 'lucide-react';
import { useThemeConfig } from '@/context/ThemeConfigContext';
import { Button } from './ui/button';

const MemberFooter = () => {
  const { getLogoUrl } = useThemeConfig();
  const loafLogo = getLogoUrl();
  return (
    <footer className="bg-[var(--purple-amethyst)] border-t border-[rgba(0,0,0,0.1)] text-white mt-auto">
      <div className="max-w-7xl mx-auto px-6 py-12">

        <div className="grid md:grid-cols-5 gap-8">
          {/* Logo & About */}
            <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>

          {/* Member Resources */}
          <div>
            <h4 className="font-semibold mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
              Member Resources
            </h4>
            <ul className="space-y-2 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              <li>
                <Link to="/members/calendar" className="text-gray-300 hover:text-white flex items-center gap-2 transition-colors">
                  <Calendar className="h-4 w-4" />
                  Event Calendar
                </Link>
              </li>
              <li>
                <Link to="/members/directory" className="text-gray-300 hover:text-white flex items-center gap-2 transition-colors">
                  <Users className="h-4 w-4" />
                  Members Directory
                </Link>
              </li>
              <li>
                <Link to="/members/profile" className="text-gray-300 hover:text-white flex items-center gap-2 transition-colors">
                  <User className="h-4 w-4" />
                  My Profile
                </Link>
              </li>
              <li>
                <Link to="/events" className="text-gray-300 hover:text-white flex items-center gap-2 transition-colors">
                  <BookOpen className="h-4 w-4" />
                  Events
                </Link>
              </li>
            </ul>
          </div>

          {/* Documents */}
          <div>
            <h4 className="font-semibold mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
              Documents
            </h4>
            <ul className="space-y-2 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              <li>
                <Link to="/members/newsletters" className="text-gray-300 hover:text-white flex items-center gap-2 transition-colors">
                  <FileText className="h-4 w-4" />
                  Newsletters
                </Link>
              </li>
              <li>
                <Link to="/members/financials" className="text-gray-300 hover:text-white flex items-center gap-2 transition-colors">
                  <DollarSign className="h-4 w-4" />
                  Financial Reports
                </Link>
              </li>
              <li>
                <Link to="/members/bylaws" className="text-gray-300 hover:text-white flex items-center gap-2 transition-colors">
                  <Scale className="h-4 w-4" />
                  Bylaws
                </Link>
              </li>
            </ul>
          </div>

          {/* Support */}
          <div>
            <h4 className="font-semibold mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
              Support
            </h4>
            <ul className="space-y-2 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              <li>
                <Link to="/profile" className="text-gray-300 hover:text-white transition-colors">
                  Account Settings
                </Link>
              </li>
              <li>
                <a href="/membership/contact-us" className="text-gray-300 hover:text-white transition-colors">
                  Contact Us
                </a>
              </li>
              <li>
                <a href="/membership/donate" className="text-gray-300 hover:text-white transition-colors">
                  Donate
                </a>
              </li>
            </ul>
          </div>

          {/* donate button */}
          <div className="flex flex-col gap-2 items-center self-start justify-center md:items-start text-left w-full sm:w-auto sm:min-w-[200px] md:min-w-[200px] ">
            <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>

        </div>

      </div>

      {/* Bottom Bar */}
      <div className="bg-gradient-to-r from-[var(--purple-deep)] to-[var(--purple-amethyst)] border-t border-[rgba(0,0,0,0.1)]">
        <div className="max-w-7xl mx-auto px-8 py-4 grid-cols-3">
          <div className="flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-gray-300" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
            <div className="flex gap-6">
              <a href="/membership/terms-of-service" className="hover:text-white transition-colors">Terms of Service</a>
              <a href="/membership/privacy-policy" className="hover:text-white transition-colors">Privacy Policy</a>
            </div>
            <p>© {new Date().getFullYear()} LOAF. All rights reserved.</p>
            <p>Designed and Managed by <a href='https://konceptkit.com' target='_blank' className='font-bold text-white hover:underline cursor-pointer'>Konceptkit</a></p>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default MemberFooter;
