membership-fe/src/components/PublicNavbar.js

import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Button } from './ui/button';
import { useAuth } from '../context/AuthContext';
import { ChevronDown, Menu, X } from 'lucide-react';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from './ui/dropdown-menu';

const PublicNavbar = () => {
  const { user, logout } = useAuth();
  const navigate = useNavigate();
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  // LOAF logo (local)
  const loafLogo = `${process.env.PUBLIC_URL}/loaf-logo.png`;

  const handleAuthAction = () => {
    if (user) {
      logout();
      navigate('/');
    } else {
      navigate('/login');
    }
  };

  return (
    <>
      {/* Top Header - Auth Actions */}
      <header className="bg-gradient-to-r from-[#644c9f] to-[#48286e] px-4 sm:px-8 md:px-16 py-4 flex justify-end items-center gap-4 sm:gap-6">
        <button
          onClick={handleAuthAction}
          className="text-white text-base font-medium hover:opacity-80 transition-opacity bg-transparent border-none cursor-pointer"
          style={{ fontFamily: "'Poppins', sans-serif" }}
        >
          {user ? 'Logout' : 'Login'}
        </button>
        {!user && (
          <Link
            to="/register"
            className="text-white text-base font-medium hover:opacity-80 transition-opacity"
            style={{ fontFamily: "'Poppins', sans-serif" }}
          >
            Register
          </Link>
        )}
        <Link to="/donate">
          <Button
            className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-[25px] px-[54px] py-[10px] text-[16.5px] font-semibold h-[41px]"
            style={{ fontFamily: "'Montserrat', sans-serif" }}
          >
            Donate
          </Button>
        </Link>
      </header>

      {/* Main Header - Navigation */}
      <header className="bg-[#664fa3] px-4 sm:px-8 md:px-16 py-2 flex justify-between items-center">
        <Link to="/">
          <img src={loafLogo} alt="LOAF Logo" className="h-16 w-16 sm:h-20 sm:w-20 md:h-28 md:w-28 object-contain" />
        </Link>

        {/* Mobile Menu Button */}
        <button
          onClick={() => setIsMobileMenuOpen(true)}
          className="lg:hidden p-2 text-white hover:bg-[#48286e] rounded-md transition-colors"
          aria-label="Open menu"
        >
          <Menu className="h-6 w-6" />
        </button>

        {/* Desktop Navigation */}
        <nav className="hidden lg:flex gap-10 items-center">
          <Link
            to="/#welcome"
            className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
            style={{ fontFamily: "'Poppins', sans-serif" }}
          >
            Welcome
          </Link>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <button className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity flex items-center gap-1 bg-transparent border-none cursor-pointer"
                style={{ fontFamily: "'Poppins', sans-serif" }}>
                About Us
                <ChevronDown className="h-4 w-4" />
              </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start" className="bg-white min-w-[220px]">
              <DropdownMenuItem asChild>
                <Link to="/about/history" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
                  style={{ fontFamily: "'Poppins', sans-serif" }}>
                  History
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <Link to="/about/mission-values" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
                  style={{ fontFamily: "'Poppins', sans-serif" }}>
                  Mission and Values
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <Link to="/about/board" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
                  style={{ fontFamily: "'Poppins', sans-serif" }}>
                  Board of Directors
                </Link>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
          <Link
            to={user ? "/dashboard" : "/become-a-member"}
            className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
            style={{ fontFamily: "'Poppins', sans-serif" }}
          >
            {user ? 'Dashboard' : 'Become a Member'}
          </Link>
          {!user && (
            <Link
              to="/login"
              className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
              style={{ fontFamily: "'Poppins', sans-serif" }}
            >
              Members Only
            </Link>
          )}
          <Link
            to="/resources"
            className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
            style={{ fontFamily: "'Poppins', sans-serif" }}
          >
            Resources
          </Link>
          <Link
            to="/contact-us"
            className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
            style={{ fontFamily: "'Poppins', sans-serif" }}
          >
            Contact Us
          </Link>
        </nav>
      </header>

      {/* Mobile Menu Drawer */}
      {isMobileMenuOpen && (
        <div className="fixed inset-0 z-50 lg:hidden">
          {/* Backdrop */}
          <div
            className="fixed inset-0 bg-black/50 backdrop-blur-sm"
            onClick={() => setIsMobileMenuOpen(false)}
          />

          {/* Drawer */}
          <div className="fixed right-0 top-0 h-full w-[280px] bg-[#664fa3] shadow-xl overflow-y-auto">
            {/* Header */}
            <div className="flex justify-between items-center p-6 border-b border-[#48286e]">
              <span className="text-white text-lg font-semibold" style={{ fontFamily: "'Poppins', sans-serif" }}>
                Menu
              </span>
              <button
                onClick={() => setIsMobileMenuOpen(false)}
                className="p-2 text-white hover:bg-[#48286e] rounded-md transition-colors"
                aria-label="Close menu"
              >
                <X className="h-5 w-5" />
              </button>
            </div>

            {/* Navigation Links */}
            <nav className="flex flex-col p-6 space-y-4">
              <Link
                to="/#welcome"
                onClick={() => setIsMobileMenuOpen(false)}
                className="text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
                style={{ fontFamily: "'Poppins', sans-serif" }}
              >
                Welcome
              </Link>

              {/* About Us Section */}
              <div className="space-y-2">
                <p className="text-white text-base font-semibold px-4 py-2" style={{ fontFamily: "'Poppins', sans-serif" }}>
                  About Us
                </p>
                <Link
                  to="/about/history"
                  onClick={() => setIsMobileMenuOpen(false)}
                  className="text-[#ddd8eb] text-sm font-medium hover:bg-[#48286e] hover:text-white px-6 py-2 rounded-md transition-colors block"
                  style={{ fontFamily: "'Poppins', sans-serif" }}
                >
                  History
                </Link>
                <Link
                  to="/about/mission-values"
                  onClick={() => setIsMobileMenuOpen(false)}
                  className="text-[#ddd8eb] text-sm font-medium hover:bg-[#48286e] hover:text-white px-6 py-2 rounded-md transition-colors block"
                  style={{ fontFamily: "'Poppins', sans-serif" }}
                >
                  Mission and Values
                </Link>
                <Link
                  to="/about/board"
                  onClick={() => setIsMobileMenuOpen(false)}
                  className="text-[#ddd8eb] text-sm font-medium hover:bg-[#48286e] hover:text-white px-6 py-2 rounded-md transition-colors block"
                  style={{ fontFamily: "'Poppins', sans-serif" }}
                >
                  Board of Directors
                </Link>
              </div>

              <Link
                to={user ? "/dashboard" : "/become-a-member"}
                onClick={() => setIsMobileMenuOpen(false)}
                className="text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
                style={{ fontFamily: "'Poppins', sans-serif" }}
              >
                {user ? 'Dashboard' : 'Become a Member'}
              </Link>

              {!user && (
                <Link
                  to="/login"
                  onClick={() => setIsMobileMenuOpen(false)}
                  className="text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
                  style={{ fontFamily: "'Poppins', sans-serif" }}
                >
                  Members Only
                </Link>
              )}

              <Link
                to="/resources"
                onClick={() => setIsMobileMenuOpen(false)}
                className="text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
                style={{ fontFamily: "'Poppins', sans-serif" }}
              >
                Resources
              </Link>

              <Link
                to="/contact-us"
                onClick={() => setIsMobileMenuOpen(false)}
                className="text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
                style={{ fontFamily: "'Poppins', sans-serif" }}
              >
                Contact Us
              </Link>

              {/* Auth Actions */}
              <div className="pt-4 border-t border-[#48286e] space-y-2">
                <button
                  onClick={() => {
                    handleAuthAction();
                    setIsMobileMenuOpen(false);
                  }}
                  className="w-full text-left text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
                  style={{ fontFamily: "'Poppins', sans-serif" }}
                >
                  {user ? 'Logout' : 'Login'}
                </button>
                {!user && (
                  <Link
                    to="/register"
                    onClick={() => setIsMobileMenuOpen(false)}
                    className="block text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
                    style={{ fontFamily: "'Poppins', sans-serif" }}
                  >
                    Register
                  </Link>
                )}
                <Link
                  to="/donate"
                  onClick={() => setIsMobileMenuOpen(false)}
                  className="block w-full"
                >
                  <Button className="w-full bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-[25px] px-6 py-3 text-base font-semibold">
                    Donate
                  </Button>
                </Link>
              </div>
            </nav>
          </div>
        </div>
      )}
    </>
  );
};

export default PublicNavbar;