// Footer.jsx — Oblak i Sunce UI Kit
// Linkovi prate pravu strukturu kataloga (kategorije/brendovi sa bekenda).

const T = window.OBS_TOKENS;

// Isti prefiks trik kao u Header.jsx — footer se koristi i sa root i iz pages/
// apsolutne putanje (rade na starim i čistim URL-ovima)
const footUrl = (page) => '/pages/' + page;

const FOOTER_SHOP = [
  ['Igračke i Edukacija', 'category.html?cat=Igra%C4%8Dke%20i%20Edukacija'],
  ['Oprema za bebe', 'category.html?cat=Oprema%20za%20bebe'],
  ['Kućni tekstil i Dekor', 'category.html?cat=Ku%C4%87ni%20tekstil%20i%20Dekor'],
  ['Odjeća i Obuća', 'category.html?cat=Odje%C4%87a%20i%20Obu%C4%87a'],
  ['Aksesoari', 'category.html?cat=Aksesoari'],
  ['Ljeto i Plaža', 'category.html?cat=Ljeto%20i%20Pla%C5%BEa'],
  ['Svi proizvodi', 'category.html'],
];

const FOOTER_BRANDS = [
  ['grech & co', 'brand-detail.html?id=grech'],
  ['Lorena Canals', 'brand-detail.html?id=lorena-canals'],
  ['Oli & Carol', 'brand-detail.html?id=oli-and-carol'],
  ['Sticky Lemon', 'brand-detail.html?id=sticky-lemon'],
  ['Bakoba', 'brand-detail.html?id=bakoba'],
  ['Learn and Grow', 'brand-detail.html?id=learn-and-grow'],
  ['Svi brendovi →', 'brands.html'],
];

const FOOTER_INFO = [
  ['O nama', 'o-nama.html'],
  ['Kontakt', 'kontakt.html'],
  ['Blog', 'blog.html'],
  ['Moj nalog', 'account.html'],
  ['Lista želja', 'wishlist.html'],
];
const FOOTER_LEGAL = [
  ['Politika privatnosti', 'legal.html?page=politika-privatnosti'],
  ['Online plaćanje', 'legal.html?page=online-placanje'],
  ['Izjava o konverziji', 'legal.html?page=izjava-o-konverziji'],
  ['Opšti uslovi korišćenja', 'legal.html?page=uslovi-koriscenja'],
  ['Reklamacije i pravo na odustajanje', 'legal.html?page=reklamacije-i-odustajanje'],
  ['Politika kolačića', 'legal.html?page=politika-kolacica'],
];

