// Top navigation: pill style with logo, links, and Play Now CTA
const { motion } = window.Motion || {};

const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // On load: if the URL has a hash for a section on this page, scroll with nav offset
  React.useEffect(() => {
    const id = window.location.hash.replace('#', '');
    if (!id) return;
    const el = document.getElementById(id);
    if (!el) return;
    requestAnimationFrame(() => {
      const navOffset = 136;
      const top = el.getBoundingClientRect().top + window.scrollY - navOffset;
      window.scrollTo({ top, behavior: 'smooth' });
    });
  }, []);

  const scrollTo = (id) => (e) => {
    const el = document.getElementById(id);
    if (el) {
      // Section is on this page — smooth-scroll instead of jumping
      e.preventDefault();
      const navOffset = 136;
      const top = el.getBoundingClientRect().top + window.scrollY - navOffset;
      window.scrollTo({ top, behavior: 'smooth' });
    }
    // Otherwise let the browser follow the href (e.g. to index.html#id)
    setOpen(false);
  };

  return (
    <motion.div
      initial={{ y: -24, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
      style={{
        position: 'fixed', top: 16, left: 0, right: 0, zIndex: 50,
        display: 'flex', justifyContent: 'center',
        padding: '0 16px',
        pointerEvents: 'none'
      }}>
      
      <nav
        style={{
          pointerEvents: 'auto',
          background: 'var(--brand-black)',
          color: 'var(--brand-white)',
          borderRadius: 'var(--radius-pill)',
          height: 72,
          padding: '0 12px 0 24px',
          display: 'flex', alignItems: 'center', gap: 8,
          width: '100%',
          maxWidth: 'min(1000px, calc(100vw - 32px))',
          justifyContent: 'space-between'
        }}>
        
        <a href="." style={{ display: 'flex', alignItems: 'center', paddingRight: 12 }}>
          <picture>
            <source srcSet="public/logo.webp" type="image/webp" />
            <img src="public/logo.png" alt="BOBA FRIENDS" style={{ height: 36, width: 'auto', display: 'block' }} />
          </picture>
        </a>

        <div className="nav-links" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <a href="index.html#games" onClick={scrollTo('games')} className="nav-link">GAMES</a>
          <a href="index.html#faq" onClick={scrollTo('faq')} className="nav-link">FAQ</a>
          <a href="privacy.html" className="nav-link">PRIVACY POLICY</a>
        </div>

        <a href="https://apps.apple.com/us/app/boba-tale/id1615247565" target="_blank" rel="noopener noreferrer" className="nav-cta" style={{ borderWidth: "1.5px" }}>
          PLAY NOW
        </a>

        <button
          aria-label="Open menu"
          className="nav-burger"
          onClick={() => setOpen((o) => !o)}
          style={{
            background: 'var(--brand-yellow)', border: 'none', color: 'var(--brand-black)',
            display: 'none', width: 56, height: 48, borderRadius: 24, alignItems: 'center', justifyContent: 'center'
          }}>
          
          <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
            {open ? <path d="M6 6l12 12M6 18L18 6" /> : <><path d="M4 7h16" /><path d="M4 12h16" /><path d="M4 17h16" /></>}
          </svg>
        </button>
      </nav>

      {/* Mobile drawer */}
      {open &&
      <motion.div
        initial={{ opacity: 0, y: -8 }}
        animate={{ opacity: 1, y: 0 }}
        style={{
          pointerEvents: 'auto',
          position: 'absolute', top: 80, left: 16, right: 16,
          background: 'var(--brand-black)', color: 'var(--brand-white)',
          borderRadius: 40, padding: 16,
          display: 'flex', flexDirection: 'column', gap: 0
        }}>
        
          <a href="index.html#games" onClick={scrollTo('games')} className="nav-link mobile">GAMES</a>
          <a href="index.html#faq" onClick={scrollTo('faq')} className="nav-link mobile">FAQ</a>
          <a href="privacy.html" className="nav-link mobile">PRIVACY POLICY</a>
          <a href="https://apps.apple.com/us/app/boba-tale/id1615247565" target="_blank" rel="noopener noreferrer" className="nav-cta mobile">PLAY NOW</a>
        </motion.div>
      }

      <style>{`
        .nav-link {
          font-size: 18px; font-weight: 600;
          padding: 8px 18px; border-radius: 9999px;
          color: #fff;
          border: 1.5px solid transparent;
          transition: border-color 160ms ease;
        }
        .nav-link:hover { border-color: #fff; }
        .nav-cta {
          display: inline-flex; align-items: center; justify-content: center;
          font-size: 18px; font-weight: 600;
          letter-spacing: 0.04em;
          padding: 8px 22px; border-radius: 9999px;
          color: #fff;
          background: transparent;
          border: 1px solid #fff;
          text-transform: uppercase;
          transition: background 160ms ease, color 160ms ease;
          cursor: pointer;
        }
        .nav-cta:hover { background: #FFCF55; color: var(--brand-black); border-color: transparent; }
        .nav-cta.mobile { margin-top: 8px; width: 100%; padding: 12px 22px; }
        .nav-link.mobile { padding: 8px 14px; font-size: 18px; text-align: left; }
        @media (max-width: 810px) {
          .nav-cta:not(.mobile) { display: none !important; }
          .nav-links { display: none !important; }
          .nav-burger { display: inline-flex !important; }
        }
      `}</style>
    </motion.div>);

};

window.Nav = Nav;