// nav.jsx
const { useState: useStateNav, useRef: useRefNav, useEffect: useEffectNav } = React;

const KNOWHUB_ITEMS = [
  { id:'kh-webinare',  label:'Webináře',           desc:'Online setkání s odborníky, zdarma',                icon:'📡' },
  { id:'kh-skoleni',   label:'Školení pro firmy',  desc:'Workshopy na míru tvému týmu',                       icon:'🎯' },
  { id:'kh-mom',       label:'Master of Marketing',desc:'Náš vlajkový vzdělávací program',                    icon:'⬢' },
  { id:'kh-podcast',   label:'Podcast',            desc:'Rozhovory s lidmi, kteří dělají věci jinak',         icon:'🎙' },
  { id:'kh-blog',      label:'Blog',               desc:'Texty, eseje, postřehy',                              icon:'✍' },
  { id:'kh-kniha',     label:'Tomova kniha',       desc:'Dvanáct let zkušeností sepsaných do jedné knihy',     icon:'📕' },
  { id:'kh-konzultace',label:'Konzultace',         desc:'1:1 hodinová konzultace s námi (ask.justmighty.cz)',  icon:'💬' },
];

function Nav({ onNav, page }) {
  const scrolled = useScrolled(40);
  const [open, setOpen] = useStateNav(false);
  const closeTimer = useRefNav(null);

  const handleEnter = () => {
    if (closeTimer.current) clearTimeout(closeTimer.current);
    setOpen(true);
  };
  const handleLeave = () => {
    closeTimer.current = setTimeout(() => setOpen(false), 120);
  };
  const handleNav = (target) => { setOpen(false); onNav(target); };

  return (
    <header className={"nav " + (scrolled ? "scrolled" : "")}>
      <a href="#" className="nav__brand" onClick={(e)=>{e.preventDefault();onNav('home')}} aria-label="Justmighty">
        <img src="./assets/justmighty-logo.png" alt="Justmighty" className="nav__brand-logo" />
      </a>
      <nav className="nav__links">
        <a href="#projekty" className={page==='projekty'?'is-active':''} onClick={(e)=>{e.preventDefault();onNav('projekty')}}>Projekty</a>
        <a href="#sluzby" className={page==='sluzby'?'is-active':''} onClick={(e)=>{e.preventDefault();onNav('sluzby')}}>Služby</a>
        <div
          className={"nav__kh-wrap " + (open?'is-open':'')}
          onMouseEnter={handleEnter}
          onMouseLeave={handleLeave}
        >
          <a
            href="#knowhub"
            className={"nav__kh-trigger " + (page==='knowhub' || (page && page.startsWith && page.startsWith('kh-')) ? 'is-active' : '')}
            onClick={(e)=>{e.preventDefault();handleNav('knowhub');}}
            aria-expanded={open}
          >
            <span className="nav__kh-dot" />
            Knowhub
            <span className="nav__kh-caret">▾</span>
          </a>
          <div className="nav__mega" role="menu" aria-hidden={!open}>
            <div className="nav__mega-head">
              <div>
                <span className="mono nav__mega-eyebrow">● vzděláváme. sdílíme. spojujeme.</span>
                <h3 className="nav__mega-title">Knowhub<span style={{color:'var(--coral)'}}>.</span></h3>
              </div>
              <a className="nav__mega-allink" href="#knowhub" onClick={(e)=>{e.preventDefault();handleNav('knowhub');}}>
                Otevřít celý Knowhub <span className="arrow">↗</span>
              </a>
            </div>
            <ul className="nav__mega-grid">
              {KNOWHUB_ITEMS.map(it => (
                <li key={it.id}>
                  <a href={'#'+it.id} onClick={(e)=>{e.preventDefault();handleNav(it.id);}}>
                    <span className="nav__mega-icon" aria-hidden="true">{it.icon}</span>
                    <span className="nav__mega-body">
                      <span className="nav__mega-label">{it.label}</span>
                      <span className="nav__mega-desc">{it.desc}</span>
                    </span>
                    <span className="nav__mega-arrow">→</span>
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </div>
        <a href="#onas" className={page==='onas'?'is-active':''} onClick={(e)=>{e.preventDefault();onNav('onas')}}>O nás</a>
        <a href="#kariera" className={page==='kariera'?'is-active':''} onClick={(e)=>{e.preventDefault();onNav('kariera')}}>Kariéra</a>
        <a href="#kontakt" className={page==='kontakt'?'is-active':''} onClick={(e)=>{e.preventDefault();onNav('kontakt')}}>Kontakt</a>
      </nav>
      <div className="nav__cta">
        <span className="mono nav__lang" style={{fontSize:12,opacity:.6,display:'inline-flex',gap:6}}>
          <button onClick={(e)=>e.preventDefault()} style={{padding:0,opacity:1,color:'var(--coral)'}}>CZ</button>
          <span style={{opacity:.4}}>/</span>
          <button onClick={(e)=>e.preventDefault()} style={{padding:0,opacity:.55}}>EN</button>
        </span>
        <button className="btn btn--ghost btn--sm nav__cta-justask" onClick={()=>onNav('justask')}>
          Justask <span className="nav__cta-tag">zdarma</span>
        </button>
        <button className="btn btn--coral" onClick={()=>onNav('home','contact')}>
          Začít projekt
          <span className="arrow">↗</span>
        </button>
      </div>
    </header>
  );
}
window.Nav = Nav;