function Footer() {
  return (
    <footer style={{ background: T.textDark, color: 'white', padding: '64px 48px 28px', position: 'relative' }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1.3fr', gap: 48, marginBottom: 48 }}>
          {/* Brand */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
              <img src={window.OBS_LOGO} alt="Oblak i Sunce" style={{ height: 40, objectFit: 'contain', filter: 'brightness(0) invert(1)' }} />
            </div>
            <p style={{ color: 'rgba(255,255,255,0.4)', fontSize: 13.5, lineHeight: 1.8, maxWidth: 280, fontWeight: 300, fontFamily: "'Outfit', sans-serif" }}>
              Najposjećeniji baby shop u Crnoj Gori. Sa vama od prvog koraka — jer samo najbolje je dovoljno dobro za vaše mališane.
            </p>
            <div style={{ display: 'flex', gap: 9, marginTop: 20 }}>
              {['IG', 'FB', 'TT'].map(s => (
                <div key={s} style={{ width: 38, height: 38, borderRadius: '50%', border: '1px solid rgba(255,255,255,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 600, color: 'rgba(255,255,255,0.45)', cursor: 'pointer', fontFamily: "'Outfit', sans-serif", transition: 'all 0.3s' }}>{s}</div>
              ))}
            </div>
          </div>

          {/* Shop */}
          <div>
            <h4 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 15, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: T.terracottaLight, marginBottom: 18 }}>Shop</h4>
            {FOOTER_SHOP.map(([l, href]) => (
              <a key={l} href={footUrl(href)} style={{ display: 'block', color: 'rgba(255,255,255,0.5)', textDecoration: 'none', fontSize: 13.5, padding: '4px 0', fontFamily: "'Outfit', sans-serif", fontWeight: 300, transition: 'all 0.3s' }}>{l}</a>
            ))}
          </div>

          {/* Brendovi */}
          <div>
            <h4 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 15, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: T.terracottaLight, marginBottom: 18 }}>Brendovi</h4>
            {FOOTER_BRANDS.map(([l, href], i) => (
              <a key={l} href={footUrl(href)} style={{ display: 'block', color: i === FOOTER_BRANDS.length - 1 ? T.terracottaLight : 'rgba(255,255,255,0.5)', textDecoration: 'none', fontSize: 13.5, padding: '4px 0', fontFamily: "'Outfit', sans-serif", fontWeight: 300, transition: 'all 0.3s' }}>{l}</a>
            ))}
          </div>

          {/* Info */}
          <div>
            <h4 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 15, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: T.terracottaLight, marginBottom: 18 }}>Info</h4>
            {FOOTER_INFO.map(([l, href]) => (
              <a key={l} href={footUrl(href)} style={{ display: 'block', color: 'rgba(255,255,255,0.5)', textDecoration: 'none', fontSize: 13.5, padding: '4px 0', fontFamily: "'Outfit', sans-serif", fontWeight: 300 }}>{l}</a>
            ))}
          </div>

          {/* Contact */}
          <div>
            <h4 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 15, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: T.terracottaLight, marginBottom: 18 }}>Posjetite nas</h4>
            <p style={{ color: 'rgba(255,255,255,0.5)', fontSize: 13.5, lineHeight: 1.85, fontWeight: 300, fontFamily: "'Outfit', sans-serif" }}>
              Marka Đukanovića 5<br />City Kvart, Podgorica<br />Crna Gora
            </p>
            <p style={{ color: 'rgba(255,255,255,0.5)', fontSize: 13.5, marginTop: 14, lineHeight: 1.85, fontWeight: 300, fontFamily: "'Outfit', sans-serif" }}>
              📞 +382 67 230 537<br />✉️ info@oblakisunce.me
            </p>
            <div style={{ marginTop: 16, padding: '12px 14px', borderRadius: 14, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.06)' }}>
              <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.1em', color: T.terracottaLight, marginBottom: 6, textTransform: 'uppercase', fontFamily: "'Outfit', sans-serif" }}>Radno vrijeme</div>
              <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.45)', lineHeight: 1.65, fontFamily: "'Outfit', sans-serif", fontWeight: 300 }}>
                Pon — Pet: 09:00 — 20:00<br />Subota: 09:00 — 16:00<br />Nedjelja: Zatvoreno
              </div>
            </div>
          </div>
        </div>

        {/* Pravne stranice */}
        <div style={{ borderTop: '1px solid rgba(255,255,255,0.06)', paddingTop: 22, marginBottom: 18, display: 'flex', flexWrap: 'wrap', gap: '8px 22px' }}>
          {FOOTER_LEGAL.map(([l, href]) => (
            <a key={l} href={footUrl(href)} style={{ color: 'rgba(255,255,255,0.5)', textDecoration: 'none', fontSize: 12, fontFamily: "'Outfit', sans-serif", fontWeight: 300 }}>{l}</a>
          ))}
        </div>

        {/* Bottom bar */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
          <p style={{ fontSize: 11.5, color: 'rgba(255,255,255,0.28)', fontWeight: 300, fontFamily: "'Outfit', sans-serif" }}>© 2026 Oblak i Sunce d.o.o. · PIB 03220168 · Sva prava zadržana.</p>
          <div style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
            {['VISA', 'Mastercard', 'PayPal', 'Apple Pay'].map(p => (
              <span key={p} style={{ fontSize: 10.5, color: 'rgba(255,255,255,0.22)', fontWeight: 500, letterSpacing: '0.04em', fontFamily: "'Outfit', sans-serif" }}>{p}</span>
            ))}
          </div>
        </div>

        {/* Made by Studio Piksel */}
        <div style={{ borderTop: '1px solid rgba(255,255,255,0.05)', marginTop: 18, paddingTop: 16, textAlign: 'center' }}>
          <a href="https://www.studiopiksel.me" target="_blank" rel="noopener" className="obs-piksel"
            style={{ display: 'inline-flex', alignItems: 'center', gap: 6, textDecoration: 'none', fontSize: 11.5, color: 'rgba(255,255,255,0.38)', fontFamily: "'Outfit', sans-serif" }}>
            <span>Napravio</span>
            <span className="obs-piksel-mark" style={{ fontSize: 13.5, color: 'rgba(255,255,255,0.82)' }}>
              <span className="obs-piksel-br l">[</span>
              <span className="obs-piksel-cur" />
              <span>piksel</span>
              <span className="obs-piksel-br r">]</span>
            </span>
            <span style={{ opacity: 0.8 }}>Studio</span>
          </a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });