/* SUPERMEDIA storefront — Category hub (landing) with podkategorija tiles
 * that expand to reveal podkategorija2. Shown when entering a category from
 * the mega-menu or the homepage category tiles. */
const { useState: useStateHub } = React;

const HUB_BLURB = {
  'bela-tehnika': 'Opremi svoj dom uređajima koji traju. Frižideri, šporeti, mašine za veš i sve ostalo — proverenih brendova, po SUPER cenama, uz 2 godine garancije i dostavu na kućnu adresu.',
  'mali-aparati': 'Mali aparati koji ti štede vreme svaki dan — od jutarnje kafe do brzog ručka. Izaberi proverene brendove uz 2 godine garancije i brzu isporuku.',
  'tv-audio': 'Doživi sliku i zvuk kako treba. Televizori, soundbar sistemi, slušalice i foto oprema vrhunskog kvaliteta — sve na jednom mestu, po SUPER cenama.',
  'it-gaming': 'Sve za rad, učenje i igru. Laptopovi, računari, monitori i gaming oprema poznatih brendova — uz stručnu podršku i 2 godine garancije.',
  'telefoni': 'Ostani povezan. Telefoni, tableti, pametni satovi i dodaci — najnoviji modeli i provereni klasici, uz brzu dostavu i sigurnu kupovinu.',
  'lepota': 'Negu prepusti pravim uređajima. Fenovi, aparati za brijanje, masažeri i uređaji za zdravlje — proveren kvalitet po pristupačnim cenama.',
  'klima': 'Prijatno u svakom periodu godine. Klima uređaji, grejalice, prečišćivači i bojleri — energetski efikasni modeli uz 2 godine garancije.',
  'basta': 'Sredi dvorište i baštu lako. Kosačice, trimeri, roštilji i baštenski alat — sve što ti treba za prijatno vreme napolju.',
};

const HUB_ICONS = [
  [/frižid|zamrziv/i, 'refrigerator'],
  [/pranje|sušen/i, 'washing-machine'],
  [/šporet|ugrad|rern/i, 'cooking-pot'],
  [/kaf/i, 'coffee'],
  [/kuhinj/i, 'utensils'],
  [/održav|usisiv/i, 'sparkles'],
  [/televiz/i, 'tv'],
  [/audio|zvuč|slušal/i, 'speaker'],
  [/foto|video|kamer/i, 'camera'],
  [/računar|laptop/i, 'laptop'],
  [/gaming|konzol/i, 'gamepad-2'],
  [/oprema|mrež/i, 'cable'],
  [/telefon|tablet/i, 'smartphone'],
  [/nosiv|sat/i, 'watch'],
  [/dodac/i, 'plug-zap'],
  [/kos[ae]/i, 'wind'],
  [/lična nega/i, 'scissors'],
  [/zdravlj/i, 'heart-pulse'],
  [/klimatiz/i, 'wind'],
  [/grejan/i, 'flame'],
  [/voda|vazduh/i, 'droplets'],
  [/uživanj/i, 'flower-2'],
];
const groupIcon = (title, fallback) => {
  const m = HUB_ICONS.find(([re]) => re.test(title));
  return m ? m[1] : (fallback || 'box');
};

