const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [time, setTime] = React.useState('');

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

  React.useEffect(() => {
    const tick = () => {
      const d = new Date();
      const h = String(d.getHours()).padStart(2, '0');
      const m = String(d.getMinutes()).padStart(2, '0');
      const s = String(d.getSeconds()).padStart(2, '0');
      setTime(`${h}:${m}:${s}`);
    };
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <header
      className={`fixed top-0 left-0 right-0 z-40 transition-all duration-500`}
      style={{
        backdropFilter: scrolled ? 'blur(12px)' : 'none',
        backgroundColor: scrolled ? 'color-mix(in oklab, var(--bg) 80%, transparent)' : 'transparent',
        borderBottom: scrolled ? '1px solid var(--rule)' : '1px solid transparent',
      }}
    >
      <div className="max-w-[1400px] mx-auto px-6 md:px-10 h-24 flex items-center justify-between">
        <a href="#top" className="flex items-center gap-6 group min-w-[280px]" aria-label="ArchPlan">
          <img src="/static/img/logo.png" alt="ArchPlan" className="h-20 md:h-24 w-auto object-contain" />
          <span className="font-mono text-[9px] uppercase tracking-wider2 text-stone hidden md:inline border-l pl-4" style={{ borderColor: 'var(--rule)' }}>
            ERP / 2026
          </span>
        </a>

        <nav className="hidden md:flex items-center gap-8 text-[13px]">
          {[
            ['Funcionalidades', '#features'],
            ['Demo', '#demo'],
            ['Preços', '#pricing'],
            ['FAQ', '#faq'],
          ].map(([l, h]) => (
            <a key={l} href={h} className="hov-line text-ash hover:text-ink">{l}</a>
          ))}
        </nav>

        <div className="flex items-center gap-3">
          <span className="font-mono text-[10px] text-stone hidden md:inline ticker">{time}</span>
          <a href="/login" className="hidden sm:inline-flex font-mono text-[10px] uppercase tracking-wider2 text-ash hover:text-ink">
            Entrar
          </a>
          <a href="/cadastro" className="btn-primary !py-3 !px-5 !text-[10px]">
            Cadastrar
            <span>↗</span>
          </a>
        </div>
      </div>
    </header>
  );
};

window.Nav = Nav;