import { NavLink } from "./NavLink"; // Assuming NavLink is in the same directory
import { motion } from "framer-motion";

const Header = () => {
  return (
    <header className="fixed top-0 left-0 w-full z-50 pt-6">
      {/* CONTAINER: 
          - max-w-6xl: Limits the width (approx 1152px)
          - mx-auto: Centers it horizontally
          - w-[95%]: Ensures it doesn't touch screen edges on mobile
      */}
      <div className="max-w-6xl mx-auto w-[95%] bg-slate-900/40 backdrop-blur-md border border-white/10 rounded-2xl px-8 py-4 flex items-center justify-between">
        
        {/* Logo Section */}
        <div className="text-white font-bold text-xl tracking-tighter">
          MECHANOME BIO
        </div>

        {/* Navigation Section */}
        <nav className="flex items-center gap-8">
          <NavLink 
            to="/" 
            className="text-sm font-medium text-slate-400 hover:text-white transition-colors"
            activeClassName="text-white"
          >
            Home
          </NavLink>
          <NavLink 
            to="/technology" 
            className="text-sm font-medium text-slate-400 hover:text-white transition-colors"
          >
            Technology
          </NavLink>
          
          {/* Using your custom HeroButton style for a CTA */}
          <a href="mailto:contact@mechanome.bio" className="ml-4">
            <motion.span 
              className="px-5 py-2 text-xs font-bold border border-coral-500 text-coral-500 hover:bg-coral-500 hover:text-white transition-all rounded-sm"
              whileHover={{ scale: 1.05 }}
            >
              CONTACT
            </motion.span>
          </a>
        </nav>
      </div>
    </header>
  );
};

export default Header;