// 01 — Navegación principal
function CNav() {
  const [, t] = window.useLang();
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  const items = [
    { label: t.nav.catedra, id: "catedra" },
    { label: t.nav.formacion, id: "formacion" },
    { label: t.nav.investigacion, id: "investigacion" },
    { label: t.nav.divulgacion, id: "divulgacion" },
    { label: t.nav.noticias, id: "noticias" },
    { label: t.nav.membresias, id: "membresias" },
  ];

  const goAnchor = (e, id) => {
    e.preventDefault();
    const el = document.querySelector(`[data-anchor="${id}"]`);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 60;
      window.scrollTo({ top, behavior: 'smooth' });
    }
    setOpen(false);
  };

  return (
    <nav className="cgclm-nav" data-scrolled={scrolled} onMouseEnter={() => setScrolled(true)} onMouseLeave={() => setScrolled(false)}>
      <style>{`
        .cgclm-nav {
          display: flex; align-items: center; gap: 28px;
          padding: 18px 28px;
          background: var(--c-cream);
          border-bottom: 1px solid var(--c-line);
          position: relative;
        }
        .cgclm-nav .cn-brand { display: flex; align-items: center; }
        .cgclm-nav .cn-links { display: flex; gap: 4px; margin-left: auto; }
        .cgclm-nav .cn-link {
          font: 500 14px var(--font-body);
          color: var(--c-ink);
          text-decoration: none;
          padding: 8px 14px;
          border-radius: 999px;
          position: relative;
          transition: all .2s ease;
        }
        .cgclm-nav .cn-link::after {
          content: ""; position: absolute;
          left: 14px; right: 14px; bottom: 4px;
          height: 1px; background: var(--c-red);
          transform: scaleX(0); transform-origin: left;
          transition: transform .3s cubic-bezier(.6,.2,.2,1);
        }
        .cgclm-nav .cn-link:hover { color: var(--c-red); }
        .cgclm-nav .cn-link:hover::after { transform: scaleX(1); }
        .cgclm-nav .cn-cta {
          font: 600 13px var(--font-body);
          letter-spacing: 0.02em;
          color: white; background: var(--c-green);
          padding: 10px 18px;
          border-radius: 999px;
          text-decoration: none;
          display: inline-flex; align-items: center; gap: 6px;
          transition: all .25s ease;
        }
        .cgclm-nav .cn-cta:hover {
          background: var(--c-green-deep);
          transform: translate(2px, -2px);
          box-shadow: -4px 4px 0 var(--c-red);
        }
        .cgclm-nav .cn-burger { display: none; }
        @media (max-width: 880px) {
          .cgclm-nav .cn-links { display: none; }
          .cgclm-nav .cn-cta { display: none; }
          .cgclm-nav .cn-burger {
            display: inline-flex; flex-direction: column; gap: 4px;
            background: none; border: none; cursor: pointer; padding: 8px;
            margin-left: auto;
          }
          .cgclm-nav .cn-burger span {
            width: 24px; height: 2px; background: var(--c-ink); border-radius: 2px;
          }
          .cgclm-nav[data-open="true"] .cn-links {
            display: flex; flex-direction: column;
            position: absolute; top: 100%; left: 0; right: 0;
            background: var(--c-cream); padding: 16px;
            border-bottom: 1px solid var(--c-line);
            gap: 0;
          }
        }
      `}</style>
      <div className="cn-brand"><CGLogoLockup /></div>
      <div className="cn-links">
        {items.map((it, i) => (
          <a key={i} href={`#${it.id}`} onClick={(e) => goAnchor(e, it.id)} className="cn-link">{it.label}</a>
        ))}
      </div>
      <a
        href="https://wa.me/34628126263?text=Hola%20Cátedra%20de%20Gastronomía%20CLM"
        target="_blank"
        rel="noreferrer noopener"
        className="cn-cta"
      >{t.nav.cta} <Arrow size={14} /></a>
      <button className="cn-burger" onClick={() => setOpen(!open)} aria-label="Menu">
        <span></span><span></span><span></span>
      </button>
    </nav>
  );
}

window.CNav = CNav;