import { Link } from "react-router-dom";
import { motion, useScroll, useTransform } from "framer-motion";
import { useReducedMotion } from "../../lib/useReducedMotion";
import { BrandMark } from "../BrandMark";

/**
 * Nav flotante. Arranca casi transparente sobre el hero y se condensa al bajar:
 * fondo y desenfoque suben juntos, que es lo que evita el salto brusco de un
 * `position: fixed` con fondo sólido desde el primer píxel.
 */
export function LandingNav() {
  const reduced = useReducedMotion();
  const { scrollY } = useScroll();
  const fondo = useTransform(scrollY, [0, 140], ["rgba(255,251,247,0)", "rgba(255,251,247,0.86)"]);
  const desenfoque = useTransform(scrollY, [0, 140], ["blur(0px)", "blur(16px)"]);
  const borde = useTransform(scrollY, [0, 140], ["rgba(27,21,51,0)", "rgba(27,21,51,0.1)"]);

  return (
    <motion.header
      className="safe-top fixed inset-x-0 top-0 z-50 border-b"
      style={
        reduced
          ? { background: "rgba(255,251,247,0.92)", borderColor: "rgba(27,21,51,0.1)" }
          : { background: fondo, backdropFilter: desenfoque, borderColor: borde }
      }
    >
      <nav className="ld-wrap flex items-center justify-between gap-4 px-5 py-3">
        <Link
          to="/"
          className="tap-target flex items-center gap-2.5 text-[1.05rem] font-extrabold tracking-tight"
        >
          <BrandMark className="h-8 w-8" />
          AgendaMax
        </Link>
        <Link
          to="/login"
          className="ld-cta"
          style={{ minHeight: 46, paddingInline: "1.35rem", fontSize: "0.9rem" }}
        >
          Entrar
        </Link>
      </nav>
    </motion.header>
  );
}