// Navigation. transparent over hero, oxblood/blur after scroll. Mobile overlay.

const NAV_ITEMS = [
  { id: 'about', label: 'About' },
  { id: 'services', label: 'Healing' },
  { id: 'books', label: "Children's Books" },
  { id: 'soulpath', label: 'SoulPath' },
  { id: 'yidaki', label: 'Yidaki' },
  { id: 'shop', label: 'Shop' },
  { id: 'contact', label: 'Contact' },
];

function NavBrandMark() {
  return (
    <svg className="nav__brand-mark" viewBox="0 0 32 32" fill="none">
      <g stroke="#C9951A" strokeWidth="1.4" strokeLinecap="round">
        <path d="M16 16 C 22 8, 28 8, 30 6 C 28 12, 24 14, 16 16 Z" fill="rgba(201,149,26,0.2)"/>
        <path d="M16 16 C 10 8, 4 8, 2 6 C 4 12, 8 14, 16 16 Z" fill="rgba(201,149,26,0.2)"/>
      </g>
      <circle cx="16" cy="16" r="3" fill="#FFE9B0"/>
    </svg>
  );
}

function Nav({ onBook }) {
  const y = useScrollY();
  const scrolled = y > 80;
  const [open, setOpen] = useState(false);

  // Lock body scroll when overlay open
  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const handleNav = (id) => {
    setOpen(false);
    requestAnimationFrame(() => smoothScrollTo(id));
  };

  return (
    <>
      <nav className={`nav ${scrolled ? 'is-scrolled' : ''}`}>
        <a className="nav__brand" href="#top" onClick={(e)=>{e.preventDefault(); smoothScrollTo('top');}}>
          <NavBrandMark/>
          The Cosmic Healer
        </a>
        <ul className="nav__links">
          {NAV_ITEMS.map(item => (
            <li key={item.id}>
              <a
                className="nav__link"
                href={`#${item.id}`}
                onClick={(e)=>{e.preventDefault(); handleNav(item.id);}}
              >{item.label}</a>
            </li>
          ))}
        </ul>
        <div className="nav__cta">
          <Button size="sm" onClick={onBook}>Book a Session</Button>
        </div>
        <button
          className={`nav__burger ${open ? 'is-open' : ''}`}
          aria-label="Menu"
          onClick={()=>setOpen(o=>!o)}
        >
          <span/><span/><span/>
        </button>
      </nav>

      <div className={`nav__overlay ${open ? 'is-open' : ''}`}>
        {NAV_ITEMS.map((item, i) => (
          <a
            key={item.id}
            href={`#${item.id}`}
            onClick={(e)=>{e.preventDefault(); handleNav(item.id);}}
            style={{ transitionDelay: open ? `${100 + i * 150}ms` : '0ms' }}
          >{item.label}</a>
        ))}
        <div style={{ marginTop: 16, transitionDelay: open ? `${100 + NAV_ITEMS.length * 150}ms` : '0ms', opacity: open ? 1 : 0, transition: 'opacity 320ms cubic-bezier(0.22,1,0.36,1)' }}>
          <Button onClick={()=>{setOpen(false); onBook && onBook();}}>Book a Session</Button>
        </div>
      </div>
    </>
  );
}

window.Nav = Nav;