/* Top navigation + small UI bits */
const { useEffect: useEffectN, useState: useStateN } = React;

function Nav({ route, go }) {
  const [scrolled, setScrolled] = useStateN(false);
  useEffectN(() => {
    const onScroll = () => setScrolled(window.scrollY > 16);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
  ['about', 'About'],
  ['projects', 'Projects'],
  ['blog', 'Blog'],
  ['contact', 'Contact']];


  return (
    <nav className={"nav " + (scrolled ? "scrolled" : "")}>
      <a className="brand" href="#/" onClick={(e) => {e.preventDefault();go('');}}>
        <span className="dot" style={{ color: "rgb(255, 255, 255)" }}></span>
        <span>KAVY UPADHYAY</span>
      </a>
      <div className="nav-links">
        {links.map(([k, label]) =>
        <a
          key={k}
          href={"#/" + k}
          className={route === k ? 'active' : ''}
          onClick={(e) => {e.preventDefault();go(k);}}>
          
            {label}
          </a>
        )}
      </div>
      <a
        className="nav-cta"
        href="#/contact"
        onClick={(e) => {e.preventDefault();go('contact');}}>
        
        <span className="cta-dot"></span>
        Online
      </a>
    </nav>);

}

function Eyebrow({ children }) {
  return <span className="eyebrow">{children}</span>;
}

function ArrowIcon({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

function ArrowUpRight({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M5 11L11 5M6 5h5v5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

function ProjectCard({ p }) {
  const ref = React.useRef(null);
  const onMove = (e) => {
    const r = ref.current.getBoundingClientRect();
    ref.current.style.setProperty('--mx', e.clientX - r.left + 'px');
    ref.current.style.setProperty('--my', e.clientY - r.top + 'px');
  };
  const Tag = p.href ? 'a' : 'article';
  const extra = p.href ? { href: p.href, target: '_blank', rel: 'noreferrer' } : {};
  return (
    <Tag className="proj" ref={ref} onMouseMove={onMove} {...extra}>
      <div className="proj-art">
        <div className="glyph">{p.glyph}</div>
      </div>
      <header className="proj-head">
        <h3 className="proj-title">{p.title}</h3>
        <span className="arrow-pill"><ArrowUpRight size={13} /></span>
      </header>
      <p className="proj-desc">{p.desc}</p>
      <div className="proj-meta">
        <div className="stack">
          {p.stack.map((s, i) => <span key={i}>{s}</span>)}
        </div>
        <span>{p.year}</span>
      </div>
    </Tag>);

}

Object.assign(window, { Nav, Eyebrow, ArrowIcon, ArrowUpRight, ProjectCard });