import React, { useState } from 'react';
import { motion, useScroll, useMotionValueEvent, useSpring } from 'framer-motion';

const Navbar: React.FC = () => {
  const [hidden, setHidden] = useState(false);
  const { scrollY, scrollYProgress } = useScroll();
  
  const scaleX = useSpring(scrollYProgress, {
    stiffness: 100,
    damping: 30,
    restDelta: 0.001
  });

  useMotionValueEvent(scrollY, "change", (latest) => {
    const previous = scrollY.getPrevious() || 0;
    if (latest > previous && latest > 150) {
      setHidden(true);
    } else {
      setHidden(false);
    }
  });

  return (
    <motion.nav
      variants={{
        visible: { y: 0 },
        hidden: { y: "-100%" },
      }}
      animate={hidden ? "hidden" : "visible"}
      transition={{ duration: 0.35, ease: "easeInOut" }}
      className="fixed w-full z-40 top-0 left-0 border-b border-gray-200 dark:border-white/10 bg-white/80 dark:bg-background-dark/80 backdrop-blur-md"
    >
      <div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <motion.div
            whileHover={{ rotate: 180 }}
            transition={{ duration: 0.5 }}
          >
            <span className="material-symbols-outlined text-xl dark:text-white text-black">dns</span>
          </motion.div>
          <span className="font-display font-bold text-lg tracking-tight">Bay Area Affiliates</span>
        </div>
        
        <div className="hidden md:flex items-center gap-8 text-sm font-medium text-gray-600 dark:text-gray-400">
          {['Services', 'Features', 'Blog', 'Contact'].map((item) => (
            <motion.a 
              key={item}
              href={`#${item.toLowerCase()}`}
              className="hover:text-black dark:hover:text-white transition-colors relative group px-2 py-1"
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
            >
              {item}
              <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-black dark:bg-white transition-all duration-300 ease-out group-hover:w-full"></span>
            </motion.a>
          ))}
        </div>
        
        <motion.a 
          href="#" 
          className="text-sm font-medium bg-black dark:bg-white text-white dark:text-black px-4 py-2 rounded-full transition-all"
          whileHover={{ 
            scale: 1.05, 
            boxShadow: "0px 0px 15px rgba(100, 100, 100, 0.5)" 
          }}
          whileTap={{ scale: 0.95 }}
        >
          Client Portal
        </motion.a>
      </div>
      
      {/* Scroll Progress Indicator */}
      <motion.div 
        className="absolute bottom-0 left-0 right-0 h-[2px] bg-blue-600 dark:bg-blue-500 origin-left z-50"
        style={{ scaleX }}
      />
    </motion.nav>
  );
};

export default Navbar;