function CategoryHub({ slug, onNav, onAdd, onWish, wishlist, openProduct }) {
  const { CATEGORIES, PRODUCTS } = SM_DATA;
  if (slug == null) return <AllCategories onNav={onNav} />;
  const cat = CATEGORIES.find(c => c.slug === slug) || CATEGORIES[0];
  const groups = cat.groups || [];
  // slika potkategorije = prva slika pravog proizvoda iz te potkategorije
  const groupImg = (g) => { const t = (g.title || '').toLowerCase(); const hit = PRODUCTS.find(p => p.cat === cat.slug && (p.potkat || '').toLowerCase() === t && p.img); return hit ? hit.img : null; };
  const [active, setActive] = useStateHub(-1);
  const wide = { maxWidth: 1440, margin: '0 auto', padding: '0 24px' };
  const count = PRODUCTS.filter(p => p.cat === cat.slug).length;
  const tint = `color-mix(in srgb, var(--sm-cat-${cat.color || 'blue'}-1) 36%, var(--sm-bg))`;

  return (
    <div style={{ background: `linear-gradient(180deg, color-mix(in srgb, var(--sm-cat-${cat.color || 'blue'}-1) 60%, #fff), ${tint} 320px)`, minHeight: '70vh' }}>
    <div style={{ ...wide, paddingTop: 22, paddingBottom: 8 }}>
      {/* breadcrumb */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--sm-text-muted)', marginBottom: 18 }}>
        <a onClick={() => onNav({ view: 'home' })} style={{ cursor: 'pointer', color: 'var(--sm-text-muted)' }}>Početna</a>
        {I('chevron-right', 14)}<span style={{ color: 'var(--sm-text)', fontWeight: 600 }}>{cat.title}</span>
      </div>

      {/* header */}
      <div style={{ marginBottom: 26 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' }}>
          <h1 style={{ fontSize: 34, fontWeight: 600, margin: 0 }}>{cat.title}</h1>
          <span style={{ fontSize: 15, color: 'var(--sm-text-muted)' }}>{count} proizvoda</span>
        </div>
        <p style={{ fontSize: 15.5, lineHeight: 1.65, color: 'var(--sm-text-muted)', margin: '8px 0 0', maxWidth: '78ch', textWrap: 'pretty' }}>{HUB_BLURB[cat.slug] || ''}</p>
      </div>

      {/* podkategorija tiles */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(244px, 1fr))', gap: 16, alignItems: 'start' }}>
        {groups.map((g, i) => {
          const on = i === active;
          return (
            <div key={g.title} onMouseEnter={() => setActive(i)} onMouseLeave={() => setActive(-1)} style={{
              background: '#fff', border: '2px solid var(--sm-purple-200)',
              borderRadius: 'var(--sm-radius-lg)', overflow: 'hidden', transition: 'border-color .18s, box-shadow .18s',
              borderColor: on ? 'var(--sm-primary)' : 'var(--sm-purple-200)', boxShadow: on ? 'var(--sm-shadow-md)' : 'none',
            }}>
              {/* tile head — big product image, centered label below */}
              <button onClick={() => onNav({ view: 'category', slug: cat.slug, potkat: g.title })} style={{
                width: '100%', border: 'none', cursor: 'pointer', padding: '18px 18px 16px', textAlign: 'center',
                background: on ? 'linear-gradient(180deg, var(--sm-purple-50), #fff)' : '#fff', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12,
              }}>
                <div style={{ height: 196, width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <img src={groupImg(g) || g.img || cat.img} alt="" style={{ maxWidth: '82%', maxHeight: '100%', objectFit: 'contain', filter: 'drop-shadow(0 12px 22px rgba(0,0,0,.13))' }} />
                </div>
                <span style={{ fontFamily: 'var(--sm-font-display)', fontWeight: 500, fontSize: 17, color: on ? 'var(--sm-primary)' : 'var(--sm-text)' }}>{g.title}</span>
              </button>
              {/* chips — only on hover */}
              {on && (
                <div style={{ padding: '2px 14px 16px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                  {g.items.map(s => (
                    <a key={s} onClick={() => onNav({ view: 'category', slug: cat.slug, potkat: g.title, potkat2: s })} style={{
                      display: 'block', textAlign: 'center', padding: '9px 8px', borderRadius: 'var(--sm-radius-sm)', background: 'var(--sm-gray-50)',
                      fontSize: 12.5, fontWeight: 600, color: 'var(--sm-text-muted)', cursor: 'pointer', lineHeight: 1.3, transition: 'background .15s, color .15s',
                    }}
                      onMouseEnter={e => { e.currentTarget.style.background = 'var(--sm-purple-50)'; e.currentTarget.style.color = 'var(--sm-primary)'; }}
                      onMouseLeave={e => { e.currentTarget.style.background = 'var(--sm-gray-50)'; e.currentTarget.style.color = 'var(--sm-text-muted)'; }}>{s}</a>
                  ))}
                </div>
              )}
            </div>
          );
        })}
      </div>

      {/* SEO content block */}
      <SeoBlock cat={cat} groups={groups} onNav={onNav} />
    </div>
    </div>
  );
}

function SeoBlock({ cat, groups, onNav }) {
  const t = cat.title.toLowerCase();
  const go = () => onNav({ view: 'category', slug: cat.slug });
  const L = (label) => <a onClick={go} style={{ color: 'var(--sm-primary)', textDecoration: 'underline', textUnderlineOffset: 2, cursor: 'pointer', fontWeight: 600 }}>{label}</a>;
  // flatten all podkategorija2 for the inline keyword run
  const allItems = groups.flatMap(g => g.items);
  const linkRun = allItems.slice(0, 9);
  const P = { fontSize: 15, lineHeight: 1.75, color: 'var(--sm-gray-700)', margin: '0 0 16px' };
  const H = { fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 22, margin: '26px 0 14px', color: 'var(--sm-text)' };

  return (
    <section style={{ marginTop: 44, background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-xl)', padding: '34px 40px' }}>
      <p style={{ ...P, fontSize: 17, fontWeight: 600, color: 'var(--sm-text)' }}>
        Opremi svoj dom uz vrhunsku {t} — istraži SuperMedia online shop i obezbedi sebi udobnost i praktičnost uz samo par klikova.
      </p>
      <p style={P}>
        Opremanje doma kvalitetnim uređajima ključno je za stvaranje udobnog i funkcionalnog okruženja. U SuperMedia online shopu imamo širok asortiman proizvoda koji će zadovoljiti sve tvoje potrebe, pa pre kupovine slobodno obrati pažnju na sve funkcije koje će ti olakšati korišćenje i uštedeti vreme i energiju.
      </p>
      <p style={P}>
        Kada je u pitanju {t}, u našoj ponudi su {linkRun.map((s, i) => (
          <React.Fragment key={s}>{i > 0 ? (i === linkRun.length - 1 ? ' i ' : ', ') : ''}{L(s.toLowerCase())}</React.Fragment>
        ))} i mnogo više — mi smo tu da ti pružimo sve što ti je potrebno, po SUPER cenama.
      </p>

      <h2 style={H}>Opremi kompletno svoj dom uz najsavremenije modele na jednom mestu</h2>
      {groups.map(g => (
        <p key={g.title} style={P}>
          <b style={{ color: 'var(--sm-text)' }}>{L(g.title)}</b> — u ponudi su {g.items.map((s, i) => (
            <React.Fragment key={s}>{i > 0 ? (i === g.items.length - 1 ? ' i ' : ', ') : ''}{s.toLowerCase()}</React.Fragment>
          ))}. Biraj proverene brendove vrhunskog kvaliteta i pronađi model koji savršeno odgovara tvojim potrebama i prostoru.
        </p>
      ))}

      <h2 style={H}>Istraži SuperMedia ponudu i izaberi pravi uređaj za sebe</h2>
      <p style={P}>
        U SuperMediji te čeka niz pogodnosti koje ti olakšavaju kupovinu. Istraži naš online shop, iskoristi SUPER cene i sezonske popuste i naruči uz svega nekoliko klikova.
      </p>
      <p style={P}>
        Sigurna online kupovina uz samo nekoliko klikova — sve što treba je da odabereš željene uređaje, dodaš ih u korpu i izabereš način plaćanja. Tvoja porudžbina stiže brzo i sigurno, direktno na kućnu adresu, za <b style={{ color: 'var(--sm-text)' }}>3 do 6 radnih dana</b>, uz <b style={{ color: 'var(--sm-text)' }}>2 godine garancije</b> i podršku našeg tima pre i posle kupovine.
      </p>
      <p style={{ ...P, margin: 0, fontWeight: 600, color: 'var(--sm-text)' }}>
        SuperMedia — tvoja destinacija za vrhunsku {t}.
      </p>
    </section>
  );
}

/* ---------- Svi proizvodi — overview of ALL categories as hub-style cards ---------- */
const CATHUB_GRAD = {
  blue: ['var(--sm-cat-blue-1)', 'var(--sm-cat-blue-2)'], lilac: ['var(--sm-cat-lilac-1)', 'var(--sm-cat-lilac-2)'],
  gray: ['var(--sm-cat-gray-1)', 'var(--sm-cat-gray-2)'], coral: ['var(--sm-cat-coral-1)', 'var(--sm-cat-coral-2)'],
  sand: ['var(--sm-cat-sand-1)', 'var(--sm-cat-sand-2)'], mauve: ['var(--sm-cat-mauve-1)', 'var(--sm-cat-mauve-2)'],
  peach: ['var(--sm-cat-peach-1)', 'var(--sm-cat-peach-2)'], green: ['var(--sm-cat-green-1)', 'var(--sm-cat-green-2)'],
};

function AllCategories({ onNav }) {
  const { CATEGORIES, PRODUCTS } = SM_DATA;
  const A = SM_DATA.A;
  // Extra categories shown ONLY on the "Svi proizvodi" page (not on Home).
  const EXTRA = [
    { slug: 'sport-putovanje', title: 'Sport i putovanje', cutout: A + '/categories/sport-putovanje.png', cover: A + '/categories/sport-cover.png', extra: true },
  ];
  const all = [...CATEGORIES, ...EXTRA];
  const [hov, setHov] = useStateHub(-1);
  const wide = { maxWidth: 1440, margin: '0 auto', padding: '0 24px' };

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

      {/* header */}
      <div style={{ marginBottom: 26 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' }}>
          <h1 style={{ fontSize: 34, fontWeight: 600, margin: 0 }}>Svi proizvodi</h1>
          <span style={{ fontSize: 15, color: 'var(--sm-text-muted)' }}>{all.length} kategorija</span>
        </div>
        <p style={{ fontSize: 15.5, lineHeight: 1.65, color: 'var(--sm-text-muted)', margin: '8px 0 0', maxWidth: '78ch', textWrap: 'pretty' }}>Izaberi kategoriju da uđeš u podkategorije i pronađeš tačno ono što ti treba — od bele tehnike do gadgeta, sve na jednom mestu.</p>
      </div>

      {/* category tiles — same as on Home */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {all.map((c, i) => c.extra ? (
          <a key={c.slug} onClick={() => onNav({ view: 'category', slug: null })}
            onMouseEnter={() => setHov(i)} onMouseLeave={() => setHov(-1)}
            style={{ position: 'relative', display: 'block', height: 180, borderRadius: 'var(--sm-radius-lg)', overflow: 'hidden', cursor: 'pointer',
              boxShadow: hov === i ? 'var(--sm-shadow-md)' : 'var(--sm-shadow-xs)', transform: hov === i ? 'translateY(-3px)' : 'none', transition: 'transform .2s, box-shadow .2s' }}>
            <img src={c.cover} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
            <span style={{ position: 'absolute', top: 18, left: 20, zIndex: 2, maxWidth: '52%', fontFamily: 'var(--sm-font-display)', fontWeight: 600, fontSize: 22, color: '#fff', lineHeight: 1.15, letterSpacing: '-.01em', textShadow: '0 1px 10px rgba(0,0,0,.35)' }}>{c.title}</span>
            <img src={c.cutout} alt="" style={{ position: 'absolute', right: 8, bottom: 0, height: '78%', maxWidth: '66%', objectFit: 'contain', transition: 'transform .32s', transform: hov === i ? 'scale(1.05)' : 'scale(1)' }} />
          </a>
        ) : (
          <CategoryTile
            key={c.slug}
            title={c.title}
            image={c.img}
            cover={c.cover}
            imgStyle={c.imgStyle}
            color={c.color}
            height={180}
            onClick={() => onNav({ view: 'cathub', slug: c.slug })}
          />
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { CategoryHub });