/* SUPERMEDIA storefront — footer / company pages + immersive About */
const { useState: useStatePg, useEffect: useEffectPg, useRef: useRefPg } = React;

const PG_WIDE = { maxWidth: 1180, margin: '0 auto', padding: '0 24px' };

/* ---------- shared building blocks ---------- */
function PageHero({ eyebrow, title, subtitle, onNav, accent = 'var(--sm-primary)' }) {
  return (
    <div style={{ background: 'linear-gradient(135deg, var(--sm-purple-50), #fff 62%)', borderBottom: '1px solid var(--sm-border)' }}>
      <div style={{ ...PG_WIDE, padding: '30px 24px 44px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--sm-text-muted)', marginBottom: 22 }}>
          <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 }}>{title}</span>
        </div>
        {eyebrow && <div style={{ fontFamily: 'var(--sm-font-techno)', textTransform: 'uppercase', letterSpacing: '.14em', fontSize: 13, color: accent, marginBottom: 12 }}>{eyebrow}</div>}
        <h1 style={{ fontSize: 44, fontWeight: 800, margin: 0, lineHeight: 1.08, letterSpacing: '-.02em', maxWidth: '16ch' }}>{title}</h1>
        {subtitle && <p style={{ fontSize: 18, lineHeight: 1.6, color: 'var(--sm-gray-700)', margin: '16px 0 0', maxWidth: '60ch' }}>{subtitle}</p>}
      </div>
    </div>
  );
}

function InfoCard({ icon, title, children, tone, style }) {
  return (
    <div style={{ background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-xl)', padding: '26px 26px', boxShadow: 'var(--sm-shadow-xs)', ...style }}>
      <span style={{ width: 48, height: 48, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 14, background: tone || 'var(--sm-purple-50)', color: 'var(--sm-primary)', marginBottom: 16 }}>{I(icon, 24)}</span>
      <h3 style={{ fontSize: 19, fontWeight: 700, margin: '0 0 8px' }}>{title}</h3>
      <div style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--sm-gray-700)' }}>{children}</div>
    </div>
  );
}

function StepRow({ n, title, text }) {
  return (
    <div style={{ display: 'flex', gap: 18, alignItems: 'flex-start' }}>
      <span style={{ flex: 'none', width: 44, height: 44, borderRadius: '50%', background: 'var(--sm-primary)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--sm-font-display)', fontWeight: 800, fontSize: 18 }}>{n}</span>
      <div>
        <div style={{ fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 17, marginBottom: 4 }}>{title}</div>
        <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, color: 'var(--sm-gray-700)' }}>{text}</p>
      </div>
    </div>
  );
}

function PageOutro({ title, text, onNav }) {
  return (
    <div style={{ ...PG_WIDE, padding: '8px 24px 72px' }}>
      <div style={{ background: 'linear-gradient(120deg, var(--sm-primary), var(--sm-purple-400))', borderRadius: 'var(--sm-radius-xl)', padding: '40px 44px', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 22, color: '#fff' }}>
        <div>
          <h3 style={{ fontSize: 26, fontWeight: 800, margin: 0, color: '#fff' }}>{title}</h3>
          <p style={{ margin: '8px 0 0', fontSize: 16, color: 'rgba(255,255,255,.9)' }}>{text}</p>
        </div>
        <Button variant="light" size="lg" onClick={() => onNav({ view: 'category', slug: null })} iconRight={I('arrow-right', 18)}>Istraži ponudu</Button>
      </div>
    </div>
  );
}

/* ---------- FAQ ---------- */
function FAQPage({ onNav }) {
  const data = [
    ['Koliko traje isporuka?', 'Standardna isporuka stiže za 3 do 6 radnih dana na celoj teritoriji Srbije. Za artikle na stanju, porudžbine do 14h šaljemo isti dan.'],
    ['Da li je isporuka brza?', 'Da — isporuka stiže za 3 do 6 radnih dana na celoj teritoriji Srbije, a za artikle na stanju porudžbine do 14h šaljemo isti dan.'],
    ['Kako mogu da platim?', 'Plaćanje je moguće platnom karticom (Visa, Mastercard, DinaCard), pouzećem prilikom dostave ili bankovnim transferom za pravna lica.'],
    ['Koliki je rok za reklamaciju?', 'Reklamaciju možeš podneti u roku od zakonskih 2 godine za saobraznost. Postupak pokrećeš online za par minuta, a mi organizujemo preuzimanje.'],
    ['Da li mogu da vratim proizvod?', 'Naravno. Imaš 14 dana od prijema da odustaneš od kupovine bez navođenja razloga i dobiješ pun povraćaj sredstava.'],
    ['Imate li fizičke prodavnice?', 'SuperMedia je online prodavnica, ali servis, podršku i preuzimanje organizujemo kroz mrežu partnera u 20+ gradova.'],
  ];
  const [open, setOpen] = useStatePg(0);
  return (
    <div>
      <PageHero eyebrow="Pomoć i podrška" title="Često postavljana pitanja" subtitle="Najčešća pitanja o isporuci, plaćanju, garanciji i povraćaju — na jednom mestu." onNav={onNav} />
      <div style={{ ...PG_WIDE, padding: '44px 24px 64px', maxWidth: 880 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {data.map(([q, a], i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-md)', overflow: 'hidden', boxShadow: isOpen ? 'var(--sm-shadow-sm)' : 'none' }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, padding: '18px 22px', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left', fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 17, color: 'var(--sm-text)' }}>
                  {q}
                  <span style={{ flex: 'none', color: 'var(--sm-primary)', transition: 'transform .2s', transform: isOpen ? 'rotate(180deg)' : 'none' }}>{I('chevron-down', 22)}</span>
                </button>
                {isOpen && <div style={{ padding: '0 22px 20px', fontSize: 15.5, lineHeight: 1.65, color: 'var(--sm-gray-700)', animation: 'sm-fade-up .25s ease both' }}>{a}</div>}
              </div>
            );
          })}
        </div>
      </div>
      <PageOutro title="Nisi našao odgovor?" text="Naš tim podrške ti je dostupan svakog dana od 8 do 22h." onNav={onNav} />
    </div>
  );
}

