/* SUPERMEDIA storefront — Super popusti: dedicated deals page.
 * No filters, only discounted products. Edge-to-edge hero (content width),
 * animated purple background + red "%" raining from the sky on enter. */
const { useState: useStateSP } = React;

function SuperPopusti({ onNav, onAdd, onWish, wishlist, openProduct }) {
  const isMobile = useIsMobile();
  const { PRODUCTS } = SM_DATA;
  const [spPage, setSpPage] = useStateSP(1);
  const SP_SIZE = 24;
  const deals = PRODUCTS.filter(p => p.old != null).sort((a, b) => (b.discount || 0) - (a.discount || 0));
  const spTotalPages = Math.max(1, Math.ceil(deals.length / SP_SIZE));
  const spCur = Math.min(spPage, spTotalPages);
  const spItems = deals.slice((spCur - 1) * SP_SIZE, spCur * SP_SIZE);
  const wide = { maxWidth: 1440, margin: '0 auto', padding: isMobile ? '0 16px' : '0 24px' };
  const topDeal = deals.reduce((m, p) => Math.max(m, p.discount || 0), 0);
  // baner iz admina (poseban za desktop i telefon); ako postoji, prikazuje se umesto gradijenta
  const _bn = SM_DATA.BANNERS || {};
  const _spArr = isMobile ? (_bn['super-popusti-mobile'] || _bn['super-popusti-desktop']) : (_bn['super-popusti-desktop'] || _bn['super-popusti-mobile']);
  const spBannerImg = _spArr && _spArr[0] && _spArr[0].url;

  // raining "%" across the WHOLE page — varied positions, sizes, skews, speeds (viewport-relative fall)
  const rain = React.useMemo(() => {
    let s = 13;
    const rnd = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
    return Array.from({ length: isMobile ? 18 : 34 }, () => {
      const dur = 7 + rnd() * 7;
      return {
        left: (rnd() * 100).toFixed(2),
        size: (isMobile ? 18 : 24) + rnd() * (isMobile ? 24 : 44),
        delay: -(rnd() * dur).toFixed(2),
        dur: dur.toFixed(2),
        rot: Math.round(-55 + rnd() * 110),
        op: (0.4 + rnd() * 0.45).toFixed(2),
      };
    });
  }, [isMobile]);

  return (
    <div style={{ position: 'relative', overflow: 'hidden', background: 'linear-gradient(180deg, #f4edfc 0%, #efe7fb 55%, var(--sm-bg) 100%)', paddingBottom: isMobile ? 44 : 72 }}>
      {/* animated purple page backdrop — soft, slow, easy on the eyes */}
      <div style={{ position: 'absolute', width: 620, height: 620, left: '-12%', top: '6%', borderRadius: '50%', background: 'radial-gradient(circle, rgba(136,81,182,.22), transparent 68%)', filter: 'blur(8px)', animation: 'sm-aurora 18s ease-in-out infinite', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', width: 540, height: 540, right: '-10%', top: '34%', borderRadius: '50%', background: 'radial-gradient(circle, rgba(125,84,153,.18), transparent 68%)', filter: 'blur(8px)', animation: 'sm-aurora 22s ease-in-out 2s infinite reverse', pointerEvents: 'none' }} />

      {/* raining % symbols — fixed behind all content, across the whole page */}
      <div style={{ position: 'fixed', inset: 0, overflow: 'hidden', pointerEvents: 'none', zIndex: 0 }} aria-hidden="true">
        {rain.map((r, i) => (
          <span key={i} style={{ position: 'absolute', top: 0, left: r.left + '%', willChange: 'transform', animation: `sm-fall ${r.dur}s linear ${r.delay}s infinite` }}>
            <span style={{ display: 'inline-block', fontFamily: 'var(--sm-font-display)', fontWeight: 800, fontSize: r.size, lineHeight: 1, color: 'var(--sm-sale)', opacity: r.op, textShadow: '0 2px 8px rgba(0,0,0,.18)', transform: `rotate(${r.rot}deg) skewX(-12deg)` }}>%</span>
          </span>
        ))}
      </div>

      <div style={{ ...wide, position: 'relative', zIndex: 1 }}>
        {/* breadcrumb */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--sm-text-muted)', padding: isMobile ? '16px 0 14px' : '22px 0 18px' }}>
          <a onClick={() => onNav({ view: 'home' })} style={{ cursor: 'pointer', color: 'var(--sm-text-muted)' }}>Početna</a>
          {I('chevron-right', 14)}<span style={{ color: 'var(--sm-text)', fontWeight: 600 }}>Super popusti</span>
        </div>

        {/* ===== HERO (spans the content width) — baner iz admina ili gradijent fallback ===== */}
        {spBannerImg ? (
          <a onClick={() => { const lk = (_spArr[0] || {}).link; if (/^https?:\/\//.test(lk || '')) window.open(lk, '_blank'); }} style={{ display: 'block', borderRadius: 'var(--sm-radius-xl)', overflow: 'hidden', boxShadow: 'var(--sm-shadow-md)', cursor: 'pointer' }}>
            <img src={spBannerImg} alt="Super popusti" style={{ display: 'block', width: '100%', height: 'auto' }} />
          </a>
        ) : (
        <section style={{ position: 'relative', overflow: 'hidden', borderRadius: 'var(--sm-radius-xl)', minHeight: isMobile ? 260 : 320, background: 'linear-gradient(125deg, var(--sm-primary) 0%, #6a3da0 45%, var(--sm-violet) 100%)', color: '#fff', boxShadow: 'var(--sm-shadow-md)', display: 'flex', alignItems: 'center' }}>
          {/* animated glow inside hero */}
          <div style={{ position: 'absolute', width: 360, height: 360, right: '6%', top: '-30%', borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,255,255,.22), transparent 65%)', animation: 'sm-aurora 14s ease-in-out infinite', pointerEvents: 'none' }} />

          {/* hero content */}
          <div style={{ position: 'relative', padding: isMobile ? '34px 22px' : '52px 56px', maxWidth: 720 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, background: 'rgba(255,255,255,.16)', backdropFilter: 'blur(4px)', border: '1px solid rgba(255,255,255,.28)', borderRadius: 'var(--sm-radius-pill)', padding: '7px 15px', fontFamily: 'var(--sm-font-techno)', textTransform: 'uppercase', letterSpacing: '.16em', fontSize: 12, marginBottom: 18 }}>{I('flame', 15)} Akcija u toku</div>
            <h1 style={{ margin: 0, color: '#fff', fontFamily: 'var(--sm-font-display)', fontWeight: 800, fontSize: isMobile ? 'clamp(40px, 13vw, 58px)' : 'clamp(54px, 7vw, 96px)', lineHeight: .94, letterSpacing: '-.03em' }}>
              SUPER<br />POPUSTI
            </h1>
            <p style={{ margin: '18px 0 0', fontSize: isMobile ? 16 : 19, lineHeight: 1.55, color: 'rgba(255,255,255,.9)', maxWidth: '40ch' }}>
              Najveća sniženja na proverene brendove — do <b style={{ color: '#fff', background: 'var(--sm-sale)', padding: '1px 9px', borderRadius: 8 }}>−{topDeal}%</b>. Zalihe su ograničene, a duh ne čeka. ✨
            </p>
          </div>
        </section>
        )}

        {/* ===== DEALS GRID (no filters) ===== */}
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12, margin: isMobile ? '28px 0 16px' : '40px 0 22px', flexWrap: 'wrap' }}>
          <h2 style={{ margin: 0, fontFamily: 'var(--sm-font-display)', fontWeight: 800, fontSize: isMobile ? 23 : 30, letterSpacing: '-.02em' }}>Svi sniženi proizvodi</h2>
          <span style={{ fontSize: 14.5, color: 'var(--sm-text-muted)' }}>{deals.length} na akciji</span>
        </div>

        {deals.length === 0 ? (
          <div style={{ textAlign: 'center', padding: '60px 20px', color: 'var(--sm-text-muted)' }}>
            <img src={SM_DATA.A + '/mascot-genie.png'} alt="" style={{ height: 130, marginBottom: 14 }} />
            <div style={{ fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 20, color: 'var(--sm-text)' }}>Trenutno nema aktivnih sniženja</div>
            <div style={{ fontSize: 15, marginTop: 6 }}>Svrati uskoro — duh sprema nove SUPER cene.</div>
          </div>
        ) : (
          <React.Fragment>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(264px, 1fr))', gap: isMobile ? 12 : 16 }}>
              {spItems.map(p => <ProductCard key={p.id} p={p} onAdd={onAdd} onWish={onWish} wished={wishlist.includes(p.id)} onOpen={openProduct} />)}
            </div>
            {typeof Pagination !== 'undefined' && <Pagination page={spCur} totalPages={spTotalPages} onPage={(n) => { setSpPage(n); try { window.scrollTo({ top: 0, behavior: 'smooth' }); } catch (e) {} }} />}
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { SuperPopusti });