/* nav.jsx — Navigation bar */

const NavBar = ({ page, setPage, dark }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [activeHash, setActiveHash] = React.useState('');

  React.useEffect(() => {
    const sectionIds = ['nosotros', 'servicios', 'linea-blanca', 'empleo', 'contacto'];
    const onScroll = () => {
      setScrolled(window.scrollY > 16);
      if (page !== 'home') { setActiveHash(''); return; }
      let current = '';
      for (const id of sectionIds) {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top - 100 <= 0) current = id;
      }
      setActiveHash(current);
    };
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, [page]);

  const items = [
  { id: 'home', label: 'Home' },
  { id: 'home#nosotros', label: 'Nosotros' },
  { id: 'home#servicios', label: 'Servicios' },
  { id: 'home#linea-blanca', label: 'Línea Blanca', highlight: true },
  { id: 'proyectos', label: 'Proyectos' },
  { id: 'home#empleo', label: 'Empleo' },
  { id: 'home#contacto', label: 'Contacto' }];


  const isActive = (it) => {
    const [view, hash] = it.id.split('#');
    if (view !== page) return false;
    if (page === 'home') return (hash || '') === activeHash;
    return true;
  };

  const goTo = (id) => {
    setMobileOpen(false);
    const [view, hash] = id.split('#');
    setPage(view);
    if (hash) {
      setTimeout(() => {
        const el = document.getElementById(hash);
        if (el) {
          const top = el.getBoundingClientRect().top + window.scrollY - 80;
          window.scrollTo({ top, behavior: 'smooth' });
        }
      }, 50);
    } else {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  };

  return (
    <header className={"nav " + (scrolled ? "nav-scrolled" : "")}>
      <div className="nav-inner">
        <div className="nav-logo" onClick={() => goTo('home')}>
          <Logo dark={dark} />
        </div>
        <nav className="nav-links">
          {items.map((it) =>
          <a key={it.id}
          className={"nav-link " + (it.highlight ? 'nav-link-hl' : '') + ' ' + (isActive(it) ? 'is-active' : '')}
          onClick={() => goTo(it.id)}>
              {it.label}
            </a>
          )}
        </nav>
        <div className="nav-actions">
          <button className="btn btn-primary btn-sm nav-cta"
          onClick={() => goTo('home#contacto')}>
            Cotizar proyecto
          </button>
          <button className="nav-burger" onClick={() => setMobileOpen(!mobileOpen)} aria-label="Menu">
            <span /><span /><span />
          </button>
        </div>
      </div>
      {mobileOpen &&
      <div className="nav-mobile">
          {items.map((it) =>
        <a key={it.id} className="nav-mobile-link" onClick={() => goTo(it.id)}>{it.label}</a>
        )}
        </div>
      }
    </header>);

};

const Logo = ({ dark, variant = 'full' }) =>
<div className={"logo-wrap logo-" + variant + (dark ? ' logo-dark' : '')}>
  <img src="photos/aclimatar-logo.png" alt="Aclimatar" className="logo-img" />
  <div className="logo-tag">INGENIERÍA &amp; OBRAS TERMOMECÁNICAS</div>
</div>;


window.NavBar = NavBar;
window.Logo = Logo;