const Nav = ({ hrefBase = '', active = '', ctaLabel = 'Deals ansehen →', ctaHref = '/deals', onCtaClick }) => {
  const a = (h) => hrefBase ? `${hrefBase}${h}` : h;
  const logoHref = hrefBase || '#';
  // On non-home pages (hrefBase set, e.g. /deals / /deal) the nav is always visible.
  // On the home page the minimal hero-overlay logo morphs into the full nav after scroll.
  const isInternalPage = !!hrefBase;
  const [scrolled, setScrolled] = React.useState(isInternalPage);

  React.useEffect(() => {
    if (isInternalPage) return; // always visible on internal pages
    const onScroll = () => {
      const threshold = Math.min(window.innerHeight * 0.75, 720);
      setScrolled(window.scrollY > threshold);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [isInternalPage]);

  const Logo = () => (
    <a className="v-nav-logo" href={logoHref} style={{textDecoration:'none',color:'inherit'}}>
      <svg width="22" height="16" viewBox="0 0 22 16" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="miter">
        <path d="M1 1L11 15L21 1"/><path d="M6 1L11 8L16 1"/>
      </svg>
      VIRTORUM
    </a>
  );

  return (
    <>
      <nav className={`v-nav-minimal ${scrolled ? 'is-hidden' : 'is-visible'}`}>
        <Logo/>
      </nav>
      <nav className={`v-nav ${scrolled ? 'is-visible' : 'is-hidden'}`}>
        <Logo/>
        <div className="v-nav-links">
          <a href={a('#problem')}>DE vs USA</a>
          <a href={a('#fallstudien')}>Fallstudien</a>
          <a href={a('#prozess')}>Prozess</a>
          <a href={a('#team')}>Team</a>
          <a href={a('#faq')}>FAQ</a>
        </div>
        {onCtaClick
          ? <button type="button" className="v-btn-nav" onClick={onCtaClick} style={{display:'inline-flex',alignItems:'center'}}>{ctaLabel}</button>
          : <a className="v-btn-nav" href={ctaHref} style={{textDecoration:'none',display:'inline-flex',alignItems:'center'}}>{ctaLabel}</a>}
      </nav>
    </>
  );
};
window.Nav = Nav;
window.Masthead = () => null;