// shared.jsx — global SiteNav, SiteFooter, MobCTA
const _useEffect = React.useEffect;
const _useState = React.useState;

const NAV_PAGES = [
  { href: 'ambasadori.html', label: 'Za ambasadore' },
  { href: 'kako-radi.html',  label: 'Kako radi' },
  { href: 'kampanje.html',   label: 'Aktivne kampanje' },
  { href: 'brandovi.html',   label: 'Za brandove' },
  { href: 'pilot.html',      label: '500 EUR Pilot' },
  { href: 'faq.html',        label: 'FAQ' },
];

const IconMenu = () => (
  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
    <line x1="3" y1="6" x2="21" y2="6"/>
    <line x1="3" y1="12" x2="21" y2="12"/>
    <line x1="3" y1="18" x2="21" y2="18"/>
  </svg>
);
const IconClose = () => (
  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
    <line x1="6" y1="6" x2="18" y2="18"/>
    <line x1="18" y1="6" x2="6" y2="18"/>
  </svg>
);

function SiteNav({ currentPage }) {
  const [scrolled, setScrolled] = _useState(false);
  const [drawerOpen, setDrawerOpen] = _useState(false);

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

  _useEffect(() => {
    document.body.style.overflow = drawerOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [drawerOpen]);

  return (
    <>
      <nav className={`nav${scrolled ? ' scrolled' : ''}`}>
        <div className="wrap nav-row">
          <a href="index.html" className="brand">
            <span className="brand-dot" aria-hidden="true"></span>
            <span>become<span style={{color:'var(--ink-3)',fontWeight:500,marginLeft:4}}>.promo</span></span>
          </a>
          <div className="nav-links">
            {NAV_PAGES.map(p => (
              <a key={p.href} href={p.href} className={p.href === currentPage ? 'active' : ''}>{p.label}</a>
            ))}
          </div>
          <div className="nav-cta">
            <a className="btn btn-ghost" href="login.html" style={{height:38,padding:'0 16px',fontSize:12}}>Login</a>
            <a className="btn btn-primary" href="pilot.html" style={{height:38,padding:'0 16px',fontSize:11}}>
              500 EUR Pilot <span className="arr">↗</span>
            </a>
            <button className="btn nav-burger" aria-label="Otvori meni" onClick={() => setDrawerOpen(true)}>
              <IconMenu />
            </button>
          </div>
        </div>
      </nav>

      <div className="drawer" data-open={drawerOpen ? 'true' : 'false'}>
        <div className="drawer-head">
          <a href="index.html" className="brand">
            <span className="brand-dot" aria-hidden="true"></span>
            <span>become<span style={{color:'var(--ink-3)',fontWeight:500,marginLeft:4}}>.promo</span></span>
          </a>
          <button className="drawer-close" aria-label="Zatvori meni" onClick={() => setDrawerOpen(false)}>
            <IconClose />
          </button>
        </div>
        <nav className="drawer-links">
          {[
            { href:'ambasadori.html', label:'Želim biti ambasador' },
            { href:'brandovi.html',   label:'Želim pokrenuti kampanju' },
            { href:'kampanje.html',   label:'Aktivne kampanje' },
            { href:'kako-radi.html',  label:'Kako radi' },
            { href:'faq.html',        label:'FAQ' },
            { href:'o-nama.html',     label:'O nama' },
            { href:'kontakt.html',    label:'Kontakt' },
            { href:'login.html',      label:'Login' },
          ].map(p => (
            <a key={p.href} href={p.href} className={p.href === currentPage ? 'active' : ''}>
              {p.label} <span className="arr">→</span>
            </a>
          ))}
        </nav>
        <div className="drawer-footer">
          <a className="btn btn-primary" href="ambasadori.html">Postani ambasador <span className="arr">↗</span></a>
          <a className="btn btn-outline-neon" href="pilot.html">Pokreni pilot za 500 EUR <span className="arr">↗</span></a>
        </div>
      </div>
    </>
  );
}

function SiteFooter() {
  return (
    <footer>
      <div className="wrap">
        <div className="foot">
          <div>
            <a href="index.html" className="brand">
              <span className="brand-dot" aria-hidden="true"></span>
              <span>become<span style={{color:'var(--ink-3)',fontWeight:500,marginLeft:4}}>.promo</span></span>
            </a>
            <p className="colo">
              become.promo je BuyChat servis za povezivanje FMCG brandova i stvarnih potrošača kroz WhatsApp, selfie, račune, referral i reward kampanje.
            </p>
          </div>
          <div>
            <h5>become.promo</h5>
            <ul>
              <li><a href="o-nama.html">O nama</a></li>
              <li><a href="kako-radi.html">Kako radi</a></li>
              <li><a href="ambasadori.html">Za ambasadore</a></li>
              <li><a href="brandovi.html">Za brandove</a></li>
            </ul>
          </div>
          <div>
            <h5>Kampanje</h5>
            <ul>
              <li><a href="kampanje.html">Aktivne kampanje</a></li>
              <li><a href="ambasadori.html#klub">Ambassador Club</a></li>
              <li><a href="faq.html#potrosaci">FAQ za potrošače</a></li>
            </ul>
          </div>
          <div>
            <h5>Brandovi</h5>
            <ul>
              <li><a href="pilot.html">500 EUR Pilot</a></li>
              <li><a href="login.html">Business Portal login</a></li>
              <li><a href="faq.html#brandovi">FAQ za brandove</a></li>
            </ul>
          </div>
          <div>
            <h5>Pravno</h5>
            <ul>
              <li><a href="privatnost.html">Pravila privatnosti</a></li>
              <li><a href="uvjeti-koristenja.html">Uvjeti korištenja</a></li>
              <li><a href="kontakt.html">Kontakt</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bot">
          <span>© 2026 become.promo</span>
          <span>BuyChat servis</span>
          <span>Made in Zagreb</span>
        </div>
      </div>
    </footer>
  );
}

function MobCTA({ isB2BPage }) {
  if (isB2BPage) {
    return (
      <div className="mob-cta">
        <a className="btn btn-primary" href="pilot.html">Pokreni pilot za 500 EUR <span className="arr">↗</span></a>
      </div>
    );
  }
  return (
    <div className="mob-cta">
      <a className="btn btn-outline-neon" href="brandovi.html">Za brandove</a>
      <a className="btn btn-primary" href="ambasadori.html">Postani ambasador <span className="arr">↗</span></a>
    </div>
  );
}