"use client";

import { useEffect, useState } from "react";
import { motion } from "framer-motion";

export default function Navbar() {
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handler = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", handler);
    return () => window.removeEventListener("scroll", handler);
  }, []);

  return (
    <motion.header
      initial={{ opacity: 0, y: -12 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.45 }}
      className={`sticky top-0 z-50 transition-all duration-300 ${
        scrolled ? "glass border-b border-black/10" : "bg-transparent"
      }`}
    >
      <div className="mx-auto max-w-6xl px-6 h-16 flex items-center justify-between">
        <a
          href="/"
          className="text-sm font-semibold tracking-tight text-black/85 transition hover:text-black"
        >
          dewinnebrian
        </a>

        <nav className="flex items-center gap-8 text-sm text-black/65">
          <a href="/#projects" className="transition hover:text-black">
            Projects
          </a>
          <a href="/lab" className="transition hover:text-black">
            Lab
          </a>
          <a
            href="mailto:website+dewinnebrian@gmail.com"
            className="transition hover:text-black"
          >
            Contact
          </a>
        </nav>
      </div>

      {scrolled && (
        <div className="absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent via-black/10 to-transparent" />
      )}
    </motion.header>
  );
}