/* SUPERMEDIA storefront — chrome: black top bar, white nav bar, footer. */
const { useState: useStateC } = React;

function DesktopTopbar({ cartCount, wishCount, user, query, setQuery, onSearch, onNav }) {
  const ulink = { display: 'inline-flex', alignItems: 'center', gap: 7, color: 'rgba(255,255,255,.92)', fontFamily: 'var(--sm-font-body)', fontSize: 13, fontWeight: 500, cursor: 'pointer', textDecoration: 'none', transition: 'color .15s' };
  const hov = e => e.currentTarget.style.color = '#fff';
  const out = e => e.currentTarget.style.color = 'rgba(255,255,255,.92)';
  const [focused, setFocused] = useStateC(false);
  const sugg = (query && query.trim().length >= 2 && window.smSearch) ? window.smSearch(query, 7) : [];
  const showSugg = focused && (query || '').trim().length >= 2;
  const pickProduct = (p) => { setFocused(false); onNav({ view: 'product', id: p.id }); };
  const seeAll = () => { setFocused(false); onSearch(); };
  return (
    <div style={{ background: 'var(--sm-black)', color: '#fff', position: 'relative', zIndex: 40 }}>
      {/* utility strip */}
      <div>
        <div style={{ maxWidth: 1440, margin: '0 auto', height: 40, padding: '0 24px', display: 'flex', alignItems: 'center', gap: 26 }}>
          <a style={ulink} onMouseEnter={hov} onMouseLeave={out} onClick={() => onNav({ view: 'page', key: 'kontakt' })}>{I('phone', 15)} Pozovi nas</a>
          <a style={ulink} onMouseEnter={hov} onMouseLeave={out} onClick={() => onNav({ view: 'page', key: 'kontakt' })}>{I('mail', 15)} Kontaktiraj nas</a>
          <a style={{ ...ulink, marginLeft: 'auto' }} onMouseEnter={hov} onMouseLeave={out} onClick={() => onNav({ view: 'page', key: 'prati-porudzbinu' })}>{I('package-search', 15)} Prati status porudžbine</a>
        </div>
      </div>
      <div style={{ maxWidth: 1440, margin: '0 auto', height: 72, padding: '0 24px', display: 'flex', alignItems: 'center', gap: 22 }}>
        <img src={SM_DATA.A + '/logo-white.png'} alt="SuperMedia" onClick={() => onNav({ view: 'home' })} style={{ height: 44, cursor: 'pointer', flex: 'none', transform: 'translateY(4px)' }} />
        {showSugg && <div onMouseDown={() => setFocused(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(22,18,30,.22)', backdropFilter: 'blur(4px)', WebkitBackdropFilter: 'blur(4px)' }} />}
        <div style={{ flex: 1, maxWidth: 560, marginLeft: 'auto', position: 'relative' }}>
          <form onSubmit={e => { e.preventDefault(); seeAll(); }} style={{ position: 'relative', zIndex: 1, display: 'flex', alignItems: 'center', gap: 6, height: 46, padding: '0 6px 0 18px', background: '#fff', borderRadius: showSugg ? 'var(--sm-radius-lg) var(--sm-radius-lg) 0 0' : 'var(--sm-radius-pill)' }}>
            <input value={query} onChange={e => setQuery(e.target.value)} onFocus={() => setFocused(true)} onBlur={() => setTimeout(() => setFocused(false), 120)} placeholder="Pretraži proizvode…" style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontFamily: 'var(--sm-font-body)', fontSize: 14, color: 'var(--sm-ink)', minWidth: 0 }} />
            {query ? <button type="button" onMouseDown={e => { e.preventDefault(); setQuery(''); }} aria-label="Obriši" style={{ background: 'none', border: 'none', color: 'var(--sm-text-muted)', cursor: 'pointer', display: 'inline-flex', padding: 4 }}>{I('x', 16)}</button> : null}
            <button type="submit" aria-label="Pretraži" style={{ width: 36, height: 36, flex: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', borderRadius: '50%', border: 'none', background: 'var(--sm-primary)', color: '#fff', cursor: 'pointer' }}>{I('search', 18)}</button>
          </form>
          {showSugg && (
            <div style={{ position: 'absolute', top: '100%', left: 0, right: 0, background: '#fff', borderRadius: '0 0 var(--sm-radius-lg) var(--sm-radius-lg)', boxShadow: 'var(--sm-shadow-lg)', border: '1px solid var(--sm-border)', borderTop: 'none', overflow: 'hidden', maxHeight: '74vh', overflowY: 'auto', zIndex: 2 }}>
              {sugg.length === 0 ? (
                <div style={{ padding: 18, textAlign: 'center', color: 'var(--sm-text-muted)', fontSize: 14 }}>Nema rezultata za „{query}".</div>
              ) : (
                <React.Fragment>
                  {sugg.map(p => (
                    <a key={p.id} onMouseDown={e => { e.preventDefault(); pickProduct(p); }} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', cursor: 'pointer', borderBottom: '1px solid var(--sm-gray-100)' }}
                      onMouseEnter={e => e.currentTarget.style.background = 'var(--sm-gray-50)'} onMouseLeave={e => e.currentTarget.style.background = '#fff'}>
                      <span style={{ width: 44, height: 44, flex: 'none', background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
                        {p.img ? <img src={p.img} alt="" style={{ maxWidth: '85%', maxHeight: '85%', objectFit: 'contain' }} /> : I('package', 20)}
                      </span>
                      <span style={{ flex: 1, minWidth: 0 }}>
                        <span style={{ display: 'block', fontFamily: 'var(--sm-font-techno)', textTransform: 'uppercase', letterSpacing: '.08em', fontSize: 10, color: 'var(--sm-text-subtle)' }}>{p.brand}</span>
                        <span style={{ display: 'block', fontSize: 13.5, color: 'var(--sm-text)', lineHeight: 1.3, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p.title}</span>
                      </span>
                      <span style={{ flex: 'none', fontFamily: 'var(--sm-font-body)', fontWeight: 800, fontSize: 14, color: 'var(--sm-price)' }}>{fmt(p.price)} din.</span>
                    </a>
                  ))}
                  <button onMouseDown={e => { e.preventDefault(); seeAll(); }} style={{ width: '100%', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6, padding: 13, background: 'var(--sm-purple-50)', border: 'none', cursor: 'pointer', fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 13.5, color: 'var(--sm-primary)' }}>
                    Prikaži sve rezultate za „{query}" {I('arrow-right', 15)}
                  </button>
                </React.Fragment>
              )}
            </div>
          )}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <IconButton label={user ? user.name : 'Moj nalog'} active={!!user} onClick={() => onNav({ view: 'account' })}>{I('user', 19)}</IconButton>
          <IconButton label="Lista želja" badge={wishCount} onClick={() => onNav({ view: 'wishlist' })}>{I('heart', 19)}</IconButton>
          <IconButton label="Korpa" badge={cartCount} onClick={() => onNav({ view: 'cart' })}>{I('shopping-cart', 19)}</IconButton>
        </div>
      </div>
    </div>
  );
}

function DesktopNavBar({ onNav, active, onAllProducts }) {
  const links = [
    { key: 'home', label: 'Početna' },
    { key: 'popusti', label: 'Super popusti' },
    { key: 'blog', label: 'Blog' },
  ];
  const CATS = (window.SM_DATA && window.SM_DATA.CATEGORIES) || [];
  const [menuOpen, setMenuOpen] = useStateC(false);
  const [hoverCat, setHoverCat] = useStateC(CATS[0] ? CATS[0].slug : null);
  const [hoverGroup, setHoverGroup] = useStateC(0);
  const wrapRef = React.useRef(null);
  const navRef = React.useRef(null);
  const btnRefs = React.useRef({});
  const [bar, setBar] = useStateC({ left: 0, width: 0, visible: false });
  const activeKey = links.some(l => l.key === active) ? active : null;
  const measure = React.useCallback(() => {
    const el = activeKey ? btnRefs.current[activeKey] : null;
    const nav = navRef.current;
    if (el && nav) {
      const nr = nav.getBoundingClientRect(), br = el.getBoundingClientRect();
      setBar({ left: br.left - nr.left, width: br.width, visible: true });
    } else {
      setBar(b => ({ ...b, visible: false }));
    }
  }, [activeKey]);
  React.useLayoutEffect(() => {
    measure();
    window.addEventListener('resize', measure);
    if (document.fonts && document.fonts.ready) document.fonts.ready.then(measure);
    return () => window.removeEventListener('resize', measure);
  }, [measure]);
  // close mega-menu on outside click / Esc
  React.useEffect(() => {
    if (!menuOpen) return;
    const onDoc = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setMenuOpen(false); };
    const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false); };
    document.addEventListener('mousedown', onDoc);
    document.addEventListener('keydown', onKey);
    return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey); };
  }, [menuOpen]);
  const goHub = (slug) => { setMenuOpen(false); onNav({ view: 'cathub', slug }); };
  const goCat = (slug) => { setMenuOpen(false); onNav({ view: 'category', slug }); };
  const goCatSub = (slug, potkat, potkat2) => { setMenuOpen(false); onNav({ view: 'category', slug, potkat, potkat2 }); };
  const activeCat = CATS.find(c => c.slug === hoverCat) || CATS[0];
  const activeGroup = activeCat && activeCat.groups[hoverGroup] ? activeCat.groups[hoverGroup] : (activeCat && activeCat.groups[0]);
  // render Lucide icons whenever the mega-menu content changes (App's createIcons doesn't fire on NavBar-local state)
  React.useEffect(() => { if (menuOpen && window.lucide) window.lucide.createIcons(); }, [menuOpen, hoverCat, hoverGroup]);
  return (
    <React.Fragment>
      {menuOpen && <div onClick={() => setMenuOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 20, background: 'rgba(22,18,30,.20)', backdropFilter: 'blur(5px)', WebkitBackdropFilter: 'blur(5px)' }}></div>}
    <div style={{ background: '#fff', borderBottom: '1px solid var(--sm-border)', position: 'sticky', top: 0, zIndex: 30 }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', height: 56, padding: '0 24px', display: 'flex', alignItems: 'center', gap: 28 }}>
        <div ref={wrapRef} style={{ position: 'relative', alignSelf: 'stretch', display: 'flex', alignItems: 'center' }}>
          <button onClick={() => setMenuOpen(o => !o)} style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10, height: 40, padding: '0 20px', background: 'var(--sm-primary)', color: '#fff', border: 'none', borderRadius: 'var(--sm-radius-pill)', fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 15, lineHeight: 1, cursor: 'pointer', boxShadow: 'var(--sm-shadow-purple)' }}>
            {I(menuOpen ? 'x' : 'menu', 18)} Svi proizvodi
          </button>
          {menuOpen && (
            <div style={{ position: 'absolute', top: 'calc(100% + 8px)', left: 0, width: 1320, maxWidth: '95vw', background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-xl)', boxShadow: 'var(--sm-shadow-lg)', display: 'grid', gridTemplateColumns: '300px 1fr', overflow: 'hidden', zIndex: 50 }}>
              {/* Level 1 — categories */}
              <div style={{ background: 'var(--sm-gray-50)', borderRight: '1px solid var(--sm-border)', padding: 8 }}>
                {CATS.map(c => {
                  const on = c.slug === hoverCat;
                  return (
                    <button key={c.slug} onMouseEnter={() => { setHoverCat(c.slug); setHoverGroup(0); }} onClick={() => goHub(c.slug)} style={{
                      width: '100%', display: 'flex', alignItems: 'center', gap: 12, textAlign: 'left',
                      background: on ? '#fff' : 'transparent', border: 'none', cursor: 'pointer', borderRadius: 'var(--sm-radius-md)',
                      padding: '11px 14px', fontFamily: 'var(--sm-font-display)', fontWeight: on ? 700 : 600, fontSize: 14.5,
                      color: on ? 'var(--sm-primary)' : 'var(--sm-text)', boxShadow: on ? 'var(--sm-shadow-sm)' : 'none', transition: 'background .15s',
                    }}>
                      <span style={{ width: 34, height: 34, flex: 'none', borderRadius: 'var(--sm-radius-sm)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: on ? 'var(--sm-purple-50)' : '#fff', border: on ? '1.5px solid var(--sm-primary)' : '1.5px solid var(--sm-purple-200)', color: on ? 'var(--sm-primary)' : 'var(--sm-text-muted)' }}>{I(c.icon || 'box', 18)}</span>
                      <span style={{ flex: 1 }}>{c.title}</span>
                      {I('chevron-right', 16)}
                    </button>
                  );
                })}
              </div>
              {/* Right — subcategory groups as masonry columns */}
              <div style={{ padding: '22px 26px 26px' }}>
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 16 }}>
                  <span style={{ fontFamily: 'var(--sm-font-display)', fontWeight: 800, fontSize: 20 }}>{activeCat && activeCat.title}</span>
                  <a onClick={() => goHub(activeCat && activeCat.slug)} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 13.5, color: 'var(--sm-primary)', cursor: 'pointer', whiteSpace: 'nowrap' }}>Pogledaj sve {I('arrow-right', 15)}</a>
                </div>
                <div style={{ columnCount: 5, columnGap: 26 }}>
                  {activeCat && (activeCat.menu || activeCat.groups).map(g => (
                    <div key={g.title} style={{ breakInside: 'avoid', WebkitColumnBreakInside: 'avoid', pageBreakInside: 'avoid', marginBottom: 16 }}>
                      <button onClick={() => goCatSub(activeCat.slug, g.title)} style={{
                        display: 'block', width: '100%', textAlign: 'left', background: 'none', border: 'none', cursor: 'pointer',
                        fontFamily: 'var(--sm-font-display)', fontWeight: 600, fontSize: 14.5, color: 'var(--sm-text)',
                        padding: '0 0 8px', marginBottom: 7, borderBottom: '1px solid var(--sm-border)',
                      }}>{g.title}</button>
                      <div style={{ display: 'flex', flexDirection: 'column' }}>
                        {g.items.map(s => (
                          <a key={s} onClick={() => goCatSub(activeCat.slug, g.title, s)} style={{ fontFamily: 'var(--sm-font-body)', fontSize: 13, lineHeight: 1.32, color: 'var(--sm-text-muted)', cursor: 'pointer', padding: '3px 0', transition: 'color .12s' }}
                            onMouseEnter={e => { e.currentTarget.style.color = 'var(--sm-primary)'; }}
                            onMouseLeave={e => { e.currentTarget.style.color = 'var(--sm-text-muted)'; }}>{s}</a>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}
        </div>
        <nav ref={navRef} style={{ position: 'relative', alignSelf: 'stretch', display: 'flex', alignItems: 'center', gap: 24 }}>
          {links.map(l => (
            <button key={l.key} ref={el => { btnRefs.current[l.key] = el; }} onClick={() => onNav({ view: l.key === 'home' ? 'home' : l.key })} style={{
              background: 'none', border: 'none', cursor: 'pointer', height: '100%', padding: 0,
              fontFamily: 'var(--sm-font-body)', fontSize: 15,
              fontWeight: active === l.key ? 700 : 500,
              color: active === l.key ? 'var(--sm-primary)' : 'var(--sm-text)',
              transition: 'color .2s',
            }}>{l.label}</button>
          ))}
          <span aria-hidden="true" style={{
            position: 'absolute', bottom: 0, height: 3, borderRadius: '3px 3px 0 0', background: 'var(--sm-primary)',
            left: bar.left, width: bar.width, opacity: bar.visible ? 1 : 0,
            transition: 'left .32s cubic-bezier(.4,0,.2,1), width .32s cubic-bezier(.4,0,.2,1), opacity .2s',
          }}></span>
        </nav>
        <button onClick={() => onNav({ view: 'page', key: 'pravna-lica' })} style={{ marginLeft: 'auto', background: 'none', border: '1.5px solid var(--sm-purple-300)', color: 'var(--sm-primary)', borderRadius: 'var(--sm-radius-pill)', height: 38, padding: '0 18px', fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 14, cursor: 'pointer' }}>Pravna lica</button>
      </div>
    </div>
    </React.Fragment>
  );
}

/* ---------- breakpoint wrappers (separate components keep hook order stable across the breakpoint) ---------- */
function Topbar(props) {
  const isMobile = useIsMobile(820);
  return isMobile ? <MobileChrome {...props} /> : <DesktopTopbar {...props} />;
}
function NavBar(props) {
  const isMobile = useIsMobile(820);
  if (isMobile) return null;
  return <DesktopNavBar {...props} />;
}

/* ---------- mobile chrome: sticky hamburger bar + fullscreen menu + fullscreen search ---------- */
function MobileChrome({ cartCount, wishCount, user, query, setQuery, onSearch, onNav }) {
  const [menuOpen, setMenuOpen] = useStateC(false);
  const [openCat, setOpenCat] = useStateC(null);
  const [openGroup, setOpenGroup] = useStateC(null);
  const CATS = (window.SM_DATA && window.SM_DATA.CATEGORIES) || [];

  // lock background scroll while the menu is open
  React.useEffect(() => {
    const prev = document.body.style.overflow;
    if (menuOpen) document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = prev; };
  }, [menuOpen]);
  // re-paint lucide icons when menu content changes
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, [menuOpen, openCat, openGroup]);
  // close menu on Escape
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, []);

  const go = (r) => { setMenuOpen(false); onNav(r); };
  const submitSearch = (e) => { if (e) e.preventDefault(); onSearch(); };

  const iconBtn = { width: 44, height: 44, flex: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: 'none', border: 'none', color: '#fff', cursor: 'pointer', borderRadius: 'var(--sm-radius-pill)' };
  const badge = { position: 'absolute', top: 3, right: 1, minWidth: 17, height: 17, padding: '0 4px', borderRadius: 9, background: 'var(--sm-violet)', color: '#fff', fontSize: 10.5, fontWeight: 800, fontFamily: 'var(--sm-font-display)', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '2px solid var(--sm-black)' };
  const menuRowIcon = { width: 34, height: 34, flex: 'none', borderRadius: 'var(--sm-radius-sm)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: 'var(--sm-purple-50)', color: 'var(--sm-primary)' };
  const rowL1 = { display: 'flex', alignItems: 'center', gap: 13, width: '100%', textAlign: 'left', background: 'none', border: 'none', borderBottom: '1px solid var(--sm-gray-100)', cursor: 'pointer', padding: '15px 18px', fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 15.5, color: 'var(--sm-text)' };
  const rowL2 = { display: 'flex', alignItems: 'center', gap: 10, width: '100%', textAlign: 'left', background: 'none', border: 'none', borderBottom: '1px solid var(--sm-gray-100)', cursor: 'pointer', padding: '12px 18px 12px 64px', fontFamily: 'var(--sm-font-display)', fontWeight: 600, fontSize: 14.5, color: 'var(--sm-text)' };
  const rowL3 = { display: 'block', width: '100%', textAlign: 'left', background: 'none', border: 'none', cursor: 'pointer', padding: '9px 18px 9px 64px', fontFamily: 'var(--sm-font-body)', fontSize: 13.5, lineHeight: 1.3, color: 'var(--sm-text-muted)' };

  return (
    <React.Fragment>
      {/* sticky top bar — row 1: hamburger + logo (left), account + cart (right); row 2: open search */}
      <div style={{ position: 'sticky', top: 0, zIndex: 40, background: 'var(--sm-black)', color: '#fff' }}>
        <div style={{ height: 60, padding: '0 8px', display: 'flex', alignItems: 'center', gap: 4 }}>
          <button onClick={() => setMenuOpen(true)} aria-label="Meni" style={{ ...iconBtn, width: 46, height: 46 }}>{I('menu', 28)}</button>
          <img src={SM_DATA.A + '/logo-white.png'} alt="SuperMedia" onClick={() => go({ view: 'home' })} style={{ height: 34, cursor: 'pointer', display: 'block', transform: 'translateY(8px)' }} />
          <div style={{ flex: 1 }}></div>
          <button onClick={() => onNav({ view: 'wishlist' })} aria-label="Lista želja" style={{ ...iconBtn, position: 'relative' }}>
            {I('heart', 25)}
            {wishCount > 0 && <span style={badge}>{wishCount}</span>}
          </button>
          <button onClick={() => onNav({ view: 'account' })} aria-label="Nalog" style={iconBtn}>{I('user', 25)}</button>
          <button onClick={() => onNav({ view: 'cart' })} aria-label="Korpa" style={{ ...iconBtn, position: 'relative' }}>
            {I('shopping-cart', 25)}
            {cartCount > 0 && <span style={badge}>{cartCount}</span>}
          </button>
        </div>
        <div style={{ padding: '0 10px 11px' }}>
          <form onSubmit={submitSearch} style={{ display: 'flex', alignItems: 'center', gap: 4, height: 46, padding: '0 6px 0 16px', background: '#fff', borderRadius: 'var(--sm-radius-pill)' }}>
            <input value={query} onChange={e => setQuery(e.target.value)} placeholder="Pretraži proizvode…" style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontFamily: 'var(--sm-font-body)', fontSize: 15.5, color: 'var(--sm-ink)', minWidth: 0, padding: '0 4px' }} />
            {query && <button type="button" onClick={() => setQuery('')} aria-label="Obriši" style={{ background: 'none', border: 'none', color: 'var(--sm-text-muted)', cursor: 'pointer', display: 'inline-flex', padding: 4 }}>{I('x', 18)}</button>}
            <button type="submit" aria-label="Pretraži" style={{ width: 36, height: 36, flex: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', borderRadius: '50%', border: 'none', background: 'var(--sm-primary)', color: '#fff', cursor: 'pointer' }}>{I('search', 17)}</button>
          </form>
        </div>
      </div>

      {/* ---- fullscreen slide-in menu ---- */}
      {menuOpen && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 2000, display: 'flex' }}>
          <div onClick={() => setMenuOpen(false)} style={{ position: 'absolute', inset: 0, background: 'rgba(22,18,30,.45)', backdropFilter: 'blur(2px)', WebkitBackdropFilter: 'blur(2px)' }}></div>
          <div style={{ position: 'relative', width: 'min(87vw, 370px)', height: '100%', background: '#fff', display: 'flex', flexDirection: 'column', boxShadow: 'var(--sm-shadow-lg)', animation: 'sm-slide-in .26s cubic-bezier(.4,0,.2,1)' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 8px 14px 18px', background: 'var(--sm-black)', flex: 'none' }}>
              <span style={{ fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 15.5, color: '#fff', display: 'inline-flex', alignItems: 'center', gap: 10 }}>{I('layout-grid', 19)} Kategorije</span>
              <button onClick={() => setMenuOpen(false)} aria-label="Zatvori" style={iconBtn}>{I('x', 24)}</button>
            </div>
            <div style={{ flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch' }}>
              {CATS.map(c => {
                const onC = openCat === c.slug;
                return (
                  <div key={c.slug}>
                    {/* Level 1 — kategorija */}
                    <button onClick={() => { setOpenCat(o => o === c.slug ? null : c.slug); setOpenGroup(null); }} style={{ ...rowL1, color: onC ? 'var(--sm-primary)' : 'var(--sm-text)' }}>
                      <span style={menuRowIcon}>{I(c.icon || 'box', 19)}</span>
                      <span style={{ flex: 1 }}>{c.title}</span>
                      {I(onC ? 'chevron-down' : 'chevron-right', 18)}
                    </button>
                    {onC && (
                      <div style={{ background: 'var(--sm-gray-50)', paddingBottom: 6 }}>
                        {(c.groups || []).map((g, gi) => {
                          const gk = c.slug + '#' + gi;
                          const onG = openGroup === gk;
                          return (
                            <div key={gk}>
                              {/* Level 2 — podkategorija */}
                              <button onClick={() => setOpenGroup(o => o === gk ? null : gk)} style={{ ...rowL2, color: onG ? 'var(--sm-primary)' : 'var(--sm-text)' }}>
                                <span style={{ flex: 1 }}>{g.title}</span>
                                {(g.items || []).length > 0 && I(onG ? 'chevron-down' : 'chevron-right', 16)}
                              </button>
                              {onG && (g.items || []).map(s => (
                                /* Level 3 — podkategorija 2 */
                                <button key={s} onClick={() => go({ view: 'category', slug: c.slug, potkat: g.title, potkat2: s })} style={rowL3}>{s}</button>
                              ))}
                            </div>
                          );
                        })}
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      )}
    </React.Fragment>
  );
}

function ServiceStrip({ vertical }) {
  const items = [
    { ic: 'truck', t: 'Brza isporuka', s: 'Od 3 do 6 radnih dana' },
    { ic: 'shield-check', t: 'Garancija', s: 'Zvanična, 2 godine' },
    { ic: 'rotate-ccw', t: 'Povrat 14 dana', s: 'Bez objašnjenja' },
  ];
  if (vertical) {
    return (
      <div style={{ background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-lg)', padding: '6px 22px', display: 'flex', flexDirection: 'column' }}>
        {items.map((x, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 0', borderTop: i > 0 ? '1px solid var(--sm-border)' : 'none' }}>
            <span style={{ width: 42, height: 42, borderRadius: '50%', background: 'var(--sm-purple-50)', color: 'var(--sm-primary)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>{I(x.ic, 20)}</span>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, flexWrap: 'wrap' }}>
              <span style={{ fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 15 }}>{x.t}</span>
              <span style={{ fontSize: 13, color: 'var(--sm-text-muted)' }}>{x.s}</span>
            </div>
          </div>
        ))}
      </div>
    );
  }
  return (
    <div style={{ background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-lg)', padding: '18px 24px', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16 }}>
      {items.map((x, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{ width: 42, height: 42, borderRadius: '50%', background: 'var(--sm-purple-50)', color: 'var(--sm-primary)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>{I(x.ic, 20)}</span>
          <div>
            <div style={{ fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 14 }}>{x.t}</div>
            <div style={{ fontSize: 12, color: 'var(--sm-text-muted)' }}>{x.s}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function Footer({ onNav }) {
  const go = onNav || (() => {});
  const isMobile = useIsMobile();
  const [subEmail, setSubEmail] = useStateC('');
  const [subbed, setSubbed] = useStateC(false);
  const cols = [
    { h: 'Kupovina', items: [
      ['Svi proizvodi', { view: 'cathub', slug: null }],
      ['Super popusti', { view: 'popusti' }],
      ['Brendovi', { view: 'page', key: 'brendovi' }],
      ['Dostava', { view: 'page', key: 'dostava' }],
      ['Poklon vaučeri', { view: 'page', key: 'poklon-vauceri' }],
      ['Prava potrošača', { view: 'page', key: 'prava-potrosaca' }],
    ] },
    { h: 'Podrška', items: [
      ['Kontakt', { view: 'page', key: 'kontakt' }],
      ['Reklamacije', { view: 'page', key: 'reklamacije' }],
      ['Servis', { view: 'page', key: 'servis' }],
      ['Često postavljana pitanja', { view: 'page', key: 'faq' }],
      ['Načini plaćanja', { view: 'page', key: 'placanje' }],
    ] },
    { h: 'Kompanija', items: [
      ['O nama', { view: 'page', key: 'o-nama' }],
      ['Blog', { view: 'blog' }],
      ['Karijera', { view: 'page', key: 'karijera' }],
    ] },
    { h: 'B2B', items: [
      ['Pravna lica', { view: 'page', key: 'pravna-lica' }],
      ['Zatraži ponudu', { view: 'page', key: 'pravna-lica' }],
      ['Količinski popusti', { view: 'page', key: 'pravna-lica' }],
    ] },
  ];
  const orderedCols = isMobile ? [cols[1], cols[0], cols[2], cols[3]] : cols;
  return (
    <footer style={{ position: 'relative', zIndex: 1, background: 'var(--sm-black)', color: '#fff', marginTop: 56 }}>
      {/* newsletter band */}
      <div style={{ background: 'linear-gradient(120deg, var(--sm-primary), var(--sm-purple-400))' }}>
        <div style={{ maxWidth: 1440, margin: '0 auto', padding: isMobile ? '18px 18px' : '30px 24px', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: isMobile ? 14 : 24 }}>
          <div style={{ minWidth: 240, flex: '1 1 300px' }}>
            <div style={{ fontFamily: 'var(--sm-font-display)', fontWeight: 800, fontSize: isMobile ? 21 : 24, color: '#fff', lineHeight: 1.15 }}>Budi prvi koji sazna za SUPER popuste</div>
            <div style={{ fontFamily: 'var(--sm-font-body)', fontSize: isMobile ? 11.5 : 15, color: 'rgba(255,255,255,.86)', marginTop: isMobile ? 3 : 6 }}>{isMobile ? 'Ekskluzivne akcije i pokloni pravo u tvoj inbox.' : 'Prijavi se na newsletter i dobij ekskluzivne akcije i poklon vaučere pravo u inbox.'}</div>
          </div>
          <form onSubmit={e => { e.preventDefault(); if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(subEmail.trim())) setSubbed(true); }} style={{ display: 'flex', alignItems: 'center', gap: 10, flex: isMobile ? '1 1 100%' : '1 1 360px', width: isMobile ? '100%' : 'auto', maxWidth: isMobile ? 'none' : 480 }}>
            {subbed ? (
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, flex: 1, color: '#fff', fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: isMobile ? 15 : 16 }}>{I('check-circle', 22)} Hvala! Prijava je uspešna ✨</div>
            ) : (
              <React.Fragment>
                <input type="email" value={subEmail} onChange={e => setSubEmail(e.target.value)} placeholder="Unesi svoj email" style={{ flex: 1, minWidth: 0, height: isMobile ? 54 : 50, border: 'none', borderRadius: 'var(--sm-radius-pill)', padding: isMobile ? '0 22px' : '0 20px', fontFamily: 'var(--sm-font-body)', fontSize: isMobile ? 16 : 15, outline: 'none' }} />
                <button type="submit" style={{ height: isMobile ? 54 : 50, padding: isMobile ? '0 24px' : '0 26px', border: 'none', borderRadius: 'var(--sm-radius-pill)', background: '#fff', color: 'var(--sm-primary)', fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: isMobile ? 16 : 15, cursor: 'pointer', whiteSpace: 'nowrap' }}>Prijavi se</button>
              </React.Fragment>
            )}
          </form>
        </div>
      </div>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: isMobile ? '40px 18px 36px' : '66px 24px 48px', display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : '1.5fr 1fr 1fr 1fr 1fr', gap: isMobile ? '30px 24px' : 32 }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: isMobile ? 'center' : 'flex-start', textAlign: isMobile ? 'center' : 'left', gridColumn: isMobile ? '1 / -1' : 'auto' }}>
          <img src={SM_DATA.A + '/logo-white.png'} alt="SuperMedia" style={{ height: isMobile ? 78 : 56, marginBottom: isMobile ? 16 : 18 }} />
          <p style={{ color: 'rgba(255,255,255,.62)', fontSize: 14, lineHeight: 1.7, margin: 0, maxWidth: 280, textWrap: 'balance' }}>Sve za tvoj dom na jednom mestu, po SUPER cenama, uz brzu isporuku i sigurnu kupovinu.</p>
          <div style={{ display: 'flex', gap: 10, marginTop: 20, justifyContent: isMobile ? 'center' : 'flex-start' }}>
            {[
              ['Instagram', 'instagram', 'https://www.instagram.com/supermedia.rs'],
              ['Facebook', 'facebook', 'https://www.facebook.com/supermedia.rs'],
              ['TikTok', 'tiktok', ''],
              ['LinkedIn', 'linkedin', 'https://rs.linkedin.com/in/super-media-22b6a3360'],
            ].map(([s, file, url]) => (
              <a key={s} title={s} href={url || '#'} target={url ? '_blank' : undefined} rel={url ? 'noopener noreferrer' : undefined} onClick={url ? undefined : (e) => e.preventDefault()} style={{ width: 40, height: 40, borderRadius: '50%', background: 'rgba(255,255,255,.10)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', transition: 'background .15s', opacity: url ? 1 : 0.55 }}
                onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,255,255,.20)'; }}
                onMouseLeave={e => { e.currentTarget.style.background = 'rgba(255,255,255,.10)'; }}>
                <img src={SM_DATA.A + '/social/' + file + '.png'} alt={s} style={{ width: 20, height: 20, objectFit: 'contain' }} />
              </a>
            ))}
          </div>
        </div>
        {orderedCols.map((c, i) => (
          <div key={i} style={{ textAlign: isMobile ? 'center' : 'left' }}>
            <div style={{ fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 15, marginBottom: 14 }}>{c.h}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, alignItems: isMobile ? 'center' : 'flex-start' }}>
              {c.items.map(([label, to]) => (
                <a key={label} onClick={() => go(to)} style={{ color: 'rgba(255,255,255,.6)', fontSize: 14, cursor: 'pointer', textDecoration: 'none', transition: 'color .15s' }}
                  onMouseEnter={e => { e.currentTarget.style.color = '#fff'; }}
                  onMouseLeave={e => { e.currentTarget.style.color = 'rgba(255,255,255,.6)'; }}>{label}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      {/* payment / bank strip — white band between footer and copyright */}
      <div style={{ background: '#fff' }}>
        <div style={{ maxWidth: 1440, margin: '0 auto', padding: '18px 24px', display: 'flex', alignItems: 'center', justifyContent: 'flex-start', gap: 28, flexWrap: 'wrap' }}>
          {[['pay-raiffeisen', 'Raiffeisen Bank', 34], ['pay-visa', 'Visa', 22], ['pay-dinacard', 'DinaCard', 26], ['pay-mastercard', 'Mastercard', 34]].map(([file, alt, h]) => (
            <img key={file} src={SM_DATA.A + '/social/' + file + '.png'} alt={alt} style={{ height: h, width: 'auto', objectFit: 'contain' }} />
          ))}
        </div>
      </div>
      {/* bottom copyright bar — below the banks */}
      <div style={{ background: 'var(--sm-black)' }}>
        <div style={{ maxWidth: 1440, margin: '0 auto', padding: '18px 24px', display: 'flex', flexWrap: 'wrap', gap: 8, justifyContent: 'space-between', color: 'rgba(255,255,255,.5)', fontSize: 13 }}>
          <span>© 2026 SuperMedia.rs — Sva prava zadržana.</span>
          <span style={{ display: 'inline-flex', gap: 6 }}><a onClick={() => go({ view: 'page', key: 'uslovi' })} style={{ color: 'rgba(255,255,255,.5)', cursor: 'pointer', textDecoration: 'none' }} onMouseEnter={e => e.currentTarget.style.color = '#fff'} onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,.5)'}>Uslovi korišćenja</a> · <a onClick={() => go({ view: 'page', key: 'privatnost' })} style={{ color: 'rgba(255,255,255,.5)', cursor: 'pointer', textDecoration: 'none' }} onMouseEnter={e => e.currentTarget.style.color = '#fff'} onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,.5)'}>Politika privatnosti</a></span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Topbar, NavBar, MobileChrome, ServiceStrip, Footer });