/* ---------- Načini plaćanja ---------- */
function PlacanjePage({ onNav }) {
  const methods = [
    ['credit-card', 'Platne kartice', 'Plati online karticama Visa, Mastercard ili DinaCard. Transakcija je zaštićena 3D Secure protokolom.'],
    ['banknote', 'Pouzećem', 'Plati gotovinom ili karticom kuriru prilikom preuzimanja pošiljke — bez dodatnih troškova.'],
    ['building-2', 'Za pravna lica', 'Plaćanje po predračunu / virmanom uz fakturu na pravno lice. Idealno za firme i veće porudžbine.'],
  ];
  return (
    <div>
      <PageHero eyebrow="Sigurno i jednostavno" title="Načini plaćanja" subtitle="Biraj kako ti odgovara — sve transakcije su šifrovane i 100% bezbedne." onNav={onNav} />
      <div style={{ ...PG_WIDE, padding: '44px 24px 20px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 18 }}>
          {methods.map(([ic, t, d]) => <InfoCard key={t} icon={ic} title={t}>{d}</InfoCard>)}
        </div>
      </div>
      <div style={{ ...PG_WIDE, padding: '26px 24px 10px' }}>
        <div style={{ background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-xl)', padding: '22px 30px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 34, flexWrap: 'wrap' }}>
            {[['pay-raiffeisen', 36], ['pay-visa', 24], ['pay-dinacard', 28], ['pay-mastercard', 38]].map(([f, h]) => (
              <img key={f} src={SM_DATA.A + '/social/' + f + '.png'} alt={f} style={{ height: h, width: 'auto', objectFit: 'contain' }} />
            ))}
          </div>
        </div>
      </div>
      <div style={{ ...PG_WIDE, padding: '34px 24px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, color: 'var(--sm-success)', fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 16 }}>
          {I('shield-check', 22)} Sva plaćanja obrađuje Raiffeisen banka uz PCI-DSS standard zaštite.
        </div>
      </div>
      <div style={{ height: 56 }}></div>
    </div>
  );
}

/* ---------- Brendovi ---------- */
function BrendoviPage({ onNav }) {
  const logos = (window.BRAND_LOGOS || []);
  return (
    <div>
      <PageHero eyebrow="Proveren kvalitet" title="Brendovi" subtitle="Sarađujemo isključivo sa ovlašćenim distributerima vodećih svetskih brendova." onNav={onNav} />
      <div style={{ ...PG_WIDE, padding: '44px 24px 64px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 18 }}>
          {logos.map((b, i) => (
            <a key={i} title={b.name} onClick={() => onNav({ view: 'category', brand: b.name })} style={{
              height: 150, background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-lg)', boxShadow: 'var(--sm-shadow-sm)',
              display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', transition: 'transform .18s, box-shadow .18s',
            }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = 'var(--sm-shadow-md)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'var(--sm-shadow-sm)'; }}>
              <img src={SM_DATA.A + '/' + b.src} alt={b.name} style={{ maxWidth: b.maxW || '70%', maxHeight: b.maxH || '50%', objectFit: 'contain' }} />
            </a>
          ))}
        </div>
      </div>
      <PageOutro title="Tražiš određeni brend?" text="Pretraži kompletan asortiman i pronađi tačno ono što ti treba." onNav={onNav} />
    </div>
  );
}

/* ---------- Poklon vaučeri ---------- */
function VoucerPage({ onNav, onAdd }) {
  const denoms = [
    [3000, 'linear-gradient(135deg, var(--sm-primary), var(--sm-violet))'],
    [5000, 'linear-gradient(135deg, #1f8a5b, #45c08c)'],
    [10000, 'linear-gradient(135deg, #e0623c, #f59e6b)'],
    [20000, 'linear-gradient(135deg, #2a5fd0, #5b8def)'],
  ];
  const [custom, setCustom] = useStatePg('');
  const addVoucher = (v) => {
    if (!v || v <= 0) return;
    const id = 'gc-' + v;
    const prod = { id, title: 'Poklon vaučer ' + fmt(v) + ' din.', price: v, brand: 'SuperMedia', voucher: true, img: null };
    window.SM_EXTRA = window.SM_EXTRA || {};
    window.SM_EXTRA[id] = prod;
    onAdd && onAdd(prod);
  };
  const customVal = parseInt(String(custom).replace(/\D/g, ''), 10) || 0;
  return (
    <div>
      <PageHero eyebrow="Najsigurniji poklon" title="Poklon vaučeri" subtitle="Pokloni mogućnost izbora. SuperMedia vaučer važi na ceo asortiman, 12 meseci od kupovine." onNav={onNav} />
      <div style={{ ...PG_WIDE, padding: '44px 24px 8px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 20 }}>
          {denoms.map(([v, grad]) => (
            <div key={v} style={{ position: 'relative', borderRadius: 'var(--sm-radius-xl)', padding: '30px 30px', color: '#fff', overflow: 'hidden', background: grad, boxShadow: 'var(--sm-shadow-md)', display: 'flex', alignItems: 'center', gap: 24 }}>
              <div style={{ position: 'absolute', right: -30, top: -30, width: 130, height: 130, borderRadius: '50%', background: 'rgba(255,255,255,.12)' }}></div>
              <div style={{ position: 'absolute', right: -50, bottom: -50, width: 150, height: 150, borderRadius: '50%', background: 'rgba(255,255,255,.08)' }}></div>
              <span style={{ flex: 'none', width: 84, height: 84, borderRadius: 22, background: 'rgba(255,255,255,.18)', border: '1px solid rgba(255,255,255,.32)', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>{I('gift', 46)}</span>
              <div style={{ flex: 1, minWidth: 0, position: 'relative' }}>
                <div style={{ fontFamily: 'var(--sm-font-techno)', textTransform: 'uppercase', letterSpacing: '.14em', fontSize: 12, opacity: .85 }}>Poklon vaučer</div>
                <div style={{ fontFamily: 'var(--sm-font-body)', fontWeight: 800, fontSize: 42, margin: '8px 0 14px' }}>{fmt(v)} <span style={{ fontSize: 18 }}>din.</span></div>
                <Button variant="light" size="sm" onClick={() => addVoucher(v)} iconLeft={I('shopping-cart', 16)}>U korpu</Button>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* personalizuj vaučer */}
      <div style={{ ...PG_WIDE, padding: '20px 24px 8px' }}>
        <div style={{ position: 'relative', overflow: 'hidden', borderRadius: 'var(--sm-radius-xl)', border: '1.5px dashed var(--sm-purple-300)', background: 'linear-gradient(135deg, var(--sm-purple-50), #fff 70%)', padding: '28px 30px', display: 'flex', alignItems: 'center', gap: 26, flexWrap: 'wrap' }}>
          <span style={{ flex: 'none', width: 64, height: 64, borderRadius: 18, background: 'var(--sm-primary)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--sm-shadow-purple)' }}>{I('sliders-horizontal', 30)}</span>
          <div style={{ flex: '1 1 260px', minWidth: 220 }}>
            <h3 style={{ margin: '0 0 4px', fontFamily: 'var(--sm-font-display)', fontWeight: 800, fontSize: 21 }}>Personalizuj vaučer</h3>
            <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.55, color: 'var(--sm-text-muted)' }}>Unesi tačan iznos koji želiš da pokloniš — od 500 do 100.000 din.</p>
          </div>
          <div style={{ display: 'flex', alignItems: 'stretch', gap: 12, flex: '0 0 auto', flexWrap: 'wrap' }}>
            <div style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
              <input type="text" inputMode="numeric" value={custom} onChange={e => setCustom(e.target.value)} placeholder="Iznos"
                style={{ width: 170, height: 52, border: '1.5px solid var(--sm-border)', borderRadius: 'var(--sm-radius-pill)', padding: '0 56px 0 20px', fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 17, outline: 'none', background: '#fff', boxSizing: 'border-box' }}
                onFocus={e => e.currentTarget.style.borderColor = 'var(--sm-primary)'} onBlur={e => e.currentTarget.style.borderColor = 'var(--sm-border)'} />
              <span style={{ position: 'absolute', right: 20, fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 14, color: 'var(--sm-text-muted)', pointerEvents: 'none' }}>din.</span>
            </div>
            <Button variant="primary" size="lg" disabled={customVal < 500} onClick={() => { addVoucher(customVal); setCustom(''); }} iconLeft={I('shopping-cart', 18)}>Dodaj u korpu</Button>
          </div>
        </div>
      </div>

      <div style={{ ...PG_WIDE, padding: '40px 24px 10px' }}>
        <h2 style={{ fontSize: 26, fontWeight: 800, marginBottom: 26 }}>Kako funkcioniše</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 28 }}>
          <StepRow n="1" title="Izaberi iznos" text="Odaberi vrednost vaučera ili unesi proizvoljan iznos prilagođen prilici." />
          <StepRow n="2" title="Pošalji digitalno" text="Vaučer stiže na email obdarenog sa jedinstvenim kodom i čestitkom." />
          <StepRow n="3" title="Iskoristi u kupovini" text="Kod se unosi u korpi i odbija od ukupnog iznosa porudžbine." />
        </div>
      </div>
      <div style={{ height: 64 }}></div>
    </div>
  );
}

/* ---------- Reklamacije ---------- */
function ReklamacijePage({ onNav }) {
  return (
    <div>
      <PageHero eyebrow="Tu smo za tebe" title="Reklamacije" subtitle="Ako nešto nije u redu, rešavamo brzo i bez komplikacija. Evo kako teče postupak." onNav={onNav} />
      <div style={{ ...PG_WIDE, padding: '44px 24px 8px', maxWidth: 820 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 26 }}>
          <StepRow n="1" title="Prijavi reklamaciju" text="Popuni online formular sa brojem porudžbine i opisom problema — potrebno je par minuta." />
          <StepRow n="2" title="Preuzimanje proizvoda" text="Organizujemo besplatno preuzimanje artikla sa tvoje adrese u dogovoreno vreme." />
          <StepRow n="3" title="Provera i odluka" text="Stručni tim utvrđuje osnovanost u zakonskom roku od 8 dana i obaveštava te o ishodu." />
          <StepRow n="4" title="Rešenje" text="Popravka, zamena ili povraćaj sredstava — biraš opciju koja ti najviše odgovara." />
        </div>
      </div>
      <div style={{ ...PG_WIDE, padding: '38px 24px 0', maxWidth: 820 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, background: 'var(--sm-purple-50)', border: '1px solid var(--sm-purple-100)', borderRadius: 'var(--sm-radius-lg)', padding: '20px 24px' }}>
          {I('info', 24, { color: 'var(--sm-primary)' })}
          <span style={{ fontSize: 15.5, color: 'var(--sm-gray-700)', lineHeight: 1.55 }}>Za saobraznost robe važi zakonski rok od <b>2 godine</b> od dana kupovine. Sačuvaj fiskalni račun ili broj porudžbine.</span>
        </div>
      </div>
      <div style={{ ...PG_WIDE, padding: '30px 24px 0', maxWidth: 820 }}>
        <Button variant="primary" size="lg" iconLeft={I('file-text', 20)} onClick={() => onNav({ view: 'page', key: 'kontakt' })}>Pokreni reklamaciju</Button>
      </div>
      <div style={{ height: 64 }}></div>
    </div>
  );
}

/* ---------- Servis ---------- */
function ServisPage({ onNav }) {
  const cards = [
    ['wrench', 'Ovlašćeni servis', 'Popravke obavljaju ovlašćeni serviseri uz originalne delove i garanciju na izvršenu uslugu.'],
    ['truck', 'Servis na adresi', 'Za belu tehniku i velike uređaje dolazimo na tvoju adresu — bez transporta i gužve.'],
    ['shield', 'Produžena garancija', 'Dodatne 1 do 3 godine bezbrižnosti uz pakete produžene garancije za ključne kategorije.'],
    ['headphones', 'Tehnička podrška', 'Pomoć pri instalaciji i podešavanju uređaja, telefonom ili putem video poziva.'],
  ];
  return (
    <div>
      <PageHero eyebrow="Posle kupovine" title="Servis" subtitle="Naša briga ne prestaje na isporuci. Održavamo tvoje uređaje u savršenom stanju." onNav={onNav} />
      <div style={{ ...PG_WIDE, padding: '44px 24px 16px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: 18 }}>
          {cards.map(([ic, t, d]) => <InfoCard key={t} icon={ic} title={t}>{d}</InfoCard>)}
        </div>
      </div>
      <PageOutro title="Treba ti servis?" text="Zakaži termin ili nam opiši problem — javljamo se istog dana." onNav={onNav} />
    </div>
  );
}

/* ---------- Karijera ---------- */
function KarijeraPage({ onNav }) {
  const [applyFor, setApplyFor] = React.useState(null);
  const jobs = [
    ['Frontend inženjer', 'Tehnologija', 'Beograd / Remote', 'Puno radno vreme'],
    ['Agent korisničke podrške', 'Podrška', 'Novi Sad', 'Puno radno vreme'],
  ];
  const perks = [['rocket', 'Brz rast'], ['heart', 'Fer uslovi'], ['home', 'Hibridni rad'], ['graduation-cap', 'Edukacija']];
  return (
    <div>
      <PageHero eyebrow="Pridruži nam se" title="Karijera u SuperMedia" subtitle="Svaki mesec rastemo. Svaki mesec učimo. Ako voliš brz tempo, velike ciljeve i okruženje koje te gura napred — SuperMedia je pravo mesto za tebe." onNav={onNav} />
      <div style={{ ...PG_WIDE, padding: '40px 24px 6px' }}>
        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginBottom: 38 }}>
          {perks.map(([ic, t]) => (
            <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 10, background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-pill)', padding: '10px 18px', fontFamily: 'var(--sm-font-display)', fontWeight: 600, fontSize: 15 }}>
              <span style={{ color: 'var(--sm-primary)' }}>{I(ic, 18)}</span>{t}
            </span>
          ))}
        </div>
        <h2 style={{ fontSize: 26, fontWeight: 800, marginBottom: 18 }}>Otvorene pozicije</h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {jobs.map(([title, dep, loc, type]) => (
            <div key={title} style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 16, background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-md)', padding: '13px 24px', transition: 'box-shadow .15s, transform .15s', cursor: 'pointer' }}
              onMouseEnter={e => { e.currentTarget.style.boxShadow = 'var(--sm-shadow-sm)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
              onMouseLeave={e => { e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.transform = 'none'; }}>
              <div>
                <div style={{ fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 18 }}>{title}</div>
                <div style={{ display: 'flex', gap: 14, marginTop: 6, fontSize: 14, color: 'var(--sm-text-muted)' }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>{I('briefcase', 14)}{dep}</span>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>{I('map-pin', 14)}{loc}</span>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>{I('clock', 14)}{type}</span>
                </div>
              </div>
              <Button variant="outline" size="sm" iconRight={I('arrow-right', 16)} onClick={() => setApplyFor(title)}>Prijavi se</Button>
            </div>
          ))}
        </div>
      </div>
      {applyFor && <ApplyModal position={applyFor} onClose={() => setApplyFor(null)} />}
      <div style={{ height: 64 }}></div>
    </div>
  );
}

function ApplyModal({ position, onClose }) {
  const [f, setF] = React.useState({ name: '', email: '', phone: '', message: '' });
  const [file, setFile] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState('');
  const [doneRef, setDoneRef] = React.useState(null);
  const set = (k) => (e) => setF(s => ({ ...s, [k]: e.target.value }));
  const onFile = (e) => {
    const fl = e.target.files && e.target.files[0];
    if (!fl) return;
    if (!/\.(pdf|docx?|odt|rtf)$/i.test(fl.name)) { setErr('Dozvoljen je PDF ili Word dokument.'); return; }
    if (fl.size > 5 * 1024 * 1024) { setErr('Dokument je prevelik (maks. 5 MB).'); return; }
    setErr(''); setFile(fl);
  };
  const submit = async () => {
    setErr('');
    if (!f.name.trim()) return setErr('Unesi ime i prezime.');
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(f.email.trim())) return setErr('Unesi ispravan email.');
    if (f.phone.replace(/\D/g, '').length < 6) return setErr('Unesi ispravan broj telefona.');
    if (!file) return setErr('Priloži svoj CV (PDF ili Word).');
    setBusy(true);
    try {
      const dataUrl = await new Promise((res, rej) => { const r = new FileReader(); r.onload = () => res(r.result); r.onerror = rej; r.readAsDataURL(file); });
      const resp = await fetch('/sm-api/apply', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ position, name: f.name, email: f.email, phone: f.phone, message: f.message, fileName: file.name, fileData: dataUrl }) });
      const j = await resp.json().catch(() => ({}));
      if (!resp.ok) { setErr(j.error || 'Greška pri slanju. Pokušaj ponovo.'); setBusy(false); return; }
      setDoneRef(j.ref || 'OK');
    } catch (e) { setErr('Greška pri slanju. Pokušaj ponovo.'); }
    setBusy(false);
  };
  const field = { width: '100%', height: 46, padding: '0 14px', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-md)', fontFamily: 'var(--sm-font-body)', fontSize: 15, outline: 'none', boxSizing: 'border-box' };
  return (
    <div onMouseDown={onClose} style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(22,18,30,.55)', backdropFilter: 'blur(4px)', WebkitBackdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}>
      <div onMouseDown={e => e.stopPropagation()} style={{ width: '100%', maxWidth: 520, background: '#fff', borderRadius: 'var(--sm-radius-lg)', boxShadow: 'var(--sm-shadow-lg)', maxHeight: '90vh', overflowY: 'auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12, padding: '20px 24px 0' }}>
          <div>
            <div style={{ fontFamily: 'var(--sm-font-techno)', textTransform: 'uppercase', letterSpacing: '.1em', fontSize: 11, color: 'var(--sm-primary)' }}>Prijava za posao</div>
            <h2 style={{ margin: '4px 0 0', fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 21 }}>{position}</h2>
          </div>
          <button onClick={onClose} aria-label="Zatvori" style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--sm-text-muted)', padding: 4, lineHeight: 0 }}>{I('x', 22)}</button>
        </div>
        {doneRef ? (
          <div style={{ padding: '28px 24px 30px', textAlign: 'center' }}>
            <div style={{ color: '#1a9c5b', marginBottom: 10, display: 'flex', justifyContent: 'center' }}>{I('check-circle', 46)}</div>
            <h3 style={{ margin: '0 0 6px', fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 19 }}>Prijava poslata!</h3>
            <p style={{ margin: '0 0 4px', color: 'var(--sm-text-muted)', fontSize: 15 }}>Hvala, javićemo ti se na email.</p>
            <p style={{ margin: '0 0 18px', color: 'var(--sm-text-subtle)', fontSize: 13 }}>Broj prijave: <b>{doneRef}</b></p>
            <Button variant="primary" onClick={onClose}>Zatvori</Button>
          </div>
        ) : (
          <div style={{ padding: '18px 24px 24px', display: 'flex', flexDirection: 'column', gap: 12 }}>
            <input style={field} placeholder="Ime i prezime *" value={f.name} onChange={set('name')} />
            <input style={field} placeholder="Email *" type="email" value={f.email} onChange={set('email')} />
            <input style={field} placeholder="Telefon *" value={f.phone} onChange={set('phone')} />
            <textarea style={{ ...field, height: 92, padding: '12px 14px', resize: 'vertical' }} placeholder="Poruka (opciono) — par reči o sebi" value={f.message} onChange={set('message')} />
            <label style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', border: '1.5px dashed var(--sm-border)', borderRadius: 'var(--sm-radius-md)', cursor: 'pointer', color: file ? 'var(--sm-ink)' : 'var(--sm-text-muted)' }}>
              <span style={{ color: 'var(--sm-primary)' }}>{I('paperclip', 18)}</span>
              <span style={{ flex: 1, fontSize: 14, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{file ? file.name : 'Priloži CV (PDF ili Word, do 5 MB) *'}</span>
              <input type="file" accept=".pdf,.doc,.docx,.odt,.rtf" onChange={onFile} style={{ display: 'none' }} />
            </label>
            {err && <div style={{ color: '#d2323b', fontSize: 13.5 }}>{err}</div>}
            <Button variant="primary" block disabled={busy} onClick={submit}>{busy ? 'Šaljem…' : 'Pošalji prijavu'}</Button>
          </div>
        )}
      </div>
    </div>
  );
}

/* ---------- animated hero with blurred banner backdrop ---------- */
function BannerHero({ banner, eyebrow, title, subtitle, onNav }) {
  return (
    <div style={{ position: 'relative', overflow: 'hidden', background: 'var(--sm-purple-900)' }}>
      <img src={banner} alt="" style={{ position: 'absolute', inset: '-8%', width: '116%', height: '116%', objectFit: 'cover', filter: 'blur(16px) brightness(.55) saturate(1.1)', transform: 'scale(1.06)', animation: 'sm-aurora 26s ease-in-out infinite' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(120% 120% at 25% 20%, rgba(44,32,64,.25), rgba(28,20,40,.85) 78%)' }}></div>
      <div style={{ position: 'absolute', width: 420, height: 420, left: '-6%', top: '-40%', borderRadius: '50%', background: 'radial-gradient(circle, rgba(136,81,182,.5), transparent 65%)', filter: 'blur(28px)', animation: 'sm-float 9s ease-in-out infinite' }}></div>
      <div style={{ position: 'absolute', width: 380, height: 380, right: '-4%', bottom: '-45%', borderRadius: '50%', background: 'radial-gradient(circle, rgba(125,84,153,.45), transparent 65%)', filter: 'blur(28px)', animation: 'sm-float 12s ease-in-out infinite reverse' }}></div>
      <div style={{ ...PG_WIDE, position: 'relative', zIndex: 2, padding: '40px 24px 52px', color: '#fff' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'rgba(255,255,255,.7)', marginBottom: 24 }}>
          <a onClick={() => onNav({ view: 'home' })} style={{ cursor: 'pointer', color: 'rgba(255,255,255,.7)' }}>Početna</a>
          {I('chevron-right', 14)}<span style={{ color: '#fff', fontWeight: 600 }}>{title}</span>
        </div>
        {eyebrow && <div style={{ fontFamily: 'var(--sm-font-techno)', textTransform: 'uppercase', letterSpacing: '.18em', fontSize: 13, color: 'var(--sm-purple-200)', marginBottom: 14, animation: 'sm-rise .8s .05s ease both' }}>{eyebrow}</div>}
        <h1 style={{ margin: 0, color: '#fff', fontFamily: 'var(--sm-font-display)', fontWeight: 800, fontSize: 'clamp(38px, 5.5vw, 60px)', lineHeight: 1.05, letterSpacing: '-.02em', maxWidth: '16ch', animation: 'sm-rise .8s .12s ease both' }}>{title}</h1>
        {subtitle && <p style={{ margin: '18px 0 0', fontSize: 'clamp(16px, 2vw, 19px)', lineHeight: 1.6, color: 'rgba(255,255,255,.82)', maxWidth: '58ch', animation: 'sm-rise .8s .2s ease both' }}>{subtitle}</p>}
      </div>
    </div>
  );
}

/* ---------- Contact-style page (Kontakt + Pravna lica) ---------- */
function ContactPage({ onNav, variant }) {
  const pravna = variant === 'pravna';
  const contacts = pravna
    ? [['phone', 'B2B prodaja', '+381 11 4000 200', 'Pon–Pet 08–18h'], ['mail', 'Email za firme', 'b2b@supermedia.rs', 'Odgovor u roku od 24h'], ['file-text', 'Ponuda i faktura', 'Pošalji upit', 'Predračun za par sati']]
    : [['phone', 'Pozovi nas', '+381 63 600 442', 'Pon–Pet 09–17h'], ['mail', 'Pošalji email', 'web@supermedia.info', 'Odgovor u roku od 24h'], ['message-circle', 'Reklamacije', 'web@ssupermedia.info', 'Prijavi reklamaciju']];
  return (
    <div>
      <BannerHero
        banner={SM_DATA.A + '/banners/kontakt-callcenter.jpg'}
        eyebrow="Tu smo za svako pitanje"
        title="Kontaktiraj nas"
        subtitle="Bilo da ti treba savet pre kupovine ili pomoć posle — javi se, odgovaramo brzo."
        onNav={onNav} />
      <div style={{ ...PG_WIDE, padding: '44px 24px 8px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 18, marginBottom: 34 }}>
          {contacts.map(([ic, t, val, sub], i) => (
            <div key={t} style={{ background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-xl)', padding: '24px 26px', boxShadow: 'var(--sm-shadow-xs)', animation: 'sm-rise .6s ease both', animationDelay: (0.05 + i * 0.08) + 's' }}>
              <span style={{ width: 46, height: 46, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 13, background: 'var(--sm-purple-50)', color: 'var(--sm-primary)', marginBottom: 14 }}>{I(ic, 22)}</span>
              <div style={{ fontSize: 14, color: 'var(--sm-text-muted)', marginBottom: 4 }}>{t}</div>
              <div style={{ fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 18 }}>{val}</div>
              <div style={{ fontSize: 13.5, color: 'var(--sm-text-subtle)', marginTop: 4 }}>{sub}</div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ ...PG_WIDE, padding: '0 24px 64px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.3fr) minmax(0,1fr)', gap: 28, alignItems: 'stretch' }}>
          <form onSubmit={e => e.preventDefault()} style={{ background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-xl)', padding: '30px 32px', boxShadow: 'var(--sm-shadow-sm)' }}>
            <h2 style={{ fontSize: 24, fontWeight: 800, margin: '0 0 6px' }}>{pravna ? 'Zatraži ponudu' : 'Pošalji poruku'}</h2>
            <p style={{ margin: '0 0 22px', fontSize: 15, color: 'var(--sm-text-muted)' }}>{pravna ? 'Popuni podatke firme i javljamo se sa personalizovanom ponudom.' : 'Odgovaramo u najkraćem mogućem roku, obično isti dan.'}</p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <Field label={pravna ? 'Naziv firme' : 'Ime i prezime'} placeholder={pravna ? 'SuperMedia d.o.o.' : 'Petar Petrović'} />
              <Field label={pravna ? 'PIB' : 'Email'} placeholder={pravna ? '100000000' : 'ime@email.com'} />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginTop: 14 }}>
              <Field label="Email" placeholder="ime@email.com" />
              <Field label="Telefon" placeholder="+381 6x xxx xxx" />
            </div>
            <div style={{ marginTop: 14 }}>
              <label style={fieldLabel}>Poruka</label>
              <textarea rows={4} placeholder={pravna ? 'Opiši šta i u kojoj količini te zanima…' : 'Kako možemo da pomognemo?'} style={{ ...fieldInput, resize: 'vertical', paddingTop: 12, height: 'auto' }} />
            </div>
            <Button variant="primary" size="lg" style={{ marginTop: 20 }} iconRight={I('send', 18)}>{pravna ? 'Pošalji upit' : 'Pošalji poruku'}</Button>
          </form>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <div style={{ position: 'relative', overflow: 'hidden', borderRadius: 'var(--sm-radius-xl)', background: '#3a2257', color: '#fff', padding: '26px 26px 28px', flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
              <img src={SM_DATA.A + '/banners/b2b-building.png'} alt="" style={{ position: 'absolute', inset: '-6%', width: '112%', height: '112%', objectFit: 'cover', filter: 'blur(14px) brightness(.62) saturate(1.15)', transform: 'scale(1.08)', animation: 'sm-aurora 26s ease-in-out infinite' }} />
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(135deg, color-mix(in srgb, var(--sm-primary) 80%, transparent), color-mix(in srgb, var(--sm-violet) 72%, transparent))' }}></div>
              <div style={{ position: 'absolute', right: -24, top: -24, width: 110, height: 110, borderRadius: '50%', background: 'rgba(255,255,255,.12)' }}></div>
              <span style={{ width: 46, height: 46, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 13, background: 'rgba(255,255,255,.16)', border: '1px solid rgba(255,255,255,.3)', marginBottom: 16, position: 'relative' }}>{I('building-2', 22)}</span>
              <div style={{ fontSize: 14, color: 'rgba(255,255,255,.85)', marginBottom: 4, position: 'relative' }}>Kontakt za pravna lica</div>
              <a href="tel:+381692411360" style={{ fontFamily: 'var(--sm-font-display)', fontWeight: 800, fontSize: 22, color: '#fff', textDecoration: 'none', position: 'relative', display: 'inline-block' }}>+381 69 2411 360</a>
              <div style={{ position: 'relative', marginTop: 14 }}>
                <a onClick={() => onNav({ view: 'page', key: 'pravna-lica' })} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 14, color: '#fff', cursor: 'pointer', textDecoration: 'underline', textUnderlineOffset: 3 }}>B2B ponuda i fakturisanje {I('arrow-right', 15)}</a>
              </div>
            </div>
            <InfoCard icon="building" title="Sedište" style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
              Bulevar Milutina Milankovića 7D, 11070 Novi Beograd<br />
              <span style={{ color: 'var(--sm-text-muted)' }}>SUPER MEDIA DOO BORČA · MB 22086782 · PIB 114894416</span>
            </InfoCard>
            <InfoCard icon="clock" title="Radno vreme" style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
              Ponedeljak–Petak: 09:00–17:00<br />
              Subota: 09:00–14:00<br />
              <span style={{ color: 'var(--sm-text-muted)' }}>Nedelja: zatvoreno</span>
            </InfoCard>
          </div>
        </div>
      </div>
    </div>
  );
}
const fieldLabel = { display: 'block', fontFamily: 'var(--sm-font-display)', fontWeight: 600, fontSize: 13.5, marginBottom: 6, color: 'var(--sm-text)' };
const fieldInput = { width: '100%', height: 46, border: '1.5px solid var(--sm-border)', borderRadius: 'var(--sm-radius-sm)', padding: '0 14px', fontFamily: 'var(--sm-font-body)', fontSize: 15, outline: 'none', boxSizing: 'border-box', background: '#fff' };
function Field({ label, placeholder }) {
  return (
    <div>
      <label style={fieldLabel}>{label}</label>
      <input placeholder={placeholder} style={fieldInput}
        onFocus={e => e.currentTarget.style.borderColor = 'var(--sm-primary)'}
        onBlur={e => e.currentTarget.style.borderColor = 'var(--sm-border)'} />
    </div>
  );
}

/* ---------- Immersive "O nama" ---------- */
function CountUp({ to, dur = 1600, suffix = '' }) {
  const [n, setN] = useStatePg(0);
  useEffectPg(() => {
    let raf, start;
    const tick = (t) => {
      if (!start) start = t;
      const p = Math.min(1, (t - start) / dur);
      const eased = 1 - Math.pow(1 - p, 3);
      setN(Math.round(to * eased));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [to]);
  return <span>{fmt(n)}{suffix}</span>;
}

function AboutImmersive({ onNav }) {
  useEffectPg(() => {
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = ''; };
  }, []);
  const stats = [[30000, '+', 'proizvoda'], [100, '+', 'brendova'], [22, '', 'grada isporuke']];
  const story = [
    'Verujemo da se poverenje gradi odgovornošću, zato ne pravimo kompromise kada je u pitanju kvalitet proizvoda i usluge. Kod nas ne kupujete samo tehniku — kupujete sigurnost da iza svake transakcije stoji tim koji garantuje podršku i rešenje.',
    'SuperMedia je firma u usponu koja gradi svoje ime na poverenju, odgovornosti i jasnoj viziji dugoročnog razvoja.',
    'Naš prioritet je kupac: svaka porudžbina, svaka isporuka i svaka komunikacija mora biti brza, tačna i profesionalna.',
  ];
  const company = [
    ['Poslovno ime', 'Supermedia DOO Borča'],
    ['Središte firme', 'Bulevar Milutina Milankovića 7D, 11070 Novi Beograd'],
    ['Obaveznik PDV-a', 'Da'],
    ['Registarski broj', '22086782'],
    ['PIB', '114894416'],
    ['Šifra delatnosti', 'Trgovina na malo posredstvom pošte ili preko interneta'],
  ];
  return (
    <div style={{ position: 'fixed', inset: 0, zIndex: 300, overflow: 'auto', background: 'var(--sm-purple-900)' }}>
      {/* blurred image backdrop — covers entire viewport incl. letterbox edges */}
      <img src={SM_DATA.A + '/banners/o-nama-space.jpg'} alt="" style={{ position: 'fixed', inset: '-8%', width: '116%', height: '116%', objectFit: 'cover', objectPosition: '50% 24%', filter: 'blur(26px) brightness(.55) saturate(1.12)', transform: 'scale(1.06)', animation: 'sm-aurora 26s ease-in-out infinite' }} />
      <div style={{ position: 'fixed', inset: 0, background: 'radial-gradient(120% 90% at 50% 30%, rgba(30,20,48,.28), rgba(20,14,30,.8) 78%)' }}></div>
      {/* aurora blobs */}
      <div style={{ position: 'fixed', width: 520, height: 520, left: '8%', top: '12%', borderRadius: '50%', background: 'radial-gradient(circle, rgba(136,81,182,.55), transparent 65%)', filter: 'blur(30px)', animation: 'sm-float 9s ease-in-out infinite' }}></div>
      <div style={{ position: 'fixed', width: 460, height: 460, right: '6%', bottom: '8%', borderRadius: '50%', background: 'radial-gradient(circle, rgba(125,84,153,.5), transparent 65%)', filter: 'blur(30px)', animation: 'sm-float 11s ease-in-out infinite reverse' }}></div>

      {/* close */}
      <button onClick={() => onNav({ view: 'home' })} aria-label="Zatvori" style={{ position: 'fixed', top: 24, right: 28, zIndex: 5, width: 50, height: 50, borderRadius: '50%', border: '1px solid rgba(255,255,255,.25)', background: 'rgba(255,255,255,.08)', backdropFilter: 'blur(8px)', color: '#fff', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
        onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,.18)'}
        onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,.08)'}>{I('x', 24)}</button>

      {/* center content */}
      <div style={{ position: 'relative', zIndex: 3, minHeight: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '90px 24px 70px' }}>
        {/* rotating rings + monogram */}
        <div style={{ position: 'relative', width: 220, height: 220, marginBottom: 36, animation: 'sm-rise .8s ease both' }}>
          <div style={{ position: 'absolute', inset: 0, borderRadius: '50%', border: '2px dashed rgba(255,255,255,.28)', animation: 'sm-spin 22s linear infinite' }}></div>
          <div style={{ position: 'absolute', inset: 26, borderRadius: '50%', border: '1px solid rgba(255,255,255,.18)', animation: 'sm-spin-rev 16s linear infinite' }}></div>
          <div style={{ position: 'absolute', inset: 0, borderRadius: '50%', boxShadow: '0 0 0 0 rgba(136,81,182,.5)', animation: 'sm-pulse-ring 3.2s ease-out infinite' }}></div>
          <div style={{ position: 'absolute', inset: 52, borderRadius: '50%', background: 'rgba(255,255,255,.06)', backdropFilter: 'blur(6px)', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid rgba(255,255,255,.2)' }}>
            <img src={SM_DATA.A + '/logo-monogram.png'} alt="SuperMedia" style={{ width: '58%', height: '58%', objectFit: 'contain', animation: 'sm-float 6s ease-in-out infinite' }} />
          </div>
          {[0, 1, 2].map(i => (
            <span key={i} style={{ position: 'absolute', top: '50%', left: '50%', width: 10, height: 10, marginLeft: -5, marginTop: -5, borderRadius: '50%', background: i === 1 ? 'var(--sm-violet)' : '#fff', transform: `rotate(${i * 120}deg) translateX(110px)`, animation: 'sm-spin 18s linear infinite' }}></span>
          ))}
        </div>

        <div style={{ fontFamily: 'var(--sm-font-techno)', textTransform: 'uppercase', letterSpacing: '.32em', fontSize: 13, color: 'var(--sm-purple-200)', marginBottom: 18, animation: 'sm-rise .8s .1s ease both' }}>Ko smo mi · SuperMedia</div>
        <h1 style={{ margin: 0, fontFamily: 'var(--sm-font-display)', fontWeight: 800, fontSize: 'clamp(40px, 7vw, 92px)', lineHeight: 1.02, letterSpacing: '-.03em', color: '#fff', maxWidth: '15ch', animation: 'sm-rise .8s .15s ease both' }}>
          Sve za tvoj dom.<br />
          <span style={{ background: 'linear-gradient(90deg, #fff, var(--sm-purple-200), var(--sm-violet), #fff)', backgroundSize: '200% auto', WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent', animation: 'sm-shimmer 5s linear infinite' }}>Na jednom mestu.</span>
        </h1>
        <p style={{ margin: '24px 0 0', fontSize: 'clamp(16px, 2vw, 20px)', lineHeight: 1.6, color: 'rgba(255,255,255,.82)', maxWidth: '60ch', animation: 'sm-rise .8s .25s ease both' }}>
          SuperMedia je kompanija osnovana sa jasnim ciljem da na tržištu ponudimo pouzdanu, sigurnu i pristupačnu kupovinu elektronskih uređaja koje svi svakodnevno koristimo.
        </p>

        {/* stats */}
        <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: '18px 48px', margin: '46px 0 44px', animation: 'sm-rise .8s .35s ease both' }}>
          {stats.map(([v, suf, lbl]) => (
            <div key={lbl} style={{ minWidth: 130 }}>
              <div style={{ fontFamily: 'var(--sm-font-display)', fontWeight: 800, fontSize: 'clamp(30px, 4vw, 48px)', color: '#fff', lineHeight: 1 }}><CountUp to={v} suffix={suf} /></div>
              <div style={{ fontSize: 14, color: 'var(--sm-purple-200)', marginTop: 8, textTransform: 'uppercase', letterSpacing: '.08em' }}>{lbl}</div>
            </div>
          ))}
        </div>

        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center', animation: 'sm-rise .8s .45s ease both' }}>
          <Button variant="light" size="lg" iconRight={I('arrow-right', 20)} onClick={() => onNav({ view: 'home' })}>Uđi u prodavnicu</Button>
          <button onClick={() => onNav({ view: 'page', key: 'kontakt' })} style={{ height: 54, padding: '0 30px', borderRadius: 'var(--sm-radius-pill)', border: '1.5px solid rgba(255,255,255,.35)', background: 'transparent', color: '#fff', fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 18, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 8 }}
            onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,.1)'}
            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>Kontaktiraj nas</button>
        </div>

        {/* brand story */}
        <div style={{ maxWidth: 720, margin: '64px auto 0', display: 'flex', flexDirection: 'column', gap: 18, textAlign: 'left', animation: 'sm-rise .8s .5s ease both' }}>
          {story.map((para, i) => (
            <p key={i} style={{ margin: 0, fontSize: 'clamp(15px, 1.7vw, 18px)', lineHeight: 1.7, color: 'rgba(255,255,255,.8)' }}>{para}</p>
          ))}
        </div>

        {/* company data card */}
        <div style={{ width: '100%', maxWidth: 720, margin: '40px auto 0', background: 'rgba(255,255,255,.06)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,.16)', borderRadius: 'var(--sm-radius-xl)', padding: '30px 34px', textAlign: 'left', animation: 'sm-rise .8s .55s ease both' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
            <span style={{ width: 42, height: 42, flex: 'none', borderRadius: 12, background: 'rgba(136,81,182,.3)', border: '1px solid rgba(255,255,255,.2)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{I('building-2', 21)}</span>
            <h2 style={{ margin: 0, fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 22, color: '#fff' }}>Podaci o firmi</h2>
          </div>
          <dl style={{ margin: 0, display: 'grid', gridTemplateColumns: 'minmax(140px, auto) 1fr', gap: '2px 24px' }}>
            {company.map(([k, v], i) => (
              <React.Fragment key={k}>
                <dt style={{ padding: '11px 0', borderTop: i ? '1px solid rgba(255,255,255,.1)' : 'none', fontSize: 14, color: 'var(--sm-purple-200)' }}>{k}</dt>
                <dd style={{ padding: '11px 0', borderTop: i ? '1px solid rgba(255,255,255,.1)' : 'none', margin: 0, fontFamily: 'var(--sm-font-display)', fontWeight: 600, fontSize: 15, color: '#fff' }}>{v}</dd>
              </React.Fragment>
            ))}
          </dl>
        </div>
      </div>
    </div>
  );
}

/* ---------- Pravna lica (B2B) — animated benefits page ---------- */
function PravnaLica({ onNav }) {
  const benefits = [
    ['piggy-bank', 'Ušteda', 'Kupovinom pravna lica ostvaruju značajnu uštedu kroz veleprodajne cene i specijalne popuste prilagođene obimu porudžbine.'],
    ['shield-check', 'Sigurnost', 'Kupujte bez rizika — svi uređaji dolaze uz punu garanciju i mogućnost povraćaja u roku od 14 dana.'],
    ['truck', 'Isporuka', 'Na Vama je samo da izaberete proizvode, a mi obezbeđujemo brzu isporuku.'],
    ['user-round', 'Lični komercijalista', 'Kontaktirajte svog komercijalistu i dobićete personalizovanu ponudu, savet ili pomoć pri odabiru opreme.'],
  ];
  return (
    <div>
      {/* animated dark hero */}
      <div style={{ position: 'relative', overflow: 'hidden', background: '#0e0a16' }}>
        {/* blurred building backdrop */}
        <img src={SM_DATA.A + '/banners/b2b-building.png'} alt="" style={{ position: 'absolute', inset: '-8%', width: '116%', height: '116%', objectFit: 'cover', filter: 'blur(20px) brightness(.7) saturate(1.15)', transform: 'scale(1.08)', animation: 'sm-aurora 26s ease-in-out infinite' }} />
        {/* purple + black tint */}
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(135deg, rgba(96,53,159,.42), rgba(20,12,32,.4) 60%, rgba(8,6,14,.55))' }}></div>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(120% 120% at 20% 15%, rgba(136,81,182,.34), transparent 60%)' }}></div>
        <div style={{ position: 'absolute', width: 460, height: 460, left: '-6%', top: '-30%', borderRadius: '50%', background: 'radial-gradient(circle, rgba(136,81,182,.4), transparent 65%)', filter: 'blur(34px)', animation: 'sm-float 9s ease-in-out infinite' }}></div>
        <div style={{ position: 'absolute', width: 420, height: 420, right: '-4%', bottom: '-40%', borderRadius: '50%', background: 'radial-gradient(circle, rgba(125,84,153,.38), transparent 65%)', filter: 'blur(34px)', animation: 'sm-float 11s ease-in-out infinite reverse' }}></div>
        <div style={{ ...PG_WIDE, position: 'relative', zIndex: 2, padding: '40px 24px 54px', color: '#fff' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'rgba(255,255,255,.7)', marginBottom: 24 }}>
            <a onClick={() => onNav({ view: 'home' })} style={{ cursor: 'pointer', color: 'rgba(255,255,255,.7)' }}>Početna</a>
            {I('chevron-right', 14)}<span style={{ color: '#fff', fontWeight: 600 }}>Pravna lica</span>
          </div>
          <div style={{ fontFamily: 'var(--sm-font-techno)', textTransform: 'uppercase', letterSpacing: '.18em', fontSize: 13, color: 'var(--sm-purple-200)', marginBottom: 14, animation: 'sm-rise .8s .05s ease both' }}>B2B saradnja</div>
          <h1 style={{ margin: 0, color: '#fff', fontFamily: 'var(--sm-font-display)', fontWeight: 800, fontSize: 'clamp(38px, 5.5vw, 64px)', lineHeight: 1.05, letterSpacing: '-.02em', maxWidth: '16ch', animation: 'sm-rise .8s .12s ease both' }}>
            Kupuješ za firmu?<br />Tu smo da vam pružimo najbolju uslugu.
          </h1>
          <p style={{ margin: '18px 0 0', fontSize: 'clamp(16px, 2vw, 19px)', lineHeight: 1.6, color: 'rgba(255,255,255,.82)', maxWidth: '58ch', animation: 'sm-rise .8s .2s ease both' }}>
            Posebne veleprodajne cene, fakturisanje na pravno lice i posvećen komercijalista za svaku porudžbinu.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 30, animation: 'sm-rise .8s .28s ease both' }}>
            <Button variant="light" size="lg" iconRight={I('arrow-right', 20)} onClick={() => onNav({ view: 'category', slug: null })}>Pogledaj ponudu</Button>
            <a href="tel:+381692411360" style={{ height: 54, padding: '0 28px', borderRadius: 'var(--sm-radius-pill)', border: '1.5px solid rgba(255,255,255,.35)', background: 'transparent', color: '#fff', fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 18, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}
              onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,.1)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>{I('phone', 18)} +381 69 2411 360</a>
          </div>
        </div>
      </div>

      {/* animated benefit cards */}
      <div style={{ ...PG_WIDE, padding: '48px 24px 8px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: 18 }}>
          {benefits.map(([ic, t, d], i) => (
            <div key={t} style={{ position: 'relative', background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-xl)', padding: '28px 26px', boxShadow: 'var(--sm-shadow-xs)', overflow: 'hidden', animation: 'sm-rise .7s ease both', animationDelay: (0.1 + i * 0.1) + 's', transition: 'transform .18s, box-shadow .18s' }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = 'var(--sm-shadow-md)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'var(--sm-shadow-xs)'; }}>
              <span style={{ position: 'absolute', right: -14, top: -14, fontFamily: 'var(--sm-font-display)', fontWeight: 800, fontSize: 84, color: 'var(--sm-purple-50)', lineHeight: 1 }}>{i + 1}</span>
              <span style={{ position: 'relative', width: 52, height: 52, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 15, background: 'var(--sm-primary)', color: '#fff', marginBottom: 18, boxShadow: 'var(--sm-shadow-purple)' }}>{I(ic, 26)}</span>
              <h3 style={{ position: 'relative', fontSize: 20, fontWeight: 700, margin: '0 0 8px' }}>{t}</h3>
              <p style={{ position: 'relative', fontSize: 15, lineHeight: 1.6, color: 'var(--sm-gray-700)', margin: 0 }}>{d}</p>
            </div>
          ))}
        </div>
      </div>

      {/* commercialist contact panel */}
      <div style={{ ...PG_WIDE, padding: '40px 24px 70px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.1fr)', gap: 28, alignItems: 'stretch' }}>
          <div style={{ position: 'relative', overflow: 'hidden', borderRadius: 'var(--sm-radius-xl)', background: 'linear-gradient(135deg, var(--sm-primary), var(--sm-violet))', color: '#fff', padding: '34px 36px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <div style={{ position: 'absolute', right: -30, bottom: -30, width: 160, height: 160, borderRadius: '50%', background: 'rgba(255,255,255,.12)' }}></div>
            <span style={{ width: 60, height: 60, borderRadius: '50%', background: 'rgba(255,255,255,.16)', border: '1px solid rgba(255,255,255,.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>{I('headset', 28)}</span>
            <h3 style={{ margin: 0, fontFamily: 'var(--sm-font-display)', fontWeight: 800, fontSize: 26, color: '#fff' }}>Tvoj lični komercijalista</h3>
            <p style={{ margin: '10px 0 22px', fontSize: 15.5, lineHeight: 1.6, color: 'rgba(255,255,255,.9)', position: 'relative' }}>Javi se i dobićeš personalizovanu ponudu, savet ili pomoć pri odabiru opreme — direktno od svog komercijaliste.</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, position: 'relative' }}>
              <a href="tel:+381692411360" style={{ display: 'inline-flex', alignItems: 'center', gap: 12, color: '#fff', textDecoration: 'none', fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 18 }}>{I('phone', 20)} +381 69 2411 360</a>
              <a href="mailto:web@supermedia.info" style={{ display: 'inline-flex', alignItems: 'center', gap: 12, color: '#fff', textDecoration: 'none', fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 18 }}>{I('mail', 20)} web@supermedia.info</a>
            </div>
          </div>
          <form onSubmit={e => e.preventDefault()} style={{ background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-xl)', padding: '30px 32px', boxShadow: 'var(--sm-shadow-sm)' }}>
            <h2 style={{ fontSize: 24, fontWeight: 800, margin: '0 0 6px' }}>Zatraži ponudu</h2>
            <p style={{ margin: '0 0 22px', fontSize: 15, color: 'var(--sm-text-muted)' }}>Popuni podatke firme i javljamo se sa personalizovanom ponudom.</p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <Field label="Naziv firme" placeholder="Super Media DOO" />
              <Field label="PIB" placeholder="114894416" />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginTop: 14 }}>
              <Field label="Email" placeholder="firma@email.com" />
              <Field label="Telefon" placeholder="+381 6x xxx xxx" />
            </div>
            <div style={{ marginTop: 14 }}>
              <label style={fieldLabel}>Šta te zanima?</label>
              <textarea rows={4} placeholder="Opiši proizvode i količine koje te zanimaju…" style={{ ...fieldInput, resize: 'vertical', paddingTop: 12, height: 'auto' }} />
            </div>
            <Button variant="primary" size="lg" style={{ marginTop: 20 }} iconRight={I('send', 18)}>Pošalji upit</Button>
          </form>
        </div>
      </div>
    </div>
  );
}

/* ---------- Politika privatnosti ---------- */
function PolitikaPrivatnostiPage({ onNav }) {
  const intro = [
    'Ukoliko se interesujete za obradu i zaštitu svojih podataka o ličnosti u okviru privrednog društva SUPER MEDIA DOO BORČA, na pravom ste mestu.',
    'Mi cenimo vašu privatnost i posebno vodimo računa o bezbednosti vaših podataka o ličnosti. Ovom Politikom privatnosti, na transparentan i lako razumljiv način, informišemo vas o prikupljanju, upotrebi, prirodi i obimu obrade vaših ličnih podataka od strane SUPER MEDIA DOO BORČA, Bulevar Milutina Milankovića 7D, 11070 Novi Beograd, MB 22086782, u svojstvu rukovaoca podataka o ličnosti (u nastavku: „Supermedia").',
    'Ova politika se odnosi na sve podatke koje prikupljamo o vama prilikom različitih vidova saradnje – posebno kada posetite našu internet stranicu www.supermedia.rs, kada se registrujete i napravite profil, ili kada odlučite da kupujete online kao gost.',
    'Zaštita vaših podataka uređena je Zakonom o zaštiti podataka o ličnosti („Sl. glasnik RS", br. 87/2018, dalje: „Zakon").',
    'Ukoliko naš sajt sadrži linkove ka drugim internet stranicama, imajte u vidu da Supermedia nema kontrolu nad njihovim sadržajem i ne može biti odgovorna za zaštitu vaše privatnosti kada koristite te sajtove. Preporučujemo da se upoznate sa politikama privatnosti svakog takvog sajta.',
  ];
  const sections = [
    { n: 1, h: 'Na koji način prikupljamo vaše podatke i po kom osnovu?',
      p: ['Sve informacije dobijamo direktno od vas kada naručite proizvode ili koristite naše usluge. Podatke obrađujemo u skladu sa Zakonom i to:'],
      ul: ['kada je obrada neophodna za zaključenje i izvršenje ugovora,', 'kada postoji zakonska obaveza (npr. poreska evidencija),', 'kada imamo legitiman interes (osim ako vaša prava pretežu nad tim interesom),', 'kada ste dali saglasnost za određenu svrhu (uz mogućnost povlačenja saglasnosti u svakom trenutku).'],
      p2: ['Dostavljanje podataka koji su zakonom obavezni je nužno, dok je dostavljanje ostalih podataka dobrovoljno, ali može biti neophodno za pružanje određenih usluga (npr. dostava proizvoda).'] },
    { n: 2, h: 'Koje podatke prikupljamo?',
      p: ['U zavisnosti od situacije, možemo prikupljati:'],
      ul: ['ime i prezime,', 'adresu (grad, ulica, broj, poštanski broj),', 'broj telefona,', 'e-mail adresu,', 'podatke o platnoj kartici i transakciji (u slučaju online plaćanja),', 'JMBG ili broj lične karte (u slučaju poreskih obaveza ili povrata novca).'] },
    { n: 3, h: 'Kupovina na sajtu',
      p: ['Prilikom kupovine putem našeg sajta prikupljamo podatke potrebne za zaključenje ugovora, isporuku proizvoda i komunikaciju sa vama. U slučaju online plaćanja prikupljamo i podatke o izvršenoj transakciji. Za isporuku robe podatke delimo sa našim eksternim partnerima (npr. kurirskim službama).'] },
    { n: 4, h: 'Reklamacije',
      p: ['U skladu sa Zakonom o zaštiti potrošača, prilikom reklamacije možemo obraditi vaše podatke (ime, prezime, telefon, e-mail, adresu, broj lične karte ili tekući račun). Podaci se koriste isključivo za rešavanje reklamacija.'] },
    { n: 5, h: 'Kontaktiranje Supermedije',
      p: ['Možete nas kontaktirati putem telefona, e-maila, društvenih mreža ili web sajta. U zavisnosti od načina, prikupljamo osnovne podatke i koristimo ih isključivo radi odgovora na vaš upit. Na osnovu legitimnog interesa, možemo vam povremeno poslati ankete radi unapređenja usluga i korisničkog iskustva.'] },
    { n: 6, h: 'Promotivne aktivnosti i nagradne igre',
      p: ['Za potrebe učešća u nagradnim igrama, promocijama ili sponzorstvima možemo prikupljati vaše ime, prezime, adresu, datum rođenja, kao i JMBG (u slučaju nagrada koje podležu poreskoj prijavi). Podaci se koriste isključivo u svrhe definisane pravilima svake aktivnosti i brišu se po njenom završetku, osim kada zakon nalaže drugačije.'] },
    { n: 7, h: 'Društvene mreže',
      p: ['Podatke objavljene na društvenim mrežama obrađuju sami operateri (Facebook, Instagram). Supermedia koristi te podatke isključivo za promociju i komunikaciju sa pratiocima. Zadržavamo pravo da uklonimo nezakonite ili uvredljive sadržaje.'] },
    { n: 8, h: 'Ko ima pristup vašim podacima?',
      p: ['Pristup imaju samo zaposleni i partneri kojima su podaci neophodni za izvršenje ugovora (npr. kurirske službe, IT podrška). Svi partneri su ugovorno obavezani da postupaju u skladu sa Zakonom. U pojedinim slučajevima podaci mogu biti obrađeni i van Srbije, ali isključivo uz adekvatne garancije u skladu sa Zakonom.'] },
    { n: 9, h: 'Period čuvanja podataka',
      p: ['Podatke čuvamo samo onoliko dugo koliko je neophodno radi ispunjenja svrhe obrade ili zakonskih obaveza. Podaci dati na osnovu saglasnosti čuvaju se do njenog povlačenja. Nakon isteka rokova, podaci se brišu, uništavaju ili depersonalizuju.'] },
    { n: 10, h: 'Podaci o maloletnim licima',
      p: ['Ne prikupljamo i ne obrađujemo podatke dece mlađe od 16 godina.'] },
    { n: 11, h: 'Bezbednosne mere',
      p: ['Primena sigurnosnih mehanizama obuhvata:'],
      ul: ['ograničen pristup podacima,', 'obuku zaposlenih,', 'jake politike lozinki,', 'tehničke i organizacione mere zaštite.'],
      p2: ['Supermedia redovno unapređuje mere zaštite kako bi sprečila neovlašćen pristup, gubitak ili zloupotrebu podataka.'] },
    { n: 12, h: 'Vaša prava',
      p: ['Imate pravo da:'],
      ul: ['tražite pristup i kopiju svojih podataka,', 'zahtevate ispravku netačnih podataka,', 'tražite brisanje podataka,', 'zahtevate ograničenje obrade,', 'uložite prigovor na obradu,', 'podnesete pritužbu Povereniku za zaštitu podataka o ličnosti.'],
      p2: ['Za sve zahteve i pitanja možete nas kontaktirati putem e-mail adrese: web@supermedia.info'] },
    { n: 13, h: 'Stupanje na snagu i izmene',
      p: ['Ova Politika privatnosti stupa na snagu 11.04.2025. godine. Može biti izmenjena u skladu sa potrebama poslovanja, promenama zakona ili na zahtev nadležnih organa. Preporučujemo da redovno pratite izmene na sajtu www.supermedia.rs'] },
  ];
  const para = { fontSize: 15.5, lineHeight: 1.75, color: 'var(--sm-gray-700)', margin: '0 0 14px', textWrap: 'pretty' };
  return (
    <div>
      <PageHero eyebrow="Zaštita podataka" title="Politika privatnosti" subtitle="Transparentno o tome kako prikupljamo, koristimo i štitimo tvoje podatke o ličnosti." onNav={onNav} />
      <div style={{ ...PG_WIDE, padding: '44px 24px 64px', maxWidth: 880 }}>
        {/* intro card */}
        <div style={{ background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-xl)', padding: '30px 32px', boxShadow: 'var(--sm-shadow-xs)', marginBottom: 30 }}>
          {intro.map((t, i) => <p key={i} style={{ ...para, margin: i === intro.length - 1 ? 0 : '0 0 14px' }}>{t}</p>)}
        </div>
        {/* sections */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {sections.map(s => (
            <section key={s.n} style={{ background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-xl)', padding: '26px 30px', boxShadow: 'var(--sm-shadow-xs)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 14 }}>
                <span style={{ flex: 'none', width: 36, height: 36, borderRadius: 10, background: 'var(--sm-purple-50)', color: 'var(--sm-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--sm-font-display)', fontWeight: 800, fontSize: 16 }}>{s.n}</span>
                <h2 style={{ margin: 0, fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 20, color: 'var(--sm-text)', lineHeight: 1.2 }}>{s.h}</h2>
              </div>
              {(s.p || []).map((t, i) => <p key={'p' + i} style={para}>{t}</p>)}
              {s.ul && (
                <ul style={{ margin: '4px 0 14px', paddingLeft: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {s.ul.map((li, i) => (
                    <li key={i} style={{ display: 'flex', gap: 11, alignItems: 'flex-start', fontSize: 15.5, lineHeight: 1.6, color: 'var(--sm-gray-700)' }}>
                      <span style={{ flex: 'none', width: 7, height: 7, borderRadius: '50%', background: 'var(--sm-primary)', marginTop: 8 }}></span>
                      <span>{li}</span>
                    </li>
                  ))}
                </ul>
              )}
              {(s.p2 || []).map((t, i) => <p key={'p2' + i} style={{ ...para, margin: 0 }}>{t}</p>)}
            </section>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---------- Prava potrošača ---------- */
function PravaPotrosacaPage({ onNav }) {
  const sections = [
    { n: 1, h: 'Pravo na odustanak od ugovora (14 dana)',
      p: ['Kupovina proizvoda putem našeg internet sajta smatra se prodajom na daljinu (u skladu sa Zakonom o zaštiti potrošača, „Službeni glasnik RS", br. 88/2021).', 'Potrošač ima pravo da odustane od ugovora zaključenog na daljinu u roku od 14 dana, bez obaveze da navede razlog odustanka.', 'Rok počinje da teče od dana kada je roba predata potrošaču ili licu koje je potrošač odredio, a koje nije prevoznik.', 'Ako je porudžbina obuhvatila više proizvoda koji se isporučuju zasebno, rok počinje od dana prijema poslednjeg proizvoda.'] },
    { n: 2, h: 'Izuzeci od prava na odustanak',
      p: ['Zakon predviđa slučajeve kada pravo na odustanak nije moguće ostvariti. U skladu sa našim asortimanom, to se odnosi na sledeće proizvode:'],
      ul: ['audio, video ili softverske zapise koji su zapečaćeni, a potom otpečaćeni nakon isporuke,', 'robu proizvedenu prema posebnim zahtevima potrošača ili jasno personalizovanu,', 'proizvode koji su podložni kvarenju ili imaju kratak rok trajanja.'],
      p2: ['Napomena: Pravo na odustanak ne važi za kupovinu u fizičkim prodavnicama, jer se ista ne smatra kupovinom na daljinu.'] },
    { n: 3, h: 'Postupak povrata robe',
      p: ['Potrošač je dužan da proizvod vrati bez odlaganja, a najkasnije u roku od 14 dana od dana prijema robe, zajedno sa popunjenim obrascem za odustanak.', 'Troškove povrata u ovom slučaju snosi potrošač.', 'Roba se šalje na adresu navedenu u obrascu.', 'Povraćaj je moguć isključivo za proizvode koji su neoštećeni, po mogućstvu u originalnoj ambalaži, sa svim pripadajućim elementima: dokumentacijom, garancijom, uputstvima itd.', 'Po prijemu vraćenog proizvoda, vrši se provera ispravnosti i očuvanosti. Potrošač snosi odgovornost za svako umanjenje vrednosti proizvoda nastalo usled neadekvatnog rukovanja.', 'Ukoliko se utvrdi oštećenje ili neispravnost nastala krivicom kupca do mere da proizvod više nije prodajnog karaktera, povraćaj sredstava neće biti moguć, a proizvod će biti vraćen potrošaču o njegovom trošku.'] },
    { n: 4, h: 'Povraćaj sredstava',
      p: ['U slučaju pravovremenog i zakonitog odustanka, prodavac je dužan da izvrši povraćaj plaćenog iznosa bez odlaganja, a najkasnije u roku od 14 dana od dana prijema obrasca o odustanku.', 'Međutim, povraćaj može biti odložen dok proizvod ne bude vraćen, ili dok kupac ne dostavi dokaz da je proizvod poslat nazad – u zavisnosti od toga šta nastupi prvo.', 'Za realizaciju povraćaja, neophodno je da kupac dostavi broj tekućeg računa na koji će sredstva biti uplaćena.'] },
    { n: 5, h: 'Pogrešno navedena cena',
      p: ['Ukoliko se nakon izvršene porudžbine utvrdi da je na sajtu greškom navedena pogrešna cena za poručeni artikal, prodavac će u najkraćem mogućem roku obavestiti kupca o uočenoj nepravilnosti i tačnoj ceni artikla koja je važila u trenutku poručivanja. U tom slučaju, kupac ima mogućnost da proizvod kupi po ispravnoj maloprodajnoj ceni ili da odustane od porudžbine.'] },
    { n: 6, h: 'Tačnost podataka o proizvodima',
      p: ['Supermedia nastoji da sve proizvode na svom sajtu opiše što je tačnije moguće. Ipak, Supermedia ne garantuje da su svi navedeni podaci o proizvodima, kao ni prikazane slike, u potpunosti tačni, kompletni i bez grešaka. Ukoliko proizvod koji ste kupili odstupa od podataka navedenih na sajtu, imate pravo da ga vratite u nekorišćenom stanju, sa kompletnom pratećom dokumentacijom, u roku od 14 dana od dana isporuke proizvoda, nakon čega će vam biti izvršen povraćaj novca.', 'Slike objavljene na sajtu Supermedia mogu prikazivati i okruženje proizvoda radi realnijeg prikaza izgleda uređaja nakon montaže. Ugradna tehnika se prodaje bez dekorativnih panela (frontova), koji nisu sastavni deo uređaja i koji se naknadno uklapaju u nameštaj i enterijer.', 'Dostupnost proizvoda prikazana na internet stranici može se razlikovati od stvarnog stanja zaliha, usled tehničkih i organizacionih razloga. Tačna dostupnost i rok isporuke mogu se proveriti kontaktiranjem Supermedia korisničke podrške na broj +381 63 600 442.'] },
  ];
  const para = { fontSize: 15.5, lineHeight: 1.75, color: 'var(--sm-gray-700)', margin: '0 0 14px', textWrap: 'pretty' };
  return (
    <div>
      <PageHero eyebrow="Kupovina bez brige" title="Prava potrošača" subtitle="Sve o pravu na odustanak, povratu robe i povraćaju sredstava pri kupovini preko interneta." onNav={onNav} />
      <div style={{ ...PG_WIDE, padding: '44px 24px 64px', maxWidth: 880 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {sections.map(s => (
            <section key={s.n} style={{ background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-xl)', padding: '26px 30px', boxShadow: 'var(--sm-shadow-xs)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 14 }}>
                <span style={{ flex: 'none', width: 36, height: 36, borderRadius: 10, background: 'var(--sm-purple-50)', color: 'var(--sm-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--sm-font-display)', fontWeight: 800, fontSize: 16 }}>{s.n}</span>
                <h2 style={{ margin: 0, fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 20, color: 'var(--sm-text)', lineHeight: 1.2 }}>{s.h}</h2>
              </div>
              {(s.p || []).map((t, i) => <p key={'p' + i} style={para}>{t}</p>)}
              {s.ul && (
                <ul style={{ margin: '4px 0 14px', paddingLeft: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {s.ul.map((li, i) => (
                    <li key={i} style={{ display: 'flex', gap: 11, alignItems: 'flex-start', fontSize: 15.5, lineHeight: 1.6, color: 'var(--sm-gray-700)' }}>
                      <span style={{ flex: 'none', width: 7, height: 7, borderRadius: '50%', background: 'var(--sm-primary)', marginTop: 8 }}></span>
                      <span>{li}</span>
                    </li>
                  ))}
                </ul>
              )}
              {(s.p2 || []).map((t, i) => <p key={'p2' + i} style={{ ...para, margin: 0, color: 'var(--sm-text)', fontWeight: 600 }}>{t}</p>)}
            </section>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---------- Uslovi korišćenja ---------- */
function UsloviKoriscenjaPage({ onNav }) {
  const sections = [
    { n: 1, h: 'Opšte odredbe',
      p: ['Ovi Uslovi korišćenja (u nastavku: „Uslovi") uređuju korišćenje internet prodavnice www.supermedia.rs (u nastavku: „Sajt"), čiji je vlasnik i operater privredno društvo SUPER MEDIA DOO BORČA, Bulevar Milutina Milankovića 7D, 11070 Novi Beograd, MB 22086782, PIB 114894416 (u nastavku: „Supermedia" ili „Prodavac").', 'Pristupom Sajtu i korišćenjem njegovih usluga potvrđujete da ste pročitali, razumeli i prihvatili ove Uslove. Ako se ne slažete sa Uslovima, molimo vas da ne koristite Sajt.', 'Supermedia zadržava pravo da u svakom trenutku izmeni ove Uslove. Izmene stupaju na snagu objavljivanjem na Sajtu, pa preporučujemo da ih povremeno proverite.'] },
    { n: 2, h: 'Definicije',
      p: ['Za potrebe ovih Uslova, pojedini izrazi imaju sledeće značenje:'],
      ul: ['„Korisnik" je svako lice koje pristupa Sajtu ili koristi njegove usluge,', '„Kupac" je Korisnik koji naručuje proizvode putem Sajta, kao fizičko ili pravno lice,', '„Proizvod" je svaki artikal ponuđen na prodaju na Sajtu,', '„Ugovor" je ugovor o prodaji na daljinu zaključen između Prodavca i Kupca.'] },
    { n: 3, h: 'Korisnički nalog',
      p: ['Kupovinu možete obaviti kao registrovani korisnik ili kao gost. Registracijom kreirate nalog za koji ste sami odgovorni — uključujući čuvanje pristupnih podataka i lozinke.', 'Dužni ste da prilikom registracije i naručivanja unesete tačne i potpune podatke. Supermedia ne odgovara za posledice nastale unosom netačnih podataka.', 'Supermedia zadržava pravo da privremeno ili trajno ukine nalog koji se koristi protivno ovim Uslovima ili važećim propisima.'] },
    { n: 4, h: 'Naručivanje i zaključenje ugovora',
      p: ['Porudžbinu kreirate dodavanjem proizvoda u korpu i potvrdom porudžbine. Nakon slanja porudžbine, na e-mail dobijate potvrdu o prijemu.', 'Ugovor o prodaji smatra se zaključenim kada Prodavac potvrdi porudžbinu i prihvati je za obradu. Supermedia zadržava pravo da odbije porudžbinu u slučaju nedostupnosti proizvoda, očigledne greške u ceni ili opravdane sumnje na zloupotrebu.'] },
    { n: 5, h: 'Cene i plaćanje',
      p: ['Sve cene na Sajtu iskazane su u dinarima (RSD) sa uračunatim PDV-om. Merodavna je cena koja je važila u trenutku poručivanja. Plaćanje je moguće:'],
      ul: ['platnim karticama (Visa, Mastercard, DinaCard) — transakcije obrađuje Raiffeisen banka uz PCI-DSS standard zaštite,', 'pouzećem prilikom preuzimanja pošiljke,', 'za pravna lica — po predračunu / virmanom uz fakturu.'],
      p2: ['Ukoliko je usled tehničke greške prikazana pogrešna cena, primenjuju se pravila opisana na stranici „Prava potrošača".'] },
    { n: 6, h: 'Isporuka',
      p: ['Isporuka se vrši na celoj teritoriji Republike Srbije, u roku od 3 do 6 radnih dana, putem kurirskih službi sa kojima Supermedia sarađuje.', 'Rizik slučajne propasti ili oštećenja proizvoda prelazi na Kupca u trenutku preuzimanja pošiljke.'] },
    { n: 7, h: 'Pravo na odustanak i reklamacije',
      p: ['Kupac koji je potrošač ima pravo da odustane od ugovora u roku od 14 dana, kao i pravo na reklamaciju zbog nesaobraznosti robe, u skladu sa Zakonom o zaštiti potrošača („Sl. glasnik RS", br. 88/2021). Detaljni uslovi i postupak opisani su na stranici „Prava potrošača".'] },
    { n: 8, h: 'Garancija i saobraznost',
      p: ['Za proizvode važi zakonska saobraznost u trajanju od 2 godine, kao i proizvođačka garancija kada je primenljiva. Garantni list i prateća dokumentacija isporučuju se uz proizvod. Reklamacije se podnose u skladu sa procedurom na stranici „Reklamacije".'] },
    { n: 9, h: 'Intelektualna svojina',
      p: ['Svi sadržaji na Sajtu — uključujući tekstove, logotipe, žigove, slike i grafiku — predmet su prava intelektualne svojine Supermedije ili njenih partnera. Zabranjeno je njihovo umnožavanje, distribucija ili druga upotreba bez prethodne pisane saglasnosti.'] },
    { n: 10, h: 'Ograničenje odgovornosti',
      p: ['Supermedia ulaže razuman napor da podaci na Sajtu budu tačni i ažurni, ali ne garantuje potpunu tačnost opisa, slika i prikazane dostupnosti proizvoda. Slike su informativnog karaktera.', 'Supermedia ne odgovara za štetu nastalu nepravilnim korišćenjem proizvoda, niti za privremenu nedostupnost Sajta usled tehničkih razloga ili više sile.'] },
    { n: 11, h: 'Zaštita podataka o ličnosti',
      p: ['Obrada podataka o ličnosti vrši se u skladu sa Zakonom o zaštiti podataka o ličnosti („Sl. glasnik RS", br. 87/2018) i našom Politikom privatnosti, koja je dostupna na Sajtu.'] },
    { n: 12, h: 'Završne odredbe',
      p: ['Na sve što nije uređeno ovim Uslovima primenjuju se važeći propisi Republike Srbije. Za rešavanje eventualnih sporova nadležan je stvarno nadležni sud u Beogradu.', 'Za sva pitanja u vezi sa ovim Uslovima možete nas kontaktirati na +381 63 600 442 ili web@supermedia.info.'] },
  ];
  const para = { fontSize: 15.5, lineHeight: 1.75, color: 'var(--sm-gray-700)', margin: '0 0 14px', textWrap: 'pretty' };
  return (
    <div>
      <PageHero eyebrow="Pravila i obaveze" title="Uslovi korišćenja" subtitle="Pravila korišćenja internet prodavnice supermedia.rs, naručivanja, plaćanja, isporuke i odgovornosti." onNav={onNav} />
      <div style={{ ...PG_WIDE, padding: '44px 24px 64px', maxWidth: 880 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {sections.map(s => (
            <section key={s.n} style={{ background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-xl)', padding: '26px 30px', boxShadow: 'var(--sm-shadow-xs)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 14 }}>
                <span style={{ flex: 'none', width: 36, height: 36, borderRadius: 10, background: 'var(--sm-purple-50)', color: 'var(--sm-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--sm-font-display)', fontWeight: 800, fontSize: 16 }}>{s.n}</span>
                <h2 style={{ margin: 0, fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 20, color: 'var(--sm-text)', lineHeight: 1.2 }}>{s.h}</h2>
              </div>
              {(s.p || []).map((t, i) => <p key={'p' + i} style={para}>{t}</p>)}
              {s.ul && (
                <ul style={{ margin: '4px 0 14px', paddingLeft: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {s.ul.map((li, i) => (
                    <li key={i} style={{ display: 'flex', gap: 11, alignItems: 'flex-start', fontSize: 15.5, lineHeight: 1.6, color: 'var(--sm-gray-700)' }}>
                      <span style={{ flex: 'none', width: 7, height: 7, borderRadius: '50%', background: 'var(--sm-primary)', marginTop: 8 }}></span>
                      <span>{li}</span>
                    </li>
                  ))}
                </ul>
              )}
              {(s.p2 || []).map((t, i) => <p key={'p2' + i} style={{ ...para, margin: 0 }}>{t}</p>)}
            </section>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---------- Prati porudžbinu ---------- */
function PratiPorudzbinuPage({ onNav }) {
  const [code, setCode] = useStatePg('');
  const [result, setResult] = useStatePg(null); // null | 'empty' | 'notfound' | {code,current,eta,date}
  const steps = [
    ['package', 'Porudžbina primljena', 'Tvoja porudžbina je evidentirana.'],
    ['box', 'Spakovano', 'Artikli su pripremljeni za slanje.'],
    ['truck', 'Predato kuriru', 'Pošiljka je predata kurirskoj službi.'],
    ['map-pin', 'U dostavi', 'Kurir je na putu do tvoje adrese.'],
    ['check-check', 'Isporučeno', 'Paket je uručen.'],
  ];
  const check = async (e) => {
    if (e) e.preventDefault();
    const c = code.trim();
    if (c === '') { setResult('empty'); return; }
    try {
      const r = await fetch('/sm-api/orders/track/' + encodeURIComponent(c));
      if (!r.ok) { setResult('notfound'); return; }
      const d = await r.json();
      if (!d || !d.found) { setResult('notfound'); return; }
      setResult({ code: d.num, current: d.statusStage, eta: d.eta, label: d.label });
    } catch (e2) { setResult('notfound'); }
  };
  return (
    <div>
      <PageHero eyebrow="Tvoja kupovina" title="Prati porudžbinu" subtitle="Unesi kod porudžbine i odmah vidi gde je tvoj paket — bez prijave. Ili se prijavi za pregled svih porudžbina." onNav={onNav} />
      <div style={{ ...PG_WIDE, padding: '44px 24px 64px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.4fr) minmax(0,1fr)', gap: 28, alignItems: 'start' }}>
          {/* track without login */}
          <div style={{ background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-xl)', padding: '22px 28px', boxShadow: 'var(--sm-shadow-sm)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 4 }}>
              <span style={{ width: 40, height: 40, flex: 'none', borderRadius: 11, background: 'var(--sm-purple-50)', color: 'var(--sm-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{I('package-search', 20)}</span>
              <h2 style={{ fontSize: 21, fontWeight: 600, margin: 0 }}>Prati bez prijave</h2>
            </div>
            <p style={{ margin: '0 0 16px', fontSize: 14.5, color: 'var(--sm-text-muted)' }}>Kod porudžbine nalazi se u potvrdi koju si dobio na e-mail (npr. <b style={{ color: 'var(--sm-text)' }}>SM-10482</b>).</p>
            <form onSubmit={check} style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <input value={code} onChange={e => { setCode(e.target.value); setResult(null); }} placeholder="Unesi kod porudžbine, npr. SM-10482" style={{ ...fieldInput, flex: 1, minWidth: 220, height: 50, borderColor: result === 'notfound' || result === 'empty' ? '#d64545' : 'var(--sm-border)' }} />
              <Button variant="primary" type="submit" iconRight={I('arrow-right', 16)}>Proveri status</Button>
            </form>
            {result === 'empty' && <div style={{ marginTop: 12, fontSize: 14, color: '#d64545' }}>Unesi kod porudžbine da nastavimo.</div>}
            {result === 'notfound' && (
              <div style={{ marginTop: 16, display: 'flex', alignItems: 'flex-start', gap: 12, background: 'var(--sm-gray-50)', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-md)', padding: '16px 18px' }}>
                <span style={{ color: '#d64545', flex: 'none', marginTop: 1 }}>{I('circle-alert', 20)}</span>
                <div style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--sm-gray-700)' }}>Nismo pronašli porudžbinu sa tim kodom. Proveri da li je kod tačan (format <b>SM-XXXXX</b>) ili nas pozovi na <a href="tel:+38163600442" style={{ color: 'var(--sm-primary)', fontWeight: 700 }}>+381 63 600 442</a>.</div>
              </div>
            )}
            {result && typeof result === 'object' && (
              <div style={{ marginTop: 24, animation: 'sm-fade-up .3s ease both' }}>
                {/* status header */}
                <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 12, paddingBottom: 18, borderBottom: '1px solid var(--sm-border)' }}>
                  <div>
                    <div style={{ fontSize: 13, color: 'var(--sm-text-muted)' }}>Porudžbina</div>
                    <div style={{ fontFamily: 'var(--sm-font-display)', fontWeight: 800, fontSize: 20 }}>{result.code}</div>
                  </div>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, height: 32, padding: '0 15px', borderRadius: 'var(--sm-radius-pill)', background: 'color-mix(in srgb, var(--sm-primary) 10%, #fff)', border: '1px solid color-mix(in srgb, var(--sm-primary) 28%, #fff)', color: 'var(--sm-primary)', fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 13.5 }}>
                    <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--sm-primary)' }}></span> {result.label || 'U obradi'}
                  </span>
                </div>
                {/* eta */}
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, margin: '16px 0 20px', fontSize: 15, color: 'var(--sm-text)' }}>
                  {I('clock', 18, { color: 'var(--sm-primary)' })} Procenjena isporuka: <b style={{ fontWeight: 700 }}>{result.eta}</b>
                </div>
                {/* timeline */}
                <div style={{ display: 'flex', flexDirection: 'column' }}>
                  {steps.map(([ic, t, d], i) => {
                    const done = i < result.current, active = i === result.current;
                    const reached = done || active;
                    return (
                      <div key={i} style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', alignSelf: 'stretch' }}>
                          <span style={{ width: 36, height: 36, flex: 'none', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: reached ? 'var(--sm-primary)' : 'var(--sm-gray-100)', color: reached ? '#fff' : 'var(--sm-text-subtle)', boxShadow: active ? '0 0 0 4px color-mix(in srgb, var(--sm-primary) 20%, transparent)' : 'none' }}>{I(done ? 'check' : ic, 18)}</span>
                        {i < steps.length - 1 && <span style={{ width: 2, flex: 1, minHeight: 26, background: done ? 'var(--sm-primary)' : 'var(--sm-border)' }}></span>}
                        </div>
                        <div style={{ paddingBottom: 18 }}>
                          <div style={{ fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 16, color: reached ? 'var(--sm-text)' : 'var(--sm-text-subtle)' }}>{t}</div>
                          <div style={{ fontSize: 13.5, color: 'var(--sm-text-muted)', marginTop: 2 }}>{d}</div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            )}
          </div>
          {/* login option */}
          <div style={{ position: 'relative', overflow: 'hidden', borderRadius: 'var(--sm-radius-xl)', background: 'linear-gradient(135deg, var(--sm-primary), var(--sm-violet))', color: '#fff', padding: '22px 28px', boxShadow: 'var(--sm-shadow-md)' }}>
            <div style={{ position: 'absolute', right: -28, top: -28, width: 130, height: 130, borderRadius: '50%', background: 'rgba(255,255,255,.12)' }}></div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8, position: 'relative' }}>
              <span style={{ width: 40, height: 40, flex: 'none', borderRadius: 11, background: 'rgba(255,255,255,.16)', border: '1px solid rgba(255,255,255,.3)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{I('user-round', 21)}</span>
              <h2 style={{ margin: 0, fontFamily: 'var(--sm-font-display)', fontWeight: 600, fontSize: 21 }}>Prijavi se na nalog</h2>
            </div>
            <p style={{ margin: '0 0 16px', fontSize: 14, lineHeight: 1.55, color: 'rgba(255,255,255,.9)', position: 'relative' }}>Sa nalogom vidiš sve svoje porudžbine, status u realnom vremenu i listu želja na jednom mestu.</p>
            <form onSubmit={e => e.preventDefault()} style={{ display: 'flex', flexDirection: 'column', gap: 10, position: 'relative' }}>
              <input type="email" placeholder="E-mail adresa" style={{ height: 44, border: 'none', borderRadius: 'var(--sm-radius-sm)', padding: '0 14px', fontFamily: 'var(--sm-font-body)', fontSize: 15, outline: 'none' }} />
              <input type="password" placeholder="Lozinka" style={{ height: 44, border: 'none', borderRadius: 'var(--sm-radius-sm)', padding: '0 14px', fontFamily: 'var(--sm-font-body)', fontSize: 15, outline: 'none' }} />
              <button type="submit" style={{ height: 46, border: 'none', borderRadius: 'var(--sm-radius-pill)', background: '#fff', color: 'var(--sm-primary)', fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 16, cursor: 'pointer', marginTop: 2 }}>Prijavi se</button>
            </form>
            <div style={{ marginTop: 14, fontSize: 13.5, color: 'rgba(255,255,255,.85)', position: 'relative' }}>Nemaš nalog? <a style={{ color: '#fff', fontWeight: 700, textDecoration: 'underline', textUnderlineOffset: 3, cursor: 'pointer' }}>Registruj se</a></div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Lifestyle landing (3 promo banners) — editorial / immersive ---------- */
function LifestyleLanding({ banner, accent, eyebrow, title, lead, highlights, ctaLabel, ctaNav, onNav, keywords, shop, productCat, productTitle }) {
  const trust = [['truck', 'Brza isporuka', '3–6 radnih dana'], ['shield-check', 'Garancija 2 godine', 'Zvanična, na sve'], ['rotate-ccw', 'Povrat 14 dana', 'Bez objašnjenja']];
  const products = productCat ? (SM_DATA.PRODUCTS || []).filter(p => p.cat === productCat).slice(0, 4) : [];
  return (
    <div>
      {/* ===== HERO ===== */}
      <section style={{ position: 'relative', overflow: 'hidden', background: '#15101e' }}>
        <div style={{ position: 'absolute', inset: 0, background: `url('${window.__asset(banner)}') center 18% / cover`, transform: 'scale(1.04)' }}></div>
        <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(105deg, ${accent}f7 0%, ${accent}d9 36%, ${accent}55 70%, rgba(14,10,20,.25) 100%)` }}></div>
        <div style={{ position: 'absolute', width: 480, height: 480, left: '-7%', top: '-34%', borderRadius: '50%', background: `radial-gradient(circle, ${accent}cc, transparent 66%)`, filter: 'blur(34px)', animation: 'sm-float 9s ease-in-out infinite' }}></div>
        <div style={{ position: 'absolute', width: 420, height: 420, right: '-5%', bottom: '-42%', borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,255,255,.16), transparent 66%)', filter: 'blur(30px)', animation: 'sm-float 12s ease-in-out infinite reverse' }}></div>
        <div style={{ ...PG_WIDE, position: 'relative', zIndex: 2, padding: '48px 24px 64px', color: '#fff' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'rgba(255,255,255,.82)', marginBottom: 30 }}>
            <a onClick={() => onNav({ view: 'home' })} style={{ cursor: 'pointer', color: 'rgba(255,255,255,.82)' }}>Početna</a>
            {I('chevron-right', 14)}<span style={{ color: '#fff', fontWeight: 600 }}>{title}</span>
          </div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '7px 15px 7px 12px', borderRadius: 'var(--sm-radius-pill)', background: 'rgba(255,255,255,.16)', border: '1px solid rgba(255,255,255,.28)', backdropFilter: 'blur(6px)', marginBottom: 22, animation: 'sm-rise .8s .05s ease both' }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#fff', boxShadow: '0 0 0 4px rgba(255,255,255,.25)' }}></span>
            <span style={{ fontFamily: 'var(--sm-font-techno)', textTransform: 'uppercase', letterSpacing: '.18em', fontSize: 12, fontWeight: 600 }}>{eyebrow}</span>
          </div>
          <h1 style={{ margin: 0, color: '#fff', fontFamily: 'var(--sm-font-display)', fontWeight: 800, fontSize: 'clamp(40px, 6.4vw, 78px)', lineHeight: 1.08, letterSpacing: '-.03em', maxWidth: '15ch', textShadow: '0 2px 30px rgba(0,0,0,.25)', animation: 'sm-rise .8s .12s ease both' }}>{title}</h1>
          <p style={{ margin: '22px 0 0', fontSize: 'clamp(16px, 2vw, 20px)', lineHeight: 1.6, color: 'rgba(255,255,255,.94)', maxWidth: '54ch', animation: 'sm-rise .8s .2s ease both' }}>{lead}</p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 30, animation: 'sm-rise .8s .28s ease both' }}>
            <button onClick={() => onNav(ctaNav)} style={{ height: 54, padding: '0 30px', borderRadius: 'var(--sm-radius-pill)', border: 'none', background: '#fff', color: accent, fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 17, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 10, boxShadow: '0 12px 30px rgba(0,0,0,.22)' }}>{ctaLabel} {I('arrow-right', 19)}</button>
            <button onClick={() => onNav({ view: 'home' })} style={{ height: 54, padding: '0 26px', borderRadius: 'var(--sm-radius-pill)', border: '1.5px solid rgba(255,255,255,.4)', background: 'transparent', color: '#fff', fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 17, cursor: 'pointer' }}
              onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,.12)'} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>Nazad na početnu</button>
          </div>
        </div>
        {/* keyword ticker strip */}
        <div style={{ position: 'relative', zIndex: 2, borderTop: '1px solid rgba(255,255,255,.18)', background: 'rgba(0,0,0,.14)', backdropFilter: 'blur(4px)' }}>
          <div style={{ ...PG_WIDE, padding: '14px 24px', display: 'flex', flexWrap: 'wrap', gap: '10px 26px', alignItems: 'center' }}>
            {keywords.map((k, i) => (
              <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontFamily: 'var(--sm-font-display)', fontWeight: 600, fontSize: 14, color: 'rgba(255,255,255,.92)' }}>
                <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'rgba(255,255,255,.6)' }}></span>{k}
              </span>
            ))}
          </div>
        </div>
      </section>

      {/* ===== EDITORIAL HIGHLIGHTS ===== */}
      <div style={{ ...PG_WIDE, padding: '60px 24px 8px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, .8fr) minmax(0, 1.6fr)', gap: 40, alignItems: 'start' }}>
          <div style={{ position: 'sticky', top: 90 }}>
            <span style={{ display: 'inline-block', width: 46, height: 4, borderRadius: 2, background: accent, marginBottom: 18 }}></span>
            <h2 style={{ fontSize: 'clamp(28px, 3.4vw, 40px)', fontWeight: 800, margin: 0, lineHeight: 1.08, letterSpacing: '-.02em' }}>Šta ćeš naći</h2>
            <p style={{ fontSize: 15.5, lineHeight: 1.65, color: 'var(--sm-text-muted)', margin: '14px 0 0', maxWidth: '34ch' }}>Pažljivo izabran asortiman — sve na jednom mestu, uz proverene brendove i SUPER cene.</p>
          </div>
          <div>
            {highlights.map((h, i) => (
              <a key={i} onClick={() => onNav(h.nav)} style={{ display: 'flex', alignItems: 'center', gap: 22, padding: '24px 6px', borderTop: i ? '1px solid var(--sm-border)' : 'none', cursor: 'pointer', textDecoration: 'none', transition: 'padding-left .2s' }}
                onMouseEnter={e => { e.currentTarget.style.paddingLeft = '16px'; const ar = e.currentTarget.querySelector('.lf-arrow'); if (ar) { ar.style.background = accent; ar.style.color = '#fff'; ar.style.transform = 'translateX(2px)'; } }}
                onMouseLeave={e => { e.currentTarget.style.paddingLeft = '6px'; const ar = e.currentTarget.querySelector('.lf-arrow'); if (ar) { ar.style.background = accent + '14'; ar.style.color = accent; ar.style.transform = 'none'; } }}>
                <span style={{ flex: 'none', fontFamily: 'var(--sm-font-display)', fontWeight: 800, fontSize: 40, lineHeight: 1, color: accent + '38', minWidth: 56 }}>0{i + 1}</span>
                <span style={{ flex: 'none', width: 52, height: 52, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 15, background: accent + '14', color: accent }}>{I(h.icon, 25)}</span>
                <span style={{ flex: 1, minWidth: 0 }}>
                  <span style={{ display: 'block', fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 20, color: 'var(--sm-text)', lineHeight: 1.2 }}>{h.title}</span>
                  <span style={{ display: 'block', fontSize: 14.5, color: 'var(--sm-text-muted)', marginTop: 4, lineHeight: 1.55 }}>{h.desc}</span>
                </span>
                <span className="lf-arrow" style={{ flex: 'none', width: 42, height: 42, borderRadius: '50%', background: accent + '14', color: accent, display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'background .18s, color .18s, transform .18s' }}>{I('arrow-up-right', 20)}</span>
              </a>
            ))}
          </div>
        </div>
      </div>

      {/* ===== TRUST STRIP ===== */}
      <div style={{ ...PG_WIDE, padding: '44px 24px 8px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 0, background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-xl)', overflow: 'hidden', boxShadow: 'var(--sm-shadow-xs)' }}>
          {trust.map(([ic, t, s], i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '22px 26px', borderRight: i < 2 ? '1px solid var(--sm-border)' : 'none' }}>
              <span style={{ width: 46, height: 46, flex: 'none', borderRadius: 13, background: accent + '14', color: accent, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{I(ic, 23)}</span>
              <span>
                <span style={{ display: 'block', fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 16 }}>{t}</span>
                <span style={{ display: 'block', fontSize: 13.5, color: 'var(--sm-text-muted)', marginTop: 2 }}>{s}</span>
              </span>
            </div>
          ))}
        </div>
      </div>

      {/* ===== PRODUCTS ===== */}
      {products.length > 0 && shop && (
        <div style={{ ...PG_WIDE, padding: '8px 24px 8px' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 16, marginBottom: 18, flexWrap: 'wrap' }}>
            <h3 style={{ margin: 0, fontFamily: 'var(--sm-font-display)', fontWeight: 800, fontSize: 'clamp(20px, 2.4vw, 26px)', letterSpacing: '-.01em' }}>{productTitle || 'Izdvajamo iz ponude'}</h3>
            <a onClick={() => onNav({ view: 'category', slug: productCat })} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: accent, fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 15, cursor: 'pointer' }}>Vidi sve {I('arrow-right', 16)}</a>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {products.map(p => <ProductCard key={p.id} p={p} onAdd={shop.onAdd} onOpen={shop.openProduct} onWish={shop.onWish} wished={(shop.wishlist || []).includes(p.id)} />)}
          </div>
        </div>
      )}

      {/* ===== CTA BAND ===== */}
      <div style={{ ...PG_WIDE, padding: '40px 24px 66px' }}>
        <div style={{ position: 'relative', overflow: 'hidden', borderRadius: 'var(--sm-radius-xl)', background: `linear-gradient(120deg, ${accent}, ${accent}cc)`, color: '#fff', padding: '40px 40px', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 20 }}>
          <div style={{ position: 'absolute', right: -40, top: -40, width: 180, height: 180, borderRadius: '50%', background: 'rgba(255,255,255,.1)' }}></div>
          <div style={{ position: 'absolute', right: 90, bottom: -60, width: 150, height: 150, borderRadius: '50%', background: 'rgba(255,255,255,.07)' }}></div>
          <div style={{ position: 'relative' }}>
            <h3 style={{ margin: 0, fontFamily: 'var(--sm-font-display)', fontWeight: 800, fontSize: 'clamp(24px, 3vw, 32px)', color: '#fff', letterSpacing: '-.01em' }}>Spreman da kreneš?</h3>
            <p style={{ margin: '8px 0 0', fontSize: 16, color: 'rgba(255,255,255,.92)' }}>Pogledaj kompletnu ponudu i pronađi tačno ono što ti treba.</p>
          </div>
          <button onClick={() => onNav(ctaNav)} style={{ position: 'relative', height: 54, padding: '0 30px', borderRadius: 'var(--sm-radius-pill)', border: 'none', background: '#fff', color: accent, fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 17, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 10, boxShadow: '0 10px 26px rgba(0,0,0,.18)' }}>{ctaLabel} {I('arrow-right', 19)}</button>
        </div>
      </div>
    </div>
  );
}

function LepotaLanding({ onNav, shop }) {
  return <LifestyleLanding onNav={onNav} shop={shop} productCat="lepota" productTitle="Izdvajamo za tvoj home spa" accent="#7D5499" banner={SM_DATA.A + '/banners/promo-lepota-photo.png'}
    eyebrow="Home spa" title="Tvoj ritual lepote počinje ovde!" lead="Fenovi, pegle, LED maske i sve što ti treba za savršen home spa doživljaj — vrhunska nega bez izlaska iz kuće."
    ctaLabel="Istraži lepotu" ctaNav={{ view: 'cathub', slug: 'lepota' }}
    keywords={['Fenovi', 'Pegle za kosu', 'LED maske', 'IPL depilacija', 'Masažeri', 'Nega lica']}
    highlights={[
      { icon: 'wind', title: 'Oblikovanje kose', desc: 'Profesionalni fenovi, prese, uvijači i multistajleri.', nav: { view: 'cathub', slug: 'lepota' } },
      { icon: 'sparkles', title: 'Nega lica', desc: 'LED maske i uređaji za čišćenje i podmlađivanje kože.', nav: { view: 'cathub', slug: 'lepota' } },
      { icon: 'scissors', title: 'Depilacija i trimeri', desc: 'IPL aparati, epilatori i trimeri za telo.', nav: { view: 'cathub', slug: 'lepota' } },
      { icon: 'waves', title: 'Wellness i relaksacija', desc: 'Masažeri, kupke za stopala i oprema za opuštanje.', nav: { view: 'cathub', slug: 'lepota' } },
    ]} />;
}
function NoviDomLanding({ onNav, shop }) {
  return <LifestyleLanding onNav={onNav} shop={shop} productCat="bela-tehnika" productTitle="Izdvajamo za tvoj dom" accent="#3f7d4f" banner={SM_DATA.A + '/banners/promo-novidom-photo.png'}
    eyebrow="Renoviraš ili se useljavaš" title="Novi dom zaslužuje pravu opremu." lead="Bilo da renoviraš ili tek useljavaš — pomoći ćemo ti da izabereš ono što ti zaista treba, uz posebne cene za veće porudžbine."
    ctaLabel="Opremi dom" ctaNav={{ view: 'cathub', slug: 'bela-tehnika' }}
    keywords={['Frižideri', 'Mašine za veš', 'Šporeti', 'Aspiratori', 'Klima uređaji', 'Veleprodaja']}
    highlights={[
      { icon: 'refrigerator', title: 'Bela tehnika', desc: 'Frižideri, mašine za veš i sudove, zamrzivači.', nav: { view: 'cathub', slug: 'bela-tehnika' } },
      { icon: 'cooking-pot', title: 'Kuhinja', desc: 'Šporeti, rerne, aspiratori i ugradna tehnika.', nav: { view: 'cathub', slug: 'bela-tehnika' } },
      { icon: 'wind', title: 'Klima i grejanje', desc: 'Klima uređaji, grejalice i prečišćivači vazduha.', nav: { view: 'cathub', slug: 'klima' } },
      { icon: 'building-2', title: 'Za veće porudžbine', desc: 'Posebne cene i savet pri opremanju celog doma.', nav: { view: 'page', key: 'pravna-lica' } },
    ]} />;
}
function SportLanding({ onNav, shop }) {
  return <LifestyleLanding onNav={onNav} shop={shop} productCat="sport" productTitle="Izdvajamo za aktivan život" accent="#3f6b86" banner={SM_DATA.A + '/banners/promo-sport-photo.png'}
    eyebrow="Aktivan život" title="Sport i avantura počinju ovde!" lead="Sve što ti treba za aktivan život — električni trotineti, bicikla, sportska oprema i oprema za putovanje."
    ctaLabel="Istraži ponudu" ctaNav={{ view: 'category', slug: null }}
    keywords={['E-trotineti', 'Električni bicikli', 'Trake za trčanje', 'Pametni satovi', 'Oprema za put']}
    highlights={[
      { icon: 'bike', title: 'E-bicikli i trotineti', desc: 'Električni bicikli, trotineti i dodatna oprema.', nav: { view: 'category', slug: null } },
      { icon: 'dumbbell', title: 'Fitnes oprema', desc: 'Trake za trčanje, sobni bicikli i tegovi.', nav: { view: 'category', slug: null } },
      { icon: 'luggage', title: 'Oprema za putovanje', desc: 'Koferi, rančevi i gadgeti za put.', nav: { view: 'category', slug: null } },
      { icon: 'watch', title: 'Pametni satovi', desc: 'Sportski satovi i narukvice za praćenje aktivnosti.', nav: { view: 'cathub', slug: 'telefoni' } },
    ]} />;
}

/* ---------- Dostava ---------- */
function DostavaPage({ onNav }) {
  const rows = [
    ['refrigerator', 'Bela tehnika', 'Frižideri, veš mašine, šporeti, zamrzivači i ostali veliki kućni uređaji.', '1.800 din'],
    ['plug', 'Mali kućni aparati i ostale kategorije', 'Mali aparati, elektronika, alati i sve ostale kategorije iz asortimana.', '350–720 din'],
    ['dumbbell', 'Fitnes sprave', 'Trake za trčanje, sobni bicikli, multifunkcionalne sprave i oprema za vežbanje.', '1.200–1.800 din'],
    ['truck', 'Vangabaritne pošiljke', 'Posebno glomazne ili teške pošiljke — cenu dostave dogovaramo telefonski.', 'Pozovite nas'],
  ];
  return (
    <div>
      {/* immersive hero with the SuperMedia delivery van */}
      <div style={{ position: 'relative', overflow: 'hidden', background: '#0e0a16' }}>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(120% 130% at 18% 10%, rgba(136,81,182,.40), transparent 58%)' }}></div>
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(135deg, rgba(96,53,159,.30), rgba(14,10,22,0) 55%)' }}></div>
        <div style={{ position: 'absolute', width: 520, height: 520, left: '-8%', top: '-34%', borderRadius: '50%', background: 'radial-gradient(circle, rgba(136,81,182,.42), transparent 65%)', filter: 'blur(40px)', animation: 'sm-float 10s ease-in-out infinite' }}></div>
        <div style={{ position: 'absolute', width: 440, height: 440, right: '-6%', bottom: '-46%', borderRadius: '50%', background: 'radial-gradient(circle, rgba(125,84,153,.38), transparent 65%)', filter: 'blur(40px)', animation: 'sm-float 13s ease-in-out infinite reverse' }}></div>
        <div style={{ ...PG_WIDE, position: 'relative', zIndex: 2, padding: '40px 24px 0', color: '#fff' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'rgba(255,255,255,.7)', marginBottom: 22 }}>
            <a onClick={() => onNav({ view: 'home' })} style={{ cursor: 'pointer', color: 'rgba(255,255,255,.7)' }}>Početna</a>
            {I('chevron-right', 14)}<span style={{ color: '#fff', fontWeight: 600 }}>Dostava</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.15fr)', gap: 24, alignItems: 'center' }}>
            <div style={{ padding: '8px 0 48px' }}>
              <div style={{ fontFamily: 'var(--sm-font-techno)', textTransform: 'uppercase', letterSpacing: '.18em', fontSize: 13, color: 'var(--sm-purple-200)', marginBottom: 14, animation: 'sm-rise .8s .05s ease both' }}>Brza i sigurna isporuka</div>
              <h1 style={{ margin: 0, color: '#fff', fontFamily: 'var(--sm-font-display)', fontWeight: 800, fontSize: 'clamp(40px, 5.5vw, 64px)', lineHeight: 1.04, letterSpacing: '-.02em', animation: 'sm-rise .8s .12s ease both' }}>Stiže do tvojih vrata.</h1>
              <p style={{ margin: '18px 0 0', fontSize: 'clamp(16px, 2vw, 19px)', lineHeight: 1.6, color: 'rgba(255,255,255,.82)', maxWidth: '46ch', animation: 'sm-rise .8s .2s ease both' }}>Dostava se vrši našim vozilima ili kurirskim službama sa kojima sarađujemo — brzo, pažljivo i na celoj teritoriji Srbije.</p>
              <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 30, animation: 'sm-rise .8s .28s ease both' }}>
                <Button variant="light" size="lg" iconRight={I('arrow-right', 20)} onClick={() => onNav({ view: 'category', slug: null })}>Pogledaj ponudu</Button>
                <a href="tel:+381636000442" style={{ height: 54, padding: '0 28px', borderRadius: 'var(--sm-radius-pill)', border: '1.5px solid rgba(255,255,255,.35)', background: 'transparent', color: '#fff', fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 18, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}
                  onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,.1)'}
                  onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>{I('phone', 18)} +381 63 600 442</a>
              </div>
            </div>
            <div style={{ position: 'relative', minHeight: 300, display: 'flex', alignItems: 'flex-end', justifyContent: 'center', animation: 'sm-rise .9s .25s ease both' }}>
              {/* bright spotlight so the dark van separates from the dark background */}
              <div aria-hidden="true" style={{ position: 'absolute', top: '6%', left: '50%', transform: 'translateX(-50%)', width: '94%', height: '88%', borderRadius: '50%', background: 'radial-gradient(ellipse at 50% 45%, rgba(173,130,214,.55), rgba(136,81,182,.28) 45%, transparent 72%)', filter: 'blur(34px)' }}></div>
              <div aria-hidden="true" style={{ position: 'absolute', top: '14%', left: '52%', transform: 'translateX(-50%)', width: '70%', height: '64%', borderRadius: '50%', background: 'radial-gradient(ellipse at center, rgba(255,255,255,.16), transparent 68%)', filter: 'blur(26px)' }}></div>
              {/* speed lines */}
              <div aria-hidden="true" style={{ position: 'absolute', right: '4%', top: '36%', display: 'flex', flexDirection: 'column', gap: 14, opacity: .6 }}>
                {[120, 80, 150, 64].map((w, i) => (
                  <span key={i} style={{ width: w, height: 5, borderRadius: 3, background: 'linear-gradient(90deg, transparent, var(--sm-purple-200))', filter: 'blur(.5px)' }}></span>
                ))}
              </div>
              {/* glow pad under the van */}
              <div style={{ position: 'absolute', bottom: 24, width: '80%', height: 78, borderRadius: '50%', background: 'radial-gradient(ellipse at center, rgba(173,130,214,.7), transparent 70%)', filter: 'blur(20px)' }}></div>
              <img src={SM_DATA.A + '/supermedia-van.png'} alt="SuperMedia dostavno vozilo" style={{ position: 'relative', width: '102%', maxWidth: 660, height: 'auto', objectFit: 'contain', filter: 'drop-shadow(0 0 1px rgba(190,150,230,.9)) drop-shadow(0 26px 30px rgba(0,0,0,.55))', animation: 'sm-float 7s ease-in-out infinite' }} />
            </div>
          </div>
        </div>
      </div>

      {/* how delivery works */}
      <div style={{ ...PG_WIDE, padding: '44px 24px 8px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: 18 }}>
          <InfoCard icon="truck" title="Našim vozilima">Veće i osetljive pošiljke isporučujemo sopstvenim vozilima, uz pažljivo rukovanje i dogovor termina.</InfoCard>
          <InfoCard icon="package-check" title="Kurirskim službama">Za ostale pošiljke sarađujemo sa pouzdanim kurirskim službama koje pokrivaju celu Srbiju.</InfoCard>
          <InfoCard icon="clock" title="Rok isporuke">Standardna isporuka stiže za 3 do 6 radnih dana, u zavisnosti od artikla i adrese.</InfoCard>
        </div>
      </div>

      {/* pricing table */}
      <div style={{ ...PG_WIDE, padding: '40px 24px 8px' }}>
        <h2 style={{ fontSize: 26, fontWeight: 800, margin: '0 0 6px' }}>Cene dostave</h2>
        <p style={{ margin: '0 0 22px', fontSize: 15.5, color: 'var(--sm-text-muted)' }}>Cena dostave zavisi od kategorije i dimenzija proizvoda.</p>
        <div style={{ background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-xl)', boxShadow: 'var(--sm-shadow-xs)', overflow: 'hidden' }}>
          {rows.map(([ic, t, d, price], i) => {
            const isCall = price === 'Pozovite nas';
            return (
            <div key={t} onClick={isCall ? () => onNav({ view: 'page', key: 'kontakt' }) : undefined} style={{ display: 'flex', alignItems: 'center', gap: 20, padding: '20px 26px', borderTop: i ? '1px solid var(--sm-border)' : 'none', cursor: isCall ? 'pointer' : 'default', transition: 'background .15s' }}
              onMouseEnter={isCall ? (e => e.currentTarget.style.background = 'var(--sm-purple-50)') : undefined}
              onMouseLeave={isCall ? (e => e.currentTarget.style.background = 'transparent') : undefined}>
              <span style={{ width: 52, height: 52, flex: 'none', borderRadius: 14, background: 'var(--sm-purple-50)', color: 'var(--sm-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{I(ic, 25)}</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 18 }}>{t}</div>
                <div style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--sm-text-muted)', marginTop: 3 }}>{d}</div>
              </div>
              <div style={{ flex: 'none', textAlign: 'right', fontFamily: 'var(--sm-font-display)', fontWeight: 800, fontSize: isCall ? 17 : 20, color: isCall ? 'var(--sm-primary)' : 'var(--sm-text)', whiteSpace: 'nowrap', display: 'inline-flex', alignItems: 'center', gap: 7 }}>{price}{isCall && I('arrow-right', 18)}</div>
            </div>
            );
          })}
        </div>
      </div>

      <PageOutro title="Spreman za kupovinu?" text="Izaberi proizvode, a mi se brinemo da brzo i bezbedno stignu do tvoje adrese." onNav={onNav} />
    </div>
  );
}

/* ---------- router ---------- */
function Page({ pageKey, onNav, onAdd, onWish, wishlist, openProduct }) {
  const shop = { onAdd, onWish, wishlist, openProduct };
  switch (pageKey) {
    case 'o-nama': return <AboutImmersive onNav={onNav} />;
    case 'kontakt': return <ContactPage onNav={onNav} variant="kontakt" />;
    case 'pravna-lica': return <PravnaLica onNav={onNav} />;
    case 'faq': return <FAQPage onNav={onNav} />;
    case 'placanje': return <PlacanjePage onNav={onNav} />;
    case 'brendovi': return <BrendoviPage onNav={onNav} />;
    case 'poklon-vauceri': return <VoucerPage onNav={onNav} onAdd={onAdd} />;
    case 'reklamacije': return <ReklamacijePage onNav={onNav} />;
    case 'servis': return <ServisPage onNav={onNav} />;
    case 'dostava': return <DostavaPage onNav={onNav} />;
    case 'karijera': return <KarijeraPage onNav={onNav} />;
    case 'privatnost': return <PolitikaPrivatnostiPage onNav={onNav} />;
    case 'prava-potrosaca': return <PravaPotrosacaPage onNav={onNav} />;
    case 'uslovi': return <UsloviKoriscenjaPage onNav={onNav} />;
    case 'prati-porudzbinu': return <PratiPorudzbinuPage onNav={onNav} />;
    case 'lifestyle-lepota': return <LepotaLanding onNav={onNav} shop={shop} />;
    case 'lifestyle-novidom': return <NoviDomLanding onNav={onNav} shop={shop} />;
    case 'lifestyle-sport': return <SportLanding onNav={onNav} shop={shop} />;
    default: return <FAQPage onNav={onNav} />;
  }
}

Object.assign(window, { Page });