/* linked.market — Category / vertical landing (mobile + desktop) */
(function () {
const h = React.createElement;
const { CATEGORIES, PRODUCTS, VENDORS, naira } = window.LM_DATA;
const { Icon, StoreCard, ProductCard, catColor } = window;

const BLURB = {
  fashion: 'Ready-to-wear, thrift, and made-to-measure from independent Lagos & Abuja labels.',
  gadgets: 'Tested phones, audio and accessories — genuine stock from trusted sellers.',
  beauty: 'Clean skincare and fragrance, curated for Nigerian weather.',
  home: 'Considered homeware — ceramics, linens and light.',
  food: 'Pantry staples and small-batch makers.',
  craft: 'Hand-made leather, textiles and objects, built to last.',
};

function Category(props) {
  const { device, cat, marked, onMark, onOpen, onOpenStore, onBack } = props;
  const meta = CATEGORIES.find(c => c.id === cat) || { id: cat, label: cat };
  const items = PRODUCTS.filter(p => p.cat === cat);
  const vendors = Object.values(VENDORS).filter(v => v.cat === cat);
  const col = catColor(cat);
  const desktop = device === 'desktop';

  const band = h('div', { style: { position: 'relative', overflow: 'hidden', borderRadius: desktop ? 0 : 'var(--r-2xl)', background: 'var(--bg-warm)' } },
    h('div', { style: { position: 'absolute', inset: 0, background: col, opacity: 0.14 } }),
    h('div', { style: { position: 'relative', padding: desktop ? '52px 40px' : '64px 22px 32px' } },
      h('div', { className: 'eyebrow', style: { color: col } }, 'Category'),
      h('h1', { className: 't-display', style: { fontSize: desktop ? 64 : 42, marginTop: 10 } }, meta.label),
      h('p', { style: { fontSize: desktop ? 17 : 14.5, color: 'var(--ink-2)', marginTop: 12, maxWidth: 460, lineHeight: 1.5 } }, BLURB[cat] || ''),
      h('div', { style: { display: 'flex', gap: 18, marginTop: 18, fontSize: 13.5, color: 'var(--ink-2)', fontWeight: 500 } },
        h('span', null, h('b', { className: 'price', style: { color: 'var(--ink)' } }, items.length), ' products'),
        h('span', null, h('b', { className: 'price', style: { color: 'var(--ink)' } }, vendors.length), ' vendors')),
    ));

  const inner = h(React.Fragment, null,
    vendors.length > 0 && h('div', { style: { marginTop: desktop ? 40 : 26 } },
      h('div', { className: 'sechead', style: { marginBottom: 16 } }, h('div', { className: 'h', style: { fontSize: desktop ? 22 : 19 } }, 'Top ', meta.label.toLowerCase(), ' stores')),
      h('div', { className: 'hscroll', style: { gap: device === 'desktop' ? 18 : 12 } },
        vendors.map(v => h(StoreCard, { key: v.handle, vendor: v, width: desktop ? 280 : 256, onOpen: onOpenStore })))),
    h('div', { style: { marginTop: desktop ? 44 : 28 } },
      h('div', { className: 'sechead', style: { marginBottom: 18 } }, h('div', { className: 'h', style: { fontSize: desktop ? 22 : 19 } }, 'All ', meta.label.toLowerCase())),
      h('div', { style: { display: 'grid', gridTemplateColumns: desktop ? 'repeat(4, 1fr)' : '1fr 1fr', gap: desktop ? 20 : 12 } },
        items.map(p => h(ProductCard, { key: p.id, p, marked: marked.has(p.id), onMark, onOpen, ratio: '4/5' })))));

  if (desktop) {
    return h('div', { className: 'screen-fade' },
      band,
      h('div', { style: { maxWidth: 1160, margin: '0 auto', padding: '0 40px 64px' } }, inner));
  }
  return h(React.Fragment, null,
    h('div', { className: 'lm-scroll screen-fade' },
      h('div', { style: { padding: '14px 16px 110px' } }, band, inner)),
    h('div', { className: 'backbar' },
      h('button', { className: 'round-btn', onClick: onBack }, h(Icon, { name: 'chevL' })),
      h('button', { className: 'round-btn' }, h(Icon, { name: 'search' }))));
}

window.Category = Category;
})();