/* SUPERMEDIA storefront — Product detail (PDP) */
const { useState: useStateP } = React;

// Category-aware, representative spec sheet for a product.
function productSpecs(p) {
  const brand = p.brand.charAt(0) + p.brand.slice(1).toLowerCase();
  const byCat = {
    'tv-audio': [['Dijagonala', '55"'], ['Rezolucija', '4K Ultra HD (3840 × 2160)'], ['Tip ekrana', 'QLED'], ['Osvežavanje', '120 Hz'], ['Smart platforma', 'Google TV'], ['Priključci', '3× HDMI, 2× USB'], ['Zvuk', '20 W, Dolby Atmos']],
    'it-gaming': [['Procesor', 'Intel Core Ultra 7'], ['RAM memorija', '16 GB DDR5'], ['Skladište', '1 TB SSD'], ['Ekran', '14" 2.8K OLED'], ['Grafika', 'Intel Arc'], ['Operativni sistem', 'Windows 11'], ['Autonomija', 'do 12 sati']],
    'mali-aparati': [['Tip', 'Automatski espresso aparat'], ['Pritisak pumpe', '15 bara'], ['Snaga', '1500 W'], ['Rezervoar za vodu', '1.8 L'], ['Mlin', 'Keramički, podesiv'], ['Funkcije', 'Espresso, Cappuccino, Latte'], ['Materijal', 'Nerđajući čelik']],
    'telefoni': [['Ekran', 'AMOLED 1.5"'], ['Baterija', 'do 14 dana'], ['Povezivanje', 'Bluetooth 5.3'], ['Senzori', 'Puls, SpO₂, GPS'], ['Vodootpornost', '5 ATM'], ['Kompatibilnost', 'Android i iOS']],
    'bela-tehnika': [['Tip', 'Kombinovani frižider'], ['Zapremina', '355 L'], ['Energetska klasa', 'A++'], ['Sistem hlađenja', 'No Frost'], ['Nivo buke', '38 dB'], ['Dimenzije (V × Š × D)', '192 × 60 × 66 cm'], ['Boja', 'Inox']],
    'lepota': [['Tip', 'Fen za kosu'], ['Snaga', '2200 W'], ['Brzine', '3 brzine, 3 temperature'], ['Funkcije', 'Jonska nega, hladni mlaz'], ['Dodaci', 'Difuzer, koncentrator']],
    'klima': [['Tip', 'Inverter, mono split'], ['Rashladni učinak', '12000 BTU'], ['Energetska klasa', 'A+++'], ['Nivo buke', '22 dB'], ['Wi-Fi', 'Da, kontrola putem aplikacije'], ['Površina', 'do 35 m²']],
    'basta': [['Tip', 'Električna kosačica'], ['Snaga', '1600 W'], ['Širina košenja', '38 cm'], ['Korpa za travu', '45 L'], ['Podešavanje visine', '5 nivoa']],
  };
  const mid = byCat[p.cat] || [['Tip', cat_label(p)], ['Materijal', 'Premium izrada']];
  return [['Brend', brand], ...mid, ['Garancija', '2 godine'], ['Dostupnost', p.soldOut ? 'Nije na stanju' : 'Na stanju'], ['Isporuka', 'Brza, 3 do 6 radnih dana'], ['Šifra', 'SM-' + (10000 + p.id)]];
}
function cat_label() { return 'Kućni uređaj'; }
function capSpec(s) { return (typeof s === 'string' && s.length) ? s.charAt(0).toUpperCase() + s.slice(1) : s; }
// Pravi specifikacije iz techSpecs niza ("ključ; vrednost" ili slobodan tekst)
function parseSpecs(techSpecs, p) {
  const brand = p.brand ? (p.brand.charAt(0) + p.brand.slice(1).toLowerCase()) : '';
  const rows = [];
  if (brand) rows.push(['Brend', brand]);
  (techSpecs || []).forEach(line => {
    if (typeof line !== 'string') return;
    const s = line.trim(); if (!s) return;
    const i = s.indexOf(';');
    if (i >= 0) { const k = s.slice(0, i).trim(); let v = s.slice(i + 1).trim(); if (!v) v = 'Da'; rows.push([k ? capSpec(k) : '', v]); }
    else rows.push(['', s]);
  });
  rows.push(['Šifra', String(p.id).toUpperCase()]);
  return rows;
}

function ProductPage({ product, onNav, onAdd, onWish, wishlist, openProduct }) {
  const { PRODUCTS, CATEGORIES } = SM_DATA;
  const p = product;
  const [qty, setQty] = useStateP(1);
  const [tab, setTab] = useStateP('opis');
  const [lb, setLb] = useStateP(null);
  const [mainIdx, setMainIdx] = useStateP(0);
  const [detail, setDetail] = useStateP(null);
  const [reviews, setReviews] = useStateP([]);
  const [rsum, setRsum] = useStateP({ avg: 0, count: 0 });
  const [myRating, setMyRating] = useStateP(0);
  const [myText, setMyText] = useStateP('');
  const [rBusy, setRBusy] = useStateP(false);
  const [rErr, setRErr] = useStateP('');
  React.useEffect(() => {
    let live = true; setDetail(null); setMainIdx(0); setTab('opis');
    setReviews([]); setRsum({ avg: 0, count: 0 }); setMyRating(0); setMyText(''); setRErr('');
    fetch('/sm-api/product/' + encodeURIComponent(p.id))
      .then(r => r.ok ? r.json() : null).then(d => { if (live) setDetail(d); }).catch(() => {});
    fetch('/sm-api/reviews/' + encodeURIComponent(p.id))
      .then(r => r.ok ? r.json() : null).then(d => { if (live && d) { setReviews(d.reviews || []); setRsum({ avg: d.avg || 0, count: d.count || 0 }); } }).catch(() => {});
    return () => { live = false; };
  }, [p.id]);
  const loggedIn = (() => { try { return !!localStorage.getItem('sm_token'); } catch (e) { return false; } })();
  const submitReview = async () => {
    let tok = null; try { tok = localStorage.getItem('sm_token'); } catch (e) {}
    if (!tok) return setRErr('Prijavi se da ostaviš recenziju.');
    if (!myRating) return setRErr('Izaberi ocenu (1–5 zvezdica).');
    setRBusy(true); setRErr('');
    try {
      const r = await fetch('/sm-api/reviews/' + encodeURIComponent(p.id), { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + tok }, body: JSON.stringify({ rating: myRating, text: myText }) });
      const d = await r.json();
      if (!r.ok) { setRBusy(false); return setRErr(d.error || 'Greška.'); }
      setReviews(d.reviews || []); setRsum({ avg: d.avg || 0, count: d.count || 0 }); setMyText(''); setRBusy(false);
    } catch (e) { setRBusy(false); setRErr('Server nije dostupan.'); }
  };
  const isMobile = useIsMobile();
  const cat = CATEGORIES.find(c => c.slug === p.cat);
  const related = PRODUCTS.filter(x => x.cat === p.cat && x.id !== p.id).slice(0, 4);
  const wide = { maxWidth: 1440, margin: '0 auto', padding: '0 24px' };
  const wished = wishlist.includes(p.id);
  const gallery = (detail && detail.images && detail.images.length) ? detail.images : (p.img ? [p.img] : []);
  const hasImg = gallery.length > 0;

  const specs = (detail && detail.techSpecs && detail.techSpecs.length) ? parseSpecs(detail.techSpecs, p) : productSpecs(p);

  return (
    <div style={{ ...wide, paddingTop: 22, paddingBottom: 8 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--sm-text-muted)', marginBottom: 18 }}>
        <a onClick={() => onNav({ view: 'home' })} style={{ cursor: 'pointer', color: 'var(--sm-text-muted)' }}>Početna</a>
        {I('chevron-right', 14)}
        <a onClick={() => onNav({ view: 'category', slug: p.cat })} style={{ cursor: 'pointer', color: 'var(--sm-text-muted)' }}>{cat ? cat.title : 'Proizvodi'}</a>
        {I('chevron-right', 14)}<span style={{ color: 'var(--sm-text)', fontWeight: 600 }}>{p.brand}</span>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 36, alignItems: 'start' }}>
        {/* gallery */}
        <div style={{ background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-xl)', padding: isMobile ? 20 : 36, position: 'relative' }}>
          {hasImg ? (
            <React.Fragment>
          <div style={{ aspectRatio: '1/1', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
            <img onClick={() => setLb(mainIdx)} src={gallery[mainIdx]} alt={p.title} style={{ maxWidth: '90%', maxHeight: '90%', objectFit: 'contain', cursor: 'zoom-in' }} />
            {gallery.length > 1 && (
              <React.Fragment>
                <button onClick={() => setMainIdx(m => (m - 1 + gallery.length) % gallery.length)} aria-label="Prethodna slika" style={galArrow('left')}>{I('chevron-left', 24)}</button>
                <button onClick={() => setMainIdx(m => (m + 1) % gallery.length)} aria-label="Sledeća slika" style={galArrow('right')}>{I('chevron-right', 24)}</button>
              </React.Fragment>
            )}
            <span onClick={() => setLb(mainIdx)} style={{ position: 'absolute', right: 4, bottom: 4, display: 'inline-flex', alignItems: 'center', gap: 6, height: 36, padding: '0 13px', borderRadius: 'var(--sm-radius-pill)', background: 'rgba(255,255,255,.92)', border: '1px solid var(--sm-border)', boxShadow: 'var(--sm-shadow-sm)', color: 'var(--sm-text)', fontFamily: 'var(--sm-font-display)', fontWeight: 600, fontSize: 12.5, cursor: 'zoom-in' }}>{I('zoom-in', 16)} Uvećaj</span>
          </div>
          <div style={{ display: 'flex', gap: 10, marginTop: 18, justifyContent: 'center' }}>
            {gallery.map((src, i) => <button key={i} onClick={() => setMainIdx(i)} aria-label={'Slika ' + (i + 1)} style={{ width: 64, height: 64, borderRadius: 'var(--sm-radius-sm)', border: i === mainIdx ? '2px solid var(--sm-primary)' : '1px solid var(--sm-border)', background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', padding: 0 }}><img src={src} style={{ maxWidth: '70%', maxHeight: '70%', objectFit: 'contain', opacity: i === mainIdx ? 1 : .6 }} /></button>)}
          </div>
            </React.Fragment>
          ) : (
            <div style={{ aspectRatio: '1/1', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <span style={{ width: '74%', aspectRatio: '1.2 / 1', borderRadius: 'var(--sm-radius-xl)', background: 'linear-gradient(150deg, var(--sm-purple-50), var(--sm-bg))', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--sm-purple-300)' }}>{I(p.icon || 'package', 96, { strokeWidth: 1.2 })}</span>
            </div>
          )}
        </div>

        {/* buy box */}
        <div style={{ alignSelf: 'stretch', display: 'flex', flexDirection: 'column' }}>
          <div style={{ background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-xl)', padding: isMobile ? '22px 20px 24px' : '34px 30px 38px', display: 'flex', flexDirection: 'column' }}>
            <div style={{ order: 0, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
              <span style={{ fontFamily: 'var(--sm-font-techno)', textTransform: 'uppercase', letterSpacing: '.12em', fontSize: 13, color: 'var(--sm-violet)' }}>{p.brand}</span>
              <span style={{ fontSize: 13, color: 'var(--sm-text-muted)' }}>Šifra: <b style={{ fontWeight: 600, color: 'var(--sm-text)' }}>{String(p.id).toUpperCase()}</b></span>
            </div>
            <h1 style={{ order: 1, fontSize: isMobile ? 23 : 30, fontWeight: 600, margin: isMobile ? '10px 0 12px' : '12px 0 14px', lineHeight: 1.2 }}>{p.title}</h1>
            <div style={{ order: isMobile ? 3 : 2, display: 'flex', alignItems: 'center', gap: 12, marginBottom: isMobile ? 0 : 22, marginTop: isMobile ? 14 : 0 }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, height: 30, padding: '0 14px', borderRadius: 'var(--sm-radius-pill)', background: p.soldOut ? 'var(--sm-gray-100)' : 'color-mix(in srgb, var(--sm-success) 10%, #fff)', border: p.soldOut ? '1px solid var(--sm-border)' : '1px solid color-mix(in srgb, var(--sm-success) 25%, #fff)', fontFamily: 'var(--sm-font-display)', fontWeight: 600, fontSize: 13, color: p.soldOut ? 'var(--sm-text-muted)' : 'color-mix(in srgb, var(--sm-success) 80%, #000)' }}>
                <span style={{ width: 8, height: 8, borderRadius: '50%', flex: 'none', background: p.soldOut ? 'var(--sm-gray-400)' : 'var(--sm-success)', boxShadow: p.soldOut ? 'none' : '0 0 0 3px color-mix(in srgb, var(--sm-success) 22%, transparent)' }}></span>
                {p.soldOut ? 'Nije na stanju' : 'Na stanju'}
              </span>
            </div>

            <div style={{ order: isMobile ? 2 : 3 }}>
              <PriceTag price={p.price} oldPrice={p.old} size="lg" />
              {p.old != null && <div style={{ marginTop: 6, fontSize: 14, color: 'var(--sm-text-muted)' }}>Ušteda: <b style={{ color: 'var(--sm-primary)', fontWeight: 700 }}>{fmt(p.old - p.price)} din.</b></div>}
            </div>
          </div>

          <div style={{ marginTop: 18, background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-xl)', padding: '18px 20px', display: 'flex', alignItems: 'center', gap: 16 }}>
            <span style={{ width: 42, height: 42, flex: 'none', borderRadius: 12, background: 'var(--sm-purple-50)', color: 'var(--sm-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{I('building-2', 21)}</span>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'var(--sm-font-display)', fontWeight: 600, fontSize: 15.5, color: 'var(--sm-text)', lineHeight: 1.25 }}>Želite li ponudu za firmu?</div>
              <div style={{ fontSize: 13, color: 'var(--sm-text-muted)', marginTop: 2 }}>Količinski popusti i fakturisanje na pravno lice.</div>
            </div>
            <a onClick={() => onNav({ view: 'page', key: 'pravna-lica' })} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, flex: 'none', cursor: 'pointer', fontFamily: 'var(--sm-font-display)', fontWeight: 600, fontSize: 14, color: 'var(--sm-primary)', textDecoration: 'underline', textUnderlineOffset: 3 }}>Kontaktirajte nas {I('external-link', 15)}</a>
          </div>

          <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 12, marginBottom: 16, paddingTop: 16 }}>
            <div style={{ display: 'flex', alignItems: 'center', border: '1.5px solid var(--sm-border)', borderRadius: 'var(--sm-radius-pill)', height: 54, padding: '0 6px' }}>
              <button onClick={() => setQty(q => Math.max(1, q - 1))} style={qtyBtn}>{I('minus', 18)}</button>
              <span style={{ width: 36, textAlign: 'center', fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 18 }}>{qty}</span>
              <button onClick={() => setQty(q => q + 1)} style={qtyBtn}>{I('plus', 18)}</button>
            </div>
            <Button variant="primary" size="lg" block disabled={p.soldOut} onClick={() => onAdd(p, qty)} iconLeft={I('shopping-cart', 20)} style={{ flex: isMobile ? '1 1 100%' : 1, order: isMobile ? 2 : 0 }}>{p.soldOut ? 'Nije na stanju' : 'Dodaj u korpu'}</Button>
            <IconButton label="Lista želja" variant="light" size="lg" active={wished} onClick={() => onWish(p)}><i data-lucide="heart" style={{ width: 20, height: 20, fill: wished ? 'currentColor' : 'none' }} /></IconButton>
          </div>
          <Button variant="secondary" size="lg" block onClick={() => { onAdd(p, qty); onNav({ view: 'cart' }); }}>Kupi odmah</Button>

          <div style={{ paddingTop: 22 }}><ServiceStrip vertical /></div>
        </div>
      </div>

      {/* tabs */}
      <div style={{ marginTop: 44 }}>
        <div style={{ display: 'flex', gap: 26, borderBottom: '1px solid var(--sm-border)', marginBottom: 22 }}>
          {[['opis', 'Opis'], ['spec', 'Specifikacija'], ['reviews', 'Recenzije' + (rsum.count ? ' (' + rsum.count + ')' : '')]].map(([k, l]) => (
            <button key={k} onClick={() => setTab(k)} style={{ background: 'none', border: 'none', cursor: 'pointer', fontFamily: 'var(--sm-font-display)', fontWeight: tab === k ? 700 : 600, fontSize: 16, color: tab === k ? 'var(--sm-primary)' : 'var(--sm-text-muted)', padding: '0 0 14px', borderBottom: tab === k ? '3px solid var(--sm-primary)' : '3px solid transparent', marginBottom: -1 }}>{l}</button>
          ))}
        </div>
        {tab === 'opis' && (
          (detail && detail.description && detail.description.trim())
            ? <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--sm-gray-700)', maxWidth: '74ch', margin: 0, whiteSpace: 'pre-line' }}>{detail.description}</p>
            : <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--sm-gray-700)', maxWidth: '70ch', margin: 0 }}>{p.title} je odličan izbor za tvoj dom — spaja vrhunski kvalitet izrade, dugotrajne performanse i moderan dizajn. Uz <b>2 godine garancije</b> i besplatnu isporuku, kupovina je potpuno bez brige. Naš tim ti stoji na raspolaganju za svaki savet pre i posle kupovine.</p>
        )}
        {tab === 'spec' && (
          <div style={{ background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-xl)', overflow: 'hidden', boxShadow: 'var(--sm-shadow-sm)', maxWidth: 720 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '15px 22px', background: 'linear-gradient(120deg, var(--sm-purple-50), #fff)' }}>
              <span style={{ width: 30, height: 30, flex: 'none', borderRadius: 8, background: 'var(--sm-primary)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="12" x2="3" y2="12"></line><line x1="21" y1="18" x2="3" y2="18"></line><circle cx="8" cy="6" r="2.2" fill="var(--sm-primary)"></circle><circle cx="16" cy="12" r="2.2" fill="var(--sm-primary)"></circle><circle cx="9" cy="18" r="2.2" fill="var(--sm-primary)"></circle></svg></span>
              <span style={{ fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 16 }}>Specifikacije</span>
              <span style={{ marginLeft: 'auto', fontFamily: 'var(--sm-font-body)', fontSize: 12.5, color: 'var(--sm-text-subtle)' }}>{specs.length} stavki</span>
            </div>
            {specs.map(([k, v], i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '42% 1fr', alignItems: 'center', gap: 14, padding: '13px 22px', borderTop: '1px solid var(--sm-gray-100)', transition: 'background .12s' }}
                onMouseEnter={e => { e.currentTarget.style.background = 'var(--sm-purple-50)'; }}
                onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}>
                <span style={{ fontFamily: 'var(--sm-font-body)', fontSize: 13.5, color: 'var(--sm-text-muted)' }}>{k}</span>
                <span style={{ fontFamily: 'var(--sm-font-display)', fontWeight: 600, fontSize: 14.5, color: 'var(--sm-text)' }}>{v}</span>
              </div>
            ))}
          </div>
        )}
        {tab === 'reviews' && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 680 }}>
            {rsum.count > 0 ? (
              <div style={{ display: 'flex', alignItems: 'center', gap: 16, paddingBottom: 4 }}>
                <div style={{ fontFamily: 'var(--sm-font-display)', fontWeight: 800, fontSize: 38, lineHeight: 1 }}>{rsum.avg.toFixed(1)}</div>
                <div><Rating value={rsum.avg} /><div style={{ fontSize: 13, color: 'var(--sm-text-muted)', marginTop: 3 }}>{rsum.count} {rsum.count === 1 ? 'recenzija' : 'recenzija'}</div></div>
              </div>
            ) : (
              <div style={{ padding: '6px 0' }}>
                <div style={{ fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 18, color: 'var(--sm-text)' }}>Još nema recenzija</div>
                <div style={{ fontSize: 14.5, color: 'var(--sm-text-muted)', marginTop: 4 }}>Budi prvi koji će oceniti ovaj proizvod — dodaj recenziju ispod.</div>
              </div>
            )}
            {reviews.map((rv, i) => (
              <div key={i} style={{ background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-md)', padding: 18 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8, gap: 10 }}><span style={{ fontWeight: 700, fontFamily: 'var(--sm-font-display)' }}>{rv.name}</span><Rating value={rv.rating} /></div>
                {rv.text && <p style={{ margin: 0, fontSize: 15, color: 'var(--sm-gray-700)', lineHeight: 1.6 }}>{rv.text}</p>}
              </div>
            ))}
            {/* dodaj recenziju */}
            <div style={{ background: 'var(--sm-gray-50)', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-md)', padding: 20 }}>
              <div style={{ fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 16, marginBottom: 12 }}>Dodaj recenziju</div>
              {loggedIn ? (
                <React.Fragment>
                  <div style={{ display: 'flex', gap: 4, marginBottom: 12 }}>
                    {[1, 2, 3, 4, 5].map(n => (
                      <button key={n} type="button" onClick={() => setMyRating(n)} aria-label={n + ' zvezdica'} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: 'var(--sm-warning)', lineHeight: 0 }}>
                        <i data-lucide="star" style={{ width: 30, height: 30, fill: n <= myRating ? 'currentColor' : 'none' }} />
                      </button>
                    ))}
                  </div>
                  <textarea value={myText} onChange={e => setMyText(e.target.value)} placeholder="Napiši svoje iskustvo sa proizvodom (opciono)…" style={{ width: '100%', minHeight: 92, border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-sm)', padding: '12px 14px', fontFamily: 'var(--sm-font-body)', fontSize: 14.5, outline: 'none', boxSizing: 'border-box', resize: 'vertical' }} />
                  {rErr && <div style={{ color: 'var(--sm-sale)', fontSize: 13.5, fontWeight: 600, margin: '10px 0 0' }}>{rErr}</div>}
                  <Button variant="primary" size="md" disabled={rBusy} onClick={submitReview} style={{ marginTop: 14 }} iconLeft={I('send', 16)}>{rBusy ? 'Slanje…' : 'Objavi recenziju'}</Button>
                </React.Fragment>
              ) : (
                <div style={{ fontSize: 14.5, color: 'var(--sm-text-muted)' }}>
                  <a onClick={() => onNav({ view: 'account' })} style={{ color: 'var(--sm-primary)', fontWeight: 700, cursor: 'pointer', textDecoration: 'underline', textUnderlineOffset: 2 }}>Prijavi se</a> da ostaviš recenziju.
                </div>
              )}
            </div>
          </div>
        )}
      </div>

      {/* related */}
      {related.length > 0 && (
        <div style={{ marginTop: 48 }}>
          <h3 style={{ fontSize: 26, marginBottom: 18 }}>Slični proizvodi</h3>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(264px, 1fr))', gap: 16 }}>
            {related.map(r => <ProductCard key={r.id} p={r} onAdd={onAdd} onWish={onWish} wished={wishlist.includes(r.id)} onOpen={openProduct} />)}
          </div>
        </div>
      )}
      {lb !== null && <Lightbox images={gallery} index={lb} onClose={() => setLb(null)} />}
    </div>
  );
}
const qtyBtn = { width: 38, height: 38, borderRadius: '50%', border: 'none', background: 'transparent', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--sm-text)' };
const galArrow = (side) => ({ position: 'absolute', top: '50%', [side]: 4, transform: 'translateY(-50%)', width: 42, height: 42, borderRadius: '50%', border: '1px solid var(--sm-border)', background: 'rgba(255,255,255,.96)', boxShadow: 'var(--sm-shadow-sm)', color: 'var(--sm-text)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 2 });

Object.assign(window, { ProductPage });