// ── ANIMATED NAV (framer-motion) ──────────────────────────
const { motion, useScroll, useMotionValueEvent } = Motion;

const NAV_ITEMS = [
  { name: 'Nosotros', href: '#bivia' },
  { name: 'Servicios', href: '#servicios' },
  { name: 'Proyectos', href: 'proyectos.html' },
  { name: 'Contacto', href: '#contacto' },
];

const EXPAND_SCROLL_THRESHOLD = 80;

const navContainerVariants = {
  expanded: {
    y: 0,
    opacity: 1,
    width: 'auto',
    transition: {
      y: { type: 'spring', damping: 18, stiffness: 250 },
      opacity: { duration: 0.3 },
      type: 'spring',
      damping: 20,
      stiffness: 300,
      staggerChildren: 0.07,
      delayChildren: 0.2,
    },
  },
  collapsed: {
    y: 0,
    opacity: 1,
    width: '3rem',
    transition: {
      type: 'spring',
      damping: 20,
      stiffness: 300,
      when: 'afterChildren',
      staggerChildren: 0.05,
      staggerDirection: -1,
    },
  },
};

const navLogoVariants = {
  expanded: { opacity: 1, x: 0, rotate: 0, transition: { type: 'spring', damping: 15 } },
  collapsed: { opacity: 0, x: -25, rotate: -180, transition: { duration: 0.3 } },
};

const navItemVariants = {
  expanded: { opacity: 1, x: 0, scale: 1, transition: { type: 'spring', damping: 15 } },
  collapsed: { opacity: 0, x: -20, scale: 0.95, transition: { duration: 0.2 } },
};

const navCollapsedIconVariants = {
  expanded: { opacity: 0, scale: 0.8, transition: { duration: 0.2 } },
  collapsed: {
    opacity: 1,
    scale: 1,
    transition: { type: 'spring', damping: 15, stiffness: 300, delay: 0.15 },
  },
};

function AnimatedNav() {
  const [isExpanded, setExpanded] = useState(true);

  const { scrollY } = useScroll();
  const lastScrollY = useRef(0);
  const scrollPositionOnCollapse = useRef(0);

  useMotionValueEvent(scrollY, 'change', (latest) => {
    const previous = lastScrollY.current;

    if (isExpanded && latest > previous && latest > 150) {
      setExpanded(false);
      scrollPositionOnCollapse.current = latest;
    } else if (
      !isExpanded &&
      latest < previous &&
      scrollPositionOnCollapse.current - latest > EXPAND_SCROLL_THRESHOLD
    ) {
      setExpanded(true);
    }

    lastScrollY.current = latest;
  });

  const handleNavClick = (e) => {
    if (!isExpanded) {
      e.preventDefault();
      setExpanded(true);
    }
  };

  return (
    <div className="anav-wrapper">
      <motion.nav
        initial={{ y: -80, opacity: 0 }}
        animate={isExpanded ? 'expanded' : 'collapsed'}
        variants={navContainerVariants}
        whileHover={!isExpanded ? { scale: 1.1 } : {}}
        whileTap={!isExpanded ? { scale: 0.95 } : {}}
        onClick={handleNavClick}
        className={'anav' + (!isExpanded ? ' anav--collapsed' : '')}
      >
        <motion.a
          href="#hero"
          variants={navLogoVariants}
          onClick={(e) => e.stopPropagation()}
          className={'anav-logo' + (!isExpanded ? ' anav-off' : '')}
        >
          <img src="Branding/Bivia_logo_blanco_png.png" alt="BIVIA" />
        </motion.a>

        <motion.div className={'anav-links' + (!isExpanded ? ' anav-off' : '')}>
          {NAV_ITEMS.map((item) => (
            <motion.a
              key={item.name}
              href={item.href}
              variants={navItemVariants}
              onClick={(e) => e.stopPropagation()}
              className="anav-link"
            >
              {item.name}
            </motion.a>
          ))}
          <motion.a
            href="#contacto"
            variants={navItemVariants}
            onClick={(e) => e.stopPropagation()}
            className="anav-cta"
          >
            Iniciar proyecto
          </motion.a>
        </motion.div>

        <div className="anav-collapsed-icon">
          <motion.div
            variants={navCollapsedIconVariants}
            animate={isExpanded ? 'expanded' : 'collapsed'}
          >
            <svg
              width="22"
              height="22"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <line x1="4" y1="6" x2="20" y2="6" />
              <line x1="4" y1="12" x2="20" y2="12" />
              <line x1="4" y1="18" x2="20" y2="18" />
            </svg>
          </motion.div>
        </div>
      </motion.nav>
    </div>
  );
}