// Nav — fixed, goes solid on scroll. Mini side-rail of current section dots on right.

function PalmNav() {
  const y = useScrollY();
  const solid = y > 40;
  const [open, setOpen] = React.useState(false);
  return (
    <nav
      className="fixed top-0 left-0 right-0 z-[90] transition-all duration-500"
      style={{
        background: solid ? "rgba(8,8,8,0.82)" : "transparent",
        backdropFilter: solid ? "blur(16px)" : "none",
        borderBottom: solid ? "1px solid rgba(255,255,255,0.05)" : "1px solid transparent",
      }}
    >
      <div className="max-w-[1600px] mx-auto px-6 md:px-10 h-20 flex items-center justify-between gap-8">
        <a href="#top" className="flex items-center gap-3 shrink-0 mr-4" data-cursor="lg">
          <span className="font-display text-[22px] font-semibold tracking-tight gradient-text-pink">palm</span>
          <span className="text-[9px] tracking-[0.35em] text-[#7a7a7a] uppercase hidden xl:inline">Management</span>
        </a>
        <div className="hidden md:flex items-center gap-10">
          {[
            ["Services", "#services"],
            ["How", "#experience"],
            ["About", "#about"],
            ["Team", "#team"],
            ["Portal", "#portal"],
            ["FAQ", "#faq"],
          ].map(([l, h]) => (
            <a key={l} href={h} className="text-[11px] tracking-[0.2em] uppercase text-[#7a7a7a] hover:text-[#f0ece8] transition-colors duration-300">{l}</a>
          ))}
        </div>
        <div className="flex items-center gap-3">
          <a href="https://app.palm-mgmt.com" className="hidden md:inline-flex text-[11px] tracking-[0.15em] uppercase text-[#7a7a7a] hover:text-[#f0ece8] transition-colors duration-300 px-4 py-2">Creator Login</a>
          <a href="#cta" className="inline-flex items-center gap-2 bg-[#E8A0A0] text-[#060606] px-5 py-2.5 text-[10px] tracking-[0.2em] uppercase font-medium hover:shadow-[0_0_24px_rgba(232,160,160,0.35)] transition-all duration-300" data-cursor="lg">
            Book A Call <span className="text-[8px]">→</span>
          </a>
        </div>
      </div>
    </nav>
  );
}

window.PalmNav = PalmNav;